Madaxen86
Madaxen86
SSolidJS
Created by Madaxen86 on 11/6/2023 in #support
Bundled package breaks when used in PROD
I am working on a package which provides hooks and components to be used in a Solid app. The package is build with Rollup (config in next comment). It’s well tested and all test are successful. I linked that package in a Solid-Start app to test the behaviour. Everything works fine as long as the app runs in DEV mode and all the hooks and components work as expected, but once I build then app and run it in PROD my package breaks: In some scenarios the hooks return the wrong values and in some cases I get maximum call stack size exceeded error. Which again does not happen in DEV with the same build!? I then digged deeper and added a function from another package mine is based on and compared the behaviour to the original one on the same page: the original works fine, mine is broken. So I guess there something wrong with my rollup config (but again why does it work in dev!?) The original uses pridepack as the bundler.
12 replies
SSolidJS
Created by Madaxen86 on 10/31/2023 in #support
Capture events from child of Portal
Hey I need some advice. I want to captured an event of an element inside a Portal by the parent element of the portal. But in the test file the event is not captured at all. If I remove/comment out the Portal it does work but with the Portal it doesn't. Does anyone have a solution for this? function App() { return ( <> <div //@ts-ignore oncapture:pointerdown={pointerDown} > <Portal> <button data-testid="btn" /> </Portal> </div> </> ); }
7 replies
SSolidJS
Created by Madaxen86 on 5/3/2023 in #support
Context.Provider breaks reactivity
Need help with a simple Context Provider issue. Here's a little sample of the code:
const Accordion: ParentComponent<AccordionProps> = (props) => {
const contextValue = createMemo(() => ({ open: props.open, icon: icon(), animate: animate(), disabled: disabled(), })); createEffect(() => console.log("Accordion:", props.open, contextValue())); // 5. return return ( <AccordionContext.Provider value={contextValue()}> <div {...props} class={accordionClasses()}> {props.children} </div> </AccordionContext.Provider> ); }
const Accordion: ParentComponent<AccordionProps> = (props) => {
const contextValue = createMemo(() => ({ open: props.open, icon: icon(), animate: animate(), disabled: disabled(), })); createEffect(() => console.log("Accordion:", props.open, contextValue())); // 5. return return ( <AccordionContext.Provider value={contextValue()}> <div {...props} class={accordionClasses()}> {props.children} </div> </AccordionContext.Provider> ); }
ESLint throws "The reactive variable 'contextValue' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored." And that's what happens. The ChildComponents which consume the context do not get updated. What do I need to do to makes this work. Thanks a bunch ahead already.
32 replies
SSolidJS
Created by Madaxen86 on 2/7/2023 in #support
Documentation example of context with typescript does not work
I copied the context example (CounterContext) from the docs to a solid start project. The first error I get is when I pass the store to the Context Provider value: "Type '({ count: any; } | { increment(): void; decrement(): void; })[]' is not assignable to type '({ count: number; } | { count?: undefined; })[]'". Then when I use the useContext example I get the following error "Property 'increment' does not exist on type '{ count: number; } | { count?: undefined; }'" (same for decrement) and when I try to call increment I get "increment is not a function". I am totally confused of how to make an actually simple thing like context (at least in React) work in Solid. Is there a bug or are the docs not up to date or does context not work with solid start (SSR)?
6 replies