Deno example?

[benatkin]

There's a thread about adding Deno support to Solid.js, but I think it can already be made to work with Deno, with a build step, that is in Deno. The main reason I think it will work is because there's a Solid playground, and because Deno is designed to run a lot of what can be ran in the browser.

There are Deno friendly CDN for npm modules: https://deno.land/[email protected]/npm_nodejs/cdns#deno-friendly-cdns

Here are the pieces of the puzzle that I see:

• Running babel - Babel does a lot of stuff with node, but there is a browser build. By importing the browser build it should work.
• Importing and using the babel plugin - this could be imported by URL using a Deno-friendly CDN
• Making the babel plugin use the URL to import - if the babel plugin generates code that imports solid, it should either be changed to import by URL or an import map should be used to make it import by URL
• Importing solid in the source - in the source, it should import by URL, even if it needs to use an import map to build, because it's easier to run without an import map
• Making use of it:
  • Using deno to bundle with deno bundle - this would take the output from babel and bundle it using deno bundle
  • Static Site Generation (SSG) - this could be added to the above build step
  • Static Site Rendering (SSR) - this could get the data for a page and render it on the fly

Once an example is created, we should make it easy to find. Then Solid will tick another box. I think Solid and Deno are philosophically aligned in a lot of ways.

Do you think this will work? Am I missing anything?

[benatkin]

The compiled templates appear to use https://github.com/ryansolid/dom-expressions - hopefully that can be imported into Deno with a CDN!

Here is the babel plugin that includes what I think of as a template compiler: https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions

[lxsmnsyc]

Optimistically, the best course of action here iirc was for SWC (Deno's under-the-hood compiler) to expose the plugins support (which was, I think, not exposed for some reason that is related to SWC 2.0). We are excited to make a Rust implementation of dom-expressions as an SWC plugin

[saolof]

Nice! Using babel in a Deno context is counter to Deno's reason for existing.

[milomg]

Work has started on this front: https://github.com/modderme123/swc-plugin-jsx-dom-expressions

[benatkin]

I made a little bit of progress on this:

I'm getting this with babel-standalone:

build.js

const example = `
import { createSignal, onCleanup } from "solid-js";
import { render } from "solid-js/web";

const CountingComponent = () => {
	const [count, setCount] = createSignal(0);
	const interval = setInterval(
		() => setCount(c => c + 1),
		1000
	);
	onCleanup(() => clearInterval(interval));
	return <div>Count value is {count()}</div>;
};

render(() => <CountingComponent />, document.getElementById("app"));
`;

import Babel from "https://esm.sh/@babel/standalone";
import solid from "https://esm.sh/babel-preset-solid";
Babel.registerPreset("solid", solid());
console.log(Babel.transform(example, {presets: ["solid"]}).code);

❯ deno run --allow-env=BABEL_TYPES_8_BREAKING build.js
This browser lacks typed array (Uint8Array) support which is required by `buffer` v5.x. Use `buffer` v4.x if you require old browser support.
import { template as _$template } from "solid-js/web";
import { createComponent as _$createComponent } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";

const _tmpl$ = _$template(`<div>Count value is </div>`, 2);

import { createSignal, onCleanup } from "solid-js";
import { render } from "solid-js/web";

const CountingComponent = () => {
  const [count, setCount] = createSignal(0);
  const interval = setInterval(() => setCount(c => c + 1), 1000);
  onCleanup(() => clearInterval(interval));
  return (() => {
    const _el$ = _tmpl$.cloneNode(true),
          _el$2 = _el$.firstChild;

    _$insert(_el$, count, null);

    return _el$;
  })();
};

render(() => _$createComponent(CountingComponent, {}), document.getElementById("app"));

Then I started trying to get it to run manually. First I changed the imports to URLs. Then I commented out the last line and found it still needs document, document.createElement, and others that don't come with Deno. Hopefully I can use a dom library to provide those and to get it to server-side render.

[milomg]

In case it is helpful, I tried getting a version of solid server-side rendering with deno here: https://github.com/modderme123/solid-deno

[ngdangtu-vn]

TBH, when I come for Deno solution, the first thing I want is avoid package.json at all cost...

[kidonng]

Write a gist to demonstrate how to compile & bundle SolidJS for browsers with Deno: https://gist.github.com/kidonng/b8273a55854bbe8f1402f188755632e3

You can build local files by running the gist:

deno run \
  --import-map https://gist.github.com/kidonng/b8273a55854bbe8f1402f188755632e3/raw/import_map.json \
  -A https://gist.github.com/kidonng/b8273a55854bbe8f1402f188755632e3/raw/deno-solid.ts \
  <file>

[lighth7015]

error: Uncaught (in promise) TypeError: Cannot destructure property 'numericLiteral' of '$.types' as it is undefined.
    at https://esm.sh/v133/@babel/[email protected]/X-ZS9lc2J1aWxk/denonext/helper-module-transforms.mjs:16:1051
    at https://esm.sh/v133/@babel/[email protected]/X-ZS9lc2J1aWxk/denonext/helper-module-transforms.mjs:16:457
    at https://esm.sh/v133/@babel/[email protected]/X-ZS9lc2J1aWxk/denonext/helper-module-transforms.mjs:33:1535
    at https://esm.sh/v133/@babel/[email protected]/X-ZS9lc2J1aWxk/denonext/helper-module-transforms.mjs:16:457
    at https://esm.sh/v133/@babel/[email protected]/X-ZS9lc2J1aWxk/denonext/helper-module-transforms.mjs:76:1978

[Ciantic]

4 days ago esbuild deno plugin got npm specifier support 🎉, now you don't need difficult import maps, you can use "npm:solid-js", I have an example here:

https://github.com/Ciantic/deno-solidjs

In short you only need this:

  const result = await esbuild.build({
      entryPoints: [file],
      outfile: outFile,
      bundle: true,
      format: "esm",
      treeShaking: true,
      minify: true,

      plugins: [ 
          denoResolver,

          // Solid handles the JSX, so it needs to be sandwiched between the deno plugins
          solidPlugin({
              solid: {
                  moduleName: 'npm:solid-js/web', // <-- NOTICE THIS
              },
          }) as any,


          denoLoader
      ], 
  });

[rickyraz]

thx for the info, but.. can i use solid without esbuild?

[Ciantic]

SolidJS requires a transformer, it has its own custom way of building JSX, and you need esbuild, rollup, babel, or similar.