robert_ Posts - Answer Overflow

robert_

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

Suggestions for refactoring an async image component?

Hi, I've written a small async image wrapper for a project I'm working on, and I'm wondering if anybody has any suggestions for helping me refactor my component, so that it doesn't feel so... off...

import { join } from "path";
import { type Component, lazy } from "solid-js";

type ModuleType = typeof import(/* @vite-ignore */ "../assets/blue-grey.png" );
type Props = { src: string, alt?: string, ext?: string; };

const assetDir = ( assetName: string ): string => join( "../assets", assetName );
const assetFile = ( assetName: string, ext: string ): string => assetName.concat( ".".concat( ext ) );
const findAsset = ( assetName: string, ext = "png" ) => assetDir( assetFile( assetName, ext ) );

const AsyncImage: Component<Props> = ( { src, alt, ext } ) => lazy( async () => {
    const { default: image }: ModuleType = await import(/* @vite-ignore */ findAsset( src, ext ) );

    return ( {
        default: () => (
            alt && (
                <img src={ image.src } alt={ alt as string } width="100%" height="100%" />
            ) || (
                <img src={ image.src } width="100%" height="100%" />
            )
        )
    } );
} )();

export default AsyncImage;

import { join } from "path";
import { type Component, lazy } from "solid-js";

type ModuleType = typeof import(/* @vite-ignore */ "../assets/blue-grey.png" );
type Props = { src: string, alt?: string, ext?: string; };

const assetDir = ( assetName: string ): string => join( "../assets", assetName );
const assetFile = ( assetName: string, ext: string ): string => assetName.concat( ".".concat( ext ) );
const findAsset = ( assetName: string, ext = "png" ) => assetDir( assetFile( assetName, ext ) );

const AsyncImage: Component<Props> = ( { src, alt, ext } ) => lazy( async () => {
    const { default: image }: ModuleType = await import(/* @vite-ignore */ findAsset( src, ext ) );

    return ( {
        default: () => (
            alt && (
                <img src={ image.src } alt={ alt as string } width="100%" height="100%" />
            ) || (
                <img src={ image.src } width="100%" height="100%" />
            )
        )
    } );
} )();

export default AsyncImage;

3 replies

SSolidJS

•Created by robert_ on 10/14/2023 in #support

Provider context isn't being executed on SSR website before child component?

Hi, I'm working on a website for work and I'm attempting to insert a provider as the parent of a child page in InertiaJS, Welcome.tsx

import { ErrorBoundary } from 'solid-js';
import Layout from '@/Layouts/SiteLayout';
import { PageProps } from '@/types/types';
// import { Container, Row, Col, Carousel, Button, Dropdown, ButtonGroup } from "solid-bootstrap";
import { withDialogProvider, Dialogs } from "@/Contexts/Dialog";
import ErrorPage from '@/Components/ErrorPage';

const Welcome = ({ color = "primary" }) => (
    withDialogProvider(( onDispatch ) => (
        <>
            <p>Hello, world!</p>
        </>
    ))
);

Welcome.layout = (page: PageProps) => {
    console.log({ page });

    return (
        <ErrorBoundary fallback={ error => <ErrorPage error={error} />}>
            <Layout props={page} page={<Welcome />} />
        </ErrorBoundary>
    );
};

export default Welcome;

import { ErrorBoundary } from 'solid-js';
import Layout from '@/Layouts/SiteLayout';
import { PageProps } from '@/types/types';
// import { Container, Row, Col, Carousel, Button, Dropdown, ButtonGroup } from "solid-bootstrap";
import { withDialogProvider, Dialogs } from "@/Contexts/Dialog";
import ErrorPage from '@/Components/ErrorPage';

const Welcome = ({ color = "primary" }) => (
    withDialogProvider(( onDispatch ) => (
        <>
            <p>Hello, world!</p>
        </>
    ))
);

Welcome.layout = (page: PageProps) => {
    console.log({ page });

    return (
        <ErrorBoundary fallback={ error => <ErrorPage error={error} />}>
            <Layout props={page} page={<Welcome />} />
        </ErrorBoundary>
    );
};

export default Welcome;

@/Layouts/SiteLayout.tsx

import { DefaultProps } from "@/types/types";
import { Navbar, Nav, NavDropdown, Container } from "solid-bootstrap";

import DialogProvider, { DialogType } from "@/Contexts/Dialog";

