@domql/element 2.0.2 → 2.0.3

package/create.js

@@ -0,0 +1,167 @@
+'use strict'
+
+import { DEFAULT_METHODS, TAGS } from '@domql/registry'
+
+import { root } from '@domql/tree'
+import { createKey } from '@domql/key'
+import { isNumber, isString, isObject, isNode, isFunction, isArray, exec } from '@domql/utils'
+import { createState } from '@domql/state'
+import { createProps } from '@domql/props'
+import { extendElement } from '@domql/extends'
+
+const OPTIONS = {}
+
+const init = (element, key, options, parent) => {
+  const ref = {}
+  if (isString(element) || isNumber(element)) {
+    return {
+      key,
+      ref,
+      text: element
+    }
+  } else if (isArray(element)) return Object.assign({}, element)
+  else if (isObject(element)) {
+    if (!element.ref) element.ref = ref
+    if (element.on && element.on.init) element.on.init(element, element.state)
+    return element
+  } else if (isFunction(element)) return exec(parent, parent.ref.state)
+  else if (!element) return { ref }
+  return element
+}
+
+const assignKey = (element, key) => {
+  if (element.key) return element
+  element.key = key || createKey.next().value
+  return element
+}
+
+const applyParent = (element, key) => {
+  const { ref } = element
+  const { parent } = ref
+  if (isNode(parent)) {
+    ref.parent = root.ref.parent = { node: parent }
+  }
+  if (!parent) ref.parent = root
+  return element
+}
+
+const applyState = (element, key) => {
+  const { ref } = element
+  ref.state = createState(element, element.ref.parent)
+  return element
+}
+
+const applyExtends = (element, key) => {
+  extendElement(element, element.ref.parent)
+  return element
+}
+
+const applyTag = (element, key) => {
+  if (element.tag) {
+    element.ref.tag = element.tag
+    return element
+  }
+  const keyIsTag = TAGS.body.indexOf(key) > -1
+  element.tag = element.ref.tag = keyIsTag ? key : 'div'
+  return element
+}
+
+const applyProps = (element, key) => {
+  const { ref } = element
+  ref.props = createProps(element, element.ref.parent)
+  return element
+}
+
+const onEachAvailable = (element, key, options) => {
+  const { ref } = element
+  const value = element[key]
+  let { children, childrenKeys } = ref
+  if (!children) children = ref.children = []
+  if (!childrenKeys) childrenKeys = ref.childrenKeys = []
+
+  // add to ref.children
+  const useOption = options[onEachAvailable]
+  if (useOption) useOption(element, key)
+
+  // move value to ref.children
+  children.push(value)
+  childrenKeys.push(key)
+}
+
+const onEach = (element, key, options) => {
+  for (const key in element) {
+    const isMethod = DEFAULT_METHODS[key]
+    if (isMethod && isFunction(isMethod)) isMethod(element, element.ref.state)
+    const hasDefine = element.define && element.define[key]
+    if (hasDefine && isFunction(hasDefine)) element.ref[key] = hasDefine(element, element.ref.state)
+    if (!isMethod && !hasDefine) onEachAvailable(element, key, options)
+  }
+  return element
+}
+
+const applyTransform = (element, key, options) => {
+  const { ref, transform } = element
+  if (!transform) return element
+  if (!ref.transform) ref.transform = {}
+  const keys = Object.keys(transform || {})
+  keys.map(key => {
+    const transformer = transform[key]
+    ref.transform[key] = transformer(element, key)
+    return key
+  })
+  return element
+}
+
+const addChildren = (element, key, options) => {
+  const { ref } = element
+  const { children } = ref
+
+  if (children && children.length) {
+    ref.children = children.map(child => {
+      return create(child, element, key, options)
+    })
+  }
+
+  return element
+}
+
+const applyGlobalTransform = (element, key, options) => {
+  const { ref } = element
+  const { transform } = options
+  if (!transform) return element
+  if (!ref.transform) ref.transform = {}
+  const keys = Object.keys(transform || {})
+  keys.map(key => {
+    const transformer = transform[key]
+    ref.transform[key] = transformer(element, key)
+    return key
+  })
+  return element
+}
+
+/**
+ * Creating a DOMQL element
+ */
+export const create = (element, parent, key, options = OPTIONS) => [
+  init,
+  assignKey,
+  applyParent,
+  applyState,
+  applyExtends,
+  applyTag,
+  applyProps,
+  onEach,
+  applyTransform,
+  addChildren,
+  applyGlobalTransform
+].reduce((prev, current) => current(prev, key, options, parent), element)
+
+// create({
+//   test: {
+//     test2: {}
+//   }
+// }, null, null, {
+//   transform: {
+//     react: transformReact
+//   }
+// })

