@stencil/angular-output-target 0.10.0 → 0.10.2

package/dist/generate-angular-component.js

@@ -4,9 +4,10 @@ import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList }
  *
  * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
  * @param type The name of the type (e.g. 'string')
+ * @param inlinePropertyAsSetter Inlines the entire property as an empty Setter, to aid Angulars Compilerp
  * @returns The property declaration as a string.
  */
-function createPropertyDeclaration(prop, type) {
+function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     const comment = createDocComment(prop.docs);
     let eventName = prop.name;
     if (/[-/]/.test(prop.name)) {
@@ -14,8 +15,14 @@ function createPropertyDeclaration(prop, type) {
         // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
         eventName = `'${prop.name}'`;
     }
-    return `${comment.length > 0 ? `  ${comment}` : ''}
+    if (inlinePropertyAsSetter) {
+        return `${comment.length > 0 ? `  ${comment}` : ''}
+  set ${eventName}(_: ${type}) {};`;
+    }
+    else {
+        return `${comment.length > 0 ? `  ${comment}` : ''}
   ${eventName}: ${type};`;
+    }
 }
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
@@ -55,8 +62,8 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
     if (standalone && includeImportCustomElements) {
         standaloneOption = `\n  standalone: true`;
     }
-    const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`));
-    const propertiesDeclarationText = ['protected el: HTMLElement;', ...propertyDeclarations].join('\n  ');
+    const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
+    const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -132,6 +139,10 @@ const formatOutputType = (componentClassName, event) => {
                 return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
             }
             return [p1, dst, p2].join('');
+        })
+            // Capture all instances that contain sub types, e.g. `IMyComponent.SomeMoreComplexType.SubType`.
+            .replace(new RegExp(`^${src}(\.\\w+)+$`, 'g'), (type) => {
+            return `I${componentClassName}${src}.${type.split('.').slice(1).join('.')}`;
         }));
     }, event.complexType.original
         .replace(/\n/g, ' ')

package/dist/index.cjs.js

@@ -149,9 +149,10 @@ const SLASH_REGEX = /\\/g;
  *
  * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
  * @param type The name of the type (e.g. 'string')
+ * @param inlinePropertyAsSetter Inlines the entire property as an empty Setter, to aid Angulars Compilerp
  * @returns The property declaration as a string.
  */
-function createPropertyDeclaration(prop, type) {
+function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     const comment = createDocComment(prop.docs);
     let eventName = prop.name;
     if (/[-/]/.test(prop.name)) {
@@ -159,8 +160,14 @@ function createPropertyDeclaration(prop, type) {
         // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
         eventName = `'${prop.name}'`;
     }
-    return `${comment.length > 0 ? `  ${comment}` : ''}
+    if (inlinePropertyAsSetter) {
+        return `${comment.length > 0 ? `  ${comment}` : ''}
+  set ${eventName}(_: ${type}) {};`;
+    }
+    else {
+        return `${comment.length > 0 ? `  ${comment}` : ''}
   ${eventName}: ${type};`;
+    }
 }
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
@@ -200,8 +207,8 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     if (standalone && includeImportCustomElements) {
         standaloneOption = `\n  standalone: true`;
     }
-    const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`));
-    const propertiesDeclarationText = ['protected el: HTMLElement;', ...propertyDeclarations].join('\n  ');
+    const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
+    const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -277,6 +284,10 @@ const formatOutputType = (componentClassName, event) => {
                 return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
             }
             return [p1, dst, p2].join('');
+        })
+            // Capture all instances that contain sub types, e.g. `IMyComponent.SomeMoreComplexType.SubType`.
+            .replace(new RegExp(`^${src}(\.\\w+)+$`, 'g'), (type) => {
+            return `I${componentClassName}${src}.${type.split('.').slice(1).join('.')}`;
         }));
     }, event.complexType.original
         .replace(/\n/g, ' ')

package/dist/index.js

@@ -141,9 +141,10 @@ const SLASH_REGEX = /\\/g;
  *
  * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
  * @param type The name of the type (e.g. 'string')
+ * @param inlinePropertyAsSetter Inlines the entire property as an empty Setter, to aid Angulars Compilerp
  * @returns The property declaration as a string.
  */
-function createPropertyDeclaration(prop, type) {
+function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     const comment = createDocComment(prop.docs);
     let eventName = prop.name;
     if (/[-/]/.test(prop.name)) {
@@ -151,8 +152,14 @@ function createPropertyDeclaration(prop, type) {
         // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
         eventName = `'${prop.name}'`;
     }
-    return `${comment.length > 0 ? `  ${comment}` : ''}
+    if (inlinePropertyAsSetter) {
+        return `${comment.length > 0 ? `  ${comment}` : ''}
+  set ${eventName}(_: ${type}) {};`;
+    }
+    else {
+        return `${comment.length > 0 ? `  ${comment}` : ''}
   ${eventName}: ${type};`;
+    }
 }
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
@@ -192,8 +199,8 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     if (standalone && includeImportCustomElements) {
         standaloneOption = `\n  standalone: true`;
     }
-    const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`));
-    const propertiesDeclarationText = ['protected el: HTMLElement;', ...propertyDeclarations].join('\n  ');
+    const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
+    const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -269,6 +276,10 @@ const formatOutputType = (componentClassName, event) => {
                 return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
             }
             return [p1, dst, p2].join('');
+        })
+            // Capture all instances that contain sub types, e.g. `IMyComponent.SomeMoreComplexType.SubType`.
+            .replace(new RegExp(`^${src}(\.\\w+)+$`, 'g'), (type) => {
+            return `I${componentClassName}${src}.${type.split('.').slice(1).join('.')}`;
         }));
     }, event.complexType.original
         .replace(/\n/g, ' ')

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
   "types": "dist/index.d.ts",
   "files": [
     "dist/",
@@ -15,7 +22,7 @@
   },
   "scripts": {
     "prepublishOnly": "pnpm run build",
-    "prebuild": "rimraf ./dist && pnpm run test",
+    "prebuild": "rimraf ./dist",
     "build": "tsc && pnpm run rollup",
     "dev": "run-p dev:*",
     "dev:build": "tsc --watch --preserveWatchOutput",
@@ -27,8 +34,8 @@
     "prettier.base": "prettier \"./({angular-component-lib,src,test,__tests__}/**/*.{ts,tsx,js,jsx})|*.{ts,tsx,js,jsx}\"",
     "prettier.dry-run": "pnpm run prettier.base --list-different",
     "release": "np",
-    "test": "jest --passWithNoTests",
-    "test.watch": "jest --watch"
+    "test": "vitest --run",
+    "test.watch": "vitest"
   },
   "repository": {
     "type": "git",
@@ -44,29 +51,14 @@
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14",
     "@types/node": "^18.0.0",
-    "jest": "^27.0.0",
-    "jest-environment-jsdom": "^27.0.0",
     "npm-run-all2": "^6.2.4",
     "rimraf": "^5.0.0",
     "rollup": "^2.23.1",
-    "typescript": "~5.0.4"
+    "typescript": "~5.7.0",
+    "vitest": "^2.1.4"
   },
   "peerDependencies": {
     "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
   },
-  "jest": {
-    "transform": {
-      "^.+\\.(js|ts|tsx)$": "<rootDir>/test/jest.preprocessor.js"
-    },
-    "testRegex": "(\\.(test|spec))\\.(ts?|tsx?|jsx?)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "json",
-      "jsx"
-    ],
-    "testURL": "http://localhost"
-  },
   "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
 }