feat: support jsdoc meta data for slots

src/analyzer/typescript-react-analyzer/slot-analzyer.ts

@@ -37,12 +37,25 @@ export function analyzeSlots(
 				return;
 			}
 
+			const propertyName = memberSymbol.getName();
+			const label = TypescriptUtils.getJsDocValueFromSymbol(memberSymbol, 'name');
+			const example = TypescriptUtils.getJsDocValueFromSymbol(memberSymbol, 'example') || '';
+			const required =
+				(memberSymbol.flags & Ts.SymbolFlags.Optional) !== Ts.SymbolFlags.Optional;
+			const description =
+				TypescriptUtils.getJsDocValueFromSymbol(memberSymbol, 'description') || '';
+			const hidden = TypescriptUtils.hasJsDocTagFromSymbol(memberSymbol, 'ignore');
+
 			return {
-				contextId: memberSymbol.getName(),
-				displayName: memberSymbol.getName(),
-				id: ctx.getSlotId(memberSymbol.getName()),
-				propertyName: memberSymbol.getName(),
-				type: memberSymbol.getName() === 'children' ? 'children' : 'property'
+				contextId: propertyName,
+				label: label || propertyName,
+				description,
+				example,
+				hidden,
+				id: ctx.getSlotId(propertyName),
+				propertyName,
+				required,
+				type: propertyName === 'children' && !isExplicitSlot ? 'children' : 'property'
 			};
 		})
 		.filter((slot): slot is Types.SerializedPatternSlot => typeof slot !== 'undefined');

src/container/element-list/element-slot-container.tsx

