monaco local

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'

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)

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>,
 )

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": "[email protected]",

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)

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()],
 })