andrezero Posts - Answer Overflow

andrezero

•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

Gaming

Programming