@domql/element 0.0.1

package/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@domql/element",
+  "version": "0.0.1",
+  "main": "src/index.js",
+  "license": "MIT"
+}

package/src/assign.js

@@ -0,0 +1,22 @@
+'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
+}
+
+/**
+ * Receives elements and assigns the first
+ * parameter as a child of the second one
+ */
+export const assignNode = (element, parent, key) => {
+  parent[key || element.key] = element
+  if (element.tag !== 'shadow') {
+    appendNode(element.node, parent.node)
+  }
+  return element
+}

package/src/create.js

@@ -0,0 +1,125 @@
+'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 * as on from '@domql/event/src/on'
+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)
+
+  // run `on.render`
+  if (element.on && isFunction(element.on.render)) {
+    on.render(element.on.render, element, element.state)
+  }
+
+  return element
+}

package/src/index.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export * from './assign'
+export * from './create'
+export * from './iterate'
+export * from './methods'
+export * from './set'
+export * from './update'

package/src/iterate.js

@@ -0,0 +1,80 @@
+'use strict'
+
+import { exec, isFunction, isNumber, isString, overwrite } from '@domql/utils'
+import { isMethod } from './methods'
+
+export const applyEvents = element => {
+  const { node, on } = element
+  for (const param in on) {
+    if (
+      param === 'init' ||
+      param === 'render' ||
+      param === 'update'
+    ) continue
+
+    const appliedFunction = element.on[param]
+    if (isFunction(appliedFunction)) {
+      node.addEventListener(param, event =>
+        appliedFunction(event, element, element.state),
+      true)
+    }
+  }
+}
+
+export const throughInitialExec = element => {
+  for (const param in element) {
+    const prop = element[param]
+    if (isFunction(prop) && !isMethod(param)) {
+      element.__exec[param] = prop
+      element[param] = prop(element, element.state)
+    }
+  }
+}
+
+export const throughUpdatedExec = (element, options) => {
+  const { __exec } = element
+  const changes = {}
+
+  for (const param in __exec) {
+    const prop = element[param]
+    const newExec = __exec[param](element, element.state)
+
+    // if element is string
+    if (prop && prop.node && (isString(newExec) || isNumber(newExec))) {
+      overwrite(prop, { text: newExec }, options)
+    } else if (newExec !== prop) {
+      element.__cached[param] = changes[param] = prop
+      element[param] = newExec
+    }
+  }
+
+  return changes
+}
+
+export const throughInitialDefine = element => {
+  const { define } = element
+  for (const param in define) {
+    let prop = element[param]
+
+    if (isFunction(prop) && !isMethod(param)) {
+      element.__exec[param] = prop
+      element[param] = prop = exec(prop, element)
+    }
+
+    element.__cached[param] = prop
+    element[param] = define[param](prop, element, element.state)
+  }
+  return element
+}
+
+export const throughUpdatedDefine = element => {
+  const { define, __exec } = element
+  const changes = {}
+  for (const param in define) {
+    const execParam = __exec[param]
+    if (execParam) element.__cached[param] = execParam(element, element.state)
+    const cached = exec(element.__cached[param], element)
+    element[param] = define[param](cached, element, element.state)
+  }
+  return changes
+}

package/src/methods.js

@@ -0,0 +1,96 @@
+'use strict'
+
+import { isObject, isObjectLike } from '@domql/utils'
+import { registry } from '@domql/mixins'
+
+// TODO: update these files
+export const lookup = function (key) {
+  const element = this
+  let { parent } = element
+
+  while (parent.key !== key) {
+    parent = parent.parent
+    if (!parent) return
+  }
+
+  return parent
+}
+
+export const remove = function (params) {
+  const element = this
+  element.node.remove()
+  delete element.parent[element.key]
+}
+
+export const get = function (param) {
+  const element = this
+  return element[param]
+}
+
+export const set = function () {
+}
+
+export const update = function () {
+}
+
+export const defineSetter = (element, key, get, set) =>
+  Object.defineProperty(element, key, { get, set })
+
+export const keys = function () {
+  const element = this
+  const keys = []
+  for (const param in element) {
+    if (!isObject(registry[param])) {
+      keys.push(param)
+    }
+  }
+  return keys
+}
+
+export const parse = function () {
+  const element = this
+  const obj = {}
+  const keys = element.keys()
+  keys.forEach(v => (obj[v] = element[v]))
+  return obj
+}
+
+export const parseDeep = function (param) {
+  const element = this
+  const orig = param || element
+  const obj = {}
+  const keys = orig.keys && orig.keys()
+  if (!keys) return
+  keys.forEach(v => {
+    const prop = orig[v]
+    if (isObjectLike(prop)) parseDeep(prop)
+    else obj[v] = prop
+  })
+  return obj
+}
+
+export const log = function (...args) {
+  const element = this
+  console.group(element.key)
+  if (args.length) {
+    args.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
+  } else {
+    console.log(element.path)
+    const keys = element.keys()
+    keys.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
+  }
+  console.groupEnd(element.key)
+  return element
+}
+
+export const isMethod = function (param) {
+  return param === 'set' ||
+    param === 'update' ||
+    param === 'remove' ||
+    param === 'lookup' ||
+    param === 'keys' ||
+    param === 'parse' ||
+    param === 'parseDeep' ||
+    param === 'if' ||
+    param === 'log'
+}

