fix(for): use parentNode and not config.parent

lib/one.js

@@ -1,7 +1,8 @@
 // @flow
 
 type OneElement = HTMLElement & {
-  $one: Component,
+  // TODO: Should the setup and created functions be here?
+  $one: Config,
   on?: Function,
   if?: Function,
   for?: Function,
@@ -22,7 +23,7 @@ type Config = {
   computed?: Computed,
   props?: Props,
   state?: State,
-  parent?: Component,
+  parent?: Config,
   store?: Store,
   setup?: Function,
   created?: Function,
@@ -38,9 +39,8 @@ type Config = {
   }
 }
 
-type Component = Omit<Config, 'setup'>
 type Components = {
-  [string]: Array<Component>
+  [string]: Array<Config>
 }
 
 type Store = {
@@ -101,6 +101,7 @@ function one(config: Config): void {
     const { setup, ...rest } = config
     const { created, ...cfg } = createInstance({
       ...rest,
+      setup,
       state: { ...config.state },
       store: Object.freeze({
         get: store.get,
@@ -120,6 +121,8 @@ function one(config: Config): void {
 
         cfg.events[k] = function (payload) {
           event(payload, cfg)
+
+          render(cfg)
         }
       }
     }
@@ -129,7 +132,14 @@ function one(config: Config): void {
     setup?.({
       state: cfg.state,
       props: cfg.props,
-      parent: cfg.parent,
+      parent: {
+        el: cfg.parent?.el,
+        state: cfg.parent?.state,
+        store: cfg.parent?.store,
+        props: cfg.parent?.props,
+        loop: cfg.parent?.loop,
+        events: cfg.parent?.events,
+      },
       store: { get: store.get, set: store.set, length: store.length },
       query: query.bind(cfg),
       computed: computed.bind(cfg)
@@ -146,7 +156,7 @@ function one(config: Config): void {
   })
 }
 
-function template(config: Component) {
+function template(config: Config) {
   const tmpl = document.createElement('template')
 
   // FIXME: Shouldn't bail when there's no template.
@@ -185,9 +195,8 @@ function template(config: Component) {
   tmpl.remove()
 }
 
-function createInstance(config: Component): Component {
-  const name = config.name
-  const el = config.el
+function createInstance(config: Config): Config {
+  const { el, name } = config
 
   if (!name) {
     throw new Error('One->createInstance: You must define a name for your component.')
@@ -198,6 +207,8 @@ function createInstance(config: Component): Component {
     if (component) {
       return component
     }
+
+    throw new Error(`One->createInstance: Could not find component ${name}.`)
   }
 
   uid = uid + 1
@@ -244,7 +255,7 @@ function createInstance(config: Component): Component {
   return config
 }
 
-function query(this: Component, selector: string) {
+function query(this: Config, selector: string) {
   const el: ?OneElement = this.el.children.length
     ? (this.el.querySelector(selector): any)
     : this.el
@@ -260,7 +271,7 @@ function query(this: Component, selector: string) {
   return el
 }
 
-function on(this: Component, el: OneElement, name: string, handler: Function) {
+function on(this: Config, el: OneElement, name: string, handler: Function) {
   el[`on${name}`] = async () => {
     await handler({
       store: { get: store.get, set: store.set, length: store.length },
@@ -289,7 +300,7 @@ function on(this: Component, el: OneElement, name: string, handler: Function) {
 }
 
 function loop(
-  this: Component,
+  this: Config,
   el: OneElement,
   [items, key]: [string, ?Key],
   fn?: Function,
@@ -316,6 +327,12 @@ function loop(
       const k: OneElement = child.$one?.key
       if (!k) return
       if (!arr.find((x: Object) => x[key] === k)) {
+        // TODO: Don't have this multiple places.
+        if (child.$one?.name) {
+          components[child.$one.name] = components[child.$one.name]
+            .filter(c => c.uid !== child.$one.uid)
+        }
+
         child.remove()
       }
     })
@@ -358,7 +375,20 @@ function loop(
     if (child) {
       render(child.$one)
     } else {
-      parentNode.append(clone)
+        parentNode.append(clone)
+    }
+
+    const tagName = clone.tagName.toLowerCase()
+    const isComponent = components[tagName]
+    if (isComponent) {
+      one({
+        name: tagName,
+        ...clone.$one,
+        el: clone,
+        template: isComponent[0]?.template,
+        setup: isComponent[0]?.setup,
+        parent: this
+      })
     }
 
     fn?.({ el: clone, item, index })
@@ -382,7 +412,7 @@ function getKey(item: Object | string | number | boolean, key: ?Key) {
 }
 
 function fi(
-  this: Component,
+  this: Config,
   el: OneElement,
   options: { initial: boolean } = { initial: true }
 ) {
@@ -425,7 +455,7 @@ function fi(
   return x
 }
 
-function computed(this: Component, name: string, fn: Function) {
+function computed(this: Config, name: string, fn: Function) {
   if (this.state?.[name] != null) {
     throw new Error(`One->computed: You already have a state property called "${name}".`)
   }
@@ -447,30 +477,34 @@ function computed(this: Component, name: string, fn: Function) {
   }
 }
 
-function render(config: Component) {
+function render(config: Config) {
   traverse(config.el, config)
 
   if (config.render) {
     config.render = false
   }
 }
 
-function traverse(el: OneElement, config: Component) {
-  if (el.$one?.uid && el.$one.key && config.render && config.parent?.el) {
-    const parentEl = config.parent.el
+function traverse(el: OneElement, config: Config) {
+  if (el.$one?.uid && el.$one.key && config.render && config.parent?.el && el.parentNode) {
+    const parentEl: OneElement = (el.parentNode: any)
+    if (!parentEl.$one?.loop) return
+
     const items = config.parent.state?.[parentEl.$one?.loop?.items]
-    const exists = items?.find(
+    if (!items) return
+
+    const exists = items.find(
       (x: Object) => x[parentEl.$one.loop?.key] === el.$one.key
     )
 
     if (!exists) {
-      el.remove()
-
       if (el.$one.name) {
         components[el.$one.name] = components[el.$one.name]
           .filter(c => c.uid !== el.$one.uid)
       }
 
+      el.remove()
+
       return
     }
   }
@@ -501,7 +535,7 @@ function traverse(el: OneElement, config: Component) {
 }
 
 // TODO: Support for nested keys, like `foo.bar.baz`.
-function value(key: string, config: Component) {
+function value(key: string, config: Config) {
   const fromStore = key.startsWith('$store.')
   const fromProps = key.startsWith('$props.')
 
@@ -543,10 +577,4 @@ function html(strings: Array<string>, ...values: Array<string>): string {
   }, '')
 }
 
-if (process.env.NODE_ENV !== 'production') {
-  window.$one = {
-    components
-  }
-}
-
 export { one, createStore, html }