hel.io Posts - Answer Overflow

hel.io

Explore posts from servers

•Created by hel.io on 4/11/2023 in #support

How to import MWS only in dev mode in solid-start

Hi, I'm creating a #solid-start starter kit and I'm integrating MWS, here's the repo: https://github.com/alveshelio/solid-start-tailwindcss-playwright-template. However I'm having errors when trying to import it in root.tsx. This is how I'm importing it:

if (import.meta.env.DEV) {
    import('./mocks/browser').then(({ browser }) => {
      browser.start();
    });
  }

if (import.meta.env.DEV) {
    import('./mocks/browser').then(({ browser }) => {
      browser.start();
    });
  }

However, this is not working. I'm getting this error in the server: An unhandled error occured: TypeError: vite_ssr_import_1.postHandlers is not iterable (cannot read property undefined) at eval (/src/mocks/browser/browser.ts:7:39) at runMicrotasks (<anonymous>) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async instantiateModule (file:///solidstart/nodemodules/.pnpm/[email protected]@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:53996:9) And in the browser I'm getting this error: browser.ts:5 Uncaught (in promise) ReferenceError: Cannot access 'postHandlers' before initialization This thread: https://github.com/mswjs/msw/discussions/712 talks about how to import it in a vite project, but this doesn't work in a solid-start project. Any help would be greatly appreciated. Thank you,

1 replies

SSolidJS

•Created by hel.io on 2/27/2023 in #support

How to create a generic Input when passing prop `class` to override styles?

Hi, I'm trying to create a generic input. I'm using Tailwindcss for the styling with cva (class-variance-authority) which allows me to create variants. I want to allow users to pass class to override the input. I have this component:

import { JSX, mergeProps } from 'solid-js';
import { VariantProps } from 'class-variance-authority';
import { inputStyles } from './inputStyles';

export type InputProps = JSX.InputHTMLAttributes<HTMLInputElement> &
  JSX.InputHTMLAttributes<HTMLLabelElement> &
  VariantProps<typeof inputStyles>;

export const Input = (props: InputProps) => {
  const merged = mergeProps({ type: 'text' }, props);
  const { size = 'md', ...inputProps } = merged;
  return (
    <div class="flex flex-col">
      <label class="text-gray-400" for={props.id}>
        {props.placeholder}
      </label>
      <input class={`${inputStyles({ size })} ${props.class}`} {...inputProps} />
    </div>
  );
};

import { JSX, mergeProps } from 'solid-js';
import { VariantProps } from 'class-variance-authority';
import { inputStyles } from './inputStyles';

export type InputProps = JSX.InputHTMLAttributes<HTMLInputElement> &
  JSX.InputHTMLAttributes<HTMLLabelElement> &
  VariantProps<typeof inputStyles>;

export const Input = (props: InputProps) => {
  const merged = mergeProps({ type: 'text' }, props);
  const { size = 'md', ...inputProps } = merged;
  return (
    <div class="flex flex-col">
      <label class="text-gray-400" for={props.id}>
        {props.placeholder}
      </label>
      <input class={`${inputStyles({ size })} ${props.class}`} {...inputProps} />
    </div>
  );
};

Ant then I call the component like so

<Input placeholder="Password" size="md" class="text-pink-300" type="password" />

<Input placeholder="Password" size="md" class="text-pink-300" type="password" />

The problem here is that if I try to extract class from props const { size, class, ...inputProps } = merged; I get an error: Unexpected keyword 'class'. I know that class is a reserved word in JavaScript. However, if I try to use className then I get this error: Property 'className' does not exist on type { ... }; Is there a way to pass a class or should I rename the prop as something else?

5 replies

SSolidJS

•Created by hel.io on 2/26/2023 in #support

How does reactivity works in createStore?

Hi, I'm quite new to SolidJS and Reactivity and I'm not sure how I should implement things. So, I've created a context with a createStore for an Auth service. Here's my AuthContext: https://gist.github.com/alveshelio/5d04ad7f3bf303b5e823ac2ad60b2a9a Then in my index.tsx I'm wrapping the app with the context like so

 <AuthorizerProvider
      authorizerURL="http://localhost:3080"
      redirectURL={window.location.origin}
      clientID="dc7d8969-82a3-438d-a75e-bbeefe9ef94d"
    >
      <QueryClientProvider client={queryClient}>
        <Router>
          <App />
        </Router>
      </QueryClientProvider>
    </AuthorizerProvider>

 <AuthorizerProvider
      authorizerURL="http://localhost:3080"
      redirectURL={window.location.origin}
      clientID="dc7d8969-82a3-438d-a75e-bbeefe9ef94d"
    >
      <QueryClientProvider client={queryClient}>
        <Router>
          <App />
        </Router>
      </QueryClientProvider>
    </AuthorizerProvider>

I've then created my graphql client like so

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

With this implementation the Authorization is never set in headers and . I've tried this

 const [token, setToken] = createSignal<string | undefined>();
  const [state] = getAuthorizer();
  //
  createEffect(() => {
    setToken(state.token?.id_token);
  });

 const [token, setToken] = createSignal<string | undefined>();
  const [state] = getAuthorizer();
  //
  createEffect(() => {
    setToken(state.token?.id_token);
  });

And then ...(token() && { Authorization: Bearer ${token()} }), but this doesn't work either. I know that functions in SolidJs only run once and I though that maybe by the time I call graphqlClient my state wouldn't be be set yet but I've confirmed that right before calling graphqlClient the id_token is already set. Any help would be greatly appreciated 🙂 Thank you

5 replies

Gaming

Programming