DaOfficialWizard🧙 Posts - Answer Overflow

DaOfficialWizard🧙

•Created by DaOfficialWizard🧙 on 5/18/2024 in #support

Assistance with SolidStart and Supabase Auth in SSR

I am currently trying to piece together exactly how to setup SolidStart with the @supabase/ssr package. The Supabase package expects:

import { createBrowserClient, createServerClient, type CookieOptions } from '@supabase/ssr'

export function createSupabaseFrontendClient() {
    return createBrowserClient(
        import.meta.env.VITE_SUPABASE_URL,
        import.meta.env.VITE_SUPABASE_ANON_KEY,
    )
}

export function createSupabaseBackendClient() {
    return createServerClient(
        import.meta.env.VITE_SUPABASE_URL,
        import.meta.env.VITE_SUPABASE_SERVICE_KEY,
        {
            cookies: {
                get: (
                    key: string,
                ): Promise<string | null | undefined> | string | null | undefined => {
                    // get the cookie value from the request
                },
                set: (key: string, value: string, options: CookieOptions): Promise<void> | void => {
                    // set the cookie value in the response
                },
                remove: (key: string, options: CookieOptions): Promise<void> | void => {
                    // remove the cookie from the session
                },
            },
        },
    )
}

import { createBrowserClient, createServerClient, type CookieOptions } from '@supabase/ssr'

export function createSupabaseFrontendClient() {
    return createBrowserClient(
        import.meta.env.VITE_SUPABASE_URL,
        import.meta.env.VITE_SUPABASE_ANON_KEY,
    )
}

export function createSupabaseBackendClient() {
    return createServerClient(
        import.meta.env.VITE_SUPABASE_URL,
        import.meta.env.VITE_SUPABASE_SERVICE_KEY,
        {
            cookies: {
                get: (
                    key: string,
                ): Promise<string | null | undefined> | string | null | undefined => {
                    // get the cookie value from the request
                },
                set: (key: string, value: string, options: CookieOptions): Promise<void> | void => {
                    // set the cookie value in the response
                },
                remove: (key: string, options: CookieOptions): Promise<void> | void => {
                    // remove the cookie from the session
                },
            },
        },
    )
}

However, I am a little lost on how to setup this up with vinxi/http.

19 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 1/5/2024 in #support

Solid-UI The `border-border` class does not exist.

Recently got started with solid-ui and i love it a lot, however when i add it to projects where i am using daisyui as my styling system (just a wrapper ontop of tailwindcss) i get an error:

The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.

The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.

My root.css file:

/* TailWindCSS Files */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom Imports */
@import 'index.css';
@import 'scrollbar.css';
@import 'calendar.css';
@import 'components/addcropmodal.css';
@import 'components/addcropform.css';

/* Custom tailwind class overrides */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* TailWindCSS Files */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom Imports */
@import 'index.css';
@import 'scrollbar.css';
@import 'calendar.css';
@import 'components/addcropmodal.css';
@import 'components/addcropform.css';

/* Custom tailwind class overrides */
@tailwind base;
@tailwind components;
@tailwind utilities;

I am fairly certain i have everything setup correctly. A gist of my index.css where i placed the solid-ui styles and my tailwind.config.ts file.

3 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 1/2/2024 in #support

Help with some JSX logic in Typescript on an Advanced Resizing Component

I am working on making a custom resizing component wrapper for my app. I have the resizing logic all working as i would like it to, however i am trying to implement edge handlers so that i can attach the resize event handlers to the edge of a child component. Here is the github gist to my resizer.tsx The following is an example usage:

import { ParentComponent, createSignal } from 'solid-js'
import { Resizer, ResizerContent } from '@components/ui/resize'

