@ng-prism/core 22.3.0 → 22.4.0

package/dist/builder/scanner/component.scanner.js

@@ -1,8 +1,10 @@
 import ts from 'typescript';
 import { CANVAS_BGS } from '../../shared/canvas-bg.type.js';
 import { CANVAS_LAYOUTS } from '../../shared/canvas-layout.type.js';
-import { evaluateExpression, findDecorator, getDecoratorArgument } from './ast-utils.js';
+import { evaluateExpression, evaluateStatic, findDecorator, getDecoratorArgument, UNEVALUABLE } from './ast-utils.js';
+import { getClassHierarchy } from './class-hierarchy.js';
 import { extractInputs, extractOutputs } from './input.extractor.js';
+import { describeDeprecatedProviders, describeUnevaluable, describeUnreadableBase } from './showcase-diagnostics.js';
 const COMPONENT_STATUSES = ['stable', 'beta', 'wip', 'deprecated'];
 function isComponentStatus(value) {
     return typeof value === 'string' && COMPONENT_STATUSES.includes(value);
@@ -11,14 +13,14 @@ function isComponentStatus(value) {
  * Backgrounds that still work but should not be reached for any more.
  *
  * `checker` draws the same checkerboard as `transparent` while browsing, so
- * the canvas cannot tell them apart — but it captures as `--prism-bg-surface`,
+ * the canvas cannot tell them apart. It captures as `--prism-bg-surface`, though,
  * a *theme* token, which makes a baseline recorded on it depend on the theme
  * the runner's browser started in. Since `transparent` took over as the
  * default, it is the value that looks like transparency and is not.
  *
- * Warned rather than rejected: the value is valid, and dropping it would
- * change what a component renders on — a break wearing a warning's clothes.
- * Scheduled for removal in 23.0.0, the next Angular-aligned major.
+ * Only warned about: the value is valid, and rejecting it would change what a
+ * component renders on, which is a breaking change. Scheduled for removal in
+ * 23.0.0, the next Angular-aligned major.
  */
 const DEPRECATED_BGS = {
     checker: "use 'transparent' for the same look with a capture that keeps its alpha, or 'light'/'dark' for an absolute colour"
@@ -27,7 +29,7 @@ function warnDeprecatedBg(bg, where) {
     const advice = DEPRECATED_BGS[bg];
     if (!advice)
         return;
-    console.warn(`⚠ ng-prism: ${where} declares bg "${bg}", which is deprecated and will ` + `be removed in 23.0.0 — ${advice}.`);
+    console.warn(`⚠ ng-prism: ${where} declares bg "${bg}", which is deprecated and will ` + `be removed in 23.0.0; ${advice}.`);
 }
 function isCanvasBg(value) {
     return typeof value === 'string' && CANVAS_BGS.includes(value);
@@ -37,15 +39,33 @@ function isCanvasLayout(value) {
 }
 /**
  * Scan exported symbols for Angular components annotated with @Showcase.
+ *
+ * Every @Showcase value the scan has to drop is printed and collected in
+ * `diagnostics`, once: sharing the array across entry points keeps a
+ * component exported from several of them from repeating its warnings.
+ * `notices` does the same for warnings about what a component inherits,
+ * which are not diagnostics.
  */
-export function scanComponents(exports, checker) {
+export function scanComponents(exports, checker, diagnostics = [], notices = new Set()) {
     const components = [];
+    const report = (message) => {
+        if (diagnostics.includes(message))
+            return;
+        diagnostics.push(message);
+        console.warn(`⚠ ng-prism: ${message}`);
+    };
+    const notify = (message) => {
+        if (notices.has(message))
+            return;
+        notices.add(message);
+        console.warn(`⚠ ng-prism: ${message}`);
+    };
     for (const sym of exports) {
         const resolved = sym.flags & ts.SymbolFlags.Alias ? checker.getAliasedSymbol(sym) : sym;
         const classDecl = resolved.declarations?.find(ts.isClassDeclaration);
         if (!classDecl)
             continue;
-        // Perf: cheap pre-filter — skip the full decorator walk for files that don't
+        // Perf: cheap pre-filter that skips the full decorator walk for files that don't
         // mention Showcase at all. False positives (string-literal containing "@Showcase")
         // just lose the optimization for that file; correctness is unaffected.
         if (!classDecl.getSourceFile().text.includes('@Showcase'))
@@ -54,15 +74,23 @@ export function scanComponents(exports, checker) {
         if (!showcaseDecorator)
             continue;
         const className = classDecl.name?.text ?? 'Anonymous';
-        const showcaseConfig = extractShowcaseConfig(showcaseDecorator, className);
+        const showcaseConfig = extractShowcaseConfig(showcaseDecorator, className, report, checker);
         if (!showcaseConfig)
             continue;
-        const componentMeta = extractComponentMeta(classDecl);
-        const inputs = extractInputs(classDecl, checker);
-        const outputs = extractOutputs(classDecl, checker);
+        const componentMeta = extractComponentMeta(classDecl, checker);
+        const hierarchy = getClassHierarchy(classDecl, checker);
+        const inputs = extractInputs(classDecl, checker, hierarchy);
+        const outputs = extractOutputs(classDecl, checker, hierarchy);
         const filePath = classDecl.getSourceFile().fileName;
-        if (hasDecoratorInputs(classDecl)) {
-            console.warn(`⚠ ng-prism: ${className} uses @Input() decorators which are not fully supported. ` + `Migrate to input() signals for full ng-prism support.`);
+        const decoratorInputs = hierarchy.classes.find((c) => c.definesMetadata && hasDecoratorInputs(c.classDecl))?.classDecl;
+        if (decoratorInputs) {
+            const where = decoratorInputs === classDecl ? 'uses @Input() decorators' : `inherits @Input() decorators from ${decoratorInputs.name?.text ?? 'an anonymous class'},`;
+            notify(`${className} ${where} which are not fully supported. Migrate to input() signals for full ng-prism support.`);
+        }
+        // Not diagnostics: strictShowcase would fail the build over a base
+        // class in a package, which the component's author cannot change.
+        for (const base of hierarchy.unreadable) {
+            notify(describeUnreadableBase(className, base));
         }
         components.push({
             className,
@@ -70,7 +98,11 @@ export function scanComponents(exports, checker) {
             showcaseConfig,
             inputs,
             outputs,
-            componentMeta
+            componentMeta,
+            // Plugins look a base class up by name, so an anonymous one is of no use to them.
+            baseClasses: hierarchy.classes
+                .slice(1)
+                .flatMap(({ classDecl: base }) => (base.name ? [{ className: base.name.text, filePath: base.getSourceFile().fileName }] : []))
         });
     }
     return components;
@@ -84,15 +116,29 @@ function hasDecoratorInputs(classDecl) {
     }
     return false;
 }
-function extractShowcaseConfig(decorator, className) {
+function extractShowcaseConfig(decorator, className, report, checker) {
     const arg = getDecoratorArgument(decorator);
     if (!arg)
         return undefined;
-    const raw = evaluateExpression(arg);
-    if (!raw || typeof raw !== 'object')
+    // Reported once for the whole field below, wherever it came from: the literal, a spread or a constant.
+    let providers;
+    const raw = evaluateStatic(arg, {
+        checker,
+        report: (issue) => {
+            if (issue.path[0] === 'providers') {
+                providers ??= issue.node;
+                return;
+            }
+            report(describeUnevaluable(className, arg, issue));
+        }
+    });
+    if (providers || (typeof raw === 'object' && raw !== null && 'providers' in raw)) {
+        report(describeDeprecatedProviders(className, arg, providers));
+    }
+    if (raw === UNEVALUABLE || !raw || typeof raw !== 'object')
         return undefined;
     if (!('title' in raw)) {
-        console.warn(`⚠ ng-prism: ${className} has @Showcase without a "title" field — skipping. ` + `Add a title so it can appear in the styleguide.`);
+        report(`${className} has @Showcase without a "title" field, skipping. ` + `Add a title so it can appear in the styleguide.`);
         return undefined;
     }
     const obj = raw;
@@ -108,6 +154,12 @@ function extractShowcaseConfig(decorator, className) {
     if (typeof obj['sectionOrder'] === 'number') {
         config.sectionOrder = obj['sectionOrder'];
     }
+    if (typeof obj['categoryOrder'] === 'number') {
+        config.categoryOrder = obj['categoryOrder'];
+    }
+    if (typeof obj['componentOrder'] === 'number') {
+        config.componentOrder = obj['componentOrder'];
+    }
     if (obj['tags'])
         config.tags = obj['tags'];
     if (obj['meta'])
@@ -121,7 +173,7 @@ function extractShowcaseConfig(decorator, className) {
             config.status = obj['status'];
         }
         else {
-            console.warn(`⚠ ng-prism: ${className} declares invalid status "${String(obj['status'])}" — ` + `expected one of: ${COMPONENT_STATUSES.join(', ')}. Skipping.`);
+            report(`${className} declares invalid status "${String(obj['status'])}", ` + `expected one of: ${COMPONENT_STATUSES.join(', ')}. Skipping.`);
         }
     }
     if (obj['bg'] !== undefined) {
@@ -130,7 +182,7 @@ function extractShowcaseConfig(decorator, className) {
             warnDeprecatedBg(obj['bg'], className);
         }
         else {
-            console.warn(`⚠ ng-prism: ${className} declares invalid bg "${String(obj['bg'])}" — ` + `expected one of: ${CANVAS_BGS.join(', ')}. Skipping.`);
+            report(`${className} declares invalid bg "${String(obj['bg'])}", ` + `expected one of: ${CANVAS_BGS.join(', ')}. Skipping.`);
         }
     }
     if (obj['canvasLayout'] !== undefined) {
@@ -138,7 +190,7 @@ function extractShowcaseConfig(decorator, className) {
             config.canvasLayout = obj['canvasLayout'];
         }
         else {
-            console.warn(`⚠ ng-prism: ${className} declares invalid canvasLayout "${String(obj['canvasLayout'])}" — ` + `expected one of: ${CANVAS_LAYOUTS.join(', ')}. Skipping.`);
+            report(`${className} declares invalid canvasLayout "${String(obj['canvasLayout'])}", ` + `expected one of: ${CANVAS_LAYOUTS.join(', ')}. Skipping.`);
         }
     }
     if (Array.isArray(obj['variants'])) {
@@ -148,14 +200,14 @@ function extractShowcaseConfig(decorator, className) {
                 warnDeprecatedBg(variant['bg'], `${className} variant "${String(variant['name'])}"`);
             }
             if (variant['bg'] !== undefined && !isCanvasBg(variant['bg'])) {
-                console.warn(`⚠ ng-prism: ${className} variant "${String(variant['name'])}" declares ` +
-                    `invalid bg "${String(variant['bg'])}" — expected one of: ` +
+                report(`${className} variant "${String(variant['name'])}" declares ` +
+                    `invalid bg "${String(variant['bg'])}", expected one of: ` +
                     `${CANVAS_BGS.join(', ')}. Skipping.`);
                 delete cleaned['bg'];
             }
             if (variant['canvasLayout'] !== undefined && !isCanvasLayout(variant['canvasLayout'])) {
-                console.warn(`⚠ ng-prism: ${className} variant "${String(variant['name'])}" declares ` +
-                    `invalid canvasLayout "${String(variant['canvasLayout'])}" — expected one of: ${CANVAS_LAYOUTS.join(', ')}. Skipping.`);
+                report(`${className} variant "${String(variant['name'])}" declares ` +
+                    `invalid canvasLayout "${String(variant['canvasLayout'])}", expected one of: ${CANVAS_LAYOUTS.join(', ')}. Skipping.`);
                 delete cleaned['canvasLayout'];
             }
             return cleaned;
@@ -163,38 +215,34 @@ function extractShowcaseConfig(decorator, className) {
     }
     return config;
 }
-function extractComponentMeta(classDecl) {
+function extractComponentMeta(classDecl, checker) {
     const componentDecorator = findDecorator(classDecl, 'Component');
-    if (componentDecorator) {
-        const arg = getDecoratorArgument(componentDecorator);
-        if (!arg)
-            return { selector: '', standalone: true, isDirective: false };
-        const raw = evaluateExpression(arg);
-        if (!raw || typeof raw !== 'object') {
-            return { selector: '', standalone: true, isDirective: false };
-        }
-        const obj = raw;
-        return {
-            selector: obj['selector'] ?? '',
-            standalone: obj['standalone'] !== false,
-            isDirective: false
-        };
-    }
-    const directiveDecorator = findDecorator(classDecl, 'Directive');
-    if (directiveDecorator) {
-        const arg = getDecoratorArgument(directiveDecorator);
-        if (!arg)
-            return { selector: '', standalone: true, isDirective: true };
-        const raw = evaluateExpression(arg);
-        if (!raw || typeof raw !== 'object') {
-            return { selector: '', standalone: true, isDirective: true };
-        }
-        const obj = raw;
-        return {
-            selector: obj['selector'] ?? '',
-            standalone: obj['standalone'] !== false,
-            isDirective: true
-        };
+    const decorator = componentDecorator ?? findDecorator(classDecl, 'Directive');
+    const isDirective = !componentDecorator && decorator !== undefined;
+    const arg = decorator && getDecoratorArgument(decorator);
+    if (!arg)
+        return { selector: '', standalone: true, isDirective };
+    const selector = readDecoratorField(arg, 'selector', checker);
+    return {
+        selector: typeof selector === 'string' ? selector : '',
+        standalone: readDecoratorField(arg, 'standalone', checker) !== false,
+        isDirective
+    };
+}
+/**
+ * One field of `@Component`/`@Directive` metadata, read from its own
+ * property where the literal has one, so that `imports`, `providers` and the
+ * rest are not resolved only to be thrown away. A spread or a shorthand could
+ * supply the field from elsewhere, so then the whole argument is evaluated.
+ */
+function readDecoratorField(arg, key, checker) {
+    if (ts.isObjectLiteralExpression(arg) && !arg.properties.some(ts.isSpreadAssignment)) {
+        const prop = arg.properties.find((p) => p.name !== undefined && (ts.isIdentifier(p.name) || ts.isStringLiteral(p.name)) && p.name.text === key);
+        if (!prop)
+            return undefined;
+        if (ts.isPropertyAssignment(prop))
+            return evaluateExpression(prop.initializer, checker);
     }
-    return { selector: '', standalone: true, isDirective: false };
+    const raw = evaluateExpression(arg, checker);
+    return typeof raw === 'object' && raw !== null ? raw[key] : undefined;
 }

package/dist/builder/scanner/input.extractor.d.ts

@@ -1,11 +1,14 @@
 import ts from 'typescript';
 import type { InputMeta, OutputMeta } from '../../plugin/plugin.types.js';
 /**
- * Extract all @Input(), input() and model() signal metadata from a class declaration.
+ * Extract all @Input(), input() and model() signal metadata from a class
+ * declaration and the base classes Angular inherits inputs from. An input the
+ * subclass redeclares wins over the one in its base class.
  */
-export declare function extractInputs(classDecl: ts.ClassDeclaration, checker: ts.TypeChecker): InputMeta[];
+export declare function extractInputs(classDecl: ts.ClassDeclaration, checker: ts.TypeChecker, hierarchy?: import("./class-hierarchy.js").ClassHierarchy): InputMeta[];
 /**
- * Extract all @Output() and output() signal metadata from a class declaration.
+ * Extract all @Output() and output() signal metadata from a class declaration
+ * and the base classes Angular inherits outputs from.
  */
-export declare function extractOutputs(classDecl: ts.ClassDeclaration, checker: ts.TypeChecker): OutputMeta[];
+export declare function extractOutputs(classDecl: ts.ClassDeclaration, checker: ts.TypeChecker, hierarchy?: import("./class-hierarchy.js").ClassHierarchy): OutputMeta[];
 //# sourceMappingURL=input.extractor.d.ts.map

package/dist/builder/scanner/input.extractor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.extractor.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/input.extractor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAG1E;;GAEG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,OAAO,EAAE,EAAE,CAAC,WAAW,GAAG,SAAS,EAAE,CAmDlG;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,OAAO,EAAE,EAAE,CAAC,WAAW,GAAG,UAAU,EAAE,CA2BpG"}
+{"version":3,"file":"input.extractor.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/input.extractor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAI1E;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,OAAO,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,gDAAwC,GAAG,SAAS,EAAE,CAuCrJ;AAsED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,OAAO,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,gDAAwC,GAAG,UAAU,EAAE,CAuBvJ"}

package/dist/builder/scanner/input.extractor.js

@@ -1,76 +1,174 @@
 import ts from 'typescript';
-import { evaluateExpression, findDecorator, getDecoratorArgument, getJsDocComment } from './ast-utils.js';
+import { evaluateStatic, findDecorator, getDecoratorArgument, getJsDocComment } from './ast-utils.js';
+import { getClassHierarchy } from './class-hierarchy.js';
 /**
- * Extract all @Input(), input() and model() signal metadata from a class declaration.
+ * Extract all @Input(), input() and model() signal metadata from a class
+ * declaration and the base classes Angular inherits inputs from. An input the
+ * subclass redeclares wins over the one in its base class.
  */
-export function extractInputs(classDecl, checker) {
+export function extractInputs(classDecl, checker, hierarchy = getClassHierarchy(classDecl, checker)) {
     const inputs = [];
-    for (const member of classDecl.members) {
-        if (!ts.isPropertyDeclaration(member))
-            continue;
-        const name = member.name && ts.isIdentifier(member.name) ? member.name.text : undefined;
-        if (!name)
-            continue;
-        const inputDecorator = findDecorator(member, 'Input');
-        if (inputDecorator) {
-            const required = isDecoratorInputRequired(inputDecorator);
-            const defaultValue = member.initializer ? evaluateExpression(member.initializer) : undefined;
-            const doc = getJsDocComment(member, checker);
-            const { type, values, rawType } = resolveDecoratorInputType(member, checker);
-            inputs.push({
-                name,
-                type,
-                rawType,
-                required,
-                ...(values && { values }),
-                ...(defaultValue !== undefined && { defaultValue }),
-                ...(doc && { doc })
-            });
-            continue;
-        }
-        const signalCall = getInputSignalCall(member);
-        if (signalCall) {
-            const required = isSignalInputRequired(signalCall);
-            const defaultValue = !required && signalCall.arguments.length > 0 ? evaluateExpression(signalCall.arguments[0]) : undefined;
-            const doc = getJsDocComment(member, checker);
-            const { type, values, rawType } = resolveSignalInputType(signalCall, checker);
-            inputs.push({
-                name,
-                type,
-                rawType,
-                required,
-                ...(values && { values }),
-                ...(defaultValue !== undefined && { defaultValue }),
-                ...(doc && { doc })
-            });
+    const seen = new Set();
+    // Fields a more derived class initializes without declaring them an input.
+    // Angular keeps the inherited input, but the component starts out with that value.
+    const reinitialized = new Map();
+    for (const { classDecl: owner, definesMetadata } of hierarchy.classes) {
+        const subclass = owner === classDecl ? undefined : classDecl;
+        for (const member of owner.members) {
+            if (!ts.isPropertyDeclaration(member) || isStatic(member))
+                continue;
+            const name = member.name && ts.isIdentifier(member.name) ? member.name.text : undefined;
+            if (!name || seen.has(name))
+                continue;
+            const input = definesMetadata ? readInput(member, name, checker, owner, subclass) : undefined;
+            if (!input) {
+                if (member.initializer && !reinitialized.has(name))
+                    reinitialized.set(name, member);
+                continue;
+            }
+            const initializedBy = reinitialized.get(name);
+            if (initializedBy) {
+                const defaultValue = readInitialValue(initializedBy, checker);
+                if (defaultValue === undefined)
+                    delete input.defaultValue;
+                else
+                    input.defaultValue = defaultValue;
+            }
+            seen.add(name);
+            inputs.push(input);
         }
     }
     return inputs;
 }
+function isStatic(member) {
+    return !!ts.getModifiers(member)?.some((m) => m.kind === ts.SyntaxKind.StaticKeyword);
+}
+/** What a field starts out with: its initializer, or for `input()` and `model()` the value passed to them. */
+function readInitialValue(member, checker) {
+    const signalCall = getInputSignalCall(member);
+    if (!signalCall)
+        return member.initializer ? evaluateDefault(member.initializer, checker) : undefined;
+    return !isSignalInputRequired(signalCall) && signalCall.arguments.length > 0 ? evaluateDefault(signalCall.arguments[0], checker) : undefined;
+}
 /**
- * Extract all @Output() and output() signal metadata from a class declaration.
+ * `owner` declares the member. `subclass` is the showcased class when that is
+ * a different one, which decides what the type parameters of `owner` stand for.
  */
-export function extractOutputs(classDecl, checker) {
+function readInput(member, name, checker, owner, subclass) {
+    const inputDecorator = findDecorator(member, 'Input');
+    if (inputDecorator) {
+        const required = isDecoratorInputRequired(inputDecorator);
+        const defaultValue = readInitialValue(member, checker);
+        const doc = getJsDocComment(member, checker);
+        const instantiated = subclass && usesTypeParameters(member.type ?? member.initializer, owner, checker) ? getInstantiatedType(name, subclass, checker) : undefined;
+        const { type, values, rawType } = instantiated ? mapType(instantiated, checker) : resolveDecoratorInputType(member, checker);
+        return {
+            name,
+            type,
+            rawType,
+            required,
+            ...(values && { values }),
+            ...(defaultValue !== undefined && { defaultValue }),
+            ...(doc && { doc })
+        };
+    }
+    const signalCall = getInputSignalCall(member);
+    if (!signalCall)
+        return undefined;
+    const required = isSignalInputRequired(signalCall);
+    const defaultValue = readInitialValue(member, checker);
+    const doc = getJsDocComment(member, checker);
+    const declaredType = signalCall.typeArguments?.[0] ?? signalCall.arguments[0];
+    // A signal is a getter function, so its call signature returns the value type.
+    const instantiated = subclass && usesTypeParameters(declaredType, owner, checker) ? getInstantiatedType(name, subclass, checker)?.getCallSignatures()[0]?.getReturnType() : undefined;
+    const { type, values, rawType } = instantiated ? mapType(instantiated, checker) : resolveSignalInputType(signalCall, checker);
+    return {
+        name,
+        type,
+        rawType,
+        required,
+        ...(values && { values }),
+        ...(defaultValue !== undefined && { defaultValue }),
+        ...(doc && { doc })
+    };
+}
+/**
+ * Extract all @Output() and output() signal metadata from a class declaration
+ * and the base classes Angular inherits outputs from.
+ */
+export function extractOutputs(classDecl, checker, hierarchy = getClassHierarchy(classDecl, checker)) {
     const outputs = [];
-    for (const member of classDecl.members) {
-        if (!ts.isPropertyDeclaration(member))
-            continue;
-        const name = member.name && ts.isIdentifier(member.name) ? member.name.text : undefined;
-        if (!name)
-            continue;
-        const outputDecorator = findDecorator(member, 'Output');
-        if (outputDecorator) {
-            const doc = getJsDocComment(member, checker);
-            outputs.push({ name, ...(doc && { doc }) });
+    const seen = new Set();
+    for (const { classDecl: owner, definesMetadata } of hierarchy.classes) {
+        if (!definesMetadata)
             continue;
-        }
-        if (isOutputSignal(member)) {
+        for (const member of owner.members) {
+            if (!ts.isPropertyDeclaration(member))
+                continue;
+            const name = member.name && ts.isIdentifier(member.name) ? member.name.text : undefined;
+            if (!name || seen.has(name))
+                continue;
+            if (!findDecorator(member, 'Output') && !isOutputSignal(member))
+                continue;
             const doc = getJsDocComment(member, checker);
+            seen.add(name);
             outputs.push({ name, ...(doc && { doc }) });
         }
     }
     return outputs;
 }
+/**
+ * Whether a declared type, or the expression a type is inferred from,
+ * mentions a type parameter of the class that declares it. Only then does the
+ * subclass change the type; otherwise the source text stays, alias names included.
+ */
+function usesTypeParameters(node, owner, checker) {
+    const parameters = owner.typeParameters;
+    if (!node || !parameters?.length)
+        return false;
+    const isOwnParameter = (declaration) => !!declaration && ts.isTypeParameterDeclaration(declaration) && parameters.includes(declaration);
+    const visit = (child) => {
+        if (ts.isTypeReferenceNode(child) && ts.isIdentifier(child.typeName) && isOwnParameter(checker.getSymbolAtLocation(child.typeName)?.declarations?.[0])) {
+            return true;
+        }
+        return ts.forEachChild(child, visit) ?? false;
+    };
+    // An inferred type can depend on `T` without the source naming it: `model(this.initial)`.
+    return visit(node) || (!ts.isTypeNode(node) && typeMentions(checker.getTypeAtLocation(node), isOwnParameter, checker));
+}
+function typeMentions(type, isOwnParameter, checker, visited = new Set()) {
+    if (visited.has(type))
+        return false;
+    visited.add(type);
+    if (type.flags & ts.TypeFlags.TypeParameter)
+        return isOwnParameter(type.symbol?.declarations?.[0]);
+    const isReference = type.flags & ts.TypeFlags.Object && type.objectFlags & ts.ObjectFlags.Reference;
+    const nested = [
+        ...(type.isUnionOrIntersection() ? type.types : []),
+        ...(type.aliasTypeArguments ?? []),
+        ...(isReference ? checker.getTypeArguments(type) : [])
+    ];
+    return nested.some((t) => typeMentions(t, isOwnParameter, checker, visited));
+}
+/**
+ * The type of a property declared in a generic base class, as the subclass
+ * sees it: `items = input.required<T[]>()` in `Field<T>` is an
+ * `InputSignal<Country[]>` on `Picker extends Field<Country>`.
+ */
+function getInstantiatedType(name, subclass, checker) {
+    const property = checker.getPropertyOfType(checker.getTypeAtLocation(subclass), name);
+    return property && checker.getTypeOfSymbolAtLocation(property, subclass);
+}
+/**
+ * A default is all or nothing. The renderer applies it to the component, so
+ * the part of `{ ...shared, size: 'm' }` that can be read would overwrite the
+ * whole default the component actually declares.
+ */
+function evaluateDefault(node, checker) {
+    let complete = true;
+    const value = evaluateStatic(node, { checker, report: () => (complete = false) });
+    return complete ? value : undefined;
+}
 function getInputSignalCall(member) {
     const init = member.initializer;
     if (!init || !ts.isCallExpression(init))

package/dist/builder/scanner/manifest.generator.js

@@ -3,7 +3,7 @@
  */
 export function generateManifest(components) {
     const lines = [
-        '// AUTO-GENERATED by ng-prism — do not edit!',
+        '// AUTO-GENERATED by ng-prism. Do not edit!',
         "import type { PrismManifest } from 'ng-prism/plugin';",
         '',
         'export const PRISM_MANIFEST: PrismManifest = {',
@@ -30,6 +30,10 @@ function json(value) {
 function indent(depth) {
     return ' '.repeat(depth);
 }
+/** `'aria-label'` and content slots like `'[card-header]'` are only valid keys in quotes. */
+function formatKey(key) {
+    return /^[A-Za-z_$][\w$]*$/.test(key) ? key : JSON.stringify(key);
+}
 function formatObject(obj, baseIndent) {
     const entries = Object.entries(obj).filter(([, v]) => v !== undefined);
     if (entries.length === 0)
@@ -41,7 +45,7 @@ function formatObject(obj, baseIndent) {
             : typeof value === 'object' && value !== null
                 ? formatObject(value, inner)
                 : json(value);
-        return `${indent(inner)}${key}: ${formatted},`;
+        return `${indent(inner)}${formatKey(key)}: ${formatted},`;
     });
     return `{\n${lines.join('\n')}\n${indent(baseIndent)}}`;
 }

package/dist/builder/scanner/scanner.d.ts

@@ -7,6 +7,8 @@ export interface CreateScannerOptions {
 }
 export interface ScanResult {
     components: ScannedComponent[];
+    /** One message per @Showcase value the scan had to drop, already printed as a warning. */
+    diagnostics: string[];
 }
 export interface Scanner {
     /** Scan all entry points. Reuses TypeScript program state from previous scans. */
@@ -16,7 +18,7 @@ export interface Scanner {
  * Create a stateful multi-entry scanner that retains the previous ts.Program between scans.
  * A single shared program is created with every entry-point file as a root name, so the
  * transitive type graph (Angular framework typings, etc.) is parsed once and shared via
- * the program's `TypeChecker` — instead of N programs that each load Material/CDK/RxJS.
+ * the program's `TypeChecker`, instead of N programs that each load Material/CDK/RxJS.
  *
  * TypeScript reuses parsed SourceFile objects from the old program on rebuild, making
  * incremental scans fast.

package/dist/builder/scanner/scanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,KAAK,eAAe,EAA4B,MAAM,0BAA0B,CAAC;AAE1F,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC;CACxC;AAED,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,gBAAgB,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,OAAO;IACpB,kFAAkF;IAClF,IAAI,IAAI,UAAU,CAAC;CACtB;AAkBD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CA+CpE"}
+{"version":3,"file":"scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE,OAAO,EAAE,KAAK,eAAe,EAA4B,MAAM,0BAA0B,CAAC;AAE1F,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC;CACxC;AAED,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,0FAA0F;IAC1F,WAAW,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,OAAO;IACpB,kFAAkF;IAClF,IAAI,IAAI,UAAU,CAAC;CACtB;AAkBD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CAiDpE"}

package/dist/builder/scanner/scanner.js

@@ -13,14 +13,14 @@ const DEFAULT_COMPILER_OPTIONS = {
     types: [],
     // Perf: we never call program.emit(); skip emit-related setup work.
     noEmit: true,
-    // Perf: complement to skipLibCheck — also skip type-checking lib.*.d.ts files.
+    // Perf: complements skipLibCheck by also skipping type-checking of lib.*.d.ts files.
     skipDefaultLibCheck: true
 };
 /**
  * Create a stateful multi-entry scanner that retains the previous ts.Program between scans.
  * A single shared program is created with every entry-point file as a root name, so the
  * transitive type graph (Angular framework typings, etc.) is parsed once and shared via
- * the program's `TypeChecker` — instead of N programs that each load Material/CDK/RxJS.
+ * the program's `TypeChecker`, instead of N programs that each load Material/CDK/RxJS.
  *
  * TypeScript reuses parsed SourceFile objects from the old program on rebuild, making
  * incremental scans fast.
@@ -37,8 +37,10 @@ export function createScanner(options) {
             previousProgram = program;
             const checker = program.getTypeChecker();
             const allComponents = [];
+            const diagnostics = [];
+            const notices = new Set();
             for (const { exports, importPath } of entries) {
-                const components = scanComponents(exports, checker);
+                const components = scanComponents(exports, checker, diagnostics, notices);
                 for (const c of components)
                     c.importPath = importPath;
                 allComponents.push(...components);
@@ -59,7 +61,7 @@ export function createScanner(options) {
                 seen.add(key);
                 unique.push(c);
             }
-            return { components: unique };
+            return { components: unique, diagnostics };
         }
     };
 }