Skip to content

Instantly share code, notes, and snippets.

@bpevs
Last active January 31, 2024 17:45
Show Gist options
  • Save bpevs/8aa43ff2c0f6e2632b204b0988fd2417 to your computer and use it in GitHub Desktop.
Save bpevs/8aa43ff2c0f6e2632b204b0988fd2417 to your computer and use it in GitHub Desktop.
Solidjs + Esbuild + Deno

git clone git@gist.github.com:8aa43ff2c0f6e2632b204b0988fd2417.git

Start via deno task start

main.js builds and runs a dev server index.tsx is client entry point

{
"compilerOptions": {
"lib": [
"deno.ns",
"dom",
"dom.iterable",
"dom.asynciterable",
"esnext"
],
"jsx": "react-jsx",
"jsxImportSource": "npm:solid-js"
},
"tasks": {
"start": "deno run -A main.js"
}
}
<html>
<head>
</head>
<body>
<h1>this is the site.</h1>
<p>javascript should populate under this</p>
<div id="app"></div>
<script src="dist/index.js" type="module"></script>
</body>
</html>
import { A, Route, Router } from "npm:@solidjs/router";
import { render } from "npm:solid-js/web";
function Wrapper(props) {
return (
<>
<A href="/">one</A>
<A href="/two">two</A>
{props.children}
</>
);
}
function App() {
return (
<Router root={Wrapper}>
<Route path="/" component={() => <div>page1</div>} />
<Route path="/two" component={() => <div>page2</div>} />
</Router>
);
}
render(() => <App />, document.getElementById("app"));
import { denoPlugins } from "https://deno.land/x/esbuild_deno_loader@0.8.1/mod.ts";
import { build, context } from "npm:esbuild";
import { transformAsync } from "npm:@babel/core";
import ts from "npm:@babel/preset-typescript";
import { solidPlugin } from "npm:esbuild-plugin-solid";
const [denoResolver, denoLoader] = [...denoPlugins()];
const options = {
entryPoints: ["./index.tsx"],
outfile: "./dist/index.js",
bundle: true,
format: "esm",
platform: "browser",
target: "esnext",
jsx: "preserve",
treeShaking: false,
plugins: [
denoResolver,
solidPlugin({
solid: {
moduleName: "npm:solid-js/web",
generate: "dom",
},
}),
denoLoader,
],
};
const ctx = await context(options);
const { host, port } = await ctx.serve({ servedir: "." });
console.log(`https://${host}:${port}`);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment