@stencil/angular-output-target 0.4.0 → 0.6.0

package/dist/types.d.ts

@@ -1,12 +1,25 @@
 export interface OutputTargetAngular {
-    componentCorePackage?: string;
+    /**
+     * The package name of the component library.
+     * This is used to generate the import statements.
+     */
+    componentCorePackage: string;
+    /**
+     * The path to the proxy file that will be generated. This can be an absolute path
+     * or a relative path from the root directory of the Stencil library.
+     */
     directivesProxyFile: string;
     directivesArrayFile?: string;
-    directivesUtilsFile?: string;
     valueAccessorConfigs?: ValueAccessorConfig[];
     excludeComponents?: string[];
     includeImportCustomElements?: boolean;
     customElementsDir?: string;
+    /**
+     * @experimental
+     *
+     * `true` to generate a single component Angular module for each component.
+     */
+    includeSingleComponentAngularModules?: boolean;
 }
 export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
 export interface ValueAccessorConfig {

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import { Config } from '@stencil/core/internal';
+import { ComponentCompilerEvent, Config } from '@stencil/core/internal';
 import type { PackageJSON } from './types';
 export declare const toLowerCase: (str: string) => string;
 export declare const dashToPascalCase: (str: string) => string;
@@ -7,3 +7,29 @@ export declare function normalizePath(str: string): string;
 export declare function relativeImport(pathFrom: string, pathTo: string, ext?: string): string;
 export declare function isRelativePath(path: string): boolean | "";
 export declare function readPackageJson(config: Config, rootDir: string): Promise<PackageJSON>;
+/**
+ * Formats an array of strings to a string of quoted, comma separated values.
+ * @param list The list of unformatted strings to format
+ * @returns The formatted array of strings. (e.g. ['foo', 'bar']) => `'foo', 'bar'`
+ */
+export declare const formatToQuotedList: (list: readonly string[]) => string;
+/**
+ * Creates an import statement for a list of named imports from a module.
+ * @param imports The list of named imports.
+ * @param module The module to import from.
+ *
+ * @returns The import statement as a string.
+ */
+export declare const createImportStatement: (imports: string[], module: string) => string;
+/**
+ * Creates the collection of import statements for a component based on the component's events type dependencies.
+ * @param componentTagName The tag name of the component (pascal case).
+ * @param events The events compiler metadata.
+ * @param options The options for generating the import statements (e.g. whether to import from the custom elements directory).
+ * @returns The import statements as an array of strings.
+ */
+export declare const createComponentEventTypeImports: (componentTagName: string, events: readonly ComponentCompilerEvent[], options: {
+    componentCorePackage: string;
+    includeImportCustomElements?: boolean;
+    customElementsDir?: string;
+}) => string;

package/dist/utils.js

@@ -74,6 +74,51 @@ export async function readPackageJson(config, rootDir) {
     }
     return pkgData;
 }
+/**
+ * Formats an array of strings to a string of quoted, comma separated values.
+ * @param list The list of unformatted strings to format
+ * @returns The formatted array of strings. (e.g. ['foo', 'bar']) => `'foo', 'bar'`
+ */
+export const formatToQuotedList = (list) => list.map((item) => `'${item}'`).join(', ');
+/**
+ * Creates an import statement for a list of named imports from a module.
+ * @param imports The list of named imports.
+ * @param module The module to import from.
+ *
+ * @returns The import statement as a string.
+ */
+export const createImportStatement = (imports, module) => {
+    if (imports.length === 0) {
+        return '';
+    }
+    return `import { ${imports.join(', ')} } from '${module}';`;
+};
+/**
+ * Creates the collection of import statements for a component based on the component's events type dependencies.
+ * @param componentTagName The tag name of the component (pascal case).
+ * @param events The events compiler metadata.
+ * @param options The options for generating the import statements (e.g. whether to import from the custom elements directory).
+ * @returns The import statements as an array of strings.
+ */
+export const createComponentEventTypeImports = (componentTagName, events, options) => {
+    const { componentCorePackage, includeImportCustomElements, customElementsDir } = options;
+    const imports = [];
+    const namedImports = new Set();
+    const importPathName = normalizePath(componentCorePackage) + (includeImportCustomElements ? `/${customElementsDir || 'components'}` : '');
+    events.forEach((event) => {
+        Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
+            if (refObject.location === 'local' || refObject.location === 'import') {
+                const newTypeName = `I${componentTagName}${typeName}`;
+                // Prevents duplicate imports for the same type.
+                if (!namedImports.has(newTypeName)) {
+                    imports.push(`import type { ${typeName} as ${newTypeName} } from '${importPathName}';`);
+                    namedImports.add(newTypeName);
+                }
+            }
+        });
+    });
+    return imports.join('\n');
+};
 const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
 const NON_ASCII_REGEX = /[^\x00-\x80]+/;
 const SLASH_REGEX = /\\/g;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -14,11 +14,15 @@
     "access": "public"
   },
   "scripts": {
+    "prepublishOnly": "npm run build",
     "prebuild": "rimraf ./dist && npm run test",
     "build": "tsc && npm run rollup",
     "watch": "tsc --watch",
     "rollup": "rollup -c",
     "version": "npm run build",
+    "prettier": "npm run prettier.base -- --write",
+    "prettier.base": "prettier \"./({angular-component-lib,src,test,__tests__}/**/*.{ts,tsx,js,jsx})|*.{ts,tsx,js,jsx}\"",
+    "prettier.dry-run": "npm run prettier.base -- --list-different",
     "release": "np",
     "test": "jest --passWithNoTests",
     "test.watch": "jest --watch"
@@ -38,7 +42,7 @@
     "@angular/forms": "8.2.14"
   },
   "peerDependencies": {
-    "@stencil/core": "^2.9.0"
+    "@stencil/core": "^2.9.0 || ^3.0.0"
   },
   "jest": {
     "transform": {