Massukka Posts - Answer Overflow

Massukka

Explore posts from servers

SSolidJS TtRPC KKysely TTCTheo's Typesafe Cult

Posts Comments

SSolidJS

•Created by Massukka on 10/22/2024 in #support

How to avoid passing too many props?

I recently made a component with like 20 mandatory props. How could I have reduced them while keeping type safety?

4 replies

SSolidJS

•Created by Massukka on 10/16/2024 in #support

&& in <Show> when condition and typescript?

        <Show
                    when={
                        selectedDate() &&
                        firstAndLastDate.data?.firstDate &&
                        firstAndLastDate.data?.lastDate
                    }
                >
                    {colorPicker(
                        selectedDate(), //Possibly null in all three
                        firstAndLastDate.data?.firstDate,
                        firstAndLastDate.data?.lastDate,
                    
                    
                    )}
                </Show>

        <Show
                    when={
                        selectedDate() &&
                        firstAndLastDate.data?.firstDate &&
                        firstAndLastDate.data?.lastDate
                    }
                >
                    {colorPicker(
                        selectedDate(), //Possibly null in all three
                        firstAndLastDate.data?.firstDate,
                        firstAndLastDate.data?.lastDate,
                    
                    
                    )}
                </Show>

Is this possible or do I need three nested show components. I don't think I can use the typical {data => {data()}} format inside show in this case

27 replies

SSolidJS

•Created by Massukka on 10/5/2024 in #support

Anybody gotten trpcError not crash start during SSR?

Currently battling with this issue

4 replies

SSolidJS

•Created by Massukka on 9/29/2024 in #support

Is it possible to show <Errorboundary> as toast/pop up?

Or does it always need to show either the error component/view or the non error view?

7 replies

SSolidJS

•Created by Massukka on 5/30/2024 in #support

Query vs data loader?

const getUsers = cache(async () => {
  "use server";
  return store.users.list();
}, "users");

export const route = {
  load: () => getUsers(),
};

export default function Page() {
  const users = createAsync(() => getUsers());
//OR
// const users = trpc.getUsers.createQuery();

  return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
}

const getUsers = cache(async () => {
  "use server";
  return store.users.list();
}, "users");

export const route = {
  load: () => getUsers(),
};

export default function Page() {
  const users = createAsync(() => getUsers());
//OR
// const users = trpc.getUsers.createQuery();

  return <For each={users()}>{(user) => <li>{user.name}</li>}</For>;
}

What is the difference between using "use server" data loader vs just using solid query based trpc for loading data?

9 replies

SSolidJS

•Created by Massukka on 5/26/2024 in #support

View transition api and solid start

Has anybody gotten view transition api working reliably with solid router? I tried following code but it doesnt work always for some reason.

const VtApi: ParentComponent = (props) => {
    const transition = (fnStartingTheSynchronousTransition) => {
        // In case the API is not yet supported
        if (!document.startViewTransition) {
            return fnStartingTheSynchronousTransition();
        }

        // Transition the changes in the DOM
        const transition = document.startViewTransition(
            fnStartingTheSynchronousTransition,
        );
    };

    useBeforeLeave((e) => {
        // Stop the inmediate navigation and DOM change
        if (!e.defaultPrevented) {
            e.preventDefault();

            // Perform the action that triggers a DOM change synchronously
            transition(() => {
                e.retry(true);
            });
        }
    });

    return <>{props.children}</>;
};

export default VtApi;

const VtApi: ParentComponent = (props) => {
    const transition = (fnStartingTheSynchronousTransition) => {
        // In case the API is not yet supported
        if (!document.startViewTransition) {
            return fnStartingTheSynchronousTransition();
        }

        // Transition the changes in the DOM
        const transition = document.startViewTransition(
            fnStartingTheSynchronousTransition,
        );
    };

    useBeforeLeave((e) => {
        // Stop the inmediate navigation and DOM change
        if (!e.defaultPrevented) {
            e.preventDefault();

            // Perform the action that triggers a DOM change synchronously
            transition(() => {
                e.retry(true);
            });
        }
    });

    return <>{props.children}</>;
};

export default VtApi;

11 replies

SSolidJS

•Created by Massukka on 5/8/2024 in #support

App.tsx with Solid-transition-group fails to create dom on CSR.

https://github.com/illispi/TransitionCSR Hello I created this small repro for the issue I am having. Issue is on the title. SSR creates dom correctly, but CSR shows empty page after navigating from index.tsx to repro.tsx. If you comment out <TransitionComp> whole site works correctly, but I would like to have that animation.

1 replies

SSolidJS

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

Should event: APIevent have client cookies on SSR?

import { type APIEvent } from "@solidjs/start/server/types";
import { app } from "./elysia";

const handler = async (event: APIEvent) => {
  return await app.handle(event.request);
};

export const GET = handler;
export const POST = handler;
export const PUT = handler;
export const PATCH = handler;
export const DELETE = handler;

import { type APIEvent } from "@solidjs/start/server/types";
import { app } from "./elysia";

const handler = async (event: APIEvent) => {
  return await app.handle(event.request);
};

export const GET = handler;
export const POST = handler;
export const PUT = handler;
export const PATCH = handler;
export const DELETE = handler;

In following code headers only have these

 Headers {
  "connection": "keep-alive",
  "user-agent": "Bun/1.0.26",
  "accept": "*/*",
  "host": "localhost:3000",
  "accept-encoding": "gzip, deflate, br",
}

 Headers {
  "connection": "keep-alive",
  "user-agent": "Bun/1.0.26",
  "accept": "*/*",
  "host": "localhost:3000",
  "accept-encoding": "gzip, deflate, br",
}

12 replies

SSolidJS

