From 2f9ab7b309af0608e7f313b0c685e081518c0b12 Mon Sep 17 00:00:00 2001
From: Giacomo Rebonato <grebonato@outlook.ie>
Date: Wed, 28 Jun 2023 12:27:57 +0100
Subject: [PATCH] monaco local

---
 client/features/collab-editor.tsx | 23 ++++++++++++--
 client/features/monacor-worker.ts | 27 ++++++++++++++++
 client/features/reload-prompt.css | 29 -----------------
 client/features/reload-prompt.tsx | 53 -------------------------------
 client/main.tsx                   |  4 +--
 package.json                      |  4 ---
 server/plugins/vite-plugin.ts     |  7 ----
 vite.config.ts                    |  3 +-
 8 files changed, 50 insertions(+), 100 deletions(-)
 create mode 100644 client/features/monacor-worker.ts
 delete mode 100644 client/features/reload-prompt.css
 delete mode 100644 client/features/reload-prompt.tsx

diff --git a/client/features/collab-editor.tsx b/client/features/collab-editor.tsx
index d475014..082e642 100644
--- a/client/features/collab-editor.tsx
+++ b/client/features/collab-editor.tsx
@@ -2,18 +2,19 @@ import { HocuspocusProvider } from '@hocuspocus/provider'
 import Editor, { loader } from '@monaco-editor/react'
 import './collab-editor.css'
 
-import * as monaco from 'monaco-editor'
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+
+import { useEffect, useState } from 'react'
 import { IndexeddbPersistence } from 'y-indexeddb'
 import { MonacoBinding } from 'y-monaco'
 import * as Y from 'yjs'
 
-loader.config({ monaco })
-
 const DOC_NAME = 'collab-editor'
 const getRandomColor = () => Math.floor(Math.random() * 16777215).toString(16)
 const invertHex = (hex: string) => {
   return (Number(`0x1${hex}`) ^ 0xffffff).toString(16).substr(1).toUpperCase()
 }
