ioB
ioB2y ago

solid-js with Deno

I was wondering if it was possible to use solid-js with Deno natively without something like esbuild. This is possible with react (with no config):
import * as React from "https://esm.sh/react@18.2.0"

function MyComponent(props: {name: string}) {
return <div>Hello {props.name}</div>;
}

console.log(<MyComponent name={"Dev"} />)
import * as React from "https://esm.sh/react@18.2.0"

function MyComponent(props: {name: string}) {
return <div>Hello {props.name}</div>;
}

console.log(<MyComponent name={"Dev"} />)
Currently my deno.json looks likes:
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "solid-js/h"
},
"imports": {
"solid-js/": "https://esm.sh/solid-js@1.6.11/"
}
}
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "solid-js/h"
},
"imports": {
"solid-js/": "https://esm.sh/solid-js@1.6.11/"
}
}
and my code looks like
function MyComponent(props: {name: string}) {
return <div>Hello {props.name}</div>;
}

console.log(<MyComponent name={"Dev"} />)
function MyComponent(props: {name: string}) {
return <div>Hello {props.name}</div>;
}

console.log(<MyComponent name={"Dev"} />)
but when I run it I get
$ deno run -A test.tsx
error: Uncaught SyntaxError: The requested module '/v110/solid-js@1.6.11/deno/web.js' does not provide an export named 'assign'
at <anonymous> (https://esm.sh/v110/solid-js@1.6.11/deno/h.js:2:20)
$ deno run -A test.tsx
error: Uncaught SyntaxError: The requested module '/v110/solid-js@1.6.11/deno/web.js' does not provide an export named 'assign'
at <anonymous> (https://esm.sh/v110/solid-js@1.6.11/deno/h.js:2:20)
12 Replies
ioB
ioB2y ago
I find it quite strange that the URL it is importing is "https://esm.sh/v110/solid-js@1.6.11/deno/h.js". Anyone have any ideas?
andykais
andykais2y ago
@iobdas maybe post your findings here and see if its a library issue? https://github.com/solidjs/solid/discussions/332
GitHub
Have you ever considered porting solid to deno? · solidjs/solid · D...
It would be quite the lift but might get some really interesting traction with solid. http://deno.land/
cdoremus
cdoremus2y ago
You might want to take a look at this: https://github.com/LePichu/solidjs-deno-example
GitHub
GitHub - LePichu/solidjs-deno-example: Example showing how to use S...
Example showing how to use Solid.js using Deno as the core runtime instead of Node. - GitHub - LePichu/solidjs-deno-example: Example showing how to use Solid.js using Deno as the core runtime inste...
ioB
ioB2y ago
I've seen it, but it uses esbuild which is kind of cheating (even if it is a common thing to do for deno frameworks)
cdoremus
cdoremus2y ago
I don't understand what your concern is. Why is es-build not an acceptable solution?
ioB
ioB2y ago
It would be cool to avoid a build step entirely
cdoremus
cdoremus2y ago
All the major Deno web frameworks incorporate a build but it is a just-in-time build
ioB
ioB2y ago
That seems a bit underwhelming, I think it would be cool to have the transpilation step done entirely by Deno itself since it does support JSX tranformation
KyleJune
KyleJune2y ago
I still don't get the point in not having a build step and instead building at runtime. If it's fast enough to not negatively impact users, it would seem that it would also be fast enough in a build step without really slow down development. Having it in a build step avoids having to regenerate build artifacts for each newly spawned process.
ioB
ioB2y ago
In my opinion it's just a cool JIT build step Probably faster as well? I think I'd probably just use esbuild and a build step for a real production thing
KyleJune
KyleJune2y ago
fresh is just using esbuild at runtime. Makes more sense to me to just run it once for each build via a build step instead of once for each process. Your build step could just be running esbuild like it does at runtime, so it shouldn't really slow development. If you're not using deploy and want to have multiple instances of the process running on the machine, each process would have a copy of the build artifacts in memory. Fresh just generates them and stores them in a map.
ioB
ioB2y ago
I understand, I get the reasoning here