Chris P Bacon Comments - Answer Overflow

Chris P Bacon

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

@Brendonovich just a quick sanity check. does it make sense to have that onCleanup in order to remove the interval? or should I use a different mechanism?

17 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

thanks!!

17 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

woooo, works like a charm!!!

17 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

gotcha

17 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

oooooh, it's one of those getters. not an accessor that is returned

17 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

ok, understood, but then I lose my reactivity right? and I do want a signal

17 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

the new implementation

const Content: Component<{ directory: FileSystemDirectoryHandle }> = (props) => {
    const files = readFiles(() => props.directory);
    const [contents] = createResource(() => Promise.all(Object.entries(files()).map(async ([id, { file, handle }]) => ({ id, handle, lang: file.name.split('.').at(0)!, entries: (await load(file)) }))));

    createEffect(() => {
        console.log('contents', contents.latest);
    });

    return <></>;
}


type Files = Record<string, { handle: FileSystemFileHandle, file: File }>;
const readFiles = (directory: Accessor<FileSystemDirectoryHandle>): Accessor<Files> => {
    const [value, { refetch }] = createResource<Files>(async (_, { value: prev }) => {
        ... // omitted for brevity
    }, { initialValue: {} })

    const interval = setInterval(() => {
        refetch();
    }, 1000);

    onCleanup(() => {
        clearInterval(interval);
    });

    return value;
};

const Content: Component<{ directory: FileSystemDirectoryHandle }> = (props) => {
    const files = readFiles(() => props.directory);
    const [contents] = createResource(() => Promise.all(Object.entries(files()).map(async ([id, { file, handle }]) => ({ id, handle, lang: file.name.split('.').at(0)!, entries: (await load(file)) }))));

    createEffect(() => {
        console.log('contents', contents.latest);
    });

    return <></>;
}


type Files = Record<string, { handle: FileSystemFileHandle, file: File }>;
const readFiles = (directory: Accessor<FileSystemDirectoryHandle>): Accessor<Files> => {
    const [value, { refetch }] = createResource<Files>(async (_, { value: prev }) => {
        ... // omitted for brevity
    }, { initialValue: {} })

    const interval = setInterval(() => {
        refetch();
    }, 1000);

    onCleanup(() => {
        clearInterval(interval);
    });

    return value;
};

17 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

hmm. I get the same flickering when using createResource. And also not sure how .latest is supposed to help here. I still do want it to be a signal. It seems that the eventual consuming 'scope' is still triggered by the underlying refetch even though the signal's output itself is clean. Is this perhaps where a well-placed untrack might help?

17 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

also, for more context, this is my inital attempt at a createAsyncMemo, but it goes infinite as soon as I consume the getter

function createAsyncMemo<Next extends Prev, Init extends Next, Prev>(fn: (prev: Prev | Init) => (Promise<Next | Prev> | Next | Prev), value: Init): Accessor<Next> {
    const [get, set] = createSignal<Next>(value);

    createEffect(() => {
        const v = get() ?? value;

        (async () => {
            const next = await fn(v);

            console.log('next', next);

            set(() => next as Next);
        })();
    });

    createEffect(() => {
        // console.log('infinite???', get());
    });

    return createMemo(() => [] as Next);
}

function createAsyncMemo<Next extends Prev, Init extends Next, Prev>(fn: (prev: Prev | Init) => (Promise<Next | Prev> | Next | Prev), value: Init): Accessor<Next> {
    const [get, set] = createSignal<Next>(value);

    createEffect(() => {
        const v = get() ?? value;

        (async () => {
            const next = await fn(v);

            console.log('next', next);

            set(() => next as Next);
        })();
    });

    createEffect(() => {
        // console.log('infinite???', get());
    });

    return createMemo(() => [] as Next);
}

17 replies

SSolidJS

•Created by Chris P Bacon on 1/27/2025 in #support

Mixing async and signals

