initail commit

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{ts,tsx,vue,less}]
+indent_size = 2
+
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintignore

@@ -0,0 +1 @@
+example

.eslintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+    node: true,
+    browser: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
+};

.gitignore

@@ -0,0 +1,35 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+pnpm-lock.yaml
+
+.ice
+.tmp
+build
+node_modules
+.DS_Store
+es
+lib
+dist
+temp
+dist-ssr
+coverage
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "singleQuote": true,
+  "proseWrap": "preserve",
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "auto",
+  "bracketSpacing": true,
+  "stylelintIntegration": true,
+  "eslintIntegration": true,
+  "semi": true,
+  "vueIndentScriptAndStyle": false,
+  "printWidth": 90
+}

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+  },
+  "files.associations": {
+    "*.svg": "html",
+    "*.env*": "ini",
+    "api-*.json": "jsonc"
+  },
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "prettier.enable": true,
+  "eslint.validate": ["vue", "ts", "tsx"],
+  "volar.autoCompleteRefs": false,
+  "volar.codeLens.scriptSetupTools": false,
+  "volar.codeLens.references": false,
+  "volar.completion.autoImportComponent": false,
+  "volar.completion.preferredTagNameCase": "kebab",
+  "stylelint.validate": ["css", "less", "postcss", "vue"]
+}

README.md

@@ -0,0 +1,61 @@
+# build plugin lowcode
+
+> 编译 vue 自定义组件的 编译插件，基于 `@alib/build-scripts`
+
+## 运行 example
+
+```bash
+pnpm install
+cd exmaple
+pnpm install
+pnpm start
+```
+
+## 如何与 lowcode engine 集成
+
+编译会生成两个文件:
+
+- `view.js` 组件库代码
+- `meta.js` 组件库 meta 信息
+
+将下面 JSON 内容添加到物料中
+
+```json
+{
+  "packages": [
+    {
+      "package": "@knxcloud/example-component", // 组件名，务必修改为自己的组件包名
+      "version": "1.0.0", // 组件版本号，务必修改为自己的组件版本号
+      "urls": ["http://localhost:3333/view.js"],
+      "library": "KnxLcUi" // 为 build.json library 字段值
+    }
+  ],
+  "components": [
+    {
+      "exportName": "KnxLcUiMeta", // 为 build.json library 字段值 + Meta 后缀
+      "npm": {
+        "package": "@knxcloud/example-component", // 组件名，务必修改为自己的组件包名
+        "version": "1.0.0" // 组件版本号，务必修改为自己的组件版本号
+      },
+      "url": "http://localhost:3333/meta.js"
+    }
+  ],
+  "sort": {
+    "groupList": ["精选组件", "原子组件"],
+    "categoryList": [
+      "基础元素",
+      "布局容器类",
+      "表格类",
+      "表单详情类",
+      "帮助类",
+      "对话框类",
+      "业务类",
+      "通用",
+      "引导",
+      "信息输入",
+      "信息展示",
+      "信息反馈"
+    ]
+  }
+}
+```

example/build.json

@@ -0,0 +1,9 @@
+{
+  "publicPath": "/",
+  "library": "KnxLcUi",
+  "externals": {
+    "vue": "var window.Vue",
+    "@knx/kui": "var window.Kui"
+  },
+  "plugins": ["../"]
+}

example/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@knxcloud/example-component",
+  "version": "1.0.0",
+  "description": "A component library based on Naive",
+  "files": [
+    "dist/"
+  ],
+  "main": "dist/view.js",
+  "scripts": {
+    "start": "build-scripts start",
+    "build": "build-scripts build"
+  },
+  "dependencies": {
+    "naive-ui": "^2.30.6"
+  },
+  "peerDependencies": {
+    "vue": ">=3.2"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.32",
+    "@alilc/lowcode-types": "^1.0.10",
+    "@babel/core": "^7.18.5",
+    "@vue/tsconfig": "^0.1.3",
+    "typescript": "~4.7.4",
+    "vue": "^3.2.37"
+  }
+}

example/src/components/button/Button.vue

@@ -0,0 +1,13 @@
+<template>
+  <div className="example">
+    {{ title }}
+    <n-button v-bind="$attrs">
+      <slot></slot>
+    </n-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NButton } from 'naive-ui';
+defineProps<{ title?: string }>();
+</script>

example/src/components/button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.vue';

example/src/components/button/meta.ts

@@ -0,0 +1,52 @@
+import type { ComponentMetadata } from '@alilc/lowcode-types';
+
+const ButtonMeta: ComponentMetadata = {
+  group: '原子组件',
+  category: '基础组件',
+  componentName: 'Button',
+  title: 'Button',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@knxcloud/example-component',
+    version: '1.0.0',
+    exportName: 'Button',
+    destructuring: true,
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'title',
+            'zh-CN': 'title',
+          },
+        },
+        name: 'title',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: true,
+          initialValue: '',
+        },
+      },
+    ],
+    supports: {
+      style: true,
+    },
+    component: {},
+  },
+  snippets: [
+    {
+      title: 'Button',
+      screenshot: '',
+      schema: {
+        componentName: 'Button',
+        props: {},
+      },
+    },
+  ],
+};
+
+export default ButtonMeta;

example/src/components/input/Input.vue

@@ -0,0 +1,12 @@
+<template>
+  <div className="example">
+    {{ title }}
+    <n-input v-bind="$attrs" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NInput } from 'naive-ui';
+
+defineProps<{ title: string }>();
+</script>

example/src/components/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue';

example/src/components/input/meta.ts

@@ -0,0 +1,46 @@
+import type { ComponentMetadata } from '@alilc/lowcode-types';
+
+const InputMeta: ComponentMetadata = {
+  group: '原子组件',
+  category: '表单组件',
+  componentName: 'Input',
+  title: 'Input',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@knxcloud/example-component',
+    version: '1.0.0',
+    exportName: 'Input',
+    destructuring: true,
+  },
+  configure: {
+    props: [
+      {
+        name: 'title',
+        title: 'title',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: true,
+          initialValue: '',
+        },
+      },
+    ],
+    supports: {
+      style: true,
+    },
+    component: {},
+  },
+  snippets: [
+    {
+      title: 'Input',
+      screenshot: '',
+      schema: {
+        componentName: 'Input',
+        props: {},
+      },
+    },
+  ],
+};
+
+export default InputMeta;

example/src/index.ts

@@ -0,0 +1,4 @@
+import { Button } from './components/button';
+import { Input } from './components/input';
+
+export { Button, Input };

example/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["./src/*.ts", "./src/*.tsx", "./src/*.vue"],
+  "exclude": ["node_modules", "build", "public"]
+}

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@knxcloud/build-plugin-lowcode",
+  "version": "1.0.0",
+  "main": "./src/index.js",
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@vue/babel-preset-app": "^5.0.6",
+    "build-scripts-config": "^3.0.3",
+    "chokidar": "^3.5.3",
+    "fast-glob": "^3.2.11",
+    "handlebars": "^4.7.7",
+    "is-wsl": "^2.2.0",
+    "lodash": "^4.17.21",
+    "vue-loader": "^17.0.0",
+    "webpack-virtual-modules": "^0.4.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.5",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "^2.7.1",
+    "vue": "^3.2.37",
+    "webpack": "^4.46.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}