Robin Lindner Posts - Answer Overflow

Robin Lindner

Explore posts from servers

CC#CDCloudflare Developers DDeno SSolidJS

Posts Comments

SSolidJS

•Created by Robin Lindner on 4/15/2024 in #support

Discord Invite via DM

5 replies

SSolidJS

•Created by Robin Lindner on 12/30/2023 in #support

Build a Drag & Drop Designer with Solid

I have a major project at the moment. It's about building a designer for documents (mostly DIN A4 / US Letter - but also labels). What is the best way to build something like this with SolidJS? With a drag & drop functionality, snapping & co. And some kind of invisible grid, so that I can save the result of the designer at the end and render it in another service, e.g. to PDF or ZPL. How would you proceed with something like this? Have you ever built something like this?

6 replies

SSolidJS

•Created by Robin Lindner on 6/11/2023 in #support

useContext returns undefined.

Hey I created a Provider and a context to manage figlet fonts. This provider is just a "singleton"-reference to my FontRegistry. FontProvider + useFonts:

import { createSignal, createContext, useContext, FlowComponent, FlowProps } from "solid-js";
import { FontRegistry } from "../../core/fonts/font-registry";

const FontContext = createContext<FontRegistry>();

export const useFonts = () => useContext(FontContext);
export const FontProvider = (props: FlowProps) => {
    const fontRegistry = new FontRegistry();
    const [fonts, _setFonts] = createSignal<FontRegistry>(fontRegistry);

    return <FontContext.Provider value={fonts()}>
        {props.children}
    </FontContext.Provider>;
}

import { createSignal, createContext, useContext, FlowComponent, FlowProps } from "solid-js";
import { FontRegistry } from "../../core/fonts/font-registry";

const FontContext = createContext<FontRegistry>();

export const useFonts = () => useContext(FontContext);
export const FontProvider = (props: FlowProps) => {
    const fontRegistry = new FontRegistry();
    const [fonts, _setFonts] = createSignal<FontRegistry>(fontRegistry);

    return <FontContext.Provider value={fonts()}>
        {props.children}
    </FontContext.Provider>;
}

Child-Component:

export const TextToAscii = () => {
    const fonts = useFonts(); // -> undefined
    const fontIterable = Array.from(fonts?.fonts ?? []);

    return <div>
        <For each={fontIterable}>
            {(font) => <div>{font.name}</div>}
        </For>
    </div>
};

export const TextToAscii = () => {
    const fonts = useFonts(); // -> undefined
    const fontIterable = Array.from(fonts?.fonts ?? []);

    return <div>
        <For each={fontIterable}>
            {(font) => <div>{font.name}</div>}
        </For>
    </div>
};

For some reason useContext returns undefined. I use Astro for this, but even in client:only mode it does not work. Astro page:

---
import { FontProvider } from "../components/FontProvider/FontProvider";
import { TextToAscii as TextToA } from "../components/TextToAscii/TextToAscii";
---

<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <FontProvider client:only>
            <TextToA client:only />
        </FontProvider>
    </body>
</html>

---
import { FontProvider } from "../components/FontProvider/FontProvider";
import { TextToAscii as TextToA } from "../components/TextToAscii/TextToAscii";
---

<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <FontProvider client:only>
            <TextToA client:only />
        </FontProvider>
    </body>
</html>

1 replies

SSolidJS

•Created by Robin Lindner on 3/4/2023 in #support

Modal Implementation

Has anyone ever written a generic component for a modal? Something lean and not an external UI framework is enough for me. I heard the <portal> component is quite useful for this. Background is that I want/need to implement a small DSGVO modal.

11 replies

SSolidJS

•Created by Robin Lindner on 1/8/2023 in #support

Passive Event Listeners

How can I mark onWheel as { passive: true }

import "./NewsElements.scss";
import { NewsElement } from "./NewsElement";

export const NewsElements = () => {
    let container: HTMLDivElement;

    const handleWheel = (event: WheelEvent) => {
        event.preventDefault();
        container.scrollLeft += event.deltaY;
    }

    return <div ref={container!} class="chaos-news-elements" onWheel={handleWheel}>
        <div class="chaos-news-elements--scroll-wrapper">
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
        </div>
    </div>
}

import "./NewsElements.scss";
import { NewsElement } from "./NewsElement";

