@jsenv/plugin-react 0.0.1

package/test/react_refresh/client/app.jsx

@@ -0,0 +1,29 @@
+import { useState } from "react"
+
+import { CountLabel } from "./count_label.jsx"
+
+export const App = () => {
+  const [count, countSetter] = useState(0)
+
+  return (
+    <div>
+      <CountLabel count={count} />
+      <button
+        id="button_increase"
+        onClick={() => {
+          countSetter((prev) => prev + 1)
+        }}
+      >
+        +1
+      </button>
+
+      <button
+        onClick={() => {
+          countSetter((prev) => prev - 1)
+        }}
+      >
+        -1
+      </button>
+    </div>
+  )
+}

package/test/react_refresh/client/count_label.jsx

@@ -0,0 +1,7 @@
+export const CountLabel = ({ count }) => {
+  return (
+    <span id="count_label" style={{ color: "black" }}>
+      toto: {count}
+    </span>
+  )
+}

package/test/react_refresh/client/main.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Title</title>
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.jsx"></script>
+  </body>
+</html>

package/test/react_refresh/client/main.jsx

@@ -0,0 +1,8 @@
+import { render } from "react-dom"
+import { App } from "./app.jsx"
+
+render(<App />, document.getElementById("app"))
+
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}

package/test/react_refresh/react_refresh.test.mjs

@@ -0,0 +1,93 @@
+import { chromium } from "playwright"
+import { readFile, writeFile } from "@jsenv/filesystem"
+import { assert } from "@jsenv/assert"
+
+import { startDevServer } from "@jsenv/core"
+import { jsenvPluginPreact } from "@jsenv/plugin-preact"
+
+const countLabelJsxFileUrl = new URL(
+  "./client/count_label.jsx",
+  import.meta.url,
+)
+const countLabelJsxFileContent = {
+  beforeTest: await readFile(countLabelJsxFileUrl),
+  update: (content) => writeFile(countLabelJsxFileUrl, content),
+  restore: () =>
+    writeFile(countLabelJsxFileUrl, countLabelJsxFileContent.beforeTest),
+}
+
+const devServer = await startDevServer({
+  logLevel: "warn",
+  rootDirectoryUrl: new URL("./client/", import.meta.url),
+  keepProcessAlive: false,
+  autoreload: {
+    cooldownBetweenFileEvents: 250,
+  },
+  plugins: [jsenvPluginPreact()],
+})
+const browser = await chromium.launch({
+  headless: true,
+})
+try {
+  const page = await browser.newPage({ ignoreHTTPSErrors: true })
+  await page.goto(`${devServer.origin}/main.html`)
+  await page.evaluate(
+    /* eslint-disable no-undef */
+    () => window.readyPromise,
+    /* eslint-enable no-undef */
+  )
+  const getCountLabelText = () => {
+    return page.evaluate(
+      /* eslint-disable no-undef */
+      () => {
+        return document.querySelector("#count_label").innerHTML
+      },
+      /* eslint-enable no-undef */
+    )
+  }
+  const increase = () => {
+    return page.click("#button_increase")
+  }
+
+  {
+    await increase()
+    const actual = {
+      countLabelText: await getCountLabelText(),
+    }
+    const expected = {
+      countLabelText: "toto: 1",
+    }
+    assert({ actual, expected })
+  }
+  await countLabelJsxFileContent.update(`
+export const CountLabel = ({ count }) => {
+  return (
+    <span id="count_label" style="color: black">
+      tata: {count}
+    </span>
+  )
+}`)
+  await new Promise((resolve) => setTimeout(resolve, 500))
+  {
+    const actual = {
+      countLabelText: await getCountLabelText(),
+    }
+    const expected = {
+      countLabelText: "tata: 1",
+    }
+    assert({ actual, expected })
+  }
+  {
+    await increase()
+    const actual = {
+      countLabelText: await getCountLabelText(),
+    }
+    const expected = {
+      countLabelText: "tata: 2",
+    }
+    assert({ actual, expected })
+  }
+} finally {
+  browser.close()
+  countLabelJsxFileContent.restore()
+}

package/test/react_refresh/react_refresh.test_manual.mjs

@@ -0,0 +1,26 @@
+import { requestCertificateForLocalhost } from "@jsenv/https-local"
+
+import { startDevServer } from "@jsenv/core"
+import { jsenvPluginReact } from "@jsenv/core/packages/jsenv-plugin-react/main.js"
+
+const { serverCertificate, serverCertificatePrivateKey } =
+  await requestCertificateForLocalhost({
+    serverCertificateAltNames: ["local"],
+  })
+await startDevServer({
+  port: 3589,
+  protocol: "https",
+  listenAnyIp: true,
+  certificate: serverCertificate,
+  privateKey: serverCertificatePrivateKey,
+  rootDirectoryUrl: new URL("./client/", import.meta.url),
+  plugins: [jsenvPluginReact()],
+  explorerGroups: {
+    main: {
+      "./main.html": true,
+    },
+  },
+  autorestart: {
+    url: import.meta.url,
+  },
+})