Solid PointerEvents, Firefox, RequestAnimationFrame and OffsetX/Y
Here's one that took up a bit of my afternoon after I wrote a RAF debouncer.
Does Solid 'do' anything with events, like React does, or are they simply browser events? If you do an
addEventListener on an element for pointermove, and place these in the handler:
``
requestAnimationFrame(() => {
console.log(event RAF`, event.offsetX, event.offsetY);...Suspense triggered witout reading data
So... trying to wrap my head around suspense.
This is based off the "Real word" Solid example:
I have a service with a store which is populated through actions on singin/signup. ...
Mutating element onMount doesn't re-render
I am trying to mutate the innerText (or innerHTML) of a <div /> in an async function that I dispatch onMount().
This is in SSR mode, so maybe that's relevant here, but I did confirm that onMount is running in the browser only.
1. I tried holding a ref "refDiv", then mutating innerText, but that doesn't seem to mutate the DOM. Are refs copies or actual references to the DOM element? Is there a better way to approach this?
...
create-solid messed up peer dependencies
Upon creation I've got this warning
``` WARN Issues with peer dependencies found
.
├─┬ solid-start-node 0.2.22
│ └─┬ @rollup/plugin-node-resolve 13.3.0...
What's the simplest way to combine the classList prop?
I have a component that takes a classList prop, and I want to combine it with a reactive classList object of its own before setting it on an internal element. What's the easiest way to do that while keeping the prop and the internal object reactive?
How to import `renderToString` into a plain js/ts file
So, I have working serverless application, which has a
handler.ts.
Inside I atm do:
``ts
const html =
<html>...Correct Syntax of passing a Component via prop
I have this component.
```tsx
const Test = (props: ParentProps & { label?: JSXElement }) => {
return (
<div>...
Animate on scroll in solid
Hey!
I've been going through google search after search and I couldn't find any reasonable way to implement animation on scroll (basically if the element should be visible we fade it in). I've tried some interaction observer along with motion one but couldn't work out a solution. Is there any easy way to do so?...
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.
```...
ProtectedRoute with a redirect using @solidjs/router
Hi everyone. Is there a way to implement a ProtectedRoute, but with a redirect using
@solidjs/router? All the examples I have seen, do something like user ? <Component /> : <Login />, but the url remains the same..recent SSR template or example
Hey there, I'm setting up a solidjs site to be rendered as part of an AWS Lambda function for the first time.
The only template-example for a Server-Side-Rendered solid that I could find was this https://github.com/solidjs/solid/tree/main/packages/solid-ssr/examples/ssr but it's 2 years old.
Anyone aware of a newer example?...
How to implement dangerously set innerHTML (which is there in react) in solid
I want to use render string HTML into the DOM. What are the best ways to do it?
Store creation and location in effector-solid and Solid Start
This may be part solid part effector question but would like to ask here because of Solid Start and the SSR setup it provides. This may be actually more generally applicable to any store or data kept outside of the tree.
Is there some constraints to where/when external data should be kept or initialized when using Solid Start with SSR.
I guess this is relevant also to any SSR and have found Effector specific solutions to that (https://effector.dev/docs/api/effector/fork/) but wondering if anyone knows of any specific considerations that should be taken into account for Solid.
...
Render as element kind
Hi, anyone know if you can render an element with a particular tag, from props for example. Maybe like react you do ...
createElement(<tag>,...). There's Dynamic but that's no SSR right?
Just to give a simple example, say you have a very nested structure layout so want some Flex component just like
const Flex = <T extends *someTagName*> (props:{tag:T}) => <*tag* style={{...*all the flex stuff*}}>{...}</*tag*>
const Flex = <T extends *someTagName*> (props:{tag:T}) => <*tag* style={{...*all the flex stuff*}}>{...}</*tag*>
"The reactive variable 'head' should be wrapped in a function for reactivity."
I'm a little confused specifically as to what this warning from
...
eslint-plugin-solid means:
The reactive variable 'head' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.
The reactive variable 'head' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.
How to create a generic Input when passing prop `class` to override styles?
Hi,
I'm trying to create a generic input. I'm using Tailwindcss for the styling with
cva (class-variance-authority) which allows me to create variants.
I want to allow users to pass class to override the input....Waiting for context provider to load before rendering children
My context provider doesn't load before the children are rendered.
Therefore, the context is undefined when it is used. I've tried using suspense to fix this, but the same error persists...
How does reactivity works in createStore?
Hi,
I'm quite new to SolidJS and Reactivity and I'm not sure how I should implement things.
So, I've created a context with a
createStore for an Auth service. ...Possible to use routeData outside a component ?
I want to use RouteData outside JSX. is it possible to do that ?
How to update store with arary
When updating a store that is an array is this not the correct way updating one of the items? When i do this, no error is thrown but my view is not updated
```
const [uploadFiles, setUploadFiles] = createStore<FileUpload[]>([]);
...