Blankeos Posts - Answer Overflow

Blankeos

Explore posts from servers

RRailway SSolidJS TTCTheo's Typesafe Cult HHono

•Created by Blankeos on 6/22/2024 in #help

Have you guys ever gotten websockets to work on Hono + `@hono/vite-dev-server` plugin?

This occurs for Bun and Node. 1. On Bun, I can serve websockets using import { createBunWebSocket } from 'hono/bun'; https://github.com/honojs/vite-plugins/issues/148 2. On Node, I can serve websockets using ws and import { serve } from '@hono/node-server' __ But the issues are: 1. On Bun, the websocket handler gets stuck. No idea why: https://github.com/honojs/vite-plugins/issues/140. Had some hypothesis that it conflicts with vite, but not too sure. 2. On Node, I can't even run the websocket handler because the mechanism is completely different when running it in dev. In particular, you'd have to get the server first, then attach it there.

5 replies

SSolidJS

•Created by Blankeos on 6/18/2024 in #support

DeepTrack for a `Component[]` (Deeptrack for functions)

Hi! Is this possible? Let's say I have:

const L1 = () => {};
const L21 = () => {};
const L22 = () => {};

const L1 = () => {};
const L21 = () => {};
const L22 = () => {};

// Assuming the "LStore" is a createStore

// when it changes to:
const LStore = [L1] // gets triggered.

const LStore = [L1, L21]; // gets triggered.

const LStore = [L1, L22]; // does not seem to get triggered.

// when it changes to:
const LStore = [L1] // gets triggered.

const LStore = [L1, L21]; // gets triggered.

const LStore = [L1, L22]; // does not seem to get triggered.

And I have a deeptrack utility like so:

function deepTrack(store: any) {
  for (const k in store) {
    const value = store[k];
    if (typeof value === "object") {
      deepTrack(value);
    }
  }
}

// On the third change of LStore, it doesn't get triggered.
createEffect(() => {
   deepTrack(LStore);
});

function deepTrack(store: any) {
  for (const k in store) {
    const value = store[k];
    if (typeof value === "object") {
      deepTrack(value);
    }
  }
}

// On the third change of LStore, it doesn't get triggered.
createEffect(() => {
   deepTrack(LStore);
});

11 replies

SSolidJS

•Created by Blankeos on 6/13/2024 in #support

How do I recursively wrap a `JSX.Element` with an `Array<FlowComponent>`

// Let's say we have these values:
const children = props.children
const layouts = [Layout1, Layout2, Layout3];


// How do I turn it into:
return (
  <Layout1>
    <Layout2>
      <Layout3>
        {props.children}
      </Layout3>
    </Layout2>
  </Layout>
);

// Let's say we have these values:
const children = props.children
const layouts = [Layout1, Layout2, Layout3];


// How do I turn it into:
return (
  <Layout1>
    <Layout2>
      <Layout3>
        {props.children}
      </Layout3>
    </Layout2>
  </Layout>
);

I think turning it into this is fine. But keeping the reactivity is a little challenging.

19 replies

SSolidJS

•Created by Blankeos on 6/10/2024 in #support

SolidStart is it possible to make `load` function on Solid Router async?

10 replies

SSolidJS

•Created by Blankeos on 6/8/2024 in #support

Is there a way to hydrate signals on the server?

I have an AuthContext. I just specifically want to hydrate my user signal in some routes. Is there a way to do this? As far as I know, even in React I can't do this unless I bring in a separate library. Jotai actually does this using useHydrateAtoms. I'm wondering if there's something similar in SolidJS that I can use? (Not Solid Start specific). https://jotai.org/docs/utilities/ssr

// imports...

export type AuthContextValue = {
  user: Accessor<{ id: string; username: string } | null>;
  loading: Accessor<boolean>;
  login: (username: string, password: string) => Promise<ReturnType<AuthContextValue['user']>>;
  logout: () => Promise<{ success: boolean }>;
  register: (username: string, password: string) => Promise<ReturnType<AuthContextValue['user']>>;
};

const AuthContext = createContext({
  user: () => null,
  loading: () => false,
  login: async (username: string, password: string) => null,
  logout: async () => ({ success: false }),
  register: async (username: string, password: string) => null
} as AuthContextValue);

export const useAuthContext = () => useContext(AuthContext);

