feat(artusx-react): update react app

packages/apps/artusx-react/package.json

@@ -19,6 +19,7 @@
   "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",

packages/apps/artusx-react/src/App.tsx

@@ -1,13 +1,11 @@
-import { useState } from 'react';
 import viteLogo from './assets/vite.svg';
 import reactLogo from './assets/react.svg';
 import './App.css';
 
-import ReloadPrompt from './ReloadPrompt';
+import Counter from './components/Counter';
+import ReloadPrompt from './components/ReloadPrompt';
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
     <>
       <div>
@@ -18,15 +16,9 @@ function App() {
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
-      <h1>Vite + React + PWA</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
+      <h1>Vite + React + PWA, v1.2</h1>
+      <Counter />
       <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
-
       <ReloadPrompt />
     </>
   );

packages/apps/artusx-react/src/components/Counter/index.tsx

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div className="card">
+      <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+      <p>
+        Edit <code>src/App.tsx</code> and save to test HMR
+      </p>
+    </div>
+  );
+}

packages/apps/artusx-react/src/ReloadPrompt.tsx → packages/apps/artusx-react/src/components/ReloadPrompt/index.tsx

@@ -1,4 +1,4 @@
-import './ReloadPrompt.css';
+import './index.css';
 
 import { useRegisterSW } from 'virtual:pwa-register/react';
 
@@ -13,8 +13,8 @@ function ReloadPrompt() {
     needRefresh: [needRefresh, setNeedRefresh],
     updateServiceWorker,
   } = useRegisterSW({
-    onRegisteredSW(swUrl: any, r: any) {
-      console.log(`Service Worker at: ${swUrl}, buildDate: ${buildDate}`);
+    onRegisteredSW(swUrl: string, r: any) {
+      console.log(`Service Worker at: ${swUrl}, buildDate: ${buildDate}, reloadSW: ${reloadSW}`);
       // @ts-expect-error just ignore
       if (reloadSW === 'true') {
         r &&
@@ -24,14 +24,17 @@ function ReloadPrompt() {
           }, 20000 /* 20s for testing purposes */);
       } else {
         // eslint-disable-next-line prefer-template
-        console.log('SW Registered: ' + r);
+        console.log('SW Registered', r);
       }
     },
     onRegisterError(error: any) {
       console.log('SW registration error', error);
     },
   });
 
+  console.log('offlineReady', offlineReady);
+  console.log('needRefresh', needRefresh);
+
   const close = () => {
     setOfflineReady(false);
     setNeedRefresh(false);