Replace text editor to Monaco

Change Alpine CDN to Webpack.
tyfkda · Jan 15, 2024 · 38f0b0a · 38f0b0a
1 parent 156b558
commit 38f0b0a
Show file tree

Hide file tree

Showing 6 changed files with 398 additions and 395 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "@babel/core": "~7.22.15",
     "@babel/preset-env": "~7.22.15",
     "@babel/register": "~7.22.15",
-    "@types/ace": "~0.0.48",
+    "@types/alpinejs": "~3.13.6",
     "@types/jest": "~29.5.4",
     "@types/node": "~16.11.11",
     "@types/path-browserify": "~1.0.0",
@@ -78,6 +78,7 @@
   "dependencies": {
     "@wasmer/wasi": "~0.12.0",
     "@wasmer/wasmfs": "~0.12.0",
+    "alpinejs": "~3.13.3",
     "buffer": "~6.0.3",
     "core-js": "~3.32.1",
     "path-browserify": "~1.0.1",

diff --git a/src/wcc/www/@types/patch.d.ts b/src/wcc/www/@types/patch.d.ts
@@ -4,6 +4,10 @@ interface Window {
   initialData: any
   showOpenFilePicker(option?: any): Promise<[FileSystemFileHandle]>
   showSaveFilePicker(option?: any): Promise<FileSystemFileHandle>
+
+  MonacoEnvironment: any
+  require: any
+  Alpine: any
 }
 
 interface FileSystemHandle {
@@ -23,3 +27,5 @@ interface WritableStream {
 interface FileSystemWritableFileStream extends WritableStream {
   write(content: any): Promise<any>
 }
+
+declare let monaco: any
diff --git a/src/wcc/www/index.html b/src/wcc/www/index.html
@@ -12,6 +12,7 @@
     <meta name="twitter:player:width" content="400">
     <title>C-compiler on WASM</title>
     <link rel="stylesheet" href="default.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/editor/editor.main.min.css" integrity="sha512-cglMadHaO/jAvqEM51bUj/saVbUkZwVa4PX0bcpWVlND3OrPpYcS/91uhIrgHrXmikanebYApd7UWjbDGEQUqg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   </head>
 
   <body>
@@ -71,8 +72,7 @@ <h4>About</h4>
       </div>
     </div>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.12.5/ace.js"></script>
-    <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js" integrity="sha512-ZG31AN9z/CQD1YDDAK4RUAvogwbJHv6bHrumrnMLzdCrVu4HeAqrUX7Jsal/cbUwXGfaMUNmQU04tQ8XXl5Znw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     <script src="main.js" type="text/javascript"></script>
   </body>