package/src/set.js

@@ -0,0 +1,46 @@
+'use strict'
+
+import create from './create'
+
+const removeContentElement = (params, element) => {
+  if (params && element.content) {
+    if (element.content.node) {
+      if (element.content.tag === 'fragment') element.node.innerHTML = ''
+      else element.node.removeChild(element.content.node)
+    }
+
+    if (element.__cached && element.__cached.content) {
+      if (element.__cached.content.tag === 'fragment') element.__cached.content.parent.node.innerHTML = ''
+      else element.__cached.content.remove()
+    }
+
+    delete element.content
+  }
+}
+
+const set = function (params, enter, leave) {
+  const element = this
+
+  removeContentElement(params, element)
+
+  if (params) {
+    const { childProto } = params
+    if (!childProto && element.childProto) params.childProto = element.childProto
+    create(params, element, 'content', {
+      ignoreChildProto: true
+    })
+  }
+
+  return element
+}
+
+export default set
+
+// if (element.content && (isFunction(element.content) || element.content.node)) {
+//   // leave(element, () => {
+//   // console.log('remove', element.content)
+//   // element.content.remove()
+//   // element.content.update(params)
+//   // element.node.removeChild(element.content.node)
+//   // delete element.content
+// }

package/src/update.js

@@ -0,0 +1,100 @@
+'use strict'
+
+import { overwrite, isFunction, isObject, isString, isNumber, merge } from '@domql/utils'
+import { registry } from '@domql/mixins'
+import { updateProps } from '@domql/props'
+import { createNode } from '@domql/node'
+import * as on from '@domql/event/src/on'
+
+import { isMethod } from './methods'
+import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
+import { appendNode } from './assign'
+
+const UPDATE_DEFAULT_OPTIONS = {
+  stackChanges: false,
+  cleanExec: true,
+  preventRecursive: false
+}
+
+const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
+  const element = this
+  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)) {
+    params = { text: params }
+  }
+
+  if (element.on && isFunction(element.on.initUpdate)) {
+    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)
+  const execChanges = throughUpdatedExec(element, UPDATE_DEFAULT_OPTIONS)
+  const definedChanges = throughUpdatedDefine(element)
+
+  if (UPDATE_DEFAULT_OPTIONS.stackChanges && element.__stackChanges) {
+    const stackChanges = merge(definedChanges, merge(execChanges, overwriteChanges))
+    element.__stackChanges.push(stackChanges)
+  }
+
+  if (isFunction(element.if)) {
+    // TODO: move as fragment
+    const ifPassed = element.if(element, element.state)
+    if (element.__ifFalsy && ifPassed) {
+      createNode(element)
+      appendNode(element.node, element.__ifFragment)
+      delete element.__ifFalsy
+    } else if (element.node && !ifPassed) {
+      element.node.remove()
+      element.__ifFalsy = true
+    }
+  }
+
+  // console.log(node)
+  // console.groupEnd('Update:')
+
+  if (!node || options.preventRecursive) return
+
+  for (const param in element) {
+    const prop = element[param]
+
+    if (isMethod(param) || isObject(registry[param]) || prop === undefined) continue
+
+    const hasDefined = define && define[param]
+    const ourParam = registry[param]
+
+    // // console.log(prop)
+
+    if (ourParam) {
+      if (isFunction(ourParam)) ourParam(prop, element, node)
+    } else if (prop && isObject(prop) && !hasDefined) {
+      update.call(prop, params[prop], UPDATE_DEFAULT_OPTIONS)
+    }
+  }
+
+  if (element.on && isFunction(element.on.update)) {
+    on.update(element.on.update, element, element.state)
+  }
+}
+
+export default update