mrVinicius Posts - Answer Overflow

mrVinicius

Explore posts from servers

•Created by mrVinicius on 8/3/2024 in #support

useRouter hook

I'm trying to use the useRouter hook so that I can acquire the base path and pass it into my sidebar component without the end user having to write it themselves. Also, I'd like to acquire all defined routes so that I can match against whatever route was defined in my component, and tell the end user the route defined doesn't exist. But correct me if I'm wrong, is the useRouter hook private?

Missing "./dist/routing" specifier in "@solidjs/router" package

Missing "./dist/routing" specifier in "@solidjs/router" package

Upon analyzing the router/index.jsx distribution, I think it is private, right? So that's why I'm getting the previous error.

export * from "./routers/index.js";
export * from "./components.jsx";
export * from "./lifecycle.js";
export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
export { mergeSearchString as _mergeSearchString } from "./utils.js";
export * from "./data/index.js";

export * from "./routers/index.js";
export * from "./components.jsx";
export * from "./lifecycle.js";
export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
export { mergeSearchString as _mergeSearchString } from "./utils.js";
export * from "./data/index.js";

Could we discuss a PR to expose the useRouter hook, or perhaps a new hook exposing read-only access to this information? The component im building for better context:

<Sidenav.Component
    baseUri={'/dash'} // replace this internally
    useBackdrop={true}
>
    <Sidenav.Nav
        name={'Principal'}
        route={'/doesnt-exist'} // throw an error
        icon={principalIcon}
    />

    <Sidenav.Group
        name={'Obra'}
        icon={constructionIcon}
    >
        <Sidenav.Nav
            name={'Catalogo'}
            route={'/construction/catalog'}
        />
    </Sidenav.Group>
</Sidenav.Component>

<Sidenav.Component
    baseUri={'/dash'} // replace this internally
    useBackdrop={true}
>
    <Sidenav.Nav
        name={'Principal'}
        route={'/doesnt-exist'} // throw an error
        icon={principalIcon}
    />

    <Sidenav.Group
        name={'Obra'}
        icon={constructionIcon}
    >
        <Sidenav.Nav
            name={'Catalogo'}
            route={'/construction/catalog'}
        />
    </Sidenav.Group>
</Sidenav.Component>

7 replies

SSolidJS

•Created by mrVinicius on 8/2/2024 in #support

createMemo question

Is there any drawback to using createMemo for 'cheap' calls? Does the overhead, whatever it may be, make it not worth it for 'cheap' calls?

    const inputError = createMemo(() => formCtx.errors[props.name]);

    return (
        <InputContext.Provider value={{}}>
            <Field.Component>
                <Field.Label
                  //unrelated props
                />
                <Field.Input
                  //unrelated props
                />
                <Show when={inputError()}>
                    <Field.Feedback msg={inputError()}/>
                </Show>
            </Field.Component>
    )

    const inputError = createMemo(() => formCtx.errors[props.name]);

    return (
        <InputContext.Provider value={{}}>
            <Field.Component>
                <Field.Label
                  //unrelated props
                />
                <Field.Input
                  //unrelated props
                />
                <Show when={inputError()}>
                    <Field.Feedback msg={inputError()}/>
                </Show>
            </Field.Component>
    )

2 replies

SSolidJS

•Created by mrVinicius on 8/1/2024 in #support

Appropiate type for Router root

3 replies

SSolidJS

•Created by mrVinicius on 7/9/2024 in #support

createStore doesn't trigger createResource refetch action.

const [pagination, setPagination] = createStore({page: 1, limit: 10});
const [perPage, setPerPage] = createSignal(10);
const [constructionData] = createResource(perPage, getConstructionList); // works
//const [constructionData] = createResource(pagination, getConstructionList); // does not work
//const [constructionData] = createResource({page: pagination.page, limit: pagination.limit}, getConstructionList); // tried to deconstruct signal, did not work too