const Sidebar: ParentComponent = (props) => {
    const [sidebar, setSidebar] = createSignal<HTMLDivElement | null>(null)
    const [width, setWidth] = createSignal<number>(425)
    let resizer!: HTMLDivElement

    const changeWidth = (clientY: number) => {
        if (clientY < 0) return
        setWidth(clientY)
    }

    return (
        <div class="card h-auto pb-8 min-h-0">
            <Resizer
                ref={resizer}
                side="right"
                onResize={(clientY, clientX) => {
                    changeWidth(clientY)
                }}>
                {(edgeHandler) => (
                    <ResizerContent edgeHandler={edgeHandler}>
                        <aside
                            ref={setSidebar}
                            style={{
                                width: `${width()}px`,
                            }}>
                            {props.children}
                        </aside>
                    </ResizerContent>
                )}
            </Resizer>
        </div>
    )
}

import { ParentComponent, createSignal } from 'solid-js'
import { Resizer, ResizerContent } from '@components/ui/resize'

const Sidebar: ParentComponent = (props) => {
    const [sidebar, setSidebar] = createSignal<HTMLDivElement | null>(null)
    const [width, setWidth] = createSignal<number>(425)
    let resizer!: HTMLDivElement

    const changeWidth = (clientY: number) => {
        if (clientY < 0) return
        setWidth(clientY)
    }

    return (
        <div class="card h-auto pb-8 min-h-0">
            <Resizer
                ref={resizer}
                side="right"
                onResize={(clientY, clientX) => {
                    changeWidth(clientY)
                }}>
                {(edgeHandler) => (
                    <ResizerContent edgeHandler={edgeHandler}>
                        <aside
                            ref={setSidebar}
                            style={{
                                width: `${width()}px`,
                            }}>
                            {props.children}
                        </aside>
                    </ResizerContent>
                )}
            </Resizer>
        </div>
    )
}

However this approach is not working, i will post the error below.

38 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 8/16/2023 in #support

Solid DND

Asking for help here, as the solid-dnd github seems to be pretty dead (as far as help and documentation go) - so just hoping someone can help 🙂 I am trying to figure out how to render a component using the library. Here is my current code: https://gist.github.com/ZanzyTHEbar/a6b104bf6e16453e6c94a25ee54dd9e4 I am trying to render the TriggerComponent and make it draggable. However, my current attempt is only dragging the id and i cant seem to get the component to drag properly. Its late, ive been starting at this for awhile, and its probably something obvious. Any help would be appreciated.

1 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 8/11/2023 in #support

Access child ref from parent component

Hello ya'll. I am having a bit of a brain fart, id like to access the child ref of an element from the parent. What is the best way to do this, ive done this before, but am having a brain fart atm.

8 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 5/16/2023 in #support

Help with Forward Ref and Ref from solid-primatives

I am still pretty new to solidjs and typescipt in general, i am trying to port a library from react to solid and am 90% of the way there - however i am having difficulties with using a forward Ref. There are two sections that are confusing me - that i would like help trying to solve.

Chart.tsx

function ChartComponent<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown,
>(props: ChartProps<TType, TData, TLabel>, ref: Ref<ChartJS<TType, TData, TLabel> | null>) {
  // some component logic
}

export const Chart = forwardRef(ChartComponent) as BaseChartComponent;

function ChartComponent<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown,
>(props: ChartProps<TType, TData, TLabel>, ref: Ref<ChartJS<TType, TData, TLabel> | null>) {
  // some component logic
}

export const Chart = forwardRef(ChartComponent) as BaseChartComponent;

And

typedCharts.tsx

import {
    Chart as ChartJS,
    LineController,
    BarController,
    RadarController,
    DoughnutController,
    PolarAreaController,
    BubbleController,
    PieController,
    ScatterController,
} from 'chart.js'
import { Chart } from './chart'
import type { ChartProps, ChartJSOrUndefined, TypedChartComponent } from './types'
import type { ChartType, ChartComponentLike } from 'chart.js'

