In the previous post I talked about using JSX in Deno.
Now I would like to use import maps to make the imports easier to manage.
Lets start with this example:
main.js:
import { serve } from "https://deno.land/std@0.92.0/http/server.ts";
import ReactDOMServer from "https://jspm.dev/react-dom@16.14.0/server";
import home from "./pages/home.jsx"
function render(jsx) {
return "<!DOCTYPE html>" + ReactDOMServer.renderToString(jsx());
}
const server = serve({ port: 8000 });
const headers = new Headers();
headers.append("Content-Type", "text/html; charset=UTF-8");
for await (const req of server) {
req.respond({
status: 200,
headers: headers,
body: render(home),
});
}
pages/home.jsx:
import React from "https://jspm.dev/react@16.14.0";
import Layout from "../components/layout.jsx";
export default function () {
return (
<Layout title="Hello">
<h1>Hello world</h1>
</Layout>
);
}
components/layout.jsx:
import React from "https://jspm.dev/react@16.14.0";
export default function ({ children, title }) {
return (
<html>
<head>
<title>{title}</title>
</head>
<body>{children}</body>
</html>
);
}
I also added a tsconfig as an example, but you don't really need this here because this is the default.
tsconfig.json:
{
"compilerOptions": {
"jsx": "react"
}
}
This program can be started like this:
deno run --allow-net --config=tsconfig.json main.js
Denon
To avoid typing long commands each time, I started using Denon.
You can find installation instructions here.
This will get you an initial config:
denon --init
Here is my config:
{
"$schema": "https://deno.land/x/denon@2.4.7/schema.json",
"scripts": {
"start": {
"cmd": "deno run main.js",
"desc": "start server",
"tsconfig": "tsconfig.json",
"importmap": "importmap.json",
"allow": [
"net",
]
}
}
}
You can remove the importmap line for now.
Now you can use denon start to start.
This will also watch your files and do a restart when needed.
Import maps
Let's create an import map file named importmap.json:
{
"imports": {
"/": "./",
"react": "https://jspm.dev/react@16.14.0",
"reactdom": "https://jspm.dev/react-dom@16.14.0/server",
"deno/": "https://deno.land/std@0.92.0/"
}
}
The line "/": "./", means that we can use absolute paths instead of relative paths.
You can find more information here
The imports can now be rewritten like this in main.js:
import { serve } from "deno/http/server.ts";
import ReactDOMServer from "reactdom";
import home from "/pages/home.jsx"
VSCode
If you use vscode and are getting errors, you may need to add some settings.
First make sure you have the Deno plugin and that you initialised the workspace.
You can initialise the workspace with the command Deno: Initialise Workspace Configuration in the Command Palette.
This will create a file .vscode/settings.json.
You can add the importMap and config to fix the errors.
{
"deno.enable": true,
"deno.lint": true,
"deno.unstable": false,
"deno.importMap": "./importmap.json",
"deno.config": "./tsconfig.json"
}
The complete code examples can be found on Github
Top comments (0)