Revxrsal Posts - Answer Overflow

Topics

Revxrsal

•Created by Revxrsal on 2/28/2024 in #support

dev environment constantly not showing pages correctly

o/ i'm running into weird issues with my dev environment. certain pages do not work, and signals/resources also seem to break. any idea? something probably relevant: the download.tsx file in /routes/ was called subscriptions.tsx earlier. i renamed it, and stuff seemed to break. this also seemed to repeatedly happen when i create a new route or a new file. any idea?

6 replies

•Created by Revxrsal on 2/9/2024 in #support

weird behavior: a button declared in TSX with onClick does not have onClick in the final html?

No description

31 replies

•Created by Revxrsal on 9/18/2023 in #support

vite bundling unused components from external libraries (SSR)

No description

27 replies

•Created by Revxrsal on 8/17/2023 in #support

an error that occurs every time something changes, but disappears with refresh

o/ i've run into some really odd behavior today. whenever i change anything in my code, the hot reload thing does its job but the program runs into this error

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at cleanChildren (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:664:12)
    at insertExpression (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:559:15)
    at Object.fn (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:337:35)
    at runComputation (http://localhost:3000/node_modules/.vite/deps/chunk-JCQPQJXD.js?v=ef9131dd:742:22)
    at updateComputation (http://localhost:3000/node_modules/.vite/deps/chunk-JCQPQJXD.js?v=ef9131dd:725:3)
    at createRenderEffect (http://localhost:3000/node_modules/.vite/deps/chunk-JCQPQJXD.js?v=ef9131dd:229:5)
    at insert (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:337:3)
    at http://localhost:3000/src/components/icons/index.tsx:55:5
    at IconTemplate (http://localhost:3000/src/components/icons/index.tsx:65:5)
    at SiMysql (http://localhost:3000/src/components/icons/si/index.tsx:227:10)

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at cleanChildren (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:664:12)
    at insertExpression (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:559:15)
    at Object.fn (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:337:35)
    at runComputation (http://localhost:3000/node_modules/.vite/deps/chunk-JCQPQJXD.js?v=ef9131dd:742:22)
    at updateComputation (http://localhost:3000/node_modules/.vite/deps/chunk-JCQPQJXD.js?v=ef9131dd:725:3)
    at createRenderEffect (http://localhost:3000/node_modules/.vite/deps/chunk-JCQPQJXD.js?v=ef9131dd:229:5)
    at insert (http://localhost:3000/node_modules/.vite/deps/chunk-K2MOVHHE.js?v=ef9131dd:337:3)
    at http://localhost:3000/src/components/icons/index.tsx:55:5
    at IconTemplate (http://localhost:3000/src/components/icons/index.tsx:65:5)
    at SiMysql (http://localhost:3000/src/components/icons/si/index.tsx:227:10)

this occurs whenever i use this component: https://gist.github.com/Revxrsal/ac9fecc2e5b8acfca30070929d7b42dd (i extracted the component from https://github.com/x64Bits/solid-icons) the error appears only after i change something, then disappears after a full refresh. it's really annoying as this means i have to comment-out icons while developing, or need a full reload on every small change. any idea?

1 replies

•Created by Revxrsal on 8/12/2023 in #support

onCleanup in Root component?

o/ so i have this component in my root. if i refresh the page, it doesn't log the cleaning up root!! message. is there any other way to run code when the app stops/refreshes?

onCleanup(() => {
   console.log("cleaning up root!!")
})

onCleanup(() => {
   console.log("cleaning up root!!")
})

7 replies

•Created by Revxrsal on 8/6/2023 in #support

solid-router not updating when going the same page but with different parameters

o/ so i have this in /routines/[id].tsx:

export default function EditRoutine() {
    const params = useParams();
    const routineIndex = storage.routines.findIndex(s => s.id == params.id)!;
    const [routine, setRoutine] = createStore(
        storage.routines[routineIndex]
    )
    return <RoutineForm
        routine={routine}
        setRoutine={setRoutine}
        replace={true}
        onFinish={(routine) => {
            setStorage("routines", produce((r) => r[routineIndex] = routine))
        }}
    />
}

export default function EditRoutine() {
    const params = useParams();
    const routineIndex = storage.routines.findIndex(s => s.id == params.id)!;
    const [routine, setRoutine] = createStore(
        storage.routines[routineIndex]
    )
    return <RoutineForm
        routine={routine}
        setRoutine={setRoutine}
        replace={true}
        onFinish={(routine) => {
            setStorage("routines", produce((r) => r[routineIndex] = routine))
        }}
    />
}

for some reason switching between two different pages of the same route (e.g. /id/1 and /id/2) doesn't change the routine and setRoutine. am i doing something wrong? (notice the address changing but the content remaining)

13 replies

•Created by Revxrsal on 8/6/2023 in #support

updating a member inside another member inside an array inside a store using an index

o/ so i have data structured as follows, which is inside a store:

{
    actions: [ 
        {
             data: {...}
        }
    ]
}

{
    actions: [ 
        {
             data: {...}
        }
    ]
}

when i do this:

setStore(
    "actions",
    i.index,
    "data",
    block.data
)

setStore(
    "actions",
    i.index,
    "data",
    block.data
)

modifying works fine. but i have an effect subscribed to it

    createEffect(() => {
        console.log(store)
        console.log(store.actions)
    })

    createEffect(() => {
        console.log(store)
        console.log(store.actions)
    })

this doesn't get re-triggered when the data changes. any idea?

11 replies

•Created by Revxrsal on 8/5/2023 in #support

useParams() not changing when switching pages?

i'm getting really odd behavior

export default function EditRoutine() {
    const params = useParams();
    createEffect(() => {
        console.log("Params")
        console.log(params)
    })
   return <></>

export default function EditRoutine() {
    const params = useParams();
    createEffect(() => {
        console.log("Params")
        console.log(params)
    })
   return <></>

"Params" only gets printed once, when going to the dynamic route for the first time. after that it stops changing. any idea?

8 replies

•Created by Revxrsal on 8/3/2023 in #support

question about stores and effects

9 replies

•Created by Revxrsal on 7/29/2023 in #support

solid build works, vite build doesn't

i have a website that should be SSG'd for use in a Tauri app (https://tauri.app/). when i run solid build, it works fine. vite build doesn't though. am i supposed to worry?

PS F:\Rust\windows-assistant> vite build
vite v4.4.6 building for production...
✓ 0 modules transformed.
Inspect report generated at F:\Rust\windows-assistant\.solid\inspect
✓ built in 843ms
Could not resolve entry module "index.html".
error during build:
RollupError: Could not resolve entry module "index.html".
    at error (file:///F:/Rust/windows-assistant/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
    at ModuleLoader.loadEntryModule (file:///F:/Rust/windows-assistant/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:24695:20)
    at async Promise.all (index 0)
PS F:\Rust\windows-assistant>

PS F:\Rust\windows-assistant> vite build
vite v4.4.6 building for production...
✓ 0 modules transformed.
Inspect report generated at F:\Rust\windows-assistant\.solid\inspect
✓ built in 843ms
Could not resolve entry module "index.html".
error during build:
RollupError: Could not resolve entry module "index.html".
    at error (file:///F:/Rust/windows-assistant/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
    at ModuleLoader.loadEntryModule (file:///F:/Rust/windows-assistant/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:24695:20)
    at async Promise.all (index 0)
PS F:\Rust\windows-assistant>

5 replies

•Created by Revxrsal on 2/10/2023 in #support

peer dependency error when creating a new SolidStart project

2 replies

•Created by Revxrsal on 1/9/2023 in #support

add fade-in and fade-out animations when navigating routes (using solid-routes)

o/ is there any way to add some sort of fade-in and fade-out animations when navigating between routes? this is what i basically have at the moment

                        <ErrorBoundary fallback={<p>some problem</p>}>
                            <Routes>
                                <Route path="/" component={Home}/>
                                <Route path="/settings" component={Settings}/>
                            </Routes>
                        </ErrorBoundary>

                        <ErrorBoundary fallback={<p>some problem</p>}>
                            <Routes>
                                <Route path="/" component={Home}/>
                                <Route path="/settings" component={Settings}/>
                            </Routes>
                        </ErrorBoundary>

7 replies

•Created by Revxrsal on 1/6/2023 in #support

route not rendering sometimes

3 replies

•Created by Revxrsal on 1/5/2023 in #support

add keybinds to buttons

o/ i'd like to make my website possible to use using a keyboard only (similar to monkey type), so i came up with this (probably half-baked) solution to easily bind buttons to keyboard buttons using everything i know about solidjs here it is: https://gist.github.com/Revxrsal/105163383fa6e84448ff0ad733301b9b where i use it like this:

<KbButton combo="ctrl b" onClick={() => setCount(count() + 1)}>
     Clicks: {count()}
</KbButton>

<KbButton combo="ctrl b" onClick={() => setCount(count() + 1)}>
     Clicks: {count()}
</KbButton>

is there any way to optimize it or improve it? (there are probably things that would make my life easier but i'm not aware of)

1 replies

•Created by Revxrsal on 1/4/2023 in #support

Interpolate percentage?

o/ I have this basic clock implementation (https://gist.github.com/Revxrsal/faf598ac48efb9db0b11769ce9ac408d) and it renders like this: https://gyazo.com/804070195d25a5cc5baf4115af74f30a I wonder if there's any way to make it smoother? I know other UI libraries (not in web dev tho) that achieve this with animating floats by interpolating them into certain values. maybe solid-transition-group can help?

3 replies

•Created by Revxrsal on 1/2/2023 in #support

click outside directive in typescript

o/ i'm trying to implement https://www.solidjs.com/tutorial/bindings_directives?solved but in typescript. not sure what to fill types in (other than any). any idea?

30 replies