From a99cb5e1475b0ced0763c1fcb9e1468a2d38a9f4 Mon Sep 17 00:00:00 2001 From: Linzp Date: Tue, 7 Jul 2026 18:50:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8A=BD=E5=87=BA=20ExampleDriverConte?= =?UTF-8?q?xt=20=E6=94=AF=E6=8C=81=E5=8F=AF=E9=80=89=20ResponsiveProvider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit example-driver LiveCode 已内置 Provider，默认关闭 enableResponsiveProvider； 导出 ExampleDriverContext，依赖 @kne/responsive-utils@^0.1.2，版本升至 2.4.0。 Co-authored-by: Cursor --- doc/api.md | 9 +++++++++ package.json | 8 +++++--- src/ExampleDriverContext.js | 26 +++++++++++++++++++++++++ src/ExamplePage.js | 39 +++++++++++++++++-------------------- src/index.js | 3 ++- 5 files changed, 60 insertions(+), 25 deletions(-) create mode 100644 src/ExampleDriverContext.js diff --git a/doc/api.md b/doc/api.md index 01df0f3..0acfe9f 100644 --- a/doc/api.md +++ b/doc/api.md @@ -99,6 +99,15 @@ const Entry = createEntry(children); | 属性名 | 说明 | 类型 | 默认值 | |-----|----|----|-----| | data | 组件数据 | object | - | +| enableResponsiveProvider | 是否在 contextComponent 外包一层 `@kne/responsive-utils` 的 `ResponsiveProvider` | boolean | `false`（`@kne/example-driver` ≥0.1.24 已在 LiveCode 内注入，默认无需开启） | + +```js +import {ExampleDriverContext} from '@kne/modules-dev/dist/index'; +``` + +### ExampleDriverContext + +示例 `contextComponent` 包装器（`GlobalProvider` + `MemoryRouter`）。可通过 `enableResponsiveProvider` 可选叠加 `ResponsiveProvider`。 ```js import {FontList} from '@kne/modules-dev/dist/index'; diff --git a/package.json b/package.json index 9e00add..5deb8eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne/modules-dev", - "version": "2.3.9", + "version": "2.4.0", "description": "用于辅助在项目内启动一个规范化组件开发的环境", "publishConfig": { "access": "public", @@ -41,11 +41,12 @@ "@kne/camel-case": "^0.1.1", "@kne/craco-module-federation": "^1.1.9", "@kne/ensure-slash": "^0.1.0", - "@kne/example-driver": "^0.1.22", + "@kne/example-driver": "^0.1.24", "@kne/fetch-npm-package": "^0.1.4", "@kne/md-doc": "^0.1.23", "@kne/react-fetch": "^1.4.3", "@kne/react-icon": "^0.1.4", + "@kne/responsive-utils": "^0.1.2", "ajv": "^8.18.0", "chokidar": "^3.5.3", "classnames": "^2.3.2", @@ -65,7 +66,8 @@ "antd": ">=5", "loader-utils": "*", "react": ">=18", - "react-router-dom": ">=6.4" + "react-router-dom": ">=6.4", + "@kne/responsive-utils": ">=0.1.2" }, "browserslist": { "production": [ diff --git a/src/ExampleDriverContext.js b/src/ExampleDriverContext.js new file mode 100644 index 0000000..da10ceb --- /dev/null +++ b/src/ExampleDriverContext.js @@ -0,0 +1,26 @@ +import React from 'react'; +import {MemoryRouter} from 'react-router-dom'; +import {ResponsiveProvider} from '@kne/responsive-utils'; +import {createWithRemoteLoader} from '@kne/remote-loader'; + +/** + * ExampleDriver contextComponent wrapper (GlobalProvider + router). + * `enableResponsiveProvider` defaults to false — @kne/example-driver LiveCode + * injects ResponsiveProvider with device-preview container mode since 0.1.24+. + */ +const ExampleDriverContext = createWithRemoteLoader({ + modules: ['components-core:Global@GlobalProvider'] +})(({remoteModules, children, enableResponsiveProvider = false, ...props}) => { + const [GlobalProvider] = remoteModules; + const tree = ( + + {children} + + ); + if (enableResponsiveProvider) { + return {tree}; + } + return tree; +}); + +export default ExampleDriverContext; diff --git a/src/ExamplePage.js b/src/ExamplePage.js index 6cbdf6c..543fc74 100644 --- a/src/ExamplePage.js +++ b/src/ExamplePage.js @@ -1,36 +1,33 @@ import '@kne/example-driver/dist/index.css'; -import React, {useEffect, useMemo} from "react"; -import get from "lodash/get"; -import {Space} from "antd"; -import style from "./example.module.scss"; -import classnames from "classnames"; -import ExampleDriver from "@kne/example-driver"; -import {MemoryRouter} from "react-router-dom"; +import React, {useEffect, useMemo} from 'react'; +import get from 'lodash/get'; +import {Space} from 'antd'; +import style from './example.module.scss'; +import classnames from 'classnames'; +import ExampleDriver from '@kne/example-driver'; import {createWithRemoteLoader} from '@kne/remote-loader'; import Highlight from './Highlight'; - -const ExampleDriverContext = createWithRemoteLoader({ - modules: ["components-core:Global@GlobalProvider"] -})(({remoteModules, children, ...props}) => { - const [GlobalProvider] = remoteModules; - return - {children} - -}); +import ExampleDriverContext from './ExampleDriverContext'; export const ExampleContent = createWithRemoteLoader({ modules: ["components-core:Global@useGlobalContext", "components-core:Global@usePreset"] -})(({remoteModules, data}) => { +})(({remoteModules, data, enableResponsiveProvider = false}) => { const [useGlobalContext, usePreset] = remoteModules; const {global: global} = useGlobalContext(); const preset = usePreset(); const exampleStyle = get(data, 'example.style'); const DriverContext = useMemo(() => { - return ({children}) => - {children} - - }, [global]); + return ({children}) => ( + + {children} + + ); + }, [global, preset, enableResponsiveProvider]); useEffect(() => { if (!exampleStyle) { return; diff --git a/src/index.js b/src/index.js index 75c4f94..26d29e1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ export {default} from './createEntry'; export {default as FontList} from './FontList'; export {default as Example} from './Example'; -export {default as ExamplePage, ExampleContent} from './ExamplePage'; \ No newline at end of file +export {default as ExamplePage, ExampleContent} from './ExamplePage'; +export {default as ExampleDriverContext} from './ExampleDriverContext'; \ No newline at end of file