type Files = Record<string, { handle: FileSystemFileHandle, file: File }>;
const readFiles = (directory: Accessor<FileSystemDirectoryHandle>): Accessor<Files> => {
    const tick = createPolled<number>(i => i + 1, 1000, 0);

    return createAsync<Files>(async (prev) => {
        tick();

        prev ??= {};

        const next = Object.fromEntries(await Array.fromAsync(
            filter(directory().values(), (handle): handle is FileSystemFileHandle => handle.kind === 'file' && handle.name.endsWith('.json')),
            async handle => [await handle.getUniqueId(), { file: await handle.getFile(), handle }]
        ));

        const keysPrev = Object.keys(prev);
        const keysNext = Object.keys(next);

        if (keysPrev.length !== keysNext.length) {
            return next;
        }

        if (keysPrev.some(prev => keysNext.includes(prev) === false)) {
            return next;
        }

        if (Object.entries(prev).every(([id, { file }]) => next[id].file.lastModified === file.lastModified) === false) {
            return next;
        }

        return prev;
    }, { initialValue: {} });
};

type Files = Record<string, { handle: FileSystemFileHandle, file: File }>;
const readFiles = (directory: Accessor<FileSystemDirectoryHandle>): Accessor<Files> => {
    const tick = createPolled<number>(i => i + 1, 1000, 0);

    return createAsync<Files>(async (prev) => {
        tick();

        prev ??= {};

        const next = Object.fromEntries(await Array.fromAsync(
            filter(directory().values(), (handle): handle is FileSystemFileHandle => handle.kind === 'file' && handle.name.endsWith('.json')),
            async handle => [await handle.getUniqueId(), { file: await handle.getFile(), handle }]
        ));

        const keysPrev = Object.keys(prev);
        const keysNext = Object.keys(next);

        if (keysPrev.length !== keysNext.length) {
            return next;
        }

        if (keysPrev.some(prev => keysNext.includes(prev) === false)) {
            return next;
        }

        if (Object.entries(prev).every(([id, { file }]) => next[id].file.lastModified === file.lastModified) === false) {
            return next;
        }

        return prev;
    }, { initialValue: {} });
};

17 replies

SSolidJS

•Created by tosiguru on 11/7/2024 in #support

useContext(someContext) returns undefined if the component is inside fallback prop for <Show ... />

<Show /> 's fallback expects an JSX.Element, so you want to "call" the component instead of passing it along. I am not sure if this would fix your issue, but hopefully it helps. so turn

<Show when={store.user} fallback={LoginScreen}>

<Show when={store.user} fallback={LoginScreen}>

into

<Show when={store.user} fallback={<LoginScreen />}>

<Show when={store.user} fallback={<LoginScreen />}>

2 replies

SSolidJS

•Created by Chris P Bacon on 11/6/2024 in #support

Css modules not getting nonce attribute

well, I set the meta tag manually, but vite/solid still isn't adding any nonces. back to square one

3 replies

SSolidJS

•Created by Mocha on 11/6/2024 in #support

Nested Stores not tracking with `trackDeep`/`trackStore`

I am not familiar with trackStore , but for my own case I just dumbly iterated the leafs of the tree so that everything is tracked in that scope. I suspect this is not how you are supposed to do it, but at least it works 😛 https://github.com/chris-kruining/calque/blob/dc30ebb35e36ea34ea7e368b4f3b5636aa1c0881/src/features/file/grid.tsx#L49

2 replies

SSolidJS

•Created by Chris P Bacon on 11/6/2024 in #support

Css modules not getting nonce attribute

I think I got a step further. vite is actually attempting to set the nonce on the style elements. however the "trigger" for that is a meta tag with the name csp-nonce. And that one is missing. So now the next question is why is that

3 replies

SSolidJS

•Created by ChrisThornham on 1/13/2024 in #support

How To Setup HTTPS on localhost

is there any update for this? or can someone explain to me why the mkcert plugin does not work? it works flawlessly for my analog app, so I had hoped it would work just as well for Start

4 replies

Gaming

Programming