feat: 抽出 ExampleDriverContext 支持可选 ResponsiveProvider

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';

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": [

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 = (
+        <MemoryRouter>
+            <GlobalProvider {...props}>{children}</GlobalProvider>
+        </MemoryRouter>
+    );
+    if (enableResponsiveProvider) {
+        return <ResponsiveProvider>{tree}</ResponsiveProvider>;
+    }
+    return tree;
+});
+
+export default ExampleDriverContext;

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 <MemoryRouter>
-        <GlobalProvider {...props}>{children}</GlobalProvider>
-    </MemoryRouter>
-});
+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}) => <ExampleDriverContext {...global} preset={preset}>
-            {children}
-        </ExampleDriverContext>
-    }, [global]);
+        return ({children}) => (
+            <ExampleDriverContext
+                {...global}
+                preset={preset}
+                enableResponsiveProvider={enableResponsiveProvider}
+            >
+                {children}
+            </ExampleDriverContext>
+        );
+    }, [global, preset, enableResponsiveProvider]);
     useEffect(() => {
         if (!exampleStyle) {
             return;

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';
+export {default as ExamplePage, ExampleContent} from './ExamplePage';
+export {default as ExampleDriverContext} from './ExampleDriverContext';