diff --git a/.gitignore b/.gitignore index 3496c97..a4b99fd 100644 --- a/.gitignore +++ b/.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 \ No newline at end of file diff --git a/package.json b/package.json index 1b54cd9..210b47d 100644 --- a/package.json +++ b/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, diff --git a/src/router.ts b/src/router.ts new file mode 100644 index 0000000..cacc01e --- /dev/null +++ b/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; diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..c972470 --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,13 @@ + + + diff --git a/src/widget.ts b/src/widget.ts new file mode 100644 index 0000000..3827fa9 --- /dev/null +++ b/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; diff --git a/src/widgets/router-widget.widget.vue b/src/widgets/router-widget.widget.vue new file mode 100644 index 0000000..0809671 --- /dev/null +++ b/src/widgets/router-widget.widget.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/widgets/test-one.widget.vue b/src/widgets/test-one.widget.vue new file mode 100644 index 0000000..031d5b5 --- /dev/null +++ b/src/widgets/test-one.widget.vue @@ -0,0 +1,24 @@ + + + + diff --git a/widget-rollup.config.js b/widget-rollup.config.js new file mode 100644 index 0000000..a350f88 --- /dev/null +++ b/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 `