eduardobbrito Comments

eduardobbrito

•Created by martpet on 1/16/2024 in #help

How to use `f-partial` from Fresh?

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

29 replies

DDeno

•Created by martpet on 1/16/2024 in #help

How to use `f-partial` from Fresh?

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!

29 replies

DDeno

•Created by martpet on 1/16/2024 in #help

How to use `f-partial` from Fresh?

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

29 replies

DDeno

•Created by martpet on 1/16/2024 in #help

How to use `f-partial` from Fresh?

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...

29 replies