feat: generate components as widgets

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 /testumdbuild
+/widgets-build
 
 # local env files
 .env.local
@@ -21,3 +22,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+*.config.js

package.json

@@ -26,15 +26,19 @@
     "build:types": "tsc --build tsconfigtypes.json",
     "build:es": "rimraf dist && cross-env NODE_ENV=production rollup --config rollup.config.js --format es && yarn build:types",
     "build:js": "rimraf dist && cross-env NODE_ENV=production rollup --config rollup.config.js && yarn build:types",
-    "build:js_css": "rimraf dist && cross-env NODE_ENV=production SEP_CSS=true rollup --config rollup.config.js && yarn build:types"
+    "build:js_css": "rimraf dist && cross-env NODE_ENV=production SEP_CSS=true rollup --config rollup.config.js && yarn build:types",
+    "build-widgets": "VUE_APP_WIDGET_BUILD=true rimraf widgets-build && cross-env NODE_ENV=production rollup --config widget-rollup.config.js --format es && yarn build:types"
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.10"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-typescript": "7.12.0",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
     "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^14.0.0",
@@ -54,9 +58,12 @@
     "autoprefixer": "^9.7.8",
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.2",
+    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "3.1.3",
     "eslint-plugin-vue": "^7.1.0",
+    "git-cz": "^4.7.4",
+    "husky": "^4.3.0",
     "lint-staged": "^10.4.2",
     "postcss": "^8.0.0",
     "postcss-import": "12.0.1",
@@ -68,17 +75,13 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.30.0",
     "rollup-plugin-css-only": "^2.1.0",
+    "rollup-plugin-output-manifest": "^2.0.0",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "0.28.0",
     "rollup-plugin-vue": "^6.0.0-beta.10",
     "typescript": "3.9.3",
-    "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
-    "husky": "^4.3.0",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "git-cz": "^4.7.4"
+    "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0"
   },
   "eslintConfig": {
     "root": true,

src/router.ts

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "./views/Home.vue";
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home
+  },
+  {
+    path: "/test-one",
+    name: "TestOne",
+    component: () =>
+      import(/* webpackChunkName: "one" */ "./widgets/test-one.widget.vue")
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+export default router;

src/views/Home.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="text-24 font-bold">I am Home Component</div>
+  <!-- <div><router-link to="/test-one">One</router-link></div>
+	<div><router-link to="/test-two">Two</router-link></div>
+	<div><router-link to="/test-three">Three</router-link></div> -->
+  <!-- <router-view/> -->
+</template>
+
+<script>
+export default {
+  name: "Home"
+};
+</script>

src/widget.ts

@@ -0,0 +1,35 @@
+import "./assets/styles/css/main.css";
+import { createApp } from "vue";
+
+declare let window: any;
+
+function loadWidget(
+  widgetCode: string,
+  containerId = "app",
+  props = { useRouter: false }
+) {
+  const widget = import(
+    /* webpackChunkName: "[index]" */ `./widgets/${widgetCode}.widget.vue`
+  );
+  if (widget) {
+    const node = document.getElementById(containerId);
+    if (node) {
+      widget.then(Component => {
+        const renderDOM = () => {
+          const app = createApp(Component.default);
+          if (props.useRouter) {
+            import("./router").then(mod => {
+              app.use(mod.default);
+              app.mount(`#${containerId}`);
+            });
+          } else {
+            app.mount(`#${containerId}`);
+          }
+        };
+        renderDOM();
+      });
+    }
+  }
+}
+
+window["loadWidget"] = loadWidget;

src/widgets/router-widget.widget.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+<script>
+export default {
+  name: "routerWidget",
+  setup() {
+    return {};
+  }
+};
+</script>
+<style lang="css">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

src/widgets/test-one.widget.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="font-bold text-24 p-16 text-white bg-red">I am Widget One</div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Test1",
+  setup() {
+    return {};
+  }
+});
+</script>
+<style lang="css">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

widget-rollup.config.js

