hotshoe
hotshoe
Explore posts from servers
SSolidJS
Created by hotshoe on 12/20/2023 in #support
Beta2: Server init hook?
How do I hook into star initialization so can perform async setup step ahead of start starting (e.g., async call to secrets store to get secrets needed for app to run). Thanks!
2 replies
SSolidJS
Created by hotshoe on 12/20/2023 in #support
Beta2: How do I render html attribute server-side
Previously (beta 1) was using root.data to pipe in value so available could set theme and other props on the root html tag, but that no longer exists. Any ideas?
4 replies
SSolidJS
Created by hotshoe on 9/23/2023 in #support
root.tsx & cookies
I need to read cookie data so I can setup my theme (i.e., an html data attribute) and load a script (based on runtime data), so need access to request object from within root.tsx. A solution appears to be anything but straight-forward. I found a couple related threads (below) on loading data into root.tsx but I feel they lead down the wrong path for something that should be so simple. Is there an SS prescribed method for reading cookie data from root.tsx? Thanks! P.S. As an aside. Tried root.data.ts and works for passing in data via useRouteData, but it's undocumented afaict and isomorphic, and need it to be server only. If there's example of how to apply root.data.ts for the use case described then that could work for me. Any help much apprecaited! Thanks, -Roland. related links: https://discord.com/channels/722131463138705510/910635844119982080/1111155446368182302 https://github.com/solidjs/solid-start/issues/647
2 replies
SSolidJS
Created by hotshoe on 4/2/2023 in #support
createResource mutations / page state
Hello, For I'm using createResource for my solid-start project for fetching post user can interact with (like, comment, delete, etc.), have in suspense boundary, and functionally works great, and lends itself very nicely to optimistic UI when using mutate in conjunction w/ latest. The problem is once refetch completes, the page state "flashes" and re-scrolls (depending on number of posts and where on screen when updated post). Any ideas how to address this issue? Or any suggestions on better pattern? Since I'm using solid-start, would prefer to use a route loaders, but chose create resource because provides ability to optimistically render mutation state. Thanks!
1 replies
SSolidJS
Created by hotshoe on 3/4/2023 in #support
$server rpc call failing (404) in production mode
Call works fine when running npm run dev but get 404 when build then run npm run start ... has anybody run into this?
1 replies
SSolidJS
Created by hotshoe on 3/4/2023 in #support
createServerData$ question
Hi, In example page below, why do I need to call data() in the export page function for the data to load (or to enable reactivity)? It's not blocking me, but curious if I'm doing something wrong, and seems like it should be unnecessary, esp. since data is referenced in the templated section. Thanks!
import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
a: string;
};
export function routeData() {
console.log("getting route data");
return createServerData$(async () => {
await sleep(2000);
const t: Test = { a: "hello" };
return t;
});
}

export default () => {
// const params = useParams();
const data = useRouteData<typeof routeData>();
data(); // <== Page won't update unless call data here.
return (
<Show when={!data.loading} fallback={<div>loading...</div>}>
<div>test-page</div>
<pre>{data()?.a}</pre>
</Show>
);
};
import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
a: string;
};
export function routeData() {
console.log("getting route data");
return createServerData$(async () => {
await sleep(2000);
const t: Test = { a: "hello" };
return t;
});
}

