Compile & bundle SolidJS for browsers with Deno https://github.com/solidjs/solid/discussions/873#discussioncomment-3395136

deno-solid.ts

import {extname} from 'path'
import {build, stop} from 'esbuild'
import {solidPlugin} from 'esbuild-plugin-solid'
import {denoPlugin} from 'esbuild_deno_loader'

const [input] = Deno.args
const ext = extname(input)
const compileOutput = input.replace(ext, '.compiled.js')
const bundleOutput = input.replace(ext, '.bundle.js')

await build({
	entryPoints: [input],
	outfile: compileOutput,
	// Bundle relative imports
	bundle: true,
	format: 'esm',
	// Need to mark every bare import as external
	external: ['solid-js'],
	// Tree-shaking is done below
	treeShaking: false,
	// Compile SolidJS JSX
	plugins: [solidPlugin()],
})

await build({
	entryPoints: [compileOutput],
	outfile: bundleOutput,
	// Bundle again to deal with imports introduced in compilation
	bundle: true,
	minify: true,
	// Resolve dependencies from import map
	plugins: [
		denoPlugin({
			importMapURL: new URL('https://gist.github.com/kidonng/b8273a55854bbe8f1402f188755632e3/raw/import_map.json'),
		})
	],
})

stop()
Deno.removeSync(compileOutput)

import_map.json

{
	"imports": {
		"esbuild_deno_loader": "https://deno.land/x/[email protected]/mod.ts?external=esbuild",
		"esbuild-plugin-solid": "https://esm.sh/[email protected]?external=esbuild",
		"path": "https://deno.land/[email protected]/path/mod.ts",
		"esbuild": "https://deno.land/x/[email protected]/mod.js",
		"solid-js": "https://esm.sh/[email protected]?target=esnext",
		"solid-js/web": "https://esm.sh/[email protected]/web?target=esnext"
	}
}

This was a great help. Thanks.