function createTypedChart<T extends ChartType>(type: T, registerables: ChartComponentLike) {
    ChartJS.register(registerables)

    return forwardRef<ChartJSOrUndefined<T>, Omit<ChartProps<T>, 'type'>>((props, ref) => (
        <Chart {...props} ref={ref} type={type} />
    )) as TypedChartComponent<T>
}

export const Line = /* #__PURE__ */ createTypedChart('line', LineController)

import {
    Chart as ChartJS,
    LineController,
    BarController,
    RadarController,
    DoughnutController,
    PolarAreaController,
    BubbleController,
    PieController,
    ScatterController,
} from 'chart.js'
import { Chart } from './chart'
import type { ChartProps, ChartJSOrUndefined, TypedChartComponent } from './types'
import type { ChartType, ChartComponentLike } from 'chart.js'

function createTypedChart<T extends ChartType>(type: T, registerables: ChartComponentLike) {
    ChartJS.register(registerables)

    return forwardRef<ChartJSOrUndefined<T>, Omit<ChartProps<T>, 'type'>>((props, ref) => (
        <Chart {...props} ref={ref} type={type} />
    )) as TypedChartComponent<T>
}

export const Line = /* #__PURE__ */ createTypedChart('line', LineController)

I am not exactly sure how to solve the forwardRef situation here.

12 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 4/28/2023 in #support

SolidJS failing all of a sudden

4 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 4/16/2023 in #support

solid-three

79 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 4/12/2023 in #support

createStore causing warning

I am using createStore for a lot of my app, to reduce prop drilling and make inter-component communication a lot easier. I will preface, my app works exactly as intended. No bugs or issues that i can see (currently) - however i get this warning due to my createStore structure.

computations created outside a `createRoot` or `render` will never be disposed
createComputation @ dev.js:748

computations created outside a `createRoot` or `render` will never be disposed
createComputation @ dev.js:748

This is an example store:

src/store/mdns/index.ts

import { createMemo } from 'solid-js'
import { createStore, produce } from 'solid-js/store'

export enum MdnsStatus {
    ACTIVE = 'ACTIVE',
    DISABLED = 'DISABLED',
    LOADING = 'LOADING',
    FAILED = 'FAILED',
}

interface IMdnsResponse {
    ips: string[]
    urls: string[]
}

interface IMdnsStore {
    mdnsStatus: MdnsStatus
    mdnsData: IMdnsResponse
}

export const defaultState: IMdnsStore = {
    mdnsStatus: MdnsStatus.DISABLED,
    mdnsData: {
        ips: [],
        urls: [],
    },
}

const [state, setState] = createStore<IMdnsStore>(defaultState)

export const setMdnsStatus = (status: MdnsStatus) => {
    setState(
        produce((s) => {
            s.mdnsStatus = status
        }),
    )
}

export const setMdnsData = (data: IMdnsResponse) => {
    setState(
        produce((s) => {
            s.mdnsData = data
        }),
    )
}

export const mdnsState = createMemo(() => state)

import { createMemo } from 'solid-js'
import { createStore, produce } from 'solid-js/store'

export enum MdnsStatus {
    ACTIVE = 'ACTIVE',
    DISABLED = 'DISABLED',
    LOADING = 'LOADING',
    FAILED = 'FAILED',
}

interface IMdnsResponse {
    ips: string[]
    urls: string[]
}

interface IMdnsStore {
    mdnsStatus: MdnsStatus
    mdnsData: IMdnsResponse
}

export const defaultState: IMdnsStore = {
    mdnsStatus: MdnsStatus.DISABLED,
    mdnsData: {
        ips: [],
        urls: [],
    },
}

const [state, setState] = createStore<IMdnsStore>(defaultState)

export const setMdnsStatus = (status: MdnsStatus) => {
    setState(
        produce((s) => {
            s.mdnsStatus = status
        }),
    )
}

export const setMdnsData = (data: IMdnsResponse) => {
    setState(
        produce((s) => {
            s.mdnsData = data
        }),
    )
}

export const mdnsState = createMemo(() => state)

