How to dynamically 'render' a string interweaved with `<span />`'s
I am attepting to make a text area where I can manually mark words, or sets of words, as either a spelling or grammatical error. in order to do this I switched from a plain
<textarea /> to a <div contenteditable /> so that I have full control on how to render the text inside. Now my question is, the way I mark spelling and grammer errrors in with an array of index ranges ([number, number][]).
right now I do the 'rendering' with this code
```tsx...Component in test is not updating despite signal change
I am currently writing some tests for a library I'm building with Solid. I have the following test:
```ts
const AuthStateComponent = () => {
const { user, signIn, signOut } = useSSO();...
SingleFlight does not work (See Example)
I'm trying to make a single flight request work, but I'm always getting two requests:
What am I missing here?
```tsx...
shadcn-solid plain install ? (maybe a tailwind issue?)
Hey there,
is anyone using
https://shadcn-solid.com/ ?
I created a clean project, followed their installation by the book ( https://shadcn-solid.com/docs/installation/solid-start ) and still getting ...Context provider breaks while using esbuild-plugin-solid
I don't know if the problem is actually related to building component with esbuild with esbuild-plugin-solid, but whenever I call useContext from a child component, context is undefined. Am I missing something?
Wrapper:
`export default function CollectionWrapper() {
return (...
Questions on the `preload` functionality
I am reading the docs on the
preload functionality and the related query function.
The doc says there are some caveats to be aware of when using preload, specifically
1. Thepreloadfunction is called once per route, which is the first time the user comes to that route. Following that, the fine-grained resources that remain alive synchronize with state/url changes to refetch data when needed. If the data needs a refresh, the refetch function returned in the createResource can be used. 2. Before the route is rendered, thepreloadfunction is called. It does not share the same context as the route. The context tree that is exposed to thepreloadfunction is anything above thePagecomponent....
Generate static UI elements from server data only ONCE
I want to generate my navbar components based on my server folder structure
Specifically, I have folder
countries which contains file us.json and ca.json. For each file in folder countries, I want to generate an <A> element onto the Layout component. I struggle to know how to "send" this data from server to client and construct the UI, but only ONCE at startup - since the countries folder is static
Stackblitz: https://stackblitz.com/~/github.com/bhuynhdev/solid-start-test...Do a one-time server operation upon page load, and then re-use that data
I am looking for a way to do a one-time database query for a very rarely changed dataset -> And then store that data into server memory for subsequent re-use
More details:
1. I have a dynamic route
/map/[country].tsx
2. Upon loading this page the first time, I want to query database for list of country and store that data into server memory. So that subsequent navigation to the map/[country].tsx can just index the maps object instead of querying the db again...Component routing vs config-based routing
In Solid Router, what's the difference between component routing and config-based routing? Is the a particular reason someone wants to use one over the other?
Client-only API called on the server side.
There's this one nice library which can bundle MDX as a JSX Component. Thanks to
_jsx_runtime it's easy-ish to adapt it from react-only to other JSX supporting libraries. (https://github.com/kentcdodds/mdx-bundler)
I've managed to nail it down for some of the libraries, unfortunately I'm stuck with Solid's one, and I'm not that familiar with Solid (https://github.com/kentcdodds/mdx-bundler/pull/236)
I've...createSignal equals: false on mutable object value
Hi guys,
I have a resource source signal with { equals: false } that does not trigger fetching unless I wrap and deep copy the object literal value in the source param.
The value itself is a propety of an instance wrapped with
createMutable, which I suspect is at the crux of this....Third party authentication
What is the best way to implement third-party authentication like google and Facebook in solide.js?
I used to auth0 in react.js but for solid js its not supported...
Calling a JSX event handler explicitly
How can I call an event handler explicitly?
```ts
const handleFocus = (e: FocusEvent) => {
// perform some operation
...
How to filter/remove elements from an array within a Store
If I have the following
createStore invocation:
```tsx
export type WeeklyTimesheetSubmission = {
readonly cards: TimesheetCard[];...Related components
How would you implement a <Form> and <ValidatedField> component?
```
<Form>
<ValidedField ... />
<ValidedField ... />...
Error when using protected$ from @solid-mediakit/auth.
The error message is [error] node_modules/vinxi/runtime/http.js (71:9): "AsyncLocalStorage" is not exported by "__vite-browser-external", imported by "node_modules/vinxi/runtime/http.js".
Range input issue with Dynamic component
Range slider input can't slide on Android devices. Please kindly check below sandbox demo.
https://codesandbox.io/p/devbox/694lr9...
solid router, absolute routes?
So i have compiled my solid app and have a few things i would like to change but dont know how, right now i host the app on my school server so for example server.com/name.surname/project_name/index.html
so as u can see the app should run inside the project name folder but when i use the routing in the app, the search bar domain says for example server.com/contact and not server.com/name.surname/project_name/contact like it should which also makes the links not work when manually browsing to them, any fix?
<Router root={Bars}>...
behaviour of createAsync in hooks - why cached?
I'm trying to get a better understanding on createAsync & query, and weather or not it is an appropriate way to share state.
I created a hook and use it like this.
This works perfectly fine. But I'm confused why the logs appear in the console, but no requests are made. I understood, that the query() cashes for only 5 seconds - so why is it not making requests all the timem even on navigation? I can import the hook and access the data from everywhere simultaneously.
...
Solid routing
so i have been trying out solid and i keep having some issues with the router, one of which is the routes tag which i believe is in the older versions but i'm using the newer one and dont really wanna downgrade...
so this is my code:
index.jsx:...