From dec827ac5436baf6be545db2cb75a8db93bd68ac Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Wed, 18 Aug 2021 16:26:46 +0200 Subject: [PATCH 01/11] Show defaultValue in ArgsTable --- addons/docs/src/blocks/ArgsTable.tsx | 13 +++++++++++++ .../addons/docs/doc-button/doc-button.component.ts | 4 ++++ .../addons/docs/doc-button/doc-button.stories.mdx | 10 ++++++++++ 3 files changed, 27 insertions(+) create mode 100644 examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.mdx diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/addons/docs/src/blocks/ArgsTable.tsx index fe8702db042..852cd12b6a4 100644 --- a/addons/docs/src/blocks/ArgsTable.tsx +++ b/addons/docs/src/blocks/ArgsTable.tsx @@ -14,6 +14,7 @@ import { StoryStore, filterArgTypes } from '@storybook/client-api'; import type { PropDescriptor } from '@storybook/client-api'; import Events from '@storybook/core-events'; +import { ArgType } from '@storybook/addons/types'; import { DocsContext, DocsContextProps } from './DocsContext'; import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types'; import { getComponentName, getDocsStories } from './utils'; @@ -86,6 +87,7 @@ export const extractComponentArgTypes = ( } let argTypes = extractArgTypes(component); argTypes = filterArgTypes(argTypes, include, exclude); + argTypes = addDefaultValuesToTable(argTypes); return argTypes; }; @@ -123,6 +125,16 @@ const addComponentTabs = ( })), }); +const addDefaultValuesToTable = (argTypes: ArgTypes) => { + return Object.values(argTypes).map((value: any) => { + const argType = value; + if (!argType.table.defaultValue) { + argType.table.defaultValue = { summary: argType.defaultValue }; + } + return argType; + }) as ArgTypes; +}; + export const StoryTable: FC< StoryProps & { component: Component; subcomponents: Record } > = (props) => { @@ -157,6 +169,7 @@ export const StoryTable: FC< storyArgTypes = filterArgTypes(storyArgTypes, include, exclude); const mainLabel = getComponentName(component) || 'Story'; + storyArgTypes = addDefaultValuesToTable(storyArgTypes); // eslint-disable-next-line prefer-const let [args, updateArgs, resetArgs] = useArgs(storyId, storyStore); diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts index 50056efaa6c..893698017b0 100644 --- a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts @@ -47,6 +47,10 @@ export enum ButtonAccent { export class DocButtonComponent { @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef; + /** Test default value. */ + @Input() + public theDefaultValue = 'Default value in component'; + /** Appearance style of the button. */ @Input() public appearance: 'primary' | 'secondary' = 'secondary'; diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.mdx b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.mdx new file mode 100644 index 00000000000..517fac05b04 --- /dev/null +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.mdx @@ -0,0 +1,10 @@ +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import { DocButtonComponent } from './doc-button.component'; + + + +# ArgsTable in MDX with default values + +`theDefaultValue` should show the default value from the component comments + + From 6d36204dfb62465f8bffdd242041381a22caea69 Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Wed, 18 Aug 2021 16:50:08 +0200 Subject: [PATCH 02/11] Show defaultValue in ArgsTable --- addons/docs/src/blocks/ArgsTable.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/addons/docs/src/blocks/ArgsTable.tsx index 852cd12b6a4..5d973ef69cd 100644 --- a/addons/docs/src/blocks/ArgsTable.tsx +++ b/addons/docs/src/blocks/ArgsTable.tsx @@ -14,7 +14,7 @@ import { StoryStore, filterArgTypes } from '@storybook/client-api'; import type { PropDescriptor } from '@storybook/client-api'; import Events from '@storybook/core-events'; -import { ArgType } from '@storybook/addons/types'; +import { ArgType } from '@storybook/api'; import { DocsContext, DocsContextProps } from './DocsContext'; import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types'; import { getComponentName, getDocsStories } from './utils'; @@ -87,7 +87,7 @@ export const extractComponentArgTypes = ( } let argTypes = extractArgTypes(component); argTypes = filterArgTypes(argTypes, include, exclude); - argTypes = addDefaultValuesToTable(argTypes); + addDefaultValuesToTable(argTypes); return argTypes; }; @@ -126,13 +126,12 @@ const addComponentTabs = ( }); const addDefaultValuesToTable = (argTypes: ArgTypes) => { - return Object.values(argTypes).map((value: any) => { + Object.values(argTypes).forEach((value: ArgType) => { const argType = value; if (!argType.table.defaultValue) { argType.table.defaultValue = { summary: argType.defaultValue }; } - return argType; - }) as ArgTypes; + }); }; export const StoryTable: FC< @@ -169,7 +168,7 @@ export const StoryTable: FC< storyArgTypes = filterArgTypes(storyArgTypes, include, exclude); const mainLabel = getComponentName(component) || 'Story'; - storyArgTypes = addDefaultValuesToTable(storyArgTypes); + addDefaultValuesToTable(storyArgTypes); // eslint-disable-next-line prefer-const let [args, updateArgs, resetArgs] = useArgs(storyId, storyStore); From f79204247a8b15f414319b1612305fff7ea569aa Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Wed, 18 Aug 2021 17:13:30 +0200 Subject: [PATCH 03/11] Added compodoc defaultValues to table summary --- addons/docs/src/blocks/ArgsTable.tsx | 12 ---- .../doc-button/argtypes.snapshot | 66 +++++++++++++++++++ .../docs/src/frameworks/angular/compodoc.ts | 2 + .../docs/doc-button/doc-button.stories.ts | 7 ++ 4 files changed, 75 insertions(+), 12 deletions(-) diff --git a/addons/docs/src/blocks/ArgsTable.tsx b/addons/docs/src/blocks/ArgsTable.tsx index 5d973ef69cd..fe8702db042 100644 --- a/addons/docs/src/blocks/ArgsTable.tsx +++ b/addons/docs/src/blocks/ArgsTable.tsx @@ -14,7 +14,6 @@ import { StoryStore, filterArgTypes } from '@storybook/client-api'; import type { PropDescriptor } from '@storybook/client-api'; import Events from '@storybook/core-events'; -import { ArgType } from '@storybook/api'; import { DocsContext, DocsContextProps } from './DocsContext'; import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types'; import { getComponentName, getDocsStories } from './utils'; @@ -87,7 +86,6 @@ export const extractComponentArgTypes = ( } let argTypes = extractArgTypes(component); argTypes = filterArgTypes(argTypes, include, exclude); - addDefaultValuesToTable(argTypes); return argTypes; }; @@ -125,15 +123,6 @@ const addComponentTabs = ( })), }); -const addDefaultValuesToTable = (argTypes: ArgTypes) => { - Object.values(argTypes).forEach((value: ArgType) => { - const argType = value; - if (!argType.table.defaultValue) { - argType.table.defaultValue = { summary: argType.defaultValue }; - } - }); -}; - export const StoryTable: FC< StoryProps & { component: Component; subcomponents: Record } > = (props) => { @@ -168,7 +157,6 @@ export const StoryTable: FC< storyArgTypes = filterArgTypes(storyArgTypes, include, exclude); const mainLabel = getComponentName(component) || 'Story'; - addDefaultValuesToTable(storyArgTypes); // eslint-disable-next-line prefer-const let [args, updateArgs, resetArgs] = useArgs(storyId, storyStore); diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot index 2e5e93c5c25..a29f3e15123 100644 --- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot +++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot @@ -8,6 +8,9 @@ Object { "name": "_inputValue", "table": Object { "category": "properties", + "defaultValue": Object { + "summary": "some value", + }, "type": Object { "required": true, "summary": "string", @@ -24,6 +27,9 @@ Private value.", "name": "_value", "table": Object { "category": "properties", + "defaultValue": Object { + "summary": "Private hello", + }, "type": Object { "required": true, "summary": "string", @@ -39,6 +45,9 @@ Private value.", "name": "accent", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": true, "summary": "ButtonAccent", @@ -54,6 +63,9 @@ Private value.", "name": "appearance", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": "secondary", + }, "type": Object { "required": true, "summary": "\\"primary\\" | \\"secondary\\"", @@ -73,6 +85,9 @@ Private value.", "name": "buttonRef", "table": Object { "category": "view child", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": true, "summary": "ElementRef", @@ -92,6 +107,9 @@ An internal calculation method which adds \`x\` and \`y\` together. "name": "calc", "table": Object { "category": "methods", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": false, "summary": "(x: number, y: string | number) => number", @@ -107,6 +125,9 @@ An internal calculation method which adds \`x\` and \`y\` together. "name": "focus", "table": Object { "category": "properties", + "defaultValue": Object { + "summary": false, + }, "type": Object { "required": true, "summary": "", @@ -122,6 +143,9 @@ An internal calculation method which adds \`x\` and \`y\` together. "name": "inputValue", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": true, "summary": "string", @@ -138,6 +162,9 @@ Public value.", "name": "internalProperty", "table": Object { "category": "properties", + "defaultValue": Object { + "summary": "Public hello", + }, "type": Object { "required": true, "summary": "string", @@ -153,6 +180,9 @@ Public value.", "name": "isDisabled", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": false, + }, "type": Object { "required": true, "summary": "boolean", @@ -168,6 +198,9 @@ Public value.", "name": "item", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": true, "summary": "[]", @@ -183,6 +216,9 @@ Public value.", "name": "label", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": true, "summary": "string", @@ -204,6 +240,9 @@ Will also block the emission of the event if \`isDisabled\` is true. "name": "onClick", "table": Object { "category": "outputs", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": true, "summary": "EventEmitter", @@ -219,6 +258,9 @@ Will also block the emission of the event if \`isDisabled\` is true. "name": "onClickListener", "table": Object { "category": "methods", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": false, "summary": "(btn: ) => void", @@ -238,6 +280,9 @@ A private method. "name": "privateMethod", "table": Object { "category": "methods", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": false, "summary": "(password: string) => void", @@ -253,6 +298,9 @@ A private method. "name": "processedItem", "table": Object { "category": "properties", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": true, "summary": "T[]", @@ -272,6 +320,9 @@ A protected method. "name": "protectedMethod", "table": Object { "category": "methods", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": false, "summary": "(id?: number) => void", @@ -288,6 +339,9 @@ A public method using an interface.", "name": "publicMethod", "table": Object { "category": "methods", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": false, "summary": "(things: ISomeInterface) => void", @@ -303,6 +357,9 @@ A public method using an interface.", "name": "showKeyAlias", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": true, "summary": "", @@ -318,6 +375,9 @@ A public method using an interface.", "name": "size", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": "medium", + }, "type": Object { "required": true, "summary": "ButtonSize", @@ -333,6 +393,9 @@ A public method using an interface.", "name": "someDataObject", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": undefined, + }, "type": Object { "required": true, "summary": "ISomeInterface", @@ -348,6 +411,9 @@ A public method using an interface.", "name": "somethingYouShouldNotUse", "table": Object { "category": "inputs", + "defaultValue": Object { + "summary": false, + }, "type": Object { "required": true, "summary": "boolean", diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 02e28c47031..ebf9fac589d 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -194,6 +194,7 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec ? { name: 'void' } : extractType(item as Property, defaultValue); const action = section === 'outputs' ? { action: item.name } : {}; + const argType = { name: item.name, description: item.rawdescription || item.description, @@ -206,6 +207,7 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec summary: isMethod(item) ? displaySignature(item) : item.type, required: isMethod(item) ? false : !item.optional, }, + defaultValue: { summary: defaultValue }, }, }; diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts index 0c027d44178..c411acf4636 100644 --- a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.stories.ts @@ -9,6 +9,13 @@ export const Basic = (args) => ({ props: args, }); Basic.args = { label: 'Args test', isDisabled: false }; +Basic.ArgTypes = { + theDefaultValue: { + table: { + defaultValue: { summary: 'Basic default value' }, + }, + }, +}; export const WithTemplate = (args) => ({ props: args, From 2de84d9c03f1f365c2bafc748240a59cce93231e Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Thu, 19 Aug 2021 12:28:44 +0200 Subject: [PATCH 04/11] Swap out DOMParser due to Husky error --- addons/docs/src/frameworks/angular/compodoc.ts | 14 +++++++++++++- addons/docs/src/frameworks/angular/types.ts | 8 ++++++++ .../docs/doc-button/doc-button.component.ts | 15 +++++++++++++++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index ebf9fac589d..d004baf1b08 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -13,6 +13,7 @@ import { Pipe, Property, Directive, + JsDocTag, } from './types'; export const isMethod = (methodOrProp: Method | Property): methodOrProp is Method => { @@ -157,7 +158,17 @@ export const extractType = (property: Property, defaultValue: any) => { const extractDefaultValue = (property: Property) => { try { // eslint-disable-next-line no-eval - const value = eval(property.defaultValue); + let value = eval(property.defaultValue); + if (value == null && property.jsdoctags.length > 0) { + property.jsdoctags.forEach((tag: JsDocTag) => { + if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) { + const tmp = window.document.createElement('DIV'); + tmp.innerHTML = tag.comment; + value = tmp.textContent; + } + }); + } + return value; } catch (err) { logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`); @@ -189,6 +200,7 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec data.forEach((item: Method | Property) => { const section = mapItemToSection(key, item); const defaultValue = isMethod(item) ? undefined : extractDefaultValue(item as Property); + const type = isMethod(item) || (section !== 'inputs' && section !== 'properties') ? { name: 'void' } diff --git a/addons/docs/src/frameworks/angular/types.ts b/addons/docs/src/frameworks/angular/types.ts index cb208a8e1bf..d1ac2f2d52d 100644 --- a/addons/docs/src/frameworks/angular/types.ts +++ b/addons/docs/src/frameworks/angular/types.ts @@ -7,6 +7,13 @@ export interface Method { rawdescription?: string; } +export interface JsDocTag { + comment?: string; + tagName?: { + escapedText?: string; + }; +} + export interface Property { name: string; decorators?: Decorator[]; @@ -15,6 +22,7 @@ export interface Property { defaultValue?: string; description?: string; rawdescription?: string; + jsdoctags?: JsDocTag[]; } export interface Class { diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts index 893698017b0..5e546c0b86b 100644 --- a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts @@ -51,6 +51,21 @@ export class DocButtonComponent { @Input() public theDefaultValue = 'Default value in component'; + /** + * Setting default value here because compodoc won't get the default value for accessors + * @default The default value + * */ + @Input() + get anotherDefaultValue() { + return this._anotherDefaultValue; + } + + set anotherDefaultValue(v: string) { + this._anotherDefaultValue = v; + } + + _anotherDefaultValue = 'The default value'; + /** Appearance style of the button. */ @Input() public appearance: 'primary' | 'secondary' = 'secondary'; From 9f24a7993b0f10f81d3b1691b17b7b8d0f0d5557 Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Mon, 23 Aug 2021 21:58:56 +0200 Subject: [PATCH 05/11] Remove eval and return string --- .../doc-button/argtypes.snapshot | 18 +++++++++--------- addons/docs/src/frameworks/angular/compodoc.ts | 3 +-- .../docs/doc-button/doc-button.component.ts | 4 ++-- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot index a29f3e15123..b9ddb0d0732 100644 --- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot +++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot @@ -120,13 +120,13 @@ An internal calculation method which adds \`x\` and \`y\` together. }, }, "focus": Object { - "defaultValue": false, + "defaultValue": "false", "description": "", "name": "focus", "table": Object { "category": "properties", "defaultValue": Object { - "summary": false, + "summary": "false", }, "type": Object { "required": true, @@ -134,7 +134,7 @@ An internal calculation method which adds \`x\` and \`y\` together. }, }, "type": Object { - "name": "boolean", + "name": "string", }, }, "inputValue": Object { @@ -175,13 +175,13 @@ Public value.", }, }, "isDisabled": Object { - "defaultValue": false, + "defaultValue": "false", "description": "Sets the button to a disabled state.", "name": "isDisabled", "table": Object { "category": "inputs", "defaultValue": Object { - "summary": false, + "summary": "false", }, "type": Object { "required": true, @@ -230,7 +230,7 @@ Public value.", }, "onClick": Object { "action": "onClick", - "defaultValue": undefined, + "defaultValue": "new EventEmitter()", "description": " Handler to be called when the button is clicked by a user. @@ -241,7 +241,7 @@ Will also block the emission of the event if \`isDisabled\` is true. "table": Object { "category": "outputs", "defaultValue": Object { - "summary": undefined, + "summary": "new EventEmitter()", }, "type": Object { "required": true, @@ -406,13 +406,13 @@ A public method using an interface.", }, }, "somethingYouShouldNotUse": Object { - "defaultValue": false, + "defaultValue": "false", "description": "Some input you shouldn't use.", "name": "somethingYouShouldNotUse", "table": Object { "category": "inputs", "defaultValue": Object { - "summary": false, + "summary": "false", }, "type": Object { "required": true, diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index d004baf1b08..bc0ca542299 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -157,8 +157,7 @@ export const extractType = (property: Property, defaultValue: any) => { const extractDefaultValue = (property: Property) => { try { - // eslint-disable-next-line no-eval - let value = eval(property.defaultValue); + let value = property.defaultValue?.replace(/^'(.*)'$/, '$1'); if (value == null && property.jsdoctags.length > 0) { property.jsdoctags.forEach((tag: JsDocTag) => { if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) { diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts index 5e546c0b86b..af611bfc4be 100644 --- a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts @@ -53,7 +53,7 @@ export class DocButtonComponent { /** * Setting default value here because compodoc won't get the default value for accessors - * @default The default value + * @default Another default value * */ @Input() get anotherDefaultValue() { @@ -64,7 +64,7 @@ export class DocButtonComponent { this._anotherDefaultValue = v; } - _anotherDefaultValue = 'The default value'; + _anotherDefaultValue = 'Another default value'; /** Appearance style of the button. */ @Input() From 8473015bc1e6920fe0b965c8c37fc4db1f09148b Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Tue, 24 Aug 2021 08:19:40 +0200 Subject: [PATCH 06/11] DOMParser update --- addons/docs/src/frameworks/angular/compodoc.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index bc0ca542299..0a726a94bf9 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -161,9 +161,9 @@ const extractDefaultValue = (property: Property) => { if (value == null && property.jsdoctags.length > 0) { property.jsdoctags.forEach((tag: JsDocTag) => { if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) { - const tmp = window.document.createElement('DIV'); - tmp.innerHTML = tag.comment; - value = tmp.textContent; + // @ts-ignore + const dom = new window.DOMParser().parseFromString(tag.comment, 'text/html'); + value = dom.body.textContent; } }); } From adda4471b449b121bed10131434355915fa02d04 Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Tue, 31 Aug 2021 16:35:13 +0200 Subject: [PATCH 07/11] Explicit type conversion check for boolean defaultValues --- .../__testfixtures__/doc-button/argtypes.snapshot | 14 +++++++------- addons/docs/src/frameworks/angular/compodoc.ts | 8 ++++++-- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot index b9ddb0d0732..ddab41691ea 100644 --- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot +++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot @@ -120,13 +120,13 @@ An internal calculation method which adds \`x\` and \`y\` together. }, }, "focus": Object { - "defaultValue": "false", + "defaultValue": false, "description": "", "name": "focus", "table": Object { "category": "properties", "defaultValue": Object { - "summary": "false", + "summary": false, }, "type": Object { "required": true, @@ -134,7 +134,7 @@ An internal calculation method which adds \`x\` and \`y\` together. }, }, "type": Object { - "name": "string", + "name": "boolean", }, }, "inputValue": Object { @@ -175,13 +175,13 @@ Public value.", }, }, "isDisabled": Object { - "defaultValue": "false", + "defaultValue": false, "description": "Sets the button to a disabled state.", "name": "isDisabled", "table": Object { "category": "inputs", "defaultValue": Object { - "summary": "false", + "summary": false, }, "type": Object { "required": true, @@ -406,13 +406,13 @@ A public method using an interface.", }, }, "somethingYouShouldNotUse": Object { - "defaultValue": "false", + "defaultValue": false, "description": "Some input you shouldn't use.", "name": "somethingYouShouldNotUse", "table": Object { "category": "inputs", "defaultValue": Object { - "summary": "false", + "summary": false, }, "type": Object { "required": true, diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 0a726a94bf9..88281450d48 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -157,8 +157,11 @@ export const extractType = (property: Property, defaultValue: any) => { const extractDefaultValue = (property: Property) => { try { - let value = property.defaultValue?.replace(/^'(.*)'$/, '$1'); - if (value == null && property.jsdoctags.length > 0) { + let value: string | boolean = property.defaultValue?.replace(/^'(.*)'$/, '$1'); + if (value === 'true') value = true; + if (value === 'false') value = false; + + if (value == null && property.jsdoctags?.length > 0) { property.jsdoctags.forEach((tag: JsDocTag) => { if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) { // @ts-ignore @@ -170,6 +173,7 @@ const extractDefaultValue = (property: Property) => { return value; } catch (err) { + console.log('UNABLE TO EVAL: ', err); logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`); return undefined; } From 146e8fdbeb465fe92e7e907c29c57f019afde109 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 31 Aug 2021 23:29:20 +0800 Subject: [PATCH 08/11] Update addons/docs/src/frameworks/angular/compodoc.ts --- addons/docs/src/frameworks/angular/compodoc.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 88281450d48..af81932081c 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -173,7 +173,6 @@ const extractDefaultValue = (property: Property) => { return value; } catch (err) { - console.log('UNABLE TO EVAL: ', err); logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`); return undefined; } From 7651889d4d2a6d8d87f9ccfb5ce776e92156a537 Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Tue, 31 Aug 2021 17:38:31 +0200 Subject: [PATCH 09/11] Removed console.log --- addons/docs/src/frameworks/angular/compodoc.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 88281450d48..af81932081c 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -173,7 +173,6 @@ const extractDefaultValue = (property: Property) => { return value; } catch (err) { - console.log('UNABLE TO EVAL: ', err); logger.debug(`Error extracting ${property.name}: ${property.defaultValue}`); return undefined; } From 37ae3dd96b969f94266cf3a5c00a508d7752e8eb Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Wed, 1 Sep 2021 11:37:19 +0200 Subject: [PATCH 10/11] Cater for compodoc issues when casting types --- .../docs/src/frameworks/angular/compodoc.ts | 53 +++++++++++++++---- .../docs/doc-button/doc-button.component.ts | 12 +++++ 2 files changed, 56 insertions(+), 9 deletions(-) diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index af81932081c..45737dc56ae 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -155,20 +155,55 @@ export const extractType = (property: Property, defaultValue: any) => { } }; +const castDefaultValue = (property: Property, defaultValue: any) => { + const compodocType = property.type; + + // All these checks are necessary as compodoc does not always set the type ie. @HostBinding have empty types. + // null and undefined also have 'any' type + if (['boolean', 'number', 'string'].includes(compodocType)) { + switch (compodocType) { + case 'boolean': + return defaultValue === 'true'; + case 'number': + return Number(defaultValue); + default: + return defaultValue; + } + } else { + switch (defaultValue) { + case 'true': + return true; + case 'false': + return false; + case 'null': + return null; + case 'undefined': + return undefined; + default: + return defaultValue; + } + } +}; + +const extractDefaultValueFromComments = (property: Property, value: any) => { + let commentValue = value; + property.jsdoctags.forEach((tag: JsDocTag) => { + if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) { + // @ts-ignore + const dom = new window.DOMParser().parseFromString(tag.comment, 'text/html'); + commentValue = dom.body.textContent; + } + }); + return commentValue; +}; + const extractDefaultValue = (property: Property) => { try { let value: string | boolean = property.defaultValue?.replace(/^'(.*)'$/, '$1'); - if (value === 'true') value = true; - if (value === 'false') value = false; + value = castDefaultValue(property, value); if (value == null && property.jsdoctags?.length > 0) { - property.jsdoctags.forEach((tag: JsDocTag) => { - if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) { - // @ts-ignore - const dom = new window.DOMParser().parseFromString(tag.comment, 'text/html'); - value = dom.body.textContent; - } - }); + value = extractDefaultValueFromComments(property, value); } return value; diff --git a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts index af611bfc4be..5c9a7461a28 100644 --- a/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/doc-button.component.ts @@ -66,6 +66,18 @@ export class DocButtonComponent { _anotherDefaultValue = 'Another default value'; + /** Test null default value. */ + @Input() + public aNullValue = null; + + /** Test null default value. */ + @Input() + public anUndefinedValue; + + /** Test numeric default value. */ + @Input() + public aNumericValue = 123; + /** Appearance style of the button. */ @Input() public appearance: 'primary' | 'secondary' = 'secondary'; From a2d0754f2751ad9bcc8a79d86ee44cf1d8691e3d Mon Sep 17 00:00:00 2001 From: Brett Upton Date: Wed, 1 Sep 2021 14:53:30 +0200 Subject: [PATCH 11/11] Set eventemitter to undefined to allow actions to function correctly --- .../angular/__testfixtures__/doc-button/argtypes.snapshot | 4 ++-- addons/docs/src/frameworks/angular/compodoc.ts | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot index ddab41691ea..a29f3e15123 100644 --- a/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot +++ b/addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot @@ -230,7 +230,7 @@ Public value.", }, "onClick": Object { "action": "onClick", - "defaultValue": "new EventEmitter()", + "defaultValue": undefined, "description": " Handler to be called when the button is clicked by a user. @@ -241,7 +241,7 @@ Will also block the emission of the event if \`isDisabled\` is true. "table": Object { "category": "outputs", "defaultValue": Object { - "summary": "new EventEmitter()", + "summary": undefined, }, "type": Object { "required": true, diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 45737dc56ae..8a7d68c87af 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -160,12 +160,14 @@ const castDefaultValue = (property: Property, defaultValue: any) => { // All these checks are necessary as compodoc does not always set the type ie. @HostBinding have empty types. // null and undefined also have 'any' type - if (['boolean', 'number', 'string'].includes(compodocType)) { + if (['boolean', 'number', 'string', 'EventEmitter'].includes(compodocType)) { switch (compodocType) { case 'boolean': return defaultValue === 'true'; case 'number': return Number(defaultValue); + case 'EventEmitter': + return undefined; default: return defaultValue; }