aryzing
aryzing
Explore posts from servers
SSolidJSTtRPC
PostsComments
SSolidJS
Created by aryzing on 10/30/2024 in #support
Create resource TS types fail when using `{ refetching }`
When creating a resource, 
const [value, { refetch }] = createResource(
  source, 
  async function (source, { refetching }): Promise<Example> { /* ... */ }
);
const [value, { refetch }] = createResource(
  source, 
  async function (source, { refetching }): Promise<Example> { /* ... */ }
);
the type of value will be Resource<unknown> instead of Example. However, if we delete the second arg of the fetcher and use the 1 arg version, the return type is inferred correctly. 
const [value, { refetch }] = createResource(
  source, 
  async function (source): Promise<Example> { /* ... */ }
);
const [value, { refetch }] = createResource(
  source, 
  async function (source): Promise<Example> { /* ... */ }
);
Now value will correctly be inferred as Resource<Example>. Is this an issue?
2 replies
SSolidJS
Created by aryzing on 6/18/2024 in #support
Best way to pass complex values (e.g. objects) to a route?
Given a route that needs somewhat complex data, like an object, what's the best way to pass this data to the route? If multiple other areas of the app need to redirect the user to this one route, how would the pass data to it?
2 replies
SSolidJS
Created by aryzing on 4/19/2024 in #support
How to deal with `on:event` in typescript?
Typescript is reporting errors for events declared with on:myevent syntax. Is there a fix?
2 replies
SSolidJS
Created by aryzing on 4/18/2024 in #support
Side effect in bundled code `ie(["click", "keydown"]);`
I'm trying to import types from a lib I'm building that contains a Solid.js component. However, when building using a vanilla Vite + Solid setup, the lib's build output has a top-level call to ie(["click", "keydown"]); . In turn, this call is added to the output build of the second package. Where is this coming from? Can Solid.js be fixed to not produce these top level function calls?
39 replies
SSolidJS
Created by aryzing on 3/14/2024 in #support
How to build styled Web Component with a CSS library?
Solid's solid-element is great for building Web Components. Styles inlined on components work just fine. However, when the component starts getting complex, it's helpful to make use of some sort of CSS library. When building with Vite, many of the CSS libraries output CSS files or inject code that injects the styles in the DOM (which don't penetrate the shadow DOM boundary). What's the best way to handle styles when building a Web Component with Solid?
1 replies
SSolidJS
Created by aryzing on 3/13/2024 in #support
Why is `BoundEventHandler` typed this way?
The type for BoundEventHander is, 
  interface BoundEventHandler<T, E extends Event> {
    0: (
      data: any,
      e: E & {
        currentTarget: T;
        target: DOMElement;
      }
    ) => void;
    1: any;
  }
  interface BoundEventHandler<T, E extends Event> {
    0: (
      data: any,
      e: E & {
        currentTarget: T;
        target: DOMElement;
      }
    ) => void;
    1: any;
  }
In order to use it, I need to do something like const handler = BoundEventHandler<T,E>[0], note the [0] at the end, which seems weird. Why is it typed this way? How is this type expected to be used?
9 replies
SSolidJS
Created by aryzing on 2/2/2024 in #support
How to handle auth with solid-router?
Given an app where users have access to additional routes when they are logged in, how to set up the router so that it, - redirect users to "home" if they are logged in and happen to navigate to the login or signup page? - redirect users to login page when visiting a route that requires authentication but they are not logged in? Is the following a good starting point? Where would the redirects be inserted? 
export function App() {
  return (
    <Router root={Providers}>
      {/* Logged out routes */}
      <Route component={UnauthenticatedApp}>
        <Route path="/sign-up" component={SignUp} />
        <Route path="/log-in" component={LogIn} />
      </Route>

      {/* Logged in routes */}
      <Route component={AuthenticatedApp}>
        <Route path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Route>
    </Router>
  );
}
export function App() {
  return (
    <Router root={Providers}>
      {/* Logged out routes */}
      <Route component={UnauthenticatedApp}>
        <Route path="/sign-up" component={SignUp} />
        <Route path="/log-in" component={LogIn} />
      </Route>

      {/* Logged in routes */}
      <Route component={AuthenticatedApp}>
        <Route path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Route>
    </Router>
  );
}
10 replies
SSolidJS
Created by aryzing on 1/24/2024 in #support
Can on__ handler be async?
Seems that having async handlers works fine, 
const button = <button onClick={doSomethingAsync}>Click me</button>
const button = <button onClick={doSomethingAsync}>Click me</button>
although the particular ESLint config I'm working with doesn't like it, 
Promise-returning function provided to attribute where a void return was expected. (eslint@typescript-eslint/no-misused-promises)
Promise-returning function provided to attribute where a void return was expected. (eslint@typescript-eslint/no-misused-promises)
Are async handlers supported? If so, do Solid's types need to be updated?
10 replies
SSolidJS
Created by aryzing on 12/6/2023 in #support
How to clear a store?
From the docs, seems that setting a store's value explicitly to undefined will delete it from the store, 
setStore({foo: undefined}) // foo is removed from store
setStore({foo: undefined}) // foo is removed from store
However, is there a way to clear them all in one go? If there are many keys, or the keys change, it's hard to ensure they're all getting deleted when they need to.
9 replies
SSolidJS
Created by aryzing on 11/27/2023 in #support
Solid.js Playground console doesn't support creating const / let variables
Not sure if a bug or just part of how the Playground's console works, but it doesn't allow creating const or let variables. The regular browser console does. Is this a limitation of having it embedded in the playground, or a bug? Sidenote: should there be a "Playground" support tag?
1 replies
SSolidJS
Created by aryzing on 11/18/2023 in #support
Typesafe way to render conditionally based on whether array has zero, one or many elements?
Given an array with one or more elements, the idea is to display different UIs. With React, this can be done in a typesafe way by returning different JSX after an if check, 
if (array.length === 0) {
  // return emtpy sate
}

if (array[0] && array.length === 1) {
  const item = array[0] // this has a non-null type
  // return jsx
}

return array.map(...)
if (array.length === 0) {
  // return emtpy sate
}

if (array[0] && array.length === 1) {
  const item = array[0] // this has a non-null type
  // return jsx
}

return array.map(...)
How can the same be achieved with Solid? Seems that <Switch /> / <Match /> was a good place to start, although the where's boolean check doesn't perform type narrowing, so the typecheck fails: the array could be empty and accessing the first element could return undefined. When adding <Show /> to the mix, the type safety can be improved, 
<Switch>
  <Match when={array.length === 0}>...</Match>
  <Match when={array.length === 1}>
    <Show when={array[0]}>
      {(item) => (<>
        {/* Here `item` is typed */}
        <p>{item().foo}</p>
      </>)}
    </Show>
  </Match>
  <Match when={array.length > 1}>...</Match>
</Switch>
<Switch>
  <Match when={array.length === 0}>...</Match>
  <Match when={array.length === 1}>
    <Show when={array[0]}>
      {(item) => (<>
        {/* Here `item` is typed */}
        <p>{item().foo}</p>
      </>)}
    </Show>
  </Match>
  <Match when={array.length > 1}>...</Match>
</Switch>
although this seems overly verbose, and I feel uneasy about using <Show> just for its non-null assertion. Are there better options?
4 replies
TtRPC
Created by aryzing on 11/3/2023 in #❓-help
Can middleware be used on a router?
Given a router where all procedures need to use the same middleware, can the middleware be somehow attached to the router instead of manually to routes? For example, given an "admin" router, it would be quite catastrophic if one of the endpoints was accidentally set up with a publicProcedure instead of adminProcedure = publicProcedure.use(isAdmin).
4 replies
TtRPC
Created by aryzing on 11/1/2023 in #❓-help
How to limit payload size?
Is there a way to limit the payload size? E.g., if a particularly large JSON payload is sent to the (standalone) server, the server should stop after having read a set number of bytes and fail the request.
4 replies
TtRPC
Created by aryzing on 11/1/2023 in #❓-help
Feature or happy accident: error message from `cause` being used as TRPC's error message
When a procedure throws a TRPC error with no message, it turns out that if the thrown error has a cause, and the cause has a message, the cause's message will be used as the TRPC error message returned to the client. Is this on purpose or an accident? Couldn't find this behavior documented.
2 replies
TtRPC
Created by aryzing on 10/31/2023 in #❓-help
How to configure context for a standalone server?
Are there any examples out there on how to set up context for a standalone server? The docs do include an example for next , although it doesn't help much in setting one up for a standalone server. How is context set up for a standalone server?
6 replies
TtRPC
Created by aryzing on 10/31/2023 in #❓-help
Docs hard to follow with so much `next` code
Not having a great experience with the docs. There are many examples that use next, making it hard to understand what should be done in cases where next isn't being used. Take the docs on setting up the context: https://trpc.io/docs/server/context. They're entirely next focused. To what extent is Vercel's sponsorship affecting the docs?
3 replies
TtRPC
Created by aryzing on 10/31/2023 in #❓-help
How to make typed error responses in the context of a specific query?
Each query has a typed (success) response, although it seems all queries have a shared type for the error response. Is there a way of having per-query typed error responses? Is there a better alternative to having an error within a successful response, as below? 
const appRouter = router({
  foo: publicProcedure.query(() => {
    const [error, data] = doSomething();

    if (error) return {
      isSuccess: false,
      error,
    };

    return {
      isSuccess: true,
      data
    };
  })
});
const appRouter = router({
  foo: publicProcedure.query(() => {
    const [error, data] = doSomething();

    if (error) return {
      isSuccess: false,
      error,
    };

    return {
      isSuccess: true,
      data
    };
  })
});
2 replies
TtRPC
Created by aryzing on 10/31/2023 in #❓-help
What's the negative code returned in error responses?
What's the negative error code returned in errors responses and how is it meant to be used by the client?
6 replies
SSolidJS
Created by aryzing on 10/29/2023 in #support
How is a Context reactive?
The tutorial states that
Using Context has the benefit of being created as part of the reactive system and managed by it
Not sure if I'm understanding this correctly. When trying to trigger reactivity, changing the context value does not seem to be re-rendering the app. However, if the context contains reactive values like signals or stores, updating their values does trigger a re-render. Therefore, would it be more correct to state that the context is not reactive, although it may contain reactive values
4 replies
SSolidJS
Created by aryzing on 10/24/2023 in #support
Type of setStore args?
When trying to listen for any and all changes to a store value, seems the only way of being able to do so is to wrap the store's setter like so, 
const [store, _setStore] = createStore({});
function setStore(...args) {
  _setStore(...args);
  doStuff(store);
}
const [store, _setStore] = createStore({});
function setStore(...args) {
  _setStore(...args);
  doStuff(store);
}
What is the correct type for ...args? When typed as below, the type of the args is never, which throws errors in the existing setters, 
  function setStore(...args: Parameters<typeof setState>) {
    _setStore(...args);
    doStuff(store);
  }
  function setStore(...args: Parameters<typeof setState>) {
    _setStore(...args);
    doStuff(store);
  }
3 replies