add example for inline worker and fetch (beware of CORS)

mkslanc · Apr 4, 2023 · 4cd10e8 · 4cd10e8
1 parent 1a110dd
commit 4cd10e8
Showing 1 changed file with 105 additions and 0 deletions.
diff --git a/packages/demo/example-fetch-inline-worker.html b/packages/demo/example-fetch-inline-worker.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Example with using fetch and inline worker </title>
+
+</head>
+<body>
+<div id='example' style="height: 300px"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.16.0/ace.js"
+></script>
+<script>
+    ace.require("ace/ext/language_tools");
+
+    let editor = ace.edit("example", {
+        theme: "ace/theme/textmate",
+        mode: "ace/mode/typescript",
+        value: "console.log('Hello world' ;"
+    });
+    // enable autocompletion and snippets
+    editor.setOptions({
+        enableBasicAutocompletion: true,
+        enableSnippets: true,
+        enableLiveAutocompletion: true
+    });
+
+
+    async function fetchScript(url) {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Error fetching script: ${response.statusText}`);
+        }
+        const scriptContent = await response.text();
+        return scriptContent;
+    }
+
+    function createScriptBlob(scriptContent) {
+        const scriptBlob = new Blob([scriptContent], { type: 'application/javascript' });
+        return scriptBlob;
+    }
+
+    function createBlobURL(scriptBlob) {
+        const blobURL = URL.createObjectURL(scriptBlob);
+        return blobURL;
+    }
+
+    async function importScriptFromNetwork(url) {
+        const text= await fetchScript(url);
+
+        // Create a Blob with the text content and MIME type "text/javascript".
+        const blob = createScriptBlob(text);
+
+        // Create an object URL from the Blob.
+        return createBlobURL(blob);
+    }
+
+    async function importJavaScriptFile(url) {
+        const text= await fetchScript(url);
+
+        // Create a Blob with the text content and MIME type "text/javascript".
+        const blob = createScriptBlob(text);
+
+        // Create an object URL from the Blob.
+        const objectURL = createBlobURL(blob);
+
+        // Create a new script element and set its src attribute to the object URL.
+        const scriptElement = document.createElement("script");
+        scriptElement.src = objectURL;
+
+        // Add a listener to revoke the object URL when the script has loaded.
+        scriptElement.addEventListener("load", () => {
+            URL.revokeObjectURL(objectURL);
+        });
+
+        // Append the script element to the document to execute the JavaScript code.
+        document.body.appendChild(scriptElement);
+    }
+
+    const baseLink = "http://127.0.0.1:8080";
+
+    importJavaScriptFile( baseLink+ "/ace-linters.js").then(async () => {
+        let workerString = `
+    !function () {
+    importScripts("${await importScriptFromNetwork(baseLink + "/service-manager.js")}");
+    let manager = new ServiceManager(self);
+    
+    manager.registerService("typescript", {
+        module: () => {
+            importScripts("${await importScriptFromNetwork(baseLink + "/typescript-service.js")}");
+            return {TypescriptService};
+        },
+        className: "TypescriptService",
+        modes: "typescript|tsx|javascript",
+    });}()`;
+        let worker = new Worker(createBlobURL(createScriptBlob(workerString)));
+        let provider = LanguageProvider.create(worker);
+        provider.registerEditor(editor);
+    });
+
+
+</script>
+
+
+</body>
+</html>