Merge pull request #8 from Pkcarreno/hotfix-2

Hotfix 2

.gitignore

@@ -1,5 +1,6 @@
 dist
 dist-ssr
+dev-dist
 *.local
 
 # dependencies
@@ -18,7 +19,6 @@ dist-ssr
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-/dev-dist
 
 # local env files
 .env

eslint.config.js

@@ -8,7 +8,7 @@ import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   {
-    ignores: ['node_modules/*', 'dev-dist/*'],
+    ignores: ['node_modules/*', 'dev-dist/*', 'dist/*'],
   },
   {
     rules: {

index.html

@@ -5,9 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>JSoD - JS on Demand</title>
 
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="icon" href="/favicon.ico" sizes="48x48" />
-    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/icons/pwa-icon_x180.png" />
+    <link rel="icon" href="/icons/favicon.ico" sizes="32x32" />
+    <link
+      rel="icon"
+      href="/icons/favicon.svg"
+      sizes="any"
+      type="image/svg+xml"
+    />
     <meta
       name="theme-color"
       content="#fdfefb"

package.json

@@ -67,12 +67,14 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@eslint/js": "^9.4.0",
+    "@rollup/plugin-replace": "^5.0.7",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^15.0.7",
     "@types/eslint__js": "^8.42.3",
     "@types/esprima": "^4.0.6",
     "@types/react": "^18.2.54",
     "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.17",
     "eslint": "^9.4.0",
@@ -96,6 +98,7 @@
     "vite": "^5.2.12",
     "vite-plugin-pwa": "^0.20.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.1.1"
+    "vitest": "^1.1.1",
+    "workbox-window": "^7.1.0"
   }
 }

src/app.tsx

@@ -2,9 +2,13 @@ import { Toaster } from '@/components/ui/sonner';
 import { ThemeProvider } from '@/providers/theme-provider';
 import Router from '@/routes';
 
+import { PromptProvider } from './providers/prompt-provider';
+
 const App = () => (
   <ThemeProvider storageKey="theme">
-    <Router />
+    <PromptProvider>
+      <Router />
+    </PromptProvider>
     <Toaster />
   </ThemeProvider>
 );

src/features/editor/api/query-storage.ts

@@ -1,4 +1,4 @@
-import { decode, encode } from 'js-base64';
+import { decode, encodeURI } from 'js-base64';
 import type { StateStorage } from 'zustand/middleware';
 
 export const queryStorage: StateStorage = {
@@ -9,7 +9,7 @@ export const queryStorage: StateStorage = {
   },
   setItem: (key, newValue): void => {
     const searchParams = new URLSearchParams(location.hash.slice(1));
-    searchParams.set(key, encode(JSON.stringify(newValue)));
+    searchParams.set(key, encodeURI(JSON.stringify(newValue)));
     location.hash = searchParams.toString();
   },
   removeItem: (key): void => {

src/features/editor/components/header/main-menu.tsx

@@ -2,6 +2,7 @@ import {
   CheckIcon,
   ChevronDownIcon,
   ExternalLinkIcon,
+  UpdateIcon,
 } from '@radix-ui/react-icons';
 
 import {
@@ -15,15 +16,18 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { usePrompt } from '@/hooks/use-prompt';
 import { useTheme } from '@/hooks/use-theme';
 
 import { useHelp } from '../../hooks/use-help';
 import { useSettingsDialog } from '../../hooks/use-settings-dialog';
 
+// eslint-disable-next-line max-lines-per-function
 export const MainMenu = () => {
   const { theme, setTheme } = useTheme();
   const { setSettingsOpen } = useSettingsDialog();
   const help = useHelp();
+  const { needRefresh, updateServiceWorker } = usePrompt();
 
   return (
     <DropdownMenu>
@@ -81,6 +85,18 @@ export const MainMenu = () => {
           </a>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
+        {needRefresh && (
+          <>
+            <DropdownMenuItem
+              className="bg-primary/20 focus:bg-primary/40 focus:text-foreground gap-1"
+              onClick={() => updateServiceWorker(true)}
+            >
+              <UpdateIcon />
+              New Update
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
         <DropdownMenuItem disabled>v{APP_VERSION}</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

src/hooks/use-prompt.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+
+import { PromptContext } from '@/providers/prompt-provider';
+
+export const usePrompt = () => {
+  const context = useContext(PromptContext);
+
+  if (context === undefined)
+    throw new Error('usePrompt must be used within a PromptProvider');
+
+  return context;
+};

src/providers/prompt-provider.tsx

@@ -0,0 +1,70 @@
+import { UpdateIcon } from '@radix-ui/react-icons';
+import { createContext } from 'react';
+import { toast } from 'sonner';
+import { useRegisterSW } from 'virtual:pwa-register/react';
+
+type PromptProviderState = {
+  needRefresh: boolean;
+  updateServiceWorker: (force: boolean) => void;
+};
+
+const initialState: PromptProviderState = {
+  needRefresh: false,
+  updateServiceWorker: () => {},
+};
+
+export const PromptContext = createContext<PromptProviderState>(initialState);
+
+interface PromptProviderProps {
+  children: React.ReactNode;
+}
+const intervalMS = 60 * 60 * 1000;
+
+export const PromptProvider: React.FC<PromptProviderProps> = ({ children }) => {
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegistered(r) {
+      if (r) {
+        setInterval(() => {
+          r.update();
+        }, intervalMS);
+      }
+      console.log('SW Registered: ' + r);
+    },
+    onRegisterError(error) {
+      console.error('SW registration error', error);
+    },
+  });
+
+  const onOfflineClose = () => setOfflineReady(false);
+
+  if (offlineReady) {
+    toast('App ready to work offline', {
+      onDismiss: onOfflineClose,
+      onAutoClose: onOfflineClose,
+    });
+  }
+
+  if (needRefresh) {
+    toast('New content available', {
+      description: 'click on reload button to update',
+      icon: <UpdateIcon />,
+      action: {
+        label: 'Reload',
+        onClick: () => updateServiceWorker(true),
+      },
+    });
+  }
+
+  const value = {
+    needRefresh,
+    updateServiceWorker,
+  };
+
+  return (
+    <PromptContext.Provider value={value}>{children}</PromptContext.Provider>
+  );
+};

tsconfig.json

@@ -4,7 +4,7 @@
     "baseUrl": "./src",
     "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext", "WebWorker"],
-    "types": ["unplugin-fonts/client"],
+    "types": ["unplugin-fonts/client", "vite-plugin-pwa/react"],
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -21,5 +21,5 @@
     }
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "dev-dist", "lint-staged.config.js"]
+  "exclude": ["node_modules", "dev-dist", "dist", "lint-staged.config.js"]
 }