ioB•2y 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•2y 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•2y 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•2y 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•2y 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•2y ago

I don't understand what your concern is. Why is es-build not an acceptable solution?

ioB•2y ago

It would be cool to avoid a build step entirely

cdoremus•2y ago

All the major Deno web frameworks incorporate a build but it is a just-in-time build

ioB•2y 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•2y 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•2y 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•2y 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•2y ago

I understand, I get the reasoning here