王帆/vue3-json-schema-form

项目配置

创建项目

在使用 vite 时候选择 eslint + preitter，来进行代码规范的检查

配置 preitter

新建 preitterrc 配置文件

//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: "as-needed", //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: "all", //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: "always", //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: "preserve", //不知道怎么翻译
  htmlWhitespaceSensitivity: "ignore", //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: "lf", //结束行形式
  embeddedLanguageFormatting: "auto" //对引用代码进行格式化
}

配置 vscode

首选项 => 设置 => 搜索 format 关键字在工作区勾选 format on save 选项，这时候会在当前项目下面生成一个.vscode 的文件夹，里面有对应的配置 setting.json

{
  "editor.formatOnSave": true,
  "files.autoSave": "onWindowChange"
}

Vue3 开始

Props

在使用ts写 vue 代码的时候，我们需要给 props 添加类型，并且类型要告诉给ts，于是我们定义一个类型就需要这样写。

注解 props

import { defineComponent, PropType } from "vue"

interface Book {
  title: string
  author: string
  year: number
}

const Component = defineComponent({
  props: {
    name: String,
    id: [Number, String],
    success: { type: String },
    callback: {
      type: Function as PropType<() => void>
    },
    book: {
      type: Object as PropType<Book>,
      required: true
    },
    metadata: {
      type: null // metadata 的类型是 any
    }
  }
})

提取 props 定义

const PropsType = {
  age: {
    type: Number as PropType<Number>,
    required: true
  },
  book: Object as PropType<Book>,
  callback: {
    type: Function as PropType<() => void>
  }
} as const // 一定要加，之后就变成一个 readonly 的类型了

export default defineComponent({
  props: PropsType
})

由于 required 和 ts 中的 readonly 有什么关系，所以这块要 as const .

理解 h 函数，以及.vue 文件是怎么运作的

理解写的.vue 文件就是在写一个 h 函数。

setup 的使用

setup 函数只会调用一次的
setup 函数可以 return 一个函数来当做 render 函数使用的。

使用 jsx 开发 vue3

npm install @vue/babel-plugin-jsx -D

  plugins: ["@vue/babel-plugin-jsx"]

vscode 没有对 props 进行校验提示

在组件开发中都使用 tsx 进行开发，就可以。因为.vue 文件的格式对 ts 的支持并不好。

JSON-Schema & ajv 使用

自定义 format

const Ajv = require("ajv")

const schema = {
  type: "object",
  properties: {
    name: {
      type: "string",
      format: "test" // 配合下面的 addFormat使用
    },
    age: {
      type: "number"
    },
    pets: {
      type: "array",
      items: [
        {
          type: "string"
        },
        {
          type: "number"
        }
      ]
    },
    isWorker: {
      type: "boolean"
    }
  },
  required: ["name", "age"]
}

const ajv = new Ajv()

ajv.addFormat("test", (data) => {
  return data === "haha"
})

const validate = ajv.compile(schema)
const valid = validate({
  name: "dfad",
  age: 10,
  pets: ["str", 100]
})

if (!valid) console.log(validate.errors)

自定义关键字

如何转换错误语言

如何自定义错误信息

项目开始

定义接口 props

schema 通过 schema 生成表单
value 当前表单的值，或者默认值
locale 语言
onChange 表单改变了
uiSchema 定制生成表单的样式
其他...
contextRef 传入一个 vue3 的 ref 对象

const yourRef = ref({})

onMounted(()=>{
    yourRef.value.doValidate()
})
<JsonSchemaForm contextRef={yourRef}></JsonSchemaForm>

渲染一个复杂的数据类型

渲染数组或者对象

$ref

{
    type: "object",
    item : [
        "age": 10
    ]
}

$ref 表示的是引用了根路径中的某个json子项的路径

json schema 规范总结：

type = object 的同级必须要有 properties 属性。
type = array 的同级必须要有 items 属性。
dependencies 表示表单中存在依赖，这一项依赖于其中的某一项。oneof allof 等的转换
string、number、integer、boolean，这四个简单类型的 default 属性直接是一个单值。
array、的默认值是一个数组[]。

我们在实现的组件的时候，需要对传进来的 json schema进行解析，例如 $refs 等等，所以就需要给 schema-item添加一个属性root schema，并且在schema item这个组件里面解析好 schema之后把其传递下去。

把转换过之后的 schema 通过 schema-item 传递下去。

注意事项：组件文件之间可能出现循环引用的问题 , 提示方案：webpack 插件 circular-dependency-plugin

vite: 还没查

通过 proivde 在 schemaForm 顶层组件上面把 schemaItem 传递下去。同时给 provide 的 key 设置成为 symbol 的值，不会造成冲突。

抽离成 hooks
export function useVJSFContext() {
  const context: { SchemaItem: CommonFieldType } | undefined =
    inject(SchemaFormContextKey)

  if (!context) {
    throw Error("context 是必须注入的！")
  }
  return context
}

vue 中指定一个变量的类型是某个组件的类型

const TypeHelperComponent = defineComponent({
  props: SchemaFormPropsDefine
})

type SchemaItemDefine = typeof TypeHelperComponent

const context: { SchemaItem: SchemaItemDefine } | undefined =
  inject(SchemaFormContextKey)
// 类型保护
if (!context) {
  throw Error("context 是必须要注入的数据")
}
const { SchemaItem } = context

动手渲染出一个普通对象的 form

数组节点的渲染

抽离手动 injetc() context 的代码，抽离出去一个函数。（零散的，比较特定的功能，就可以提取成一个函数，拆出去）

固定长度数组的渲染

单类型数组的渲染

单元测试 Jest API

1、describe

将测试用例分组

2、exists 存在

@vue/test-utils 单元测试 API

1、mount

得到一个包装器，并提供一些方便的测试方法。

2、find

找到一个元素并返回一个DOMWrapper如果找到的话。

  wrapper.find('span') //=> found; returns DOMWrapper
  wrapper.find('[data-test="span"]') //=> found; returns DOMWrapper
  wrapper.find({ ref: 'span' }) //=> found; returns DOMWrapper
  wrapper.find('p') //=> nothing found; returns ErrorWrapper

3、findComponent

找到一个 Vue 组件实例并返回一个VueWrapperif found。ErrorWrapper否则返回。

句法	例子	细节
查询选择器	`findComponent('.component')`	匹配标准查询选择器。
组件名称	`findComponent({name: 'a'})`	匹配 PascalCase、snake-case、camelCase
组件参考	`findComponent({ref: 'ref'})`	只能用于已安装组件的直接引用子级
证监会	`findComponent(Component)`	直接传递一个导入的组件

用Vue Cli 构建库

实现 theme 和 core 分开打包的效果。

vue-cli-service build --target lib --name myLib [entry]

{
    "build:core": "cross-env TYPE=lib vue-cli-service build --target lib --name index lib/index.ts --no-clean",
    "build:theme": "cross-env TYPE=lib vue-cli-service build --target lib --name theme-default/index lib/theme-default/index.tsx --no-clean",
    "build": "rimraf dist && yarn build:core && yarn build:theme",
}

参考文章

Jest 零基础入门