Paul Armstrong Comments - Answer Overflow

Paul Armstrong

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

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

From their examples:

import { createToken, resolveTokens } from "@solid-primitives/jsx-tokenizer";

function Tabs<T>(props: { children: (Tab: Component<{ value: T }>) => JSX.Element; active: T }) {
  const Tab = createToken((props: { value: T }) => props.value);
  // resolveTokens will look for tokens created by Tab component
  const tokens = resolveTokens(Tab, () => props.children(Tab));
  return (
    <ul>
      <For each={tokens()}>
        {token => <li classList={{ active: token.data === props.active }}>{token.data}</li>}
      </For>
    </ul>
  );
}

// usage
<Tabs active="tab1">
  {Tab => (
    <>
      <Tab value="tab1" />
      <Tab value="tab2" />
    </>
  )}
</Tabs>;

import { createToken, resolveTokens } from "@solid-primitives/jsx-tokenizer";

function Tabs<T>(props: { children: (Tab: Component<{ value: T }>) => JSX.Element; active: T }) {
  const Tab = createToken((props: { value: T }) => props.value);
  // resolveTokens will look for tokens created by Tab component
  const tokens = resolveTokens(Tab, () => props.children(Tab));
  return (
    <ul>
      <For each={tokens()}>
        {token => <li classList={{ active: token.data === props.active }}>{token.data}</li>}
      </For>
    </ul>
  );
}

// usage
<Tabs active="tab1">
  {Tab => (
    <>
      <Tab value="tab1" />
      <Tab value="tab2" />
    </>
  )}
</Tabs>;

10 replies

SSolidJS

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

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

You could look at the jsx-tokenizer from solid-primitives. It doesn't exactly do what you're asking, but it might help enforce the pattern https://primitives.solidjs.community/package/jsx-tokenizer

10 replies

SSolidJS

•Created by deluksic on 7/5/2024 in #support

Is there a way to prevent `lowercaseevent` names?

You could write a custom eslint plugin to do it… but you either have to know every single handler available or accept uniformly erroring on any JSX prop that starts with on that isn't followed by a capital letter. It's likely that you could use jsx-handler-names from eslint-plugin-react without any modifications

5 replies

SSolidJS

•Created by Bit on 6/16/2024 in #support

npm run build fails if outDir is changed

Someone else may have a better answer… I think that's dependent on the preset. For aws-lambda, that may be required

9 replies

SSolidJS

•Created by Bit on 6/16/2024 in #support

npm run build fails if outDir is changed

Not all vite options are appropriate in solid-start app.config because the information needs to be sent to Nitro, which will then proxy anything to vite appropriately. To change the output directory, set the server.output.dir property instead:

export default defineConfig({
  // ...rest of the config
  server: {
    preset: 'aws-lambda',
    output: { dir: 'dist' },
  },
});

export default defineConfig({
  // ...rest of the config
  server: {
    preset: 'aws-lambda',
    output: { dir: 'dist' },
  },
});

9 replies

SSolidJS