style: format and lint code

.eslintrc

@@ -1,9 +1,8 @@
 {
-  "extends": [
-    "eslint-config-unjs"
-  ],
+  "extends": ["eslint-config-unjs"],
   "rules": {
     "unicorn/no-null": 0,
-    "unicorn/prevent-abbreviations": 0
+    "unicorn/prevent-abbreviations": 0,
+    "@typescript-eslint/no-non-null-assertion": 0
   }
 }

demo/App.vue

@@ -4,64 +4,76 @@
       <FileTree @open="openTab" />
       <div class="main">
         <div class="tabs">
-          <div v-for="tab in state.tabs" :key="tab.path" class="tab" :class="{active: state.path === tab.path }">
-            <span @click="openTab(tab.path)">{{ tab.name }} </span><span @click="closeTab(tab.path)">(x)</span>
+          <div
+            v-for="tab in state.tabs"
+            :key="tab.path"
+            class="tab"
+            :class="{ active: state.path === tab.path }"
+          >
+            <span @click="openTab(tab.path)">{{ tab.name }} </span
+            ><span @click="closeTab(tab.path)">(x)</span>
           </div>
         </div>
-        <Editor class="editor" :value="state.source" :language="state.language" />
+        <Editor
+          class="editor"
+          :value="state.source"
+          :language="state.language"
+        />
       </div>
     </div>
   </Suspense>
 </template>
 
 <script>
-import { defineComponent, reactive, inject } from 'vue'
-import Editor from './Editor.vue'
-import FileTree from './FileTree.vue'
+import { defineComponent, reactive, inject } from "vue";
+import Editor from "./Editor.vue";
+import FileTree from "./FileTree.vue";
 
 export default defineComponent({
   components: {
     Editor,
-    FileTree
+    FileTree,
   },
-  setup () {
-    const storage = inject('storage')
+  setup() {
+    const storage = inject("storage");
     const state = reactive({
       tabs: [],
       path: undefined,
-      source: '',
-      language: 'javascript'
-    })
+      source: "",
+      language: "javascript",
+    });
 
     const openTab = async (path) => {
-      const tab = state.tabs.find(tab => tab.path === path)
+      const tab = state.tabs.find((tab) => tab.path === path);
       if (!tab) {
         state.tabs.push({
-          name: path.split(':').pop(),
-          path
-        })
+          name: path.split(":").pop(),
+          path,
+        });
       }
-      const source = await storage.getItem(path)
-      state.language = path.split(':').pop().split('.').pop() || 'javascript'
-      state.path = path
-      state.source = source
-    }
+      const source = await storage.getItem(path);
+      state.language = path.split(":").pop().split(".").pop() || "javascript";
+      state.path = path;
+      state.source = source;
+    };
 
     const closeTab = (path) => {
-      state.tabs = state.tabs.filter(t => t.path !== path)
-    }
+      state.tabs = state.tabs.filter((t) => t.path !== path);
+    };
 
     return {
       state,
       openTab,
-      closeTab
-    }
-  }
-})
+      closeTab,
+    };
+  },
+});
 </script>
 
 <style>
-body, html, #app {
+body,
+html,
+#app {
   margin: 0;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

demo/Editor.vue

@@ -3,35 +3,35 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
-import * as monaco from 'monaco-editor'
+import { defineComponent } from "vue";
+import * as monaco from "monaco-editor";
 
 export default defineComponent({
   props: {
     value: {
       type: String,
-      required: true
+      required: true,
     },
     language: {
       type: String,
-      default: 'auto'
-    }
+      default: "auto",
+    },
   },
   watch: {
-    value (newValue) {
-      this.editor.setValue(newValue)
+    value(newValue) {
+      this.editor.setValue(newValue);
+    },
+    language(newValue) {
+      this.editor.setModelLanguage(this.editor.getModule(), newValue);
     },
-    language (newValue) {
-      this.editor.setModelLanguage(this.editor.getModule(), newValue)
-    }
   },
-  mounted () {
+  mounted() {
     this.editor = monaco.editor.create(this.$refs.editor, {
       value: this.value,
-      language: this.language
-    })
-  }
-})
+      language: this.language,
+    });
+  },
+});
 </script>
 
 <style scoped>

demo/FileTree.vue

@@ -1,52 +1,51 @@
 <template>
   <div class="filetree">
-    <file-tree-node
-      :item="tree"
-      @open="path => $emit('open', path)"
-    />
+    <file-tree-node :item="tree" @open="(path) => $emit('open', path)" />
   </div>
 </template>
 
 <script>
-import { defineComponent, inject, ref } from 'vue'
-import FileTreeNode from './FileTreeNode.vue'
+import { defineComponent, inject, ref } from "vue";
+import FileTreeNode from "./FileTreeNode.vue";
 
