feat(renderer): use EmulatedRenderer to scope component styles

Author: sis0k0

nativescript-angular/renderer.ts

@@ -1,8 +1,7 @@
 import {
     Inject, Injectable, Optional, NgZone,
     RendererV2, RendererFactoryV2, RendererTypeV2,
-    // ViewEncapsulation
-    // ɵAnimationStyles, ɵAnimationKeyframe,
+    ViewEncapsulation,
 } from "@angular/core";
 
 import { escapeRegexSymbols } from "tns-core-modules/utils/utils";
@@ -21,8 +20,12 @@ import { Device } from "tns-core-modules/platform";
 import { getRootPage } from "./platform-providers";
 
 // CONTENT_ATTR not exported from NativeScript_renderer - we need it for styles application.
+const COMPONENT_REGEX = /%COMP%/g;
 export const COMPONENT_VARIABLE = "%COMP%";
+export const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`;
 export const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
+const ATTR_REPLACER = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g");
+const ATTR_SANITIZER = /-/g;
 
 @Injectable()
 export class NativeScriptRendererFactory implements RendererFactoryV2 {
@@ -34,7 +37,7 @@ export class NativeScriptRendererFactory implements RendererFactoryV2 {
     constructor(
         @Optional() @Inject(APP_ROOT_VIEW) rootView: View,
         @Inject(DEVICE) device: Device,
-        zone: NgZone
+        private zone: NgZone
     ) {
         this.viewUtil = new ViewUtil(device);
         this.setRootNgView(rootView);
@@ -55,30 +58,19 @@ export class NativeScriptRendererFactory implements RendererFactoryV2 {
         }
 
         let renderer: NativeScriptRenderer = this.componentRenderers.get(type.id);
-        if (isBlank(renderer)) {
-            renderer = this.defaultRenderer;
-
-            let stylesLength = type.styles.length;
-            for (let i = 0; i < stylesLength; i++) {
-                console.log(type.styles[i]);
-                // this.hasComponentStyles = true;
-                let cssString = type.styles[i] + "";
-                const realCSS = this.replaceNgAttribute(cssString, type.id);
-                addCss(realCSS);
-            }
-            this.componentRenderers.set(type.id, renderer);
+        if (!isBlank(renderer)) {
+            return renderer;
         }
 
-       return renderer;
-    }
-
-    private attrReplacer = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g");
-    private attrSanitizer = /-/g;
-
+        if (type.encapsulation === ViewEncapsulation.Emulated) {
+            renderer = new EmulatedRenderer(type, this.rootNgView, this.zone, this.viewUtil);
+            (<EmulatedRenderer>renderer).applyToHost(element);
+        } else {
+            renderer = this.defaultRenderer;
+        }
 
-    private replaceNgAttribute(input: string, componentId: string): string {
-        return input.replace(this.attrReplacer,
-            "_ng_content_" + componentId.replace(this.attrSanitizer, "_"));
+        this.componentRenderers.set(type.id, renderer);
+        return renderer;
     }
 }
 
@@ -94,16 +86,21 @@ export class NativeScriptRenderer extends RendererV2 {
         traceLog("NativeScriptRenderer created");
     }
 
-    appendChild(parent: any, newChild: any): void {
+    appendChild(parent: any, newChild: NgView): void {
         traceLog(`NativeScriptRenderer.appendChild child: ${newChild} parent: ${parent}`);
+        console.log(typeof parent)
+        console.log("appending child")
+        console.log(newChild.id)
         this.viewUtil.insertChild(parent, newChild);
     }
 
 
-    insertBefore(parent: any, newChild: any, refChild: any): void {
+    insertBefore(parent: any, newChild: any, _refChild: any): void {
         traceLog(`NativeScriptRenderer.insertBefore child: ${newChild} parent: ${parent}`);
         if (parent) {
-            parent.insertBefore(newChild, refChild);
+            // Temporary solution until we implement nextSibling method
+            this.appendChild(parent, newChild);
+            // parent.insertBefore(newChild, refChild);
         }
     }
 
@@ -117,24 +114,22 @@ export class NativeScriptRenderer extends RendererV2 {
         return this.rootView;
     }
 
-    parentNode(node: NgView): NgView {
-        return node.templateParent;
+    parentNode(node: NgView): any {
+        return node.parent;
     }
 
     nextSibling(_node: NgView): void {
         traceLog(`NativeScriptRenderer.nextSibling ${_node}`);
     }
 
     createViewRoot(hostElement: NgView): NgView {
-        traceLog("CREATE VIEW ROOT: " + hostElement.nodeName);
+        traceLog(`NativeScriptRenderer.createViewRoot ${hostElement.nodeName}`)
         return hostElement;
     }
 
     projectNodes(parentElement: NgView, nodes: NgView[]): void {
         traceLog("NativeScriptRenderer.projectNodes");
-        nodes.forEach((node) => {
-            this.viewUtil.insertChild(parentElement, node);
-        });
+        nodes.forEach((node) => this.viewUtil.insertChild(parentElement, node));
     }
 
     destroy() {
@@ -202,17 +197,7 @@ export class NativeScriptRenderer extends RendererV2 {
 
     createElement(name: any, _namespace: string): NgView {
         traceLog(`NativeScriptRenderer.createElement: ${name}`);
-
-        return this.viewUtil.createView(name, view => {
-            console.log(view);
-            // Set an attribute to the view to scope component-specific css.
-            // The property name is pre-generated by Angular.
-
-            // if (this.hasComponentStyles) {
-            //     const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR, this.componentProtoId);
-            //     view[cssAttribute] = true;
-            // }
-        });
+        return this.viewUtil.createView(name)
     }
 
     createText(_value: string): NgView {
@@ -239,3 +224,63 @@ export class NativeScriptRenderer extends RendererV2 {
     }
 }
 
+class EmulatedRenderer extends NativeScriptRenderer {
+    private contentAttr: string;
+    private hostAttr: string;
+
+    constructor(
+        private component: RendererTypeV2,
+        rootView: NgView,
+        zone: NgZone,
+        viewUtil: ViewUtil,
+    ) {
+        super(rootView, zone, viewUtil);
+
+        this.addStyles();
+        this.contentAttr = shimContentAttribute(component.id);
+        this.hostAttr = shimHostAttribute(component.id);
+    }
+
+    applyToHost(view: NgView) {
+        super.setAttribute(view, this.hostAttr, "");
+    }
+
+    appendChild(parent: any, newChild: NgView): void {
+        // Set an attribute to the view to scope component-specific css.
+        // The property name is pre-generated by Angular.
+        const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR);
+        newChild[cssAttribute] = true;
+
+        super.appendChild(parent, newChild);
+    }
+
+    createElement(parent: any, name: string): NgView {
+        const view = super.createElement(parent, name);
+        super.setAttribute(view, this.contentAttr, "");
+
+        return view;
+    }
+
+    private addStyles() {
+        this.component.styles
+            .map(s => s.toString())
+            .map(s => this.replaceNgAttribute(s))
+            .forEach(addCss);
+    }
+
+    private replaceNgAttribute(input: string): string {
+        return input.replace(ATTR_REPLACER , `_ng_content_${this.componentId}`);
+    }
+
+    private get componentId(): string {
+        return this.component.id.replace(ATTR_SANITIZER , "_");
+    }
+}
+
+function shimContentAttribute(componentShortId: string): string {
+    return CONTENT_ATTR.replace(COMPONENT_REGEX, componentShortId);
+}
+
+function shimHostAttribute(componentShortId: string): string {
+    return HOST_ATTR.replace(COMPONENT_REGEX, componentShortId);
+}

nativescript-angular/view-util.ts

@@ -15,6 +15,7 @@ import { rendererLog as traceLog } from "./trace";
 
 const IOS_PREFX: string = ":ios:";
 const ANDROID_PREFX: string = ":android:";
+const XML_ATTRIBUTES = Object.freeze([ "style", "row", "columns", "fontAttributes"]);
 const whiteSpaceSplitter = /\s+/;
 
 export type ViewExtensions = ViewExtensions;
@@ -114,7 +115,7 @@ export class ViewUtil {
         }
     }
 
-    public createView(name: string, beforeAttach?: BeforeAttachAction): NgView {
+    public createView(name: string): NgView {
         traceLog("Creating view:" + name);
 
         if (!isKnownView(name)) {
@@ -125,10 +126,6 @@ export class ViewUtil {
         view.nodeName = name;
         view.meta = getViewMeta(name);
 
-        if (beforeAttach) {
-            beforeAttach(view);
-        }
-
         return view;
     }
 
@@ -141,13 +138,7 @@ export class ViewUtil {
     }
 
     private isXMLAttribute(name: string): boolean {
-        switch (name) {
-            case "style": return true;
-            case "rows": return true;
-            case "columns": return true;
-            case "fontAttributes": return true;
-            default: return false;
-        }
+        return XML_ATTRIBUTES.indexOf(name) !== -1;
     }
 
     private platformFilter(attribute: string): string {