form-driver 0.1.0

package/package.json

@@ -0,0 +1,132 @@
+{
+  "name": "form-driver",
+  "version": "0.1.0",
+  "description": "An efficient framework for creating forms.",
+  "license": "MIT",
+  "authors": [
+    "龙湖 <59775976@qq.com>",
+    "云开 <2313303800@qq.com>"
+  ],
+  "scripts": {
+    "start": "webpack-dev-server --inline --progress --config webpack.demo.js --compress",
+    "clean": "rimraf lib dist es coverage types",
+    "build": "rollup -c",
+    "b": "npm run clean && npm run build",
+    "i": "tnpm install && tnpm install @ali/m3 @ali/m3-plugin-richtext @ali/m3-plugin-hp-org",
+    "ri": "rm -rf node_modules && npm run i",
+    "pub": "npm run b && npm version patch && npm publish && git push",
+    "patch": "npm version patch && npm publish && git push",
+    "submodule": "git submodule update --init",
+    "ut-pull": "cd ./demo/src/ut_autoTest/ut_case && git pull",
+    "ut-test": "cd ./demo/src/ut_autoTest/ut_case && source ./.venv/bin/activate && python run_ui.py",
+    "demo:build": "cross-env NODE_ENV=production webpack --config webpack.demo.js",
+    "docs:i": "cd docs && tnpm install",
+    "docs:ri": "cd docs && rm -rf node_modules && npm run i",
+    "docs:start": "cd docs && dumi dev",
+    "docs:build": "cd docs && dumi build",
+    "docs:upload": "cd docs && hp upload ./dist m3/ --free",
+    "docs:pub": "cd docs && npm run build && npm run upload"
+  },
+  "keywords": [
+    "m3",
+    "form",
+    "form-driver"
+  ],
+  "homepage": "https://github.com/alibaba/form-driver",
+  "bugs": {
+    "url": "https://github.com/alibaba/form-driver/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alibaba/form-driver.git"
+  },
+  "main": "lib/m3.js",
+  "module": "es/m3.js",
+  "unpkg": "dist/m3.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "dist",
+    "lib",
+    "es",
+    "src",
+    "types"
+  ],
+  "displayName": "form-driver",
+  "dependencies": {
+    "@ant-design/icons": "^4.3.0",
+    "@babel/runtime": "^7.9.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "antd": "^4.16.5",
+    "antd-mobile": "^2.3.4",
+    "lodash": "^4.17.20",
+    "moment": "^2.29.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "@ant-design/tools": "^13.5.0-beta.1",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-external-helpers": "^7.12.1",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-react-display-name": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.12.12",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@rollup/plugin-babel": "^5.0.0",
+    "@rollup/plugin-image": "^2.0.6",
+    "@rollup/plugin-replace": "^2.3.2",
+    "@types/lodash": "^4.14.165",
+    "@types/node": "^14.14.10",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "babel-core": "^7.0.0-0",
+    "babel-eslint": "^8.0.1",
+    "babel-jest": "^22.2.2",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-import": "^1.13.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^0.28.0",
+    "css-minimizer-webpack-plugin": "^3.0.0",
+    "dingtalk-jsapi": "^2.13.20",
+    "happypack": "^5.0.1",
+    "html-loader": "^0.5.1",
+    "html-webpack-plugin": "^3.2.0",
+    "less": "^3.11.1",
+    "less-loader": "^7.2.1",
+    "mini-css-extract-plugin": "^0.5.0",
+    "npm-run-all": "^4.1.1",
+    "postcss": "^8.2.4",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-nested": "^5.0.3",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-simple-vars": "^6.0.2",
+    "react-intl": "^5.18.1",
+    "rimraf": "^2.5.2",
+    "rollup": "^2.38.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "style-loader": "^0.20.0",
+    "ts-loader": "^8.0.14",
+    "ts-node-dev": "^1.0.0",
+    "typescript": "^3.8.3",
+    "webpack": "^4.16.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.11"
+  },
+  "engines": {
+    "node": ">=v14.15.4"
+  }
+}