export default () => {
// const params = useParams();
const data = useRouteData<typeof routeData>();
data(); // <== Page won't update unless call data here.
return (
<Show when={!data.loading} fallback={<div>loading...</div>}>
<div>test-page</div>
<pre>{data()?.a}</pre>
</Show>
);
};
6 replies
SSolidJS
Created by hotshoe on 3/3/2023 in #support
get cookie inside $server rpc call
Hi, how can I get an http cookie inside $server rpc context? This is possible using tRPC, and I'm hoping possible w/ $server because it's working out well for me, and I'd hate pull in tRPC just to get a cookie. (edit: or make rest API call, which is prob what will do on second thought if not supported, but bummer to lose the easy type safety)
5 replies
SSolidJS
Created by hotshoe on 3/1/2023 in #support
Can a Solid store contain class objects?
Can a Solid store contain class objects? When I implement a simple type like below as a class, reactivity breaks for me when surfacing in a Solid store via a context provider.
// Works
export type ArtistProps = {
id: number;
name: string;
genre: string;
};
... setter({ id: 1, "Kiss", "Rock "})
// Works
export type ArtistProps = {
id: number;
name: string;
genre: string;
};
... setter({ id: 1, "Kiss", "Rock "})
// Doesn't work
export type ArtistProps = {
constructor (readonly id: number, name: string, genre: string) {}
};
... setter(new {1, "Kiss", "Rock"})
// Doesn't work
export type ArtistProps = {
constructor (readonly id: number, name: string, genre: string) {}
};
... setter(new {1, "Kiss", "Rock"})
Do Solid store objects need to be pojos?
12 replies
SSolidJS
Created by hotshoe on 2/23/2023 in #support
invalidateAll
Is there SS equivalent to SvelteKit invalidateAll? (https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) The use case is when the user updates their profile (e.g, change profile photo or user handle), want to update session state so changes are reflected (by requerying it from server), and w/o a page refresh.
4 replies
SSolidJS
Created by hotshoe on 2/21/2023 in #support
Any workarounds or guidance for circular dependency warnings?
I realize Vite issue, but I was able to resolve in SvelteKit and no such luck (yet) w/ SS. Specifically, inclusion if AWS S3 client module is resulting in a lot of circular dependency spew at build time. W/ Svelte using node adapter, just need to regular dep (instead of dev dependency) so module doesn't get rolled-up, resulting in clean build output. Everything seems to be working fine, but the number of warnings being generated is unsettling. Same problem w/ auth-core, but to much lesser extent. Somebody has to have run into this w/ SS given S3 client usage. Any workarounds for SS, or folks just ignoring? Related thread: https://github.com/aws/aws-sdk-js-v3/issues/4435
2 replies
SSolidJS
Created by hotshoe on 2/19/2023 in #support
Breaking out proxied Stores object as a signal (while retaining reactivity)
Let's say I have an album object...
type Album = {
id: string;
artist: string;
rating?: number
// etc.
}
type Album = {
id: string;
artist: string;
rating?: number
// etc.
}
, composed as Store array....
const [collection, setCollection] = createStore<Album[]>([]);
const [collection, setCollection] = createStore<Album[]>([]);
Now, the user can swipe through using Swiper (or similar), which Solidjs makes wonderfully straight-forward to implement using For control "tag". Question: What is the best Solid pattern for passing selected item as a property to a properties page while retaining reactivity? In other words, when the user clicks (selects) a Swiper slide, a callback fn sends the id, which is used to bind the properties page (enabling user to add/edit the Album property fields). I understand from watching some of Ryan's videos (so helpful and insightful!) that a Store is composed of signal primitives, so, in theory (I think ¯\_(ツ)_/¯) , I should be able to get at a proxied object and pass it as a signal, just as if I were passing a signal as a property. The alternative is to pass the store and the id to the props page (or break it out into context), but I'd prefer to be surgical, but not clear to me how to go about handling. Any ideas much appreciated? I'm still very much getting my feet wet w/ SolidJS (just a couple days into it), so apologies in advance if covered in the doc (I did check). Thanks! -Roland.
9 replies
SSolidJS
Created by hotshoe on 2/18/2023 in #support
contextProvider using signal
Hi, noob question here -- just getting feet wet w/ SolidStart. Any help is appreciated!! Trying to create a context provider for setting theme, and prop is getting passed down but child comps not reacting.
// theme-provider.tsx
import {
createContext,
useContext,
ParentComponent,
createSignal,
} from "solid-js";

const defaultTheme = "light";

export type ThemeContextValue = [get: string, set: (theme: string) => void];
const ThemeContext = createContext<ThemeContextValue>([
defaultTheme,
(theme: string) => {},
]);

export const ThemeProvider: ParentComponent<{
theme?: string;
}> = (props) => {
const [theme, setter] = createSignal(defaultTheme);
const setTheme = (val: string) => {
console.log("ThemeProvider: setTheme", val);
setter(val);
};

return (
// Note: if I put el here and bind to theme value, // it is reactive when called using setter from // child comp, so seems everything is working here.
<ThemeContext.Provider value={[theme(), setTheme]}>
{props.children}
</ThemeContext.Provider>
);
};

export const useTheme = () => useContext(ThemeContext);
// theme-provider.tsx
import {
createContext,
useContext,
ParentComponent,
createSignal,
} from "solid-js";

const defaultTheme = "light";

export type ThemeContextValue = [get: string, set: (theme: string) => void];
const ThemeContext = createContext<ThemeContextValue>([
defaultTheme,
(theme: string) => {},
]);

export const ThemeProvider: ParentComponent<{
theme?: string;
}> = (props) => {
const [theme, setter] = createSignal(defaultTheme);
const setTheme = (val: string) => {
console.log("ThemeProvider: setTheme", val);
setter(val);
};

return (
// Note: if I put el here and bind to theme value, // it is reactive when called using setter from // child comp, so seems everything is working here.
<ThemeContext.Provider value={[theme(), setTheme]}>
{props.children}
</ThemeContext.Provider>
);
};

export const useTheme = () => useContext(ThemeContext);
(cont'd)
26 replies
SSolidJS
Created by hotshoe on 2/17/2023 in #support
$server v. tRPC
Hello, I'm kicking the tires on solid start and it looks amazing! (been using svelte-kit for past couple months for a project, but decided to give solid-start a try before getting deep in). One noob question I have is being able to make rpc call by simply defining $server function is -- like I said -- A M A Z I N G !!! -- so, why are folks using tRPC? (unless to other server backend).
2 replies