React.createElement equivalent?

Trying to make a little library which exports a component. The component's JSX is simply return <div ref></div>, hence i'd prefer not to use JSX itself, to simplify the build pipeline. Is it possible to do so without JSX?

Jasmin•12/21/23, 1:31 PM

You should be able to use . In solid, every element is literally just a DOM element. But I think this could get tricky with typing it properly, it's usually not the way to go for.

Jasmin•12/21/23, 1:31 PM

Another option is to use the component from solid.

JJasmin Another option is to use the `Dynamic` component from solid.

thetarnav•12/21/23, 1:38 PM

this would also work for ssr

Jasmin•12/21/23, 1:40 PM

true could cause problems

thetarnav•12/21/23, 1:40 PM

also it’s just better to use a template, so it could be compiled, even if you don’t necessarily need to

Jasmin•12/21/23, 1:46 PM

oh wait I know you @Puru ! :D
Are you porting neoconfetti to solid?

JJasmin oh wait I know you @Puru ! :D Are you porting neoconfetti to solid? 😁

PuruOP•12/21/23, 1:47 PM

Yes

Jasmin•12/21/23, 1:47 PM

awesome!

JJasmin true `document.createElement` could cause problems

PuruOP•12/21/23, 1:48 PM

SSR is not an issue, the usage would look something like {condition && <Confetti />}, as confetti explodes the second its mounted

PuruOP•12/21/23, 1:48 PM

I was gonna reach for document.createELement, but was holding out in case there's a solid specific way

PuruOP•12/21/23, 1:49 PM

the library does all the DOM creation in plain JS, so solid's reactivity isn't needed at all either

Jasmin•12/21/23, 1:52 PM

can you be sure that this will never be SSR'd? If condition is true initially, it will.

PuruOP•12/21/23, 1:54 PM

In that case, it would take one tick of event loop to create the element, after solid makes everything, which means confetti is delayed by roughly 16ms(or 8)

PuruOP•12/21/23, 1:54 PM

That seems to be the worst case here

PuruOP•12/21/23, 1:54 PM

Gotta test it in SolidStart first though, to see if it works

JJasmin Another option is to use the `Dynamic` component from solid.

PuruOP•12/21/23, 1:55 PM

But that doesn't help with JSX part, right?

Jasmin•12/21/23, 1:56 PM

No, but there isn't really another way in Solid. I would stick with , it's the simplest way.

PuruOP•12/21/23, 1:56 PM

This is the React version. Solid version should be identical to this, see how in the end its React.createElement, instead of the usual JSX

JJasmin No, but there isn't really another way in Solid. I would stick with `<div ref></...

PuruOP•12/21/23, 1:57 PM

One question: If I transpile solid's JSX down to plain old JS, and ship that, will that work after being imported? Or does Solid requires JSX only?

Jasmin•12/21/23, 1:57 PM

it works but can cause issue with SSR environments

That's why solid packages often provide an additional solid export where the user can access jsx files

Jasmin•12/21/23, 1:58 PM

https://github.com/corvudev/corvu/blob/main/packages/corvu/package.json
For example like here

Jasmin•12/21/23, 1:58 PM

PuruOP•12/21/23, 1:58 PM

I would prefer the way more, but that is a PIA when used in TypeScript, had a conversation with Ryan Carniato about that when I made @neodrag/solid.

JJasmin Click to see attachment

PuruOP•12/21/23, 1:58 PM

Ohh

Jasmin•12/21/23, 1:59 PM

because if your package got compiled to js with another solid version than the user uses, it can result in issues

PuruOP•12/21/23, 2:00 PM

SolidJS itself won't be included in the final build, the imports from Solid will stay

PuruOP•12/21/23, 2:00 PM

Or does the compiled output differ from version to version?

Jasmin•12/21/23, 2:03 PM

yes it can

PuruOP•12/21/23, 2:04 PM

I just tried here https://playground.solidjs.com/anonymous/7f28d020-1ad7-46e1-837f-280ed7ac8416

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

PuruOP•12/21/23, 2:04 PM

Seems i can import $template directly and return that?

Jasmin•12/21/23, 2:04 PM

hmm in your react code, doesn't the confetti instance get destroyed on every options update?

PuruOP•12/21/23, 2:04 PM

No, I checked for that

PuruOP•12/21/23, 2:05 PM

Apparently the destroy function runs only when the component is destroyed

Jasmin•12/21/23, 2:05 PM

hmmm

Jasmin•12/21/23, 2:06 PM

This would be the solid implementation.

PuruOP•12/21/23, 2:09 PM

Ughh the output seems to differ from client-side to server-side to universal

Jasmin•12/21/23, 2:10 PM

you don't really need to worry about that. There is an esbuild plugin which can create js from solid jsx and if you export the jsx source code additionally it will work for everybodys environments

PuruOP•12/21/23, 2:10 PM

Ohh I am using esbuild for the bundling

Jasmin•12/21/23, 2:11 PM

https://www.npmjs.com/package/esbuild-plugin-solid

npm

esbuild-plugin-solid

Solid's integration for ESBuild. Latest version: 0.5.0, last published: a year ago. Start using esbuild-plugin-solid in your project by running . There are 4 other projects in the npm registry using esbuild-plugin-solid.

PuruOP•12/21/23, 2:13 PM

This seems nice

PuruOP•12/21/23, 2:14 PM

Hmm this is a problem

PuruOP•12/21/23, 2:14 PM

Im trying to keep the sizes as low as possible, this seems too much

PuruOP•12/21/23, 2:16 PM

Kay IG Ill ship the directive version only then

PuruOP•12/21/23, 2:17 PM

Its one extra line of code for the user but keeps the sizes very very small

PuruOP•12/23/23, 3:12 PM

Heya Im releasing it as a directive only. Simplest for me, and wont cause any troubles during rendering either https://github.com/PuruVJ/neoconfetti/pull/22

GitHub

Solid by PuruVJ · Pull Request #22 · PuruVJ/neoconfetti