update

src/app/index.js

@@ -0,0 +1,31 @@
+import {render} from '../dom/render.js';
+
+export class TurtleApp {
+  constructor(root) {
+    this.root = root
+    this.data = {}
+    this.modules = []
+    this.html = render.bind(this)
+  }
+
+  use(module,configs) {
+    this.modules.forEach(m => {
+      if (m === module) throw `Module already exists in this app !`
+    })
+
+    if (!module.init) {
+      throw `Cannot find init function of module `
+    } else {
+      module.init(this,configs)
+      this.modules.push(module)
+    }
+  }
+
+  render(content) {
+    this.root.appendChild(content.root)
+  }
+}
+
+export function createApp(rootElement) {
+  return new TurtleApp(rootElement)
+}

src/components/component.js → src/component/index.js

@@ -1,32 +1,51 @@
-import { render } from './render.js';
-import {TurtleComponentState} from './state.js';
+import { render } from '../dom/render.js';
+import { createState } from './state.js';
+
 function evalInScope(js, contextAsScope) {
   return new Function(`return ${js}`).call(contextAsScope);
 }
 
-export class TurtleComponent {
+class TurtleComponentElement extends HTMLElement {
+  constructor() {
+    super()
+    this._controller = null
+  }
+
+  connectedCallback() {
+    this._controller.start(this)
+  }
+}
+
+window.customElements.define("turtle-component", TurtleComponentElement)
+
+export class TurtleComponentInstance {
   constructor(fn, props) {
-    this._fn = fn.bind(this)
-    this._props = props
-    this._base = null
+    this.fn = fn
+    this.props = props
+    this.data = {}
+    this._memories = {}
     this._refs = {}
+    this._element = null
     this._reactive = true
-    this._memories = []
     this.html = render.bind(this)
     this.onCreate = new Function()
     this.onRender = new Function()
     this.onUpdate = new Function()
     this.onDestroy = new Function()
   }
-
-  createState(value){
-    return new TurtleComponentState(this,value)
+
+  initState(value) {
+    let state = createState(value)
+    state.component = this
+    return state
   }
 
-  get refs(){
-    return this._refs
+  addUpdateDependents(dependents) {
+    dependents.forEach(dependent => {
+      dependent.component = this
+    })
   }
-  
+
   forceUpdate() {
     for (let i = 0; i < this._memories.length; i++) {
       let d = this._memories[i]
@@ -45,14 +64,18 @@ export class TurtleComponent {
         d.node.innerHTML = evalInScope(d.expr, this)
       }
     }
-    
+
     this.onUpdate()
   }
 
-  start() {
-    this.onCreate()
-    this._base._c = this
-    this._base.appendChild(this._fn(this,...this._props))
+  start(element) {
+    this._element = element
+    let { root, context } = this.requestRender()
+
+    this._element.appendChild(root)
+    this._memories = context._memories
+    this._refs = context._refs
+
     for (let i = 0; i < this._memories.length; i++) {
       let d = this._memories[i]
       if (d.type == "attr") {
@@ -70,15 +93,22 @@ export class TurtleComponent {
         d.node.innerHTML = evalInScope(d.expr, this)
       }
     }
+
     this.onRender()
+
+  }
+
+  requestRender() {
+    return this.fn.bind(this)(this, ...this.props)
   }
- 
+
 }
 
 export function createComponent(fn) {
   let fn_component = function(...props) {
-    return new TurtleComponent(fn, props)
+    return new TurtleComponentInstance(fn, props)
   }
-  fn_component.instance = TurtleComponent
+
+  fn_component.instance = TurtleComponentInstance
   return fn_component
 }

src/component/state.js

@@ -0,0 +1,24 @@
+import { TurtleComponentInstance } from './index.js';
+
+class TurtleComponentState {
+  constructor(component, value) {
+    this.component = component
+    this._value = value
+  }
+
+  get value() {
+    return this._value
+  }
+
+  set value(val) {
+    this._value = val
+    if (this.component instanceof TurtleComponentInstance) {
+      if (!this.component._reactive) return
+      this.component.forceUpdate()
+    }
+  }
+}
+
+export function createState(value) {
+  return new TurtleComponentState(null, value)
+}

src/dom/attributes.js

@@ -0,0 +1,27 @@
+function evalInScope(js, contextAsScope) {
+  return new Function(`return ${js}`).call(contextAsScope);
+}
+
+export function processAttributes(node, root, context = {}, scope) {
+  if (node && root) {
+    for (var i = 0; i < node.attributes.length; i++) {
+      let attribute = node.attributes[i];
+      if (attribute.localName.indexOf('bind-') === 0) {
+        let attrName = attribute.localName.substring('bind-'.length);
+        context._memories.push({ type: "attr", attr: attrName, node: root, expr: attribute.value })
+        root.setAttribute(attrName, attribute.value);
+      } else if (attribute.localName.indexOf('on-') === 0) {
+        let eventName = attribute.localName.substring('on-'.length);
+        root.addEventListener(eventName, evalInScope(attribute.value, scope))
+      } else if (attribute.localName == "t-text") {
+        context._memories.push({ type: "text", node: root, expr: attribute.value })
+      } else if (attribute.localName == "t-ref") {
+        context._refs[attribute.value] = root
+      } else if (attribute.localName == "t-html") {
+        context._memories.push({ type: "html", node: root, expr: attribute.value })
+      } else {
+        root.setAttribute(attribute.name, attribute.value);
+      }
+    }
+  }
+}