@widget-js/cli 1.1.5 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widget-js/cli",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "main": "lib/index.js",
   "author": "Neo Fu",
   "license": "MIT",
@@ -8,7 +8,6 @@
   "bin": {
     "widget": "lib/index.js"
   },
-  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -22,20 +21,21 @@
     "@widget-js/ssh-config": "^4.2.1",
     "ali-oss": "^6.17.1",
     "archiver": "^5.3.1",
-    "chalk": "^5.2.0",
+    "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "commander": "^9.4.1",
     "consola": "^2.15.3",
     "ejs": "^3.1.8",
     "figlet": "^1.5.2",
     "gradient-string": "^2.0.2",
-    "inquirer": "^9.1.4",
-    "ora": "^6.2.0",
+    "inquirer": "^8.0.0",
+    "ora": "^5.4.1",
     "package-json": "^8.1.0",
     "semver": "^7.3.8",
     "shelljs": "^0.8.5",
     "ssh2-sftp-client": "^9.0.4",
-    "ws": "^8.11.0"
+    "ws": "^8.11.0",
+    "@widget-js/utils": "0.7.7"
   },
   "devDependencies": {
     "@types/ali-oss": "^6.16.7",
@@ -49,7 +49,7 @@
     "@types/ssh2-sftp-client": "^9.0.0",
     "jest": "^29.5.0",
     "pinst": "^3.0.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
     "rimraf": "^4.4.1",
     "ts-jest": "^29.0.3",
     "ts-loader": "^9.4.1",
@@ -57,15 +57,17 @@
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0"
+    "webpack-cli": "^5.0.0",
+    "@widget-js/core": "0.7.2"
   },
   "scripts": {
-    "build": "rimraf ./lib/ && tsup src/index.ts --dts --format esm,cjs",
-    "watch": "tsup src/index.ts --dts --format esm,cjs --watch",
+    "build": "rimraf ./lib/ && tsup src/index.ts --format cjs",
+    "watch": "tsup src/index.ts --format cjs --watch",
     "build:run": "npm run build && npm run widget",
     "prebuild": "",
     "widget": "node ./lib/index.js",
     "widget:ftp": "node ./lib/index.js release -t ftp",
+    "widget:create": "npm run build && node ./lib/index.js create",
     "pnpm:publish": "pnpm publish --no-git-checks"
   }
 }

package/src/createWidget.ts

@@ -1,7 +1,6 @@
 import path from "path";
 import fs from "fs";
 import consola from "consola";
-import {fileURLToPath} from "url";
 import promptChecker from "./promts/promptChecker";
 import {paramCase, snakeCase} from "change-case";
 import inquirer from "inquirer";
@@ -9,213 +8,219 @@ import ejs from "ejs";
 import shell from "shelljs";
 import exit from "./utils.js";
 import chalk from "chalk";
+import {WidgetUtils} from "@widget-js/utils";
+import prettier, {BuiltInParserName} from "prettier";
+
+// import vm from "vm";
+
 interface RenderOptions {
-    name: string,
-    snakeCaseName: string,
-    paramCaseName: string,
-    packageName: string,
-    title: string,
-    configurable: string,
-    width: number,
-    height: number,
-    maxWidth: number,
-    minHeight: number,
-    maxHeight: number,
-    minWidth: number
+  name: string,
+  snakeCaseName: string,
+  paramCaseName: string,
+  packageName: string,
+  widgetName: string,
+  title: string,
+  configurable: string,
+  width: number,
+  height: number,
+  maxWidth: number,
+  minHeight: number,
+  maxHeight: number,
+  minWidth: number,
 }