package/src/framework/Ajax.ts

@@ -0,0 +1,96 @@
+import { message } from 'antd';
+
+function generateQueryStr(obj = {}) {
+  let str = ''
+  const keys = Object.keys(obj)
+  if (keys.length > 0) {
+    const arr = []
+    keys.forEach(k => {
+      arr.push(`${k}=${encodeURIComponent(obj[k])}`)
+    })
+    str = `?${arr.join('&')}`
+  }
+  return str
+}
+
+export const Ajax = {
+  req(method:'GET'|'POST'|'PUT', apiPath:string, urlArgs:any, body:any, headers:any, 
+    prompt:any = {succ:"提交完成", networkFail:"网络异常", bizFail:"提交失败"}):Promise<any> {
+    const args = {
+      method: method,
+      body: JSON.stringify(body),
+      headers: {'Content-Type': 'application/json', ...headers}
+    }
+    return new Promise<any>(function(resolve, reject) {
+      fetch(`${apiPath}${generateQueryStr(urlArgs)}`, args)
+        .then(d => d.json())
+        .then(resp => {
+          if(resp.errorCode === 0) {
+            if(prompt.succ){
+              message.success(prompt.succ);
+            }
+            resolve(resp);
+          } else {
+            message.error(resp.message ?? prompt.bizFail);
+            reject(resp);
+          }
+        })
+        .catch(e=>{
+          console.log(e);
+          message.error(prompt.networkFail);
+          reject();
+        })
+    });
+  },
+
+  post(apiPath:string, data:any, succMsg:string = "提交完成"):Promise<any> {
+    const args = {
+      method: 'POST',
+      body:JSON.stringify(data),
+      headers: {'Content-Type': 'application/json'}
+    }
+    return new Promise<any>(function(resolve, reject){
+      fetch(apiPath, args)
+        .then(d => d.json())
+        .then(resp => {
+          if(resp.errorCode === 0) {
+            if(succMsg){
+              message.success(succMsg);
+            }
+            resolve(resp);
+          } else {
+            message.error(resp.message);
+            reject(resp);
+          }
+        })
+        .catch(e=>{
+          console.log(e);
+          message.error("网络异常");
+          reject();
+        })
+    });
+  },
+
+  get(apiPath:string,  data?:object):Promise<any> {
+    if (data) {
+      apiPath = `${apiPath}${generateQueryStr(data)}`
+    }
+    return new Promise<void>(function(resolve, reject){
+      fetch(apiPath)
+      .then(res => res.json())
+      .then(resp => {
+        if(resp.errorCode === 0) {
+          resolve(resp);
+        } else {
+          message.error(resp.message);
+          reject();
+        }
+      })
+      .catch(e=>{
+        message.error("网络异常");
+        reject();
+      })
+    });
+  }
+}
+

package/src/framework/Assembly.tsx

