@stencil/angular-output-target 1.4.0 → 1.5.0

package/README.md

@@ -57,3 +57,92 @@ export const config: Config = {
 | `outputType`           | Specifies the type of output to be generated. It can take one of the following values: <br />1. `component`: Generates all the component wrappers to be declared on an Angular module. This option is required for Stencil projects using the `dist` hydrated output.<br /> 2. `scam`: Generates a separate Angular module for each component.<br /> 3. `standalone`: Generates standalone component wrappers.<br /> Both `scam` and `standalone` options are compatible with the `dist-custom-elements` output. <br />Note: Please choose the appropriate `outputType` based on your project's requirements and the desired output structure. Defaults to `component`. |
 | `customElementsDir`    | This is the directory where the custom elements are imported from when using the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements). Defaults to the `components` directory. Only applies for `outputType: "scam"` or `outputType: "standalone"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `inlineProperties` | Experimental. When true, tries to inline the properties of components. This is required to enable Angular Language Service to type-check and show jsdocs when using the components in html-templates.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `booleanAttributes`    | When `true`, boolean properties are declared with an Angular input transform so they can be set by attribute presence, e.g. `<my-component disabled>` instead of `<my-component [disabled]="true">`. Type-checking the attribute form also requires `inlineProperties`. Defaults to `false`. Refer to [Boolean attributes](#boolean-attributes).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+
+## Boolean attributes
+
+Angular resolves a bare attribute to the empty string, so a boolean property has to be bound
+explicitly by default:
+
+```html
+<!-- Type 'string' is not assignable to type 'boolean' under strictTemplates -->
+<my-component disabled></my-component>
+
+<my-component [disabled]="true"></my-component>
+```
+
+Setting `booleanAttributes: true` declares boolean properties with an Angular input transform,
+which accepts the attribute form and coerces it:
+
+```html
+<my-component disabled></my-component>
+<my-component disabled="false"></my-component>
+<my-component [disabled]="isDisabled"></my-component>
+```
+
+The transform used is `nullableBooleanAttribute` rather than Angular's `booleanAttribute`. It
+coerces strings identically, but passes `null` and `undefined` through instead of coercing them to
+`false`. Components frequently treat those as a state distinct from `false`:
+
+```tsx
+// `undefined` means "decide based on the mode", which is not the same as `false`
+const showDetail = detail !== undefined ? detail : mode === 'ios';
+
+// a strict comparison also behaves differently for `null` than it does for `false`
+const showHandle = handle !== false;
+```
+
+Both values reach inputs routinely, from the `async` pipe before its first emission and from form
+control values, so coercing them would change the behavior of bindings that work today.
+
+### Type-checking requires `inlineProperties`
+
+This option changes what the Angular compiler accepts, so it only has a visible effect where the
+compiler type-checks the wrapper's inputs in the first place. That needs `inlineProperties`
+enabled as well:
+
+```ts
+angularOutputTarget({
+  // ...
+  booleanAttributes: true,
+  inlineProperties: true,
+});
+```
+
+Without `inlineProperties` the generated wrappers declare no typed members for their inputs, so
+Angular does not check these bindings at all and there is no `TS2322` for the transform to
+resolve.
+
+The transform itself still runs either way. Angular applies it from the component definition's
+input map, which does not depend on a declared class member, so enabling `booleanAttributes` on
+its own moves boolean coercion from Stencil to the transform without the compiler checking what
+you pass. The two agree on strings, booleans, `null` and `undefined`. If you bind a value outside
+those, prefer enabling `inlineProperties` too so that `ngAcceptInputType_*` rejects it at compile
+time rather than silently coercing it.
+
+Note that `inlineProperties` is itself experimental, so enabling both is opting into that. With
+`booleanAttributes` on its own you still get the attribute syntax at runtime, just without the
+compiler checking it.
+
+### Limitations
+
+A property is only transformed when Stencil reports its type as exactly `boolean`. Three kinds of
+property fall outside that, and they behave differently from each other. In all three the property
+receives the attribute's empty string rather than `true`, so bind them explicitly when you need a
+boolean.
+
+**Virtual properties** are not transformed and get no inlined class member either, so Angular has
+nothing to check the binding against and skips it. A bare attribute compiles, and the property
+receives `''`. Nothing warns you.
+
+**Properties declared as `any`** are not transformed, but they do get an inlined member typed
+`any`, so `''` is assignable. A bare attribute compiles, and the property receives `''`. Nothing
+warns you here either.
+
+**Properties whose type unions `boolean` with something else**, such as `boolean | 'auto'`, are
+reported to the output target as `any`, so they get no transform, but their inlined member keeps
+the real union type. This is the only case the compiler catches:
+
+```
+TS2322: Type '""' is not assignable to type 'boolean | "auto"'
+```

package/angular-component-lib/boolean-attribute.ts

@@ -0,0 +1,43 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Transforms a value to a boolean so that boolean properties can be set by attribute presence,
+ * e.g. `<my-component disabled>` instead of `<my-component [disabled]="true">`.
+ *
+ * Strings are coerced the same way Angular's `booleanAttribute` coerces them, so `''` (a bare
+ * attribute) becomes `true` and `'false'` becomes `false`.
+ *
+ * Unlike Angular's `booleanAttribute`, `null` and `undefined` are passed through rather than
+ * coerced to `false`. Components frequently treat them as a state distinct from `false`:
+ *
+ * ```tsx
+ * // `undefined` means "decide based on the mode", which is not the same as `false`
+ * const showDetail = detail !== undefined ? detail : mode === 'ios';
+ *
+ * // a strict comparison also behaves differently for `null` than it does for `false`
+ * const showHandle = handle !== false;
+ * ```
+ *
+ * Both values reach inputs routinely in Angular templates, from the `async` pipe before its
+ * first emission and from form control values, so coercing them would change the behavior of
+ * bindings that work today.
+ *
+ * This is implemented here rather than imported from `@angular/core` so that consumers on
+ * Angular versions without `booleanAttribute` are unaffected by this file being generated.
+ *
+ * The parameter type is what Angular derives `ngAcceptInputType_*` from, so it decides which
+ * template bindings compile. Widening it to `unknown` would let any expression through.
+ *
+ * Declared as a function rather than an arrow constant because Angular has to resolve input
+ * transforms statically when compiling a library in partial compilation mode.
+ *
+ * This lives in its own file, separate from `utils.ts`, so that it carries no runtime imports.
+ * That keeps it independently type-checkable without pulling `rxjs` in for `proxyOutputs`.
+ */
+export function nullableBooleanAttribute(value: boolean | string | null | undefined): boolean | null | undefined {
+  if (value === null || value === undefined) {
+    return value;
+  }
+  return typeof value === 'boolean' ? value : value !== 'false';
+}

package/dist/generate-angular-component.d.ts

@@ -1,5 +1,10 @@
 import type { ComponentCompilerEvent, ComponentCompilerProperty } from '@stencil/core/internal';
 import type { ComponentInputProperty, OutputType } from './types';
+/**
+ * The transform function to reference in generated code, exported from
+ * `angular-component-lib/boolean-attribute`.
+ */
+export declare const INPUT_TRANSFORM_FUNCTION = "nullableBooleanAttribute";
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *

package/dist/generate-angular-component.js

@@ -25,21 +25,33 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     }
 }
 /**
- * Creates a formatted inputs text with required declaration.
+ * The transform function to reference in generated code, exported from
+ * `angular-component-lib/boolean-attribute`.
+ */
+export const INPUT_TRANSFORM_FUNCTION = 'nullableBooleanAttribute';
+/**
+ * Creates a formatted inputs text with required and transform declarations.
+ *
+ * Inputs are emitted as bare strings unless they carry options, in which case Angular's object
+ * form is used (e.g. `{ name: 'myInput', required: true }`).
  *
- * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
  * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @returns The inputs list declaration as a string.
  */
 function formatInputs(inputs) {
     return inputs
         .map((item) => {
+        const options = [];
         if (item.required) {
-            return `{ name: '${item.name}', required: true }`;
+            options.push('required: true');
+        }
+        if (item.transform) {
+            options.push(`transform: ${INPUT_TRANSFORM_FUNCTION}`);
         }
-        else {
+        if (options.length === 0) {
             return `'${item.name}'`;
         }
+        return `{ name: '${item.name}', ${options.join(', ')} }`;
     })
         .join(', ');
 }

package/dist/index.cjs

@@ -179,21 +179,33 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     }
 }
 /**
- * Creates a formatted inputs text with required declaration.
+ * The transform function to reference in generated code, exported from
+ * `angular-component-lib/boolean-attribute`.
+ */
+const INPUT_TRANSFORM_FUNCTION = 'nullableBooleanAttribute';
+/**
+ * Creates a formatted inputs text with required and transform declarations.
+ *
+ * Inputs are emitted as bare strings unless they carry options, in which case Angular's object
+ * form is used (e.g. `{ name: 'myInput', required: true }`).
  *
- * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
  * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @returns The inputs list declaration as a string.
  */
 function formatInputs(inputs) {
     return inputs
         .map((item) => {
+        const options = [];
         if (item.required) {
-            return `{ name: '${item.name}', required: true }`;
+            options.push('required: true');
+        }
+        if (item.transform) {
+            options.push(`transform: ${INPUT_TRANSFORM_FUNCTION}`);
         }
-        else {
+        if (options.length === 0) {
             return `'${item.name}'`;
         }
+        return `{ name: '${item.name}', ${options.join(', ')} }`;
     })
         .join(', ');
 }
@@ -782,6 +794,44 @@ stencilSetTagTransformer(\${transformerArg});
 
 const __filename$1 = url.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT' && document.currentScript.src || new URL('index.cjs', document.baseURI).href)));
 const __dirname$1 = path__default["default"].dirname(__filename$1);
+const filterInternalProps = (prop) => !prop.internal;
+/**
+ * Whether a property declares an input transform.
+ *
+ * This is the single definition of the rule. Both the generated declaration and the import that
+ * satisfies it are derived from it, so widening the rule can't leave a generated file referencing
+ * a transform it never imports.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when the property should be transformed.
+ */
+const isTransformedProp = (prop, booleanAttributes) => booleanAttributes && prop.type === 'boolean';
+/**
+ * Maps a Stencil property to an Angular input declaration.
+ *
+ * Virtual properties are mapped with `booleanAttributes` left at its default of `false`. They
+ * carry a free-form type string and no `required` flag, so they are never transformed and always
+ * come out as optional.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns The Angular input declaration.
+ */
+const mapInputProp = (prop, booleanAttributes = false) => ({
+    name: prop.name,
+    required: prop.required ?? false,
+    transform: isTransformedProp(prop, booleanAttributes) ? true : undefined,
+});
+/**
+ * Whether any of a component's properties will declare an input transform, which determines
+ * whether the transform needs to be imported.
+ *
+ * @param components The components in the generated file.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when at least one property is transformed.
+ */
+const usesInputTransform = (components, booleanAttributes) => components.some((cmpMeta) => (cmpMeta.properties ?? []).filter(filterInternalProps).some((prop) => isTransformedProp(prop, booleanAttributes)));
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -879,6 +929,14 @@ function generateProxies(components, pkgData, outputTarget, rootDir, config) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
+    /**
+     * The input transform lives in its own module so that it carries no runtime imports.
+     */
+    let transformImport = '';
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    if (usesInputTransform(components, booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -886,7 +944,7 @@ function generateProxies(components, pkgData, outputTarget, rootDir, config) {
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -915,12 +973,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         sourceImports = cmpImports.join('\n');
     }
     const proxyFileOutput = [];
-    const filterInternalProps = (prop) => !prop.internal;
-    // Ensure that virtual properties has required as false.
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -928,9 +980,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         if (cmpMeta.properties) {
             internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
         }
-        const inputs = internalProps.map(mapInputProp);
+        const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+            inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const methods = [];
@@ -977,11 +1029,18 @@ function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config)
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    const componentLibImports = ['ProxyCmp'];
+    // The input transform lives in its own module so that it carries no runtime imports.
+    let transformImport = '';
+    if (usesInputTransform([cmpMeta], booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     // Type imports
     const importLocation = componentCorePackage
         ? getPathToComponentTypes(config, outputTarget)
@@ -993,18 +1052,13 @@ ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
         sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${normalizePath(componentCorePackage)}/${customElementsDir}/${cmpMeta.tagName}.js';\n`;
     }
     // Generate component definition