export default function SiteLayout({ children, props, page }: DefaultProps) {

    const dispatcher = (dialog: DialogType, visible: boolean = true) => {
        //
    };

    return (
        <DialogProvider callback={dispatcher}>
            <main class="header">
                {children && children || page}
            </main>
        </DialogProvider>
    );
}

import { DefaultProps } from "@/types/types";
import { Navbar, Nav, NavDropdown, Container } from "solid-bootstrap";

import DialogProvider, { DialogType } from "@/Contexts/Dialog";

export default function SiteLayout({ children, props, page }: DefaultProps) {

    const dispatcher = (dialog: DialogType, visible: boolean = true) => {
        //
    };

    return (
        <DialogProvider callback={dispatcher}>
            <main class="header">
                {children && children || page}
            </main>
        </DialogProvider>
    );
}

@/Contexts/Dialog.tsx

import { createContext, useContext } from 'solid-js';
import type { JSX, ParentProps, Context } from 'solid-js';
export type DIALOGS = { NEWMEMBER: 1, RXPRICING: 2, FINDMYRX: 3, ACTION2: 4, ACTION3: 5 };
export const Dialogs: DIALOGS = { NEWMEMBER: 1, RXPRICING: 2, FINDMYRX: 3, ACTION2: 4, ACTION3: 5 };
export type DialogType = DIALOGS[keyof DIALOGS] | string;
type DialogStateFn = (dialog: DialogType, visible?: boolean) => void;
type TChildFunc = (state: DialogStateFn) => JSX.Element;
let Dialog: Context<DialogStateFn> | undefined = undefined;

export default function Context ({ children, callback }: ParentProps<{ callback: DialogStateFn }>) {
    if (Dialog === undefined) {
        Dialog = createContext<DialogStateFn>(callback);
        console.log("Initializing?");
    }

    return (
        <Dialog.Provider value={callback}>
            {children}
        </Dialog.Provider>
    );
};

export function useDialogCtx() {
    if (Dialog === undefined) {
        throw new Error("'Dialog' context provider not yet initialized.");
    }
    else return useContext(Dialog);
}

export const withDialogProvider = (callback: TChildFunc) => callback(useDialogCtx());

import { createContext, useContext } from 'solid-js';
import type { JSX, ParentProps, Context } from 'solid-js';
export type DIALOGS = { NEWMEMBER: 1, RXPRICING: 2, FINDMYRX: 3, ACTION2: 4, ACTION3: 5 };
export const Dialogs: DIALOGS = { NEWMEMBER: 1, RXPRICING: 2, FINDMYRX: 3, ACTION2: 4, ACTION3: 5 };
export type DialogType = DIALOGS[keyof DIALOGS] | string;
type DialogStateFn = (dialog: DialogType, visible?: boolean) => void;
type TChildFunc = (state: DialogStateFn) => JSX.Element;
let Dialog: Context<DialogStateFn> | undefined = undefined;

export default function Context ({ children, callback }: ParentProps<{ callback: DialogStateFn }>) {
    if (Dialog === undefined) {
        Dialog = createContext<DialogStateFn>(callback);
        console.log("Initializing?");
    }

    return (
        <Dialog.Provider value={callback}>
            {children}
        </Dialog.Provider>
    );
};

export function useDialogCtx() {
    if (Dialog === undefined) {
        throw new Error("'Dialog' context provider not yet initialized.");
    }
    else return useContext(Dialog);
}

export const withDialogProvider = (callback: TChildFunc) => callback(useDialogCtx());

The error thrown is 'Dialog' context provider not yet initialized., which shouldn't be the case, since Layout wraps the DialogProvider at the top of the tree, is it because my Welcome component is being created first? How do I fix this? Thank you!

20 replies

SSolidJS

•Created by robert_ on 10/10/2023 in #support

SVG interface for typescript?

Hi, Does Solid have an SVGAttributes (or similar) interface for use with typescript SVG components? I can't seem to find any in the github repository

42 replies

SSolidJS

•Created by robert_ on 8/28/2023 in #support

SolidJS: Manually using SSR with v8?

Hi, I am working on a project which has a PHP back-end, but which has access to a PHP V8 (https://github.com/phpv8/v8js) module, which means I can perform some sort of SSR behind-the-scenes and render the HTML/javascript before the page load- I'm curious if that is at all possible to accomplish using basically just V8 and solidjs in this way? I mean, I can use renderToString to extract the HTML, but I also need to generate and render the javascript which accompanies my page, in order to allow it to be interactive. Does anybody have any ideas here? Thanks!

15 replies

Gaming

Programming