@@ -0,0 +1,165 @@
+import React, { ClassType } from "react";
+import { MValidationResult, MFieldSchemaAnonymity, MProp, MValidationFail } from './Schema';
+import _ from "lodash";
+import { MUtil } from './MUtil';
+import { MType, PluginType } from "../types/MType";
+
+export type MORPH = "readable" | "editor";
+export type VIEWER = ClassType<MProp, any, any>
+
+/** 统一的视觉样式 */
+export interface MTheme {
+  // 负向数据展示文案
+  /** 数据未知时展示 */
+  readonly READABLE_UNKNOWN: string;
+  /** 数据为空的时候展示 */
+  readonly READABLE_BLANK: string;
+  /** 数据有问题时展示 */
+  readonly READABLE_INVALID: string;
+  /** 代码有问题时展示 */
+  readonly READABLE_ERROR: string;
+
+  /** @deprecated theme的名字 */
+  readonly themeName: "antMiddle" | string;
+}
+
+export interface EDITOR {
+  // 编辑器
+  editor: string;
+  // 数据类型
+  type: string;
+  // 阅读器
+  readable: string;
+}
+
+const defaultTheme: MTheme = {
+  READABLE_UNKNOWN: "?",
+  READABLE_BLANK: "-",
+  READABLE_INVALID: "❓",
+  READABLE_ERROR: "❗",
+
+  themeName: "antMiddle"
+}
+
+let rootHideMap = {} 
+/**
+ * 注册viewer，type，morph（viewer和type之间的关联）
+ */
+export class Assembly {
+  types: { [name: string]: MType } = {};
+  viewers: { [name: string]: VIEWER } = {};
+  editors: { [name: string]: EDITOR } = {};
+  morph: { [name: /*MORPH*/ string]: { [typeName: string]: string | ClassType<MProp, any, any> /* viewer name or viewer */ } } = {}
+
+  theme: MTheme = defaultTheme;
+
+  toReadable = (s: MFieldSchemaAnonymity, v: any, parent: any): string => {
+    const t = this.types[s.type];
+    if (t) {
+      let r;
+      if (_.isString(s.toReadable)) {
+        // eslint-disable-next-line no-new-func
+        r = new Function("_", "value", "theme",
+          "const {READABLE_UNKNOWN, READABLE_BLANK, READABLE_INVALID, READABLE_ERROR} = theme; return " + s.toReadable)(_, v, this.theme);
+      } else if (_.isFunction(s.toReadable)) {
+        r = s.toReadable(v, parent, this);
+      }
+      r = r ?? t.toReadable(this, s, v);
+
+      if (s.postfix) {
+        r += s.postfix;
+      }
+      return r;
+    } else {
+      return s.type + "类型无效"
+    }
+  }
+
+  /** 根据定义返回View，返回nil表示没有可用的View */
+  getViewerOf(f: MFieldSchemaAnonymity, morph: MORPH): ClassType<any, any, any> {
+    if (f.editor && morph === "editor") {
+      if (_.isString(f.editor)) {
+        return _.get(this.viewers, f.editor);
+      } else {
+        return f.editor;
+      }
+    } else if (f.readable && morph === "readable") {
+      if (_.isString(f.readable)) {
+        return _.get(this.viewers, f.readable);
+      } else {
+        return f.readable;
+      }
+    } else {
+      const viewer: string | ClassType<MProp, any, any>  = _.get(this.morph, morph + "." + f.type);
+      if (_.isString(viewer)) {
+        return _.get(this.viewers, viewer);
+      } else {
+        return viewer
+      }
+    }
+  }
+
+  validate(s: MFieldSchemaAnonymity, v: any, path: string = ""): MValidationFail | undefined {
+    let result: MValidationResult = undefined;
+    for (let validator of this.types[s.type].validators) {
+      result = validator(this, s, v, path);
+      if (result === "pass") {
+        return undefined;
+      } else if (result) {
+        MUtil.debug("校验", path, result.message);
+        return result;
+      }
+    }
+    return undefined;
+  }
+
+  addViewer(name: string, v: VIEWER) {
+    if (this.viewers[name]) {
+      console.error(`addViewer: 已经存在名为 ${name} 的 Viewer，无法再次添加！`)
+      return
+    } else {
+      this.viewers[name] = v;
+    }
+  }
+
+  addEditor(name: string, v: EDITOR) {
+    if (this.editors[name]) {
+      console.error(`addEditor: 已经存在名为 ${name} 的 Editor，无法再次添加！`)
+      return
+    } else {
+      this.editors[name] = v;
+    }
+  }
+
+  /**
+   * 增加一种数据类型
+   * 例：
+   *  const hpOrg = {name: "hpOrg", type: {validators: ..., toReadable: ...}, editor: HPOrgEditor, readable: "DivViewer"}
+   *  addType(hpOrg)
+   * @param typeParam 类型的描述对象
+   */
+  addType(typeParam: PluginType) {
+    const { name, type, editor, readable = "DivViewer" } = typeParam
+    this.types[name] = type;
+    _.set(this.morph, "editor." + name, editor);
+    _.set(this.morph, "readable." + name, readable);
+
+  }
+
+  constructor() {
+    // 校验types是否使用了无效的编辑器名字
+    for (let morphName in this.morph) {
+      for (let typeName in this.morph[morphName]) {
+        if (!this.types[typeName]) {
+          throw SyntaxError(`类型${typeName}未定义`);
+        }
+        const viewerName = this.morph[morphName][typeName];
+        if (!this.viewers[viewerName]) {
+          throw SyntaxError(`视图${viewerName}未定义`);
+        }
+      }
+    }
+  }
+}
+
+export const assembly: Assembly = new Assembly();