@@ -15,6 +15,10 @@ export class ElementSlotContainer extends React.Component<ElementSlotContainerPr
 	public render(): JSX.Element | null {
 		const props = this.props as ElementSlotContainerProps & { store: ViewStore };
 
+		if (props.content.getSlot().getHidden()) {
+			return null;
+		}
+
 		return (
 			<Components.ElementSlot
 				id={props.content.getId()}

src/model/element/element-content.ts

@@ -15,7 +15,6 @@ export interface ElementContentInit {
 	elementIds: string[];
 	forcedOpen: boolean;
 	id: string;
-	name: string;
 	open: boolean;
 	parentElementId?: string;
 	slotId: string;
@@ -26,7 +25,6 @@ export class ElementContent {
 	@Mobx.observable private forcedOpen: boolean;
 	@Mobx.observable private highlighted: boolean;
 	@Mobx.observable private id: string;
-	@Mobx.observable private name: string;
 	@Mobx.observable private open: boolean;
 	@Mobx.observable private parentElementId?: string;
 	@Mobx.observable private patternLibrary: PatternLibrary;
@@ -37,7 +35,6 @@ export class ElementContent {
 	public constructor(init: ElementContentInit, context: ElementContentContext) {
 		this.forcedOpen = init.forcedOpen;
 		this.id = init.id;
-		this.name = init.name;
 		this.open = init.open;
 		this.elementIds = init.elementIds;
 		this.slotId = init.slotId;
@@ -59,7 +56,6 @@ export class ElementContent {
 				elementIds: serialized.elementIds,
 				forcedOpen: serialized.forcedOpen,
 				id: serialized.id,
-				name: serialized.name,
 				open: serialized.open,
 				parentElementId: serialized.parentElementId,
 				slotId: serialized.slotId
@@ -94,7 +90,6 @@ export class ElementContent {
 				elementIds: clonedElements.map(e => e.getId()),
 				forcedOpen: false,
 				id: uuid.v4(),
-				name: this.name,
 				open: false,
 				slotId: this.slotId
 			},
@@ -232,7 +227,6 @@ export class ElementContent {
 			elementIds: Array.from(this.elementIds),
 			forcedOpen: this.forcedOpen,
 			id: this.id,
-			name: this.name,
 			open: this.open,
 			parentElementId: this.parentElementId,
 			slotId: this.slotId

src/model/page/page.ts

@@ -82,7 +82,6 @@ export class Page {
 						elementIds: [],
 						forcedOpen: false,
 						id: uuid.v4(),
-						name: slot.getName(),
 						open: false,
 						slotId: slot.getId()
 					},

src/model/pattern-library/builtins/box.ts

@@ -235,8 +235,12 @@ export const Box = (context: BuiltInContext): BuiltInResult => {
 		new PatternSlot({
 			contextId: SLOT_CONTEXT_ID,
 			displayName: 'Children',
+			description: '',
+			example: '',
+			hidden: false,
 			propertyName: 'children',
 			id: context.options.getGlobalSlotId(patternId, SLOT_CONTEXT_ID),
+			required: false,
 			type: Types.SlotType.Children
 		})
 	];

src/model/pattern-library/builtins/link.ts

@@ -38,8 +38,12 @@ export const Link = (context: BuiltInContext): BuiltInResult => {
 		new PatternSlot({
 			contextId: SLOT_CONTEXT_ID,
 			displayName: 'Children',
+			description: '',
+			example: '',
+			hidden: false,
 			propertyName: 'children',
 			id: context.options.getGlobalSlotId(patternId, SLOT_CONTEXT_ID),
+			required: false,
 			type: Types.SlotType.Children
 		})
 	];

src/model/pattern-library/builtins/page.ts

@@ -66,8 +66,12 @@ export const Page = (context: BuiltInContext): BuiltInResult => {
 				new PatternSlot({
 					contextId: 'children',
 					displayName: 'Children',
+					description: '',
+					example: '',
+					hidden: false,
 					propertyName: 'children',
 					id: context.options.getGlobalSlotId(patternId, SLOT_CONTEXT_ID),
+					required: false,
 					type: Types.SlotType.Children
 				})
 			],

src/model/pattern/pattern-slot.ts

@@ -3,22 +3,34 @@ import * as Types from '../../types';
 export interface PatternSlotInit {
 	contextId: string;
 	displayName: string;
+	description: string;
+	example: string;
+	hidden: boolean;
 	id: string;
 	propertyName: string;
+	required: boolean;
 	type: Types.SlotType;
 }
 
 export class PatternSlot {
 	private contextId: string;
 	private displayName: string;
+	private description: string;
+	private example: string;
+	private hidden: boolean;
 	private id: string;
 	private propertyName: string;
+	private required: boolean;
 	private type: Types.SlotType;
 
 	public constructor(init: PatternSlotInit) {
 		this.type = init.type;
 		this.id = init.id;
 		this.displayName = init.displayName;
+		this.description = init.description;
+		this.example = init.example;
+		this.hidden = init.hidden;
+		this.required = init.required;
 		this.type = init.type;
 		this.propertyName = init.propertyName;
 		this.contextId = init.contextId;
@@ -27,9 +39,13 @@ export class PatternSlot {
 	public static from(serialized: Types.SerializedPatternSlot): PatternSlot {
 		return new PatternSlot({
 			contextId: serialized.contextId,
-			displayName: serialized.displayName,
+			description: serialized.description,
+			displayName: serialized.label,
+			example: serialized.example,
+			hidden: serialized.hidden,
 			id: serialized.id,
 			propertyName: serialized.propertyName,
+			required: serialized.required,
 			type: toSlotType(serialized.type)
 		});
 	}
@@ -38,6 +54,10 @@ export class PatternSlot {
 		return this.contextId;
 	}
 
+	public getHidden(): boolean {
+		return this.hidden;
+	}
+
 	public getId(): string {
 		return this.id;
 	}
@@ -57,9 +77,13 @@ export class PatternSlot {
 	public toJSON(): Types.SerializedPatternSlot {
 		return {
 			contextId: this.contextId,
-			displayName: this.displayName,
+			description: this.description,
+			example: this.example,
+			hidden: this.hidden,
+			label: this.displayName,
 			propertyName: this.propertyName,
 			id: this.id,
+			required: this.required,
 			type: this.type
 		};
 	}

src/store/view-store.ts

@@ -147,7 +147,6 @@ export class ViewStore {
 						elementIds: [],
 						forcedOpen: false,
 						id: uuid.v4(),
-						name: slot.getName(),
 						open: false,
 						slotId: slot.getId()
 					},

src/types/types.ts

@@ -52,7 +52,6 @@ export interface SerializedElementContent {
 	elementIds: string[];
 	forcedOpen: boolean;
 	id: string;
-	name: string;
 	open: boolean;
 	parentElementId?: string;
 	slotId: string;
@@ -119,9 +118,13 @@ export interface SerializedPattern {
 
 export interface SerializedPatternSlot {
 	contextId: string;
-	displayName: string;
+	description: string;
+	example: string;
+	hidden: boolean;
 	id: string;
+	label: string;
 	propertyName: string;
+	required: boolean;
 	type: string;
 }