export const NewsElements = () => {
    let container: HTMLDivElement;

    const handleWheel = (event: WheelEvent) => {
        event.preventDefault();
        container.scrollLeft += event.deltaY;
    }

    return <div ref={container!} class="chaos-news-elements" onWheel={handleWheel}>
        <div class="chaos-news-elements--scroll-wrapper">
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
        </div>
    </div>
}

2 replies

SSolidJS

•Created by Robin Lindner on 1/6/2023 in #support

Modals in SolidJS

Is there some proper way implementing modals in solid? I have a special button component and I want to open a modal on clicking this button. I read something about Portal. Can you help me here :)? What would you do? Best Practice?

4 replies

SSolidJS

•Created by Robin Lindner on 12/30/2022 in #support

Theme management with Solid

I would like to have a Dark and Light Mode on my page. For this I use Solid in combination with Astro.

<html> <!-- index.astro -->
  <body>
    <Scaffold client:only>
      <Header client:load />
      <main>
        <slot />
      </main>
      <Footer />
    </Scaffold>
  </body>
</html>

<html> <!-- index.astro -->
  <body>
    <Scaffold client:only>
      <Header client:load />
      <main>
        <slot />
      </main>
      <Footer />
    </Scaffold>
  </body>
</html>

How would you proceed now? My current status is that I have created a wrapper object "Scaffold" on the Astro page. Scaffold is a solidjs component which looks like this:

// Scaffold.tsx
import { Component, ErrorBoundary, JSX, Suspense } from "solid-js";
import { createThemeSignal } from "../../theme";

export interface ScaffoldProps {
    children?: JSX.Element | JSX.Element[];
}

export const Scaffold: Component<ScaffoldProps> = (props: ScaffoldProps) => {
    const [theme] = createThemeSignal();

    return <div class="scaffold" data-theme={theme()}>
        <Suspense fallback={<div>Loading...</div>}>
            <ErrorBoundary fallback={err => <div>Errored: {err}</div>}>
                {props.children}
            </ErrorBoundary>
        </Suspense>
    </div>
};

// Scaffold.tsx
import { Component, ErrorBoundary, JSX, Suspense } from "solid-js";
import { createThemeSignal } from "../../theme";

export interface ScaffoldProps {
    children?: JSX.Element | JSX.Element[];
}

export const Scaffold: Component<ScaffoldProps> = (props: ScaffoldProps) => {
    const [theme] = createThemeSignal();

    return <div class="scaffold" data-theme={theme()}>
        <Suspense fallback={<div>Loading...</div>}>
            <ErrorBoundary fallback={err => <div>Errored: {err}</div>}>
                {props.children}
            </ErrorBoundary>
        </Suspense>
    </div>
};

There I import a "signal" for the theme:

// theme.ts
import { createStore } from "solid-js/store";

export enum Theme {
    Light = "light",
    Dark = "dark"
}

interface StoreProps {
    theme?: Theme | "system"
}

export function createThemeSignal() {
    const [store, setStore] = createStore({} as StoreProps);
    if (!document.documentElement.hasAttribute("data-theme")) {
        document.documentElement.setAttribute("data-theme", store.theme ?? "system");
    }

    let setTheme = (theme: Theme | "system") => {
        document.documentElement.setAttribute("data-theme", theme);
        setStore({ theme });
    }

    let getTheme = () => {
        return store.theme ?? "system";
    }

    return [getTheme, setTheme] as const;
}

// theme.ts
import { createStore } from "solid-js/store";

export enum Theme {
    Light = "light",
    Dark = "dark"
}

interface StoreProps {
    theme?: Theme | "system"
}

export function createThemeSignal() {
    const [store, setStore] = createStore({} as StoreProps);
    if (!document.documentElement.hasAttribute("data-theme")) {
        document.documentElement.setAttribute("data-theme", store.theme ?? "system");
    }

    let setTheme = (theme: Theme | "system") => {
        document.documentElement.setAttribute("data-theme", theme);
        setStore({ theme });
    }

    let getTheme = () => {
        return store.theme ?? "system";
    }

    return [getTheme, setTheme] as const;
}

15 replies

SSolidJS

•Created by Robin Lindner on 12/22/2022 in #support

Load data async

5 replies

Gaming

Programming