chore(build): update build config to drop vue2 support

bimdata · Jun 26, 2023 · 06d8bbd · 06d8bbd
1 parent 6ec8fdb
commit 06d8bbd
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 2,498 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,6 @@
     "dist/*",
     "components.js",
     "plugin.js",
-    "plugin-vue3.js",
     "screenshots/*"
   ],
   "scripts": {
@@ -23,10 +22,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.19.4",
     "@bimdata/typescript-fetch-api-client": "9.5.0",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-node-resolve": "^14.1.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
@@ -52,8 +48,7 @@
     "rollup-plugin-css-only": "2.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue2": "npm:rollup-plugin-vue@^5.1.9",
-    "rollup-plugin-vue3": "npm:rollup-plugin-vue@^6.0.0",
+    "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.55.0",
     "sass-loader": "^13.1.0",
     "semantic-release": "^19.0.5",

diff --git a/plugin-vue3.js b/plugin-vue3.js
diff --git a/plugin.js b/plugin.js
@@ -8,7 +8,7 @@ import * as Directives from "./dist/js/BIMDataDirectives/index.js";
  */
 const pluginFactory = cfg => {
   return {
-    install(Vue) {
+    install(app) {
       // COMPONENTS
       Object.entries(Components).forEach(([componentName, component]) => {
         if (
@@ -25,14 +25,14 @@ const pluginFactory = cfg => {
           !cfg.includedComponents ||
           cfg.includedComponents.includes(componentName)
         ) {
-          Vue.component(componentName, component);
+          app.component(componentName, component);
         }
       });
 
       // DIRECTIVES
       if (!cfg || cfg.directives !== false) {
         Object.entries(Directives).forEach(([directiveName, directive]) =>
-          Vue.directive(directiveName.split("BIMData")[1], directive)
+          app.directive(directiveName.split("BIMData")[1], directive)
         );
       }
     },

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,14 +1,10 @@
 import { terser } from "rollup-plugin-terser";
-import vue2 from "rollup-plugin-vue2";
-import vue3 from "rollup-plugin-vue3";
+import vue from "rollup-plugin-vue";
 import css from "rollup-plugin-css-only";
 import copy from "rollup-plugin-copy";
 import replace from "@rollup/plugin-replace";
 import postcss from "rollup-plugin-postcss";
-import alias from "@rollup/plugin-alias";
 import image from "@rollup/plugin-image";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
 
 module.exports = [
   ...getDirectivesConfiguration(),
@@ -20,7 +16,6 @@ module.exports = [
 function getDirectivesConfiguration() {
   return [
     {
-      // vue2
       input: ["src/BIMDataDirectives/index.js"],
       plugins: [terser()],
       output: {
@@ -29,24 +24,13 @@ function getDirectivesConfiguration() {
       },
       external: ["vue"],
     },
-    {
-      // vue3
-      input: ["src/BIMDataDirectives/vue3/index.js"],
-      plugins: [terser()],
-      output: {
-        dir: "dist/js/BIMDataDirectives/vue3",
-        format: "es",
-      },
-      external: ["vue"],
-    },
   ];
 }
 
 // build ALL COMPONENTS
 function getAllComponentsBundleConfiguration() {
   return [
     {
-      // Vue 2
       input: ["src/BIMDataComponents/index.js"],
       output: {
         dir: "dist/js/BIMDataComponents",
@@ -94,37 +78,7 @@ function getAllComponentsBundleConfiguration() {
             },
           ],
         }),
-        vue2({
-          template: { isProduction: true },
-          css: false,
-        }),
-        image(),
-        terser(),
-      ],
-    },
-    {
-      // Vue 3
-      input: ["src/BIMDataComponents/index.js"],
-      output: {
-        dir: "dist/js/BIMDataComponents/vue3",
-        format: "es",
-      },
-      external: ["vue"],
-      plugins: [
-        alias({
-          entries: [
-            {
-              find: /BIMDataDirectives\/(?!vue3\/)/,
-              replacement: "BIMDataDirectives/vue3/",
-            },
-          ],
-        }),
-        replace({
-          "~@/assets": "node_modules/@bimdata/design-system/dist",
-          delimiters: ["", ""],
-          preventAssignment: true,
-        }),
-        vue3({
+        vue({
           template: { isProduction: true },
           preprocessStyles: true,
         }),
@@ -141,7 +95,6 @@ function getSingleSmartComponentConfigurations() {
   const componentNames = ["BIMDataFileManager"];
 
   return [
-    // Build Vue 2.x compatible components
     ...componentNames.map(componentName => ({
       input: [
         `src/BIMDataSmartComponents/${componentName}/${componentName}.vue`,
@@ -150,46 +103,13 @@ function getSingleSmartComponentConfigurations() {
         file: `dist/js/BIMDataSmartComponents/${componentName}.js`,
         format: "esm",
       },
-      external: ["vue"],
       plugins: [
         replace({
           "~@/assets": "node_modules/@bimdata/design-system/dist",
           delimiters: ["", ""],
           preventAssignment: true,
         }),
-        vue2({
-          template: { isProduction: true },
-        }),
-        resolve({ browser: true, preferBuiltins: false }),
-        commonjs(),
-        image(),
-        terser(),
-      ],
-    })),
-    // Build Vue 3.x compatible components
-    ...componentNames.map(componentName => ({
-      input: [
-        `src/BIMDataSmartComponents/${componentName}/${componentName}.vue`,
-      ],
-      output: {
-        file: `dist/js/BIMDataSmartComponents/vue3/${componentName}.js`,
-        format: "esm",
-      },
-      plugins: [
-        alias({
-          entries: [
-            {
-              find: /BIMDataDirectives\//,
-              replacement: "BIMDataDirectives/vue3/",
-            },
-          ],
-        }),
-        replace({
-          "~@/assets": "node_modules/@bimdata/design-system/dist",
-          delimiters: ["", ""],
-          preventAssignment: true,
-        }),
-        vue3({
+        vue({
           template: { isProduction: true },
           preprocessStyles: true,
         }),
@@ -243,7 +163,6 @@ function getSingleComponentConfigurations() {
   ];
 
   return [
-    // Build Vue 2.x compatible components
     ...componentNames.map(componentName => ({
       input: [`src/BIMDataComponents/${componentName}/${componentName}.vue`],
       output: {
@@ -257,36 +176,7 @@ function getSingleComponentConfigurations() {
           delimiters: ["", ""],
           preventAssignment: true,
         }),
-        vue2({
-          template: { isProduction: true },
-        }),
-        image(),
-        terser(),
-      ],
-    })),
-    // Build Vue 3.x compatible components
-    ...componentNames.map(componentName => ({
-      input: [`src/BIMDataComponents/${componentName}/${componentName}.vue`],
-      output: {
-        file: `dist/js/BIMDataComponents/vue3/${componentName}.js`,
-        format: "esm",
-      },
-      external: ["vue"],
-      plugins: [
-        alias({
-          entries: [
-            {
-              find: /BIMDataDirectives\/(?!vue3\/)/,
-              replacement: "BIMDataDirectives/vue3/",
-            },
-          ],
-        }),
-        replace({
-          "~@/assets": "node_modules/@bimdata/design-system/dist",
-          delimiters: ["", ""],
-          preventAssignment: true,
-        }),
-        vue3({
+        vue({
           template: { isProduction: true },
           preprocessStyles: true,
         }),

diff --git a/src/BIMDataDirectives/click-away.js b/src/BIMDataDirectives/click-away.js
@@ -1,5 +1,5 @@
 export default {
-  bind(el, binding) {
+  beforeMount(el, binding) {
     if (typeof binding.value !== "function") {
       throw Error(
         `click away directive needs function, got ${typeof binding.value}`
@@ -13,7 +13,7 @@ export default {
     };
     window.addEventListener(binding.arg || "click", el.clickAwayHandler, true);
   },
-  unbind(el, binding) {
+  unmounted(el, binding) {
     window.removeEventListener(
       binding.arg || "click",
       el.clickAwayHandler,

diff --git a/src/BIMDataDirectives/click-input-away.js b/src/BIMDataDirectives/click-input-away.js
@@ -1,5 +1,5 @@
 export default {
-  bind(el, binding) {
+  beforeMount(el, binding) {
     if (typeof binding.value !== "function") {
       throw Error(
         `click away directive needs function, got ${typeof binding.value}`
@@ -13,7 +13,7 @@ export default {
     };
     window.addEventListener("mousedown", el.clickAwayHandler, true);
   },
-  unbind(el) {
+  unmounted(el) {
     window.removeEventListener("mousedown", el.clickAwayHandler, true);
     delete el.clickAwayHandler;
   },

diff --git a/src/BIMDataDirectives/copy.js b/src/BIMDataDirectives/copy.js
@@ -1,7 +1,7 @@
 let clickListener = null;
 
 export default {
-  bind(el, binding) {
+  beforeMount(el, binding) {
     const div = document.createElement("button");
     div.textContent = "copy";
     div.style.width = "45px";
@@ -29,7 +29,7 @@ export default {
     div.addEventListener("click", clickListener);
     el.prepend(div);
   },
-  unbind(el) {
+  unmounted(el) {
     const div = [...el.children].find(child =>
       child.classList.contains("bimdata-ds__demo")
     );

diff --git a/src/BIMDataDirectives/highlight.js b/src/BIMDataDirectives/highlight.js
@@ -5,10 +5,10 @@ import Normalizer from "prismjs/plugins/normalize-whitespace/prism-normalize-whi
 const normalizer = new Normalizer();
 
 export default {
-  bind(el, binding, vnode) {
+  beforeMount(el, binding, vnode) {
     highlight(el, binding, vnode);
   },
-  componentUpdated(el, binding, vnode) {
+  updated(el, binding, vnode) {
     highlight(el, binding, vnode);
   },
 };

diff --git a/src/BIMDataDirectives/vue3/click-away.js b/src/BIMDataDirectives/vue3/click-away.js
diff --git a/src/BIMDataDirectives/vue3/click-input-away.js b/src/BIMDataDirectives/vue3/click-input-away.js