fix(angular): add for support angular 9/10

ref vime-js#124
g3r4n · Dec 21, 2020 · 1d251f1 · 1d251f1
1 parent 3103619
commit 1d251f1
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 22 deletions.
diff --git a/examples/angular/package.json b/examples/angular/package.json
@@ -32,6 +32,6 @@
     "jest-diff": "^26.6.2",
     "pretty-format": "^26.6.2",
     "ts-node": "~9.0.0",
-    "typescript": "^4.0.5"
+    "typescript": "^3.9.2"
   }
 }
diff --git a/packages/angular/projects/vime/angular/package.json b/packages/angular/projects/vime/angular/package.json
@@ -21,6 +21,9 @@
     "*.d.ts",
     "vime-angular.metadata.json"
   ],
+  "scripts": {
+    "postinstall": "ngcc"
+  },
   "peerDependencies": {
     "@angular/common": "^11.0.4",
     "@angular/core": "^11.0.4",

diff --git a/packages/core/targets/angular/generateAngularComponent.ts b/packages/core/targets/angular/generateAngularComponent.ts
@@ -1,7 +1,7 @@
 import { ComponentCompilerMeta } from '@stencil/core/internal';
 import { dashToPascalCase } from '../../src/utils/string';
 import {
-  fileName, generateImports, ignoreChecks, jsxEventName,
+  defineAllDependencies, fileName, ignoreChecks, importAllDepdencies, jsxEventName,
 } from '../targetHelpers';
 
 export const generateAngularComponent = (
@@ -19,7 +19,7 @@ ${ignoreChecks()}
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import { ProxyCmp, initOutputs } from '../lib';
 import type { JSX, Components } from '@vime/core/dist/types';
-${generateImports(cmpMeta, components)}
+${importAllDepdencies(cmpMeta, components)}
 
 const ${name}Inputs: string[] = [
   ${properties.map((prop) => `'${prop.name}',`).join('\n  ')}
@@ -57,6 +57,7 @@ export class ${name} {
     .join('\n  ')}
 
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    ${defineAllDependencies(cmpMeta, components).trim().split('\n').join('\n    ')}
     c.detach();
     this.el = r.nativeElement;
     initOutputs(this, [${events.filter((event) => !event.internal).map((event) => `'${event.name}'`).join(', ')}])

diff --git a/packages/core/targets/react/generateReactComponent.ts b/packages/core/targets/react/generateReactComponent.ts
@@ -1,6 +1,8 @@
 import { ComponentCompilerMeta } from '@stencil/core/internal';
 import { dashToPascalCase } from '../../src/utils/string';
-import { fileName, generateImports, ignoreChecks } from '../targetHelpers';
+import {
+  defineAllDependencies, fileName, ignoreChecks, importAllDepdencies,
+} from '../targetHelpers';
 
 export const generateReactComponent = (
   cmpMeta: ComponentCompilerMeta,
@@ -15,7 +17,8 @@ ${ignoreChecks()}
 import React, { ReactNode, HTMLAttributes } from 'react';
 import { createComponent } from '../lib';
 import type { JSX } from '@vime/core/dist/types';
-${generateImports(cmpMeta, components)}
+${importAllDepdencies(cmpMeta, components)}
+${defineAllDependencies(cmpMeta, components)}
 
 export interface ${name}Props extends JSX.${displayName}, HTMLAttributes<HTML${displayName}Element> {
   children?: ReactNode | ReactNode[]

diff --git a/packages/core/targets/svelte/generateSvelteComponent.ts b/packages/core/targets/svelte/generateSvelteComponent.ts
@@ -1,5 +1,5 @@
 import type { ComponentCompilerMeta } from '@stencil/core/internal';
-import { generateImports, safeDefaultValue } from '../targetHelpers';
+import { defineAllDependencies, importAllDepdencies, safeDefaultValue } from '../targetHelpers';
 import { ComponentBindingConfig } from './SvelteTargetConfig';
 
 export const generateSvelteComponent = (
@@ -23,7 +23,8 @@ export const generateSvelteComponent = (
 
   return `
 <script context="module">
-${generateImports(cmpMeta, components)}
+${importAllDepdencies(cmpMeta, components)}
+${defineAllDependencies(cmpMeta, components)}
 </script>
 
 <script>

diff --git a/packages/core/targets/targetHelpers.ts b/packages/core/targets/targetHelpers.ts
@@ -36,35 +36,48 @@ export const safeDefaultValue = (value?: string) => {
   }
 };
 
-export const generateImports = (
+export const findAllDependencies = (
   cmpMeta: ComponentCompilerMeta,
   components: ComponentCompilerMeta[],
-  moreImports: string[] = [],
-  importExt?: string,
 ) => {
-  const getDeps = (tagName: string) => components
+  const getDirectDeps = (tagName: string) => components
     .find((cmp) => cmp.tagName === tagName)
     ?.dependencies ?? [];
 
-  const getAllImports = (tagName: string, imports: Set<string> = new Set()) => {
+  const getDepTree = (tagName: string, imports: Set<string> = new Set()) => {
     imports.add(tagName);
-    const deps = getDeps(tagName) ?? [];
-    deps.forEach((dep) => { getAllImports(dep, imports); });
+    const deps = getDirectDeps(tagName) ?? [];
+    deps.forEach((dep) => { getDepTree(dep, imports); });
     return Array.from(imports);
   };
 
-  const imports = getAllImports(cmpMeta.tagName)
+  return getDepTree(cmpMeta.tagName)
     .map((tagName) => ({ tagName, className: dashToPascalCase(tagName) }));
+};
 
+export const importAllDepdencies = (
+  cmpMeta: ComponentCompilerMeta,
+  components: ComponentCompilerMeta[],
+) => {
+  const deps = findAllDependencies(cmpMeta, components);
   return `
 import { 
-  ${[...imports
-    .map((i) => (importExt ? `${i.className} as ${i.className}${importExt}` : i.className)), ...moreImports]
+  ${[...deps
+    .map((i) => i.className)]
     .join(',\n  ')} 
 } from '@vime/core';
 
 import { define } from '../lib';
+  `;
+};
 
-${imports.map((cmp) => `define('${cmp.tagName}', ${cmp.className}${importExt ?? ''});`).join('\n')}
+export const defineAllDependencies = (
+  cmpMeta: ComponentCompilerMeta,
+  components: ComponentCompilerMeta[],
+) => {
+  const deps = findAllDependencies(cmpMeta, components);
+
+  return `
+${deps.map((cmp) => `define('${cmp.tagName}', ${cmp.className});`).join('\n')}
   `;
 };
diff --git a/packages/core/targets/vue-next/generateVueNextComponent.ts b/packages/core/targets/vue-next/generateVueNextComponent.ts
@@ -1,6 +1,6 @@
 import { ComponentCompilerMeta } from '@stencil/core/internal';
 import { dashToPascalCase } from '../../src/utils/string';
-import { generateImports, ignoreChecks } from '../targetHelpers';
+import { defineAllDependencies, ignoreChecks, importAllDepdencies } from '../targetHelpers';
 
 export const generateVueNextComponent = (
   cmpMeta: ComponentCompilerMeta,
@@ -15,7 +15,8 @@ ${ignoreChecks()}
 import { defineComponent } from 'vue';
 import { method, render } from '../lib';
 import type { JSX, Components } from '@vime/core/dist/types';
-${generateImports(cmpMeta, components)}
+${importAllDepdencies(cmpMeta, components)}
+${defineAllDependencies(cmpMeta, components)}
 
 export default defineComponent<JSX.${displayName}, {}, {}, {}, {
   ${methods

diff --git a/packages/core/targets/vue/generateVueComponent.ts b/packages/core/targets/vue/generateVueComponent.ts
@@ -1,6 +1,6 @@
 import { ComponentCompilerMeta } from '@stencil/core/internal';
 import { dashToPascalCase } from '../../src/utils/string';
-import { generateImports, ignoreChecks } from '../targetHelpers';
+import { defineAllDependencies, ignoreChecks, importAllDepdencies } from '../targetHelpers';
 
 export const generateVueComponent = (
   cmpMeta: ComponentCompilerMeta,
@@ -16,7 +16,8 @@ ${ignoreChecks()}
 import Vue, { PropOptions } from 'vue';
 import { method, render } from '../lib';
 import type { Components } from '@vime/core/dist/types';
-${generateImports(cmpMeta, components)}
+${importAllDepdencies(cmpMeta, components)}
+${defineAllDependencies(cmpMeta, components)}
 
 export default Vue.extend({
   props: {