Eve
Eve
PostsComments
SSolidJS
Created by Eve on 12/30/2024 in #support
How to type the context from the docs example
:facepalm:
4 replies
SSolidJS
Created by Eve on 12/30/2024 in #support
How to type the context from the docs example
The TS errors, if that helps 
[{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "2503",
    "severity": 8,
    "message": "Cannot find namespace 'CounterContext'.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 6,
    "endLineNumber": 21,
    "endColumn": 20
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1005",
    "severity": 8,
    "message": "'>' expected.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 30,
    "endLineNumber": 21,
    "endColumn": 35
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "2304",
    "severity": 8,
    "message": "Cannot find name 'value'.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 30,
    "endLineNumber": 21,
    "endColumn": 35
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1005",
    "severity": 8,
    "message": "')' expected.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 35,
    "endLineNumber": 21,
    "endColumn": 36
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "2365",
    "severity": 8,
    "message": "Operator '>' cannot be applied to types '{ counter: (Accessor<number> | { increment(): void; decrement(): void; })[]; }' and '{ props: { children?: JSX.Element; } & { initialCount?: number; }; \"\": any; }'.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 36,
    "endLineNumber": 22,
    "endColumn": 23
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "2365",
    "severity": 8,
    "message": "Operator '<' cannot be applied to types 'boolean' and 'RegExp'.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 36,
    "endLineNumber": 23,
    "endColumn": 31
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1005",
    "severity": 8,
    "message": "',' expected.",
    "source": "ts",
    "startLineNumber": 22,
    "startColumn": 13,
    "endLineNumber": 22,
    "endColumn": 14
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1161",
    "severity": 8,
    "message": "Unterminated regular expression literal.",
    "source": "ts",
    "startLineNumber": 23,
    "startColumn": 6,
    "endLineNumber": 23,
    "endColumn": 31
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1128",
    "severity": 8,
    "message": "Declaration or statement expected.",
    "source": "ts",
    "startLineNumber": 24,
    "startColumn": 3,
    "endLineNumber": 24,
    "endColumn": 4
}]
[{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "2503",
    "severity": 8,
    "message": "Cannot find namespace 'CounterContext'.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 6,
    "endLineNumber": 21,
    "endColumn": 20
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1005",
    "severity": 8,
    "message": "'>' expected.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 30,
    "endLineNumber": 21,
    "endColumn": 35
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "2304",
    "severity": 8,
    "message": "Cannot find name 'value'.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 30,
    "endLineNumber": 21,
    "endColumn": 35
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1005",
    "severity": 8,
    "message": "')' expected.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 35,
    "endLineNumber": 21,
    "endColumn": 36
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "2365",
    "severity": 8,
    "message": "Operator '>' cannot be applied to types '{ counter: (Accessor<number> | { increment(): void; decrement(): void; })[]; }' and '{ props: { children?: JSX.Element; } & { initialCount?: number; }; \"\": any; }'.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 36,
    "endLineNumber": 22,
    "endColumn": 23
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "2365",
    "severity": 8,
    "message": "Operator '<' cannot be applied to types 'boolean' and 'RegExp'.",
    "source": "ts",
    "startLineNumber": 21,
    "startColumn": 36,
    "endLineNumber": 23,
    "endColumn": 31
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1005",
    "severity": 8,
    "message": "',' expected.",
    "source": "ts",
    "startLineNumber": 22,
    "startColumn": 13,
    "endLineNumber": 22,
    "endColumn": 14
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1161",
    "severity": 8,
    "message": "Unterminated regular expression literal.",
    "source": "ts",
    "startLineNumber": 23,
    "startColumn": 6,
    "endLineNumber": 23,
    "endColumn": 31
},{
    "resource": "test.ts",
    "owner": "typescript",
    "code": "1128",
    "severity": 8,
    "message": "Declaration or statement expected.",
    "source": "ts",
    "startLineNumber": 24,
    "startColumn": 3,
    "endLineNumber": 24,
    "endColumn": 4
}]
4 replies
SSolidJS
Created by abe on 10/21/2024 in #support
Confused between For and index
So if you want to redraw when a value changes, use for. If you want to redraw when an item in the array is added/removed, use index
7 replies
SSolidJS
Created by abe on 10/21/2024 in #support
Confused between For and index
In simplest terms, with For the value is reactive. With Index the index is reactive.
7 replies
SSolidJS
Created by DH on 10/19/2024 in #support
Losing reactivity when importing a signal from a library that uses SolidJS
My best guess is that the bundling process is messing something up, since importing from a clone of the source repo works fine, and importing from the npm package doesn't. Exact same test code, just toggling the path of the import statement. Unfortunately that's a little beyond my knowledge to debug.
16 replies
SSolidJS
Created by DH on 10/19/2024 in #support
Losing reactivity when importing a signal from a library that uses SolidJS
Works just fine in the playground.
16 replies
SSolidJS
Created by DH on 10/19/2024 in #support
Losing reactivity when importing a signal from a library that uses SolidJS
https://playground.solidjs.com/anonymous/e6aafd37-ee7c-460a-b38c-ce1e7d6d3b8d
16 replies
SSolidJS
Created by DH on 10/19/2024 in #support
Losing reactivity when importing a signal from a library that uses SolidJS
Well... the answer is, something outside of what you've posted.
16 replies
SSolidJS
Created by DH on 10/19/2024 in #support
Losing reactivity when importing a signal from a library that uses SolidJS
You're showing code, but you're not showing where, or how it's imported. Neither yourindex.tsx nor App.tsx appear to have any imports that relate to the code defined at the top.
16 replies
SSolidJS
Created by Greenman999 on 10/19/2024 in #support
Display relative time as signal
Maybe that will get you started. But you really need to read and understand the documentation on how solid works.
7 replies
SSolidJS
Created by Greenman999 on 10/19/2024 in #support
Display relative time as signal
https://playground.solidjs.com/anonymous/ec9bd002-d5f5-47e8-bc77-b585a591984c
7 replies
SSolidJS
Created by Greenman999 on 10/19/2024 in #support
Display relative time as signal
There's nothing reactive in any of that code, so how would solid react to it?
7 replies
SSolidJS
Created by Massukka on 10/16/2024 in #support
&& in <Show> when condition and typescript?
I'm not sure if the other way would work, but I found this much cleaner to read.
27 replies
SSolidJS
Created by Massukka on 10/16/2024 in #support
&& in <Show> when condition and typescript?
I had something similar, and this is what I went with 
const [first, setFirst] = createSignal();
const [second, setSecond] = createSignal();
const [third, setThird] = createSignal();
const [ready, setReady] = createSignal(false);

