ringsig Posts - Answer Overflow

ringsig

•Created by ringsig on 10/16/2023 in #support

Dependency on `window`?

I'm using babel-preset-solid and for some reason the generated output has a dependency on window:

function delegateEvents(eventNames, document = window.document) {
  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
  for (let i = 0, l = eventNames.length; i < l; i++) {
    const name = eventNames[i];
    if (!e.has(name)) {
      e.add(name);
      document.addEventListener(name, eventHandler);
    }
  }
}

function delegateEvents(eventNames, document = window.document) {
  const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
  for (let i = 0, l = eventNames.length; i < l; i++) {
    const name = eventNames[i];
    if (!e.has(name)) {
      e.add(name);
      document.addEventListener(name, eventHandler);
    }
  }
}

This makes my library unusable in server-rendered environments. Why does this happen and how do I get rid of this dependency?

10 replies

SSolidJS

•Created by ringsig on 5/24/2023 in #support

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:

import withSolid from "rollup-preset-solid";
import postcss from "rollup-plugin-postcss";

export default withSolid({
    targets: ["esm", "cjs"],
    plugins: [
        postcss({
            extract: true,
            modules: true,
            minimize: true,
            sourceMap: true
        })
    ]
});

import withSolid from "rollup-preset-solid";
import postcss from "rollup-plugin-postcss";

export default withSolid({
    targets: ["esm", "cjs"],
    plugins: [
        postcss({
            extract: true,
            modules: true,
            minimize: true,
            sourceMap: true
        })
    ]
});

Online research suggests that this is because of improper JSX compilation, but I'm not sure what I'm doing wrong. Any ideas?

2 replies

SSolidJS

•Created by ringsig on 5/21/2023 in #support

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?

10 replies

SSolidJS

•Created by ringsig on 3/23/2023 in #support

Component doesn't react to changes in Signal

Hi! So I'm not sure why but my component is not reacting when a Signal changes. The signal is defined globally:

export const [authState, setAuthState] = createSignal<AuthState | null>(null);
export const isAuthenticated = () => authState() !== null;

export const [authState, setAuthState] = createSignal<AuthState | null>(null);
export const isAuthenticated = () => authState() !== null;

This is my App.tsx file:

const App: Component = () => {
    createEffect(() => {
        console.warn(authState());
    });

    return (
        <div class={styles.App}>
            <pre>
                isAuthenticated: {JSON.stringify(isAuthenticated())} | authState: {JSON.stringify(authState(), null, 2)}
            </pre>

            <Show when={isAuthenticated()}>
                <p>Authenticated with id {authState()!.id}</p>
            </Show>

            <AuthForm />
        </div>
    );
};

const App: Component = () => {
    createEffect(() => {
        console.warn(authState());
    });

    return (
        <div class={styles.App}>
            <pre>
                isAuthenticated: {JSON.stringify(isAuthenticated())} | authState: {JSON.stringify(authState(), null, 2)}
            </pre>

            <Show when={isAuthenticated()}>
                <p>Authenticated with id {authState()!.id}</p>
            </Show>

            <AuthForm />
        </div>
    );
};

The Signal is set in some event handler from a third-party library. The effect runs and prints the new authState when it updates, but the actual component/markup itself just refuses to update it. I tried directly calling setAuthState and that somehow works, but inside a timeout or a third-party event handler, it doesn't. Any clues?

2 replies

SSolidJS

•Created by ringsig on 3/15/2023 in #support

Listening to all changes in an array or object in a store

Hi! I have a store that has arrays and objects inside it. I want to listen to all changes in a tree. For instance, suppose this is my store:

{
    "array": [
        { "name": "object1" },
        { "name": "object2" }
    ]
}

{
    "array": [
        { "name": "object1" },
        { "name": "object2" }
    ]
}

and I want to use the on helper to listen to this array such that whenever array, array[n] or array[n].name changes, my effect will be called. Is there some way to do that?

12 replies

Gaming

Programming