D
Deno

help

How to use `f-partial` from Fresh?

Mmartpet1/16/2024
Show me an example of using f-partial in a Deno Fresh project. Hey, bot
Mmarvinh.1/16/2024
Partials | Fresh docs
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.
Mmartpet1/16/2024
Hi Marvin. Yes, I've been looking at the docs and the blog post, but I'm missing something.
Mmarvinh.1/16/2024
Happy to answer any remaining questions
Mmartpet1/16/2024
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
Mmarvinh.1/16/2024
The <Partial> component wraps the content that you want to be updated.
Mmartpet1/16/2024
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>
)
Mmarvinh.1/16/2024
Yeah the partial file will only be requested upon user interaction
Eeduardobbrito2/5/2024
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!
Mmarvinh.2/5/2024
Yeah partial names are expected to be unique. Having multiple partials on the page with the same name doesn't work.
Eeduardobbrito2/5/2024
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
Mmarvinh.2/5/2024
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>
TTavanogui2/13/2024
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?
Mmarvinh.2/13/2024
yeah just updating the inner partial should work
TTavanogui2/13/2024
any plans to make it automatic?
Mmarvinh.2/13/2024
What do you mean with "automatic"? What would it do?
TTavanogui2/13/2024
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?
Mmarvinh.2/13/2024
I see, that looks like a bug. Can you file an issue for that? Pasting the discord message here is enough

Looking for more? Join the community!

Recommended Posts
KV watch initial valueDoes KV watch always trigger an initial read of the current value? Is there a way to only watch forThe deployment failed: Relative import path "$fresh/server.ts" not prefixed with / or ./ or ../When deploying I get this error: ``` Deploying... (100.0%) Error: The deployment failed: Relative imDeno Deploy: Timeout PageIs there a way to replace the standard deno deploy timeout error page? I have a use case where I allFresh, deno deploy microservices and authHi, I want to design a Fresh frontend and api working with deno microservices and auth. My proposalEventSource vs Multiplex webookI am setting up an system that needs realtime updates for potentially 100+ different resources on a rusty_v8 - how to pass data from js/v8 into rustHello, I am playing with rusty_v8, by following the examples I was able to get js eval up and runninDeno deploy - My simple mail service is giving a connection error (works fine locally or on vercel)As the title states my small email sending API is not working on deno deploy. Maybe there needs to bHow to send data from a child component to its sibling?I want create an app with two forms, each form in its own component. Users type in form 1, then the Can Deno list all functions within a script without explicit registration or annotation?. ## For context, here is how you do it for `globalThis`: ```ts Object.getOwnPropertyNames(globalThiTypescript intelisense between jupyter notebooksI've been trying to run jupyter notebooks with deno, but I've noticed that if I create a variable inhow to compress string into stringHow would i go about compressing a string? i need to compress a string but i need the compressed valFresh - Page title to LayoutHi, I have been browsing around the docs and also being new to JSX,I'm not sure what I look for. WhaWhen I use deno run I get this error: error : Permission denied (os error 13)When I use deno run I get this error: error : Permission denied (os error 13) (for '/Users/apple/LibAxios HttpsProxyAgentHello, I tryed to search but found nothing. I'm using axios with httpProxyAgent to proxy my outgoingGet input from an island, make calculus then render ?I have a route with 2 islands inside - one to get input from user - one to render data Once I've goHow can I create a seqential deno task to pass args to child task?Hi, I read the docs and created tasks in `deno.json` like this. https://docs.deno.com/runtime/manualUsing SCSS with FreshHi, I'm starting to get into Fresh for building simple static websites. Right now I want to use my Has anyone used React Material UI with Deno Fresh? Is this possible and also what are the componenetHas anyone used React Material UI with Deno Fresh? Is this possible and also what are the componenetJSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements'I have a core program, and from that I have auxiliary components: test, web app, cli app. Initially Using Deno.Command to run tailwindcss with watch flag not workingIf I do `new Deno.Command(Deno.execPath(), {args:["run", "-A", "npm:tailwindcss", "-i", "./styles.cs