package/{src/index.js → index.js}

@@ -1,6 +1,5 @@
 'use strict'
 
-export * from './assign'
 export * from './iterate'
 export * from './methods'
 export * from './update'

package/{src/methods.js → methods.js}

@@ -1,7 +1,7 @@
 'use strict'
 
 import { isObject, isObjectLike } from '@domql/utils'
-import { registry } from '@domql/mixins'
+import { DEFAULT_METHODS } from '@domql/registry'
 
 // TODO: update these files
 export const lookup = function (key) {
@@ -40,7 +40,7 @@ export const keys = function () {
   const element = this
   const keys = []
   for (const param in element) {
-    if (!isObject(registry[param])) {
+    if (!isObject(DEFAULT_METHODS[param])) {
       keys.push(param)
     }
   }

package/package.json

@@ -1,21 +1,19 @@
 {
   "name": "@domql/element",
-  "version": "2.0.2",
-  "main": "src/index.js",
+  "version": "2.0.3",
+  "main": "index.js",
   "license": "MIT",
-  "scripts": {
-    "vpatch": "npm version patch && npm publish --access public"
-  },
   "dependencies": {
     "@domql/event": "latest",
+    "@domql/extends": "latest",
+    "@domql/key": "latest",
     "@domql/mixins": "latest",
-    "@domql/node": "latest",
     "@domql/props": "latest",
-    "@domql/proto": "latest",
+    "@domql/registry": "latest",
     "@domql/state": "latest",
     "@domql/tree": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "0aa5932cb9ae5f1bb55bfaf792a4d009233385f6",
-  "source": "src/index.js"
+  "gitHead": "feba8b60eccc9ed2caed62555e7083779c67044a",
+  "source": "index.js"
 }

package/test/create.test.js

@@ -0,0 +1,136 @@
+'use strict'
+
+import { tree } from '@domql/tree'
+import { create } from '../create'
+
+describe('Should create DOMQL element', () => {
+  const dom = create({})
+
+  test('should create EMPTY element', () => {
+    expect(dom.key).toBe(1)
+    expect(dom.tag).toBe('div')
+  })
+
+  test('should create REF', () => {
+    const { ref } = dom
+    expect(ref.tag).toBe('div')
+    expect(ref.parent).toEqual(tree)
+    expect(ref.state).toEqual({})
+    expect(ref.props).toEqual({})
+  })
+})
+
+describe('Should create DOMQL element from PRIMITIVES', () => {
+  const ref = {
+    tag: 'div',
+    parent: tree,
+    state: {},
+    props: {}
+  }
+  test('should create element from Int', () => {
+    const number = create(123)
+    expect(number).toEqual({
+      key: 6,
+      tag: 'div',
+      text: 123,
+      ref
+    })
+  })
+  test('should create element from String', () => {
+    const string = create('test')
+    expect(string).toEqual({
+      key: 7,
+      tag: 'div',
+      text: 'test',
+      ref
+    })
+  })
+})
+
+describe('Should create NESTED DOMQL element', () => {
+  const dom = create({
+    test: 123,
+    test2: 'test2',
+    test3: { text: 'test3' }
+  })
+  const ref = {
+    tag: 'div',
+    parent: tree,
+    state: {},
+    props: {}
+  }
+  test('element must have children', () => {
+    const { children, childrenKeys } = dom.ref
+    expect(children).toEqual(expect.any(Array))
+    expect(childrenKeys).toEqual(expect.any(Array))
+    expect(childrenKeys).toHaveLength(3)
+    expect(childrenKeys).toEqual(['test', 'test2', 'test3'])
+  })
+  test('should structure proper children', () => {
+    const { children } = dom.ref
+    expect(children[0]).toEqual({
+      key: 3,
+      tag: 'div',
+      text: 123,
+      ref
+    })
+    expect(children[1]).toEqual({
+      key: 4,
+      tag: 'div',
+      text: 'test2',
+      ref
+    })
+    expect(children[2]).toEqual({
+      key: 5,
+      tag: 'div',
+      text: 'test3',
+      ref
+    })
+  })
+})
+
+// test('should create valid DOM node', () => {
+//   expect(dom.node).toBeInstanceOf(window.HTMLDivElement)
+// })
+
+// test('must be able to create valid PATH', () => {
+//   expect(dom.path).toStrictEqual([dom.key])
+// })
+
+// test('if it HAS a NODE, don\'t recreate', () => {
+//   const node = document.createElement('div')
+//   const dom2 = create({ node })
+//   expect(dom2.node.parentElement).toBe(document.body)
+// })
+
+// test('create with number', () => {
+//   const numb = create(0)
+//   expect(numb.text).toBe(0)
+//   expect(numb.tag).toBe('string')
+//   expect(numb.node.nodeType).toBe(3) // #text
+// })
+
+// test('create with string', () => {
+//   const str = create('hello')
+//   expect(str.text).toBe('hello')
+//   expect(str.tag).toBe('string')
+//   expect(str.node.nodeType).toBe(3) // #text
+// })
+
+// test('creating conditions', () => {
+//   const element = create({
+//     data: { visible: true },
+//     if: element => element.data.visible
+//   })
+//   expect(element.tag).toBe('div')
+// })
+
+// test('creating nesting', () => {
+//   const element = create({
+//     header: {
+//       h1: {}
+//     }
+//   })
+//   expect(element.header.tag).toBe('header')
+//   expect(element.header.h1.tag).toBe('h1')
+// })

package/{src/update.js → update.js}

@@ -1,14 +1,14 @@
 'use strict'
 
 import { overwrite, isFunction, isObject, isString, isNumber, merge } from '@domql/utils'
-import { registry } from '@domql/mixins'
+import { defaultMethods } from '@domql/mixins'
 import { updateProps } from '@domql/props'
-import { createNode } from '@domql/node'
+// import { createNode } from '@domql/node'
 import { on } from '@domql/event'
 
 import { isMethod } from './methods'
 import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
-import { appendNode } from './assign'
+// import { appendNode } from './assign'
 
 const UPDATE_DEFAULT_OPTIONS = {
   stackChanges: false,
@@ -21,14 +21,6 @@ export const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const { define, parent, node } = element
 
   // console.groupCollapsed('Update:', element.path)
-  // console.log('params:')
-  // console.log(params)
-  // console.log('props:')
-  // console.log(element.props)
-  // console.log('element:')
-  // console.log(element)
-  // console.log('PARAMS.PROPS:')
-  // console.log(params.props)
   // console.groupEnd('Update:')
   // if params is string
   if (isString(params) || isNumber(params)) {
@@ -39,13 +31,9 @@ export const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     on.initUpdate(element.on.initUpdate, element, element.state)
   }
 
-  // console.log(element, parent)
   updateProps(params.props, element, parent)
-  // // console.log(element.path)
-  // // console.log(element)
 
   // console.groupCollapsed('UPDATE:')
-  // console.log(element)
   // console.groupEnd('UPDATE:')
 
   const overwriteChanges = overwrite(element, params, UPDATE_DEFAULT_OPTIONS)
@@ -61,8 +49,8 @@ export const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     // TODO: move as fragment
     const ifPassed = element.if(element, element.state)
     if (element.__ifFalsy && ifPassed) {
-      createNode(element)
-      appendNode(element.node, element.__ifFragment)
+      // createNode(element)
+      // appendNode(element.node, element.__ifFragment)
       delete element.__ifFalsy
     } else if (element.node && !ifPassed) {
       element.node.remove()
@@ -70,7 +58,6 @@ export const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     }
   }
 
-  // console.log(node)
   // console.groupEnd('Update:')
 
   if (!node || options.preventRecursive) return
@@ -78,12 +65,10 @@ export const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   for (const param in element) {
     const prop = element[param]
 
-    if (isMethod(param) || isObject(registry[param]) || prop === undefined) continue
+    if (isMethod(param) || isObject(defaultMethods[param]) || prop === undefined) continue
 
     const hasDefined = define && define[param]
-    const ourParam = registry[param]
-
-    // // console.log(prop)
+    const ourParam = defaultMethods[param]
 
     if (ourParam) {
       if (isFunction(ourParam)) ourParam(prop, element, node)

package/src/assign.js

@@ -1,26 +0,0 @@
-'use strict'
-
-/**
- * Receives child and parent nodes as parametes
- * and assigns them into real DOM tree
- */
-export const appendNode = (node, parentNode) => {
-  parentNode.appendChild(node)
-  return node
-}
-
-export const insertNodeAfter = (node, siblingNode) => {
-  siblingNode.parentNode.insertBefore(node, siblingNode.nextSibling)
-}
-
-/**
- * Receives elements and assigns the first
- * parameter as a child of the second one
- */
-export const assignNode = (element, parent, key, insertAfter) => {
-  parent[key || element.key] = element
-  if (element.tag !== 'shadow') {
-    (insertAfter ? insertNodeAfter : appendNode)(element.node, parent.node)
-  }
-  return element
-}

package/src/create.js

@@ -1,125 +0,0 @@
-'use strict'
-
-import { root } from '@domql/tree'
-import { applyPrototype } from '@domql/proto'
-import { createNode, NODE_REGISTRY, cacheNode } from '@domql/node'
-import { createState } from '@domql/state'
-import { createProps } from '@domql/props'
-import { assignClass } from '@domql/mixins'
-import { on } from '@domql/event'
-import { isFunction, isNumber, isString, createID, isNode } from '@domql/utils'
-
-import { appendNode, assignNode } from './assign'
-import { set } from './set'
-import { update } from './update'
-import { remove, lookup, log, keys, parse, parseDeep } from './methods'
-
-const ENV = process.env.NODE_ENV
-
-/**
- * Creating a domQL element using passed parameters
- */
-export const create = (element, parent, key, options = {}) => {
-  // if ELEMENT is not given
-  if (element === undefined) element = {}
-  if (element === null) return
-
-  // define KEY
-  const assignedKey = element.key || key || createID.next().value
-
-  // if PARENT is not given
-  // if (parent === null) parent = root
-  // if (parent === undefined) parent = root
-  if (!parent) parent = root
-  if (isNode(parent)) parent = root[`${key}_parent`] = { node: parent }
-
-  // if element is STRING
-  if (isString(element) || isNumber(element)) {
-    element = {
-      text: element,
-      tag: (!element.proto && parent.childProto && parent.childProto.tag) ||
-      ((NODE_REGISTRY.body.indexOf(key) > -1) && key) || 'string'
-    }
-  }
-
-  // enable STATE
-  element.state = createState(element, parent)
-
-  // create PROTOtypal inheritance
-  applyPrototype(element, parent, options)
-
-  // create and assign a KEY
-  element.key = assignedKey
-
-  // set the PATH
-  if (ENV === 'test' || ENV === 'development') {
-    if (!parent.path) parent.path = []
-    element.path = parent.path.concat(assignedKey)
-  }
-
-  // if it already HAS A NODE
-  if (element.node) {
-    return assignNode(element, parent, assignedKey)
-  }
-
-  // generate a CLASS name
-  assignClass(element)
-
-  // assign METHODS
-  element.set = set
-  element.update = update
-  element.remove = remove
-  element.lookup = lookup
-  if (ENV === 'test' || ENV === 'development') {
-    element.keys = keys
-    element.parse = parse
-    element.parseDeep = parseDeep
-    element.log = log
-  }
-
-  // run `on.init`
-  if (element.on && isFunction(element.on.init)) {
-    on.init(element.on.init, element, element.state)
-  }
-
-  // enable TRANSFORM in data
-  if (!element.transform) element.transform = {}
-
-  // enable CACHING
-  if (!element.__cached) element.__cached = {}
-
-  // enable EXEC
-  if (!element.__exec) element.__exec = {}
-
-  // enable CHANGES storing
-  if (!element.__changes) element.__changes = []
-
-  // enable CHANGES storing
-  const hasRoot = parent.parent && parent.parent.key === ':root'
-  if (!element.__root) element.__root = hasRoot ? parent : parent.__root
-
-  // apply props settings
-  createProps(element, parent)
-
-  // don't render IF in condition
-  if (isFunction(element.if) && !element.if(element, element.state)) {
-    // TODO: move as fragment
-    const ifFragment = cacheNode({ tag: 'fragment' })
-    element.__ifFragment = appendNode(ifFragment, parent.node)
-    element.__ifFalsy = true
-    return
-  }
-
-  // CREATE a real NODE
-  createNode(element)
-
-  // assign NODE
-  assignNode(element, parent, key, options.insertAfter)
-
-  // run `on.render`
-  if (element.on && isFunction(element.on.render)) {
-    on.render(element.on.render, element, element.state)
-  }
-
-  return element
-}