Merge pull request #8 from mkslanc/react-ace-demo

React ace + ace-linters demo
ajaxorg · Oct 21, 2024 · 89a5273 · 89a5273
2 parents e21152c + 1e8aa15
commit 89a5273
Show file tree

Hide file tree

Showing 16 changed files with 71 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -10,9 +10,9 @@
     "./samples/*"
   ],
   "dependencies": {
-    "ace-builds": "^1.31.2",
-    "ace-code": "^1.31.2",
-    "ace-linters": "^1.0.3",
+    "ace-builds": "^1.36.2",
+    "ace-code": "^1.36.2",
+    "ace-linters": "^1.3.3",
     "typescript": "^5.3.2"
   },
   "devDependencies": {

diff --git a/samples/ace-builds-parcel/package.json b/samples/ace-builds-parcel/package.json
@@ -6,7 +6,8 @@
     "start": "parcel ./index.html"
   },
   "devDependencies": {
-    "ace-builds": "^1.15.3",
+    "ace-builds": "^1.36.2",
+    "ace-linters": "^1.3.3",
     "buffer": "^5.7.1",
     "parcel": "^2.8.3",
     "process": "^0.11.10"

diff --git a/samples/ace-builds-vitejs/package.json b/samples/ace-builds-vitejs/package.json
@@ -6,7 +6,7 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "ace-builds": "^1.15.3",
+    "ace-builds": "^1.36.2",
     "vite": "^4.0.3"
   },
   "type": "module"

diff --git a/samples/ace-builds-webpack/package.json b/samples/ace-builds-webpack/package.json
@@ -6,7 +6,7 @@
     "start": "webpack-dev-server"
   },
   "devDependencies": {
-    "ace-builds": "^1.15.3",
+    "ace-builds": "^1.36.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",

diff --git a/samples/ace-code-parcel/package.json b/samples/ace-code-parcel/package.json
@@ -6,7 +6,7 @@
     "start": "parcel ./index.html"
   },
   "devDependencies": {
-    "ace-code": "^1.15.3",
+    "ace-code": "^1.36.2",
     "parcel": "^2.8.3"
   }
 }
diff --git a/samples/ace-code-vitejs-typescript/index.html b/samples/ace-code-vitejs-typescript/index.html
@@ -7,6 +7,6 @@
 </head>
 	<body>
 	<div id="container" style="height: 100px"></div>
-	<script type="module" src="/src/index.js"></script>
+	<script type="module" src="/src/index.ts"></script>
 	</body>
 </html>
diff --git a/samples/ace-code-vitejs-typescript/package.json b/samples/ace-code-vitejs-typescript/package.json
@@ -7,7 +7,7 @@
     "test:tsc": "tsc --project tsconfig.json"
   },
   "devDependencies": {
-    "ace-code": "^1.15.3",
+    "ace-code": "^1.36.2",
     "vite": "^4.0.3"
   },
   "type": "module"

diff --git a/samples/ace-code-vitejs/package.json b/samples/ace-code-vitejs/package.json
@@ -6,7 +6,7 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "ace-code": "^1.15.3",
+    "ace-code": "^1.36.2",
     "vite": "^4.0.3"
   },
   "type": "module"

diff --git a/samples/ace-code-webpack/package.json b/samples/ace-code-webpack/package.json
@@ -6,7 +6,7 @@
     "start": "webpack-dev-server"
   },
   "devDependencies": {
-    "ace-code": "^1.15.3",
+    "ace-code": "^1.36.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",

diff --git a/samples/cloudscape-ace-example/next-env.d.ts b/samples/cloudscape-ace-example/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/samples/cloudscape-ace-example/package.json b/samples/cloudscape-ace-example/package.json
@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@cloudscape-design/components": "^3.0.339",
-    "ace-code": "1.30.0",
-    "ace-linters": "^1.0.3",
+    "ace-code": "^1.36.2",
+    "ace-linters": "^1.3.3",
     "file-loader": "6.2.0",
     "next": "canary",
     "react": "^18.2.0",

diff --git a/samples/react-ace-example/index.html b/samples/react-ace-example/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>ace-builds-vitejs</title>
+    <title>react-ace-builds-vitejs</title>
 </head>
 	<body>
 	<div id="container" style="height: 100px"></div>

diff --git a/samples/react-ace-example/index.jsx b/samples/react-ace-example/index.jsx
@@ -1,22 +1,45 @@
-import React from "react";
+import React, {useEffect, useRef} from "react";
 import * as ReactDOMClient from 'react-dom/client';
 import AceEditor from "react-ace";
 
 import "ace-builds/esm-resolver";
 import "ace-builds/src-noconflict/ext-language_tools";
+import {LanguageProvider} from "ace-linters";
 
-function onChange(newValue) {
-  console.log("change", newValue);
+let worker = new Worker(new URL('./webworker.js', import.meta.url), {type: "module"});
+let languageProvider = LanguageProvider.create(worker);
+
+// Editor component
+function AceEditorWithLinters() {
+    const editorRef = useRef(null);
+
+    useEffect(() => {
+        if (editorRef.current) {
+            languageProvider.registerEditor(editorRef.current.editor);
+        }
+    }, []);
+
+    function onChange(newValue) {
+        console.log("change", newValue);
+    }
+
+    return (<AceEditor
+        ref={editorRef}
+        mode="json"
+        theme="cobalt"
+        onChange={onChange}
+        name="UNIQUE_ID_OF_DIV"
+        enableBasicAutocompletion={true}
+        enableLiveAutocompletion={true}
+        editorProps={{$blockScrolling: true}}
+        height="200px"
+        value={`{
+       "name": 12
+       "country": "Ireland"
+    }`}
+    />);
 }
 
+// Render to the DOM
 var root = ReactDOMClient.createRoot(document.body);
-
-// Render editor
-root.render(<AceEditor
-    mode="java"
-    theme="cobalt"
-    onChange={onChange}
-    name="UNIQUE_ID_OF_DIV"
-    editorProps={{}}
-    height={200}
-  />);
+root.render(<AceEditorWithLinters/>);
diff --git a/samples/react-ace-example/package.json b/samples/react-ace-example/package.json
@@ -6,11 +6,12 @@
     "build": "vite build --base ./"
   },
   "devDependencies": {
+    "ace-linters": "^1.3.3",
     "vite": "^4.0.3"
   },
   "type": "module",
   "dependencies": {
-    "ace-builds": "^1.16.0",
+    "ace-builds": "^1.36.2",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-dom": "^18.2.0"

diff --git a/samples/react-ace-example/vite.config.js b/samples/react-ace-example/vite.config.js
@@ -0,0 +1,8 @@
+import {defineConfig} from 'vite'
+
+export default defineConfig({
+    base: '',
+    worker: {
+        format: "es",
+    }
+})
diff --git a/samples/react-ace-example/webworker.js b/samples/react-ace-example/webworker.js
@@ -0,0 +1,9 @@
+import {ServiceManager} from "ace-linters/build/service-manager";
+
+let manager = new ServiceManager(self);
+
+manager.registerService("json", {
+    module: () => import("ace-linters/build/json-service"),
+    className: "JsonService",
+    modes: "json"
+});