kalempster Comments - Answer Overflow

kalempster

Explore posts from servers

RReactiflux DIAdiscord.js - Imagine an app SSolidJS TtRPC

•Created by kalempster on 6/9/2024 in #❓-help

Subscription example not behaving like it should

Okay I get it now, in my actual project I was using httpBatchLink and wsLink together insead of splitting them using splitLink that's why the subscription wasn't going off.

export const api = createTRPCClient<AppRouter & WebSocketRouter>({
    links: [
        splitLink({
            condition(op) {
                return op.type === "subscription";
            },
            true: wsLink({
                client: wsClient,
                transformer: superjson,
            }),
            false: httpBatchLink({
                url: import.meta.env.PROD ? `/trpc` : `http://localhost:3000/trpc`,
                transformer: superjson,
            }),
        }),
    ],
});

export const api = createTRPCClient<AppRouter & WebSocketRouter>({
    links: [
        splitLink({
            condition(op) {
                return op.type === "subscription";
            },
            true: wsLink({
                client: wsClient,
                transformer: superjson,
            }),
            false: httpBatchLink({
                url: import.meta.env.PROD ? `/trpc` : `http://localhost:3000/trpc`,
                transformer: superjson,
            }),
        }),
    ],
});

Thanks for help :)

4 replies

SSolidJS

•Created by kalempster on 7/25/2023 in #support

ReactSVG like component in Solid

Well, if anyone finds this post by searching svg here's what I came up with

import { createSignal, JSX } from "solid-js";

const svgCache: { [url: string]: string | null } = {};

async function fetchSVG(url: string) {
    try {
        const response = await fetch(url);
        return await response.text();
    } catch (error) {
        return null;
    }
}

export function Svg({ url, ...rest }: { url: string } & JSX.HTMLAttributes<HTMLDivElement>) {
    let [cachedSVG, setCachedSVG] = createSignal<string | null>(null);

    if (!svgCache[url]) {
        (async () => {
            const svgContent = await fetchSVG(url);
            svgCache[url] = svgContent;
            setCachedSVG(svgContent);
        })();
    }
    //Overriding typescript because we know the item exists based on the if above
    else setCachedSVG(svgCache[url]!);

    return <div {...rest}>{cachedSVG() !== null ? <div innerHTML={cachedSVG()!} /> : <></>}</div>;
}

import { createSignal, JSX } from "solid-js";

const svgCache: { [url: string]: string | null } = {};

async function fetchSVG(url: string) {
    try {
        const response = await fetch(url);
        return await response.text();
    } catch (error) {
        return null;
    }
}

export function Svg({ url, ...rest }: { url: string } & JSX.HTMLAttributes<HTMLDivElement>) {
    let [cachedSVG, setCachedSVG] = createSignal<string | null>(null);

    if (!svgCache[url]) {
        (async () => {
            const svgContent = await fetchSVG(url);
            svgCache[url] = svgContent;
            setCachedSVG(svgContent);
        })();
    }
    //Overriding typescript because we know the item exists based on the if above
    else setCachedSVG(svgCache[url]!);

    return <div {...rest}>{cachedSVG() !== null ? <div innerHTML={cachedSVG()!} /> : <></>}</div>;
}

5 replies

SSolidJS

•Created by kalempster on 7/25/2023 in #support

ReactSVG like component in Solid

And vite-plugin-solid-svg doesn't work for me because it crashes in Astro. I have the component <Projects client:visible /> like this. Inside there's an imported svg as a component. I get an error message TypeError: Comp is not a function every time the component is initialized (I can give you the full stack trace if you want).

5 replies

SSolidJS

•Created by kalempster on 7/25/2023 in #support

ReactSVG like component in Solid

I don't really know what you mean. Could you show an example? I was trying to replicate what I thought ReactSVG's component looks like but I only came up with this.

import { JSX, createEffect, createSignal } from "solid-js";

export const Svg = (props: { url: string } & JSX.HTMLAttributes<HTMLDivElement>) => {
    const [content, setContent] = createSignal("");

    createEffect(async () => {
        setContent(await (await fetch(props.url)).text());
    }, []);

    return (
        <div {...props}>
            <div innerHTML={content()}></div>
        </div>
    );
};

import { JSX, createEffect, createSignal } from "solid-js";

export const Svg = (props: { url: string } & JSX.HTMLAttributes<HTMLDivElement>) => {
    const [content, setContent] = createSignal("");

    createEffect(async () => {
        setContent(await (await fetch(props.url)).text());
    }, []);

    return (
        <div {...props}>
            <div innerHTML={content()}></div>
        </div>
    );
};

5 replies

TtRPC

•Created by kalempster on 3/4/2023 in #❓-help

Error types in catch block

I'm sorry, mutateAsync is destructured from a mutation

const { mutateAsync } = trpc.shop.buyShopItem.useMutation({
    retry: (failCount, error) => {
        if (failCount >= 5) return false;
        if (error.data?.code == "UNAUTHORIZED") return false;
        return true;
    },
});

const { mutateAsync } = trpc.shop.buyShopItem.useMutation({
    retry: (failCount, error) => {
        if (failCount >= 5) return false;
        if (error.data?.code == "UNAUTHORIZED") return false;
        return true;
    },
});

3 replies

SSolidJS

•Created by kalempster on 3/1/2023 in #support

Animate on scroll in solid

No worries thanks for the effort anyways

7 replies

SSolidJS

•Created by kalempster on 3/1/2023 in #support

Animate on scroll in solid

You're missing the point. I want something like AOS, also I have already tried intersection observer, I've said that in the post.

7 replies

SSolidJS

•Created by kalempster on 12/3/2022 in #support

Vite compiles .jsx files from node_modules as react files

Thanks, I just wanted to start with solid in the first place and then pick up solid start if I see that I really need it.

36 replies

SSolidJS

•Created by kalempster on 12/3/2022 in #support

Vite compiles .jsx files from node_modules as react files

I've must've done something wrong with the deps. After deleting pnpm-lock.yaml, node_modules, copying your package.json and running pnpm i everything works. Thanks again!

36 replies

SSolidJS

•Created by kalempster on 12/3/2022 in #support

Vite compiles .jsx files from node_modules as react files

kalempster

36 replies

SSolidJS

•Created by kalempster on 12/3/2022 in #support

Vite compiles .jsx files from node_modules as react files

Thanks, not really sure what I could do wrong, I'll compare the two and investigate

36 replies

SSolidJS