🐶

ES Modulesを使えばPugを直接index.htmlに書ける

2021/10/26に公開

HTML

以前書いた記事を見返してふとPugをES Modulesで動かせるのではないかと思い立ったのでindex.html上で実際にやってみました。

Skypack => NG
ESM.sh => NG
JSPM.dev => OK

ありがとうJSPM.dev

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Pug</title>
    <meta name="description" content="Zenn" />
  </head>
  <body>
    <script type="module">
import { render } from 'https://jspm.dev/pug@3.0.2';
document.body.innerHTML = render(`
ul
  - for (let i = 0; i < 100; i++)
    li #{i}
`);
    </script>
  </body>
</html>

最新のブラウザで13～15行目をアレしたりコレしたりしてください。

おまけ

Denoで動かせるやつ。

import { render } from "https://jspm.dev/pug@3.0.2";
const res = render(`
doctype html
html
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width")
    title Pug
    meta(name="description", content="Zenn")
  body
    ul
      - for (let i = 0; i < 100; i++)
        li #{i}
`);
const server = Deno.listen({
  hostname: "127.0.0.1",
  port: 8080
});
for await (const conn of server) serveHttp(conn);
async function serveHttp(conn: Deno.Conn) {
  const httpConn = Deno.serveHttp(conn);
  for await (const requestEvent of httpConn) {
    requestEvent.respondWith(
      new Response(res, {
        status: 200,
        headers: {
          "content-type": "text/html"
        }
      })
    );
  }
}

$ deno run --allow-net index.ts

http://127.0.0.1:8080/

FYI:

Discussion