kerrick Posts - Answer Overflow

kerrick

•Created by kerrick on 9/1/2023 in #support

Jest, TypeScript, and @solidjs/router

I set up my project with Jest & TypeScript according to https://www.solidjs.com/guides/testing#jest-with-typescript-ts-jest and while it seems to test simple components well, as soon as I try to test a component that uses imports from @solidjs/router, jest chokes. I tried reading the documentation linked in the error, but I didn't see anything obviously wrong. Do I need to set up additional configs for @solidjs/router or is there a bug in that package? Here's a piece of the error:

    Details:

    /Users/kerrick/Developer/carbon-graphite/node_modules/@solidjs/router/dist/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { isServer, delegateEvents, createComponent as createComponent$1, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import styles from './ClientsIndex.module.css';
    > 2 | import { A, useRouteData } from '@solidjs/router';
        | ^

    Details:

    /Users/kerrick/Developer/carbon-graphite/node_modules/@solidjs/router/dist/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { isServer, delegateEvents, createComponent as createComponent$1, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import styles from './ClientsIndex.module.css';
    > 2 | import { A, useRouteData } from '@solidjs/router';
        | ^

Here's the full error, plus what I believe to be the relevant parts of my config files: https://gist.github.com/Kerrick/02e1a837ae3b6736b2cd826568c2ed5e

2 replies

SSolidJS

•Created by kerrick on 8/25/2023 in #support

Is this really the most ergonomic way to preserve searchParams with <A>?

I've got what I imagine is a pretty common pattern: displaying a list of entities on the left, each one clickable, and when you click it a detail view shows up on the right. The list is filterable, and those filters end up as searchParams. An example URL might be /locations/123/leads/456?leadsCategory=3. For the anchor tags on the left, I've got the following JSX (searchParams is destructured from useSearchParams()):

<A
  href={`/locations/${
    params.clientId
  }/leads/${
    props.lead.id
  }?${
    new URLSearchParams(searchParams).toString()
  }`}
>

<A
  href={`/locations/${
    params.clientId
  }/leads/${
    props.lead.id
  }?${
    new URLSearchParams(searchParams).toString()
  }`}
>

This works, but it feels... unergonomic. Is there a better or cleaner way to preserve the searchParams when using <A /> or is this the "right" way?

3 replies

SSolidJS

•Created by kerrick on 8/20/2023 in #support

What should I use if I want features of both Resources and Stores?

I'm using createResource in a RouteDataFunc, which fetches a JSON tree asynchrconously. I love using a Resource here because I get access to its state (to show loading etc). However, I want to be able to mutate said data using the amazing API that Store has, such as function addChild(thingId) { myData.update('things', (t) => t.id === thingId, 'child', { foo: 'bar' }); }. Sadly, that mutation API is only available on Store, not Resource -- and state is only available on Resource, not Store. Is there something that has both? Or is there a built-in API I can use with all the ways Store setters work, but on a Resource?

6 replies

Gaming

Programming