storybook [功能请求] Angular:支持无区域性

xdyibdwo  于 6个月前  发布在  Angular
关注(0)|答案(4)|浏览(142)

讨论于 #28400
原帖作者 valentinpalkovic 2024年7月1日

你的特性请求是否与问题相关?请描述。

目前,Storybook总是使用zone.js进行变更检测。

请描述你希望的解决方案

Angular引入了一个名为 zoneless 的实验性功能。
主要好处是用户可以移除Zone.js以提高性能、改进Core Web Vitals、改进调试体验和更好的生态系统兼容性。
解决方案是在Storybook的Angular构建器选项中启用实验性的无zone模式,通过设置一个实验性标志来实现。

// angular.json
{
  "storybook": {
      "builder": "@storybook/angular:start-storybook",
      "options": {
         ...
         "experimentalZoneless": true
       }
   },
   "build-storybook": {
      "builder": "@storybook/angular:build-storybook",
      "options": {
            ...
            "experimentalZoneless": true
       }
    }
}

任务清单

  • 在Storybook的Angular构建器选项中支持新的实验性无zone标志。相关的文件有:

-- code/frameworks/angular/src/builders/build-storybook/schema.json
-- https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/build-storybook/index.ts
-- https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/start-storybook/schema.json
-- https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/start-storybook/index.ts

  • zone.js应有条件地加载

-- 这个 file 导入始终 globals.ts ,它总是加载zone.js。我们可以尝试删除导入并依赖人们在他们的 zone.js 的polyfills部分中设置 angular.json ,理论上Storybook也应该选择它。
-- 如果设置了 experimentalZoneless 标志,我们必须在这里注册无zone提供者:

const applicationRef = await queueBootstrapping(() => {
      return bootstrapApplication(application, {
        ...storyFnAngular.applicationConfig,
        providers: [
+        // Consider, that `provideExperimentalZonelessChangeDetection` cannot be imported "normally", because former Angular versions do not provide this export. A conditional dynamic import will be necessary
+        experimentalZoneless ? provideExperimentalZonelessChangeDetection() : null          
          storyPropsProvider(newStoryProps$),
          ...analyzedMetadata.applicationProviders,
          ...(storyFnAngular.applicationConfig?.providers ?? []),
-        ],
+        ].filter(Boolean),
      });
    });
  • 确保满足所有无zone要求:https://angular.dev/guide/experimental/zoneless#requirements-for-zoneless-compatibility。就我所看到的,我们只使用兼容无zone的ngzone.run函数。

验收标准

  • 如果用户没有在 angular.json 's <project>/architect/build/polyfills 数组中定义zone.js AND设置了 experimentalZoneless 选项,Storybook和通过控件更改进行的变更检测应该可以工作。

开发工作流程

你考虑过的替代方案是什么?

  • 无响应*

你是否能够协助将这个特性带入现实?

作为维护者,如果出现问题,我可以支持贡献者实现这个功能。

其他上下文

  • 无响应*
weylhg0b

weylhg0b1#

有人想参与吗?我非常感谢任何帮助和指导。

zu0ti5jz

zu0ti5jz2#

嘿,这个任务听起来真的很有趣,我想参与其中!

rfbsl7qr

rfbsl7qr3#

你好@anedomansky
感谢你接手这个任务!我会将这个任务分配给你。即使工作还没有完全完成,也可以创建一个草稿PR并在早期阶段链接问题。如果你需要任何支持,请告诉我!

smdncfj3

smdncfj34#

嘿,@valentinpalkovic,感谢你给我分配任务并提供支持💪。我会尽快开始,并在有进展或有任何问题时向你更新。

相关问题