feat(artusx-react): support service worker

artusjs · Jul 15, 2024 · 6c1d6a4 · 6c1d6a4
1 parent 86af21b
commit 6c1d6a4
Show file tree

Hide file tree

Showing 23 changed files with 535 additions and 589 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/apps/artusx-react/.gitignore b/packages/apps/artusx-react/.gitignore
@@ -1 +1,5 @@
 lib
+
+# test
+test-results
+playwright-report
diff --git a/packages/apps/artusx-react/index.html b/packages/apps/artusx-react/index.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
     <!--app-head-->
+    <script>
+      performance.mark('html.render');
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/apps/artusx-react/package.json b/packages/apps/artusx-react/package.json
@@ -19,29 +19,35 @@
   "scripts": {
     "_build": "tsc && RELOAD_SW=true vite build",
     "build": "",
-    "cy:install": "cypress install",
-    "cy:open": "cypress open",
     "dev": "SW_DEV=true vite",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "playwright": "pnpm exec playwright",
+    "playwright:install": "pnpm exec playwright install",
+    "playwright:report": "pnpm exec playwright show-report",
+    "playwright:test": "pnpm exec playwright test",
+    "playwright:ui": "pnpm exec playwright test --ui-host=0.0.0.0",
+    "preview": "vite preview",
+    "test": "pnpm run playwright:test"
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "~6.24.1"
   },
   "devDependencies": {
     "@artusx/tsconfig-react": "workspace:*",
+    "@playwright/test": "~1.45.1",
     "@rollup/plugin-replace": "~5.0.7",
     "@types/react": "^18.2.59",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "@vite-pwa/assets-generator": "~0.2.4",
     "@vitejs/plugin-react": "^4.2.1",
-    "cypress": "~13.11.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "playwright": "~1.45.1",
     "sharp": "~0.33.4",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",

diff --git a/packages/apps/artusx-react/playwright.config.ts b/packages/apps/artusx-react/playwright.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  // Folder for test artifacts such as screenshots, videos, traces, etc.
+  outputDir: 'test-results',
+
+  // reporter: 'html',
+  reporter: [
+    ['list'],
+    ['html', { open: 'never' }],
+    ['json', { outputFile: 'playwright-report/test-results.json' }],
+  ],
+
+  // path to the global setup files.
+  // globalSetup: require.resolve('./global-setup'),
+
+  // path to the global teardown files.
+  // globalTeardown: require.resolve('./global-teardown'),
+
+  // Each test is given 30 seconds.
+  timeout: 30000,
+  // use: {
+  //   headless: false,
+  //    viewport: { width: 1280, height: 720 },
+  //    ignoreHTTPSErrors: true,
+  //    video: 'on-first-retry',
+  //  },
+});
diff --git a/packages/apps/artusx-react/src/App.tsx b/packages/apps/artusx-react/src/App.tsx
diff --git a/packages/apps/artusx-react/src/components/Counter/index.tsx b/packages/apps/artusx-react/src/components/Counter/index.tsx
@@ -1,10 +1,15 @@
 import { useState } from 'react';
