marcusbuffett Posts - Answer Overflow

marcusbuffett

•Created by marcusbuffett on 3/29/2024 in #support

createEffect is reactive, JSX isn't

export const SavedLineView = (props: { loading: Accessor<boolean> }) => {
  createEffect(() => {
    // This gets called with true, then false, the expected behavior
    console.log("What's the value here?", props.loading());
  });
  return (
    <Show
      // This doesn't update, it's always true (the initial value)
      when={props.loading()}
      fallback={
        <div class="row w-full justify-center pt-12">
          <Puff color={c.primaries[65]} />
        </div>
      }
    >
      <SidebarTemplate header={"Moves saved!"} bodyPadding actions={[]} />
    </Show>
  );
};

export const SavedLineView = (props: { loading: Accessor<boolean> }) => {
  createEffect(() => {
    // This gets called with true, then false, the expected behavior
    console.log("What's the value here?", props.loading());
  });
  return (
    <Show
      // This doesn't update, it's always true (the initial value)
      when={props.loading()}
      fallback={
        <div class="row w-full justify-center pt-12">
          <Puff color={c.primaries[65]} />
        </div>
      }
    >
      <SidebarTemplate header={"Moves saved!"} bodyPadding actions={[]} />
    </Show>
  );
};

I have this code, where I'm accessing props.loading (which is an accessor created from createSignal), and then also accessing it in the JSX via Show. The createEffect reacts properly to the signal being updated, the JSX does not. I'm doing some weird stuff where the signal is created in response to a click, so it's maybe created with a different owner or something, but I didn't think it would matter the owner/tracking context when the signal is created, only when it's accessed. I basically thought that createEffect should be doing a very similar thing to <Show when={x()}/>, so I'm confused why one works and one doesn't. Hoping for an idea of how components "get" reactivity, so that I could understand an issue like this from first principles

7 replies

SSolidJS

•Created by marcusbuffett on 2/22/2024 in #support

How to add headers to static asset responses with Solid Start?

I want to add a couple headers to all the static asset responses, and can't figure out how to do it. I've tried adding middleware (doesn't apply to static assets), and have tried adding routeRules in the Nitro server config, but these seem to not work either.

export default defineConfig({
    start: {
        middleware: "./src/middleware/cross-origin-isolation.ts",
        ssr: false,
        server: {
            routeRules: {
                "*": {
                    headers: {
                        "Cross-Origin-Embedder-Policy": "require-corp",
                        "Cross-Origin-Opener-Policy": "same-origin",
                    },
                },
            },
        },
    },
}

export default defineConfig({
    start: {
        middleware: "./src/middleware/cross-origin-isolation.ts",
        ssr: false,
        server: {
            routeRules: {
                "*": {
                    headers: {
                        "Cross-Origin-Embedder-Policy": "require-corp",
                        "Cross-Origin-Opener-Policy": "same-origin",
                    },
                },
            },
        },
    },
}

Any ideas how I can accomplish this?

1 replies

SSolidJS

•Created by marcusbuffett on 1/29/2024 in #support

Having trouble implementing a stack of views because of the lifecycle of <Dynamic>

For my site, I have implemented a stack of views, sort of like on iOS where you can push and pop views from a shared navigation stack. But I'm having issues with how <Dynamic> renders. It's easier to show an example, so I made this minimal repro in the playground: https://playground.solidjs.com/anonymous/90d6fbd1-6114-4fb8-aa60-5c6ac104dcd3 The problem can be seen by first adding a view, then hitting "remove myself" on that view. The console log should help make it clear what the problem is too. There's no longer a view on the stack, so I'd assume the <Dynamic> component would just not render again, but what actually happens is it renders out of sync a bit, where the component renders again but the props are undefined during the last render. This has led to a footgun where I have to be careful in a view to not do anything after popping that view, and have to be overly-careful with checking for undefined props in createEffect calls, since it could be called in this weird situation where <Dynamic> is rendering one last time with a defined view but not the props associated with it. Any help would be much appreciated!

14 replies

SSolidJS

•Created by marcusbuffett on 11/15/2023 in #support

Checking if children exists breaks refs

This has been driving me insane, but I just figured out that if you do something like this : https://playground.solidjs.com/anonymous/67fefe74-34a1-48a0-8d2c-b05d3ceb7abd , then the ref you end up with isn't actually in the dom, since the ref was assigned twice, once for the actual node in the dom, and once for the props.children && "some-class-name" thing. 1) Is this a bug? 2) Is there a general pattern I should use to avoid this?

3 replies

SSolidJS

•Created by marcusbuffett on 9/6/2023 in #support

Can Solid Start export a build folder that would be compatible with Capacitor?

Capacitor requires a web directory with index.html at the root, I'm wondering how much work it would be to get my Solid Start app to output something like that. Would I have to create a separate vite config to compile the project as a regular Solid project? https://capacitorjs.com/docs/getting-started#add-capacitor-to-your-web-app

4 replies

SSolidJS

•Created by marcusbuffett on 4/1/2023 in #support

Is there an easy way to render React inside Solid?

11 replies

Gaming

Programming