src/store/mdns/selectors.ts

import { createMemo } from 'solid-js'
import { mdnsState } from './mdns'

export const mdnsStatus = createMemo(() => mdnsState().mdnsStatus)
export const mdnsData = createMemo(() => mdnsState().mdnsData)

import { createMemo } from 'solid-js'
import { mdnsState } from './mdns'

export const mdnsStatus = createMemo(() => mdnsState().mdnsStatus)
export const mdnsData = createMemo(() => mdnsState().mdnsData)

12 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 2/4/2023 in #support

WebComponent Support

I am trying to use a WebComponent based package - so i tried:

declare global {
    namespace JSX {
        interface IntrinsicElements {
            item: 'esp-web-tools'
        }
    }
}

declare global {
    namespace JSX {
        interface IntrinsicElements {
            item: 'esp-web-tools'
        }
    }
}

However, i still get the error: Property 'esp-web-tools' does not exist on type 'JSX.IntrinsicElements'. How does one do this properly in SolidJS? This exact method worked fine in React - so not sure what to do here.

6 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 2/4/2023 in #support

WebSerial Support

I am trying to use the WebSerial api and i keep getting

Property 'serial' does not exist on type 'Navigator'

Property 'serial' does not exist on type 'Navigator'

How do i use the WebSerial API with Typescript and SolidJS?

44 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 1/26/2023 in #support

ReactiveMap

34 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 1/24/2023 in #support

Tauri

Alright, i decided to crate a suppport thread for this -as i have multiple questions. For starters i have migrated the app and the router from solid-start to solidjs with success. All of the previous issues i mentioned are now solved and working as expected. I have a new issue, two in fact. One major and one minor. I'll start with the major one. tauri uses data-params on the html elements to allow attaching certain html elements to the rust backend - this workedfine inreact. It not longer works as expected in solidjs. What i mean by this is the following. Take this example html:

<div class="main-div">
  <div data-tauri-drag-region class="titlebar" style="position:relative; z-index:10">
    <div class="titlebar-button" id="titlebar-minimize">
      <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
    </div>
    <div class="titlebar-button" id="titlebar-maximize">
      <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
     </div>
     <div class="titlebar-button" id="titlebar-close">
       <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
     </div>
   </div>
   <div id="root"></div>
</div>

<div class="main-div">
  <div data-tauri-drag-region class="titlebar" style="position:relative; z-index:10">
    <div class="titlebar-button" id="titlebar-minimize">
      <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
    </div>
    <div class="titlebar-button" id="titlebar-maximize">
      <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
     </div>
     <div class="titlebar-button" id="titlebar-close">
       <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
     </div>
   </div>
   <div id="root"></div>
</div>

This is all i should need to create a custom titlebar. Now, the titlebar renders correctly, however there is no functionality. I should be able to click on the html element, minimize for example, and it minimizes the app. This does not happen, in fact nothing happens. However, i can click and drag on the titlebar and move the window around - so that is one functionality that is working correctly. I can also resize the window, though resizing the window is much less responsive than it should be.

75 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 12/24/2022 in #support

Random errors on previously working project

46 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 12/21/2022 in #support

Unable to Render Skeleton Component

Hello ya'll, as the title says. I have a react project were i made a Skeleton component - works exactly as expected. However porting this component to SolidJS the Skeleton does not render anything unless i Here is my code:

Component

import { Component, Switch, Match } from 'solid-js'
import { ISkeletonProps } from '@static/types/interfaces'

const Skeleton: Component<ISkeletonProps> = (props: ISkeletonProps) => {
    return (
        <div class="animate-pulse">
            <div class={`bg-gray-800 rounded-md ${props.class}`}>
            </div>
        </div>
    )
}

const SkeletonHandler = (props: ISkeletonProps) => {
    return (
        <Switch fallback={<div>Loading ...</div>}>
            <Match when={props.render}>
                <div class="wrapper-container mt-8">
                    <Skeleton class={props.class} />
                </div>
            </Match>
            <Match when={!props.render}>{props.children}</Match>
        </Switch>
    )
}

