style: format web project with prettier

.prettierignore

@@ -0,0 +1,3 @@
+.nuxt
+.ouput
+dist

package.json

@@ -39,8 +39,8 @@
   "scripts": {
     "build": "unbuild",
     "dev": "vitest",
-    "lint": "eslint --ext .js,.ts . && prettier -c src test",
-    "lint:fix": "eslint --fix --ext .js,.ts . && prettier -w src test",
+    "lint": "eslint --ext .js,.ts . && prettier -c src test web",
+    "lint:fix": "eslint --fix --ext .js,.ts . && prettier -w src test web",
     "prepack": "pnpm build",
     "release": "pnpm test && changelogen --release --push && npm publish",
     "test": "pnpm lint && vitest run --coverage",

web/components/editor.vue

@@ -3,66 +3,66 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
-import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
-import 'monaco-editor/esm/vs/language/json/monaco.contribution'
-import 'monaco-editor/esm/vs/basic-languages/monaco.contribution'
-import 'monaco-editor/esm/vs/editor/editor.all'
-import { editor as moncacoEditor } from 'monaco-editor/esm/vs/editor/editor.api'
+import { defineComponent } from "vue";
+import "monaco-editor/esm/vs/language/typescript/monaco.contribution";
+import "monaco-editor/esm/vs/language/json/monaco.contribution";
+import "monaco-editor/esm/vs/basic-languages/monaco.contribution";
+import "monaco-editor/esm/vs/editor/editor.all";
+import { editor as moncacoEditor } from "monaco-editor/esm/vs/editor/editor.api";
 
 // https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-amd-cross.md
 globalThis.MonacoEnvironment = {
-  getWorkerUrl () {
-    const moncoCDN = 'https://cdn.jsdelivr.net/npm/[email protected]'
+  getWorkerUrl() {
+    const moncoCDN = "https://cdn.jsdelivr.net/npm/[email protected]";
     return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
       self.MonacoEnvironment = { baseUrl: '${moncoCDN}/min/' };
       importScripts('${moncoCDN}/min/vs/base/worker/workerMain.js');
-    `)}`
-  }
-}
+    `)}`;
+  },
+};
 
 export default defineComponent({
   props: {
     modelValue: {
       type: String,
-      required: true
+      required: true,
     },
     language: {
       type: String,
-      default: 'javascript'
+      default: "javascript",
     },
     readOnly: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   watch: {
-    modelValue (value, oldValue) {
+    modelValue(value, oldValue) {
       if (value !== oldValue && this.readOnly) {
-        this.editor.setValue(value)
+        this.editor.setValue(value);
       }
-    }
+    },
   },
-  mounted () {
+  mounted() {
     const editor = moncacoEditor.create(this.$refs.editor, {
       value: this.modelValue,
       language: this.language,
       readOnly: this.readOnly,
       wordWrap: true,
       automaticLayout: true,
       minimap: {
-        enabled: false
-      }
-    })
-    this.editor = editor
+        enabled: false,
+      },
+    });
+    this.editor = editor;
     editor.onDidChangeModelContent(() => {
-      this.$emit('update:modelValue', editor.getValue())
-    })
+      this.$emit("update:modelValue", editor.getValue());
+    });
     // editor.onDidBlurEditorWidget(() => {
     //   this.$emit('update:value', editor.getValue())
     // })
-  }
-})
+  },
+});
 </script>
 
 <style scoped>

web/components/loading.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="loading">
     <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
-    <svg width="50" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#ababab">
+    <svg
+      width="50"
+      height="30"
+      viewBox="0 0 120 30"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#ababab"
+    >
       <circle cx="15" cy="15" r="15">
         <animate
           attributeName="r"
@@ -73,7 +79,7 @@
 </template>
 
 <style scoped>
-  .loading {
-    padding: 2em;
-  }
+.loading {
+  padding: 2em;
+}
 </style>

web/components/markdown.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="container">
     <div class="mb-2">
-      <input id="markdown-raw" v-model="render" type="checkbox">
-      <label for="markdown-raw" class="select-none"> Render markdown</label><br>
+      <input id="markdown-raw" v-model="render" type="checkbox" />
+      <label for="markdown-raw" class="select-none"> Render markdown</label
+      ><br />
     </div>
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-if="render" class="markdown" v-html="rendered" />
@@ -11,36 +12,38 @@
 </template>
 
 <script>
-import 'prismjs/themes/prism.css'
-import { defineComponent, ref } from 'vue'
-import { marked } from 'marked'
-import prism from 'prismjs'
-import { safeComputed } from '../composables/utils'
+import "prismjs/themes/prism.css";
+import { defineComponent, ref } from "vue";
+import { marked } from "marked";
+import prism from "prismjs";
+import { safeComputed } from "../composables/utils";
 
 export default defineComponent({
   props: {
     value: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
   },
-  setup (ctx) {
-    const render = ref(true)
-    const rendered = safeComputed(() => marked(ctx.value, {
-      highlight (code, lang) {
-        if (lang === 'ts') {
-          lang = 'js'
-        }
-        const _lang = prism.languages[lang]
-        return _lang ? prism.highlight(code, _lang) : code
-      }
-    }))
+  setup(ctx) {
+    const render = ref(true);
+    const rendered = safeComputed(() =>
+      marked(ctx.value, {
+        highlight(code, lang) {
+          if (lang === "ts") {
+            lang = "js";
+          }
+          const _lang = prism.languages[lang];
+          return _lang ? prism.highlight(code, _lang) : code;
+        },
+      })
+    );
     return {
       render,
-      rendered
-    }
-  }
-})
+      rendered,
+    };
+  },
+});
 </script>
 
 <style scoped>
