zobweyt Posts - Answer Overflow

zobweyt

Explore posts from servers

•Created by zobweyt on 10/13/2024 in #support

Using JSX in custom directives

Suppose you want to create a convenient tooltip directive that can be easily used by providing only the content of it. This works fine for simple tooltips. However, what if you want to create more complex, custom tooltips? For example, you want to wrap the element as a trigger and use it in combination with a component from libraries like https://kobalte.dev/docs/core/components/tooltip or https://corvu.dev/docs/primitives/tooltip

import { type Accessor, createEffect, createSignal } from "solid-js";
import { render } from "solid-js/web";

export default function tooltip(el: HTMLElement, title: Accessor<string>) {
  createEffect(() => {
    el.title = title();
  });
}

declare module "solid-js" {
  namespace JSX {
    interface DirectiveFunctions {
      tooltip: typeof tooltip;
    }
  }
}

function App() {
  const [count, setCount] = createSignal<number>(0);

  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      use:tooltip="Push to increment count"
    >
      {count()}
    </button>
  );
}

render(() => <App />, document.getElementById("app")!);

import { type Accessor, createEffect, createSignal } from "solid-js";
import { render } from "solid-js/web";

export default function tooltip(el: HTMLElement, title: Accessor<string>) {
  createEffect(() => {
    el.title = title();
  });
}

declare module "solid-js" {
  namespace JSX {
    interface DirectiveFunctions {
      tooltip: typeof tooltip;
    }
  }
}

function App() {
  const [count, setCount] = createSignal<number>(0);

  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      use:tooltip="Push to increment count"
    >
      {count()}
    </button>
  );
}

render(() => <App />, document.getElementById("app")!);

https://playground.solidjs.com/anonymous/eb41151c-59ca-460f-aa45-26ea80525e01 Is it possible to use JSX inside the directive to wrap the <button> with a <Tooltip> component?

7 replies

SSolidJS

•Created by zobweyt on 8/8/2024 in #support

Endless "[vite] ✨ optimized dependencies changed. reloading"

Could anyone explain why it takes an exorbitant amount of time to optimize dependencies after installing any package from npm/pnpm/yarn? This issue seems to occur randomly during development and provides a terrible developer experience (DX). Additionally, if I manually stop the dev server and try to run it again, it just says:

[get-port] Unable to find an available port (tried 3000 on host "localhost"). Using alternative port 3001.

[get-port] Unable to find an available port (tried 3000 on host "localhost"). Using alternative port 3001.

Steps to reproduce: 1. Execute pnpm create solid and pick the default options. 2. Execute pnpm dev, open the app in the browser, and then end the process. 3. Install any dependency (@solid-primitives/event-listener in this case). 4. Go to Counter.tsx and modify it to use the newly installed dependency. 5. Execute pnpm dev. 6. Go to the web browser and navigate to a page where the Counter component is not yet rendered (e.g., /about in this case). 7. Go to the /index page (the route where the Counter component should be rendered). 8. Observe the Vite optimization process, which never seems to complete in the console.

5 replies

SSolidJS

•Created by zobweyt on 7/26/2024 in #support

Context with children(() => props.children) helper triggers an error

Hey! I've been trying to create a Stepper component in which I'd have StepperContext with its API. however, somehow I need to control the displayed children, I found the children helper but it doesn't work with context https://playground.solidjs.com/anonymous/92dca985-17bc-4cbb-b2d8-d4b95fb33a33 am I missing something?

140 replies

SSolidJS

•Created by zobweyt on 7/14/2024 in #support

Redirecting on protected routes

Hey! Is there any recommended way to do route protecting on the server with SSR? For example, I need to redirect users from protected routes to the previous URL, if exists on router. Here's my current implementation:

type Session = { token: string | undefined };

const OPTIONS: SessionConfig = {
  password: process.env.SESSION_SECRET,
};

export const getSession = async () => {
  return await useSession<Session>(OPTIONS);
};

export const redirectUnauthenticated = cache(async (url: string) => {
  "use server";
  const session = await getSession();
  if (session.data.token === undefined) {
    throw redirect(url);
  }
  return {};
}, "redirectUnauthenticated");

export const createRedirectUnauthenticated = (url: string = "/login") => {
  createAsync(() => redirectUnauthenticated(url));
};

export default function Page() {
  createRedirectUnauthenticated("/login?redirect=/profile");

  return ...
}

type Session = { token: string | undefined };

const OPTIONS: SessionConfig = {
  password: process.env.SESSION_SECRET,
};

export const getSession = async () => {
  return await useSession<Session>(OPTIONS);
};

export const redirectUnauthenticated = cache(async (url: string) => {
  "use server";
  const session = await getSession();
  if (session.data.token === undefined) {
    throw redirect(url);
  }
  return {};
}, "redirectUnauthenticated");

export const createRedirectUnauthenticated = (url: string = "/login") => {
  createAsync(() => redirectUnauthenticated(url));
};

export default function Page() {
  createRedirectUnauthenticated("/login?redirect=/profile");

  return ...
}

However, this implementation is not the best because it shows the Page to an unauthorized user for a few milliseconds before redirecting. In addition, if using the snippet below for the Page route, it won't show the Page to user for a few milliseconds before redirecting, but it can run the preload at any state of my app, which will break all redirects and always redirect to /login?redirect=/profile instead of the ?redirect parameter:

export const route = {
  preload: () => createRedirectUnauthenticated("/login?redirect=/profile"),
} satisfies RouteDefinition;

export const route = {
  preload: () => createRedirectUnauthenticated("/login?redirect=/profile"),
} satisfies RouteDefinition;

Before, I tried using useNavigate, but the code needs to be run on the client in this case. However, I need to perform this check on the server first. Also, as I mentioned before, I want always to redirect the unauthorized user to the previous URL. I tried doing it with event?.router?.previousUrl from getRequestEvent() in redirectUnauthenticated function, but it's always returns undefied. How can I solve this issue correctly?

24 replies

Gaming

Programming