andrezero
andrezero
SSolidJS
Created by andrezero on 2/13/2024 in #support
SSR/SSG: How to share context between client and server
I am trying to implement a Design System of sorts using SolidJS (my prior experience is with React) and ran into this challenge:
How can we provide dynamic context that is both available when rendering document <html> as well as to components that need to consume it at both SSR and CSR time?
I was able to wrap the server side rendered document with a provider and everything works fine here 🥳 (which means that most of the features I am looking at will be straightforward to implement). But the context is not available anywhere inside the start-client tree. Is there a known strategy to achieve this? Thanks in advance 🙇‍♂️
11 replies
SSolidJS
Created by andrezero on 5/30/2023 in #support
How to read reactive state from imperative contexts (audio/music)
tl;dr: is there any major DO NOT guideline around (constantly!) reading reactive states from functions (callbacks) that don´t need the reactivity? Will it create "tracking" "dependencies" or any other resources that won´t get actually used or not get properly disposed? Context: I am trying to build a fun little audio app using Solid and Tone.js In the visual UI part of the app I am accessing signals and stores containing things like "musical notes". The usual
But on the audio part of the app I am reading parts of this same state on "musical time", via the Tone.js scheduler which is a sort of setTimeout / requestAnimationFrame API that works on a pausable musical timeline. The below simplified snippet - runs on the scheduled invocations from Tone.js - consumes AND updates signals, memos, computations
const tick = (currentTime: number) => {
const measures = getMeasures(); // computation that uses stores/signals
const time = getCurrentTime(measures); // bars, beets, 16ths e.g.: 12:4:2
if (!measure) {
stop(); // updates several signals and stores
}
else {
setTime(time); // updates a signal
instruments.forEach(instrument => instrument(time)); // also consume signals
}
}
const tick = (currentTime: number) => {
const measures = getMeasures(); // computation that uses stores/signals
const time = getCurrentTime(measures); // bars, beets, 16ths e.g.: 12:4:2
if (!measure) {
stop(); // updates several signals and stores
}
else {
setTime(time); // updates a signal
instruments.forEach(instrument => instrument(time)); // also consume signals
}
}
I still don´t understand the 🪄 magic behind Solid´s reactivity (and calling it magic means I will probably never will 😅 ) so things like tracking, parents, owners and "re-run" are scaring me a bit. ❓ Am I running into a wall here by calling isPlaying() volume() and the likes on hundreds of different little time sensitive closures () => .... 😱 ? Please pardon the noobness. And if you like music/audio things don´t hesitate to reach out 🎵
18 replies