Chore(rollup)

package.json

@@ -18,18 +18,22 @@
     }
   ],
   "scripts": {
-    "build": "vue-cli-service build --target lib --name index src/main.js src/sass/main.scss && rm ./dist/demo.html",
+    "build": "rollup -c",
     "lint": "vue-cli-service lint",
     "docs": "docsify serve ./docs",
     "test": "jest ./tests"
   },
-  "main": "dist/index.common.js",
-  "unpkg": "dist/index.min.js",
+  "main": "dist/index.common.min.js",
+  "browser": "dist/index.umd.min.js",
+  "unpkg": "dist/index.umd.min.js",
+  "module": "dist/index.esm.min.js",
   "dependencies": {},
   "peerDependencies": {
     "vue": "^3.0.5"
   },
   "devDependencies": {
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-typescript": "^8.1.1",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -46,7 +50,16 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^7.2.0",
+    "install": "^0.13.0",
     "jest": "^26.6.3",
+    "npm": "^7.5.4",
+    "postcss": "^8.2.6",
+    "rollup-plugin-minify": "^1.0.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-scss": "^2.6.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript": "^1.0.1",
+    "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.30.0",
     "sass-loader": "^10.1.0",
     "ts-jest": "^26.4.4",

rollup.config.js

@@ -0,0 +1,53 @@
+import alias from '@rollup/plugin-alias';
+import minify from 'rollup-plugin-minify';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import scss from 'rollup-plugin-scss';
+import typescript from 'rollup-plugin-typescript';
+// import typescript from '@rollup/plugin-typescript';
+import vue from 'rollup-plugin-vue';
+import { terser } from 'rollup-plugin-terser';
+
+const addOutputType = (options) => ({
+  name: '@anivive/vue3-form-wizard',
+  compact: true,
+  interop: 'auto',
+  exports: 'auto',
+  sourcemap: true,
+  globals: {
+    vue: 'vue'
+  },
+  ...options
+});
+
+export default {
+  input: 'src/main.js',
+  output: [
+    addOutputType({ file: 'dist/index.common.js', format: 'cjs' }),
+    addOutputType({ file: 'dist/index.umd.js', format: 'umd' }),
+    addOutputType({ file: 'dist/index.esm.js', format: 'esm' }),
+    addOutputType({ file: 'dist/index.common.min.js', format: 'cjs', plugins: [terser()] }),
+    addOutputType({ file: 'dist/index.umd.min.js', format: 'umd', plugins: [terser()] }),
+    addOutputType({ file: 'dist/index.esm.min.js', format: 'esm', plugins: [terser()] })
+  ],
+  plugins: [
+    peerDepsExternal(),
+    alias({
+      entries: {
+        '@': `${__dirname}/src`,
+      }
+    }),
+    scss({
+      output: 'dist/index.css',
+      outputStyle: 'compressed'
+    }),
+    typescript(),
+    vue({
+      css: false
+    }),
+    minify({
+      cjs: 'index.common.min.js',
+      umd: 'index.umd.min.js',
+      esm: 'index.esm.min.js',
+    })
+  ]
+};

src/components/main.vue

@@ -174,5 +174,5 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "~@/sass/main.scss";
+  @import "src/sass/main.scss";
 </style>

src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode { }
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue { }
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+};

src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
+}

tsconfig.json

@@ -18,6 +18,9 @@
         "src/*"
       ]
     },
+    // "declaration": true,
+    // "emitDeclarationOnly": true,
+    // "outDir": "types",
     "lib": [
       "esnext",
       "dom",