S
SolidJS
Solid is a declarative reactive Javascript library for creating user interfaces.
Join ServerCommunity questions
Channels
How can i go back with @solidjs/router package ?
i want to go back in the history of the url with all the search parameters and more, is this posible i dnt se in the doc that method
What are the differences? Produce vs regular setStore
This is Astro + SolidJS components.
Question:
Besides produce allowing to neatly update specific properties of an object, are there any other differences? Any performance nuances between these 2 approaches dealing with stores?
```js
import { createStore, produce } from "solid-js/store";
export function SolidComponent() {
const [solidStore, setSolidStore] = createStore({ a: "aaa", b: "bbb" });
function updateA() {
console.log("A");
setSolidStore((obj) => {
ret...
Question:
Besides produce allowing to neatly update specific properties of an object, are there any other differences? Any performance nuances between these 2 approaches dealing with stores?
```js
import { createStore, produce } from "solid-js/store";
export function SolidComponent() {
const [solidStore, setSolidStore] = createStore({ a: "aaa", b: "bbb" });
function updateA() {
console.log("A");
setSolidStore((obj) => {
ret...
How to create an effect that runs on page navigate
I think this should be fairly straightforward. How can I define a createEffect that runs each time navigation occurs?
Integrate External, Read-Only Data Source Into Reactive System
Suppose the following:
```tsx
// Hypothetical external data
let externalData = new Map()
EventEmitter.emit("dataChanged", /no event info/)
// My problem...
function externMemo (externData) {
EventEmitter.on("dataChanged", ()=>/trigger getter refetch & dom update/ )
let getter = ()=>{
// ...
return externData
}
return getter
}
// Hypothetical Component
let component = () => {
let reactiveData = externMemo(externalData)
return (
<div>...
```tsx
// Hypothetical external data
let externalData = new Map()
EventEmitter.emit("dataChanged", /no event info/)
// My problem...
function externMemo (externData) {
EventEmitter.on("dataChanged", ()=>/trigger getter refetch & dom update/ )
let getter = ()=>{
// ...
return externData
}
return getter
}
// Hypothetical Component
let component = () => {
let reactiveData = externMemo(externalData)
return (
<div>...
vite bundling unused components from external libraries (SSR)
o/ question, i'm using https://github.com/x64Bits/solid-icons for icons and while i really like it, it seems to be including icons that i'm not using in the final build. my website is SSR'd and deployed in vercel, and it's complaining that the
render function is too big. is there anything i can do to make it exclude icons i am not using?How to mutate a createResource storage
Hi all, I'd like to get some help with mutating a store that is set as a createResource storage.
```javascript
function createDeepSignal<T>(value: T): Signal<T> {
const [store, setStore] = createStore({
value
});
return [
() => store.value,
(v: T) => {
const unwrapped = unwrap(store.value);
typeof v === "function" && (v = v(unwrapped));
setStore("value", reconcile(v));
return store.value;
}
] as Signal<T>;
}
const [resource, {mutate, refetch}] =...
```javascript
function createDeepSignal<T>(value: T): Signal<T> {
const [store, setStore] = createStore({
value
});
return [
() => store.value,
(v: T) => {
const unwrapped = unwrap(store.value);
typeof v === "function" && (v = v(unwrapped));
setStore("value", reconcile(v));
return store.value;
}
] as Signal<T>;
}
const [resource, {mutate, refetch}] =...
Are there any important considerations to creating signals in control component callbacks like For
Hi, wondering if there's anything to consider in terms of tracking etc in having something like this
Or if it's actually better to have some intermediary component where the signal to track state is declared in jsx.
Thanks
<For each={props.data}>
{(data) => {
const [isOpen, setOpen] = createSignal(false);
return <Component data={data} isOpen={isOpen} onClick={()=>setOpen(x=>!x)}/>;
}}
</For>Or if it's actually better to have some intermediary component where the signal to track state is declared in jsx.
Thanks
Dispose function not actually disposing of anything
I'm running Solid as a partial view inside another, non-Solid app. I've used webpack to export Solid's render function and assign it to the Window object (so i can access it from the outer app by calling window.render) and then I dynamically import the components I need and render them to a div on the page, and I hold on to the return value of the render function so I can dispose of it later. When I want to swap one component out for another, I call that dispose function, dynamically import the...
Failed to execute 'querySelector' on 'Document': '#' is not a valid selector.
Anyone know what's causing this? Doesn't seem to impact functionality, but I constantly get this error when navigation from one to another in my solid app while using solid router
React key prop substitute!
I know what you're thinking, James, you silly sausage - Solid.js doesn't require keys for loops, and you're absolutely right but... I need key={} for another reason, I need to cause a component to be entirely unmounted and remounted, which was easily viable in React by just updating its key value in its parent. Any ideas how I can do that in Solid.js?
Cheers,
James
Cheers,
James
Best way to dynamically access i18n-translations with typescript
Hey folks,
I am currently using @solid-primitives/i18n (https://github.com/solidjs-community/solid-primitives/tree/main/packages/i18n#readme) for translation purposes.
However there's one thing i struggle with:
Some of the keys I would like to access are coming from an api, where each key is typed as generic string.
For example imagine that my dict looks like this:
And I want to translate like this:
```tsx
const...
I am currently using @solid-primitives/i18n (https://github.com/solidjs-community/solid-primitives/tree/main/packages/i18n#readme) for translation purposes.
However there's one thing i struggle with:
Some of the keys I would like to access are coming from an api, where each key is typed as generic string.
For example imagine that my dict looks like this:
const en_dict = {
foo: {
bar: 'Bar',
baz: 'Baz'
}
}And I want to translate like this:
```tsx
const...
i18n and context issues
Hey folks,
I am currently migrating to the 2.0.0 release of
However I have a few questions:
1. The way
I am currently migrating to the 2.0.0 release of
@solid-primitives/i18n. (https://github.com/solidjs-community/solid-primitives/tree/main/packages/i18n#readme)However I have a few questions:
1. The way
t is being defined in the docs will always give me the famous reactive variable 'xxx' should be used within JSX error. Which makes sense. Therefore I wonder, why all examples are build this way even though locales and therefore the current dict might change? Is this an error...Difference between `setState` and `produce`?
I have
appState as a store, and I'm trying to pass appState.selectedTable as a prop to a child component. When I simply use setAppState, it doesn't trigger a prop change in the child component. I've found that I need to use produce for it to work. The problem is, the documentation only gives a one-liner about the produce API. Could someone provide more information on how to properly use produce and createStore in this context?Solid Start not deploying on vercel in turborepo
Hi all,
my solid start project doesn't deploy to vercel, aka every build fails.
There are no error's though, the build fails, because the deployment duration takes over 45 minutes.
There are 0 errors in the output log, and the output ends with the following
my solid start project doesn't deploy to vercel, aka every build fails.
There are no error's though, the build fails, because the deployment duration takes over 45 minutes.
There are 0 errors in the output log, and the output ends with the following
backend:build: solid-start build
backend:build: version 0.2.32
backend:build: adapter vercel
backend:build:
backend:build: solid-start building client...
backend:build: solid-start rendering index.html...Problem duplicating a component navigating with dynamic routing
I am having difficulty causing a route component to be duplicated when navigating between a dynamic route in an Electron/SolidJS application using the SolidJS Router.
Example route def:
My intention is to navigate between say
The `Searc...
Example route def:
<Route path="/search" component={Search}>
<Route path="/" />
<Route path="/:id" component={SearchWorkspace} />
</Route>My intention is to navigate between say
/search/123456789 to /search/987654321 but am unable to get the components to re-render unless I visit another route first. The `Searc...
How to solve ts(2322) error on "each" attribute of "For" component
I'm trying to render items using the built-in "For" component for solid but I keep getting the following error:
```
Type '(() => Promise<any>) | undefined' is not assignable to type 'false | readonly any[] | null | undefined'.
Type '() => Promise<any>' is not assignable to type 'false | readonly any[] | null | undefined'.ts(2322)
flow.d.ts(17, 5): The expected type comes from property 'each' which is declared here on type 'IntrinsicAttributes & { each: false | readonly any[] | null | undefine...
```
Type '(() => Promise<any>) | undefined' is not assignable to type 'false | readonly any[] | null | undefined'.
Type '() => Promise<any>' is not assignable to type 'false | readonly any[] | null | undefined'.ts(2322)
flow.d.ts(17, 5): The expected type comes from property 'each' which is declared here on type 'IntrinsicAttributes & { each: false | readonly any[] | null | undefine...
How to make array key in resource from useRouteData reactive
I'm noticing that, if the resource that is the return value of
Example:
If I just stringify this value on the server and then parse it on the client, then that works just fine, but I'm wondering if there is any way to make it reactive?
The associated `route...
useRouteData is an object, then its keys will mostly be reactive -- but if the key has an array as its value, that key will not be reactiveExample:
const data useRouteData();
data().name // reactive
data().groceryList[0] // not reactiveIf I just stringify this value on the server and then parse it on the client, then that works just fine, but I'm wondering if there is any way to make it reactive?
The associated `route...
possible to cancel back button with solid router?
i am making a minigame website and people are accidentally swiping back on their phones while playing the games. any way to cancel the "browser back" action while they're in the middle of one of these html canvas games? i'm using solid router for my site navigation
createResource from the main layout causes it to completely crash the page
#
I have a
```ts
export const routeData = () => {
const project = createResource(async () => {
try {
const projectRes = await getProject();
return projectRes!.data;
} catch (error: any) {
console.log("couldn't get project info", error.message);
}
});
const user = createResource(async () => {
try {
const e = useServerContext();...
I have a
dashboard.tsx main layout file and 2 routes inside this dashboard route, and inside this layout I have these resources```ts
export const routeData = () => {
const project = createResource(async () => {
try {
const projectRes = await getProject();
return projectRes!.data;
} catch (error: any) {
console.log("couldn't get project info", error.message);
}
});
const user = createResource(async () => {
try {
const e = useServerContext();...
Rendering Solid inside another app
I work as a web developer maintaining an organisation's web portal. The portal is quite old - it's built using ASP.NET MVC 5 and Knockout, and features a lot of custom architecture. I'd like to make moves towards upgrading it to a more modern framework (and while I've picked Solid for that we may settle on something else in the end), but we have only a very small team and it's a large project - too large to port it all over to a new framework in one go. To that end, I've been experimenting with...