export const AuthContextProvider: FlowComponent = (props) => {
  const [user, setUser] = createSignal<ReturnType<AuthContextValue['user']>>(null);
  const [loading, setLoading] = createSignal<boolean>(false);

  // ...

  return (
    <AuthContext.Provider
      value={{
        user,
        loading,
        register,
        login,
        logout
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

// imports...

export type AuthContextValue = {
  user: Accessor<{ id: string; username: string } | null>;
  loading: Accessor<boolean>;
  login: (username: string, password: string) => Promise<ReturnType<AuthContextValue['user']>>;
  logout: () => Promise<{ success: boolean }>;
  register: (username: string, password: string) => Promise<ReturnType<AuthContextValue['user']>>;
};

const AuthContext = createContext({
  user: () => null,
  loading: () => false,
  login: async (username: string, password: string) => null,
  logout: async () => ({ success: false }),
  register: async (username: string, password: string) => null
} as AuthContextValue);

export const useAuthContext = () => useContext(AuthContext);

export const AuthContextProvider: FlowComponent = (props) => {
  const [user, setUser] = createSignal<ReturnType<AuthContextValue['user']>>(null);
  const [loading, setLoading] = createSignal<boolean>(false);

  // ...

  return (
    <AuthContext.Provider
      value={{
        user,
        loading,
        register,
        login,
        logout
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

2 replies

SSolidJS

•Created by Blankeos on 6/7/2024 in #support

Meta head management with title template?

Any good solutions for this? Similar to the title template that React Helmet or Next SEO provides? titleTemplate="MySite.com - %s"

8 replies

SSolidJS

•Created by Blankeos on 6/6/2024 in #support

Syntax-sugar for binding state to window or client size?

Is there a syntax-sugar for easily binding state to window size or something? Similar to svelte:

<script>
  let clientHeight;
</script>

<div bind:clientHeight={clientHeight} />

<script>
  let clientHeight;
</script>

<div bind:clientHeight={clientHeight} />

3 replies

SSolidJS

•Created by Blankeos on 6/5/2024 in #support

Dynamic imports?

15 replies

SSolidJS

•Created by Blankeos on 5/17/2024 in #support

<Show /> vs React-style conditional rendering.

I'm trying to implement a long conditional rendeirng statement in React into Show. It ends up pretty buggy. I just copied the React conditional statement and it seems to just work no problem. Are there any disadvantages to this? By the way this solid port project is @wobsoriano 's port of Sonner. I'm just fixing bugs haha

7 replies

SSolidJS

•Created by Blankeos on 5/17/2024 in #support

Filter and <For each />

Just a question, is there anything wrong with using .filter with For each={} /> Like:

<For each={toasts().filter(toast => (!toast.position && index() === 0) || toast.position === position) }>

<For each={toasts().filter(toast => (!toast.position && index() === 0) || toast.position === position) }>

I'm wondering if this causes issues when toasts() is an array that sort of reorders. Like if toasts() were a queue that removes the first element every few seconds, will SolidJS know to reuse the 2nd element in place of the removed 1st element? Visually: [1st Element, 2nd Element, 3rd Element] ⬇️ [2nd Element, 3rd Element] ------ Another is if 2nd Element just changes something within it like: [2nd Element.loading, 3rd Element] ⬇️ [2nd Element.success, 3rd Element] In this case, will SolidJS unmount the 2nd element, and then remount it? (when filter is involved)

26 replies

SSolidJS

•Created by Blankeos on 5/17/2024 in #support

Does the Solid compiler convert JSX to template variables? Know anything about this issue here?

Hi y'all! Does the Solid compiler have anything to do with converting JSX to a template variable in JS? var _tmpl$ = template(...)? This library I'm using seems to be facing an issue where when it's deployed to npm, it loses the quotes in the template. For instance: <div class="sonner-loading"/> becomes div class=sonner-loading/> But locally, it's actually fine after doing pnpm run build Most of my investigation was diffing, but I honestly can't pinpoint what's causing this issue: https://github.com/wobsoriano/solid-sonner/issues/14

4 replies

HHono

•Created by Blankeos on 5/17/2024 in #help

Proper error logging and tracing?

Do you guys have an example repo that properly sets up error logs and trace? It seems too difficult to trace here (in the image). As you can see it only traces back to the library-code that threw the error. I kinda have to to manually trace which function actually threw that error in my code. Which was around here:

// src/server/s3.ts
export async function transferFileFromTempToPermanent(uniqueId: string) {
  const oldKey = `temp/${uniqueId}`;
  const newKey = `permanent/${uniqueId}`;

  // Copy the object to the new location.
  await s3Client.send(
    new CopyObjectCommand({
      Bucket: privateConfig.s3.BUCKET_NAME,
      CopySource: `${privateConfig.s3.BUCKET_NAME}/${oldKey}`,
      Key: newKey,
    })
  );

  // Delete from old location.
  await s3Client.send(
    new DeleteObjectCommand({
      Bucket: privateConfig.s3.BUCKET_NAME,
      Key: oldKey,
    })
  );

// src/server/s3.ts
export async function transferFileFromTempToPermanent(uniqueId: string) {
  const oldKey = `temp/${uniqueId}`;
  const newKey = `permanent/${uniqueId}`;

  // Copy the object to the new location.
  await s3Client.send(
    new CopyObjectCommand({
      Bucket: privateConfig.s3.BUCKET_NAME,
      CopySource: `${privateConfig.s3.BUCKET_NAME}/${oldKey}`,
      Key: newKey,
    })
  );

  // Delete from old location.
  await s3Client.send(
    new DeleteObjectCommand({
      Bucket: privateConfig.s3.BUCKET_NAME,
      Key: oldKey,
    })
  );

2 replies

SSolidJS

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

Is there a way to skip the createResource query until a parameter is available?

4 replies

HHono

•Created by Blankeos on 5/1/2024 in #help

When there's an error on my typescript code on Hono, Vite Dev Server crashes, and doesn't restart

Problem: - Error? Crash the dev server and not wait for file changes. Ideal experience: - Error? Say it's an error and wait for file changes. It kinda feels iffy that I need to run npm run dev again just to run the dev server. Any fixes for this or maybe just something I missed? My config looks like this:

import { resolve, dirname } from "node:path";
import { fileURLToPath } from "node:url";
import Icons from "unplugin-icons/vite";
import { defineConfig } from "vite";

// Vike
import vike from "vike/plugin";
import vikeSolid from "vike-solid/vite";

// Hono
import devServer from "@hono/vite-dev-server";

// Vite
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const root = resolve(__dirname, ".");

export default defineConfig({
  plugins: [
    vike(),
    vikeSolid(),
    devServer({
      entry: "./src/server/index.ts",
      exclude: [
        /^\/@.+$/,
        /.*\.(ts|tsx|vue)($|\?)/,
        /.*\.(s?css|less)($|\?)/,
        /^\/favicon\.ico$/,
        /.*\.(svg|png)($|\?)/,
        /^\/(public|assets|static)\/.+/,
        /^\/node_modules\/.*/,
      ],
      injectClientScript: false,
    }),
    Icons({
      compiler: "solid",
    }),
  ],
  server: {
    port: 3000,
  },
  preview: {
    port: 3000,
  },
  resolve: {
    alias: {
      "@": resolve(root, "src"),
    },
  },
});

import { resolve, dirname } from "node:path";
import { fileURLToPath } from "node:url";
import Icons from "unplugin-icons/vite";
import { defineConfig } from "vite";

// Vike
import vike from "vike/plugin";
import vikeSolid from "vike-solid/vite";

// Hono
import devServer from "@hono/vite-dev-server";

// Vite
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const root = resolve(__dirname, ".");

export default defineConfig({
  plugins: [
    vike(),
    vikeSolid(),
    devServer({
      entry: "./src/server/index.ts",
      exclude: [
        /^\/@.+$/,
        /.*\.(ts|tsx|vue)($|\?)/,
        /.*\.(s?css|less)($|\?)/,
        /^\/favicon\.ico$/,
        /.*\.(svg|png)($|\?)/,
        /^\/(public|assets|static)\/.+/,
        /^\/node_modules\/.*/,
      ],
      injectClientScript: false,
    }),
    Icons({
      compiler: "solid",
    }),
  ],
  server: {
    port: 3000,
  },
  preview: {
    port: 3000,
  },
  resolve: {
    alias: {
      "@": resolve(root, "src"),
    },
  },
});

2 replies

SSolidJS

•Created by Blankeos on 4/30/2024 in #support

Get the request header inside a form action? For Solid Start

6 replies

TTCTheo's Typesafe Cult

•Created by Blankeos on 11/14/2023 in #questions

Copilot account question

Hey y'all ! Anyone using copilot? Planning to buy one for my Work Account. (personal expense) But I don't wanna buy another subscription for my personal account. Since I pay for it, is there way I can share them? Or at least, maybe use the same Work Account on my PC, then change to my personal account when I have to make commits and hopefully not worry about my company finding out I'm using my Work account outside of work. More or less my company's probably okay with it but I just don't wanna leave any unnecessary footprint (If copilot does any). theoDisgusted

7 replies

TTCTheo's Typesafe Cult

•Created by Blankeos on 6/22/2023 in #questions

Is there a way to use the trpc client inside a useEffect? Or a separate "service".

I've been using trpc for quite a while now. I have a pretty simple data flow that seems overly complicated to implement in trpc. In my website, when you go to "mywebsite.com/local" I want to fetch from local storage, but when you got to mywebsite.com/<anythingelse> I want to fetch from a trpc API. I don't feel too comfortable just using tanstack react query on everything inside a monolithic react component. Or is it something I should be more comfortable about. I'm also thinking of using the vanilla trpc client.

18 replies

Gaming

Programming