@@ -0,0 +1,148 @@
+import path from "path";
+import vue from "rollup-plugin-vue";
+import alias from "@rollup/plugin-alias";
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import babel from "@rollup/plugin-babel";
+import PostCSS from "rollup-plugin-postcss";
+import simplevars from "postcss-simple-vars";
+import postcssImport from "postcss-import";
+import minimist from "minimist";
+import postcssUrl from "postcss-url";
+import url from "@rollup/plugin-url";
+import nested from "postcss-nested";
+import autoprefixer from "autoprefixer";
+import typescript from 'rollup-plugin-typescript2';
+import css from 'rollup-plugin-css-only';
+import outputManifest from 'rollup-plugin-output-manifest';
+
+const postcssConfigList = [
+  postcssImport({
+    resolve(id, basedir) {
+      // resolve alias @css, @import '@css/style.css'
+      // because @css/ has 5 chars
+      if (id.startsWith("@css")) {
+        return path.resolve("./src/assets/styles/css", id.slice(5));
+      }
+
+      // resolve node_modules, @import '~normalize.css/normalize.css'
+      // similar to how css-loader's handling of node_modules
+      if (id.startsWith("~")) {
+        return path.resolve("./node_modules", id.slice(1));
+      }
+
+      // resolve relative path, @import './components/style.css'
+      return path.resolve(basedir, id);
+    }
+  }),
+  simplevars,
+  nested,
+  postcssUrl({ url: "inline" }),
+  autoprefixer({
+    overrideBrowserslist: "> 1%, IE 6, Explorer >= 10, Safari >= 7"
+  })
+];
+
+const argv = minimist(process.argv.slice(2));
+
+const projectRoot = path.resolve(__dirname, ".");
+
+let postVueConfig = [
+  // Process only `<style module>` blocks.
+  PostCSS({
+    modules: {
+      generateScopedName: '[local]___[hash:base64:5]',
+    },
+    include: /&module=.*\.css$/,
+  }),
+  // Process all `<style>` blocks except `<style module>`.
+  PostCSS({ include: /(?<!&module=.*)\.css$/,
+    plugins:[
+      ...postcssConfigList
+    ]
+   }),
+  url({
+      include: [
+        '**/*.svg',
+        '**/*.png',
+        '**/*.gif',
+        '**/*.jpg',
+        '**/*.jpeg'
+      ]
+    }),
+]
+
+if(process.env.SEP_CSS){
+  postVueConfig = [css({ output: './widgets-build/bundle.css' }), ...postVueConfig]
+}
+
+const baseConfig = {
+  plugins: {
+    preVue: [
+      alias({
+        entries: [
+          {
+            find: "@",
+            replacement: `${path.resolve(projectRoot, "src")}`
+          }
+        ],
+        customResolver: resolve({
+          extensions: [".js", ".jsx", ".vue"]
+        })
+      })
+    ],
+    replace: {
+      "process.env.NODE_ENV": JSON.stringify("production"),
+      __VUE_OPTIONS_API__: JSON.stringify(true),
+      __VUE_PROD_DEVTOOLS__: JSON.stringify(false)
+    },
+    vue: {
+      target: "browser",
+      preprocessStyles: process.env.SEP_CSS ? false : true,
+      postcssPlugins: [...postcssConfigList]
+    },
+    postVue: [
+      ...postVueConfig
+    ],
+    babel: {
+      exclude: "node_modules/**",
+      extensions: [".js", ".jsx", ".vue"],
+      babelHelpers: "bundled"
+    }
+  }
+};
+
+const entriespath = {
+  index: "./src/widget.ts"
+};
+let buildFormats = [];
+
+const esConfig = {
+  input: entriespath,
+  output: {
+    compact: true,
+    format: "cjs",
+    dir: "widgets-build/cjs",
+    exports: "named",
+  },
+  plugins: [
+    typescript(),
+    replace(baseConfig.plugins.replace),
+    ...baseConfig.plugins.preVue,
+    vue(baseConfig.plugins.vue),
+    ...baseConfig.plugins.postVue,
+    babel({
+      ...baseConfig.plugins.babel,
+      presets: [["@babel/preset-env", { modules: false }]]
+    }),
+    commonjs(),
+    outputManifest(),
+  ]
+};
+
+buildFormats.push(esConfig);
+
+
+// Export config
+export default buildFormats;