🐶

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

1 min read

https://zenn.dev/tkithrta/articles/b738e41f02ada8

以前書いた記事を見返してふと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で動かせるやつ。こちらはESM.shでもOK。

// import { render } from 'https://jspm.dev/pug@3.0.2';
import { render } from 'https://esm.sh/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({ 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:

https://deno.land/manual/examples/http_server
https://zenn.dev/uki00a/articles/how-to-use-npm-packages-in-deno

Discussion

ログインするとコメントできます