mrVinicius Comments - Answer Overflow

mrVinicius

Explore posts from servers

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

useRouter hook

I don't think so. In this particular case, I want the developer to know if the route they defined in the sidenav doesn't exist in the actual router, before it ever makes it to production.

7 replies

SSolidJS

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

useRouter hook

ah ok, found it https://github.com/solidjs/solid-router/pull/413

7 replies

SSolidJS

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

Pass props from Component to props.children

What about child accepting an class and returning an element? I've run into a similar issue.

export default (className?: string) => {
    return (
        <svg
            class={`w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white ${className || ''}`}>/*deleted for reability*/</svg>
    )
}

type NavProps = {
    name: string;
    route: string;
    icon?: (className?: string) => JSXElement;
}

const Nav = (props: NavProps) => {
    const sidenavCtx = useSidenav();

    if (sidenavCtx.navs.has(props.name)) {
        throw new Error('Nav name must be unique')
    } else sidenavCtx.navs.add(props.name);

    return (
        <li>
            <A
                href={props.route}
                class={`flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group`}
            >
                {props.icon?.("classes i wish to pass")}
                <span class="ml-3">{props.name}</span>
            </A>
        </li>
    )
};

export default (className?: string) => {
    return (
        <svg
            class={`w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white ${className || ''}`}>/*deleted for reability*/</svg>
    )
}

type NavProps = {
    name: string;
    route: string;
    icon?: (className?: string) => JSXElement;
}

const Nav = (props: NavProps) => {
    const sidenavCtx = useSidenav();

    if (sidenavCtx.navs.has(props.name)) {
        throw new Error('Nav name must be unique')
    } else sidenavCtx.navs.add(props.name);

    return (
        <li>
            <A
                href={props.route}
                class={`flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group`}
            >
                {props.icon?.("classes i wish to pass")}
                <span class="ml-3">{props.name}</span>
            </A>
        </li>
    )
};

10 replies

SSolidJS

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

Appropiate type for Router root

Thanks sir! previously i was wrapping it in a Component<> lol

3 replies

SSolidJS

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

createStore doesn't trigger createResource refetch action.

Oh thanks, i'll refactor try this out.

5 replies

SSolidJS

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

createStore doesn't trigger createResource refetch action.

Thought so, just wasn't sure. Gonna use regular signals for this then.

const [pagination, setPagination] = createSignal({page: 2, limit: 10});

const [pagination, setPagination] = createSignal({page: 2, limit: 10});

It's working nicely.

5 replies

SSolidJS

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

solidjs pnpm workspace

I know its not a solidjs problem, i just thought of asking for here in this community, thanks in advance.

3 replies

SSolidJS

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

VsCode: Cannot find name react

but since this is not important i just renamed to internal.tsx, since i won't distribute this file is just for internal visualization of the components i'll be building

7 replies

SSolidJS

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

VsCode: Cannot find name react

Nah it didn't work, i asked in their repo and the response i got is this is intentional and i need to configure my ts file. https://github.com/microsoft/TypeScript/issues/58844#issuecomment-2166344485

7 replies

SSolidJS

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

VsCode: Cannot find name react

i figured out, vscode cannot differentiate between index.ts and index.tsx, i had both of them and their intellisense or whatever got them mixed.

7 replies

SSolidJS

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

Insights on my component library

8 replies

SSolidJS

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

Insights on my component library

usage:

<DropDown.Component>
  <DropDown.Button name="toggler" />
  <DropDown.Group>
      <DropDown.Option value={"some value"} />
  </DropDown.Group>
</DropDown.Component>

// OR

<DropDownComponent name="toggler" values={["value1", "value2"]} />

<DropDown.Component>
  <DropDown.Button name="toggler" />
  <DropDown.Group>
      <DropDown.Option value={"some value"} />
  </DropDown.Group>
</DropDown.Component>

// OR

<DropDownComponent name="toggler" values={["value1", "value2"]} />

8 replies

SSolidJS

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

Insights on my component library

I found a middleground, i wrapped my whole component within a context call instead of calling it myself everytime. I somewhat agree with the options array as it is more straight forward, but as im not sure yet of what other capabilities my dropdown is gonna need, i dont want to abstract too much yet. im happy for now of how im exposing the api, when i actually put this thing to use i'll fine tune it.

8 replies

SSolidJS

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

Insights on my component library

I'm all hears man! This is my first time building such a thing. We use Bootstrap at work and i find myself repeating a lot of components via copy paste, this leads to some inconsistency which i wish to replace in the future, for our next project i'll introduce them to SolidJS and i wish to have a few of our use cases covered as example

8 replies

SSolidJS

•Created by João Bezerra on 5/2/2024 in #support

Is it ok to use a global store to persist component state between mounts?

keep it simple, store the id of the form as key for example. Just be mindful of the id to avoid conflict.

20 replies

SSolidJS

•Created by João Bezerra on 5/2/2024 in #support

Is it ok to use a global store to persist component state between mounts?

Only localstorage survives page refresh

20 replies

SSolidJS