feat(build): library build and demos with vite

Author: alvarosabu

.github/workflows/release.yml

@@ -21,8 +21,6 @@ jobs:
         run: npm run test --verbose
       - name: Build Library
         run: npm run build
-      - name: Build Types Declarations
-        run: npm run build:dts
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

demos/vue-3/src/App.vue

@@ -1,16 +1,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Toolbar from './components/Toolbar.vue';
-
-const components = {
-  Toolbar,
-};
 
 export default defineComponent({
   name: 'app',
-  components,
 });
 </script>
+
 <template>
   <div id="app">
     <Toolbar />

demos/vue-3/src/components/Console.vue

@@ -5,12 +5,9 @@
       <li class="rounded w-2 h-2 bg-yellow-300 inline-block mr-1"></li>
       <li class="rounded w-2 h-2 bg-green-500 inline-block"></li>
     </ul>
-    <pre
-      data-cy="form-values"
-      class="shadow-lg pt-4"
-      :data-formValues="jsonValues"
-      >{{ content }}</pre
-    >
+    <pre data-cy="form-values" class="pt-4" :data-formValues="jsonValues">{{
+      content
+    }}</pre>
   </div>
 </template>
 
@@ -32,5 +29,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style></style>

demos/vue-3/src/components/Icon.vue

@@ -9,10 +9,21 @@
       </h1>
     </div>
     <div class="right-nav">
-      <ul class="flex align-center">
-        <li v-for="nav in navs" :key="nav.name" class="ml-4">
-          <a :href="nav.href" class="hover:text-green-400 transition-colors">
-            <Icon :name="nav.icon" :alt="nav.name" />
+      <ul class="flex align-center text-xl">
+        <li class="ml-4">
+          <a
+            href="https://github.com/asigloo/vue-dynamic-forms"
+            class="text-gray-500 hover:text-green-400 transition-colors"
+          >
+            <codicon-github />
+          </a>
+        </li>
+        <li class="ml-4">
+          <a
+            href="https://vue-dynamic-forms.alvarosaburido.dev/"
+            class="text-gray-500 hover:text-green-400 transition-colors"
+          >
+            <ion-document-text-outline />
           </a>
         </li>
       </ul>
@@ -21,35 +32,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
-import Icon from './Icon.vue';
+import { computed, defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
 
-const components = {
-  Icon,
-};
-
 export default defineComponent({
   name: 'toolbar',
-  components,
   setup() {
     const route = useRoute();
     const title = computed(() => route.meta.title || 'Vue Dynamic Forms');
 
-    const navs = ref([
-      {
-        icon: 'github',
-        name: 'Repo',
-        href: 'https://github.com/asigloo/vue-dynamic-forms',
-      },
-      {
-        icon: 'docs',
-        name: 'Docs',
-        href: 'https://vue-dynamic-forms.alvarosaburido.dev/',
-      },
-    ]);
-
-    return { title, navs };
+    return { title };
   },
 });
 </script>

demos/vue-3/src/components/Toolbar.vue

@@ -3,7 +3,9 @@ import App from './App.vue';
 import './styles/main.css';
 import router from './router';
 
-import { createDynamicForms } from '/@/';
+/* import { createDynamicForms } from '/@'; */
+
+import { createDynamicForms } from '../../../dist/as-dynamic-forms.es';
 
 const VueDynamicForms = createDynamicForms({
   autoValidate: true,
@@ -17,6 +19,8 @@ const VueDynamicForms = createDynamicForms({
 
 export const app = createApp(App);
 
+console.log({ app });
+
 app.use(VueDynamicForms);
 
 app.use(router).mount('#app');

demos/vue-3/src/main.ts

@@ -5,8 +5,8 @@
   "author": "Alvaro Saburido <[email protected]>",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "build:lib": "vite build --config vite-lib.config.js",
+    "build:demo": "vite build",
+    "build": "vite build --config vite-lib.config.ts",
     "serve": "vite preview",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
@@ -21,20 +21,23 @@
     "test:watch": "vue-cli-service test:unit --verbose --no-cache --watchAll"
   },
   "main": "dist/as-dynamic-forms.cjs.js",
-  "module": "dist/as-dynamic-forms.esm-bundler.js",
-  "browser": "dist/as-dynamic-forms.esm.js",
-  "unpkg": "dist/as-dynamic-forms.global.js",
+  "module": "dist/as-dynamic-forms.es.js",
+  "browser": "dist/as-dynamic-forms.es.js",
+  "unpkg": "dist/as-dynamic-forms.iife.js",
+  "jsdelivr": "dist/as-dynamic-forms.iife.js",
+  "exports": {
+    ".": {
+      "import": "./dist/as-dynamic-forms.es.js",
+      "require": "./dist/as-dynamic-forms.umd.js"
+    }
+  },
   "dependencies": {
     "deep-clone": "^3.0.3",
     "deep-object-diff": "^1.1.0"
   },
   "devDependencies": {
+    "@iconify/json": "^1.1.373",
     "@microsoft/api-extractor": "^7.18.1",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
     "@types/jest": "^26.0.24",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
@@ -45,7 +48,6 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "27.0.6",
-    "chalk": "^4.1.1",
     "cypress": "^7.7.0",
     "eslint": "7.30.0",
     "eslint-plugin-prettier": "^3.4.0",
@@ -57,25 +59,22 @@
     "postcss": "^8.3.5",
     "prettier": "2.3.2",
     "rollup": "^2.53.0",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.35.2",
     "semantic-release": "17.4.4",
     "tailwindcss": "^2.2.4",
     "tailwindcss-animatecss": "^1.0.7",
     "ts-node": "^10.1.0",
     "typescript": "~4.3.5",
     "vite": "^2.4.1",
+    "vite-plugin-components": "^0.12.2",
+    "vite-plugin-dts": "^0.5.2",
+    "vite-plugin-icons": "^0.6.5",
     "vue": "^3.1.4",
     "vue-jest": "^5.0.0-alpha.8",
     "vue-router": "^4.0.1",
     "vue-select": "3.11.2"
   },
-  "jsdelivr": "dist/as-dynamic-forms.global.js",
   "types": "dist/as-dynamic-forms.d.ts"
 }