fix(queue): allow option to disable async queue (#1186)

Author: manucorporat

src/client/queue-client.ts

@@ -4,6 +4,7 @@ import * as d from '../declarations';
 export function createQueueClient(App: d.AppGlobal, win: Window): d.QueueApi {
   const now: d.Now = () => win.performance.now();
 
+  const async = App.asyncQueue !== false;
   const resolved = Promise.resolve();
   const highPriority: d.RafCallback[] = [];
   const domReads: d.RafCallback[] = [];
@@ -65,11 +66,13 @@ export function createQueueClient(App: d.AppGlobal, win: Window): d.QueueApi {
     // DOM READS!!!
     consume(domReads);
 
-    const start = now() + (7 * Math.ceil(congestion * (1.0 / 22.0)));
+    const timeout = async
+      ? now() + (7 * Math.ceil(congestion * (1.0 / 22.0)))
+      : Infinity;
 
     // DOM WRITES!!!
-    consumeTimeout(domWrites, start);
-    consumeTimeout(domWritesLow, start);
+    consumeTimeout(domWrites, timeout);
+    consumeTimeout(domWritesLow, timeout);
 
     if (domWrites.length > 0) {
       domWritesLow.push(...domWrites);

src/compiler/app/reserved-properties.ts

@@ -29,6 +29,7 @@ export const RESERVED_PROPERTIES: string[] = [
   'ael',
   'rel',
   'raf',
+  'asyncQueue',
   'read',
   'ref',
   'resourcesUrl',

src/compiler/bundle/derive-modules.ts

@@ -13,7 +13,7 @@ export async function deriveModules(config: d.Config, compilerCtx: d.CompilerCtx
   }
   const modules = await Promise.all([
     deriveModule(config, compilerCtx, buildCtx, 'es2017', true, true, moduleFormats.esm),   // browser ES2017
-    deriveModule(config, compilerCtx, buildCtx, 'es2017', false, false, moduleFormats.esm),  // esm ES2017
+    deriveModule(config, compilerCtx, buildCtx, 'es2017', false, false, moduleFormats.esm), // esm ES2017
     deriveModule(config, compilerCtx, buildCtx, 'es5', false, true, moduleFormats.esm),     // esm ES5
     deriveModule(config, compilerCtx, buildCtx, 'es5', true, true, moduleFormats.amd),      // browser ES5
   ]);

src/compiler/config/validate-outputs-angular.ts

@@ -9,6 +9,7 @@ export function validateOutputTargetAngular(config: d.Config) {
 
   distOutputTargets.forEach(outputTarget => {
     outputTarget.excludeComponents = outputTarget.excludeComponents || [];
+    outputTarget.useDirectives = !!outputTarget.useDirectives;
 
     if (!path.isAbsolute(outputTarget.directivesProxyFile)) {
       outputTarget.directivesProxyFile = normalizePath(path.join(config.rootDir, outputTarget.directivesProxyFile));

src/compiler/distribution/dist-angular.ts

@@ -26,7 +26,8 @@ function getComponents(excludeComponents: string[], cmpRegistry: d.ComponentRegi
 
 async function angularDirectiveProxyOutput(config: d.Config, compilerCtx: d.CompilerCtx, outputTarget: d.OutputTargetAngular, cmpRegistry: d.ComponentRegistry) {
   const components = getComponents(outputTarget.excludeComponents, cmpRegistry);
-  const { hasDirectives, hasOutputs, proxies } = generateProxies(components);
+  const useDirectives = outputTarget.useDirectives;
+  const { hasOutputs, proxies } = generateProxies(components, useDirectives);
 
   const auxFunctions: string[] = [
     inputsAuxFunction(),
@@ -37,10 +38,15 @@ async function angularDirectiveProxyOutput(config: d.Config, compilerCtx: d.Comp
     'ElementRef'
   ];
 
-  if (hasDirectives) {
-    angularImports.push('Component');
-    angularImports.push('ViewEncapsulation');
-    angularImports.push('ChangeDetectionStrategy');
+  if (components.length > 0) {
+    if (useDirectives) {
+      angularImports.push('Directive');
+    } else {
+      angularImports.push('Component');
+      angularImports.push('ViewEncapsulation');
+      angularImports.push('ChangeDetectionStrategy');
+      angularImports.push('ChangeDetectorRef');
+    }
   }
 
   if (hasOutputs) {
@@ -111,15 +117,13 @@ export function proxyMethods(instance: any, el: any, methods: string[]) {
 `;
 }
 
-function generateProxies(components: d.ComponentMeta[]) {
-  let hasDirectives = false;
+function generateProxies(components: d.ComponentMeta[], useDirectives: boolean) {
   let hasMethods = false;
   let hasOutputs = false;
   let hasInputs = false;
 
   const lines = components.map(cmpMeta => {
-    const proxy = generateProxy(cmpMeta);
-    hasDirectives = true;
+    const proxy = generateProxy(cmpMeta, useDirectives);
     if (proxy.hasInputs) {
       hasInputs = true;
     }
@@ -134,14 +138,13 @@ function generateProxies(components: d.ComponentMeta[]) {
 
   return {
     proxies: lines.join('\n'),
-    hasDirectives,
     hasInputs,
     hasMethods,
     hasOutputs
   };
 }
 
-function generateProxy(cmpMeta: d.ComponentMeta) {
+function generateProxy(cmpMeta: d.ComponentMeta, useDirectives: boolean) {
   // Collect component meta
   const inputs = getInputs(cmpMeta);
   const outputs = getOutputs(cmpMeta);
@@ -154,20 +157,25 @@ function generateProxy(cmpMeta: d.ComponentMeta) {
   const hasContructor = hasInputs || hasOutputs || hasMethods;
 
   // Generate Angular @Directive
+  const decorator = useDirectives ? 'Directive' : 'Component';
   const directiveOpts = [
     `selector: \'${cmpMeta.tagNameMeta}\'`,
-    `changeDetection: ChangeDetectionStrategy.OnPush`,
-    `encapsulation: ViewEncapsulation.None`,
-    `template: '<ng-content></ng-content>'`
   ];
+  if (!useDirectives) {
+    directiveOpts.push(
+      `changeDetection: ChangeDetectionStrategy.OnPush`,
+      `encapsulation: ViewEncapsulation.None`,
+      `template: '<ng-content></ng-content>'`
+    );
+  }
   if (inputs.length > 0) {
     directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
   }
 
   const tagNameAsPascal = dashToPascalCase(cmpMeta.tagNameMeta);
   const lines = [`
 export declare interface ${cmpMeta.componentClass} extends StencilComponents<'${tagNameAsPascal}'> {}
-@Component({ ${directiveOpts.join(', ')} })
+@${decorator}({ ${directiveOpts.join(', ')} })
 export class ${cmpMeta.componentClass} {`];
 
   // Generate outputs
@@ -177,9 +185,16 @@ export class ${cmpMeta.componentClass} {`];
 
   // Generate component constructor
   if (hasContructor) {
-    lines.push(`
+    if (useDirectives) {
+      lines.push(`
   constructor(r: ElementRef) {
     const el = r.nativeElement;`);
+    } else {
+      lines.push(`
+  constructor(c: ChangeDetectorRef, r: ElementRef) {
+    c.detach();
+    const el = r.nativeElement;`);
+    }
   }
 
   if (hasMethods) {

src/declarations/app-global.ts

@@ -26,6 +26,7 @@ export interface WindowData extends Window {
 
 export interface AppGlobal {
   ael?: (elm: Element|Document|Window, eventName: string, cb: d.EventListenerCallback, opts?: d.ListenOptions) => void;
+  asyncQueue?: boolean;
   resourcesUrl?: string;
   componentOnReady?: (elm: d.HostElement, resolve: (elm: d.HostElement) => void) => boolean;
   Context?: any;

src/declarations/output-targets.ts

@@ -193,6 +193,7 @@ export interface OutputTargetAngular extends OutputTargetBase {
   directivesProxyFile?: string;
   directivesArrayFile?: string;
   excludeComponents?: string[];
+  useDirectives?: boolean;
 }