package/src/framework/Init.tsx

@@ -0,0 +1,196 @@
+import { assembly } from './Assembly';
+import { MEnumType } from "../types/MEnumType";
+import { MGB2260Type } from "../types/MGB2260Type";
+import { MDateTimeType } from '../types/MDateTimeType';
+import { MSetType } from '../types/MSetType';
+import { MArrayType } from "../types/MArrayType";
+import { MStringType } from '../types/MStringType';
+import { MIntDiffType } from '../types/MIntDiffType';
+import { MIntType } from '../types/MIntType';
+import { MMatrixType } from "../types/MMatrixType";
+import { MObjectType } from "../types/MObjectType";
+import { MExperienceType } from "../types/MExperienceType";
+import { MCnAddress } from "../types/MCnAddressType";
+import { MTelType, MCnPhoneType, MEmailType } from '../types/MTelType';
+import { MDateRangeType } from "../types/MDateRangeType";
+import { ArrayViewer } from '../ui/readable/ArrayViewer';
+import { ADatetimePicker } from "../ui/editor/basic/ADatetimePicker";
+import { AGB2260 } from "../ui/editor/basic/AGB2260";
+import { ARadio } from "../ui/editor/basic/ARadio";
+import { ARate } from "../ui/editor/basic/ARate";
+import { AUpload } from "../ui/editor/basic/AUpload";
+import { ATreeSelect } from "../ui/editor/basic/ATreeSelect";
+import { NPS } from "../ui/editor/basic/NPS";
+import { AIntBox } from "../ui/editor/basic/AIntBox";
+import { ACheckBox } from "../ui/editor/basic/ACheckBox";
+import { AInputBox } from "../ui/editor/basic/AInputBox";
+import { AMatrix } from '../ui/editor/complex/AMatrix';
+import { ASpecInputBox } from '../ui/editor/basic/ASpecInputBox';
+import { AForm } from '../ui/editor/complex/AForm';
+import { DivViewer } from '../ui/readable/DivViewer';
+import { ASelector } from "../ui/editor/basic/ASelector";
+import { ASetSelector } from '../ui/editor/basic/ASetSelector';
+import { AExperience } from '../ui/editor/complex/AExperience';
+import { ACnAddress } from '../ui/editor/complex/ACnAddress';
+import { AArray } from '../ui/editor/complex/AArray';
+import { AArrayGrid } from '../ui/editor/complex/AArrayGrid';
+import { ARangePicker } from '../ui/editor/basic/ARangePicker';
+import { AIntDiff } from '../ui/editor/complex/AIntDiff';
+import { MFloatType } from '../types/MFloatType';
+import { MDecorationType } from '../types/MDecorationType';
+import { DecorationViewer } from '../ui/readable/DecorationViewer';
+import { ATable } from '../ui/editor/complex/ATable';
+import { ARemoteSelector } from '../ui/editor/basic/ARemoteSelector';
+import { JsonEditor } from '../ui/editor/complex/JsonEditor';
+import _ from "lodash";
+import { A } from '../ui/readable/A';
+import { ADialogForm } from '../ui/editor/complex/ADialogForm';
+import { MVLPairType } from '../types/MVLPairType';
+import { MKvSetType } from '../types/MKvSetType';
+import { AKvSet } from '../ui/editor/basic/AKvSet';
+import { ACascadePicker } from '../ui/editor/basic/ACascadePicker';
+import { MCascadeType } from '../types/MCascadeType';
+import editorMap from './editorMap';
+
+
+let init = false;
+/**
+ * 确保m3已经初始化ensureM3
+ */
+export function ensureM3(){
+  if(init){
+    return;
+  }
+  init = true;
+  assembly.types = _.merge(assembly.types, {
+    "enum":             MEnumType,
+    "gb2260":           MGB2260Type,
+    "datetime":         MDateTimeType,
+    "year":             MDateTimeType,
+    "yearMonth":        MDateTimeType,
+    "yearMonthDay":     MDateTimeType,
+    "set":              MSetType,
+    "array":            MArrayType,
+    "string":           MStringType,
+    "intDiff":          MIntDiffType,
+    "int":              MIntType,
+    "float":            MFloatType,
+    "matrix":           MMatrixType,
+    "object":           MObjectType,
+    "experience":       MExperienceType,
+    "cnAddress":        MCnAddress,
+    "tel":              MTelType,
+    "email":            MEmailType,
+    "cnPhone":          MCnPhoneType,
+    "dateRange":        MDateRangeType,
+    "decoration":       MDecorationType,
+    "vl":               MVLPairType,
+    "kvSet":            MKvSetType,
+    "cascade":          MCascadeType,
+  });
+  
+  // 实验性组件 AArray、ATable、ADialogForm、AForm、ASetSelector、JsonEditor
+  assembly.viewers = _.merge(assembly.viewers, {
+    "ADatetimePicker":  ADatetimePicker,
+    "AGB2260":          AGB2260,
+    "ARadio":           ARadio,
+    "ARate":            ARate,
+    "AUpload":          AUpload,
+    "ATreeSelect":      ATreeSelect,
+    "NPS":              NPS,
+    "ACheckBox":        ACheckBox,
+    "AIntBox":          AIntBox,
+    "AInputBox":        AInputBox,
+    "AMatrix":          AMatrix,
+    "ASpecInputBox":    ASpecInputBox,
+    "AForm":            AForm,
+    "AArray":           AArray,
+    "AArrayGrid":       AArrayGrid,
+    "ARangePicker":     ARangePicker,
+    "AIntDiff":         AIntDiff,
+    "ACnAddress":       ACnAddress,
+    "AExperience":      AExperience,
+    "ASetSelector":     ASetSelector,
+    "ASelector":        ASelector,
+    "DivViewer":        DivViewer,
+    "ArrayViewer":      ArrayViewer,
+    "DecorationViewer": DecorationViewer,
+    "ATable":           ATable,
+    "ARemoteSelector":  ARemoteSelector,
+    "JsonEditor":       JsonEditor,
+    "A":                A,
+    "ADialogForm":      ADialogForm,
+    "AKvSet":           AKvSet,
+    "ACascadePicker": ACascadePicker,
+  });
+
+  assembly.morph = _.merge(assembly.morph, {
+    // 编辑
+    "editor": {
+      "enum": "ASelector",
+      "gb2260":"AGB2260",
+      "datetime": "ADatetimePicker",
+      "year": "ADatetimePicker",
+      "yearMonth": "ADatetimePicker",
+      "yearMonthDay": "ADatetimePicker",
+      "set": "ACheckBox",
+      "array": "AArray",
+      "string": "AInputBox",
+    
+      "intDiff": "AIntDiff",
+      "int": "AIntBox",
+      "float": "AIntBox",
+      
+      "matrix": "AMatrix",
+      "object": "AForm",
+      
+      "experience": "AExperience",
+      "kvSet": "AKvSet",
+      
+      // TODO 这些类型还没有校验
+      "cnAddress": "ACnAddress",
+      "tel": "ASpecInputBox",
+      "email": "ASpecInputBox",
+      "cnPhone": "ASpecInputBox",
+      "dateRange": "ARangePicker",
+      "decoration": "DecorationViewer",
+
+      "vl": "ARemoteSelector",
+      "cascade": "ACascadePicker"
+    },
+    // 详情
+    "readable": {
+      "enum": "DivViewer",
+      "gb2260": "DivViewer",
+      "datetime": "DivViewer",
+      "year": "DivViewer",
+      "yearMonth": "DivViewer",
+      "yearMonthDay": "DivViewer",
+
+      "set": "DivViewer",
+      "array": "ArrayViewer",
+      "string": "DivViewer",
+
+      "intDiff": "DivViewer",
+      "int": "DivViewer",
+      "float": "DivViewer",
+
+      "matrix": "DivViewer",
+      "object": "AForm",
+      "experience": "DivViewer",
+      "kvSet": "DivViewer",
+
+      "cnAddress": "DivViewer",
+      "tel": "DivViewer",
+      "email": "DivViewer",
+      "cnPhone": "DivViewer",
+      "dateRange":"DivViewer",
+      "decoration": "DecorationViewer",
+      "vl": "DivViewer",
+
+      "cascade": "DivViewer"
+    }
+  })
+  
+  assembly.editors = _.merge(assembly.editors, editorMap)
+}

