@domql/element 2.3.154 → 2.4.1

package/methods/index.js

@@ -0,0 +1,165 @@
+'use strict'
+
+import { isDefined, isFunction, isObjectLike, isProduction } from '@domql/utils'
+import { TREE } from '../tree'
+import { parseFilters, registry } from '../mixins'
+
+// TODO: update these files
+export const spotByPath = function (path) {
+  const element = this
+  const arr = [].concat(path)
+  let active = TREE[arr[0]]
+
+  if (!arr || !arr.length) return console.log(arr, 'on', element.key, 'is undefined')
+
+  while (active.key === arr[0]) {
+    arr.shift()
+    if (!arr.length) break
+    active = active[arr[0]]
+    if (!active) return
+  }
+
+  return active
+}
+
+// TODO: update these files
+export const lookup = function (key) {
+  const element = this
+  let { parent } = element
+
+  while (parent.key !== key) {
+    if (parent[key]) return parent[key]
+    parent = parent.parent
+    if (!parent) return
+  }
+
+  return parent
+}
+
+export const remove = function (params) {
+  const element = this
+  if (isFunction(element.node.remove)) element.node.remove()
+  else if (!isProduction()) {
+    console.warn('This item cant be removed')
+    element.log()
+  }
+  delete element.parent[element.key]
+}
+
+export const get = function (param) {
+  const element = this
+  return element[param]
+}
+
+export const setProps = function (param, options) {
+  const element = this
+  if (!param || !element.props) return
+  element.update({ props: param }, options)
+  return element
+}
+
+// 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 (registry[param] && !parseFilters.elementKeys.includes(param)) { continue }
+    keys.push(param)
+  }
+  return keys
+}
+
+export const parse = function (excl = []) {
+  const element = this
+  const obj = {}
+  const keyList = keys.call(element)
+  keyList.forEach(v => {
+    if (excl.includes(v)) return
+    let val = element[v]
+    if (v === 'state') {
+      if (element.__ref && element.__ref.__hasRootState) return
+      if (isFunction(val && val.parse)) val = val.parse()
+    } else if (v === 'props') {
+      const { __element, update, ...props } = element[v]
+      obj[v] = props
+    } else if (isDefined(val)) obj[v] = val
+  })
+  return obj
+}
+
+export const parseDeep = function (excl = []) {
+  const element = this
+  const obj = parse.call(element, excl)
+  for (const v in obj) {
+    if (excl.includes(v)) return
+    if (isObjectLike(obj[v])) { obj[v] = parseDeep.call(obj[v], excl) }
+  }
+  return obj
+}
+
+export const log = function (...args) {
+  const element = this
+  const { __ref } = element
+  console.group(element.key)
+  if (args.length) {
+    args.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
+  } else {
+    console.log(__ref.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 nextElement = function () {
+  const element = this
+  const { key, parent } = element
+  const { __children } = parent.__ref
+
+  const currentIndex = __children.indexOf(key)
+  const nextChild = __children[currentIndex + 1]
+
+  return parent[nextChild]
+}
+
+export const previousElement = function (el) {
+  const element = el || this
+  const { key, parent } = element
+  const { __children } = parent.__ref
+
+  if (!__children) return
+
+  const currentIndex = __children.indexOf(key)
+  return parent[__children[currentIndex - 1]]
+}
+
+export const METHODS = [
+  'set',
+  'update',
+  'remove',
+  'updateContent',
+  'removeContent',
+  'lookup',
+  'spotByPath',
+  'keys',
+  'parse',
+  'setProps',
+  'parseDeep',
+  'if',
+  'log',
+  'nextElement',
+  'previousElement'
+]
+
+export const isMethod = function (param) {
+  return METHODS.includes(param)
+}

package/methods/set.js

@@ -0,0 +1,41 @@
+'use strict'
+
+import { isDevelopment } from '@domql/utils'
+
+import set from '../set'
+import update from '../update'
+
+import {
+  lookup,
+  setProps,
+  remove,
+  spotByPath,
+  log,
+  keys,
+  parse,
+  parseDeep,
+  nextElement,
+  previousElement
+} from './'
+
+import { removeContent, updateContent } from '../mixins/content'
+
+export const addMethods = (element, parent) => {
+  const proto = {
+    set: set.bind(element),
+    update: update.bind(element),
+    remove: remove.bind(element),
+    updateContent: updateContent.bind(element),
+    removeContent: removeContent.bind(element),
+    setProps: setProps.bind(element),
+    lookup: lookup.bind(element),
+    spotByPath: spotByPath.bind(element),
+    parse: parse.bind(element),
+    parseDeep: parseDeep.bind(element),
+    keys: keys.bind(element),
+    nextElement: nextElement.bind(element),
+    previousElement: previousElement.bind(element)
+  }
+  if (isDevelopment()) proto.log = log.bind(element)
+  Object.setPrototypeOf(element, proto)
+}

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

@@ -1,13 +1,7 @@
 'use strict'
 
 import { isDefined, isFunction, isObjectLike } from '@domql/utils'
-import { parseFilters, registry } from './mixins'
-
-export const set = function () {
-}
-
-export const update = function () {
-}
+import { parseFilters, registry } from '../mixins'
 
 export const defineSetter = (element, key, get, set) =>
   Object.defineProperty(element, key, { get, set })

package/mixins/attr.js

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

package/mixins/classList.js

@@ -0,0 +1,48 @@
+'use strict'
+
+import { exec, isObject, isString } from '@domql/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 const classList = (params, element) => {
+  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()
+  if (element.ref) element.ref.class = className // TODO: this check is NOT needed in new DOMQL
+  return className
+}
+
+// LEGACY (still needed in old domql)
+export const applyClassListOnNode = (params, element, node) => {
+  const className = classList(params, element)
+  node.classList = className
+  return className
+}
+
+export default (params, element, node) => {
+  applyClassListOnNode(params, element, node)
+}

package/{remove.js → mixins/content.js}

@@ -1,15 +1,16 @@
 'use strict'
 
 import { isFunction } from '@domql/utils'
+import set from '../set'
 
-export const updateContentElement = function (params, options) {
+export const updateContent = function (params, options) {
   const element = this
 
   if (!element.content) return
   if (element.content.update) element.content.update(params, options)
 }
 
-export const removeContentElement = function (el) {
+export const removeContent = function (el) {
   const element = el || this
   const { __ref } = element
 
@@ -28,3 +29,19 @@ export const removeContentElement = function (el) {
     delete element.content
   }
 }
+
+/**
+ * Appends anything as content
+ * an original one as a child
+ */
+export const setContent = (param, element, node, options) => {
+  if (param && element) {
+    if (element.content.update) {
+      element.content.update({}, options)
+    } else {
+      set.call(element, param, options)
+    }
+  }
+}
+
+export default setContent

package/mixins/data.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { exec, isObject } from '@domql/utils'
+import { report } from '@domql/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/mixins/html.js

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

package/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
+}
+export * from './registry'

package/mixins/registry.js

@@ -0,0 +1,66 @@
+'use strict'
+
+import {
+  attr, classList, content,
+  data, html, state, style,
+  text
+} from '.'
+
+export default {
+  attr,
+  style,
+  text,
+  html,
+  content,
+  data,
+  class: classList,
+  state,
+
+  extend: {},
+  childExtend: {},
+  childExtendRecursive: {},
+  props: {},
+  path: {},
+  if: {},
+  define: {},
+  transform: {},
+  __ref: {},
+  __hash: {},
+  __text: {},
+  nextElement: {},
+  previousElement: {},
+  key: {},
+  tag: {},
+  query: {},
+  parent: {},
+  node: {},
+  set: {},
+  update: {},
+  setProps: {},
+  remove: {},
+  updateContent: {},
+  removeContent: {},
+  lookup: {},
+  spotByPath: {},
+  keys: {},
+  log: {},
+  parse: {},
+  parseDeep: {},
+  on: {},
+  component: {},
+  context: {},
+  $setStateCollection: {},
+  $setCollection: {},
+  $setPropsCollection: {}
+}
+
+// List of keys for .parse() and .parseDeep() to include in the result.
+// Keys not in the array are excluded.
+export const parseFilters = {
+  elementKeys: [
+    'tag', 'text', 'style', 'attr', 'class', 'state', 'props',
+    'data', 'content', 'html', 'on', 'key'
+  ],
+  propsKeys: ['__element', 'update'],
+  stateKeys: []
+}

package/mixins/state.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { IGNORE_STATE_PARAMS } from '@domql/state'
+import { exec, isObject } from '@domql/utils'
+
+export const state = (params, element, node) => {
+  const state = exec(params, element)
+
+  if (isObject(state)) {
+    for (const param in state) {
+      if (IGNORE_STATE_PARAMS.includes(param)) continue
+      if (!state.hasOwnProperty(param)) continue
+      element.state[param] = exec(state[param], element)
+    }
+  }
+
+  return element
+}
+
+export default state

package/mixins/style.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import { isObject, map } from '@domql/utils'
+import { report } from '@domql/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/mixins/text.js

@@ -0,0 +1,41 @@
+'use strict'
+
+import { create } from '..'
+import {
+  exec,
+  isString,
+  replaceLiteralsWithObjectFields
+} from '@domql/utils'
+
+/**
+ * Creates a text node and appends into
+ * an original one as a child
+ */
+export const asd = (param, element, node) => {
+  const prop = exec(param, element)
+  if (element.tag === 'string') {
+    node.nodeValue = prop
+  } else if (param !== undefined || param !== null) {
+    if (element.__text && element.__text.text !== prop) return
+    element.__text.text = prop
+    if (element.__text.node) element.__text.node.nodeValue = prop
+    else create({ tag: 'string', text: prop }, element, '__text')
+  }
+}
+
+export default (param, element, node) => {
+  let prop = exec(param, element)
+  if (isString(prop) && prop.includes('{{')) {
+    prop = replaceLiteralsWithObjectFields(prop, element.state)
+  }
+  if (element.tag === 'string') {
+    if (element.text === prop) return
+    node.nodeValue = prop
+  } else if (param !== undefined || param !== null) {
+    if (element.__text) {
+      if (element.__text.text === prop) return
+      element.__text.text = prop
+      if (element.__text.node) element.__text.node.nodeValue = prop
+    } else create({ tag: 'string', text: prop }, element, '__text')
+  }
+}

package/node.js

@@ -2,7 +2,7 @@
 
 import { exec, isFunction, isObject, isUndefined } from '@domql/utils'
 import { applyEventsOnNode, triggerEventOn } from '@domql/event'
-import { isMethod } from '@domql/methods'
+import { isMethod } from './methods'
 import { cacheNode } from '@domql/node'
 
 import create from './create'
@@ -66,7 +66,7 @@ export const createNode = (element, options) => {
         isVariant(param) ||
         isObject(registry[param])
       ) continue
-
+      
       const isElement = applyParam(param, element, options)
       if (isElement) {
         const { hasDefine, hasContextDefine } = isElement

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "@domql/element",
-  "version": "2.3.154",
+  "version": "2.4.1",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
   "main": "index.js",
-  "exports": "./dist/cjs/index.js",
+  "exports": {
+    ".": {
+      "kalduna": "./index.js",
+      "default": "./dist/cjs/index.js"
+    }
+  },
   "source": "index.js",
   "files": [
+    "*/**.js",
     "*.js",
     "dist"
   ],
@@ -19,11 +25,13 @@
     "prepublish": "rimraf -I dist && yarn build && yarn copy:package:cjs"
   },
   "dependencies": {
-    "@domql/globals": "latest",
-    "@domql/key": "latest",
-    "@domql/tags": "latest"
+    "@domql/event": "latest",
+    "@domql/node": "^2.3.125",
+    "@domql/render": "^2.4.0",
+    "@domql/state": "latest",
+    "@domql/utils": "latest"
   },
-  "gitHead": "86251c1d94b9e87288cc9e84fd9badb6461b2973",
+  "gitHead": "aab9993c65cc91165a2a9bc00a8117a217dc7565",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/props/create.js

@@ -0,0 +1,60 @@
+'use strict'
+
+import { exec, isArray, isObject, deepClone, deepMerge } from '@domql/utils'
+import { IGNORE_PROPS_PARAMS } from './ignore'
+
+import { inheritParentProps } from './inherit'
+
+const createPropsStack = (element, parent) => {
+  const { props, __ref } = element
+  const propsStack = __ref.__props = inheritParentProps(element, parent)
+
+  if (isObject(props)) propsStack.push(props)
+  else if (props === 'inherit' && parent.props) propsStack.push(parent.props)
+  else if (props) propsStack.push(props)
+
+  if (isArray(__ref.__extend)) {
+    __ref.__extend.forEach(extend => {
+      if (extend.props) propsStack.push(extend.props)
+    })
+  }
+
+  __ref.__props = propsStack
+
+  return propsStack
+}
+
+export const syncProps = (props, element) => {
+  element.props = {}
+  const mergedProps = { update, __element: element }
+  props.forEach(v => {
+    if (IGNORE_PROPS_PARAMS.includes(v)) return
+    const execProps = exec(v, element)
+    if (isObject(execProps) && execProps.__element) return
+    element.props = deepMerge(
+      mergedProps,
+      deepClone(execProps, IGNORE_PROPS_PARAMS),
+      IGNORE_PROPS_PARAMS
+    )
+  })
+  element.props = mergedProps
+  return element.props
+}
+
+export const createProps = function (element, parent, cached) {
+  const propsStack = cached || createPropsStack(element, parent)
+  const { __ref } = element
+
+  if (propsStack.length) {
+    __ref.__props = propsStack
+    syncProps(propsStack, element)
+    element.props.update = update
+  }
+
+  return element
+}
+
+function update (props, options) {
+  const element = this.__element
+  element.update({ props }, options)
+}

package/props/ignore.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export const IGNORE_PROPS_PARAMS = ['update', '__element']

package/props/index.js

@@ -0,0 +1,6 @@
+'use strict'
+
+export * from './ignore'
+export * from './create'
+export * from './inherit'
+export * from './update'