refactor: port from Vue-CLI to Vite

teal-language · Nov 5, 2023 · 8a29517 · 8a29517
1 parent d228c1d
commit 8a29517
Show file tree

Hide file tree

Showing 13 changed files with 2,291 additions and 10,920 deletions.
diff --git a/.env b/.env
@@ -1 +1 @@
-VUE_APP_TL_PACKAGE_PATH_URL=https://raw.githubusercontent.com/teal-language/tl/master/?.lua
+VITE_TL_PACKAGE_PATH_URL=https://raw.githubusercontent.com/teal-language/tl/master/?.lua
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    es2022: true
   },
   extends: [
     'plugin:vue/essential',

diff --git a/babel.config.js b/babel.config.js
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -4,15 +4,15 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="/favicon.ico">
+    <title></title>
     <style>html{ background-color: black; } * { margin: 0; padding: 0; }</style>
+    <script type="module" src="/src/main.ts"></script>
   </head>
   <body class="bg-black w-full overflow-hidden m-0">
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/jest.config.js b/jest.config.js
diff --git a/package.json b/package.json
@@ -3,11 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
   "dependencies": {
     "@tailwindcss/postcss7-compat": "^2.0.2",
@@ -16,33 +14,18 @@
     "fengari-web": "^0.1.4",
     "monaco-editor": "^0.20.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "vue": "^2.6.11",
+    "vue": "~2.6.14",
     "vue-monaco": "^1.2.1",
     "vue-resize-split-pane": "^0.1.5"
   },
   "devDependencies": {
     "@types/jest": "^24.0.19",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "~4.5.9",
-    "@vue/cli-plugin-eslint": "~4.5.9",
-    "@vue/cli-plugin-router": "~4.5.9",
-    "@vue/cli-plugin-typescript": "~4.5.9",
-    "@vue/cli-plugin-unit-jest": "~4.5.9",
-    "@vue/cli-plugin-vuex": "~4.5.9",
-    "@vue/cli-service": "~4.5.9",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "^1.0.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "monaco-editor-webpack-plugin": "^1.9.0",
+    "@vitejs/plugin-vue": "^1.6.1",
     "typescript": "~3.9.3",
-    "vue-template-compiler": "^2.6.11"
+    "vite": "^2.5.4",
+    "vite-plugin-vue2": "1.9.0",
+    "vite-plugin-require": "~1.1.11",
+    "vue-template-compiler": "~2.6.14"
   },
   "resolutions": {
     "node-forge": "0.10.0",

diff --git a/src/CompilerWorker.ts b/src/CompilerWorker.ts
@@ -0,0 +1,60 @@
+import * as fengari from 'fengari-web'
+import TealError from '@/TealError'
+
+const tl = `
+package.path = "${import.meta.env.VITE_TL_PACKAGE_PATH_URL}"
+os = {
+  getenv = function(var)
+    if var == "TL_DEBUG" then
+      return nil
+    else
+      return ''
+    end
+  end
+}
+local tl = require('tl')
+
+local env = tl.init_env(false, false, true)
+local output, result = tl.gen(%input%, env)
+
+return { output, result.syntax_errors, result.type_errors }
+`
+
+const convertErrorArray = (tbl) => {
+  if (tbl == null) {
+    return null
+  }
+
+  let array: [TealError] = []
+  let i = 1
+  while (tbl.has(i)) {
+    let obj = tbl.get(i)
+    let error: TealError = {
+      y: obj.get('y'),
+      x: obj.get('x'),
+      msg: obj.get('msg')
+    }
+    array[i - 1] = error;
+    i++;
+  }
+
+  return array
+}
+
+onmessage = (msg) => {
+  if (msg.data[0] == "compile") {
+    const newValue = msg.data[1]
+
+    try {
+      const out = fengari.load(tl.replace('%input%', JSON.stringify(newValue)))()
+
+      const output = out.get(1) || null
+      const syntaxErrors = convertErrorArray(out.get(2))
+      const typeErrors = convertErrorArray(out.get(3))
+
+      postMessage(["compiled", output, syntaxErrors, typeErrors])
+    } catch (err) {
+      postMessage(["error", err])
+    }
+  }
+}
diff --git a/src/TealError.ts b/src/TealError.ts
@@ -0,0 +1,7 @@
+type TealError = {
+  y: number
+  x: number
+  msg: string
+}
+
+export default TealError
diff --git a/src/components/Playground.vue b/src/components/Playground.vue
@@ -43,10 +43,13 @@ import {
   tealMonacoLanguage,
   tealMonacoLanguageConfiguration
 } from '@/teal-monaco-language'
-import * as fengari from 'fengari-web'
 import SplitPane from 'vue-resize-split-pane'
 
 import Toolbar from '@/components/Toolbar.vue'
+import TealError from '@/TealError'
+
+import CompilerWorker from '@/CompilerWorker.ts?worker'
+const compilerWorker = new CompilerWorker()
 
 // Register a new language
 languages.register({ id: 'teal' })
@@ -55,29 +58,7 @@ languages.register({ id: 'teal' })
 languages.setMonarchTokensProvider('teal', tealMonacoLanguage)
 languages.setLanguageConfiguration('teal', tealMonacoLanguageConfiguration)
 
-const tl = `
-package.path = "${process.env.VUE_APP_TL_PACKAGE_PATH_URL}"
-os = {
-  getenv = function (var)
-    if var == 'TL_PATH' then
-      return ''
-    end
-  end
-}
-local tl = require('tl')
-
-local env = tl.init_env(false, false, true)
-local output, result = tl.gen(%input%, env)
-
-return { output, result.syntax_errors, result.type_errors }
-`
-
-type LuaTableJs = {
-  get: (index: number) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
-  has: (index: number) => boolean;
-}
-
-export default Vue.extend({
+const Playground = Vue.extend({
   name: 'Playground',
   components: { MonacoEditor, Toolbar, SplitPane },
   props: {
@@ -94,7 +75,6 @@ export default Vue.extend({
       output: '',
       syntaxErrors: null,
       typeErrors: null,
-      loadError: null,
       markers: [] as editor.IMarkerData[],
       editorInput: null as editor.IStandaloneCodeEditor | null,
       editorOutput: null as editor.IStandaloneCodeEditor | null,
@@ -120,33 +100,12 @@ export default Vue.extend({
       immediate: true,
       deep: true,
       handler (newValue: string): void {
-        try {
-          if (newValue === '') {
-            this.output = ''
-            return
-          }
-          this.$emit('input', newValue)
-          const out: LuaTableJs = fengari.load(tl.replace('%input%', JSON.stringify(newValue)))()
-          this.loadError = null
-          this.output = out.get(1) || this.output
-          const syntaxErrors = out.get(2) || null
-          const typeErrors = out.get(3) || null
-
-          if (!this.editorInput) {
-            return
-          }
-
-          const model = this.editorInput.getModel()
-          if (!model) {
-            return
-          }
-
-          const markers = this.getMarkers(model, syntaxErrors, typeErrors)
-          editor.setModelMarkers(model, 'owner', markers)
-        } catch (err) {
-          this.loadError = err
-          console.error(err)
+        if (newValue === '') {
+          this.output = ''
+          return
         }
+        this.$emit('input', newValue)
+        compilerWorker.postMessage(["compile", newValue])
       }
     }
   },
@@ -160,17 +119,17 @@ export default Vue.extend({
       } else {
         this.editorOutput = editor
       }
+
+      this.resizeAll()
     },
 
-    buildErrorMarkers (model: editor.ITextModel, errors: LuaTableJs) {
+    buildErrorMarkers (model: editor.ITextModel, errors: [TealError]) {
       const markers: editor.IMarkerData[] = []
 
-      let i = 1
-      while (errors.has(i)) {
-        const err = errors.get(i)
-        const y = err.get('y')
-        const x = err.get('x')
-        const message = err.get('msg')
+      for (let err in errors) {
+        const y = err.y
+        const x = err.x
+        const message = err.msg
         const word = model.getWordAtPosition(new Position(y, x))
 
         let startColumn = x
@@ -189,7 +148,6 @@ export default Vue.extend({
           endColumn,
           severity: MarkerSeverity.Error
         })
-        i++
       }
 
       return markers
@@ -225,10 +183,30 @@ export default Vue.extend({
     resizeEditor (editor: editor.IStandaloneCodeEditor | null, width: number) {
       if (editor && window) {
         editor.layout({
-          width,
+          width: width,
           height: window.innerHeight
         })
       }
+    },
+
+    onCompiled (
+      output: string,
+      syntaxErrors: [TealError],
+      typeErrors: [TealError]
+    ) {
+      this.output = output || this.output
+
+      if (!this.editorInput) {
+        return
+      }
+
+      const model = this.editorInput.getModel()
+      if (!model) {
+        return
+      }
+
+      const markers = this.getMarkers(model, syntaxErrors, typeErrors)
+      editor.setModelMarkers(model, 'owner', markers)
     }
   },
 
@@ -237,6 +215,26 @@ export default Vue.extend({
     window.onresize = () => {
       this.resizeAll()
     }
+
+    compilerWorker.onmessage = (msg) => {
+      switch (msg.data[0]) {
+        case "compiled":
+          const output = msg.data[1]
+          const syntaxErrors = msg.data[2]
+          const typeErrors = msg.data[3]
+
+          this.onCompiled(output, syntaxErrors, typeErrors)
+          break;
+
+        case "error":
+          const err = msg[1]
+
+          console.error(err)
+          break;
+      }
+    }
   }
 })
+
+export default Playground
 </script>
diff --git a/src/teal-monaco-language.ts b/src/teal-monaco-language.ts
@@ -12,7 +12,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 */
 
-import monaco from "monaco-editor";
+import type monaco from "monaco-editor";
 
 import IRichLanguageConfiguration = monaco.languages.LanguageConfiguration;
 import ILanguage = monaco.languages.IMonarchLanguage;

diff --git a/tsconfig.json b/tsconfig.json
@@ -23,6 +23,7 @@
       ]
     },
     "lib": [
+      "webworker",
       "esnext",
       "dom",
       "dom.iterable",

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,22 @@
+// vite.config.js
+
+import { defineConfig } from 'vite'
+import { createVuePlugin as vue } from "vite-plugin-vue2";
+
+const path = require("path");
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  }
+})
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		VUE_APP_TL_PACKAGE_PATH_URL=https://raw.githubusercontent.com/teal-language/tl/master/?.lua
		VITE_TL_PACKAGE_PATH_URL=https://raw.githubusercontent.com/teal-language/tl/master/?.lua