How to use with Solid.js?

[thislooksfun]

Looking through the code and commits I see at least partial support for Solid.js, but I am unable to get bun dev to work with a starter Solid project.

Steps taken:

npx degit solidjs/templates/js my-app
cd my-app
rm pnpm-lock.yaml
bun install
bun dev

bun dev says it starts fine and is listening on localhost:3000, but when I open it in my browser it just shows a blank screen, and the console has a single error: SyntaxError: Importing binding name 'template' is not found.. I also tried calling bun dev --jsx=solid (and bun dev --jsx solid) and got the same results.

If the answer is that Solid just isn't supported yet, that's fine, but I got the impression from a few of the commits that there was at least initial work towards Solid support, I just can't figure out how to make it work.

[tonyrewin]

Have you succeed unbounding bun from react in your template?
error: Could not resolve: "react/jsx-dev-runtime". Maybe you need to "bun install"?
No, please, bun unbound yourself from react

// Inserted by a transpiler (don't import it manually)
import {jsx as _jsx} from 'react/jsx-runtime';

[N0tExisting]

This should mostly depend on supporting vite + babel, as solid uses its own jsx-transform.

Here it seems like it may be resolving to the server build (only for SSR) instead of the dev/browser build as template not being found is a common symptom of that.

Note that solid also provides support for a regular h-style jsx-transform, however this is not recommended as it incurres a heavy performance hit.

[tonyrewin]

may be resolving to the server build

this is how solidjs working, compiling components before runtime, no ssr was used

[N0tExisting]

this is how solidjs working, compiling components before runtime, no ssr was used

?

It seems to resolve to the node(SSR) export condition instead of dev/browser

[kajetansw]

I also tried different command combinations and interestingly, when I did bun dev --jsx-import-source=solid-js, I got a different error 😄

Uncaught SyntaxError: The requested module 'http://localhost:3000/bun:wrap' does not provide 
an export named '__FastRefreshRuntime' (at solid.js:9:1)

[N0tExisting]

That might mean that it isn't supported yet

[tonyrewin]

react-refresh should not be a mandatory too!

[cetorres]

For me, bun start works better.
But an option to create SolidJS apps like: bun create solidjs myApp would be great!

[Jarred-Sumner]

Bun has a builtin SolidJS transform (per tweet from a few months ago)

It's honestly like 25% implemented. More work needs to be done on it before it'll be good.

You can try it with bun dev, but make sure to run bun bun ./entry-point.js

To configure Bun to use the SolidJS transform, jsxImportSource should start with solid-js:

bun/src/options.zig

Lines 910 to 914 in a1a0c18

	if (jsx.import_source.len > "solid-js".len and strings.eqlComptime(jsx.import_source[0.."solid-js".len], "solid-js")) {
	pragma.runtime = .solid;
	pragma.supports_fast_refresh = false;
	}
	pragma.package_name = parsePackageName(pragma.import_source);

This can be configured several different ways:

• tsconfig.json/jsconfig.json jsxImportSource

• CLI flag: --jsx-import-source

• bunfig.toml: jsx = "solid":
  

  bun/src/bunfig.zig

  Lines 425 to 441 in a1a0c18

  	if (json.get("jsx")) |expr| {
  	if (expr.asString(allocator)) |value| {
  	if (strings.eqlComptime(value, "react")) {
  	jsx_runtime = Api.JsxRuntime.classic;
  	} else if (strings.eqlComptime(value, "solid")) {
  	jsx_runtime = Api.JsxRuntime.solid;
  	} else if (strings.eqlComptime(value, "react-jsx")) {
  	jsx_runtime = Api.JsxRuntime.automatic;
  	jsx_dev = false;
  	} else if (strings.eqlComptime(value, "react-jsxDEV")) {
  	jsx_runtime = Api.JsxRuntime.automatic;
  	jsx_dev = true;
  	} else {
  	try this.addError(expr.loc, "Invalid jsx runtime, only 'react', 'solid', 'react-jsx', and 'react-jsxDEV' are supported");
  	}
  	}
  	}

[NyanHelsing]

[phtdacosta]

How is the state of Solid JS usage with Bun, so far? Stable enough to give a try on a small project for production @Jarred-Sumner?

[janos-r]

I wanted to start a new small project with Solid and Deno or Bun, but both seam to have problems. I wish solid had some of these in their templates. I didn't dive deeper, but seams to me that it is simply not recommended for use right now. I hope I will be wrong soon ^^

[DaniGuardiola]

Until Bun has official and complete Solid.js support, you can use my plugin: https://github.com/DaniGuardiola/bun-plugin-solid

[russelgal]

Until Bun has official and complete Solid.js support

it seems like never )

[DaniGuardiola]

some day! these folks have a ton of hard work in the backlog, gotta be patient :)

in the meantime my plugin should help. I use it to compile Solid.js for Chrome extensions.