fix lint errors

src/App.vue

@@ -1,11 +1,10 @@
 <script>
-import { RouterLink, RouterView } from 'vue-router';
 import { defineComponent } from 'vue';
-import Help from './components/Help.vue';
+import HelpModal from './components/HelpModal.vue';
 
 export default defineComponent({
   components: {
-    Help,
+    HelpModal,
   },
   data() {
     window.addEventListener('keydown', e => {
@@ -44,6 +43,6 @@ export default defineComponent({
 </style>
 
 <template>
-  <Help :visible="showHelp" @close="showHelp = false" />
+  <HelpModal :visible="showHelp" @close="showHelp = false" />
   <RouterView />
 </template>

src/components/CodeEditor.vue

@@ -6,10 +6,10 @@ import { javascript } from '@codemirror/lang-javascript'
 import { oneDark } from '@codemirror/theme-one-dark'
 
 export default defineComponent({
-  name: 'Code',
-  props: [
-    'code',
-  ],
+  name: 'CodeEditor',
+  props: {
+    code: String,
+  },
   components: {
     Codemirror,
   },
@@ -23,16 +23,16 @@ export default defineComponent({
     };
 
     // Status is available at all times via Codemirror EditorView
-    const getCodemirrorStates = () => {
-      const state = view.value.state;
-      const ranges = state.selection.ranges;
-      const selected = ranges.reduce((r, range) => r + range.to - range.from, 0);
-      const cursor = ranges[0].anchor;
-      const length = state.doc.length;
-      const lines = state.doc.lines;
-      // more state info ...
-      // return ...
-    }
+    // const getCodemirrorStates = () => {
+    //   const state = view.value.state;
+    //   const ranges = state.selection.ranges;
+    //   const selected = ranges.reduce((r, range) => r + range.to - range.from, 0);
+    //   const cursor = ranges[0].anchor;
+    //   const length = state.doc.length;
+    //   const lines = state.doc.lines;
+    //   // more state info ...
+    //   // return ...
+    // }
 
     return {
       extensions,
@@ -62,7 +62,7 @@ export default defineComponent({
 <template>
   <div class="code">
     <codemirror
-      v-model="code.value"
+      :modelValue="code"
       placeholder="Code goes here..."
       :style="{ height: '100%' }"
       :autofocus="true"

src/components/HelpModal.vue

@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'Help',
+  name: 'HelpModal',
   props: {
     visible: Boolean,
   },
@@ -13,7 +13,7 @@ export default defineComponent({
 
 $padding: 12px;
 
-.help {
+.help-modal {
   position: absolute;
   top: 0;
   left: 0;
@@ -79,7 +79,7 @@ $padding: 12px;
 
 <template>
   <div
-    class="help"
+    class="help-modal"
     :class="{ visible: this.visible }"
     @click="$emit('close')"
   >

src/components/ResultCode.vue

@@ -3,22 +3,22 @@ import { defineComponent } from 'vue';
 import settingsService from '../services/settingsService';
 
 export default defineComponent({
-  name: 'Result',
+  name: 'ResultCode',
   props: [
     'data'
   ],
   watch: {
-    data(val) {
+    data() {
       if (!settingsService.getItem('autoScroll')) return;
-      const pre = this.$refs.pre;
-      setTimeout(() => pre.scrollTo(0, pre.scrollHeight), 1);
+      const div = this.$refs.div;
+      setTimeout(() => div.scrollTo(0, div.scrollHeight), 1);
     },
   }
 });
 </script>
 
 <style scoped>
-.result {
+.result-code {
   overflow-x: auto;
   overflow-y: auto;
   margin: 0;
@@ -32,7 +32,7 @@ export default defineComponent({
 </style>
 
 <template>
-  <div class="result" ref="pre">
+  <div class="result-code" ref="div">
     <pre class="selectable">{{ data }}</pre>
   </div>
 </template>

src/file.worker.js

@@ -1,7 +1,7 @@
 
 import { stringify } from 'javascript-stringify';
 import { MAX_DATA_SIZE } from './app.config';
-import { getType } from '@gkucmierz/utils/src/get-type';
+// import { getType } from '@gkucmierz/utils/src/get-type';
 
 import { addDefaultLog } from './utils/utils';
 
@@ -39,9 +39,9 @@ const throttledPM = (() => {
 
     if (tryAgain) {
       const nextTick = fn => setTimeout(fn, 0);
-      const tryAgainFn = _ => throttledPM([][0], false, false);
+      const tryAgainFn = () => throttledPM([][0], false, false);
       // try push data asap
-      setTimeout(tryAgainFn, 0);
+      nextTick(tryAgainFn);
       // try push possibly cached data for async code
       setTimeout(tryAgainFn, updateDelay);
     }

src/services/settingsService.mjs

@@ -1,5 +1,5 @@
 
-import EventEmitter from 'eventemitter3';
+// import EventEmitter from 'eventemitter3';
 import { STORAGE_KEY_SETTINGS } from '../app.config';
 
 // const ee = new EventEmitter();

src/views/HomeView.vue

@@ -1,8 +1,8 @@
 <script>
 
 import { WELCOME_CODE, STORAGE_KEY_CODE } from '../app.config';
-import Result from '../components/Result.vue';
-import Code from '../components/Code.vue';
+import ResultCode from '../components/ResultCode.vue';
+import CodeEditor from '../components/CodeEditor.vue';
 import settingsService from '../services/settingsService';
 
 import Worker from '../file.worker.js?worker';
@@ -12,16 +12,17 @@ import Worker from '../file.worker.js?worker';
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 
-import { defineComponent, shallowRef } from 'vue';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   components: {
     Splitter, SplitterPanel,
-    Result, Code,
+    ResultCode, CodeEditor,
   },
   data() {
     const lsCode = localStorage.getItem(STORAGE_KEY_CODE);
-    const code = { value: lsCode ? lsCode : WELCOME_CODE };
+    // const code = { value: lsCode ? lsCode : WELCOME_CODE };
+    const code = lsCode ? lsCode : WELCOME_CODE;
 
     return {
       code,
@@ -30,7 +31,8 @@ export default defineComponent({
     }
   },
   mounted() {
-    this.run(this.code.value);
+    // this.run(this.code.value);
+    this.run(this.code);
   },
   methods: {
     save(code) {
@@ -90,10 +92,10 @@ main {
   <main>
     <Splitter style="height: 100%" :step="50" :gutterSize="8" layout="horizontal">
       <SplitterPanel class="left-pane">
-        <Code :code="code" @change="change($event)"/>
+        <CodeEditor :code="code" @change="change($event)"/>
       </SplitterPanel>
       <SplitterPanel class="right-pane">
-        <Result :data="result"/>
+        <ResultCode :data="result"/>
       </SplitterPanel>
     </Splitter>
   </main>

src/views/SettingsView.vue

@@ -33,7 +33,9 @@ export default defineComponent({
   watch: {
     so: {
       deep: true,
-      handler: val => settingsService.set(val),
+      handler(val) {
+        settingsService.set(val);
+      },
     },
   },
   mounted() {

vite.config.js

@@ -3,7 +3,9 @@ import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { VitePWA } from 'vite-plugin-pwa';
-import packageJson from './package.json' assert { type: 'json' };
+// import packageJSON from './package.json' assert { type: 'json' };
+import { readFileSync } from 'fs';
+const packageJSON = JSON.parse(readFileSync('./package.json'));
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -24,9 +26,9 @@ export default defineConfig({
         start_url: '/',
         scope: '/',
         display: 'standalone',
-        name: packageJson.name,
-        short_name: packageJson.name,
-        description: packageJson.description,
+        name: packageJSON.name,
+        short_name: packageJSON.name,
+        description: packageJSON.description,
         background_color: '#282C34',
         theme_color: '#7ACED7',
         id: '/',