domql 2.0.6 → 2.0.7

package/src/element/createNode.js

@@ -0,0 +1,92 @@
+'use strict'
+
+import create from './create'
+import cacheNode from './cache'
+import * as on from '../event/on'
+
+import { isFunction, isObject } from '../utils'
+import {
+  throughInitialDefine,
+  throughInitialExec,
+  applyEvents
+} from './iterate'
+import { registry } from './mixins'
+import { isMethod } from './methods'
+// import { defineSetter } from './methods'
+
+const ENV = process.env.NODE_ENV
+
+// const defineSetter = (element, key) => Object.defineProperty(element, key, {
+//   get: function () {
+//     console.log('GET', key)
+//     return element.__data[key]
+//   },
+//   set: function (new_value) {
+//     console.log('SET', key, new_value)
+//     element.__data[key] = new_value
+//     element.__data['modified'] = (new Date()).getTime()
+//   }
+// })
+
+const createNode = (element) => {
+  // create and assign a node
+  let { node, tag } = element
+
+  let isNewNode
+
+  // console.groupCollapsed('CREATE:')
+  // console.log(element)
+  // console.groupEnd('CREATE:')
+
+  if (!node) {
+    isNewNode = true
+
+    if (tag === 'shadow') {
+      node = element.node = element.parent.node.attachShadow({ mode: 'open' })
+    } else node = element.node = cacheNode(element)
+
+    // run `on.attachNode`
+    if (element.on && isFunction(element.on.attachNode)) {
+      on.attachNode(element.on.attachNode, element, element.state)
+    }
+  }
+
+  // node.dataset // .key = element.key
+
+  if (ENV === 'test' || ENV === 'development') {
+    node.ref = element
+    if (isFunction(node.setAttribute)) node.setAttribute('key', element.key)
+  }
+
+  // iterate through all given params
+  if (element.tag !== 'string' || element.tag !== 'fragment') {
+    // iterate through define
+    if (isObject(element.define)) throughInitialDefine(element)
+
+    // iterate through exec
+    throughInitialExec(element)
+
+    // apply events
+    if (isNewNode && isObject(element.on)) applyEvents(element)
+
+    for (const param in element) {
+      const prop = element[param]
+
+      if (isMethod(param) || isObject(registry[param]) || prop === undefined) continue
+
+      const hasDefined = element.define && element.define[param]
+      const ourParam = registry[param]
+
+      if (ourParam) { // Check if param is in our method registry
+        if (isFunction(ourParam)) ourParam(prop, element, node)
+      } else if (element[param] && !hasDefined) {
+        create(prop, element, param) // Create element
+      }
+    }
+  }
+
+  // node.dataset.key = key
+  return element
+}
+
+export default createNode

package/src/element/createProps.js

@@ -0,0 +1,64 @@
+'use strict'
+
+import { deepClone, deepMerge, exec, isArray } from '../utils'
+
+const initProps = (element, parent) => {
+  const propsStack = []
+  if (element.props) propsStack.push(element.props)
+
+  if (isArray(element.__proto)) {
+    element.__proto.map(proto => {
+      if (proto.props) propsStack.push(proto.props)
+      return proto.props
+    })
+  }
+
+  return propsStack
+}
+
+const inheritProps = (element, parent) => {
+  element.props = (parent && parent.props) || { update, __element: element }
+}
+
+export const syncProps = (props, element) => {
+  element.props = {}
+  const mergedProps = { update, __element: element }
+  props.forEach(v => {
+    if (v === 'update' || v === '__element') return
+    element.props = deepMerge(mergedProps, deepClone(exec(v, element)))
+  })
+  element.props = mergedProps
+  return element.props
+}
+
+const createProps = function (element, parent, cached) {
+  const propsStack = cached || initProps(element, parent)
+
+  if (propsStack.length) {
+    element.__props = propsStack
+    syncProps(propsStack, element)
+    element.props.update = update
+  } else inheritProps(element, parent)
+
+  return element
+}
+
+export const updateProps = (newProps, element, parent) => {
+  let propsStack = element.__props
+
+  if (newProps) propsStack = element.__props = [].concat(newProps, propsStack)
+
+  if (propsStack) syncProps(propsStack, element)
+  else inheritProps(element, parent)
+
+  // console.log(cachedProps)
+  return element
+}
+
+function update (props) {
+  const element = this.__element
+  // element.update({ props })
+  element.update()
+}
+
+export default createProps

package/src/element/createState.js

