-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature] Angular 6 Builder #3995
Comments
Interesting suggestion. It can definitely be a package in the storybook org. Would you like to PR this? |
@igor-dv I started to have a look but to be honest, I am not an expert of storybook and I just started to understand how I'll try to make a small repo with a builder that could cover what the |
Sure, LMK if you need something, also we have a slack |
I didn't really progress on the builders...I don't have a lot of time and not a 'builder/webpack' guy so I have some technicals issues... But I had time to analyze and think about the list of tasks needed to make the builders, so I updated the ticket description. If anyone has any other ideas, do not hesitate to tell me and I will add them. |
@igor-dv import { Builder, BuilderConfiguration, BuilderContext, BuildEvent } from '@angular-devkit/architect';
import { from, Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { StartStorybookSchema } from './schema';
import { buildDev } from '@storybook/core/server';
import storyBookOptions from '@storybook/angular/dist/server/options';
export default class StartStorybookBuilder implements Builder<StartStorybookSchema> {
constructor(private context: BuilderContext) {}
run(builderConfig: BuilderConfiguration<Partial<StartStorybookSchema>>): Observable<BuildEvent> {
console.log('OK');
return of(null).pipe(
tap(_ => buildDev(storyBookOptions)),
map(() => ({ success: true }))
);
}
} But when I run it I have this issue:
Why do I need to add this dependency in my project ? Isn't a dependency provided by storybook ? Another question for my info, what is the differences between |
This issue was solved today https://github.com/storybooks/storybook/releases/tag/v4.0.0-alpha.18 |
Small update to avoid deletion of the issue ;) Repository of the POC: https://github.com/jogelin/storybook-builders Next step: integrate in the storybook repository to see how could we build the builders and update the core that could match the builders "way" |
Is this still on the roadmap ? |
For anyone that's looking for an Angular 6+ builder. They a PR which been placed for NX which contains a storybook builder. The builder is also cross platform so would work in mono-repo and micro frontends
It has other config options such as the path to tsconfig etc. Will try and build it out more if you have suggestions |
@igor-dv I have created such a builder as a standalone package, but if you're interested I'd be happy to convert it into a PR in this repo. |
cc @Marklb @kroeder @gaetanmaisse what do you guys think? |
I like the idea of providing a builder, since it fits more naturally with Angular's configuration. The main users I could see it benefiting are the ones with multiple projects that they want to have an independent storybook build for. I can't think of a reason Storybook should add a builder for any of Angular's targets, such as What I think would be useful is a
I don't have anything to add to the target's configuration, that hasn't already been mentioned, but an example of what I would expect the {
"projects": {
"example-app": {
"projectType": "application",
"root": "projects/example-app",
"sourceRoot": "projects/example-app/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": { ... }
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": { ... }
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": { ... }
},
"storybook": {
"builder": "@storybook/build-storybook:dev-server",
"options": { ... }
},
"build-storybook": {
"builder": "@storybook/build-storybook:build",
"options": { ... }
},
}
},
"example-lib": {
"projectType": "library",
"root": "projects/example-lib",
"sourceRoot": "projects/example-lib/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": { ... }
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": { ... }
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": { ... }
},
"storybook": {
"builder": "@storybook/build-storybook:dev-server",
"options": { ... }
},
"build-storybook": {
"builder": "@storybook/build-storybook:build",
"options": { ... }
},
}
},
// I am still deciding if something like this one would even be worth it.
"composed-sb-docs": {
"projectType": "application",
"root": "projects/composed-sb-docs",
"sourceRoot": "projects/composed-sb-docs/src",
"prefix": "app",
"architect": {
"storybook": {
"builder": "@storybook/build-storybook:dev-server-composed",
"options": { ... }
},
"build-storybook": {
"builder": "@storybook/build-storybook:build-composed",
"options": { ... }
},
}
},
},
"schematics": {
"@storybook/angular:application": { ... },
"@storybook/angular:library": { ... }
},
} Even though this issue is about builders, I like the use of schematics in @cmurczek's package. I have some simple VSCode snippets for stories that I sometimes use to scaffold the minor boilerplate in story files, but I have considered building schematics for them eventually. I almost always run a schematic to generate my component files and immediately create a
|
The builder I created actually uses a custom target rather than replacing one of Angular's targets. I considered Contrary to @jogelin's approach, my implementation builds on the way Storybook is currently configured, i.e. via the main.js and preview.js files. From the Angular dev's point of view it would indeed be preferable to have the settings directly in the options of the builder rather than in files on disk (especially when there are multiple projects with Storybook in an Angular workspace). However, moving the configuration there would need considerable refactoring of the storybook core server. In addition to the configuration via the main and preview files and their processing, the server would need to provide an API that accepts the settings and passes them to the relevant functions. If you decided to switch to a builder, the server and builder could be gradually refactored under the hood to get there. |
Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-beta.7 containing PR #15061 that references this issue. Upgrade today to the
Closing this issue. Please re-open if you think there's still more to do. |
I think it could be useful to have an Angular-Cli builder provided by storybook.
Then in
angular.json
, we could just do:Improvements:
angular.json
from storybookng serve storybook
orng build storybook
orng test storybook
angular.json
application. In my case, storybook help me to test many libraries declared in angular.json`.More infos: Customizing Angular CLI 6 build — an alternative to ng eject
Tasks to get there:
@storybook/angular:start
:tsConfig
,port
,host
,staticDirs
,configDir
,quiet
@storybook/angular:build
:tsConfig
,host
,staticDirs
,outputDir
,configDir
,watch
@storybook/angular:build
and include thestorybook/app/angular/server
functionalitiestsConfig
option to get typescript configurations instead of defaulttsconfig
in theconfigDir
builder options
:@angular/cli
webpack configs@storybook/angular:build
to create the builder@storybook/angular:start
@storybook/angular:test
to run tests in storybookstorybook/app/angular/server
by the builderstorybook/examples/angular-cli
@angular-builders/jest
storybook/lib/cli/generators/ANGULAR
to inject storybook project with builders inangular.json
Later improvments:
storybook/app/angular/client
functionalities (!!! don't know yet the faisability)config.ts
file:tsconfig
instead of a method in confaddons
in the builder specwebpackConfig
in the builder specThe text was updated successfully, but these errors were encountered: