@domql/element 2.4.0 → 2.4.2

package/methods/v2.js

@@ -0,0 +1,82 @@
+'use strict'
+
+import { isDefined, isFunction, isObjectLike } from '@domql/utils'
+import { parseFilters, registry } from '../mixins'
+
+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]]
+}

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/mixins/content.js

@@ -0,0 +1,47 @@
+'use strict'
+
+import { isFunction } from '@domql/utils'
+import set from '../set'
+
+export const updateContent = function (params, options) {
+  const element = this
+
+  if (!element.content) return
+  if (element.content.update) element.content.update(params, options)
+}
+
+export const removeContent = function (el) {
+  const element = el || this
+  const { __ref } = element
+
+  if (element.content) {
+    if (element.content.node) {
+      if (element.content.tag === 'fragment') element.node.innerHTML = ''
+      else element.node.removeChild(element.content.node)
+    }
+
+    const { __cached } = __ref
+    if (__cached && __cached.content) {
+      if (__cached.content.tag === 'fragment') __cached.content.parent.node.innerHTML = ''
+      else if (__cached.content && isFunction(__cached.content.remove)) __cached.content.remove()
+    }
+
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -13,13 +13,14 @@
   },
   "source": "index.js",
   "files": [
+    "*/**.js",
     "*.js",
     "dist"
   ],
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx esbuild *.js --target=es2019 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx esbuild *.js --target=node16 --format=cjs --outdir=dist/cjs",
+    "build:esm": "npx esbuild **/*.js --target=es2019 --format=esm --outdir=dist/esm",
+    "build:cjs": "npx esbuild **/*.js --target=node16 --format=cjs --outdir=dist/cjs",
     "build": "yarn build:cjs",
     "prepublish": "rimraf -I dist && yarn build && yarn copy:package:cjs"
   },
@@ -30,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "d01a7237a0065a5a439a03062064076c5fdc91b7",
+  "gitHead": "6def1dc6574a649c0bdc8a3ba6eb171ad79649ea",
   "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'

package/props/inherit.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { exec, is, isString } from '@domql/utils'
+
+const objectizeStringProperty = propValue => {
+  if (is(propValue)('string', 'number')) {
+    return { inheritedString: propValue }
+  }
+  return propValue
+}
+
+export const inheritParentProps = (element, parent) => {
+  let propsStack = []
+  const parentProps = exec(parent, parent.state).props
+
+  const matchParent = parent.props && parentProps[element.key]
+  const matchParentIsString = isString(matchParent)
+  const matchParentChildProps = parentProps && parentProps.childProps
+
+  if (matchParent) {
+    if (matchParentIsString) {
+      const inheritedStringExists = propsStack.filter(v => v.inheritedString)[0]
+      if (inheritedStringExists) inheritedStringExists.inheritedString = matchParent
+      else {
+        propsStack = [].concat(objectizeStringProperty(matchParent), propsStack)
+      }
+    } else {
+      propsStack.push(objectizeStringProperty(matchParent))
+    }
+  }
+  if (matchParentChildProps) propsStack.push(matchParentChildProps)
+
+  return propsStack
+}

package/props/update.js

@@ -0,0 +1,17 @@
+'use strict'
+
+import { syncProps } from './create'
+import { inheritParentProps } from './inherit'
+
+export const updateProps = (newProps, element, parent) => {
+  const { __ref } = element
+  let propsStack = __ref.__props
+
+  const parentProps = inheritParentProps(element, parent)
+  if (parentProps) propsStack = __ref.__props = [].concat(parentProps, propsStack)
+  if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack)
+
+  if (propsStack) syncProps(propsStack, element)
+
+  return element
+}

package/test/create.test.js

@@ -0,0 +1,61 @@
+'use strict'
+
+import { create } from '../../src/element'
+
+const dom = create({})
+
+test('should create EMPTY element', () => {
+  expect(dom).toHaveProperty('key')
+  expect(dom).toHaveProperty('state')
+  expect(dom).toHaveProperty('parent')
+  expect(dom).toHaveProperty('node')
+  expect(dom).toHaveProperty('set')
+  expect(dom).toHaveProperty('update')
+  expect(dom).toHaveProperty('__ref')
+})
+
+test('should create valid DOM node', () => {
+  expect(dom.node).toBeInstanceOf(window.HTMLDivElement)
+})
+
+test('must be able to create valid PATH', () => {
+  expect(dom.__ref.__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/test/set.test.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import { create } from '../../src/element'
+
+const element = create({})
+
+test('should SET element', () => {
+  element.set({ text: 'test' })
+  expect(element.content.text).toBe('test')
+
+  element.set({ text: 'test2' })
+  expect(element.content.text).toBe('test2')
+})

package/test/update.test.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import { create } from '../../src/element'
+
+const element = create({})
+
+test('should UPDATE element', () => {
+  expect(element.text).toBeUndefined()
+
+  element.update('test')
+
+  expect(element.text).toBe('test')
+})