+
 const createCssClass = (className: string, definition: string) => {
   if (document.getElementById(className)) {
     return
@@ -37,6 +38,22 @@ do {
 } while (!name)
 
 export const CollabEditor = () => {
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  useEffect(() => {
+    if (!isLoaded) {
+      loader.config({ monaco })
+      loader.init().then(() => {
+        console.log('Monaco loaded')
+        setIsLoaded(true)
+      })
+    }
+  }, [isLoaded])
+
+  if (!isLoaded) {
+    return null
+  }
+
   return (
     <Editor
       className='editor'
diff --git a/client/features/monacor-worker.ts b/client/features/monacor-worker.ts
new file mode 100644
index 0000000..3bcd1a7
--- /dev/null
+++ b/client/features/monacor-worker.ts
@@ -0,0 +1,27 @@
+import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+// @ts-ignore
+self.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === 'json') {
+      return new jsonWorker()
+    }
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new cssWorker()
+    }
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      return new htmlWorker()
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new tsWorker()
+    }
+    return new editorWorker()
+  },
+}
+
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
diff --git a/client/features/reload-prompt.css b/client/features/reload-prompt.css
deleted file mode 100644
index 70fa268..0000000
--- a/client/features/reload-prompt.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.ReloadPrompt-container {
-  padding: 0;
-  margin: 0;
-  width: 0;
-  height: 0;
-}
-.ReloadPrompt-toast {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  margin: 16px;
-  padding: 12px;
-  border: 1px solid #8885;
-  border-radius: 4px;
-  z-index: 1;
-  text-align: left;
-  box-shadow: 3px 4px 5px 0 #8885;
-  background-color: white;
-}
-.ReloadPrompt-toast-message {
-  margin-bottom: 8px;
-}
-.ReloadPrompt-toast-button {
-  border: 1px solid #8885;
-  outline: none;
-  margin-right: 5px;
-  border-radius: 2px;
-  padding: 3px 10px;
-}
diff --git a/client/features/reload-prompt.tsx b/client/features/reload-prompt.tsx
deleted file mode 100644
index a5214b9..0000000
--- a/client/features/reload-prompt.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// eslint-disable-next-line import/no-unresolved
-import { useRegisterSW } from 'virtual:pwa-register/react'
-import './reload-prompt.css'
-
-export function ReloadPrompt() {
-  const {
-    offlineReady: [offlineReady, setOfflineReady],
-    needRefresh: [needRefresh, setNeedRefresh],
-    updateServiceWorker,
-  } = useRegisterSW({
-    onRegistered(r) {
-      // eslint-disable-next-line prefer-template
-      console.log('SW Registered: ' + r)
-    },
-    onRegisterError(error) {
-      console.log('SW registration error', error)
-    },
-  })
-
-  const close = () => {
-    setOfflineReady(false)
-    setNeedRefresh(false)
-  }
-
-  return (
-    <div className='ReloadPrompt-container'>
-      {(offlineReady || needRefresh) && (
-        <div className='ReloadPrompt-toast'>
-          <div className='ReloadPrompt-message'>
-            {offlineReady ? (
-              <span>App ready to work offline</span>
-            ) : (
-              <span>
-                New content available, click on reload button to update.
-              </span>
-            )}
-          </div>
-          {needRefresh && (
-            <button
-              className='ReloadPrompt-toast-button'
-              onClick={() => updateServiceWorker(true)}
-            >
-              Reload
-            </button>
-          )}
-          <button className='ReloadPrompt-toast-button' onClick={() => close()}>
-            Close
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/client/main.tsx b/client/main.tsx
index 9cfd11a..45ba324 100644
--- a/client/main.tsx
+++ b/client/main.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import { CollabEditor } from './features/collab-editor.js'
-import { ReloadPrompt } from './features/reload-prompt.js'
+import './features/monacor-worker.js'
+
 import './main.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <ReloadPrompt />
     <CollabEditor />
   </React.StrictMode>,
 )
diff --git a/package.json b/package.json
index 6767f18..ac1bcd3 100644
--- a/package.json
+++ b/package.json
@@ -40,14 +40,12 @@
     "drizzle-kit": "^0.19.2",
     "drizzle-orm": "^0.27.0",
     "drizzle-zod": "^0.4.4",
-    "fast-jwt": "^3.1.1",
     "fastify": "^4.18.0",
     "fastify-print-routes": "^2.1.0",
     "monaco-editor": "^0.39.0",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "workbox-window": "^7.0.0",
     "y-indexeddb": "^9.0.11",
     "y-monaco": "^0.1.4",
     "yjs": "13.6.6",
@@ -61,7 +59,6 @@
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
     "del-cli": "^5.0.0",
     "eslint": "^8.43.0",
     "eslint-import-resolver-typescript": "^3.5.5",
@@ -75,7 +72,6 @@
     "tsx": "^3.12.7",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
-    "vite-plugin-pwa": "^0.16.4",
     "vitest": "^0.32.2"
   },
   "packageManager": "pnpm@8.2.0",
diff --git a/server/plugins/vite-plugin.ts b/server/plugins/vite-plugin.ts
index 75d82a4..fb4d091 100644
--- a/server/plugins/vite-plugin.ts
+++ b/server/plugins/vite-plugin.ts
@@ -26,13 +26,6 @@ export const vitePlugin = async (
       prefix: '/assets/',
     })
 
-    app.get('/manifest.webmanifest', function (req, reply) {
-      reply.sendFile('manifest.webmanifest', Path.join(appRoot.path, 'dist'))
-    })
-    app.get('/sw.js', function (req, reply) {
-      reply.sendFile('sw.js', Path.join(appRoot.path, 'dist'))
-    })
-
     app.get('*', async (request, reply) => {
       const token = reply.generateCsrf()
       const template = htmlFile.replace('<!--csrf-token-->', token)
diff --git a/vite.config.ts b/vite.config.ts
index a235abe..963648f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,7 @@
 import react from '@vitejs/plugin-react-swc'
-import { VitePWA } from 'vite-plugin-pwa'
 
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-  plugins: [react(), VitePWA({ registerType: 'autoUpdate' })],
+  plugins: [react()],
 })