Blankeos Posts - Answer Overflow

Blankeos

Explore posts from servers

RRailway SSolidJS TTCTheo's Typesafe Cult HHono

•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

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

SSolidJS

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

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

6 replies

Gaming

Programming