kerrick
kerrick
SSolidJS
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