martpet•11mo ago

How to use `f-partial` from Fresh?

Show me an example of using f-partial in a Deno Fresh project.

20 Replies

martpetOP•11mo ago

Hey, bot

Have you seen https://fresh.deno.dev/docs/concepts/partials ?

Partials allow areas of a page to be updated without causing the browser to reload the page. They enable optimized fine grained UI updates and can be used to do client-side navigation.

martpetOP•11mo ago

Hi Marvin. Yes, I've been looking at the docs and the blog post, but I'm missing something.

marvinh.•11mo ago

Happy to answer any remaining questions

martpetOP•11mo ago

So I have:

<div f-client-nav>
  <a href="somewhere">link</a>
    <Partial name="something">
    </Partial>
</div>

Then I decided to add f-partial to the link and to move the <Partial name="somthing"> to it's own file , where app wrapper and layout is not used Now the question is what do I put in place of <Partial name="something"> in the code above

marvinh.•11mo ago

The <Partial> component wraps the content that you want to be updated.

martpetOP•11mo ago

I mean, there are two files: /routes/my

<div f-client-nav>
<a href="" f-partial="/partials/my-partial">
<Partial name="foo">
my content
</Partial>
</div>

<div f-client-nav>
<a href="" f-partial="/partials/my-partial">
<Partial name="foo">
my content
</Partial>
</div>

/routes/partials/my-partial:

<Partial name="foo">
my content
</Partial>

<Partial name="foo">
my content
</Partial>

Ok, I think I got it. my content should be duplicated - once in the parent file, and once in the partial file I thought somehow that on page load the initial content would be loaded from the partial file Thank you Marvin. If someone is curious, here is how I did it: /routes/items/[id]/_(components)/ItemPartial.tsx:

return (
  <Partial name="item">
    <h1>{props.item.title}</h1>
  </Partial>
)

return (
  <Partial name="item">
    <h1>{props.item.title}</h1>
  </Partial>
)

/routes/items/[id]/partial.tsx:

const item = await fetchItem();
return (
  <ItemPartial item={item} />
)

const item = await fetchItem();
return (
  <ItemPartial item={item} />
)

/routes/items/[id]/index.tsx:

const item = await fetchItem();
return (
  <div f-client-nav>
    <a href="/items/1" f-partial="/items/1/partial">Item 1</a>
    <a href="/items/2" f-partial="/items/2/partial">Item 2</a>
    <ItemPartial item={item} />
  </div>
)

const item = await fetchItem();
return (
  <div f-client-nav>
    <a href="/items/1" f-partial="/items/1/partial">Item 1</a>
    <a href="/items/2" f-partial="/items/2/partial">Item 2</a>
    <ItemPartial item={item} />
  </div>
)

marvinh.•11mo ago

Yeah the partial file will only be requested upon user interaction

eduardobbrito•10mo ago

hi, can you please help me? Something isn't clicking here I'm trying to display some static content as a partial, just to try things out and render a possibly expensive component on the server after the initial request I'm using deco.cx, but I believe the overall structure should be the same, as the component I'm trying to add a Partial to will be server redenred. /routes/partials/Modal.tsx

import { defineRoute, RouteConfig } from "$fresh/server.ts";
import { Partial } from "$fresh/runtime.ts";

export const config: RouteConfig = {
  skipAppWrapper: true,
  skipInheritedLayouts: true,
};

export default defineRoute(() => {
  return (
    <Partial name="modal-content" mode="append">
      <p>expensive content</p>
    </Partial>
  );
});

import { defineRoute, RouteConfig } from "$fresh/server.ts";
import { Partial } from "$fresh/runtime.ts";

export const config: RouteConfig = {
  skipAppWrapper: true,
  skipInheritedLayouts: true,
};

export default defineRoute(() => {
  return (
    <Partial name="modal-content" mode="append">
      <p>expensive content</p>
    </Partial>
  );
});

/sections/ProductGallery.tsx

<div f-client-nav>
  <button f-partial={"/partials/Modal"}>MODAL</button>
  {/* How do I import the Partial here since the Modal.tsx file doesn't return a JSX component? */}
</div>

<div f-client-nav>
  <button f-partial={"/partials/Modal"}>MODAL</button>
  {/* How do I import the Partial here since the Modal.tsx file doesn't return a JSX component? */}
</div>