const [pagination, setPagination] = createStore({page: 1, limit: 10});
const [perPage, setPerPage] = createSignal(10);
const [constructionData] = createResource(perPage, getConstructionList); // works
//const [constructionData] = createResource(pagination, getConstructionList); // does not work
//const [constructionData] = createResource({page: pagination.page, limit: pagination.limit}, getConstructionList); // tried to deconstruct signal, did not work too

How can I make createResource work with a store, if possible at all? When I pass a simple signal like perPage to createResource, it works smoothly. However, when I pass a whole store to it, it does not trigger the refetch.

5 replies

SSolidJS

•Created by mrVinicius on 6/22/2024 in #support

solidjs pnpm workspace

I'm trying to set up a pnpm workspace to share a library within my main app, but I can't get it to work. I tried to follow a few repository examples, but I have no idea why it's not working. I made an exact copy of my architecture and the problem im facing: https://github.com/mrVin99/solid-workspace/tree/main

@parcel/core: Failed to resolve 'solid-js/jsx-dev-runtime' from './src/layout.tsx'

  /home/mrvin/newfolder/web/solid-workspace/src/layout.tsx:1:1
  > 1 | import {Button} from "visuals/src";
  >   | ^
    2 | 
    3 | export default (props: any) => {

@parcel/resolver-default: Cannot load file './jsx-dev-runtime' from module 'solid-js'

@parcel/core: Failed to resolve 'solid-js/jsx-dev-runtime' from './src/layout.tsx'

  /home/mrvin/newfolder/web/solid-workspace/src/layout.tsx:1:1
  > 1 | import {Button} from "visuals/src";
  >   | ^
    2 | 
    3 | export default (props: any) => {

@parcel/resolver-default: Cannot load file './jsx-dev-runtime' from module 'solid-js'

3 replies

SSolidJS

•Created by mrVinicius on 6/12/2024 in #support

VsCode: Cannot find name react

7 replies

SSolidJS

•Created by mrVinicius on 5/18/2024 in #support

Insights on my component library

Hello, i'm building my own component library to fit my project needs. I'm having a bit of a problem with state management Do anyone have a better way to work with state other than using Provider? On this particular component im using a signal state to know if its open or not. And i must wrap it into a provider or else when i have two or more dropdown they share state, but passing a provider makes the overall api feels clunky. Any improvements suggestions?

8 replies

SSolidJS

•Created by mrVinicius on 4/20/2024 in #support

library template

Is there a template which i can use to create my own libraries?

4 replies

SSolidJS

•Created by mrVinicius on 4/1/2024 in #support

Router isn't working.

Why routing is not working when i'm following exactly what doc says. Doc: https://docs.solidjs.com/solid-router/getting-started/defining-routes

Home.tsx:
export default () => {
    return (
        <h1>Hello World</h1>
    )
}

index.tsx:
import {render} from "solid-js/web";
import {Route, Router} from "@solidjs/router";
import Home from "./HelloWorld";

render(() => (
        <Router>
            <Route path="/home" component={Home}/>
        </Router>
    ), document.getElementById("app")
);

Home.tsx:
export default () => {
    return (
        <h1>Hello World</h1>
    )
}

index.tsx:
import {render} from "solid-js/web";
import {Route, Router} from "@solidjs/router";
import Home from "./HelloWorld";

render(() => (
        <Router>
            <Route path="/home" component={Home}/>
        </Router>
    ), document.getElementById("app")
);

I'm getting the following error: 'index.tsx:5 Unrecognized value. Skipped inserting'

30 replies

SSolidJS

•Created by mrVinicius on 3/28/2024 in #support

Restricte route by user role, possibly a middleware?

Hello, I would appreciate some assistance from more experienced web developers, if possible. My issue revolves around user roles and restricting access to certain routes based on those roles. While I've successfully hidden the navigation buttons, there remains an issue: if a user types a restricted route directly into the URL, they can still access the associated component, which is something I want to prevent. Currently, I've implemented a solution where if a user attempts to access a restricted route, they are redirected back to their previous route in history. However, this solution isn't optimal as it causes a momentary loading of the component before the redirection occurs. - Im using SolidJS SPA + Go server, not SolidStart. Any insights would be greatly appreciated.

14 replies

Gaming

Programming