FutureLights Posts - Answer Overflow

FutureLights

Explore posts from servers

•Created by FutureLights on 8/13/2023 in #support

Solid Start with Prisma, when making changes to pages results in routing to 404 page.

I just started playing around with Solid Start and am using the Prisma template. I can spin it up just fine by generating the Prisma db with npx prisma generate and then starting the dev server with npm run dev -- --open. Everything works great. However, I'm having issues with the simpliest of things. If I go into the login form page and add a div element, the entire project breaks. Now instead of seeing a login page when at /login it fashes quickly and then I get the 404 error page. Interestingly, I can edit the names of the fields and that works, it's just when I try to add a new element. Why is this simple change breaking the project? This is really my first time working with SSR and Prisma for that matter, however I am pretty comfortable using Solid JS. Is there something I am missing? I've tried completely restarting the dev server incase it's an issue with the HMR, but I still get the same behavior.

1 replies

SSolidJS

•Created by FutureLights on 4/24/2023 in #support

Wrap each child

I would like to wrap each child in an element. For example I have a list element and I wand ever child element to be wrapped in a li element. What's the proper way of doing this? I can do it like this with the children helper function, but is this a good way of doing it? Should I try to avoid this situation?

export const List: ParentComponent = (props) => {
    const c = children(() => props.children).toArray();
    return <ul>
        <For each={c}>
            {child => <li>{child}</li>}
        </For>
    </ul>
}

export const List: ParentComponent = (props) => {
    const c = children(() => props.children).toArray();
    return <ul>
        <For each={c}>
            {child => <li>{child}</li>}
        </For>
    </ul>
}

11 replies

SSolidJS

•Created by FutureLights on 1/15/2023 in #support

Solid JS force rerender on signal change

I need to force Solid JS to make changes to the DOM every time a signal changes. Currently it seems that it is batched, probably for performance reasons. I can get around this by wrapping my second signal change in a setTimeout, but I want to make sure I am not implementing a hacky solution. For example, could I reliably get away with using a requestAnimationFrame or is there some Solid JS provided function that I missed? Here is a code snippet that demonstrates the problem and the timeout fix. If you remove the setTimeout, you will see no change.

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Component() {

  const [state, setState] = createSignal(true);

  const x = () => {
    setState(false);
    setTimeout(() => {
      setState(true);
    }, 0);
  };

  return <button
    onClick={() => x()}
    style={{
      transition: state() ? 'background-color 5s' : 'background-color 0s',
      'background-color': state() ? 'blue' : 'red',
    }}
  >Click</button>;
}

render(() => <Component />, document.getElementById("app")!);

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Component() {

  const [state, setState] = createSignal(true);

  const x = () => {
    setState(false);
    setTimeout(() => {
      setState(true);
    }, 0);
  };

  return <button
    onClick={() => x()}
    style={{
      transition: state() ? 'background-color 5s' : 'background-color 0s',
      'background-color': state() ? 'blue' : 'red',
    }}
  >Click</button>;
}

render(() => <Component />, document.getElementById("app")!);

4 replies

SSolidJS

•Created by FutureLights on 1/13/2023 in #support

Context In Typescript

I'm trying to create a context in Typescript following this example, but copying and pasting the code results in an error when I try and use the ThemeContext.Provider in the ThemeProvider Component. https://www.solidjs.com/examples/context Cannot find namespace 'ThemeContext'. Any suggestions?

20 replies

SSolidJS

•Created by FutureLights on 1/12/2023 in #support

Set Timeout Example

I want to update a single every x seconds in a component. Are there any examples of this I can look at? Right now this is my approach, but it is not working. I can't seem to find any examples anywhere.

import { render } from "solid-js/web";
import { createSignal, onMount } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => {
    setCount(count() + 1);
    console.log('Incrementing')

    window.setTimeout(() => {
      increment();
    }, 1000);
  }

  onMount(() => increment());

  return (
    count()
  );
}

render(() => <Counter />, document.getElementById("app")!);

import { render } from "solid-js/web";
import { createSignal, onMount } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => {
    setCount(count() + 1);
    console.log('Incrementing')

    window.setTimeout(() => {
      increment();
    }, 1000);
  }

  onMount(() => increment());

  return (
    count()
  );
}

render(() => <Counter />, document.getElementById("app")!);

14 replies

SSolidJS

•Created by FutureLights on 12/26/2022 in #support

Better way of reusing event listeners for hooks

I have a hook for the window size.

import { Accessor, onCleanup, onMount } from 'solid-js';
import { createSignal } from 'solid-js';