+import { useMeasure } from '../../hooks/useMeasure';
 
 export default function Counter() {
   const [count, setCount] = useState(0);
+  useMeasure('counterMeasure', 'root.render', 'counter.render');
+
   return (
     <div className="card">
-      <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+      <button role="button" onClick={() => setCount((count) => count + 1)}>
+        count is {count}
+      </button>
       <p>
         Edit <code>src/App.tsx</code> and save to test HMR
       </p>

diff --git a/packages/apps/artusx-react/src/components/ReloadPrompt/index.tsx b/packages/apps/artusx-react/src/components/ReloadPrompt/index.tsx
@@ -1,8 +1,12 @@
+import { useRegisterSW } from 'virtual:pwa-register/react';
+import { useMeasure } from '../../hooks/useMeasure';
 import './index.css';
 
-import { useRegisterSW } from 'virtual:pwa-register/react';
+const ReloadPrompt = () => {
+  const swStartTime = performance.now();
+
+  useMeasure('reloadPromptMeasure', 'root.render', 'reloadPrompt.render');
 
-function ReloadPrompt() {
   // replaced dynamically
   const buildDate = '__DATE__';
   // replaced dyanmicaly
@@ -26,6 +30,9 @@ function ReloadPrompt() {
         // eslint-disable-next-line prefer-template
         console.log('SW Registered', r);
       }
+
+      const swEndTime = performance.now();
+      console.log(`SW Registered time: ${swEndTime - swStartTime}`);
     },
     onRegisterError(error: any) {
       console.log('SW registration error', error);
@@ -64,6 +71,6 @@ function ReloadPrompt() {
       <div className="ReloadPrompt-date">{buildDate}</div>
     </div>
   );
-}
+};
 
 export default ReloadPrompt;
diff --git a/packages/apps/artusx-react/src/App.css → ...rtusx-react/src/components/Side/index.css b/packages/apps/artusx-react/src/App.css → ...rtusx-react/src/components/Side/index.css
@@ -1,10 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 .logo {
   height: 6em;
   padding: 1.5em;
@@ -33,10 +26,6 @@
   }
 }
 
-.card {
-  padding: 2em;
-}
-
 .read-the-docs {
   color: #888;
 }
diff --git a/packages/apps/artusx-react/src/components/Side/index.tsx b/packages/apps/artusx-react/src/components/Side/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import viteLogo from '@/assets/vite.svg';
+import reactLogo from '@/assets/react.svg';
+import './index.css';
+
+const Side: React.FC<{}> = () => {
+  return (
+    <>
+      <div className="info">
+        <a href="https://vitejs.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+
+        <h1>Vite + React + PWA</h1>
+        <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
+      </div>
+
+      <nav className="nav">
+        <NavLink
+          to="/"
+          className={({ isActive, isPending }) => (isPending ? 'pending' : isActive ? 'active' : '')}
+        >
+          Home
+        </NavLink>
+        <NavLink
+          to="/info"
+          className={({ isActive, isPending }) => (isPending ? 'pending' : isActive ? 'active' : '')}
+        >
+          Info
+        </NavLink>
+      </nav>
+    </>
+  );
+};
+
+export default Side;
diff --git a/packages/apps/artusx-react/src/entry-client.tsx b/packages/apps/artusx-react/src/entry-client.tsx
@@ -1,19 +1,21 @@
 import React from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
+import { useMeasure } from './hooks/useMeasure';
+import Rooter from './rooter';
+import './global.css';
 
 const container = document.getElementById('root');
 
-const FullApp = () => (
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+const Root: React.FC<{}> = () => {
+  useMeasure('reactMeasure', 'html.render', 'react.root');
+  return <Rooter />;
+};
 
 if (import.meta.hot || !container?.innerText) {
+  performance.mark('react.createRoot');
   const root = createRoot(container!);
-  root.render(<FullApp />);
+  root.render(<Root />);
 } else {
-  hydrateRoot(container!, <FullApp />);
+  performance.mark('react.hydrateRoot');
+  hydrateRoot(container!, <Root />);
 }
diff --git a/packages/apps/artusx-react/src/entry-server.tsx b/packages/apps/artusx-react/src/entry-server.tsx
@@ -1,13 +1,8 @@
-import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import App from './App.tsx';
-import './index.css';
+import Rooter from './rooter';
+import './global.css';
 
 export function render(url?: string) {
   console.log('rendering', url);
-  return ReactDOMServer.renderToString(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  );
+  return ReactDOMServer.renderToString(<Rooter />);
 }
diff --git a/packages/apps/artusx-react/src/index.css → packages/apps/artusx-react/src/global.css b/packages/apps/artusx-react/src/index.css → packages/apps/artusx-react/src/global.css
@@ -66,3 +66,52 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+/* root layout */
+
+.layout {
+  width: 1366px;
+  display: flex;
+  justify-content: space-between;
+  gap: 2em;
+}
+
+.side {
+}
+
+.nav {
+  display: flex;
+  gap: 1em;
+  justify-content: center;
+}
+
+.nav a {
+  text-decoration: none;
+  padding: 0 1em;
+}
+
+.nav .active {
+  color: #646cff;
+  background: #eee;
+}
+
+.nav .pending {
+  color: #646cff;
+  background: #888;
+}
+
+.main {
+  border-left: 1px solid #eee;
+  padding: 1em;
+}
+
+.card {
+  padding: 2em 4em;
+}
diff --git a/packages/apps/artusx-react/src/hooks/useMeasure.ts b/packages/apps/artusx-react/src/hooks/useMeasure.ts
@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+
+const clearMarks = (mark: string) => {
+  performance.getEntriesByName(mark, 'mark').forEach((entry) => {
+    console.debug('clearMarks.entry', entry.name);
+    performance.clearMarks(entry.name);
+  });
+};
+
+const clearMeasures = (measure: string) => {
+  performance.getEntriesByName(measure, 'measure').forEach((entry) => {
+    console.debug('clearMeasures.entry', entry.name);
+    performance.clearMeasures(entry.name);
+  });
+};
+
+export const useMeasure = (name: string, start: string, end: string) => {
+  if (!name || !start || !end) {
+    return;
+  }
+
+  clearMarks(end);
+
+  console.debug('useMeasure.mark', end);
+  performance.mark(end);
+
+  useEffect(() => {
+    const measure = () => {
+      const customMeasure = performance.measure(name, start, end);
+      console.debug('useMeasure.customMeasure', customMeasure.name, customMeasure.duration, customMeasure);
+    };
+
+    measure();
+
+    return () => {
+      clearMarks(start);
+      clearMarks(end);
+      clearMeasures(name);
+    };
+  }, []);
+
+  return {};
+};
diff --git a/packages/apps/artusx-react/src/pages/home.tsx b/packages/apps/artusx-react/src/pages/home.tsx
@@ -0,0 +1,15 @@
+import { useMeasure } from '../hooks/useMeasure';
+import Counter from '../components/Counter';
+
+function Home() {
+  useMeasure('homeMeasure', 'root.render', 'home.render');
+
+  return (
+    <div>
+      <h1>Home</h1>
+      <Counter />
+    </div>
+  );
+}
+
+export default Home;