createEffect(() => {
    if (first() && second() && third()) {
        setReady(true);
    }
});

return (
  <Show when={ready()}>
    <div>Ready</div>
  </Show>
);
const [first, setFirst] = createSignal();
const [second, setSecond] = createSignal();
const [third, setThird] = createSignal();
const [ready, setReady] = createSignal(false);

createEffect(() => {
    if (first() && second() && third()) {
        setReady(true);
    }
});

return (
  <Show when={ready()}>
    <div>Ready</div>
  </Show>
);
27 replies
SSolidJS
Created by RATIU5 on 10/15/2024 in #support
How do I run an effect every change except initialization?
yeah, you're doing something wrong somewhere, because that absolutely works.
5 replies
SSolidJS
Created by Cyteon on 10/14/2024 in #support
template2 is not a function
if you check entry-server.tsx, you will see this 
   <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>
   <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>
This is what your document html structure that gets served will be. Your App component, gets mounted inside of the div#app. So by returning a body element in your App component, you're attempting to embed a second <body> inside of the div, which is not a valid HTML document.
10 replies
SSolidJS
Created by Cyteon on 10/14/2024 in #support
template2 is not a function
the template already has a body, so you're attempting to create a document with 2 body elements.
10 replies
SSolidJS
Created by hcker2000 on 10/9/2024 in #support
Any way to pass the value of an event to say an onChange handler?
also allows me to do stuff like fieldsSet().has('someField') to quickly check if a given field is included or not.
33 replies
SSolidJS
Created by hcker2000 on 10/9/2024 in #support
Any way to pass the value of an event to say an onChange handler?
Then whenever I want to add/remove anything, I just do something easy like setFieldsSet(fieldsSet().concat('newField'))
33 replies
SSolidJS
Created by hcker2000 on 10/9/2024 in #support
Any way to pass the value of an event to say an onChange handler?
What I've done in the past instead of modifying the store, is create a signal that's just an array of fields I want to show, and then read the contents I want from the actual dataStore 
<For each={fieldsSet()}>
  {(field) => <div>{dataStore[field]}</div> 
</For>
<For each={fieldsSet()}>
  {(field) => <div>{dataStore[field]}</div> 
</For>
33 replies