export const useWindowSize = (): {
    width: Accessor<number>;
    height: Accessor<number>;
} => {
    const [width, setWidth] = createSignal(0);
    const [height, setHeight] = createSignal(0);

    const handle = () => {
        setWidth(window.innerWidth);
        setHeight(window.innerHeight);
    };

    onMount(() => {
        window.addEventListener('resize', handle);
        handle();
    });

    onCleanup(() => window.removeEventListener('resize', handle))

    return { width, height };
}

import { Accessor, onCleanup, onMount } from 'solid-js';
import { createSignal } from 'solid-js';

export const useWindowSize = (): {
    width: Accessor<number>;
    height: Accessor<number>;
} => {
    const [width, setWidth] = createSignal(0);
    const [height, setHeight] = createSignal(0);

    const handle = () => {
        setWidth(window.innerWidth);
        setHeight(window.innerHeight);
    };

    onMount(() => {
        window.addEventListener('resize', handle);
        handle();
    });

    onCleanup(() => window.removeEventListener('resize', handle))

    return { width, height };
}

It works great, but I want to reuse my event listener because I'll be using this hook in many components. I can always do something like below, but there has to be a better way to do it with something that SolidJS provids? Or even JS.

import { Accessor, onCleanup, onMount } from 'solid-js';
import { createSignal } from 'solid-js';

type Callback = (width: number, height: number) => void;

const cbMap: {[key: string]: Callback} = {};

const handleEvent = () => {
    let w = window.innerWidth;
    let h = window.innerHeight;
    Object.values(cbMap).forEach(cb => cb(w, h));
}

window.addEventListener('resize', handleEvent);

const sub = (uuid: string, cb: Callback) => {
    cbMap[uuid] = cb;
    return uuid;
}

const unsub = (uuid: string) => {
    delete cbMap[uuid];
}

export const useWindowSize = (): {
    width: Accessor<number>;
    height: Accessor<number>;
} => {
    const [width, setWidth] = createSignal(window.innerWidth);
    const [height, setHeight] = createSignal(window.innerHeight);
    var uuid = crypto.randomUUID();

    const handle = (w: number, h: number) => {
        setWidth(w);
        setHeight(h);
    };

    onMount(() => {
        sub(uuid, handle);
    });

    onCleanup(() => unsub(uuid))

    return { width, height };
}

import { Accessor, onCleanup, onMount } from 'solid-js';
import { createSignal } from 'solid-js';

type Callback = (width: number, height: number) => void;

const cbMap: {[key: string]: Callback} = {};

const handleEvent = () => {
    let w = window.innerWidth;
    let h = window.innerHeight;
    Object.values(cbMap).forEach(cb => cb(w, h));
}

window.addEventListener('resize', handleEvent);

const sub = (uuid: string, cb: Callback) => {
    cbMap[uuid] = cb;
    return uuid;
}

const unsub = (uuid: string) => {
    delete cbMap[uuid];
}

export const useWindowSize = (): {
    width: Accessor<number>;
    height: Accessor<number>;
} => {
    const [width, setWidth] = createSignal(window.innerWidth);
    const [height, setHeight] = createSignal(window.innerHeight);
    var uuid = crypto.randomUUID();

    const handle = (w: number, h: number) => {
        setWidth(w);
        setHeight(h);
    };

    onMount(() => {
        sub(uuid, handle);
    });

    onCleanup(() => unsub(uuid))

    return { width, height };
}

4 replies

SSolidJS

•Created by FutureLights on 12/25/2022 in #support

EPERM operation not permitted, rmdir

I'm getting this error when I try to visit my dev site

8:43:09 PM [vite] error while updating dependencies:
Error: EPERM: operation not permitted, rmdir 'C:\Users\...\node_modules\.vite\deps'

8:43:09 PM [vite] error while updating dependencies:
Error: EPERM: operation not permitted, rmdir 'C:\Users\...\node_modules\.vite\deps'

I'm pretty sure I somehow corrupted by project. The Vite HMR wasn't working and I was trying to fix it. I did not change any config files, just tried starting vite with different flags. Anyways, if I look at my node_modules folder properties, the read-only checkbox is checked (Windows). Unchecking shows a progress bar and closes, but it is still checked if I reopen properties again. Googling hasn't helped (https://stackoverflow.com/questions/39293636/npm-err-error-eperm-operation-not-permitted-rename, https://stackoverflow.com/questions/58078937/eperm-operation-not-permitted-mkdir-c-program-files-nodejs-node-modules-sta). I've never had this problem with React, but I have several times with Solid JS. I'm sure it nothing with Solid JS, I just don't know if it's an issue with vite or something else. I'm sure it's something I did wrong, but have no idea what or how to fix it. If anyone has ran into this problem, and has a solution that would be great. As of now, my only work around is to delete node_modules and package-lock.json and reinstall everything. I really don't know why that works and I have to redo everytime any of my packages change.

11 replies

Gaming

Programming