diff --git a/.dumirc.ts b/.dumirc.ts index 2d8caaab..5b17c3c5 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -16,6 +16,6 @@ export default defineConfig({ base: basePath, publicPath, alias: { - 'rc-util/es': path.resolve(__dirname, 'src'), + '@rc-component/util/es': path.resolve(__dirname, 'src'), }, }); diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000..758659af --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,2 @@ +github: ant-design +open_collective: ant-design diff --git a/.github/workflows/cloudflare-pages-preview.yml b/.github/workflows/cloudflare-pages-preview.yml new file mode 100644 index 00000000..3156dde3 --- /dev/null +++ b/.github/workflows/cloudflare-pages-preview.yml @@ -0,0 +1,42 @@ +name: Cloudflare Pages Preview + +on: + pull_request: + +concurrency: + group: ${{ github.workflow }}-${{ github.event.pull_request.number }} + cancel-in-progress: true + +permissions: + contents: read + deployments: write + +jobs: + preview: + runs-on: ubuntu-latest + env: + CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} + CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} + CLOUDFLARE_PAGES_PROJECT: ${{ vars.CLOUDFLARE_PAGES_PROJECT }} + PREVIEW: true + steps: + - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + persist-credentials: false + - name: Skip Cloudflare Pages preview + if: ${{ env.CLOUDFLARE_API_TOKEN == '' || env.CLOUDFLARE_ACCOUNT_ID == '' || env.CLOUDFLARE_PAGES_PROJECT == '' }} + run: echo "Cloudflare Pages preview is not configured; skip deployment." + - name: Install dependencies + if: ${{ env.CLOUDFLARE_API_TOKEN != '' && env.CLOUDFLARE_ACCOUNT_ID != '' && env.CLOUDFLARE_PAGES_PROJECT != '' }} + run: npm install + - name: Build site + if: ${{ env.CLOUDFLARE_API_TOKEN != '' && env.CLOUDFLARE_ACCOUNT_ID != '' && env.CLOUDFLARE_PAGES_PROJECT != '' }} + run: npm run build + - name: Deploy preview + if: ${{ env.CLOUDFLARE_API_TOKEN != '' && env.CLOUDFLARE_ACCOUNT_ID != '' && env.CLOUDFLARE_PAGES_PROJECT != '' }} + uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 + with: + apiToken: ${{ env.CLOUDFLARE_API_TOKEN }} + accountId: ${{ env.CLOUDFLARE_ACCOUNT_ID }} + command: pages deploy .doc --project-name=${{ env.CLOUDFLARE_PAGES_PROJECT }} --branch=${{ github.head_ref }} + gitHubToken: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index ecfbc108..f90632b1 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -1,12 +1,12 @@ -name: "CodeQL" +name: 'CodeQL' on: push: - branches: [ "master" ] + branches: ['master'] pull_request: - branches: [ "master" ] + branches: ['master'] schedule: - - cron: "4 6 * * 0" + - cron: '4 6 * * 0' jobs: analyze: @@ -20,22 +20,24 @@ jobs: strategy: fail-fast: false matrix: - language: [ javascript ] + language: [javascript] steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + persist-credentials: false - name: Initialize CodeQL - uses: github/codeql-action/init@v2 + uses: github/codeql-action/init@411bbbe57033eedfc1a82d68c01345aa96c737d7 with: languages: ${{ matrix.language }} queries: +security-and-quality - name: Autobuild - uses: github/codeql-action/autobuild@v2 + uses: github/codeql-action/autobuild@411bbbe57033eedfc1a82d68c01345aa96c737d7 - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 + uses: github/codeql-action/analyze@411bbbe57033eedfc1a82d68c01345aa96c737d7 with: - category: "/language:${{ matrix.language }}" + category: '/language:${{ matrix.language }}' diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml index 21c24587..f8482b63 100644 --- a/.github/workflows/react-component-ci.yml +++ b/.github/workflows/react-component-ci.yml @@ -2,5 +2,5 @@ name: ✅ test on: [push, pull_request] jobs: test: - uses: react-component/rc-test/.github/workflows/test-npm.yml@main + uses: react-component/rc-test/.github/workflows/test-utoo.yml@main secrets: inherit diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml new file mode 100644 index 00000000..f68281c8 --- /dev/null +++ b/.github/workflows/react-doctor.yml @@ -0,0 +1,27 @@ +name: React Doctor + +on: + pull_request: + types: [opened, synchronize, reopened, ready_for_review] + push: + branches: [master] + +permissions: + contents: read + pull-requests: write + issues: write + statuses: write + +concurrency: + group: react-doctor-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true + +jobs: + react-doctor: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + fetch-depth: 0 + persist-credentials: false + - uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3 diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml index 8d4aaff4..fc0be433 100644 --- a/.github/workflows/site-deploy.yml +++ b/.github/workflows/site-deploy.yml @@ -13,10 +13,12 @@ jobs: runs-on: ubuntu-latest steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + persist-credentials: false - name: setup node - uses: actions/setup-node@v1 + uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e with: node-version: 20 @@ -30,7 +32,7 @@ jobs: run: npm run build - name: Deploy to GitHub Pages - uses: peaceiris/actions-gh-pages@v3 + uses: peaceiris/actions-gh-pages@329bcc8f12caed2cefe5a5b80781499a6f3b361b with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./.doc diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml new file mode 100644 index 00000000..63eef737 --- /dev/null +++ b/.github/workflows/surge-preview.yml @@ -0,0 +1,39 @@ +name: Surge Preview + +on: + pull_request: + +concurrency: + group: ${{ github.workflow }}-${{ github.event.pull_request.number }} + cancel-in-progress: true + +permissions: + contents: read + pull-requests: write + checks: write + statuses: write + +jobs: + preview: + runs-on: ubuntu-latest + env: + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + PREVIEW: true + steps: + - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + persist-credentials: false + - uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec + if: ${{ env.SURGE_TOKEN != '' }} + with: + surge_token: ${{ env.SURGE_TOKEN }} + github_token: ${{ secrets.GITHUB_TOKEN }} + dist: .doc + failOnError: true + setCommitStatus: true + build: | + npm install + npm run build + - name: Skip Surge preview + if: ${{ env.SURGE_TOKEN == '' }} + run: echo "SURGE_TOKEN is not configured; skip Surge preview." diff --git a/README.md b/README.md index 7b8ae351..2de1312c 100644 --- a/README.md +++ b/README.md @@ -1,303 +1,167 @@ -# rc-util +
+