@@ -51,14 +54,15 @@ export default defineComponent({
 
 <style>
 .markdown {
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji !important;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji !important;
   color: #24292e !important;
   word-wrap: break-word;
 }
 
 .markdown code {
-  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-  padding: .2em .4em;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  padding: 0.2em 0.4em;
   font-size: 85%;
   background-color: #f6f8fa;
   border-radius: 6px;

web/components/tabs.vue

@@ -13,18 +13,18 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 
 export default defineComponent({
   props: {
     tabs: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     modelValue: {
       type: String,
-      default: ''
-    }
-  }
-})
+      default: "",
+    },
+  },
+});
 </script>

web/composables/utils.ts

@@ -1,14 +1,18 @@
-import { reactive, watch, computed } from 'vue'
+import { reactive, watch, computed } from "vue";
 
-const globalKeys = Object.getOwnPropertyNames(globalThis)
-  .filter(key => key[0].toLocaleLowerCase() === key[0] && key !== 'console' && key !== 'module')
+const globalKeys = Object.getOwnPropertyNames(globalThis).filter(
+  (key) =>
+    key[0].toLocaleLowerCase() === key[0] &&
+    key !== "console" &&
+    key !== "module"
+);
 
-export function evaluateSource (src) {
+export function evaluateSource(src) {
   // Basic commonjs transform
   src = src
-    .replace('export default', '_module._exports = ')
-    .replace(/export (const|let|var) (\w+) ?= ?/g, '_exports.$2 = ')
-    .replace(/export (function|class) (\w+)/g, '_exports.$2 = $1 $2 ')
+    .replace("export default", "_module._exports = ")
+    .replace(/export (const|let|var) (\w+) ?= ?/g, "_exports.$2 = ")
+    .replace(/export (function|class) (\w+)/g, "_exports.$2 = $1 $2 ");
 
   // eslint-disable-next-line no-new-func
   const fn = Function(`
@@ -17,69 +21,71 @@ export function evaluateSource (src) {
     const sandbox = {
       _module,
       _exports,
-      ${globalKeys.map(key => `"${key}": {}`).join(',')}
+      ${globalKeys.map((key) => `"${key}": {}`).join(",")}
     }
     with (sandbox) {
       ${src};
     };
     return sandbox._module._exports;
-  `)
+  `);
 
-  return fn.call({})
+  return fn.call({});
 }
 
-export function tryFn (fn) {
+export function tryFn(fn) {
   try {
-    return fn()
+    return fn();
   } catch (err) {
     // eslint-disable-next-line no-console
-    console.error(err)
-    return null
+    console.error(err);
+    return null;
   }
 }
 
-export function persistedState (initialState = {}) {
+export function persistedState(initialState = {}) {
   const state = reactive({
     ...initialState,
-    ...tryFn(() => JSON.parse(atob(window.location.hash.substr(1)) || '{}'))
-  })
+    ...tryFn(() => JSON.parse(atob(window.location.hash.substr(1)) || "{}")),
+  });
   watch(state, () => {
-    window.location.hash = '#' + btoa(JSON.stringify(state))
-  })
-  return state
+    window.location.hash = "#" + btoa(JSON.stringify(state));
+  });
+  return state;
 }
 
-export function safeComputed (fn) {
-  let lastState = null
+export function safeComputed(fn) {
+  let lastState = null;
   return computed(() => {
     try {
-      lastState = fn()
-      return lastState
+      lastState = fn();
+      return lastState;
     } catch (err) {
       // eslint-disable-next-line no-console
-      console.error(err)
-      return lastState
+      console.error(err);
+      return lastState;
     }
-  })
+  });
 }
 
-export function asyncComputed (fn) {
-  const state = ref(undefined)
-  const computedPromise = safeComputed(fn)
-  watch(computedPromise, val => {
-    val.then(r => state.value = r)
-  })
-  return state
+export function asyncComputed(fn) {
+  const state = ref(undefined);
+  const computedPromise = safeComputed(fn);
+  watch(computedPromise, (val) => {
+    val.then((r) => (state.value = r));
+  });
+  return state;
 }
 
-export function asyncImport ({ loader, loading, error }) {
-  const m = reactive(loading || {})
-  loader().then(res => Object.assign(m, res)).catch((err) => {
-    if (error) {
-      Object.assign(m, error(err))
-    }
-    // eslint-disable-next-line no-console
-    console.error(err)
-  })
-  return m
+export function asyncImport({ loader, loading, error }) {
+  const m = reactive(loading || {});
+  loader()
+    .then((res) => Object.assign(m, res))
+    .catch((err) => {
+      if (error) {
+        Object.assign(m, error(err));
+      }
+      // eslint-disable-next-line no-console
+      console.error(err);
+    });
+  return m;
 }

web/nuxt.config.ts

@@ -1,9 +1,7 @@
-import { defineNuxtConfig } from 'nuxt/config'
+import { defineNuxtConfig } from "nuxt/config";
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
   ssr: false,
-  modules: [
-    'nuxt-windicss'
-  ]
-})
+  modules: ["nuxt-windicss"],
+});