@widget-js/cli 1.0.0

package/.idea/cli.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/cli.iml" filepath="$PROJECT_DIR$/.idea/cli.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../../.." vcs="Git" />
+  </component>
+</project>

package/bin/widget.js

@@ -0,0 +1,217 @@
+import inquirer from "inquirer";
+import {chalk} from "@vue/cli-shared-utils";
+import fs from "fs";
+import path from "path";
+import {snakeCase, paramCase} from "change-case";
+import {fileURLToPath} from 'url';
+import shell from 'shelljs';
+import promptChecker from "../lib/promts/promptChecker.js";
+import {exit, exitProcess} from "@vue/cli-shared-utils/lib/exit.js";
+import ejs from "ejs";
+import consola from "consola";
+
+
+let widgetJson = path.join(process.cwd(), "widget.json");
+if (!fs.existsSync(widgetJson)) {
+    consola.error("没有在根目录找到widget.json文件")
+    exit();
+}
+
+let widgetPackage = JSON.parse(fs.readFileSync(widgetJson));
+
+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 __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+Array.prototype.max = function () {
+    return Math.max.apply(null, this);
+};
+
+Array.prototype.min = function () {
+    return Math.min.apply(null, this);
+};
+
+const getMiddleValue = (arr) => {
+    if (arr.length === 1) {
+        return arr[0];
+    } else if (arr.length === 2) {
+        return arr.max();
+    } else {
+        const max = arr.max();
+        const min = arr.min();
+        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;
+    }
+    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 = answerW.min();
+const maxWidth = answerW.max();
+const minHeight = answerH.min();
+const maxHeight = answerH.max();
+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) {
+        exitProcess();
+    }
+}
+
+const 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
+}
+
+function renderToFile(templateFile, outputFile, renderOptions) {
+    const defineTemplatePath = path.join(__dirname, '../template', templateFile)
+    let defineTemplate = fs.readFileSync(defineTemplatePath, 'utf8');
+    fs.writeFileSync(outputFile, ejs.render(defineTemplate, renderOptions))
+}
+
+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 (devOptions["useStorybook"]) {
+    const storiesFile = path.resolve(widgetDir, `${name}Widget.stories.ts`)
+    renderToFile('stories.ejs', storiesFile, 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)
+
+//添加到版本控制
+let gitAdd = `git add ${widgetDir}`;
+consola.info(chalk.grey(gitAdd))
+shell.exec(gitAdd);
+consola.log("=================")
+consola.info(`已创建组件：${widgetDir}`)
+consola.success("Happy coding!")
+

package/lib/promts/promptChecker.js

@@ -0,0 +1,15 @@
+import inquirer from "inquirer";
+
+const promptChecker = async (prompt, checker) => {
+  let answer = await inquirer.prompt([prompt]);
+  if (checker) {
+    if (checker(answer)) {
+      return answer[prompt.name];
+    } else {
+      return promptChecker(prompt, checker);
+    }
+  }
+  return answer[prompt.name];
+}
+
+export default promptChecker;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@widget-js/cli",
+  "version": "1.0.0",
+  "main": "bin/widget.js",
+  "author": "Neo Fu",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "bin": {
+    "widget": "bin/widget.js"
+  },
+  "scripts": {
+    "widget": "node ./bin/widget.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^12.0.0 || >= 14.0.0"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@vue/cli-shared-utils": "^5.0.8",
+    "change-case": "^4.1.2",
+    "consola": "^2.15.3",
+    "ejs": "^3.1.8",
+    "inquirer": "^9.1.4",
+    "shelljs": "^0.8.5"
+  }
+}

package/template/Widget.ejs

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

package/template/WidgetConfig.ejs

