diff --git a/.gitignore b/.gitignore index b50a0af9f63..47fd33fc563 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ npm-debug.log* package-lock.json lib/ esm/ +temp_esm/ dist/ build/ coverage/ @@ -15,4 +16,4 @@ examples/test .idea/ .vscode/ TODO.md -tsconfig.tsbuildinfo \ No newline at end of file +tsconfig.tsbuildinfo diff --git a/packages/antd/README.zh-cn.md b/packages/antd/README.zh-cn.md index aa798340f4d..71e20a7da6e 100644 --- a/packages/antd/README.zh-cn.md +++ b/packages/antd/README.zh-cn.md @@ -25,7 +25,7 @@ npm install --save @uform/antd - [`table`](#table) - [布局组件](#Layout-Components) - [``](#FormCard) - - [``](#FormBlock) + - [``](#FormBlock) - [``](#FormStep) - [``](#FormLayout) - [``](#FormItemGrid) @@ -53,15 +53,15 @@ npm install --save @uform/antd - [`useFieldState`](#useFieldState) - [`useForm`](#useForm) - [`useField`](#useField) - - [`useVirtualField`](#useVirtualField) - - [`useFormSpy`](#useFormSpy) + - [`useVirtualField`](#useVirtualField) + - [`useFormSpy`](#useFormSpy) - [API](#API) - [`createFormActions`](#createFormActions) - [`createAsyncFormActions`](#createAsyncFormActions) - [`FormEffectHooks`](#FormEffectHooks) - [`createEffectHook`](#createEffectHook) - [`connect`](#connect) - - [`registerFormField`](#registerFormField) + - [`registerFormField`](#registerFormField) - [Interfaces](#Interfaces) - [`ISchema`](#ischema) - [`IFormActions`](#IFormActions) @@ -82,10 +82,64 @@ npm install --save @uform/antd - [`IFieldProps`](#IFieldProps) - [`IConnectOptions`](#IConnectOptions) - [`ISpyHook`](#ISpyHook) - ### 使用方式 +#### 安装 + +```bash +$ yarn add antd @uform/antd + +# or + +$ npm install --save antd @uform/antd +``` + +### 按需加载 + +#### 在 umijs 中使用 +在开始之前，你可能需要安装 [umijs](https://umijs.org/zh/guide/getting-started.html), 并开启 [antd 配置](https://umijs.org/zh/plugin/umi-plugin-react.html#antd)。 + +然后在 umijs 的 `.umirc.js` 或 `config/config.js` （二选一）中增加 `extraBabelIncludes` 配置项 + +> 在使用 uform 组件的时候，请使用 ES Modules import 导入模块 + +```js +extraBabelIncludes: [ + /node_modules[\\/][\\@]uform[\\/]antd[\\/]esm/ +], +``` + +--- + +#### 在 create-react-app 中使用 + +在开始之前，请先按照 antd 的[教程](https://ant-design.gitee.io/docs/react/use-with-create-react-app-cn)，完成对 `babel-plugin-import` 的配置, 然后只需要在 `config-overrides.js` 中加入 `babelInclude` + +> 在使用 uform 组件的时候，请使用 ES Modules import 导入模块 + +```js +// config-overrides.js + +const { override, fixBabelImports, babelInclude } = require('customize-cra'); +const path = require('path'); + +module.exports = override( + fixBabelImports('import', { + libraryName: 'antd', + libraryDirectory: 'es', + style: 'css', + }), + babelInclude([ + path.resolve('src'), + /node_modules[\\/][\\@]uform[\\/]antd[\\/]esm/, + ]), +) +``` + +#### 更多脚手架 +`@uform/antd` 底层依赖 `antd`，在对 `@uform/antd` 进行按需加载实际也是对 `antd` 进行按需加载，从上面的例子可以看出，脚手架只需要配置好了 `babel-plugin-import`，然后再把 `@uform/antd/esm` 加入 `babel` 的 `include` 中即可完成功能配置 + --- #### 快速开始 @@ -405,7 +459,7 @@ interface IAntdSchemaFormProps { // 内联表单 inline?: boolean // 扩展class - className?: string + className?: string style?: React.CSSProperties // label 布局控制 labelCol?: number | { span: number; offset?: number } @@ -451,7 +505,7 @@ interface IAntdSchemaFormProps { import React, { Component } from 'react' import ReactDOM from 'react-dom' import SchemaForm, { - Field, + Field, connect, createFormActions } from '@uform/antd' @@ -481,7 +535,7 @@ ReactDOM.render( import React, { Component } from 'react' import ReactDOM from 'react-dom' import SchemaForm, { - Field, + Field, createFormActions, FormLayout, FormButtonGroup, @@ -597,7 +651,7 @@ import React, { Component } from 'react' import ReactDOM from 'react-dom' import SchemaForm, { FormSlot, - Field, + Field, createFormActions, FormLayout, FormButtonGroup, @@ -611,10 +665,10 @@ ReactDOM.render(
required
 - +
description
 - +
default value
 @@ -2416,7 +2470,7 @@ const FormFragment = () => { return ( - +
@@ -2457,7 +2511,7 @@ import React, { useRef } from 'react' import ReactDOM from 'react-dom' import { Form, Field, VirtualField, createFormActions, createEffectHook, - useForm, + useForm, useFormState, useFormEffects, useFieldState, @@ -2485,7 +2539,7 @@ const InputField = props => ( ) const actions = createFormActions() -const FormFragment = (props) => { +const FormFragment = (props) => { const [formState, setFormState ] = useFormState({ extendVar: 0 }) const { extendVar } = formState @@ -2523,7 +2577,7 @@ import React, { useRef } from 'react' import ReactDOM from 'react-dom' import { Form, Field, VirtualField, createFormActions, createEffectHook, - useForm, + useForm, useFormEffects, useFieldState, LifeCycleTypes @@ -2551,12 +2605,12 @@ const InputField = props => ( const changeTab$ = createEffectHook('changeTab') const actions = createFormActions() -const TabFragment = (props) => { +const TabFragment = (props) => { const [fieldState, setLocalFieldState ] = useFieldState({ current: 0 }) const { current } = fieldState const { children, dataSource, form } = props - const update = (cur) => { + const update = (cur) => { form.notify('changeTab', cur) setLocalFieldState({ current: cur @@ -2665,7 +2719,7 @@ const FormFragment = (props) => { props: fieldProps, mutators } = useField({ name: 'username' }) - + return } ``` @@ -2691,7 +2745,7 @@ const FormFragment = (props) => { state, props: fieldProps, } = UseVirtualField({ name: 'username' }) - + return
{props.children}
@@ -2723,7 +2777,7 @@ const FormFragment = (props) => { count: state.count ? state.count + 1 : 1 }) }) - + return
count: {state.count || 0}
@@ -2886,7 +2940,7 @@ ReactDOM.render(, document.getElementById('root')) > 包装字段组件，让字段组件只需要支持value/defaultValue/onChange属性即可快速接入表单 ```typescript -type Connect = >(options?: IConnectOptions) => +type Connect = >(options?: IConnectOptions) => (Target: T) => React.PureComponent ``` **用法** @@ -3606,12 +3660,12 @@ interface IConnectOptions { //默认props defaultProps?: Partial //取值函数，有些场景我们的事件函数取值并不是事件回调的第一个参数，需要做进一步的定制 - getValueFromEvent?: (props: IFieldProps['x-props'], event: Event, ...args: any[]) => any + getValueFromEvent?: (props: IFieldProps['x-props'], event: Event, ...args: any[]) => any //字段组件props transformer - getProps?: (connectProps: IConnectProps, fieldProps: IFieldProps) => IConnectProps + getProps?: (connectProps: IConnectProps, fieldProps: IFieldProps) => IConnectProps //字段组件component transformer - getComponent?: ( - target: T, + getComponent?: ( + target: T, connectProps: IConnectProps, fieldProps: IFieldProps ) => T @@ -3627,4 +3681,4 @@ interface ISpyHook { state: any type: string } -``` \ No newline at end of file +``` diff --git a/packages/antd/build.ts b/packages/antd/build.ts index 7e27beb26a5..03599c8d998 100644 --- a/packages/antd/build.ts +++ b/packages/antd/build.ts @@ -2,10 +2,11 @@ import { compile, getCompileConfig } from '../../scripts/build' import ts from 'typescript' import tsImportPluginFactory from 'ts-import-plugin' import glob from 'glob' +import * as fs from 'fs-extra' const transformer = tsImportPluginFactory({ libraryName: 'antd', - //style: 'css', + // style: 'css', }) function buildESM() { @@ -13,12 +14,30 @@ function buildESM() { outDir: './esm', module: ts.ModuleKind.ESNext }) - compile(fileNames, options, { before: [transformer] }) + compile(fileNames, options) console.log('esm build successfully') } +const TEMP_OUT_DIR = './temp_esm' + +function buildTempESM() { + const { fileNames, options } = getCompileConfig(require.resolve('./tsconfig.json'), { + outDir: TEMP_OUT_DIR, + module: ts.ModuleKind.ESNext + }) + compile(fileNames, options, { before: [transformer] }) + + console.log('temporary esm build successfully') +} + +function clearTempESM() { + fs.removeSync(TEMP_OUT_DIR) + + console.log('clear temporary esm build successfully') +} + function buildES5() { - const rootNames = glob.sync('./esm/**/*.js') + const rootNames = glob.sync(`${TEMP_OUT_DIR}/**/*.js`) compile(rootNames, { allowJs: true, esModuleInterop: true, @@ -34,4 +53,7 @@ function buildES5() { buildESM() -buildES5() \ No newline at end of file + +buildTempESM() +buildES5() +clearTempESM() diff --git a/packages/next/build.ts b/packages/next/build.ts index 9ee3d0d8514..6a92a8857ab 100644 --- a/packages/next/build.ts +++ b/packages/next/build.ts @@ -2,6 +2,7 @@ import { compile, getCompileConfig } from '../../scripts/build' import ts from 'typescript' import tsImportPluginFactory from 'ts-import-plugin' import glob from 'glob' +import * as fs from 'fs-extra' const transformer = tsImportPluginFactory({ libraryName: '@alifd/next', @@ -13,12 +14,30 @@ function buildESM() { outDir: './esm', module: ts.ModuleKind.ESNext }) - compile(fileNames, options, { before: [transformer] }) + compile(fileNames, options) console.log('esm build successfully') } +const TEMP_OUT_DIR = './temp_esm' + +function buildTempESM() { + const { fileNames, options } = getCompileConfig(require.resolve('./tsconfig.json'), { + outDir: TEMP_OUT_DIR, + module: ts.ModuleKind.ESNext + }) + compile(fileNames, options, { before: [transformer] }) + + console.log('temporary esm build successfully') +} + +function clearTempESM() { + fs.removeSync(TEMP_OUT_DIR) + + console.log('clear temporary esm build successfully') +} + function buildES5() { - const rootNames = glob.sync('./esm/**/*.js') + const rootNames = glob.sync(`${TEMP_OUT_DIR}/**/*.js`) compile(rootNames, { allowJs: true, esModuleInterop: true, @@ -34,4 +53,7 @@ function buildES5() { buildESM() -buildES5() \ No newline at end of file + +buildTempESM() +buildES5() +clearTempESM() diff --git a/packages/react/README.md b/packages/react/README.md index 9533a6a4697..27181ba8073 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -55,8 +55,8 @@ npm install --save @uform/react - [`useFieldState`](#useFieldState) - [`useForm`](#useForm) - [`useField`](#useField) - - [`useVirtualField`](#useVirtualField) - - [`useFormSpy`](#useFormSpy) + - [`useVirtualField`](#useVirtualField) + - [`useFormSpy`](#useFormSpy) - [API](#API) - [`createFormActions`](#createFormActions) - [`createAsyncFormActions`](#createAsyncFormActions) @@ -70,7 +70,7 @@ npm install --save @uform/react - [`IFieldState`](#IFieldState) - [`IVirtualFieldState`](#IVirtualFieldState) - [`IFormSpyProps`](#IFormSpyProps) - - [`IFieldHook`](#IFieldHook) + - [`IFieldHook`](#IFieldHook) - [`IVirtualFieldHook`](#IVirtualFieldHook) - [`ISpyHook`](#ISpyHook) - [`SyncValidateResponse`](#SyncValidateResponse) @@ -599,7 +599,7 @@ const App = () => {
{ - $(LifeCycleTypes.ON_FORM_INIT).subscribe(() => { + $(LifeCycleTypes.ON_FORM_INIT).subscribe(() => { setFieldState('displayTrigger', state => state.value = true) setFieldState('visibleTrigger', state => state.value = true) setFieldState('a', state => state.value = 1) @@ -616,7 +616,7 @@ const App = () => { setFieldState('b', state => { state.display = fieldState.value }) - }) + }) }} >
@@ -632,7 +632,7 @@ const App = () => { {({ state, form }) => { return (
- {JSON.stringify(form.getFormState(state => state.values))} + {JSON.stringify(form.getFormState(state => state.values))}
) }} @@ -721,7 +721,7 @@ const App = () => { }) }} > - +
@@ -821,11 +821,11 @@ const App = () => { state.props.loading = false state.props.dataSource = fieldState.value ? dataSource : [] }) - }, 300) + }, 300) }) }} - > - + > +
@@ -1101,7 +1101,7 @@ const App = () => { getEffects() }} > - +
@@ -1251,7 +1251,7 @@ const App = () => { {({ state, mutators }) => { - + const [start, end] = state.value return
@@ -1276,7 +1276,7 @@ const App = () => { Form values: 
-                {JSON.stringify(form.getFormState(state => state.values), null, 2)}    
+                {JSON.stringify(form.getFormState(state => state.values), null, 2)}
) @@ -1340,7 +1340,7 @@ const App = () => { set value
Field value:
- + 
{JSON.stringify(state.value, null, 2)}
@@ -1367,7 +1367,7 @@ const App = () => { Form values: 
-                {JSON.stringify(form.getFormState(state => state.values), null, 2)}    
+                {JSON.stringify(form.getFormState(state => state.values), null, 2)}
) @@ -1427,7 +1427,7 @@ interface IFieldStateUIProps { name?: string // Field value, is equal to values[0] value?: any // Field multi-parameter value, such as when the field onChange trigger, the event callback passed multi-parameter data, then the value of all parameters will be stored here values?: any[] // Initial value - + initialValue?: any // field extension properties visible?: boolean //Field initial visible status(Whether the data and style is visible) display?: boolean //Field initial display status(Whether the style is visible) @@ -1626,7 +1626,7 @@ const App = () => { }} - +
Field value:
- + 
{JSON.stringify(state.value, null, 2)}
 @@ -1379,7 +1379,7 @@ const App = () => { Form values: 
-                {JSON.stringify(form.getFormState(state => state.values), null, 2)}    
+                {JSON.stringify(form.getFormState(state => state.values), null, 2)}
) @@ -1653,7 +1653,7 @@ const App = () => { }} - +