@@ -0,0 +1,51 @@
+'use strict'
+
+import { on } from '../event'
+import { deepClone, exec, isFunction, overwriteDeep } from '../utils'
+
+export const parseState = function () {
+  const state = this
+  const parseState = {}
+  for (const param in state) {
+    if (param !== '__element' && param !== 'update' && param !== 'parse') {
+      parseState[param] = state[param]
+    }
+  }
+  return parseState
+}
+
+export const updateState = function (obj, options = {}) {
+  const state = this
+  const element = state.__element
+
+  // run `on.stateUpdated`
+  if (element.on && isFunction(element.on.initStateUpdated)) {
+    on.initStateUpdated(element.on.initStateUpdated, element, state)
+  }
+
+  overwriteDeep(state, obj, ['update', 'parse', '__element'])
+  if (!options.preventUpdate) element.update()
+
+  // run `on.stateUpdated`
+  if (element.on && isFunction(element.on.stateUpdated)) {
+    on.stateUpdated(element.on.stateUpdated, element, state)
+  }
+}
+
+export default function (element, parent) {
+  let { state } = element
+  if (!state) return (parent && parent.state) || {}
+  if (isFunction(state)) state = exec(state, element)
+
+  state = deepClone(state, ['update', 'parse', '__element'])
+  state.__element = element
+  state.parse = parseState
+  state.update = updateState
+
+  // run `on.stateCreated`
+  if (element.on && isFunction(element.on.stateCreated)) {
+    on.stateCreated(element.on.stateCreated, element, element.state)
+  }
+
+  return state
+}

package/src/element/define.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import { registry } from './mixins'
+import { report } from '../utils'
+
+export default (params, options = {}) => {
+  const { overwrite } = options
+  for (const param in params) {
+    if (registry[param] && !overwrite) {
+      report('OverwriteToBuiltin', param)
+    } else registry[param] = params[param]
+  }
+}

package/src/element/id.js

@@ -0,0 +1,10 @@
+'use strict'
+
+const createID = function * () {
+  let index = 1
+  while (index < index + 1) {
+    yield index++
+  }
+}
+
+export default createID()

package/src/element/index.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import nodes from './nodes'
+import root from './root'
+import tree from './tree'
+import cache from './cache'
+import create from './create'
+import createNode from './createNode'
+import * as assign from './assign'
+import define from './define'
+import update from './update'
+import parse from './parse'
+import set from './set'
+
+import { lookup, remove, get, log, keys } from './methods'
+
+export {
+  nodes,
+  root,
+  tree,
+  cache,
+  create,
+  createNode,
+  assign,
+  define,
+  remove,
+  update,
+  parse,
+  lookup,
+  set,
+  get,
+  log,
+  keys
+}

package/src/element/iterate.js

@@ -0,0 +1,80 @@
+'use strict'
+
+import { exec, isFunction, isNumber, isString, overwrite } from '../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/element/methods.js

@@ -0,0 +1,96 @@
+'use strict'
+
+import { isObject, isObjectLike } from '../utils'
+import { registry } from './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/element/mixins/attr.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import { exec, report } from '../../utils'
+
+/**
+ * Recursively add attributes to a DOM node
+ */
+export default (params, element, node) => {
+  if (params) {
+    if (!(typeof params === 'object')) report('HTMLInvalidAttr', params)
+    for (const attr in params) {
+      // if (!node) node = element.node
+      const val = exec(params[attr], element)
+      if (val && node.setAttribute) node.setAttribute(attr, val)
+      else if (node.removeAttribute) node.removeAttribute(attr)
+    }
+  }
+}

package/src/element/mixins/classList.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { exec, isObject, isString } from '../../utils'
+
+export const assignClass = (element) => {
+  const { key } = element
+  if (element.class === true) element.class = key
+  else if (!element.class && typeof key === 'string' && key.charAt(0) === '_' && key.charAt(1) !== '_') {
+    element.class = key.slice(1)
+  }
+}
+
+// stringifies class object
+export const classify = (obj, element) => {
+  let className = ''
+  for (const item in obj) {
+    const param = obj[item]
+    if (typeof param === 'boolean' && param) className += ` ${item}`
+    else if (typeof param === 'string') className += ` ${param}`
+    else if (typeof param === 'function') {
+      className += ` ${exec(param, element)}`
+    }
+  }
+  return className
+}
+
+export default (params, element, node) => {
+  if (!params) return
+  const { key } = element
+  if (params === true) params = element.class = { key }
+  if (isString(params)) params = element.class = { default: params }
+  if (isObject(params)) params = classify(params, element)
+  // TODO: fails on string
+  const className = params.replace(/\s+/g, ' ').trim()
+  node.classList = className
+  return className
+}