@rc-component/util

+

🧰 Common React utilities shared across rc-component packages.

-Common Utils For React Component. + + Ant Design + -[![NPM version][npm-image]][npm-url] -[![npm download][download-image]][download-url] -[![build status][github-actions-image]][github-actions-url] -[![Codecov][codecov-image]][codecov-url] -[![bundle size][bundlephobia-image]][bundlephobia-url] -[![dumi][dumi-image]][dumi-url] +

Part of the Ant Design ecosystem.

-[npm-image]: http://img.shields.io/npm/v/rc-util.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-util -[travis-image]: https://img.shields.io/travis/react-component/util/master?style=flat-square -[travis-url]: https://travis-ci.com/react-component/util +[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url] + +
+ +[npm-image]: https://img.shields.io/npm/v/@rc-component/util.svg?style=flat-square +[npm-url]: https://npmjs.org/package/@rc-component/util [github-actions-image]: https://github.com/react-component/util/actions/workflows/react-component-ci.yml/badge.svg [github-actions-url]: https://github.com/react-component/util/actions/workflows/react-component-ci.yml [codecov-image]: https://img.shields.io/codecov/c/github/react-component/util/master.svg?style=flat-square [codecov-url]: https://app.codecov.io/gh/react-component/util -[david-url]: https://david-dm.org/react-component/util -[david-image]: https://david-dm.org/react-component/util/status.svg?style=flat-square -[david-dev-url]: https://david-dm.org/react-component/util?type=dev -[david-dev-image]: https://david-dm.org/react-component/util/dev-status.svg?style=flat-square -[download-image]: https://img.shields.io/npm/dm/rc-util.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-util -[bundlephobia-url]: https://bundlephobia.com/package/rc-util -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-util -[dumi-url]: https://github.com/umijs/dumi +[download-image]: https://img.shields.io/npm/dm/@rc-component/util.svg?style=flat-square +[download-url]: https://npmjs.org/package/@rc-component/util +[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/%40rc-component%2Futil?style=flat-square +[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/util [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square +[dumi-url]: https://github.com/umijs/dumi -## Install - -[![rc-util](https://nodei.co/npm/rc-util.png)](https://npmjs.org/package/rc-util) - -## API - -### createChainedFunction - -> (...functions): Function - -Create a function which will call all the functions with it's arguments from left to right. - -```jsx|pure -import createChainedFunction from 'rc-util/lib/createChainedFunction'; -``` - -### deprecated - -> (prop: string, instead: string, component: string): void - -Log an error message to warn developers that `prop` is deprecated. - -```jsx|pure -import deprecated from 'rc-util/lib/deprecated'; -``` - -### getContainerRenderMixin - -> (config: Object): Object - -To generate a mixin which will render specific component into specific container automatically. - -```jsx|pure -import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin'; -``` - -Fields in `config` and their meanings. - -| Field | Type | Description | Default | -| ------------- | ---------------------------- | -------------------------------------------------------------------------- | ------- | -| autoMount | boolean | Whether to render component into container automatically | true | -| autoDestroy | boolean | Whether to remove container automatically while the component is unmounted | true | -| isVisible | (instance): boolean | A function to get current visibility of the component | - | -| isForceRender | (instance): boolean | A function to determine whether to render popup even it's not visible | - | -| getComponent | (instance, extra): ReactNode | A function to get the component which will be rendered into container | - | -| getContainer | (instance): HTMLElement | A function to get the container | | - -### Portal - -Render children to the specific container; - -```jsx|pure -import Portal from 'rc-util/lib/Portal'; -``` - -Props: - -| Prop | Type | Description | Default | -| ------------ | --------------- | ------------------------------- | ------- | -| children | ReactChildren | Content render to the container | - | -| getContainer | (): HTMLElement | A function to get the container | - | - -### getScrollBarSize - -> (fresh?: boolean): number - -Get the width of scrollbar. - -```jsx|pure -import getScrollBarSize from 'rc-util/lib/getScrollBarSize'; -``` - -### guid - -> (): string - -To generate a global unique id across current application. - -```jsx|pure -import guid from 'rc-util/lib/guid'; -``` - -### pickAttrs - -> (props: Object): Object - -Pick valid HTML attributes and events from props. - -```jsx|pure -import pickAttrs from 'rc-util/lib/pickAttrs'; -``` - -### warn - -> (msg: string): void - -A shallow wrapper of `console.warn`. - -```jsx|pure -import warn from 'rc-util/lib/warn'; -``` - -### warning - -> (valid: boolean, msg: string): void - -A shallow wrapper of [warning](https://github.com/BerkeleyTrue/warning), but only warning once for the same message. - -```jsx|pure -import warning, { noteOnce } from 'rc-util/lib/warning'; - -warning(false, '[antd Component] test hello world'); - -// Low level note -noteOnce(false, '[antd Component] test hello world'); -``` - -### Children - -A collection of functions to operate React elements' children. - -#### Children/mapSelf +## Highlights -> (children): children +- React 18+ compatible helpers used by rc-component packages. +- Ref composition, React 19 ref compatibility checks, and portal helpers. +- DOM helpers for focus management, dynamic styles, visibility, shadow roots, and scrollbar measurement. +- Hooks for controlled state, layout effects, stable callbacks, memo comparison, and ids. +- Small data utilities for object paths, shallow props merging, omission, equality checks, and child flattening. -Return a shallow copy of children. +## Install -```jsx|pure -import mapSelf from 'rc-util/lib/Children/mapSelf'; +```bash +npm install @rc-component/util ``` -#### Children/toArray +## Usage -> (children: ReactNode[]): ReactNode[] +```tsx | pure +import { useMergedState, warning } from '@rc-component/util'; -Convert children into an array. +export default function Demo() { + const [open, setOpen] = useMergedState(false, { + onChange: nextOpen => { + warning(typeof nextOpen === 'boolean', '`open` should be boolean.'); + }, + }); -```jsx|pure -import toArray from 'rc-util/lib/Children/toArray'; + return ( + + ); +} ``` -### Dom - -A collection of functions to operate DOM elements. - -#### Dom/addEventlistener +Deep imports are also available when a package needs a single helper: -> (target: ReactNode, eventType: string, listener: Function): { remove: Function } - -A shallow wrapper of [add-dom-event-listener](https://github.com/yiminghe/add-dom-event-listener). - -```jsx|pure -import addEventlistener from 'rc-util/lib/Dom/addEventlistener'; +```ts | pure +import Portal from '@rc-component/util/es/Portal'; +import { composeRef } from '@rc-component/util/es/ref'; +import KeyCode from '@rc-component/util/es/KeyCode'; ``` -#### Dom/canUseDom - -> (): boolean +New code should prefer `@rc-component/util`. Legacy projects may still contain `rc-util` imports while they migrate to the scoped package. -Check if DOM is available. +## Examples -```jsx|pure -import canUseDom from 'rc-util/lib/Dom/canUseDom'; +```bash +npm install +npm start ``` -#### Dom/class - -A collection of functions to operate DOM nodes' class name. - -- `hasClass(node: HTMLElement, className: string): boolean` -- `addClass(node: HTMLElement, className: string): void` -- `removeClass(node: HTMLElement, className: string): void` +Then open . -```jsx|pure -import cssClass from 'rc-util/lib/Dom/class; -``` +## API -#### Dom/contains +### Hooks -> (root: HTMLElement, node: HTMLElement): boolean +| Export | Description | +| ------------------------------------------ | ------------------------------------------------------------------------------------------------------ | +| `useControlledState` | Controlled/uncontrolled state helper for React 18+ projects. | +| `useMergedState` | Legacy controlled/uncontrolled state helper with `defaultValue`, `value`, `onChange`, and `postState`. | +| `useEvent` | Stable callback wrapper that always calls the latest handler. | +| `useLayoutEffect`, `useLayoutUpdateEffect` | Layout effect helpers with server-side rendering guards. | +| `useMemo` | Memo helper with a custom comparison function. | +| `useState` | State helper that can ignore updates after destroy. | +| `useSyncState` | Synchronous state getter and updater pair. | +| `useId`, `getId` | Stable id helpers. | -Check if node is equal to root or in the subtree of root. +### Refs -```jsx|pure -import contains from 'rc-util/lib/Dom/contains'; -``` +| Export | Description | +| ------------------------------ | ------------------------------------------------------------------------ | +| `composeRef`, `useComposeRef` | Merge multiple refs into a single ref callback. | +| `fillRef` | Assign a value to callback and object refs. | +| `getNodeRef` | Read refs from React elements, including the React 19 `props.ref` shape. | +| `supportRef`, `supportNodeRef` | Check whether a component or element can receive refs. | -#### Dom/css +### DOM -A collection of functions to get or set css styles. +| Export | Description | +| -------------------------------------------- | ------------------------------------------------------------------------- | +| `canUseDom` | Check whether DOM APIs are available. | +| `contains` | Check whether one DOM node contains another. | +| `getDOM`, `isDOM` | Resolve or test DOM nodes from refs and elements. | +| `getFocusNodeList`, `triggerFocus` | Find focusable nodes and focus inputs with optional cursor placement. | +| `lockFocus`, `useLockFocus` | Keep focus inside a container until the lock is released. | +| `injectCSS`, `updateCSS`, `removeCSS` | Add, update, and remove dynamic style nodes with CSP and prepend support. | +| `getShadowRoot` | Resolve the shadow root for a node. | +| `isStyleSupport` | Check browser style support. | +| `isVisible` | Check whether a DOM node is visible. | +| `getScrollBarSize`, `getTargetScrollBarSize` | Measure global or target scrollbar size. | -- `get(node: HTMLElement, name?: string): any` -- `set(node: HTMLElement, name?: string, value: any) | set(node, object)` -- `getOuterWidth(el: HTMLElement): number` -- `getOuterHeight(el: HTMLElement): number` -- `getDocSize(): { width: number, height: number }` -- `getClientSize(): { width: number, height: number }` -- `getScroll(): { scrollLeft: number, scrollTop: number }` -- `getOffset(node: HTMLElement): { left: number, top: number }` +### React And Data Utilities -```jsx|pure -import css from 'rc-util/lib/Dom/css'; -``` +| Export | Description | +| ------------------------------------ | --------------------------------------------------------------------- | +| `Portal` | Render children into a specific container. | +| `render`, `unmount` | Compatibility wrappers for rendering and unmounting React roots. | +| `toArray` | Convert React children to an array with optional keep-empty behavior. | +| `KeyCode` | Keyboard code enum and key event helpers. | +| `get`, `set`, `merge`, `mergeWith` | Object path and merge helpers. | +| `isEqual` | Equality check with optional shallow compare mode. | +| `mergeProps` | Merge React props while composing event handlers. | +| `omit`, `pickAttrs`, `proxyObject` | Object and DOM attribute helpers. | +| `raf` | RequestAnimationFrame wrapper with cancel support. | +| `isMobile` | Runtime mobile detection helper. | +| `warning`, `noteOnce`, `resetWarned` | Development warnings with once-only helpers. | -#### Dom/focus +### Test Helpers -A collection of functions to operate focus status of DOM node. +| Export | Description | +| --------------------------------------------- | ------------------------------------------------------ | +| `spyElementPrototype`, `spyElementPrototypes` | Temporarily spy on element prototype methods in tests. | -- `saveLastFocusNode(): void` -- `clearLastFocusNode(): void` -- `backLastFocusNode(): void` -- `getFocusNodeList(node: HTMLElement): HTMLElement[]` get a list of focusable nodes from the subtree of node. -- `limitTabRange(node: HTMLElement, e: Event): void` +## Development -```jsx|pure -import focus from 'rc-util/lib/Dom/focus'; +```bash +npm install +npm start ``` -#### Dom/support - -> { animation: boolean | Object, transition: boolean | Object } - -A flag to tell whether current environment supports `animationend` or `transitionend`. - -```jsx|pure -import support from 'rc-util/lib/Dom/support'; +```bash +npm test +npm run tsc +npm run lint +npm run compile +npm run build ``` -### KeyCode - -> Enum - -Enum of KeyCode, please check the [definition](https://github.com/react-component/util/blob/master/src/KeyCode.ts) of it. +## Release -```jsx|pure -import KeyCode from 'rc-util/lib/KeyCode'; +```bash +npm run prepublishOnly ``` -#### KeyCode.isTextModifyingKeyEvent - -> (e: Event): boolean - -Whether text and modified key is entered at the same time. - -#### KeyCode.isCharacterKey - -> (keyCode: KeyCode): boolean - -Whether character is entered. - -### ScrollLocker - -> ScrollLocker<{lock: (options: {container: HTMLElement}) => void, unLock: () => void}> - -improve shake when page scroll bar hidden. - -`ScrollLocker` change body style, and add a class `ant-scrolling-effect` when called, so if you page look abnormal, please check this; - -```js -import ScrollLocker from 'rc-util/lib/Dom/scrollLocker'; - -const scrollLocker = new ScrollLocker(); - -// lock -scrollLocker.lock() - -// unLock -scrollLocker.unLock() -``` +The release script compiles the package and runs `rc-np`. ## License -[MIT](/LICENSE) +`@rc-component/util` is released under the MIT license. diff --git a/docs/examples/dynaymicCSS.tsx b/docs/examples/dynaymicCSS.tsx index d77f14ee..3b6d3d43 100644 --- a/docs/examples/dynaymicCSS.tsx +++ b/docs/examples/dynaymicCSS.tsx @@ -1,5 +1,5 @@ -import type { Prepend } from 'rc-util/es/Dom/dynamicCSS'; -import { removeCSS, updateCSS } from 'rc-util/es/Dom/dynamicCSS'; +import type { Prepend } from '@rc-component/util/es/Dom/dynamicCSS'; +import { removeCSS, updateCSS } from '@rc-component/util/es/Dom/dynamicCSS'; import React from 'react'; function injectStyle(id: number, prepend?: Prepend, priority?: number) { diff --git a/docs/examples/focus.tsx b/docs/examples/focus.tsx index 1330e338..fe10bcb2 100644 --- a/docs/examples/focus.tsx +++ b/docs/examples/focus.tsx @@ -1,5 +1,5 @@ +import { useLockFocus } from '@rc-component/util/es/Dom/focus'; import React, { useRef } from 'react'; -import { useLockFocus } from '../../src/Dom/focus'; export default function FocusDemo() { const containerRef = useRef(null); diff --git a/docs/examples/getScrollBarSize.tsx b/docs/examples/getScrollBarSize.tsx index b6988f6f..5abedc5e 100644 --- a/docs/examples/getScrollBarSize.tsx +++ b/docs/examples/getScrollBarSize.tsx @@ -1,6 +1,6 @@ import getScrollBarSize, { getTargetScrollBarSize, -} from 'rc-util/es/getScrollBarSize'; +} from '@rc-component/util/es/getScrollBarSize'; import React from 'react'; const cssText = ` diff --git a/docs/examples/portal.tsx b/docs/examples/portal.tsx index 50b30c3a..42573088 100644 --- a/docs/examples/portal.tsx +++ b/docs/examples/portal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import PortalWrapper from 'rc-util/es/PortalWrapper'; +import PortalWrapper from '@rc-component/util/es/PortalWrapper'; const Demo: React.FC = () => { const divRef = React.useRef(null); diff --git a/docs/examples/styleChecker.tsx b/docs/examples/styleChecker.tsx index 2544d2aa..89515a5d 100644 --- a/docs/examples/styleChecker.tsx +++ b/docs/examples/styleChecker.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { isStyleSupport } from 'rc-util/es/Dom/styleChecker'; +import { isStyleSupport } from '@rc-component/util/es/Dom/styleChecker'; export default () => { const supportFlex = isStyleSupport('flex'); diff --git a/docs/examples/toArray.tsx b/docs/examples/toArray.tsx index 647ae274..4efe9cd7 100644 --- a/docs/examples/toArray.tsx +++ b/docs/examples/toArray.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import toArray, { type Option } from 'rc-util/es/Children/toArray'; +import toArray, { type Option } from '@rc-component/util/es/Children/toArray'; const initialState = { 'no-children': false, @@ -8,45 +8,56 @@ const initialState = { 'nested-children': false, 'array-of-children': false, 'is-falsy': false, - 'fragment': false, -} as const + fragment: false, +} as const; -type Action = keyof typeof initialState +type Action = keyof typeof initialState; -const Wrapper = ({ children, ...options }: { children?: React.ReactNode } & Option) => { +const Wrapper = ({ + children, + ...options +}: { children?: React.ReactNode } & Option) => { window.console.log(toArray(children, options)); return children as any; }; -const DemoBox = React.memo(({ children, name }: { children?: any, name: Action }) => { - const [keepEmpty, setkeepEmpty] = React.useState(false); - const [show, setShow] = React.useState(false) - return ( - - - -
- {show && React.cloneElement(children, { keepEmpty })} -
- - ) -}) +const DemoBox = React.memo( + ({ children, name }: { children?: any; name: Action }) => { + const [keepEmpty, setkeepEmpty] = React.useState(false); + const [show, setShow] = React.useState(false); + return ( + + + +
+ {show && React.cloneElement(children, { keepEmpty })} +
+ + ); + }, +); const App = () => ( <> -

Press F12 to open the console (Click Clear Console)

+

+ Press F12 to open the console (Click Clear Console) +

@@ -59,42 +70,42 @@ const App = () => ( - +

1

2 - +
    - {Array.from({ length: 5 }, (_, i) =>
  • {i}
    • )} + {Array.from({ length: 5 }, (_, i) => ( +
  • {i}
    • + ))}
- - { + + {[ [ [ - [ - 111, - 222, - 333 - ], - 444, - 555 + 111, + 222, + 333, ], - 666, - 777 - ] - } + 444, + 555, + ], + 666, + 777, + ]} - + {null} {undefined} {false} @@ -106,18 +117,16 @@ const App = () => ( - + - A - + A + - B + B ); - - -export default App; \ No newline at end of file +export default App; diff --git a/docs/index.md b/docs/index.md index e531e8ca..ab919452 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,7 +1,7 @@ --- hero: - title: rc-util - description: Common Utils For React Component + title: '@rc-component/util' + description: Common React utilities shared across rc-component packages --- diff --git a/package.json b/package.json index d64a82f6..801f4b0e 100644 --- a/package.json +++ b/package.json @@ -25,17 +25,16 @@ "build": "dumi build", "compile": "father build", "coverage": "npm test -- --coverage", - "lint": "eslint src/ --ext .tsx,.ts & eslint tests/ --ext .tsx,.ts", + "lint": "eslint src/ tests/ --ext .tsx,.ts", "prepare": "husky install", "prepublishOnly": "npm run compile && rc-np", + "prettier": "prettier --write --ignore-unknown .", "start": "dumi dev", - "test": "rc-test" + "test": "rc-test", + "tsc": "tsc --noEmit" }, "lint-staged": { - "**/*.{js,jsx,tsx,ts,md,json}": [ - "prettier --write", - "git add" - ] + "**/*.{js,jsx,tsx,ts,md,json}": "prettier --write --ignore-unknown" }, "dependencies": { "is-mobile": "^5.0.0", diff --git a/tsconfig.json b/tsconfig.json index 7ab37155..57d93aa0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,9 +9,10 @@ "esModuleInterop": true, "paths": { "@/*": ["src/*"], - "@@/*": ["src/.dumi/*"], - "rc-util": ["src/index.ts"], - "rc-util/es/*": ["src/*"] + "@@/*": [".dumi/tmp/*"], + "@rc-component/util": ["src/index.ts"], + "@rc-component/util/es/*": ["src/*"] } - } + }, + "include": [".dumirc.ts", ".fatherrc.ts", "docs", "src", "tests"] } diff --git a/vercel.json b/vercel.json new file mode 100644 index 00000000..fe70e766 --- /dev/null +++ b/vercel.json @@ -0,0 +1,6 @@ +{ + "framework": "umijs", + "installCommand": "npm install", + "buildCommand": "npm run build", + "outputDirectory": ".doc" +}