diff --git a/packages/apps/artusx-react/package.json b/packages/apps/artusx-react/package.json index 127fa3d..7c81d8b 100644 --- a/packages/apps/artusx-react/package.json +++ b/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", diff --git a/packages/apps/artusx-react/src/App.tsx b/packages/apps/artusx-react/src/App.tsx index 362c2d5..20f423f 100644 --- a/packages/apps/artusx-react/src/App.tsx +++ b/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 ( <>
@@ -18,15 +16,9 @@ function App() { React logo
-

Vite + React + PWA

-
- -

- Edit src/App.tsx and save to test HMR -

-
+

Vite + React + PWA, v1.2

+

Click on the Vite and React logos to learn more

- ); diff --git a/packages/apps/artusx-react/src/components/Counter/index.tsx b/packages/apps/artusx-react/src/components/Counter/index.tsx new file mode 100644 index 0000000..bede650 --- /dev/null +++ b/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 ( +
+ +

+ Edit src/App.tsx and save to test HMR +

+
+ ); +} diff --git a/packages/apps/artusx-react/src/ReloadPrompt.css b/packages/apps/artusx-react/src/components/ReloadPrompt/index.css similarity index 100% rename from packages/apps/artusx-react/src/ReloadPrompt.css rename to packages/apps/artusx-react/src/components/ReloadPrompt/index.css diff --git a/packages/apps/artusx-react/src/ReloadPrompt.tsx b/packages/apps/artusx-react/src/components/ReloadPrompt/index.tsx similarity index 88% rename from packages/apps/artusx-react/src/ReloadPrompt.tsx rename to packages/apps/artusx-react/src/components/ReloadPrompt/index.tsx index a2ef610..1fae1b9 100644 --- a/packages/apps/artusx-react/src/ReloadPrompt.tsx +++ b/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,7 +24,7 @@ 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) { @@ -32,6 +32,9 @@ function ReloadPrompt() { }, }); + console.log('offlineReady', offlineReady); + console.log('needRefresh', needRefresh); + const close = () => { setOfflineReady(false); setNeedRefresh(false);