•Created by Massukka on 2/2/2024 in #support

Hydration issues when using props.children inside component

 return (
    <Router
      root={(props) => (
        <MetaProvider>
          <QueryClientProvider client={queryClient}>
            <Title>Schizophrenia poll</Title>
            <ErrorBoundar>
              <Suspense>
                <NavBar />
                <TransitionSlideGlobal>{props.children}</TransitionSlideGlobal>
              </Suspense>
            </ErrorBoundary>
          </QueryClientProvider>
        </MetaProvider>
      )}>
      <FileRoutes />
    </Router>
  );

 return (
    <Router
      root={(props) => (
        <MetaProvider>
          <QueryClientProvider client={queryClient}>
            <Title>Schizophrenia poll</Title>
            <ErrorBoundar>
              <Suspense>
                <NavBar />
                <TransitionSlideGlobal>{props.children}</TransitionSlideGlobal>
              </Suspense>
            </ErrorBoundary>
          </QueryClientProvider>
        </MetaProvider>
      )}>
      <FileRoutes />
    </Router>
  );

Code is that in app.tsx, problem is that I get hydration mismatch. <TransitionSlideGlobal> just uses solid-transition-group.

return (
    <>
      <Transition>
        {props.children}
      </Transition>
      <Transition
   
        <Show when={vis()}>
          <Footer />
        </Show>
      </Transition>
    </>
  );

return (
    <>
      <Transition>
        {props.children}
      </Transition>
      <Transition
   
        <Show when={vis()}>
          <Footer />
        </Show>
      </Transition>
    </>
  );

10 replies

TtRPC

•Created by Massukka on 1/26/2024 in #❓-help

Is there something to be done about trpc errors and solidjs/seroval?

Basically if you throw error in trpc route, solidjs seroval fails to serialize it during SSR. I don't know much about techinal details of this error, but do you think something could be done about this error?

2 replies

SSolidJS

•Created by Massukka on 1/26/2024 in #support

Response.clone: Body has already been consumed. Seroval/trpc conflict?

There was some discussion about this recently, but was there a way to fix this currently in user code?

7 replies

SSolidJS

•Created by Massukka on 12/19/2023 in #support

Using script tag with custom parameter

<script async src="https://umami.domain.org/script.js" data-website-id="ba170e55-8r926-4fc2-a36f-a4ggrbbcd2ebd83"></script>

<script async src="https://umami.domain.org/script.js" data-website-id="ba170e55-8r926-4fc2-a36f-a4ggrbbcd2ebd83"></script>

and this is my solid code root.tsx

  createScriptLoader({
    src: "https://umami.domain.org/script.js",
    "data-website-id": "ba170e55-8926-4fc2-a36f-a4bbcdeffeefedfed2ebd83",
    async: true,    

  });

  createScriptLoader({
    src: "https://umami.domain.org/script.js",
    "data-website-id": "ba170e55-8926-4fc2-a36f-a4bbcdeffeefedfed2ebd83",
    async: true,    

  });

Problem is that data-website-id doesn't work.

29 replies

SSolidJS

•Created by Massukka on 10/22/2023 in #support

How do i use script tag

Like Load <script> and then use init variable from it like with sentry. Io

3 replies

SSolidJS

•Created by Massukka on 10/21/2023 in #support

referenceError _$HY is not defined, on 0.3.7 prod, but not on 0.2.32

Only difference I have noticed is that when I compile with 0.3.7, it shows this kind of message: Site doesnt work at all on production in 0.3.7, but is fine on 0.2.32

node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/islands/A.tsx (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/islands/A.tsx" was ignored.

node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/islands/A.tsx (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/islands/A.tsx" was ignored.

2 replies

SSolidJS

•Created by Massukka on 10/12/2023 in #support

How to get previous route as search params?

I tried <A> getting href before navigating from current path or route getting previous route from window. History, but I didn't get either approach working

2 replies

SSolidJS

•Created by Massukka on 9/29/2023 in #support

Dev server works build/start doesn't

It complains about $HY not being defined among many components not working. Just asking if somebody has had the same problem and how they solved it.

2 replies

SSolidJS

•Created by Massukka on 9/24/2023 in #support

ErrorBoundary explanation

Can someone explain why this first one works and other doesnt: 1.

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";

const Comp = () => {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return <p>{state.data}</p>;
};

function Test() {
  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading...">
        <Comp />
      </Suspense>
    </ErrorBoundary>
  );
}

export default Test;

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";

const Comp = () => {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return <p>{state.data}</p>;
};

function Test() {
  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading...">
        <Comp />
      </Suspense>
    </ErrorBoundary>
  );
}

export default Test;

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";




function Test() {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading..."><p>{state.data}</p></Suspense>
    </ErrorBoundary>
  );
}

export default Test;

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";




function Test() {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading..."><p>{state.data}</p></Suspense>
    </ErrorBoundary>
  );
}

export default Test;

4 replies

SSolidJS

•Created by Massukka on 8/18/2023 in #support

How to make footer that shows at least at the 100vh down?

I tried making footer component at root. Tsx that is below Routes component and giving body class of flex and 100vh But it always shows up below navbar on csr, before content loads up.

3 replies

SSolidJS

•Created by Massukka on 8/15/2023 in #support

Delay <A> routing? UseTransition between routes?

Basically i want to delay <A> navigate by few 100ms. I would also like to use useTransition between routes when i press A. Is it possible?

2 replies

TTCTheo's Typesafe Cult

•Created by Massukka on 8/12/2023 in #questions

Good way to cache database query results?

Like is using just setinterval to variable that queries database enough. And then return that variable on get request. Variable would run to query let's say once a minute.

4 replies

Gaming

Programming