Add support for aliasing via object expression

storybookjs · Apr 28, 2023 · 3ac0c0b · 3ac0c0b
1 parent 8855f14
commit 3ac0c0b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 26 deletions.
diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts
@@ -1,6 +1,8 @@
 import {
   BuilderContext,
+  BuilderHandlerFn,
   BuilderOutput,
+  BuilderOutputLike,
   Target,
   createBuilder,
   targetFromTargetString,
@@ -42,17 +44,15 @@ export type StorybookBuilderOptions = JsonObject & {
     'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'
   >;
 
-export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
+export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string]: any };
 
 type StandaloneBuildOptions = StandaloneOptions & { outputDir: string };
 
-export default createBuilder<any, any>(commandBuilder);
-
-function commandBuilder(
-  options: StorybookBuilderOptions,
-  context: BuilderContext
-): Observable<StorybookBuilderOutput> {
-  return from(setup(options, context)).pipe(
+const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
+  options,
+  context
+): BuilderOutputLike => {
+  const builder = from(setup(options, context)).pipe(
     switchMap(({ tsConfig }) => {
       const runCompodoc$ = options.compodoc
         ? runCompodoc({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe(
@@ -109,7 +109,11 @@ function commandBuilder(
       return { success: true };
     })
   );
-}
+
+  return builder as any as BuilderOutput;
+};
+
+export default createBuilder(commandBuilder);
 
 async function setup(options: StorybookBuilderOptions, context: BuilderContext) {
   let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;

diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts
@@ -1,5 +1,6 @@
 import {
   BuilderContext,
+  BuilderHandlerFn,
   BuilderOutput,
   Target,
   createBuilder,
@@ -53,13 +54,8 @@ export type StorybookBuilderOptions = JsonObject & {
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 
-export default createBuilder<any, any>(commandBuilder);
-
-function commandBuilder(
-  options: StorybookBuilderOptions,
-  context: BuilderContext
-): Observable<StorybookBuilderOutput> {
-  return from(setup(options, context)).pipe(
+const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, context) => {
+  const builder = from(setup(options, context)).pipe(
     switchMap(({ tsConfig }) => {
       const runCompodoc$ = options.compodoc
         ? runCompodoc({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe(
@@ -130,7 +126,11 @@ function commandBuilder(
       return { success: true, info: { port } };
     })
   );
-}
+
+  return builder as any as BuilderOutput;
+};
+
+export default createBuilder(commandBuilder);
 
 async function setup(options: StorybookBuilderOptions, context: BuilderContext) {
   let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;

diff --git a/code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts
@@ -346,11 +346,7 @@ function sortByPropName(
 function resolveComponentFactory<T extends Type<any>>(component: T) {
   TestBed.configureTestingModule({
     declarations: [component],
-  }).overrideModule(BrowserDynamicTestingModule, {
-    set: {
-      entryComponents: [component],
-    },
-  });
+  }).overrideModule(BrowserDynamicTestingModule, {});
   const componentFactoryResolver = TestBed.inject(ComponentFactoryResolver);
 
   return componentFactoryResolver.resolveComponentFactory(component);

diff --git a/code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.ts b/code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.ts
@@ -36,7 +36,10 @@ export const getComponentInputsOutputs = (component: any): ComponentInputsOutput
   // Adds the I/O present in @Component metadata
   if (componentMetadata && componentMetadata.inputs) {
     initialValue.inputs.push(
-      ...componentMetadata.inputs.map((i) => ({ propName: i, templateName: i }))
+      ...componentMetadata.inputs.map((i) => ({
+        propName: typeof i === 'string' ? i : i.name,
+        templateName: typeof i === 'string' ? i : i.alias,
+      }))
     );
   }
   if (componentMetadata && componentMetadata.outputs) {
@@ -56,7 +59,7 @@ export const getComponentInputsOutputs = (component: any): ComponentInputsOutput
     if (value instanceof Input) {
       const inputToAdd = {
         propName: propertyName,
-        templateName: value.bindingPropertyName ?? propertyName,
+        templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
       };
 
       const previousInputsFiltered = previousValue.inputs.filter(
@@ -70,7 +73,7 @@ export const getComponentInputsOutputs = (component: any): ComponentInputsOutput
     if (value instanceof Output) {
       const outputToAdd = {
         propName: propertyName,
-        templateName: value.bindingPropertyName ?? propertyName,
+        templateName: value.bindingPropertyName ?? value.alias ?? propertyName,
       };
 
       const previousOutputsFiltered = previousValue.outputs.filter(

diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts
@@ -135,7 +135,7 @@ const runGenerators = async (
         const flags = expected.renderer === '@storybook/html' ? ['--type html'] : [];
 
         const time = process.hrtime();
-        console.log(`🧬 generating ${name}`);
+        console.log(`🧬 Generating ${name}`);
 
         const baseDir = join(REPROS_DIRECTORY, dirName);
         const beforeDir = join(baseDir, BEFORE_DIR_NAME);