What I think I'm missing is that I can't find a way to use the Partial declared on /partials/Modal.tsx as a component to be included in ProductGallery.tsx, so Fresh just logs me Partial "modal-content" not found. Skipping... seems like I've understood something wrong about the concept of partials.. My code was creating multiple partials with the same name, and thats not their intent. When using the partial a single time, it all works fine i wanted to have a modal rendered (component and all, with islands etc) on a server, but only when the user requests it. But I was calling it multiple times because I wanted to have a unique call for each item in a list for a product shelf!

marvinh.•10mo ago

Yeah partial names are expected to be unique. Having multiple partials on the page with the same name doesn't work.

eduardobbrito•10mo ago

yeah thanks! I'll look into how I can have several variations of content rendered for a modal content while having a single modal component

marvinh.•10mo ago

Easiest solution would be to add another partial inside the modal one.

<Partial name="modal">
  <div class="my-cool-modal">
    <button class="close">...</button>
    <Partial name="modal-content">
      <p>here is cool content</p>
    </Partial>
  </div>
</Partial>

<Partial name="modal">
  <div class="my-cool-modal">
    <button class="close">...</button>
    <Partial name="modal-content">
      <p>here is cool content</p>
    </Partial>
  </div>
</Partial>

tavanogui•10mo ago

can we do that with a different mode at nested Partial?


<Partial name="modal">
    <Partial name="modal-content" mode="append">
      <p>here is cool content</p>
    </Partial>
</Partial>

I am trying to do that, but looks like that nested partials are ignored. My route at <a>-tag is entire page, should it work or just if I have a route that brings my nested partial?

marvinh.•10mo ago

yeah just updating the inner partial should work

tavanogui•10mo ago

any plans to make it automatic?

marvinh.•10mo ago

What do you mean with "automatic"? What would it do?

tavanogui•10mo ago

As I have replace default at parent Partial, the "append" inside is being ignored and replaced too. If I have:

<Partial name="modal">
    <p>example</p>
    <Partial name="modal-content" mode="append">
      <p>here is cool content</p>
    </Partial>
</Partial>

<Partial name="modal">
    <p>example</p>
    <Partial name="modal-content" mode="append">
      <p>here is cool content</p>
    </Partial>
</Partial>

And fetch a page with:

<Partial name="modal">
    <p>example 2</p>
    <Partial name="modal-content" mode="append">
      <p>second cool content</p>
    </Partial>
</Partial>

<Partial name="modal">
    <p>example 2</p>
    <Partial name="modal-content" mode="append">
      <p>second cool content</p>
    </Partial>
</Partial>

I expected that parent partial replace the content and nested partial append, new page like:

<Partial name="modal">
    <p>example 2</p>
    <Partial name="modal-content" mode="append">
      <p>here is cool content</p>
      <p>second cool content</p>
    </Partial>
</Partial>

<Partial name="modal">
    <p>example 2</p>
    <Partial name="modal-content" mode="append">
      <p>here is cool content</p>
      <p>second cool content</p>
    </Partial>
</Partial>

makes sense?

marvinh.•10mo ago

I see, that looks like a bug. Can you file an issue for that? Pasting the discord message here is enough

tavanogui•10mo ago

yes, https://github.com/denoland/fresh/issues/2315

ArrowsK•3mo ago

Hey, I'm using partials and they work fine - as long as I use regular text in a link (<a>), but when I put SVG icon inside the system leads me to 404 error. Any clue why?

<a href="/main/trening" f-partial="/partials/main/trening">
                klikne me
              </a>
              <a href="/main/trening" f-partial="/partials/main/trening">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 -960 960 960"
                >
                  <path d="m826-585-56-56 30-31-128-128-31 30-57-57 30-31q23-23 57-22.5t57 23.5l129 129q23 23 23 56.5T857-615l-31 30ZM346-104q-23 23-56.5 23T233-104L104-233q-23-23-23-56.5t23-56.5l30-30 57 57-31 30 129 129 30-31 57 57-30 30Zm397-336 57-57-303-303-57 57 303 303ZM463-160l57-58-302-302-58 57 303 303Zm-6-234 110-109-64-64-109 110 63 63Zm63 290q-23 23-57 23t-57-23L104-406q-23-23-23-57t23-57l57-57q23-23 56.5-23t56.5 23l63 63 110-110-63-62q-23-23-23-57t23-57l57-57q23-23 56.5-23t56.5 23l303 303q23 23 23 56.5T857-441l-57 57q-23 23-57 23t-57-23l-62-63-110 110 63 63q23 23 23 56.5T577-161l-57 57Z" />
                </svg>
              </a>