flippyflops Comments - Answer Overflow

Topics

flippyflops

•Created by flippyflops on 8/23/2024 in #support

Is there a way to enforce children of a particular component type?

This works as well but I guess its just a matter of preferred ergonomics. I saw Material UI implementation in solid uses children as the API for things like this, I just haven't checked if they do any enforcing of children type (I'm guessing not?) 🤔 Do you mind giving me an example of when one might use FlowProps? I thought it was for the case I mentioned.

10 replies

•Created by flippyflops on 8/23/2024 in #support

Is there a way to enforce children of a particular component type?

export type CodeGroupProps = {
  codes: string[];
};

export function CodeGroup(props: CodeGroupProps) {
  return (
    <div class={css.codeGroup}>
      <For each={props.codes}>{(code) => <Code label={code} />}</For>
    </div>
  );
}

export type CodeGroupProps = {
  codes: string[];
};

export function CodeGroup(props: CodeGroupProps) {
  return (
    <div class={css.codeGroup}>
      <For each={props.codes}>{(code) => <Code label={code} />}</For>
    </div>
  );
}

10 replies

•Created by flippyflops on 8/23/2024 in #support

Is there a way to enforce children of a particular component type?

I was starting to think this wasn't possible in SolidJS, kind of bummed about it but as long as there is a way to enforce using props that would work too

10 replies

•Created by flippyflops on 8/12/2024 in #support

Help with creating a builder pattern for main renderer

Ah, very nice thank you for sharing! this is almost exactly what I wanted TYVM!

4 replies

•Created by flippyflops on 8/12/2024 in #support

Help with creating a builder pattern for main renderer

I may just be spent right now and need a break but I've tried a few variations with built in solidJS types and must be missing something 🤷🏼‍♂️

4 replies

•Created by flippyflops on 8/5/2024 in #support

Authenticated routes in SPA

I posted another solution in that GH link that I'll likely end up going with. TL;DR; Config-based routes seem like an after thought in @solidjs/router, perhaps by design? 🤷🏼‍♂️ Using the JSX-based approach is significantly easier to handle a groupings of "private" routes. See my comment.

7 replies

•Created by flippyflops on 8/5/2024 in #support

Authenticated routes in SPA

There are guards on the api for resource requests via Authenticatiion header / bearer token. I'm using a SPA, so the server doesn't receive a request for a new page on navigate, so checking for auth needs to happen at the FE router level and this can be a request to the auth service (or internal API if that is also the auth service) but it can't only happen on the server. I already have a way to refresh a token or redirect to login upon an Unauthenticated request for a resource.

7 replies

•Created by flippyflops on 8/4/2024 in #support

Testing createResource with dynamic import

I ended up solving this but decided to ultimately just ignore the dynamic import testing. If anyone is curious about the implementation I had to test 100% here is what I had:

describe("<Icon />", () => {
 // concurrentIcons = import.meta.glob('./icons/*.svg) ... some mapping and filtering to get proper icon names
  for (const iconName of concurrentIcons) {
    test(
      `renders <Icon icon="${iconName}" />`,
      { retry: 5, concurrent: true },
      async ({ expect: localExpect }) => {
        const id = `test-${iconName}`;
        const { container, unmount } = render(() => (
          <Icon icon={iconName as IconType} id={id} />
        ));
        await waitFor(() => {
          localExpect(container.querySelector(`#${id}`)).toBeInTheDocument();
          unmount();
        });
      }
    );
  }
});

describe("<Icon />", () => {
 // concurrentIcons = import.meta.glob('./icons/*.svg) ... some mapping and filtering to get proper icon names
  for (const iconName of concurrentIcons) {
    test(
      `renders <Icon icon="${iconName}" />`,
      { retry: 5, concurrent: true },
      async ({ expect: localExpect }) => {
        const id = `test-${iconName}`;
        const { container, unmount } = render(() => (
          <Icon icon={iconName as IconType} id={id} />
        ));
        await waitFor(() => {
          localExpect(container.querySelector(`#${id}`)).toBeInTheDocument();
          unmount();
        });
      }
    );
  }
});

2 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

thanks to everyone for talking this through with me 😃

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

nice, I think in order to decouple the arbitrary code, it needs this behavior

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

Thanks to @Brendonovich for bringing up the concept of owners, this is now working but IDK if it is "proper" or "best practice" to do something like this

createEffect(() => {
  const keysToCheck: Set<string> = keysDown();
  for (const [, { shortcut, action }] of IMC_Default) {
    if (isSubsetOf(shortcut, keysToCheck)) {
      runWithOwner(getOwner(), action);
      return;
    }
  }
});

createEffect(() => {
  const keysToCheck: Set<string> = keysDown();
  for (const [, { shortcut, action }] of IMC_Default) {
    if (isSubsetOf(shortcut, keysToCheck)) {
      runWithOwner(getOwner(), action);
      return;
    }
  }
});

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

TL;DR; I want to run arbitrary code within the shortcut manager and have access to any of the contexts

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

That's what @Brendonovich was saying which makes sense after his explanation but now it is forcing me to rethink everything or couple things tightly

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

keyMapper.addCombo([...list of keys], () => {
 const something = useSomeOtherContext();

})

keyMapper.addCombo([...list of keys], () => {
 const something = useSomeOtherContext();

})

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

I'm not familiar with using multiple createRoots yet as I'm pretty new to solid

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

And are you able to use other contexts in the function without issue?

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

Or if you're up for it I could hop into a call and share what I have too

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

Would you mind sharing your implementation or some details?

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

Maybe basing this loosely on game development practices was a bad idea too lol 🤷🏼‍♂️

54 replies

•Created by flippyflops on 8/4/2024 in #support

useContext from function dynamically imported

I guess I'm just not seeing how I could call any of the actions which may or may not use any context within the app from the keyboard shortcut provider without somehow coupling every argument type to the provider

54 replies