export default SkeletonHandler

import { Component, Switch, Match } from 'solid-js'
import { ISkeletonProps } from '@static/types/interfaces'

const Skeleton: Component<ISkeletonProps> = (props: ISkeletonProps) => {
    return (
        <div class="animate-pulse">
            <div class={`bg-gray-800 rounded-md ${props.class}`}>
            </div>
        </div>
    )
}

const SkeletonHandler = (props: ISkeletonProps) => {
    return (
        <Switch fallback={<div>Loading ...</div>}>
            <Match when={props.render}>
                <div class="wrapper-container mt-8">
                    <Skeleton class={props.class} />
                </div>
            </Match>
            <Match when={!props.render}>{props.children}</Match>
        </Switch>
    )
}

export default SkeletonHandler

How i am trying to use it

import { A } from 'solid-start'
import SkeletonHandler from '@components/Skeleton'

const RenderMain = () => {
    return (
        <div>    
           Hello
        </div>
    )
}

const HandleMain = () => {
    return (
        <SkeletonHandler class="h-8 w-full mt-2" render={true}>
            <RenderMain />
        </SkeletonHandler>
    )
}

export default function Home() {
    return (
        <main class="flex justfiy-center flex-col items-center content-center text-center mx-auto text-gray-700 p-4">
            <HandleMain />
        </main>
    )
}

import { A } from 'solid-start'
import SkeletonHandler from '@components/Skeleton'

const RenderMain = () => {
    return (
        <div>    
           Hello
        </div>
    )
}

const HandleMain = () => {
    return (
        <SkeletonHandler class="h-8 w-full mt-2" render={true}>
            <RenderMain />
        </SkeletonHandler>
    )
}

export default function Home() {
    return (
        <main class="flex justfiy-center flex-col items-center content-center text-center mx-auto text-gray-700 p-4">
            <HandleMain />
        </main>
    )
}

I can see the divs rendered in the inspect tools - but the skeleton only renders if i put text inside of the div element

11 replies

SSolidJS

•Created by DaOfficialWizard🧙 on 12/19/2022 in #support

For Component

Hello ya'll, i have a <For> component with the following error:

This JSX tag's 'children' prop expects a single child of type '(item: Iinputs, index: Accessor<number>) => Element', but multiple children were provided.

This JSX tag's 'children' prop expects a single child of type '(item: Iinputs, index: Accessor<number>) => Element', but multiple children were provided.

With the following code:

interface FormProps {
    ...
    inputs: Iinputs[]
    ...
}

const FormComponent: Component<FormProps> = (props) => {
    return (
       <div class="flex-it">
           <For each={props.inputs}> {(input) => input.input()}</For>
        </div>
    )
}

interface FormProps {
    ...
    inputs: Iinputs[]
    ...
}

const FormComponent: Component<FormProps> = (props) => {
    return (
       <div class="flex-it">
           <For each={props.inputs}> {(input) => input.input()}</For>
        </div>
    )
}

My interfaces look like this:

export interface Iinternal {
    errorMsg?: string
    error?: boolean
}

export interface Iinputs {
    input: (props?: Iinternal) => JSXElement
}

export interface Iinternal {
    errorMsg?: string
    error?: boolean
}

export interface Iinputs {
    input: (props?: Iinternal) => JSXElement
}

I plan on passing in an array that looks like this:

export const inputs: Iinputs[] = [
    {
        input: (props?: Iinternal) => (
            <Inputs label="Email" type="password" name="password" id="password" {...props} />
        ),
    },
]

export const inputs: Iinputs[] = [
    {
        input: (props?: Iinternal) => (
            <Inputs label="Email" type="password" name="password" id="password" {...props} />
        ),
    },
]

Any help would be appreciated - new to SolidJS.

16 replies

Gaming

Programming