feat(runtime): experimental active render context (#2040)

ionic-team · Nov 24, 2019 · 75ed488 · 75ed488
1 parent 35021d8
commit 75ed488
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/src/compiler/transformers/update-stencil-core-import.ts b/src/compiler/transformers/update-stencil-core-import.ts
@@ -61,5 +61,7 @@ const KEEP_IMPORTS = new Set([
   'getAssetPath',
   'writeTask',
   'readTask',
-  'getElement'
+  'getElement',
+  'forceUpdate',
+  'getRenderingElement'
 ]);
diff --git a/src/index.ts b/src/index.ts
@@ -89,6 +89,11 @@ export declare function writeTask(task: d.RafCallback): void;
  */
 export declare function readTask(task: d.RafCallback): void;
 
+/**
+ * forceUpdate
+ */
+export declare function forceUpdate(ref: any): void;
+
 /**
  * Host
  */

diff --git a/src/runtime/index.ts b/src/runtime/index.ts
@@ -1,3 +1,4 @@
+
 export { bootstrapLazy } from './bootstrap-lazy';
 export { defineCustomElement, proxyCustomElement } from './define-native';
 export { proxyNative, attachShadow } from './bootstrap-native';
@@ -12,7 +13,7 @@ export { getValue, setValue } from './set-value';
 export { h, Host } from './vdom/h';
 export { insertVdomAnnotations } from './vdom/vdom-annotations';
 export { parsePropertyValue } from './parse-property-value';
-export { postUpdateComponent } from './update-component';
+export { forceUpdate, postUpdateComponent, getRenderingElement } from './update-component';
 export { proxyComponent } from './proxy-component';
 export { renderVdom } from './vdom/vdom-render';
 export { setMode, getMode } from './mode';
diff --git a/src/runtime/update-component.ts b/src/runtime/update-component.ts
@@ -81,21 +81,17 @@ const updateComponent = (elm: d.RenderNode, hostRef: d.HostRef, cmpMeta: d.Compo
 
   if (BUILD.hasRenderFn || BUILD.reflect) {
     if (BUILD.vdomRender || BUILD.reflect) {
-      try {
-        // looks like we've got child nodes to render into this host element
-        // or we need to update the css class/attrs on the host element
-        // DOM WRITE!
-        renderVdom(
-          elm,
-          hostRef,
-          cmpMeta,
-          (BUILD.allRenderFn) ? instance.render() : (instance.render && instance.render()),
-        );
-      } catch (e) {
-        consoleError(e);
-      }
+      // looks like we've got child nodes to render into this host element
+      // or we need to update the css class/attrs on the host element
+      // DOM WRITE!
+      renderVdom(
+        elm,
+        hostRef,
+        cmpMeta,
+        callRender(instance, elm),
+      );
     } else {
-      elm.textContent = (BUILD.allRenderFn) ? instance.render() : (instance.render && instance.render());
+      elm.textContent = callRender(instance, elm);
     }
   }
   if (BUILD.cssVarShim && plt.$cssShim$) {
@@ -153,6 +149,20 @@ const updateComponent = (elm: d.RenderNode, hostRef: d.HostRef, cmpMeta: d.Compo
   }
 };
 
+let renderingElement: HTMLElement = null;
+
+const callRender = (instance: any, elm: HTMLElement) => {
+  try {
+    renderingElement = elm;
+    instance = (BUILD.allRenderFn) ? instance.render() : (instance.render && instance.render());
+  } catch (e) {
+    consoleError(e);
+  }
+  renderingElement = null;
+  return instance;
+};
+
+export const getRenderingElement = () => renderingElement;
 
 export const postUpdateComponent = (elm: d.HostElement, hostRef: d.HostRef, cmpMeta: d.ComponentRuntimeMeta) => {
   const endPostUpdate = createTime('postUpdate', cmpMeta.$tagName$);
@@ -244,15 +254,19 @@ export const postUpdateComponent = (elm: d.HostElement, hostRef: d.HostRef, cmpM
 export const forceUpdate = (elm: d.RenderNode, cmpMeta: d.ComponentRuntimeMeta) => {
   if (BUILD.updatable) {
     const hostRef = getHostRef(elm);
-    if ((hostRef.$flags$ & (HOST_FLAGS.hasRendered | HOST_FLAGS.isQueuedForUpdate)) === HOST_FLAGS.hasRendered) {
+    const isConnected = hostRef.$hostElement$.isConnected;
+    if (isConnected && (hostRef.$flags$ & (HOST_FLAGS.hasRendered | HOST_FLAGS.isQueuedForUpdate)) === HOST_FLAGS.hasRendered) {
       scheduleUpdate(
         elm,
         hostRef,
         cmpMeta,
         false
       );
     }
+    // Returns "true" when the forced update was successfully scheduled
+    return isConnected;
   }
+  return false;
 };
 
 export const appDidLoad = (who: string) => {