Task: implement custom change detection and renderer mechanism

Author: maksym.koretskyi

src/app/my-component.ts

@@ -1,9 +1,2 @@
-import { Component } from '../framework/decorators';
-
-@Component({
-    properties: ['name', 'age']
-})
 export class MyComponent {
-    name: string = 'Nick';
-    age: number = 15;
 }

src/framework/component.ts

@@ -2,29 +2,5 @@ import { renderChanges } from './render-changes';
 import { getRenderer } from './renderers';
 import { PROPERTIES_SYMBOL } from './types';
 
-export function renderComponent<T>(C: any): T {
-    const c = new C();
-
-    // save initial properties
-    for (let i = 0; i < c[PROPERTIES_SYMBOL].length; i += 2) {
-        c[PROPERTIES_SYMBOL][i + 1] = c[c[PROPERTIES_SYMBOL][i]];
-    }
-
-    // set up interceptors that render changes
-    for (let i = 0; i < c[PROPERTIES_SYMBOL].length; i += 2) {
-        getRenderer().render(c[PROPERTIES_SYMBOL][i], c[PROPERTIES_SYMBOL][i + 1]);
-
-        Object.defineProperty(c, c[PROPERTIES_SYMBOL][i], {
-            set(v) {
-                this[PROPERTIES_SYMBOL][i + 1] = v;
-                renderChanges(this);
-            },
-            get() {
-                return this[PROPERTIES_SYMBOL][i + 1];
-            },
-            configurable: false
-        });
-    }
-
-    return c;
+export function renderComponent() {
 }

src/framework/decorators.ts

@@ -2,19 +2,6 @@ import { ComponentDescriptor, PROPERTIES_SYMBOL } from './types';
 
 export function Component(descriptor: ComponentDescriptor) {
     return function (klass: any) {
-        const p = klass.prototype;
 
-        const properties = [];
-        for (const p of descriptor.properties) {
-            properties.push(p, undefined);
-        }
-
-        Object.defineProperty(p, PROPERTIES_SYMBOL, {
-            value: properties,
-            configurable: false,
-            writable: false
-        });
-
-        return klass;
     }
 }

src/framework/render-changes.ts

@@ -2,8 +2,5 @@ import { getRenderer } from './renderers';
 import { PROPERTIES_SYMBOL } from './types';
 
 export function renderChanges(c: any) {
-    const properties = c[PROPERTIES_SYMBOL];
-    for (let i = 0; i < properties.length; i += 2) {
-        getRenderer().render(properties[i], properties[i + 1])
-    }
+
 }

src/framework/renderers.ts

@@ -1,72 +1,15 @@
 import { Renderer } from './types';
 
-export class ConsoleRenderer implements Renderer {
-    container: Console = null;
-
-    init() {
-        this.container = window.console;
-    }
-
-    clear() {
-        if (this.container === null) {
-            this.init();
-        }
-        this.container.clear();
-    }
-
-    render(p: string, v: any) {
-        if (this.container === null) {
-            this.init();
-        }
-        console.log(`${p}: ${v}`);
-    }
+export class ConsoleRenderer {
 }
 
-export class DOMRenderer implements Renderer {
-    container: HTMLElement = null;
-
-    init() {
-        this.container = document.createElement('div');
-        this.container.classList.add('dom-renderer');
-        document.body.appendChild(this.container);
-    }
-
-    clear() {
-        if (this.container === null) {
-            this.init();
-        }
-        while (this.container.firstChild) {
-            this.container.removeChild(this.container.firstChild);
-        }
-    }
-
-    render(p: string, v: any) {
-        if (this.container === null) {
-            this.init();
-        }
-
-        const span = document.createElement('span');
-        span.textContent = `${p}: ${v}`;
-        this.container.appendChild(span);
-        this.container.appendChild(document.createElement('br'));
-    }
+export class DOMRenderer {
 }
 
-export let renderer: Renderer = new ConsoleRenderer();
+export let renderer: Renderer;
 
 export function setRenderer(type: string) {
     switch (type) {
-        case 'dom': {
-            renderer = new DOMRenderer();
-            break;
-        }
-        case 'console': {
-            renderer = new ConsoleRenderer();
-            break;
-        }
-        default: {
-            throw new Error('Unknown Renderer type');
-        }
     }
 }
 

src/framework/types.ts

@@ -1,13 +1,7 @@
 export interface ComponentDescriptor {
-    properties: string[];
 }
 
 export interface Renderer {
-    init(): void;
-
-    clear(): void;
-
-    render(property: string, value: any): void;
 }
 
-export const PROPERTIES_SYMBOL = '__afProperties__';
+// export const PROPERTIES_SYMBOL;

src/main.ts

@@ -2,6 +2,7 @@ import { MyComponent } from './app/my-component';
 import { renderComponent } from './framework/component';
 import { setRenderer } from './framework/renderers';
 
+/*
 const c = renderComponent<MyComponent>(MyComponent);
 
 // expect to see `name: Nick` and `age: 15` in the console
@@ -21,5 +22,6 @@ c.age = 18;
 
 // expect to see `age: 38` in the console
 c.age = 38;
+*/