How to use SolidJS Routes in Astro?
I try to use solidjs route in astro project but it does not show anything. This test 1 and 2 code not give any outputs.
Test 1:
index.astro...
how to get two class managers to cooperate on a single ref?
I’m making a currency input field that is supposed to interact with a 3rd party slider class that expects a native html input element to manipulate when the slider changes. So I’ve been trying to use the callback version of the ref to set the props.ref to a proxy wrapped version of the elements’s ref that can intercept the .value reads and writes the slider manager is trying to do. But I’m getting the error ”Cannot set properly ref of #<Object> which has only a getter” so I don’t think that’s p...
Does SolidStart have CSRF protection by default?
questionmark
Didnt find it in docs, so I'm just asking to be sure...
Context not working as expected
Hi everyone. I’ve got a strange behaviour in my project. I want to use my context as a global state manager so when I pass a function which has my useContext function in it to an addEventListener, when the addEventListener is fired I don’t have the correct value of the store contained in my context but only the default value.
Conditional tailwind css using signal
Hi there,
I am looking for a way to apply a tailwind css style to a div when the signal is set to true.
Is that possible?...
problem with "use:" and custom directives in tsx
I copied the custom directive from the docs
```
import { onCleanup } from 'solid-js';
export default function clickOutside(el, accessor) {...
Uncaught TypeError: _tmpl$6 is not a function
I'm trying to create a library that exposes a web component that's implemented internally with Solid.js. I'm using Rollup with rollup-preset-solid to bundle the library as an ESModule, but when I try to consume the library I get this error.
This is my rollup config file:
```js
import withSolid from "rollup-preset-solid";...
CreateResource Not complete Fetch (promise) when page first loads, but completes when VsCode Saves
Hey I'm severely confused about what's happening under the hood for npm run dev. When I'm using createResource(fetcher) and do a console.log(response) in the fetcher function, the data gets printed out in my VSCode terminal only. But once when I hit save without changing anything, it will show up in the console of my browser (chrome). Does anyone know what is happening to cause this?
My example:
```import { createResource, Suspense } from "solid-js";...
HTTP trip, custom backend
I was reading about this main idea of SSR, that it skips one step by fetching data and sending it from the backend instead of frontend
So what if I want to have my own backend, then when route changes my
createServerData$ sends a request to my other backend instead of straight to database and thats an additional trip (? if I got it right)
So the question is
...force a dom update when updating a signal before the rest of the onMount function
in this code
csvColumns is dependant on setData, how can I force the render update?
```jsx...Add a ref and make it also exposable
To create a ref, I can write:
In order to expose it to a parent component, I can write:...
<input ref={ref} />
<input ref={ref} />
Running tests in docker fails, but works outside of docker
I am attempting to set up a Docker development environment for a SolidJS application using Docker Compose. When I access the webpage via localhost:3000, the application renders without issues. However, when I attempt to run npm test using vitest inside the Docker container, I run into a problem. The issue appears to be with the render function, as it does not seem to render the application correctly within the Docker container. The debug output only shows
<body><div /><body>. Interestingly, when I run npm test outside the Docker container on my local machine, the test passes just fine and the debug correctly renders the application.
Here's the relevant code from my test file:
My test file:...Best way to implement a dialog in Solid.js
I'm using Solid.js for a library and need to implement a dialog to capture some user input (say, a selection from a set of multiple options). I want to provide a function that will display the dialog and return a promise that will resolve with the result of the dialog (e.g. the option the user selected). What's the best way to go about this?
What I have in mind is to render the dialog and add an event handler for an option being selected that will resolve the promise and destroy the dialog. However, I can't figure out how I should destroy it.
Is there a better method I'm missing?...
Reactivity when passing props down not reactive on nested component
Hi guys and girls, I'm currently struggling with reactivity. Here's a look at the code:
ParentComponent.tsx
```typescript
...Cannot find package 'solid-start-node' imported from 'solid-start/bin.cjs'
I created a new project with
npm init solid@latest, with the options [with-websocket], [ssr], [typescript] - after npm i and npm i --include=dev, npm run dev throws the error from the title (ERR_MODULE_NOT_FOUND)Nested routing not working
One video is with npm, the other with pnpm
Both not working, what am I doing wrong?
cat.tsx
```tsx...
How to share .env files among NPM Workspaces?
.env files are read from a workspace root folder (e.g. /packages/foo-app/.env), but the .env files are not read from the root of the npm workspaces.
This leads me to duplicate the .env files for every workspace, or to have some hacky copy script.
How can I have just one set of .env files for all workspaces?...splitProps instead of destructuring?
How does
splitProps work exactly?
```ts
export const ResultDisplay: Component<{ result: Result }> = (props) => {
const [res] = splitProps(props, ["result"]);...How to route in a callback function?
The SolidJS Router docs explain how to add a link that wraps some component (needing routing) with an <a> tag, via the
<A> component:
https://github.com/solidjs/solid-router#create-links-to-your-routes
However, how do I route in a callback function? I.e. how do I render some routed component from the onClick callback? That isn't possible?...useRouteData empty on HMR
I'm just curious about the expected behavior of useRouteData in Solid Start. It seems to return an empty response after HMR, but only in certain situations. I created two identical pages with different route data functions. One pulls from the Pokemon API and another accesses my firestore instance:
```export const routeData = () => {
return createServerData$(async () => {
const resp = await fetch("https://pokeapi.co/api/v2/pokemon/ditto");...