-export default async function createWidget() {
-    let widgetJson = path.join(process.cwd(), "widget.json");
-    if (!fs.existsSync(widgetJson)) {
-        consola.error("没有在根目录找到widget.json文件")
-        exit();
-    }
-
-    let widgetPackage = JSON.parse(fs.readFileSync(widgetJson).toString());
 
-    let widgetFolder = path.join(process.cwd(), "./src/widgets");
-    let devOptions = widgetPackage["devOptions"] ?? {};
-    if (devOptions["folder"]) {
-        widgetFolder = devOptions["folder"];
-        consola.info(`组件路径：${widgetFolder}`);
+export default async function createWidget() {
+  let widgetPackage = await WidgetUtils.scanWidgetPackage(process.cwd());
+  if (!widgetPackage) {
+    consola.error("widget.ts or widget.json not found")
+    return;
+  }
+  let widgetFolder = path.join(process.cwd(), "./src/widgets");
+  let devOptions = widgetPackage["devOptions"] ?? {};
+  if (devOptions["folder"]) {
+    widgetFolder = devOptions["folder"];
+    consola.info(`组件路径：${widgetFolder}`);
+  } else {
+    consola.info(`没有配置devOptions.folder，使用默认路径${widgetFolder}`);
+  }
+
+  if (!fs.existsSync(widgetFolder)) {
+    fs.mkdirSync(widgetFolder, {recursive: true});
+  }
+
+  const getMiddleValue = (arr: number[]) => {
+    if (arr.length === 1) {
+      return arr[0];
+    } else if (arr.length === 2) {
+      return Math.max(...arr);
     } else {
-        consola.info(`没有配置devOptions.folder，使用默认路径${widgetFolder}`);
-    }
-
-    if (!fs.existsSync(widgetFolder)) {
-        fs.mkdirSync(widgetFolder, {recursive: true});
+      const max = Math.max(...arr);
+      const min = Math.min(...arr);
+      const sum = arr[0] + arr[1] + arr[2];
+      return sum - max - min;
     }
-
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = path.dirname(__filename);
-
-    const getMiddleValue = (arr:number[]) => {
-        if (arr.length === 1) {
-            return arr[0];
-        } else if (arr.length === 2) {
-            return Math.max(...arr);
-        } else {
-            const max = Math.max(...arr);
-            const min = Math.min(...arr);
-            const sum = arr[0] + arr[1] + arr[2];
-            return sum - max - min;
-        }
+  }
+
+  let name = await promptChecker({
+    type: "input",
+    name: 'name',
+    message: chalk.blue("请输入组件名(大驼峰式)，如：CountdownClock")
+  }, (answer) => {
+    const name = answer.name;
+    if (name == null || name === '') {
+      consola.log(chalk.red('组件名不能为空'));
+      return false;
     }
-
-    let name = await promptChecker({
-        type: "input",
-        name: 'name',
-        message: chalk.blue("请输入组件名(大驼峰式)，如：CountdownClock")
-    }, (answer) => {
-        const name = answer.name;
-        if (name == null || name === '') {
-            consola.log(chalk.red('组件名不能为空'));
-            return false;
-        }
-        return true;
-    })
-
-    consola.log(chalk.green(name))
-
-    let title = await promptChecker({
-        type: "input",
-        name: 'title',
-        message: chalk.blue("请输入组件标题，如：倒计时")
-    })
-    consola.log(chalk.green(title))
-    let answerW = await promptChecker({
-        type: "checkbox",
-        name: 'w',
-        message: chalk.blue("请选择组件宽度，最多选3个，例如选中2,4,6，代表组件最小宽为2，默认宽为4，最大宽为6，单选代表不可拉伸"),
-        choices: [1, 2, 3, 4, 5, 6]
-    }, (answer) => {
-        if (answer.w.length === 0) {
-            consola.log(chalk.red('宽度必须选择'));
-            return false;
-        }
-
-        if (answer.w.length > 3) {
-            consola.log(chalk.red('宽度最多选择3个'));
-            return false;
-        }
-        return true;
-    })
-    consola.log(chalk.green(answerW))
-
-    let answerH = await promptChecker({
-        type: "checkbox",
-        name: 'h',
-        message: chalk.blue("请选择组件高度，最多选3个，例如选中1,2，代表组件最小高为1，默认高为2，最大高为2，单选代表不可拉伸"),
-        choices: [1, 2, 3, 4, 5, 6]
-    }, (answer) => {
-        if (answer.h.length === 0) {
-            consola.log(chalk.red('高度必须选择'));
-            return false;
-        }
-
-        if (answer.h.length > 3) {
-            consola.log(chalk.red('高度最多选择3个'));
-            return false;
-        }
-        return true;
-    })
-
-    consola.log(chalk.green(answerH))
-
-    let configurable = await promptChecker({
-        type: "confirm",
-        name: 'configurable',
-        message: chalk.blue("组件是否可配置，例如修改背景颜色，字体大小等")
-    })
-
-    consola.log(chalk.green(configurable))
-
-    const width = getMiddleValue(answerW);
-    const height = getMiddleValue(answerH);
-    const minWidth = Math.min(...answerW);
-    const maxWidth = Math.max(...answerW);
-    const minHeight = Math.min(...answerH);
-    const maxHeight = Math.max(...answerH);
-    const snakeCaseName = snakeCase(name);
-    const paramCaseName = paramCase(name);
-    const packageName = "com.wisdom.widgets." + snakeCaseName;
-
-    const widgetDir = path.join(widgetFolder, paramCaseName)
-    if (!fs.existsSync(widgetDir)) {
-        fs.mkdirSync(widgetDir);
-    } else {
-        let answer = await inquirer.prompt([{
-            type: 'confirm',
-            name: 'override',
-            message: chalk.red('组件名已存在，是否继续?')
-        }])
-        if (!answer.override) {
-            exit()
-        }
+    return true;
+  })
+
+  consola.log(chalk.green(name))
+
+  let title = await promptChecker({
+    type: "input",
+    name: 'title',
+    message: chalk.blue("请输入组件标题，如：倒计时")
+  })
+  consola.log(chalk.green(title))
+  let answerW = await promptChecker({
+    type: "checkbox",
+    name: 'w',
+    message: chalk.blue("请选择组件宽度，最多选3个，例如选中2,4,6，代表组件最小宽为2，默认宽为4，最大宽为6，单选代表不可拉伸"),
+    choices: [1, 2, 3, 4, 5, 6]
+  }, (answer) => {
+    if (answer.w.length === 0) {
+      consola.log(chalk.red('宽度必须选择'));
+      return false;
     }
 
-    const renderOptions:RenderOptions = {
-        name: name,
-        snakeCaseName: snakeCaseName,
-        paramCaseName: paramCaseName,
-        packageName: packageName,
-        title: title,
-        configurable: configurable,
-        width: width,
-        height: height,
-        maxWidth: maxWidth,
-        minHeight: minHeight,
-        maxHeight: maxHeight,
-        minWidth: minWidth
+    if (answer.w.length > 3) {
+      consola.log(chalk.red('宽度最多选择3个'));
+      return false;
     }
-
-    function renderToFile(templateFile:string, outputFile:string, renderOptions:RenderOptions) {
-        const defineTemplatePath = path.join(__dirname, '../template', templateFile)
-        let defineTemplate = fs.readFileSync(defineTemplatePath, 'utf8');
-        fs.writeFileSync(outputFile, ejs.render(defineTemplate, renderOptions))
+    return true;
+  })
+  consola.log(chalk.green(answerW))
+
+  let answerH = await promptChecker({
+    type: "checkbox",
+    name: 'h',
+    message: chalk.blue("请选择组件高度，最多选3个，例如选中1,2，代表组件最小高为1，默认高为2，最大高为2，单选代表不可拉伸"),
+    choices: [1, 2, 3, 4, 5, 6]
+  }, (answer) => {
+    if (answer.h.length === 0) {
+      consola.log(chalk.red('高度必须选择'));
+      return false;
     }
 
-    const widgetDefineFile = path.resolve(widgetDir, `${name}.widget.ts`)
-    const widgetFile = path.resolve(widgetDir, `${name}Widget.vue`);
-    const widgetViewFile = path.resolve(widgetDir, `${name}WidgetView.vue`)
-    const widgetRoutesFile = path.resolve(widgetDir, `${name}WidgetRoutes.ts`)
-
-    renderToFile('WidgetDefine.ejs', widgetDefineFile, renderOptions);
-    renderToFile('Widget.ejs', widgetFile, renderOptions);
-    renderToFile('WidgetView.ejs', widgetViewFile, renderOptions);
-    renderToFile('WidgetRoutes.ejs', widgetRoutesFile, renderOptions);
-    if (configurable) {
-        const configFile = path.resolve(widgetDir, `${name}ConfigView.vue`)
-        renderToFile('WidgetConfig.ejs', configFile, renderOptions);
+    if (answer.h.length > 3) {
+      consola.log(chalk.red('高度最多选择3个'));
+      return false;
     }
-    if (devOptions["useStorybook"]) {
-        const storiesFile = path.resolve(widgetDir, `${name}Widget.stories.ts`)
-        renderToFile('stories.ejs', storiesFile, renderOptions);
+    return true;
+  })
+
+  consola.log(chalk.green(answerH))
+
+  let configurable = await promptChecker({
+    type: "confirm",
+    name: 'configurable',
+    message: chalk.blue("组件是否可配置，例如修改背景颜色，字体大小等")
+  })
+
+  consola.log(chalk.green(configurable))
+
+  const width = getMiddleValue(answerW);
+  const height = getMiddleValue(answerH);
+  const minWidth = Math.min(...answerW);
+  const maxWidth = Math.max(...answerW);
+  const minHeight = Math.min(...answerH);
+  const maxHeight = Math.max(...answerH);
+  const snakeCaseName = snakeCase(name);
+  const paramCaseName = paramCase(name);
+
+  const widgetName = widgetPackage.name + '.' + snakeCaseName;
+
+  const widgetDir = path.join(widgetFolder, paramCaseName)
+  if (!fs.existsSync(widgetDir)) {
+    fs.mkdirSync(widgetDir);
+  } else {
+    let answer = await inquirer.prompt([{
+      type: 'confirm',
+      name: 'override',
+      message: chalk.red('组件名已存在，是否继续?')
+    }])
+    if (!answer.override) {
+      exit()
     }
-
+  }
+
+  const renderOptions: RenderOptions = {
+    name: name,
+    snakeCaseName: snakeCaseName,
+    paramCaseName: paramCaseName,
+    packageName: widgetPackage.name,
+    widgetName: widgetName,
+    title: title,
+    configurable: configurable,
+    width: width,
+    height: height,
+    maxWidth: maxWidth,
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    minWidth: minWidth
+  }
+
+  function renderToFile(templateFile: string, outputFile: string, parser: BuiltInParserName, renderOptions: RenderOptions) {
+    const defineTemplatePath = path.join(__dirname, '../template', templateFile)
+    let defineTemplate = fs.readFileSync(defineTemplatePath, 'utf8');
+    // Format the EJS code using Prettier
+
+    let code = ejs.render(defineTemplate, renderOptions);
+    let fileFormat = outputFile.split('.');
+    const formattedEJSCode = prettier.format(code, {
+      parser: parser, tabWidth: 2, singleQuote: true
+    });
+    fs.writeFileSync(outputFile, formattedEJSCode)
+  }
+
+  const widgetDefineFile = path.resolve(widgetDir, `${name}.widget.ts`)
+  const widgetFile = path.resolve(widgetDir, `${name}Widget.vue`);
+  const widgetViewFile = path.resolve(widgetDir, `${name}WidgetView.vue`)
+  const widgetRoutesFile = path.resolve(widgetDir, `${name}WidgetRoutes.ts`)
+
+  renderToFile('WidgetDefine.ejs', widgetDefineFile, 'typescript', renderOptions);
+  renderToFile('Widget.ejs', widgetFile, 'vue', renderOptions);
+  renderToFile('WidgetView.ejs', widgetViewFile, 'vue', renderOptions);
+  renderToFile('WidgetRoutes.ejs', widgetRoutesFile, 'typescript', renderOptions);
+  if (configurable) {
+    const configFile = path.resolve(widgetDir, `${name}ConfigView.vue`)
+    renderToFile('WidgetConfig.ejs', configFile, 'vue', renderOptions)
+    ;
+  }
 // 注册路由
-    const routeFile = path.join(widgetFolder, 'widget-router.ts');
-    let routeContent;
-    if (fs.existsSync(routeFile)) {
-        routeContent = fs.readFileSync(routeFile, 'utf8');
-    } else {
-        routeContent = fs.readFileSync(path.join(__dirname, "../template/widget-router.ts"), 'utf8');
-    }
-    const importRouteStr = `import ${name}WidgetRoutes from "./${paramCaseName}/${name}WidgetRoutes";`
-    const routeStr = `...${name}WidgetRoutes,`
-    if (!routeContent.includes(importRouteStr)) {
-        routeContent = routeContent.replaceAll("//FBI WANING! IMPORT PLACE", `${importRouteStr}\n//FBI WANING! IMPORT PLACE`)
-    }
-    if (!routeContent.includes(routeStr)) {
-        routeContent = routeContent.replaceAll("//FBI WANING! ROUTE PLACE", `${routeStr}\n    //FBI WANING! ROUTE PLACE`)
-    }
-
-    fs.writeFileSync(routeFile, routeContent)
+  const routeFile = path.join(widgetFolder, 'widget-router.ts');
+  let routeContent;
+  if (fs.existsSync(routeFile)) {
+    routeContent = fs.readFileSync(routeFile, 'utf8');
+  } else {
+    routeContent = fs.readFileSync(path.join(__dirname, "../template/widget-router.ts"), 'utf8');
+  }
+  const importRouteStr = `import ${name}WidgetRoutes from "./${paramCaseName}/${name}WidgetRoutes";`
+  const routeStr = `...${name}WidgetRoutes,`
+  if (!routeContent.includes(importRouteStr)) {
+    routeContent = routeContent.replaceAll("//FBI WANING! IMPORT PLACE", `${importRouteStr}\n//FBI WANING! IMPORT PLACE`)
+  }
+  if (!routeContent.includes(routeStr)) {
+    routeContent = routeContent.replaceAll("//FBI WANING! ROUTE PLACE", `${routeStr}\n    //FBI WANING! ROUTE PLACE`)
+  }
+
+  fs.writeFileSync(routeFile, routeContent)
 
 //添加到版本控制
-    let gitAdd = `git add ${widgetDir}`;
-    consola.info(chalk.grey(gitAdd))
-    shell.exec(gitAdd);
-    consola.log("=================")
-    consola.info(`已创建组件：${widgetDir}`)
-    consola.success("Happy coding!")
+  let gitAdd = `git add ${widgetDir}`;
+  consola.info(chalk.grey(gitAdd))
+  shell.exec(gitAdd);
+  consola.log("=================")
+  consola.info(`已创建组件：${widgetDir}`)
+  consola.success("Happy coding!")
 }

package/src/index.ts

@@ -3,14 +3,11 @@ import fs from "fs";
 import path from "path";
 import * as process from "process";
 
-import {fileURLToPath} from "url";
 import figlet from "figlet";
 import gradient from "gradient-string";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
 //
-const packageJsonPath = path.join(__dirname, "../package.json");
+const packageJsonPath = path.join(process.cwd(), "package.json");
 let cliPackage = JSON.parse(fs.readFileSync(packageJsonPath).toString());
 
 console.log(gradient.pastel.multiline(figlet.textSync("widget-cli", {horizontalLayout: "full"})));

package/template/Widget.ejs

@@ -2,11 +2,8 @@
     <!-- TODO 这里只写组件内容，不做自定义数据、业务处理   -->
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 
-export default {
-    name: "<%= name %>Widget",
-}
 </script>
 
 <style scoped>

package/template/WidgetConfig.ejs

@@ -1,5 +1,4 @@
 <template>
-
     <widget-edit-dialog :widget-params="widgetParams" :option="widgetConfigOption"
                         :widget-data="widgetData"
                         @confirm="onSaveClick()">
@@ -9,35 +8,24 @@
     </widget-edit-dialog>
 </template>
 
-<script lang="ts">
-
-import <%= name %>Widget from "./<%= name%>Widget.vue";
-import {useWidget, WidgetConfigOption, WidgetEditDialog} from "@widget-js/vue3";
+<script lang="ts" setup>
+import {useWidget, WidgetConfigOption,WidgetEditDialog} from "@widget-js/vue3";
 import {WidgetData, WidgetDataApi} from "@widget-js/core";
 import {reactive} from "vue";
 
-export default {
-  name: "",
-  components: {<%= name %>Widget, WidgetEditDialog},
-  setup() {
-    const {widgetData, widgetParams} = useWidget(WidgetData)
+const {widgetData, widgetParams} = useWidget(WidgetData)
 
-    //修改成需要设置组件参数配置
-    const widgetConfigOption = reactive(new WidgetConfigOption({
-      custom: true,
-      backgroundColor: true,
-      borderRadius: true,
-      preview: false
-    }));
+//修改成需要设置组件参数配置
+const widgetConfigOption = reactive(new WidgetConfigOption({
+    custom: true,
+    backgroundColor: true,
+    borderRadius: true,
+    preview: false
+}));
 
-    return {widgetData, widgetParams, widgetConfigOption}
-  },
-  methods: {
-    async onSaveClick() {
-      await WidgetDataApi.save(this.widgetData);
-      window.close();
-    }
-  }
+const onSaveClick = async () => {
+    await WidgetDataApi.save(widgetData);
+    window.close();
 }
 </script>
 

package/template/WidgetDefine.ejs

@@ -1,41 +1,40 @@
 import {Widget, WidgetKeyword} from "@widget-js/core";
 //TODO 修改组件信息，标题，描述，关键词
-const name = "cn.widgetjs.widgets.<%= snakeCaseName%>";
+const name = "<%= widgetName %>";
 //组件标题
-const title = {"zh-CN": "<%= title%>"};
+const title = {"zh-CN": "<%= title %>"};
 //组件描述
 const description = {"zh-CN": ""};
 //组件关键词
 const keywords = [WidgetKeyword.RECOMMEND];
 //组件路由地址
-const url = "/widget/<%= snakeCaseName%>";
+const url = "/widget/<%= snakeCaseName %>";
 //配置页路由地址
-const configUrl = <% if (configurable) { %>"/widget/config/<%= snakeCaseName%>"<% } else { %>undefined<% }  %>;
+const configUrl = <% if (configurable) { %>"/widget/config/<%= snakeCaseName %>"<% } else { %>undefined<% } %>;
 //组件关键词
 const <%= name %>WidgetDefine = new Widget({
-  name: name,
-  title: title,
-  description: description,
-  keywords: keywords,
-  lang: "zh-CN",
-  width: <%= width %>,
-  height: <%= height %>,
-  minWidth: <%= minWidth %>,
-  maxWidth: <%= maxWidth %>,
-  minHeight: <%= minHeight %>,
-  maxHeight: <%= maxHeight %>,
-  routes: [
-    {
-      url: url,
-      name: 'index'
-    },
-<% if (configurable) { %>
-    {
-      url: configUrl,
-      name: 'config'
-    },
-<% }  %>
-  ]
+name: name,
+title: title,
+description: description,
+keywords: keywords,
+lang: "zh-CN",
+width: <%= width %>,
+height: <%= height %>,
+minWidth: <%= minWidth %>,
+maxWidth: <%= maxWidth %>,
+minHeight: <%= minHeight %>,
+maxHeight: <%= maxHeight %>,
+routes: [
+{
+url: url,
+name: 'index'
+},
+<% if (configurable) { %> {
+url: configUrl,
+name: 'config'
+},
+<% } %>
+]
 })
 
 export default <%= name %>WidgetDefine;

package/template/WidgetRoutes.ejs

@@ -9,12 +9,12 @@ const <%= name %>WidgetRoutes = [
     {
         path: url,
         name: `${name}`,
-        component: () => import(/* webpackChunkName: "<%= packageName %>" */ './<%= name %>WidgetView.vue')
+        component: () => import(/* webpackChunkName: "<%= widgetName %>" */ './<%= name %>WidgetView.vue')
     },
     {
         path: configUrl,
         name: `${name}.config`,
-        component: () => import(/* webpackChunkName: "<%= packageName %>.config" */ './<%= name %>ConfigView.vue')
+        component: () => import(/* webpackChunkName: "<%= widgetName %>.config" */ './<%= name %>ConfigView.vue')
     }
 ]
 <% } else { %>
@@ -22,7 +22,7 @@ const <%= name %>WidgetRoutes = [
     {
         path: url,
         name: `${name}`,
-        component: () => import(/* webpackChunkName: "<%= packageName %>" */ './<%= name %>WidgetView.vue')
+        component: () => import(/* webpackChunkName: "<%= widgetName %>" */ './<%= name %>WidgetView.vue')
     }
 ]
 <% }  %>