ai6
ai6
Explore posts from servers
SSolidJSTTCTheo's Typesafe Cult
PostsComments
SSolidJS
Created by Max on 8/18/2023 in #support
file routes callbacks on parameter change or top level useParams
Can you not just have useLocation in root.tsx and use createEffect to track it?
4 replies
SSolidJS
Created by sgr on 8/18/2023 in #support
Integrating IndexedDB with Solid.js for Real-time Updates
I can't think of anything specific about Solid and Indexeddb, just follow Solid best practices and Indexeddb best practices... Only open database once and reuse the connection, think about when you want to load your data, be mindful of where you perform updates, etc. You might want to check out solid-dexie I'm not currently using it but I might switch to it since it looks pretty nice
5 replies
SSolidJS
Created by sgr on 8/18/2023 in #support
Integrating IndexedDB with Solid.js for Real-time Updates
You can use Dexie to create observables from queries: https://dexie.org/docs/liveQuery()
5 replies
SSolidJS
Created by akerbeltz on 8/2/2023 in #support
How to reload a component in solidjs (a route or a specific component) (I'm using solidjs/router)
Have you figured it out? I'm also curious 👀
8 replies
SSolidJS
Created by Revxrsal on 8/3/2023 in #support
question about stores and effects
I think you can easily have these run in a separate file but you would still need to import it into root or another Higher Order Component.
9 replies
SSolidJS
Created by Revxrsal on 8/3/2023 in #support
question about stores and effects
Here's how I use it: 
const theme = createSignal("monokai");
export const ThemeContext = createContext(theme);

export default function Root() {
  
  createEffect(async () => {
    const cookie = () =>
      parseCookie(
        isServer ? event.request.headers.get("cookie") ?? "" : document.cookie
      );
    const t = cookie().theme ?? "monokai";
    theme[1](t);
  });

  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - With TailwindCSS</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />

        <Link rel="manifest" href="manifest.json" />
      </Head>
      <ThemeContext.Provider value={theme}>
...
const theme = createSignal("monokai");
export const ThemeContext = createContext(theme);

export default function Root() {
  
  createEffect(async () => {
    const cookie = () =>
      parseCookie(
        isServer ? event.request.headers.get("cookie") ?? "" : document.cookie
      );
    const t = cookie().theme ?? "monokai";
    theme[1](t);
  });

  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - With TailwindCSS</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />

        <Link rel="manifest" href="manifest.json" />
      </Head>
      <ThemeContext.Provider value={theme}>
...
9 replies
SSolidJS
Created by Revxrsal on 8/3/2023 in #support
question about stores and effects
Yes, you get warnings when using effects outside of components. But why do you need the effect outside? You can just make the store global and run the effect inside root. Or even better, create a Context
9 replies
SSolidJS
Created by bakaotaku on 8/1/2023 in #support
How to reactively set height of a element?
I am also curious about this. It might have something to do with tracking since it only runs on page load. I recently had a similar issue where a resource wouldn't load when it was put in a <Switch> block. I had assumed that that's a tracking context but I guess not. Maybe it's similar for you with <Motion>. I am curious what happens when you call the ref ouside of the Motion block: 
 
<>
    {!ref() && <></>}
    <Motion.section>
    ... 
 
<>
    {!ref() && <></>}
    <Motion.section>
    ...
6 replies
SSolidJS
Created by tourist on 8/1/2023 in #support
idiomatic memo usage
Not sure what you mean by "more idiomatic" but you could make it easier to read by extracting it to a function: 
const getWelcomeMessage = () => {
  const username = state.data?.displayName?.toLowerCase().split(" ")[0];
  return `welcome${username ? `, ${username}` : ""}`;
};

return (
  <>
    <p>{getWelcomeMessage()}</p>
  </>
);
const getWelcomeMessage = () => {
  const username = state.data?.displayName?.toLowerCase().split(" ")[0];
  return `welcome${username ? `, ${username}` : ""}`;
};

return (
  <>
    <p>{getWelcomeMessage()}</p>
  </>
);
3 replies
SSolidJS
Created by tourist on 8/1/2023 in #support
createMemo accessor null value
Is there a reason why you can't use separate signals for that? I'm thinking, since useFirestore can have a nullable initial value, you could create an isLoading signal which can be set to true until state.data?.uid is loaded: 
const [isLoading, setIsLoading] = createSignal(true);
const [docComputed, setDocComputed] = createSignal(null);
const [error, setError] = createSignal(null);

createEffect(() => {
  if (state.data?.uid) {
    setIsLoading(false);
    setDocComputed(collection(db, state.data.uid));
    setError(null); 
  } else {
    setIsLoading(false);
    setError(new Error("User ID not found"));
  }
});

const todos = useFirestore(isLoading() || error() ? null : docComputed());
const [isLoading, setIsLoading] = createSignal(true);
const [docComputed, setDocComputed] = createSignal(null);
const [error, setError] = createSignal(null);

createEffect(() => {
  if (state.data?.uid) {
    setIsLoading(false);
    setDocComputed(collection(db, state.data.uid));
    setError(null); 
  } else {
    setIsLoading(false);
    setError(new Error("User ID not found"));
  }
});

const todos = useFirestore(isLoading() || error() ? null : docComputed());
2 replies
SSolidJS
Created by Ville Takanen (they/them) on 7/31/2023 in #support
Is there a good guide or howto on how to make (non solid) custom web components work with solidstart
from this issue, you can try this: 
declare module 'solid-js' {
  namespace JSX {
    type ElementProps<T> = {
      // Add both the element's prefixed properties and the attributes
      [K in keyof T]: Props<T[K]> & HTMLAttributes<T[K]>;
    }
    // Prefixes all properties with `prop:` to match Solid's property setting syntax
    type Props<T> = {
      [K in keyof T as `prop:${string & K}`]?: T[K];
    }
    interface IntrinsicElements extends ElementProps<HTMLElementTagNameMap> {
    }
  }
}
declare module 'solid-js' {
  namespace JSX {
    type ElementProps<T> = {
      // Add both the element's prefixed properties and the attributes
      [K in keyof T]: Props<T[K]> & HTMLAttributes<T[K]>;
    }
    // Prefixes all properties with `prop:` to match Solid's property setting syntax
    type Props<T> = {
      [K in keyof T as `prop:${string & K}`]?: T[K];
    }
    interface IntrinsicElements extends ElementProps<HTMLElementTagNameMap> {
    }
  }
}
In my case, I could't get it to work with children and it only shows the default html element props which is not very useful for custom elements, so I gave up pretty quickly and just set it as any. You might have more luck than me though 🤷‍♂️
6 replies
SSolidJS
Created by Ville Takanen (they/them) on 7/31/2023 in #support
Is there a good guide or howto on how to make (non solid) custom web components work with solidstart
AFAIK web component should just work out of the box. I am currently building an app with them and the only issue was typescript support, I had to declare them like this: 
declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "media-player": any;
      "media-outlet": any;
      "media-poster": any;
    }
  }
}
declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "media-player": any;
      "media-outlet": any;
      "media-poster": any;
    }
  }
}
6 replies
SSolidJS
Created by ai6 on 7/30/2023 in #support
How to prevent component from unmounting on navigation?
From this article:
In Solid, all rendering and DOM interaction is a side effect of the reactive system. Even basics like mount/unmount are not based on DOM action. A reactive context is "mounted" when it has finished settling for the first time, and "unmounted" when its parent context is re-evaluated or removed.
Since the <Routes> component re-evaluates on any route change, that means all of its children will be unmounted. So the solution is to just keep the component outside of <Routes>! Not sure what the implications or downsides of this are, but everything seems fine for now.
2 replies