-function unflattenArray (items, toplevelKey = 'root') {
-  const res = { name: toplevelKey, path: '', children: [] }
+function unflattenArray(items, toplevelKey = "root") {
+  const res = { name: toplevelKey, path: "", children: [] };
   for (const item of items) {
-    const split = item.split(':')
-    let target = res
+    const split = item.split(":");
+    let target = res;
     for (const name of split) {
-      let child = target.children.find(c => c.name === name)
+      let child = target.children.find((c) => c.name === name);
       if (!child) {
         child = {
           name,
-          path: target.path + ':' + name,
-          children: []
-        }
-        target.children.push(child)
-        target.children = target.children.sort((c1, c2) => c1.name.localeCompare(c2.name))
+          path: target.path + ":" + name,
+          children: [],
+        };
+        target.children.push(child);
+        target.children = target.children.sort((c1, c2) =>
+          c1.name.localeCompare(c2.name)
+        );
       }
-      target = child
+      target = child;
     }
-    target.path = item
+    target.path = item;
   }
-  return res
+  return res;
 }
 
 export default defineComponent({
   components: { FileTreeNode },
-  async setup () {
-    const storage = inject('storage')
-    const tree = ref([])
+  async setup() {
+    const storage = inject("storage");
+    const tree = ref([]);
     await storage.getKeys().then((_keys) => {
-      tree.value = unflattenArray(_keys, 'workspace')
-    })
+      tree.value = unflattenArray(_keys, "workspace");
+    });
     return {
-      tree
-    }
-  }
-})
+      tree,
+    };
+  },
+});
 </script>
 
 <style scoped>

demo/FileTreeNode.vue

@@ -1,49 +1,49 @@
 <template>
   <li class="filetree-node">
     <div @click="onOpen">
-      {{ item.name }} <span v-if="isDirectory">[{{ isOpen ? '-' : '+' }}]</span>
+      {{ item.name }} <span v-if="isDirectory">[{{ isOpen ? "-" : "+" }}]</span>
     </div>
     <ul v-if="isOpen && item.children.length">
       <file-tree-node
         v-for="child of item.children"
         :key="child.name"
         :item="child"
-        @open="path => $emit('open', path)"
+        @open="(path) => $emit('open', path)"
       />
     </ul>
   </li>
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref } from "vue";
 
 export default defineComponent({
   props: {
     item: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
-  setup (props) {
+  setup(props) {
     return {
-      isOpen: ref((props.item.path || '').split(':').length < 3)
-    }
+      isOpen: ref((props.item.path || "").split(":").length < 3),
+    };
   },
   computed: {
-    isDirectory () {
-      return this.item.children.length
-    }
+    isDirectory() {
+      return this.item.children.length;
+    },
   },
   methods: {
-    onOpen () {
+    onOpen() {
       if (this.isDirectory) {
-        this.isOpen = !this.isOpen
+        this.isOpen = !this.isOpen;
       } else {
-        this.$emit('open', this.item.path)
+        this.$emit("open", this.item.path);
       }
-    }
-  }
-})
+    },
+  },
+});
 </script>
 
 <style scoped>

demo/main.js

@@ -1,15 +1,15 @@
-import { createApp } from 'vue'
-import { createStorage } from '../src'
-import httpDriver from '../src/drivers/http'
-import App from './App.vue'
+import { createApp } from "vue";
+import { createStorage } from "../src";
+import httpDriver from "../src/drivers/http";
+import App from "./App.vue";
 
-function main () {
+function main() {
   const storage = createStorage({
-    driver: httpDriver({ base: location.origin + '/storage' })
-  })
-  const app = createApp(App)
-  app.provide('storage', storage)
-  app.mount('#app')
+    driver: httpDriver({ base: location.origin + "/storage" }),
+  });
+  const app = createApp(App);
+  app.provide("storage", storage);
+  app.mount("#app");
 }
 
-main()
+main();

demo/vite.config.ts

@@ -9,20 +9,20 @@ import fsdriver from "../src/drivers/fs";
 export default defineConfig({
   resolve: {
     alias: {
-      "node-fetch": "node-fetch/browser"
-    }
+      "node-fetch": "node-fetch/browser",
+    },
   },
   plugins: [
     vue(),
     {
       name: "app",
-      configureServer (server) {
+      configureServer(server) {
         const storage = createStorage();
         const storageServer = createStorageServer(storage);
         // eslint-disable-next-line unicorn/prefer-module
         storage.mount("/src", fsdriver({ base: resolve(__dirname, "..") }));
         server.middlewares.use("/storage", storageServer.handle);
-      }
-    }
-  ]
+      },
+    },
+  ],
 });