-    const filterInternalProps = (prop) => !prop.internal;
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const internalProps = [];
     if (cmpMeta.properties) {
         internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
     }
-    const inputs = internalProps.map(mapInputProp);
+    const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
     if (cmpMeta.virtualProperties) {
-        inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+        inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
     }
     const orderedInputs = sortBy(inputs, (cip) => cip.name);
     const methods = [];

package/dist/index.js

@@ -171,21 +171,33 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     }
 }
 /**
- * Creates a formatted inputs text with required declaration.
+ * The transform function to reference in generated code, exported from
+ * `angular-component-lib/boolean-attribute`.
+ */
+const INPUT_TRANSFORM_FUNCTION = 'nullableBooleanAttribute';
+/**
+ * Creates a formatted inputs text with required and transform declarations.
+ *
+ * Inputs are emitted as bare strings unless they carry options, in which case Angular's object
+ * form is used (e.g. `{ name: 'myInput', required: true }`).
  *
- * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
  * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @returns The inputs list declaration as a string.
  */
 function formatInputs(inputs) {
     return inputs
         .map((item) => {
+        const options = [];
         if (item.required) {
-            return `{ name: '${item.name}', required: true }`;
+            options.push('required: true');
+        }
+        if (item.transform) {
+            options.push(`transform: ${INPUT_TRANSFORM_FUNCTION}`);
         }
-        else {
+        if (options.length === 0) {
             return `'${item.name}'`;
         }
+        return `{ name: '${item.name}', ${options.join(', ')} }`;
     })
         .join(', ');
 }
@@ -774,6 +786,44 @@ stencilSetTagTransformer(\${transformerArg});
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const filterInternalProps = (prop) => !prop.internal;
+/**
+ * Whether a property declares an input transform.
+ *
+ * This is the single definition of the rule. Both the generated declaration and the import that
+ * satisfies it are derived from it, so widening the rule can't leave a generated file referencing
+ * a transform it never imports.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when the property should be transformed.
+ */
+const isTransformedProp = (prop, booleanAttributes) => booleanAttributes && prop.type === 'boolean';
+/**
+ * Maps a Stencil property to an Angular input declaration.
+ *
+ * Virtual properties are mapped with `booleanAttributes` left at its default of `false`. They
+ * carry a free-form type string and no `required` flag, so they are never transformed and always
+ * come out as optional.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns The Angular input declaration.
+ */
+const mapInputProp = (prop, booleanAttributes = false) => ({
+    name: prop.name,
+    required: prop.required ?? false,
+    transform: isTransformedProp(prop, booleanAttributes) ? true : undefined,
+});
+/**
+ * Whether any of a component's properties will declare an input transform, which determines
+ * whether the transform needs to be imported.
+ *
+ * @param components The components in the generated file.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when at least one property is transformed.
+ */
+const usesInputTransform = (components, booleanAttributes) => components.some((cmpMeta) => (cmpMeta.properties ?? []).filter(filterInternalProps).some((prop) => isTransformedProp(prop, booleanAttributes)));
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -871,6 +921,14 @@ function generateProxies(components, pkgData, outputTarget, rootDir, config) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
+    /**
+     * The input transform lives in its own module so that it carries no runtime imports.
+     */
+    let transformImport = '';
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    if (usesInputTransform(components, booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -878,7 +936,7 @@ function generateProxies(components, pkgData, outputTarget, rootDir, config) {
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -907,12 +965,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         sourceImports = cmpImports.join('\n');
     }
     const proxyFileOutput = [];
-    const filterInternalProps = (prop) => !prop.internal;
-    // Ensure that virtual properties has required as false.
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -920,9 +972,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         if (cmpMeta.properties) {
             internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
         }
-        const inputs = internalProps.map(mapInputProp);
+        const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+            inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const methods = [];
@@ -969,11 +1021,18 @@ function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config)
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    const componentLibImports = ['ProxyCmp'];
+    // The input transform lives in its own module so that it carries no runtime imports.
+    let transformImport = '';
+    if (usesInputTransform([cmpMeta], booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     // Type imports
     const importLocation = componentCorePackage
         ? getPathToComponentTypes(config, outputTarget)
@@ -985,18 +1044,13 @@ ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
         sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${normalizePath(componentCorePackage)}/${customElementsDir}/${cmpMeta.tagName}.js';\n`;
     }
     // Generate component definition
-    const filterInternalProps = (prop) => !prop.internal;
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const internalProps = [];
     if (cmpMeta.properties) {
         internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
     }
-    const inputs = internalProps.map(mapInputProp);
+    const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
     if (cmpMeta.virtualProperties) {
-        inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+        inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
     }
     const orderedInputs = sortBy(inputs, (cip) => cip.name);
     const methods = [];

package/dist/output-angular.js

@@ -3,11 +3,49 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, isOutputTypeCustomElementsBuild, OutputTypes, mapPropName, } from './utils';
-import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
+import { createAngularComponentDefinition, createComponentTypeDefinition, INPUT_TRANSFORM_FUNCTION, } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
 import { generateAngularModuleForComponent } from './generate-angular-modules';
 import { generateTransformTagScript } from './generate-transformtag-script';
+const filterInternalProps = (prop) => !prop.internal;
+/**
+ * Whether a property declares an input transform.
+ *
+ * This is the single definition of the rule. Both the generated declaration and the import that
+ * satisfies it are derived from it, so widening the rule can't leave a generated file referencing
+ * a transform it never imports.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when the property should be transformed.
+ */
+const isTransformedProp = (prop, booleanAttributes) => booleanAttributes && prop.type === 'boolean';
+/**
+ * Maps a Stencil property to an Angular input declaration.
+ *
+ * Virtual properties are mapped with `booleanAttributes` left at its default of `false`. They
+ * carry a free-form type string and no `required` flag, so they are never transformed and always
+ * come out as optional.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns The Angular input declaration.
+ */
+const mapInputProp = (prop, booleanAttributes = false) => ({
+    name: prop.name,
+    required: prop.required ?? false,
+    transform: isTransformedProp(prop, booleanAttributes) ? true : undefined,
+});
+/**
+ * Whether any of a component's properties will declare an input transform, which determines
+ * whether the transform needs to be imported.
+ *
+ * @param components The components in the generated file.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when at least one property is transformed.
+ */
+const usesInputTransform = (components, booleanAttributes) => components.some((cmpMeta) => (cmpMeta.properties ?? []).filter(filterInternalProps).some((prop) => isTransformedProp(prop, booleanAttributes)));
 export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -105,6 +143,14 @@ export function generateProxies(components, pkgData, outputTarget, rootDir, conf
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
+    /**
+     * The input transform lives in its own module so that it carries no runtime imports.
+     */
+    let transformImport = '';
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    if (usesInputTransform(components, booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -112,7 +158,7 @@ export function generateProxies(components, pkgData, outputTarget, rootDir, conf
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -141,12 +187,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         sourceImports = cmpImports.join('\n');
     }
     const proxyFileOutput = [];
-    const filterInternalProps = (prop) => !prop.internal;
-    // Ensure that virtual properties has required as false.
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -154,9 +194,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         if (cmpMeta.properties) {
             internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
         }
-        const inputs = internalProps.map(mapInputProp);
+        const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+            inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const methods = [];
@@ -203,11 +243,18 @@ export function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir,
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    const componentLibImports = ['ProxyCmp'];
+    // The input transform lives in its own module so that it carries no runtime imports.
+    let transformImport = '';
+    if (usesInputTransform([cmpMeta], booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     // Type imports
     const importLocation = componentCorePackage
         ? getPathToComponentTypes(config, outputTarget)
@@ -219,18 +266,13 @@ ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
         sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${normalizePath(componentCorePackage)}/${customElementsDir}/${cmpMeta.tagName}.js';\n`;
     }
     // Generate component definition
-    const filterInternalProps = (prop) => !prop.internal;
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const internalProps = [];
     if (cmpMeta.properties) {
         internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
     }
-    const inputs = internalProps.map(mapInputProp);
+    const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
     if (cmpMeta.virtualProperties) {
-        inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+        inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
     }
     const orderedInputs = sortBy(inputs, (cip) => cip.name);
     const methods = [];

package/dist/types.d.ts

@@ -94,6 +94,43 @@ export interface OutputTargetAngular {
      * @default false
      */
     esModules?: boolean;
+    /**
+     * When `true`, boolean properties are declared with an Angular input transform so they can
+     * be set using attribute presence syntax:
+     *
+     * ```html
+     * <!-- with booleanAttributes enabled -->
+     * <my-component disabled></my-component>
+     *
+     * <!-- otherwise the value has to be bound explicitly -->
+     * <my-component [disabled]="true"></my-component>
+     * ```
+     *
+     * Without a transform Angular resolves the bare attribute to the empty string and reports
+     * `Type 'string' is not assignable to type 'boolean'` under `strictTemplates`.
+     *
+     * Compile-time checking of these bindings also requires `inlineProperties`. Without it the
+     * generated wrappers declare no typed members for their inputs, so Angular never checks them
+     * and there is no error for the transform to resolve.
+     *
+     * The transform still runs either way, because Angular applies it from the component
+     * definition's input map rather than from a declared class member. Enabling this on its own
+     * therefore moves boolean coercion from Stencil to the transform with nothing checking what
+     * callers pass, so prefer enabling `inlineProperties` alongside it.
+     *
+     * The transform coerces strings the same way Angular's `booleanAttribute` does, but passes
+     * `null` and `undefined` through instead of coercing them to `false`. Refer to
+     * `nullableBooleanAttribute`.
+     *
+     * Properties are only transformed when Stencil reports their type as exactly `boolean`.
+     * Virtual properties, properties declared as `any`, and types that union `boolean` with
+     * something else (such as `boolean | 'auto'`, reported as `any`) get no transform, and the
+     * property receives the attribute's empty string rather than `true`. Only the union case fails
+     * to compile; the other two are silent. Refer to the README for the differences.
+     *
+     * @default false
+     */
+    booleanAttributes?: boolean;
 }
 export type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
 export interface ValueAccessorConfig {
@@ -108,4 +145,8 @@ export interface PackageJSON {
 export interface ComponentInputProperty {
     name: string;
     required: boolean;
+    /**
+     * Whether to declare an input transform so the property can be set by attribute presence.
+     */
+    transform?: boolean;
 }

package/dist/wizard.d.ts

@@ -4,6 +4,6 @@ export declare const wizard: {
         id: string;
         displayName: string;
         description: string;
-        run({ config, workspaceRoot, prompts, nypm }: WizardContext): Promise<void>;
+        run({ config, workspaceRoot, prompts, nypm, openStencilConfig }: WizardContext): Promise<void>;
     };
 };

package/dist/wizard.js

@@ -1,54 +1,6 @@
-import { Project, SyntaxKind } from 'ts-morph';
 import { access, mkdir, readFile, writeFile } from 'node:fs/promises';
 import { join, relative, dirname } from 'node:path';
 // ---------------------------------------------------------------------------
-// ts-morph helpers
-// ---------------------------------------------------------------------------
-function amendStencilConfig(configPath, targetCode) {
-    const project = new Project({ skipAddingFilesFromTsConfig: true });
-    const src = project.addSourceFileAtPath(configPath);
-    if (!src.getImportDeclaration('@stencil/angular-output-target')) {
-        src.addImportDeclaration({
-            moduleSpecifier: '@stencil/angular-output-target',
-            namedImports: ['angularOutputTarget'],
-        });
-    }
-    const existingProp = src
-        .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-        .find((p) => p.getName() === 'outputTargets');
-    if (!existingProp) {
-        const configObj = src.getVariableDeclaration('config')?.getInitializerIfKind(SyntaxKind.ObjectLiteralExpression) ??
-            src
-                .getDescendantsOfKind(SyntaxKind.ObjectLiteralExpression)
-                .find((obj) => obj.getProperty('namespace') !== undefined);
-        if (!configObj)
-            throw new Error('Could not find Stencil config object in stencil.config.ts');
-        configObj.addPropertyAssignment({ name: 'outputTargets', initializer: '[]' });
-    }
-    const prop = src.getDescendantsOfKind(SyntaxKind.PropertyAssignment).find((p) => p.getName() === 'outputTargets');
-    const arr = prop.getInitializerIfKind(SyntaxKind.ArrayLiteralExpression);
-    if (!arr)
-        throw new Error('outputTargets is not an array literal in stencil.config.ts');
-    const existing = arr.getText();
-    const alreadyAdded = existing.includes('angularOutputTarget(');
-    // Filter out any existing angularOutputTarget call so it can be replaced cleanly
-    const elements = arr
-        .getElements()
-        .map((e) => e.getText().trim())
-        .filter((e) => !e.includes('angularOutputTarget('));
-    const hasStandalone = existing.includes("type: 'standalone'") ||
-        existing.includes('type: "standalone"') ||
-        existing.includes("type: 'dist-custom-elements'") ||
-        existing.includes('type: "dist-custom-elements"');
-    if (!hasStandalone)
-        elements.push("{ type: 'standalone' }");
-    elements.push(targetCode);
-    prop.setInitializer(`[\n${elements.map((e) => `  ${e}`).join(',\n')},\n]`);
-    src.formatText();
-    src.saveSync();
-    return !alreadyAdded;
-}
-// ---------------------------------------------------------------------------
 // pnpm build approval
 // ---------------------------------------------------------------------------
 async function allowPnpmBuild(pkg, rootDir, workspaceRoot) {
@@ -194,19 +146,12 @@ export const wizard = {
         id: '@stencil/angular-output-target',
         displayName: 'Angular',
         description: 'Angular component wrappers for your Stencil components',
-        async run({ config, workspaceRoot, prompts, nypm }) {
+        async run({ config, workspaceRoot, prompts, nypm, openStencilConfig }) {
             const { intro, outro, text, select, confirm, spinner, isCancel, cancel, log } = prompts;
             intro('Angular output target');
-            const stencilConfigPath = join(config.rootDir, 'stencil.config.ts');
             // Guard: already configured?
-            const guardProject = new Project({ skipAddingFilesFromTsConfig: true });
-            const alreadyConfigured = guardProject
-                .addSourceFileAtPath(stencilConfigPath)
-                .getDescendantsOfKind(SyntaxKind.PropertyAssignment)
-                .find((p) => p.getName() === 'outputTargets')
-                ?.getInitializerIfKind(SyntaxKind.ArrayLiteralExpression)
-                ?.getText()
-                .includes('angularOutputTarget(');
+            const editor = await openStencilConfig();
+            const alreadyConfigured = editor.outputTargetsContains('angularOutputTarget(');
             if (alreadyConfigured) {
                 const redo = await confirm({
                     message: 'angularOutputTarget is already in stencil.config.ts — reconfigure?',
@@ -219,18 +164,21 @@ export const wizard = {
             }
             // Where should the wrapper package live?
             let wrapperDir;
-            const defaultName = `${config.fsNamespace}-angular`;
+            let wrapperPackageName = `${config.fsNamespace}-angular`;
             if (workspaceRoot) {
                 const rawName = await text({
                     message: 'Wrapper package name?',
-                    placeholder: defaultName,
-                    defaultValue: defaultName,
+                    placeholder: wrapperPackageName,
+                    defaultValue: wrapperPackageName,
                 });
                 if (isCancel(rawName)) {
                     cancel('Setup cancelled.');
                     return;
                 }
-                wrapperDir = join(dirname(config.rootDir), rawName);
+                wrapperPackageName = rawName;
+                // Directory is already namespaced by living under packages/, so keep it
+                // short rather than repeating the fsNamespace prefix from the package name.
+                wrapperDir = join(dirname(config.rootDir), 'angular');
             }
             else {
                 const defaultRel = `../${config.fsNamespace}-angular`;
@@ -271,8 +219,15 @@ export const wizard = {
                 const s = spinner();
                 s.start(`Scaffolding wrapper package at ${relative(workspaceRoot ?? config.rootDir, wrapperDir)}`);
                 try {
-                    const corePkgVersion = workspaceRoot ? 'workspace:*' : `file:${relative(wrapperDir, config.rootDir)}`;
-                    await scaffoldWrapperPackage(wrapperDir, `${config.fsNamespace}-angular`, componentCorePackage, corePkgVersion, config.fsNamespace, selectedOutputType);
+                    // workspace:* only resolves under pnpm/yarn-berry/bun — npm and yarn classic reject
+                    // the protocol outright (even for devDependencies that are never installed), so only
+                    // use it when the detected package manager actually understands it.
+                    const pm = workspaceRoot ? await nypm.detectPackageManager(workspaceRoot) : undefined;
+                    const supportsWorkspaceProtocol = pm?.name === 'pnpm' || pm?.name === 'bun' || (pm?.name === 'yarn' && pm.majorVersion !== '1');
+                    const corePkgVersion = supportsWorkspaceProtocol
+                        ? 'workspace:*'
+                        : `file:${relative(wrapperDir, config.rootDir)}`;
+                    await scaffoldWrapperPackage(wrapperDir, wrapperPackageName, componentCorePackage, corePkgVersion, config.fsNamespace, selectedOutputType);
                     s.stop('Wrapper package scaffolded');
                 }
                 catch (e) {
@@ -301,10 +256,20 @@ export const wizard = {
                 ...(selectedOutputType !== 'standalone' ? [`outputType: '${selectedOutputType}'`] : []),
             ];
             const targetCode = `angularOutputTarget({\n  ${lines.join(',\n  ')},\n})`;
-            // Amend stencil.config.ts in one pass so formatText() sees the final array
+            // Amend stencil.config.ts
             try {
-                const added = amendStencilConfig(stencilConfigPath, targetCode);
-                log.success(added ? 'stencil.config.ts updated' : 'angularOutputTarget already present — no changes made');
+                editor.addImport('@stencil/angular-output-target', ['angularOutputTarget']);
+                const hasStandalone = editor.outputTargetsContains("type: 'standalone'") ||
+                    editor.outputTargetsContains('type: "standalone"') ||
+                    editor.outputTargetsContains("type: 'dist-custom-elements'") ||
+                    editor.outputTargetsContains('type: "dist-custom-elements"');
+                if (!hasStandalone)
+                    editor.addOutputTarget("{ type: 'standalone' }");
+                if (!editor.replaceOutputTarget('angularOutputTarget(', targetCode)) {
+                    editor.addOutputTarget(targetCode);
+                }
+                await editor.save();
+                log.success('stencil.config.ts updated');
             }
             catch (e) {
                 log.warn(`Could not automatically update stencil.config.ts (${e}). Add manually:\n\n` +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -55,23 +55,21 @@
   "bugs": {
     "url": "https://github.com/stenciljs/output-targets/issues"
   },
-  "dependencies": {
-    "ts-morph": "^28.0.0"
-  },
   "devDependencies": {
-    "@stencil/cli": "^5.0.0 || >=5.0.0-alpha.0 <5.0.0-next.0",
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14",
+    "@stencil/cli": "^5.0.0 || >=5.0.0-alpha.17 <5.0.0-next.0",
     "@stencil/core": "4.41.0",
-    "@types/node": "^18.0.0",
-    "npm-run-all2": "^6.2.4",
-    "rimraf": "^5.0.0",
-    "rollup": "^2.23.1",
-    "typescript": "~5.7.0",
-    "vitest": "^2.1.4"
+    "@types/node": "^18.19.130",
+    "npm-run-all2": "^6.2.6",
+    "rimraf": "^5.0.10",
+    "rollup": "^2.80.0",
+    "stencil-output-targets-shared": "workspace:*",
+    "typescript": "~5.7.3",
+    "vitest": "^2.1.9"
   },
   "peerDependencies": {
-    "@stencil/core": ">=2.0.0 || >=3 || >=4.0.0 || ^5.0.0 || >=5.0.0-alpha.0 <5.0.0-next.0"
+    "@stencil/core": ">=2.0.0 || >=3 || >=4.0.0 || ^5.0.0 || >=5.0.0-alpha.17 <5.0.0-next.0"
   },
   "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
 }