perf(): expose api to bypass zone

src/client/client-task-queue.ts

@@ -11,12 +11,16 @@ const queueDomReads: d.RafCallback[] = [];
 const queueDomWrites: d.RafCallback[] = [];
 const queueDomWritesLow: d.RafCallback[] = [];
 
-const queueTask = (queue: d.RafCallback[]) => (cb: d.RafCallback) => {
+const queueTask = (queue: d.RafCallback[], write: boolean) => (cb: d.RafCallback) => {
   queue.push(cb);
 
   if (!queuePending) {
     queuePending = true;
-    plt.raf(flush);
+    if (write && plt.$flags$ & PLATFORM_FLAGS.queueSync) {
+      nextTick(flush);
+    } else {
+      plt.raf(flush);
+    }
   }
 };
 
@@ -61,7 +65,7 @@ const flush = () => {
   consume(queueDomReads);
 
   const timeout = (plt.$flags$ & PLATFORM_FLAGS.queueMask) === PLATFORM_FLAGS.appLoaded
-    ? performance.now() + (7 * Math.ceil(queueCongestion * (1.0 / 22.0)))
+    ? performance.now() + (10 * Math.ceil(queueCongestion * (1.0 / 22.0)))
     : Infinity;
 
   // DOM WRITES!!!
@@ -86,6 +90,6 @@ const flush = () => {
 
 export const nextTick = /*@__PURE__*/(cb: () => void) => Promise.resolve().then(cb);
 
-export const readTask = /*@__PURE__*/queueTask(queueDomReads);
+export const readTask = /*@__PURE__*/queueTask(queueDomReads, false);
 
-export const writeTask = /*@__PURE__*/queueTask(queueDomWrites);
+export const writeTask = /*@__PURE__*/queueTask(queueDomWrites, true);

src/client/client-window.ts

@@ -11,6 +11,7 @@ export const H = HTMLElement;
 export const plt: d.PlatformRuntime = {
   $flags$: 0,
   $resourcesUrl$: '',
+  jmp: (h) => h(),
   raf: (h) => requestAnimationFrame(h),
   ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),

src/compiler/output-targets/output-angular.ts

@@ -42,7 +42,7 @@ async function generateProxies(config: d.Config, compilerCtx: d.CompilerCtx, bui
 
   const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';`;
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';`;
 
   const sourceImports = !outputTarget.componentCorePackage ?
     `import { Components } from '${componentsTypeFile}';` :
@@ -99,7 +99,8 @@ export class ${tagNameAsPascal} {`];
   });
 
   lines.push('  protected el: HTMLElement;');
-  lines.push(`  constructor(r: ElementRef, protected z: NgZone) {
+  lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
     this.el = r.nativeElement;`);
   if (hasOutputs) {
     lines.push(`    proxyOutputs(this, this.el, ['${outputs.join(`', '`)}']);`);

src/compiler/output-targets/output-lazy-loader.ts

@@ -80,6 +80,7 @@ export interface CustomElementsDefineOptions {
   exclude?: string[];
   resourcesUrl?: string;
   syncQueue?: boolean;
+  jmp?: (c: Function) => any;
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

src/declarations/host-element.ts

@@ -73,6 +73,7 @@ export interface CustomElementsDefineOptions {
   exclude?: string[];
   resourcesUrl?: string;
   syncQueue?: boolean;
+  jmp?: (c: Function) => any;
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

src/declarations/runtime.ts

@@ -100,6 +100,7 @@ export interface HostRef {
 export interface PlatformRuntime {
   $flags$: number;
   $resourcesUrl$: string;
+  jmp: (c: Function) => any;
   raf: (c: FrameRequestCallback) => number;
   ael: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

src/hydrate/platform/index.ts

@@ -69,6 +69,7 @@ export const Context: any = {};
 export const plt: d.PlatformRuntime = {
   $flags$: 0,
   $resourcesUrl$: '',
+  jmp: (h) => h(),
   raf: (h) => requestAnimationFrame(h),
   ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),

src/runtime/bootstrap-lazy.ts

@@ -1,14 +1,14 @@
+import * as d from '../declarations';
 import { disconnectedCallback } from './disconnected-callback';
-import { proxyComponent } from './proxy-component';
 import { CMP_FLAGS } from '@utils';
 import { connectedCallback } from './connected-callback';
 import { convertScopedToShadow, registerStyle } from './styles';
-import * as d from '../declarations';
+import { proxyComponent } from './proxy-component';
 import { BUILD } from '@build-conditionals';
 import { doc, getHostRef, plt, registerHost, supportsShadowDom, win } from '@platform';
 import { hmrStart } from './hmr-component';
 import { HYDRATE_ID, PLATFORM_FLAGS, PROXY_FLAGS } from './runtime-constants';
-import { postUpdateComponent, forceUpdate } from './update-component';
+import { forceUpdate, postUpdateComponent } from './update-component';
 
 
 export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.CustomElementsDefineOptions = {}) => {
@@ -84,11 +84,11 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
         }
 
         connectedCallback() {
-          connectedCallback(this, cmpMeta);
+          plt.jmp(() => connectedCallback(this, cmpMeta));
         }
 
         disconnectedCallback() {
-          disconnectedCallback(this);
+          plt.jmp(() => disconnectedCallback(this));
         }
 
         's-init'() {

src/runtime/proxy-component.ts

@@ -1,6 +1,6 @@
 import * as d from '../declarations';
 import { BUILD } from '@build-conditionals';
-import { getHostRef } from '@platform';
+import { getHostRef, plt } from '@platform';
 import { getValue, setValue } from './set-value';
 import { MEMBER_FLAGS } from '../utils/constants';
 import { PROXY_FLAGS } from './runtime-constants';
@@ -53,10 +53,12 @@ export const proxyComponent = (Cstr: d.ComponentConstructor, cmpMeta: d.Componen
       const attrNameToPropName = new Map();
 
       prototype.attributeChangedCallback = function(attrName: string, _oldValue: string, newValue: string) {
-        const propName = attrNameToPropName.get(attrName);
-        this[propName] = newValue === null && typeof this[propName] === 'boolean'
-          ? false
-          : newValue;
+        plt.jmp(() => {
+          const propName = attrNameToPropName.get(attrName);
+          this[propName] = newValue === null && typeof this[propName] === 'boolean'
+            ? false
+            : newValue;
+        });
       };
 
       // create an array of attributes to observe

src/runtime/update-component.ts

@@ -58,13 +58,10 @@ export const scheduleUpdate = (elm: d.HostElement, hostRef: d.HostRef, cmpMeta:
   // has already fired off its lifecycle update then
   // fire off the initial update
   const update = () => updateComponent(elm, hostRef, cmpMeta, instance, isInitialLoad);
-  if (promise) {
-    return promise.then(BUILD.taskQueue
-      ? () => writeTask(update)
-      : update
-    );
-  }
-  return update();
+  return then(promise, BUILD.taskQueue
+    ? () => writeTask(update)
+    : update
+  );
 };
 
 const updateComponent = (elm: d.RenderNode, hostRef: d.HostRef, cmpMeta: d.ComponentRuntimeMeta, instance: any, isInitialLoad: boolean) => {

src/testing/platform.ts

@@ -22,6 +22,7 @@ export const Build: d.UserBuildConditionals = {
 export const plt: d.PlatformRuntime = {
   $flags$: 0,
   $resourcesUrl$: '',
+  jmp: (h) => h(),
   raf: (h) => requestAnimationFrame(h),
   ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),