@domql/element 2.0.7 → 2.2.3

package/README.md

@@ -0,0 +1,21 @@
+# DOMQL Element
+Takes object and creates DOMQL element.
+
+[![npm version](https://badge.fury.io/js/%40domql%2Felement.svg)](https://badge.fury.io/js/%40domql%2Felement)
+
+### Example:
+```javascript
+import DOM from 'domql'
+
+const Poster = {
+  extends: [Link, Img],
+  props: {
+    boxSize: [100, 200],
+    borderRadius: 12,
+    padding: 16,
+    background: '#fff'
+  }
+}
+
+DOM.create(Poster, document.body)
+```

package/index.js

@@ -1,7 +1,7 @@
 'use strict'
 
-export * from './iterate'
-export * from './methods'
-export * from './update'
-export * from './create'
-export * from './set'
+export * from '@domql/methods'
+export * from '@domql/iterate'
+export * from '@domql/update'
+export * from '@domql/create'
+export * from '@domql/set'

package/package.json

@@ -1,19 +1,15 @@
 {
   "name": "@domql/element",
-  "version": "2.0.7",
+  "version": "2.2.3",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "@domql/event": "latest",
-    "@domql/extends": "latest",
-    "@domql/key": "latest",
-    "@domql/mixins": "latest",
-    "@domql/props": "latest",
-    "@domql/registry": "latest",
-    "@domql/state": "latest",
-    "@domql/tree": "latest",
-    "@domql/utils": "latest"
+    "@domql/create": "latest",
+    "@domql/iterate": "latest",
+    "@domql/methods": "latest",
+    "@domql/set": "latest",
+    "@domql/update": "latest"
   },
-  "gitHead": "6d9ef59d4aa1f481159f8fdbe38112479e86e21a",
+  "gitHead": "140b4437092d6a5efaf99cc32f04fedd55faac0c",
   "source": "index.js"
 }

package/create.js

@@ -1,167 +0,0 @@
-'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 propMethod = DEFAULT_METHODS[key]
-    if (propMethod && isFunction(propMethod)) propMethod(element, element.ref.state)
-    const hasDefine = element.define && element.define[key]
-    if (hasDefine && isFunction(hasDefine)) element.ref[key] = hasDefine(element, element.ref.state)
-    if (!propMethod && !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/iterate.js

@@ -1,80 +0,0 @@
-'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/methods.js

@@ -1,96 +0,0 @@
-'use strict'
-
-import { isObject, isObjectLike } from '@domql/utils'
-import { DEFAULT_METHODS } from '@domql/registry'
-
-// 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(DEFAULT_METHODS[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/set.js

@@ -1,44 +0,0 @@
-'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
-  }
-}
-
-export 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
-}
-
-// 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/update.js

@@ -1,85 +0,0 @@
-'use strict'
-
-import { overwrite, isFunction, isObject, isString, isNumber, merge } from '@domql/utils'
-import { defaultMethods } from '@domql/mixins'
-import { updateProps } from '@domql/props'
-// import { createNode } from '@domql/node'
-import { on } from '@domql/event'
-
-import { isMethod } from './methods'
-import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
-// import { appendNode } from './assign'
-
-const UPDATE_DEFAULT_OPTIONS = {
-  stackChanges: false,
-  cleanExec: true,
-  preventRecursive: false
-}
-
-export const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
-  const element = this
-  const { define, parent, node } = element
-
-  // console.groupCollapsed('Update:', element.path)
-  // 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)
-  }
-
-  updateProps(params.props, element, parent)
-
-  // console.groupCollapsed('UPDATE:')
-  // 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.groupEnd('Update:')
-
-  if (!node || options.preventRecursive) return
-
-  for (const param in element) {
-    const prop = element[param]
-
-    if (isMethod(param) || isObject(defaultMethods[param]) || prop === undefined) continue
-
-    const hasDefined = define && define[param]
-    const ourParam = defaultMethods[param]
-
-    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)
-  }
-
-  return element
-}