{"_id":"@ambilight-taro/dynamic-render-controller","name":"@ambilight-taro/dynamic-render-controller","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ambilight-taro/dynamic-render-controller","version":"1.0.0","description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fdynamic-render-controller) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fdynamic-render-controller)","main":"./lib/index.js","types":"./lib/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","build:watch":"rollup -cw"},"repository":{"type":"git","url":"git+https://github.com/pesce-salato/ambilight-taro-ui.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/pesce-salato/ambilight-taro-ui/issues"},"homepage":"https://github.com/pesce-salato/ambilight-taro-ui#readme","devDependencies":{"@ambilight-taro/rollup-config":"*","@ambilight-taro/tsconfig":"*","@tarojs/components":"3.6.19","@tarojs/taro":"3.6.19","@types/react":"^18.2.38","react":"^18.0.0","rollup":"^4.5.1","typescript":"^5.3.2"},"dependencies":{"@ambilight-taro/basic-view":"^1.0.0","@ambilight-taro/core":"^1.0.0"},"gitHead":"9ab8a57d0a8fda45ebfa6bd4e46e8ab04a420935","_id":"@ambilight-taro/dynamic-render-controller@1.0.0","_nodeVersion":"20.18.2","_npmVersion":"lerna/7.4.2/node@v20.18.2+arm64 (darwin)","dist":{"integrity":"sha512-AEz7UWNWMJxM+ipzVhZGWhuct4Ff0wC2timS4VTE0qd1a1Ynt97r4du2w53Z+oJnhbboMqbqsuQv3aa52UCPqA==","shasum":"f3448e79c752608ed0f30f19a17dc2a104a11f3f","tarball":"https://registry.npmjs.org/@ambilight-taro/dynamic-render-controller/-/dynamic-render-controller-1.0.0.tgz","fileCount":13,"unpackedSize":13244,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDtjXyxlP4Yz8xHSun937l3y4tYvLuxsBZFkvBxwylQhwIgCEBEXR3TTpTKJ60oTAdBzlf5m08pY3a2qBddEp8XCkc="}]},"_npmUser":{"name":"chicken_bro","email":"ordinary_person@outlook.com"},"directories":{},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dynamic-render-controller_1.0.0_1742741474540_0.6109880349904047"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-23T14:51:14.467Z","1.0.0":"2025-03-23T14:51:14.726Z","modified":"2025-03-23T14:51:14.983Z"},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fdynamic-render-controller) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fdynamic-render-controller)","homepage":"https://github.com/pesce-salato/ambilight-taro-ui#readme","repository":{"type":"git","url":"git+https://github.com/pesce-salato/ambilight-taro-ui.git"},"bugs":{"url":"https://github.com/pesce-salato/ambilight-taro-ui/issues"},"license":"MIT","readme":"# @ambilight-taro/dynamic-render-controller\n\n![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fdynamic-render-controller)\n![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fdynamic-render-controller)\n\n## Installation\n\n```shell\nnpm install @ambilight-taro/dynamic-render-controller\n```\n\n## Usage\n\n动态渲染管理器（作用就和名字一样hhh）\n\n因为在 Taro 小程序环境下，无法动态的调用 `render` 将节点渲染到页面中，故而只能退而求其次，创建一个固定的渲染管理器，手动插入到页面中，用作动态 `render`\n\n此组件也是组件库中`AlToast.show`、`AlPopup.show`等函数式调用能力的依赖项\n\n### Basic\n\n```tsx\nimport { AlDynamicRenderController } from '@ambilight-taro/dynamic-render-controller'\n\n// 所有动态渲染都将作为 children of AlDynamicRenderController 渲染到页面中\n<AlDynamicRenderController />\n```\n\n### Set controller id(recommend)\n\n我们推荐为每一个控制器都设置全剧唯一的 `controllerId`\n\n`AlToast.show`、`AlPopup.show`底层调用的组件提供的`safeRender`函数能力，如果不设置明确`id`，则会默认渲染到最新创建且存在的**Controller**中\n\n```tsx\n<AlDynamicRenderController controllerId=\"test\" />\n```\n\n### Advance\n\n我们可以借助 `safeRender` 来实现自己的函数式调用功能\n\n- `render` 渲染节点到控制器中（如出现错误则会直接抛出错误）\n- `safeRender` 安全渲染器（如出现错误则会进入错误队列，后续在恰当时机再次尝试）\n\n```tsx\nimport { safeRender } from '@ambilight-taro/dynamic-render-controller'\n\nconst showMeTheMoney = () => {\n  const controller = safeRender({\n    component: View,\n    // targetId 可以不设置\n    targetId: 'targetId',\n    props: {\n      children: '¥999999999'\n    }\n  })\n\n  setTimeout(() => {\n    controller.changeProps({\n      children: '¥1000000000'\n    })\n  }, 1000)\n\n  setTimeout(() => {\n    controller.remove()\n  }, 2000)\n}\n```\n\n## Props & Types\n\n```tsx\ninterface AlDynamicRenderControllerProps {\n  /**\n   * 控制器 id（请保持全应用唯一）\n   */\n  controllerId?: string\n}\n```\n\n```tsx\ninterface RenderDetail {\n  /**\n   * 渲染组件\n   */\n  component: React.FunctionComponent<any> | React.ComponentClass<any>\n  /**\n   * 渲染组件 Props\n   */\n  props: any\n  /**\n   * 目标控制器 id\n   */\n  targetId?: string\n}\n\ntype Render = <P = any>(detail: RenderDetail) => {\n  /**\n   * 修改 props（使用浅层合并覆盖）\n   */\n  changeProps: (newProps: Partial<P>) => void\n  /**\n   * 删除当前渲染节点\n   * @returns void\n   */\n  remove: () => void\n}\n```\n","readmeFilename":"README.md","_rev":"1-9645d10a1dc16154a5971a489eebb1f3"}