讨论于 #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和通过控件更改进行的变更检测应该可以工作。

开发工作流程

• 克隆Storybook
• 遵循贡献指南(有一个额外的针对Angular的部分): https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md

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

• 无响应*

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

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

其他上下文

• 无响应*