package/src/framework/M3.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { M3Prop, MViewer } from './MViewer';
+import { MViewerDebug } from './MViewerDebug';
+import editorMap from './editorMap';
+import { MFieldSchema, M3UISpec, MFieldSchemaAnonymity } from "../../src/framework/Schema";
+import _ from "lodash";
+
+// 外部 schema 转化为内部
+function deal(fieldSchema: MFieldSchemaAnonymity | MFieldSchema) {
+  if(fieldSchema.arrayMember){
+      deal(fieldSchema.arrayMember);
+  } else if(fieldSchema.objectFields){
+    for(let f of fieldSchema.objectFields){
+      deal(f);
+    }
+  } else {
+    let opt = fieldSchema.option ?? fieldSchema.setFields ?? fieldSchema.enumFields
+    if (opt) {
+      if (typeof opt === 'string') {
+        fieldSchema.option = opt.split(" ").map(
+          aEnum => {
+            const kv = aEnum.split("=");
+            return { label: kv[0], value: kv[1] ?? kv[0] };
+          }
+        );
+      } else {
+        fieldSchema.option = opt
+      }
+    }
+
+    fieldSchema.openOption = fieldSchema.openOption ?? fieldSchema.setOpen ?? fieldSchema.enumOpen
+
+    if (!fieldSchema.type && fieldSchema.editor) {
+      Object.assign(fieldSchema, editorMap[fieldSchema.editor])
+    }
+  }
+}
+
+// 标准化 schema
+function standardSchema(schema: MFieldSchema | MFieldSchema[], layout?: M3UISpec) {
+  const _schema =  _.cloneDeep(schema)
+  if (_.isArray(_schema)) {
+    _schema.forEach(item => {
+      deal(item)
+    })
+    const temp: MFieldSchema = {
+      name: '__root__',
+      type: 'object',
+      objectFields: _schema
+    }
+    if (layout) {
+      temp.uispec = layout
+    }
+    return _.cloneDeep(temp)
+  } else {
+    deal(_schema)
+    return _schema
+  }
+}
+
+
+const M3 = (props: React.PropsWithChildren<M3Prop & { debug?: boolean }>) => {
+  const [prevProp, setPrevProp] = useState(props);
+
+  let [database, setDatabase] = useState(_.cloneDeep(props.database))
+  let [schema, setSchema] = useState(standardSchema(props.schema))
+  let [k, setK] = useState(0)
+
+  // debug 属性为真 且 页面地址携带 debug 参数，开启调试模式
+  let debug = props.debug || (window.location.search.indexOf("debug") >= 0 || window.location.hash.indexOf("debug") >= 0);
+
+  useEffect(() => {
+    if(props.schema != prevProp.schema) {
+      setSchema(standardSchema(props.schema))
+      setPrevProp(props);
+      setK(++k)
+    }
+  }, [props.schema])
+
+  useEffect(() => {
+    if(props.database != prevProp.database) {
+      setDatabase(_.cloneDeep(props.database))
+      setPrevProp(props);
+      setK(++k)
+    }
+  }, [props.database])
+
+  return (
+    debug ? <MViewerDebug key={k} {...props} database={database} schema={schema} /> :
+      <MViewer key={k} {...props} database={database} schema={schema} />
+  );
+}
+
+export default M3;