Zenn
Open1

nest: ビルド不要のPreact + FluentUI2アプリを作る

okuokuokuoku

一通り書いた後直球のページがPreact側にあるのに気付いた。。

https://preactjs.com/guide/v10/no-build-workflows/

というわけで、この通りにすれば良い。CDNでこれに対応しているのはesm.shくらい。。？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <script type="importmap">
    {
      "imports": {
      "preact": "https://esm.sh/preact@10.26.8",
      "preact/": "https://esm.sh/preact@10.26.8/",
      "react": "https://esm.sh/preact@10.26.8/compat",
      "react/": "https://esm.sh/preact@10.26.8/compat/",
      "react-dom": "https://esm.sh/preact@10.26.8/compat",
      "fluentui": "https://esm.sh/@fluentui/react-components@9.64.1?external=react,react-dom"
      }
    }
  </script>
</head>
<body>
  <div id="app"></div>

  <script type="module">
    import { h, render } from "preact";
    import { FluentProvider, Button, webLightTheme } from "fluentui";
    let app = h(FluentProvider, {theme: webLightTheme}, [h(Button, null, "Hello!")]);
    let appEl = document.getElementById("app");
    render(app, appEl);
  </script>
</body>
</html>