@@ -0,0 +1,52 @@
+<template>
+
+    <widget-edit-dialog :widget-params="widgetParams" :option="widgetConfigOption"
+                        :widget-data="widgetData"
+                        @confirm="onSaveClick()">
+        <template v-slot:widget>
+            <!-- 组件配置内容   -->
+            <<%= paramCaseName  %>-widget :style="{
+        width:`${widgetParams.widthPx}px`,
+        height:`${widgetParams.heightPx}px`
+      }" :background-color="widgetData.backgroundColor"></<%= paramCaseName  %>-widget>
+        </template>
+        <template v-slot:form>
+            <!--  TODO 这里写自定义表单内容          -->
+        </template>
+    </widget-edit-dialog>
+</template>
+
+<script lang="ts">
+
+import <%= name %>Widget from "@/widgets/clock/ClockWidget.vue";
+import {useWidget, WidgetConfigOption, WidgetEditDialog} from "@widget-js/vue3";
+import {WidgetData, WidgetDataRepository} from "@widget-js/core";
+import {reactive} from "vue";
+
+export default {
+  name: "",
+  components: {<%= name %>Widget, WidgetEditDialog},
+  setup() {
+    const {widgetData, widgetParams} = useWidget(WidgetData)
+
+    //修改成需要设置组件参数配置
+    const widgetConfigOption = reactive(new WidgetConfigOption({
+      custom: false,
+      backgroundColor: true,
+      borderRadius: true
+    }));
+
+    return {widgetData, widgetParams, widgetConfigOption}
+  },
+  methods: {
+    async onSaveClick() {
+      await WidgetDataRepository.save(this.widgetData);
+      window.close();
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/template/WidgetDefine.ejs

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

package/template/WidgetRoutes.ejs

@@ -0,0 +1,29 @@
+import <%= name %>WidgetDefine from "./<%= name %>.widget";
+
+const url = <%= name %>WidgetDefine.url;
+const name = <%= name %>WidgetDefine.name;
+<% if (configurable) { %>
+const configUrl = <%= name %>WidgetDefine.configUrl;
+
+const <%= name %>WidgetRoutes = [
+    {
+        path: url,
+        name: `${name}`,
+        component: () => import(/* webpackChunkName: "<%= packageName %>" */ './<%= name %>WidgetView.vue')
+    },
+    {
+        path: configUrl,
+        name: `${name}.config`,
+        component: () => import(/* webpackChunkName: "<%= packageName %>.config" */ './<%= name %>ConfigView.vue')
+    }
+]
+<% } else { %>
+const <%= name %>WidgetRoutes = [
+    {
+        path: url,
+        name: `${name}`,
+        component: () => import(/* webpackChunkName: "<%= packageName %>" */ './<%= name %>WidgetView.vue')
+    }
+]
+<% }  %>
+export default <%= name %>WidgetRoutes;

package/template/WidgetView.ejs

@@ -0,0 +1,23 @@
+<template>
+    <!-- TODO:组件页面，这里编写组件业务逻辑-->
+    <<%= paramCaseName  %>-widget :background-color="widgetData.backgroundColor"></<%= paramCaseName  %>-widget>
+</template>
+
+<script lang="ts">
+import {WidgetData} from "@widget-js/core";
+import <%= name %>Widget from "./<%= name %>Widget.vue"
+import {useWidget} from "@widget-js/vue3";
+
+export default {
+    name:"<%= name %>WidgetView",
+    components: {<%= name %>Widget},
+    setup(){
+        const {widgetData, widgetParams} = useWidget(WidgetData);
+        return {widgetData, widgetParams};
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/template/stories.ejs

@@ -0,0 +1,15 @@
+import <%= name %>Widget from './<%= name %>Widget.vue';
+
+export default {
+  title: 'Widget/<%= name %>',
+  component: <%= name %>Widget,
+  argTypes: {},
+};
+
+export const Widget = (args:any) => ({
+  components: {<%= name %>Widget},
+  setup() {
+    return {args};
+  },
+  template: '<<%= paramCaseName %>-widget></<%= paramCaseName %>-widget>',
+});

package/template/widget-router.ts

@@ -0,0 +1,6 @@
+//FBI WANING! IMPORT PLACE, DONT DELETE THIS LINE
+
+const WidgetRouter = [
+    //FBI WANING! ROUTE PLACE, DONT DELETE THIS LINE
+];
+export default WidgetRouter

package/widget.json

@@ -0,0 +1,14 @@
+{
+  "name": "cn.widgetjs.widgets",
+  "author": "Widget JS",
+  "homepage": "https://widgetjs.cn",
+  "description": {
+    "zh": "内置基础组件"
+  },
+  "entry": "index.html#",
+  "version": "0.0.1",
+  "devOptions": {
+    "useStorybook": true,
+    "folder": "./test/"
+  }
+}