feat: add value accessors to the directives array

packages/angular-output-target/src/generate-angular-directives-file.ts

@@ -1,25 +1,40 @@
 import type { OutputTargetAngular } from './types';
 import { dashToPascalCase, relativeImport } from './utils';
 import type { CompilerCtx, ComponentCompilerMeta } from '@stencil/core/internal';
+import path from 'path';
 
 export function generateAngularDirectivesFile(
   compilerCtx: CompilerCtx,
   components: ComponentCompilerMeta[],
-  outputTarget: OutputTargetAngular
+  outputTarget: OutputTargetAngular,
+  valueAccessorDirectiveClasses: string[] = []
 ): Promise<any> {
   // Only create the file if it is defined in the stencil configuration
   if (!outputTarget.directivesArrayFile) {
     return Promise.resolve();
   }
 
-  const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
+  const directivesProxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
   const directives = components
     .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
     .map((className) => `d.${className}`)
     .join(',\n  ');
+  const valueAccessorsDirectivesFile = path.join(path.dirname(outputTarget.directivesProxyFile), 'value-accessor-directives.ts');
+  const valueAccessorsDirectivesProxyPath = relativeImport(outputTarget.directivesArrayFile, valueAccessorsDirectivesFile, '.ts');
+  const valueAccessors = valueAccessorDirectiveClasses
+    .map((className) => `va.${className}`)
+    .join(',\n  ');
+
+  const c = valueAccessorDirectiveClasses.length > 0 ? `
+import * as d from '${directivesProxyPath}';
+import * as va from '${valueAccessorsDirectivesProxyPath}';
 
-  const c = `
-import * as d from '${proxyPath}';
+export const DIRECTIVES = [
+  ${directives},
+  ${valueAccessors}
+];
+` : `
+import * as d from '${directivesProxyPath}';
 
 export const DIRECTIVES = [
   ${directives}

packages/angular-output-target/src/generate-value-accessors.ts

@@ -12,14 +12,15 @@ type NormalizedValueAccessors = {
   [T in ValueAccessorTypes]: ValueAccessor;
 };
 
+// returns the list of valueAccessor directive class names
 export default async function generateValueAccessors(
   compilerCtx: CompilerCtx,
   components: ComponentCompilerMeta[],
   outputTarget: OutputTargetAngular,
   config: Config
-) {
+): Promise<string[]> {
   if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
-    return;
+    return [];
   }
 
   const targetDir = path.dirname(outputTarget.directivesProxyFile);
@@ -46,31 +47,32 @@ export default async function generateValueAccessors(
     {} as NormalizedValueAccessors
   );
 
+  let valueAccessorFileContent = '';
   await Promise.all(
-    Object.keys(normalizedValueAccessors).map(async (type) => {
+    Object.keys(normalizedValueAccessors).map(async (type, index) => {
       const valueAccessorType = type as ValueAccessorTypes; // Object.keys converts to string
-      const targetFileName = `${type}-value-accessor.ts`;
-      const targetFilePath = path.join(targetDir, targetFileName);
-      const srcFilePath = path.join(__dirname, '../resources/control-value-accessors/', targetFileName);
+      const srcFileName = `${type}-value-accessor.ts`;
+      const srcFilePath = path.join(__dirname, '../resources/control-value-accessors/', srcFileName);
       const srcFileContents = await compilerCtx.fs.readFile(srcFilePath);
-
-      const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
-      await compilerCtx.fs.writeFile(targetFilePath, finalText);
-    })
+      valueAccessorFileContent += createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType], index > 0);
+    }),
   );
+  const targetFilePath = path.join(targetDir, 'value-accessor-directives.ts');
+  await compilerCtx.fs.writeFile(targetFilePath, valueAccessorFileContent);
 
   await copyResources(config, ['value-accessor.ts'], targetDir);
+  return (Array.from(valueAccessorFileContent.matchAll(/^export class\s+([^\s]+)\s.*$/mg)).map(match => match[1]))
 }
 
-export function createValueAccessor(srcFileContents: string, valueAccessor: ValueAccessor) {
+export function createValueAccessor(srcFileContents: string, valueAccessor: ValueAccessor, removeImports?: boolean) {
   const hostContents = valueAccessor.eventTargets.map((listItem) =>
     VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(
       VALUE_ACCESSOR_TARGETATTR,
       listItem[1]
     )
   );
 
-  return srcFileContents
+  return (removeImports ? srcFileContents.replace(/^\s*import.*$/mg, '') : srcFileContents)
     .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
     .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${EOL}`));
 }

packages/angular-output-target/src/output-angular.ts

@@ -28,12 +28,10 @@ export async function angularDirectiveProxyOutput(
 
   const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir as string);
 
-  await Promise.all([
-    compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
-    copyResources(config, outputTarget),
-    generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
-    generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
-  ]);
+  await compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText);
+  await copyResources(config, outputTarget);
+  const valueAccessorClasses = await generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config);
+  await generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget, valueAccessorClasses);
 }
 
 function getFilteredComponents(excludeComponents: string[] = [], cmps: ComponentCompilerMeta[]) {

packages/angular-output-target/tsconfig.json

@@ -7,10 +7,10 @@
     "strict": true,
     "declaration": true,
     "experimentalDecorators": true,
-    "lib": ["dom", "es2017", "esnext.array"],
+    "lib": ["dom", "es2020", "esnext.array"],
     "moduleResolution": "node",
     "module": "esnext",
-    "target": "es2017",
+    "target": "es2020",
     "noUnusedLocals": true,
     "noUnusedParameters": false,
     "outDir": "dist"