package/src/element/mixins/content.js

@@ -0,0 +1,17 @@
+'use strict'
+
+import set from '../set'
+
+/**
+ * Appends anything as content
+ * an original one as a child
+ */
+export default (param, element, node) => {
+  if (param && element) {
+    if (param.__hash === element.content.__hash && element.content.update) {
+      element.content.update(param)
+    } else {
+      set.call(element, param)
+    }
+  }
+}

package/src/element/mixins/data.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { exec, isObject } from '../../utils'
+import Report from '../../utils/report'
+
+/**
+ * Apply data parameters on the DOM nodes
+ * this should only work if `showOnNode: true` is passed
+ */
+export default (params, element, node) => {
+  if (params && params.showOnNode) {
+    if (!isObject(params)) Report('HTMLInvalidData', params)
+
+    // Apply data params on node
+    for (const dataset in params) {
+      if (dataset !== 'showOnNode') {
+        node.dataset[dataset] = exec(params[dataset], element)
+      }
+    }
+  }
+}

package/src/element/mixins/html.js

@@ -0,0 +1,17 @@
+'use strict'
+
+import { exec } from '../../utils'
+
+/**
+ * Appends raw HTML as content
+ * an original one as a child
+ */
+export default (param, element, node) => {
+  const prop = exec(param, element)
+  if (prop) {
+    // const parser = new window.DOMParser()
+    // param = parser.parseFromString(param, 'text/html')
+    if (node.nodeName === 'SVG') node.textContent = prop
+    else node.innerHTML = prop
+  }
+}

package/src/element/mixins/index.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import attr from './attr'
+import classList from './classList'
+import content from './content'
+import data from './data'
+import html from './html'
+import style from './style'
+import text from './text'
+import state from './state'
+import registry from './registry'
+
+export {
+  attr,
+  classList,
+  content,
+  data,
+  style,
+  text,
+  html,
+  state,
+  registry
+}

package/src/element/mixins/registry.js

@@ -0,0 +1,55 @@
+'use strict'
+
+import {
+  attr,
+  style,
+  text,
+  html,
+  content,
+  data,
+  classList,
+  state
+} from '.'
+
+export default {
+  attr,
+  style,
+  text,
+  html,
+  content,
+  data,
+  class: classList,
+  state,
+
+  proto: {},
+  props: {},
+  path: {},
+  childProto: {},
+  if: {},
+  define: {},
+  transform: {},
+  __hash: {},
+  __cached: {},
+  __defined: {},
+  __exec: {},
+  __changes: {},
+  __trash: {},
+  __root: {},
+  __props: {},
+  __proto: {},
+  __ifFragment: {},
+  __ifFalsy: {},
+  key: {},
+  tag: {},
+  parent: {},
+  node: {},
+  set: {},
+  update: {},
+  remove: {},
+  lookup: {},
+  keys: {},
+  log: {},
+  parse: {},
+  parseDeep: {},
+  on: {}
+}

package/src/element/mixins/state.js

@@ -0,0 +1,16 @@
+'use strict'
+
+import { exec, isObject } from '../../utils'
+
+export default (params, element, node) => {
+  const state = exec(params, element)
+
+  if (isObject(state)) {
+    for (const param in state) {
+      if (param === 'update' || param === '__element' || param === 'parse') continue
+      element.state[param] = exec(state[param], element)
+    }
+  }
+
+  return element
+}

package/src/element/mixins/style.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import { isObject, map } from '../../utils'
+import { report } from '../../utils/report'
+
+/**
+ * Recursively add styles to a DOM node
+ */
+export default (params, element, node) => {
+  if (params) {
+    if (isObject(params)) map(node.style, params, element)
+    else report('HTMLInvalidStyles', params)
+  }
+}

package/src/element/mixins/text.js

@@ -0,0 +1,19 @@
+'use strict'
+
+import { create } from '..'
+import { exec } from '../../utils'
+
+/**
+ * Creates a text node and appends into
+ * an original one as a child
+ */
+export default (param, element, node) => {
+  const prop = exec(param, element)
+  if (element.tag === 'string') node.nodeValue = prop
+  else if (param) {
+    if (element.__text) {
+      element.__text.text = prop
+      if (element.__text.node) element.__text.node.nodeValue = prop
+    } else create({ tag: 'string', text: prop }, element, '__text')
+  }
+}