feat: use vite for bundling (#24)

BREAKING CHANGE: Default export is now a named export

.eslintignore

@@ -1,4 +1,5 @@
 # Ignore artifacts
 coverage
+demo-dist
 dist
 node_modules

.eslintrc

@@ -10,11 +10,12 @@
     "eslint:recommended",
     "plugin:prettier/recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:vue/base"
+    "plugin:vue/vue3-recommended"
   ],
-  "parser": "@typescript-eslint/parser",
+  "parser": "vue-eslint-parser",
   "parserOptions": {
     "ecmaVersion": 2020,
+    "parser": "@typescript-eslint/parser",
     "sourceType": "module"
   },
   "overrides": [
@@ -24,5 +25,10 @@
         "jest": true
       }
     }
-  ]
+  ],
+  "rules": {
+    "vue/max-attributes-per-line": "off",
+    "vue/html-self-closing": "off",
+    "vue/singleline-html-element-content-newline": "off"
+  }
 }

README.md

@@ -59,7 +59,7 @@ $ npm install vue-marmoset-viewer
 
 ```typescript
 import { createApp } from "vue";
-import MarmosetViewer from 'vue-marmoset-viewer'
+import { MarmosetViewer } from 'vue-marmoset-viewer'
 
 const app = createApp()
 

demo/serve.vue → demo/app.vue

@@ -6,29 +6,29 @@
         <section id="settings">
           <div class="row">
             <label>Model</label>
-            <button v-for="file of files" :key="file" @click="src = file" :disabled="src === file">{{ capitalize(file) }}</button>
+            <button v-for="file of files" :key="file" :disabled="src === file" @click="src = file">{{ capitalize(file) }}</button>
           </div>
           <div>
             <label for="autostart">Autostart</label>
-            <input id="autostart" type="checkbox" v-model="autoStart" />
+            <input id="autostart" v-model="autoStart" type="checkbox" />
           </div>
           <div>
             <label for="responsive">Responsive</label>
-            <input id="responsive" type="checkbox" v-model="responsive" />
+            <input id="responsive" v-model="responsive" type="checkbox" />
           </div>
           <div>
             <label for="width">
               Width
               <span v-show="!responsive">({{ width }}px)</span>
             </label>
-            <input id="width" type="range" min="200" max="800" v-model="width" :disabled="responsive" />
+            <input id="width" v-model="width" type="range" min="200" max="800" :disabled="responsive" />
           </div>
           <div>
             <label for="height">
               Height
               <span v-show="!responsive">({{ height }}px)</span>
             </label>
-            <input id="height" type="range" min="200" max="600" v-model="height" :disabled="responsive" />
+            <input id="height" v-model="height" :disabled="responsive" max="600" min="200" type="range" />
           </div>
         </section>
         <section id="emits">
@@ -39,7 +39,7 @@
           <textarea id="emitLog" v-model="emitLog" readonly />
         </section>
       </div>
-      <div style="flex: 1">
+      <div style="flex-grow: 1">
         <marmoset-viewer
           :src="`${src}.mview`"
           :auto-start="autoStart"
@@ -63,7 +63,7 @@ import DemoHeader from './demo-header.vue'
 import MarmosetViewer from '@/marmoset-viewer.vue'
 
 export default defineComponent({
-  name: 'ServeDev',
+  name: 'App',
   components: {
     DemoHeader,
     DemoFooter,
@@ -88,6 +88,14 @@ export default defineComponent({
       return this.emits.join('\n')
     },
   },
+  created() {
+    document.title = 'vue-marmoset-viewer'
+    document.documentElement.setAttribute('lang', 'en')
+    const metaElement = document.createElement('meta')
+    metaElement.setAttribute('name', 'description')
+    metaElement.content = 'A responsive and configurable Marmoset Viewer component for Vue.'
+    document.getElementsByTagName('head')[0].appendChild(metaElement)
+  },
   methods: {
     addEmit(emit: string) {
       this.emits.unshift(`${new Date().toLocaleTimeString()}: ${emit}`)
@@ -98,14 +106,6 @@ export default defineComponent({
       return value.charAt(0).toUpperCase() + value.slice(1)
     },
   },
-  created() {
-    document.title = 'vue-marmoset-viewer'
-    document.documentElement.setAttribute('lang', 'en')
-    const metaElement = document.createElement('meta')
-    metaElement.setAttribute('name', 'description')
-    metaElement.content = 'A responsive and configurable Marmoset Viewer component for Vue.'
-    document.getElementsByTagName('head')[0].appendChild(metaElement)
-  },
 })
 </script>
 

demo/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@yeger/vue-masonry-wall</title>
+    <meta name="description" content="Responsive masonry layout with SSR support and zero dependencies for Vue 3." />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+    <meta property="og:title" content="@yeger/vue-masonry-wall" />
+    <meta property="og:description" content="Responsive masonry layout with SSR support and zero dependencies for Vue 3." />
+    <meta property="og:url" content="https://vue-masonry-wall.yeger.eu/" />
+    <meta property="og:image" content="https://vue-masonry-wall.yeger.eu/logo.png" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

demo/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './app.vue'
+import { MarmosetViewer } from '@/index'
+
+createApp(App).use(MarmosetViewer).mount('#app')

demo/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: 'demo',
+  plugins: [vue()],
+  resolve: {
+    alias: [
+      {
+        find: '@',
+        replacement: '../src',
+      },
+    ],
+  },
+  server: {
+    fs: {
+      // Allow serving files from one level up to the project root
+      allow: ['..'],
+    },
+  },
+})

jest.config.js

@@ -9,6 +9,6 @@ module.exports = {
     '~/(.+)$': '<rootDir>/test/$1',
   },
   transform: {
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
   },
 }