domql 1.5.98 → 1.5.100

package/package.json

@@ -2,7 +2,7 @@
   "name": "domql",
   "description": "DOM rendering Javascript framework at early stage.",
   "author": "symbo.ls",
-  "version": "1.5.98",
+  "version": "1.5.100",
   "repository": "https://github.com/domql/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -25,7 +25,9 @@
   },
   "dependencies": {
     "@domql/globals": "latest",
-    "@domql/utils": "latest"
+    "@domql/utils": "latest",
+    "@domql/registry": "latest",
+    "@domql/report": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

package/packages/emotion/index.js

@@ -1,7 +1,7 @@
 'use strict'
 
 // import DOM from '../../src'
-import { isObjectLike, exec, isObject, isEqualDeep } from '../../src/utils'
+import { isObjectLike, exec, isObject, isEqualDeep } from '@domql/utils'
 import { classList } from '../../src/element/mixins'
 import createEmotion from '@emotion/css/create-instance'
 const ENV = process.env.NODE_ENV

package/packages/object/index.js

@@ -1,29 +1 @@
 'use strict'
-
-export const isObject = arg => {
-  if (arg === null) return false
-  return (typeof arg === 'object') && (arg.constructor === Object)
-}
-
-export const isString = arg => typeof arg === 'string'
-
-export const isNumber = arg => typeof arg === 'number'
-
-export const isFunction = arg => typeof arg === 'function'
-
-export const isArray = arg => Array.isArray(arg)
-
-export const isObjectLike = arg => {
-  if (arg === null) return false
-  return (typeof arg === 'object')
-}
-
-export const isDefined = arg => {
-  return isObject(arg) ||
-    isObjectLike(arg) ||
-    isString(arg) ||
-    isNumber(arg) ||
-    isFunction(arg) ||
-    isArray(arg) ||
-    isObjectLike(arg)
-}

package/src/element/cache.js

@@ -1,8 +1,11 @@
 'use strict'
 
 import { document } from '@domql/globals'
+import { exec, isString } from '@domql/utils'
+import { report } from '@domql/report'
+
 import { can } from '../event'
-import { exec, isString, isTagRegistered, report } from '../utils'
+import { isTagRegistered } from '../utils'
 
 const cachedElements = {}
 

package/src/element/create.js

@@ -1,23 +1,23 @@
 'use strict'
 
+import { isObject, isFunction, isString, createID, isNode, exec, is } from '@domql/utils'
+import { TAGS } from '@domql/registry'
+
 import root from './root'
 import createNode from './node'
 import { appendNode, assignNode } from './assign'
 import { applyExtend } from './extend'
-import nodes from './nodes'
 import set, { removeContentElement } from './set'
 import createState from './state'
 import createProps from './props'
 import update from './update'
 import { on } from '../event'
 import { assignClass } from './mixins/classList'
-import { isObject, isFunction, isString, createID, isNode, exec } from '../utils'
 import { remove, lookup, setProps, log, keys, parse, parseDeep, spotByPath, nextElement, previousElement, isMethod } from './methods'
 import cacheNode, { detectTag } from './cache'
 import { registry } from './mixins'
 import { throughInitialExec } from './iterate'
 import OPTIONS from './options'
-import { is } from '@domql/utils'
 // import { overwrite, clone, fillTheRest } from '../utils'
 
 const ENV = process.env.NODE_ENV
@@ -30,7 +30,9 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
 
   // if ELEMENT is not given
   if (element === undefined) {
-    if (ENV === 'test' || ENV === 'development') { console.warn(key, 'element is undefined in', parent && parent.path) }
+    if (ENV === 'test' || ENV === 'development') {
+      console.warn(key, 'element is undefined in', parent && parent.__ref && parent.__ref.path)
+    }
     element = {}
   }
   if (element === null) return
@@ -142,7 +144,7 @@ const checkIfPrimitive = (element) => {
 const applyValueAsText = (element, parent, key) => {
   const extendTag = element.extend && element.extend.tag
   const childExtendTag = parent.childExtend && parent.childExtend.tag
-  const isKeyValidHTMLTag = ((nodes.body.indexOf(key) > -1) && key)
+  const isKeyValidHTMLTag = ((TAGS.body.indexOf(key) > -1) && key)
   return {
     text: element,
     tag: extendTag || childExtendTag || isKeyValidHTMLTag || 'string'
@@ -189,6 +191,7 @@ const checkIf = (element, parent) => {
 
 const addCaching = (element, parent) => {
   const { __ref } = element
+  let { __ref: __parentRef } = parent
 
   // enable TRANSFORM in data
   if (!element.transform) element.transform = {}
@@ -214,12 +217,13 @@ const addCaching = (element, parent) => {
 
   // Add _root element property
   const hasRoot = parent && parent.key === ':root'
-  if (!element.__root) element.__root = hasRoot ? element : parent.__root
+  if (!__ref.__root) __ref.__root = hasRoot ? element : parent.__ref.__root
 
   // set the PATH array
   if (ENV === 'test' || ENV === 'development') {
-    if (!parent.path) parent.path = []
-    element.path = parent.path.concat(element.key)
+    if (!__parentRef) __parentRef = parent.__ref = {}
+    if (!__parentRef.__path) __parentRef.__path = []
+    __ref.__path = __parentRef.__path.concat(element.key)
   }
 }
 
@@ -255,14 +259,14 @@ const resolveExtends = (element, parent, options) => {
   delete element.__element
 
   // added by createProps
-  delete element.__props // TODO: check with NikaOto and remove
+  delete element.__props // TODO: check with @Nikaoto and remove
   delete element.props.__element
   delete element.props.update
 
   // added by createState
   delete element.state.__element
   delete element.state.__element
-  delete element.__hasRootState // TODO: check with NikaOto and remove
+  delete element.__hasRootState // TODO: check with @Nikaoto and remove
   delete element.__ref
 
   return element

package/src/element/define.js

@@ -1,7 +1,7 @@
 'use strict'
 
+import { report } from '@domql/report'
 import { registry } from './mixins'
-import { report } from '../utils'
 
 export default (params, options = {}) => {
   const { overwrite } = options

package/src/element/extend.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { isFunction, exec, getExtendStack, jointStacks, cloneAndMergeArrayExtend, deepMergeExtend, isString } from '../utils'
+import { isFunction, exec, isString } from '@domql/utils'
+import { getExtendStack, jointStacks, cloneAndMergeArrayExtend, deepMergeExtend } from '../utils'
 
 const ENV = process.env.NODE_ENV
 

package/src/element/index.js

@@ -1,6 +1,5 @@
 'use strict'
 
-import nodes from './nodes'
 import root from './root'
 import tree from './tree'
 import cache from './cache'
@@ -15,7 +14,6 @@ import set from './set'
 import { lookup, remove, get, setProps, log, keys } from './methods'
 
 export {
-  nodes,
   root,
   tree,
   cache,

package/src/element/iterate.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { isObject, exec, isFunction, isNumber, isString, overwrite } from '../utils'
+import { isObject, exec, isFunction, isNumber, isString } from '@domql/utils'
+import { overwrite } from '../utils'
 import { isMethod } from './methods'
 
 export const applyEvents = element => {

package/src/element/methods.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isFunction, isObjectLike } from '../utils'
+import { isFunction, isObjectLike } from '@domql/utils'
 import { parseFilters, registry } from './mixins'
 import root from './root'
 
@@ -98,11 +98,12 @@ export const parseDeep = function () {
 
 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(element.path)
+    console.log(__ref.path)
     const keys = element.keys()
     keys.forEach(v => console.log(`%c${v}:\n`, 'font-weight: bold', element[v]))
   }

package/src/element/mixins/attr.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { isNot } from '@domql/utils'
-import { exec, report } from '../../utils'
+import { exec, isNot } from '@domql/utils'
+import { report } from '@domql/report'
 
 /**
  * Recursively add attributes to a DOM node

package/src/element/mixins/classList.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { exec, isObject, isString } from '../../utils'
+import { exec, isObject, isString } from '@domql/utils'
 
 export const assignClass = (element) => {
   const { key } = element

package/src/element/mixins/data.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { exec, isObject } from '../../utils'
-import { report } from '../../utils/report'
+import { exec, isObject } from '@domql/utils'
+import { report } from '@domql/report'
 
 /**
  * Apply data parameters on the DOM nodes

package/src/element/mixins/html.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { exec } from '../../utils'
+import { exec } from '@domql/utils'
 
 /**
  * Appends raw HTML as content

package/src/element/mixins/registry.js

@@ -26,7 +26,6 @@ export default {
   transform: {},
   __ref: {},
   __hash: {},
-  __root: {},
   __text: {},
   nextElement: {},
   previousElement: {},

package/src/element/mixins/state.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { exec, isObject } from '../../utils'
+import { exec, isObject } from '@domql/utils'
 import { IGNORE_STATE_PARAMS } from '../state'
 
 export default (params, element, node) => {

package/src/element/mixins/style.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { isObject, map } from '../../utils'
-import { report } from '../../utils/report'
+import { isObject, map } from '@domql/utils'
+import { report } from '@domql/report'
 
 /**
  * Recursively add styles to a DOM node

package/src/element/mixins/text.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { create } from '..'
-import { exec } from '../../utils'
+import { exec } from '@domql/utils'
 
 /**
  * Creates a text node and appends into

package/src/element/node.js

@@ -1,10 +1,10 @@
 'use strict'
 
+import { exec, isFunction, isObject } from '@domql/utils'
 import create from './create'
 import cacheNode from './cache'
 import * as on from '../event/on'
 
-import { exec, isFunction, isObject } from '../utils'
 import {
   throughInitialDefine,
   throughInitialExec,

package/src/element/props.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { deepClone, deepMerge, exec, isArray, isObject, isString } from '../utils'
+import { exec, isArray, isObject, isString } from '@domql/utils'
+import { deepClone, deepMerge } from '../utils'
 
 const createPropsStack = (element, parent) => {
   const { props, __ref } = element

package/src/element/root.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { document } from '@domql/globals'
-import { report } from '../utils'
+import { report } from '@domql/report'
 
 const root = {
   key: ':root',

package/src/element/set.js

@@ -1,7 +1,7 @@
 'use strict'
 
+import { isEqualDeep, isFunction } from '@domql/utils'
 import create from './create'
-import { isEqualDeep, isFunction } from '../utils'
 import { registry } from './mixins'
 import OPTIONS from './options'
 

package/src/element/state.js

@@ -1,8 +1,8 @@
 'use strict'
 
 import { on } from '../event'
-import { deepClone, exec, overwriteShallow, overwriteDeep } from '../utils'
-import { is, isObject, isFunction, isUndefined } from '@domql/utils'
+import { is, isObject, exec, isFunction, isUndefined } from '@domql/utils'
+import { deepClone, overwriteShallow, overwriteDeep } from '../utils'
 
 export const IGNORE_STATE_PARAMS = [
   'update', 'parse', 'clean', 'create', 'parent', '__element', '__depends', '__ref', '__root',
@@ -35,7 +35,7 @@ export const cleanState = function () {
 export const projectSystemUpdate = function (obj, options = {}) {
   const state = this
   if (!state) return
-  const rootState = (state.__element.__root || state.__element).state
+  const rootState = (state.__element.__ref.__root || state.__element).state
   rootState.update({ PROJECT_SYSTEM: obj }, options)
   return state
 }
@@ -43,7 +43,7 @@ export const projectSystemUpdate = function (obj, options = {}) {
 export const projectStateUpdate = function (obj, options = {}) {
   const state = this
   if (!state) return
-  const rootState = (state.__element.__root || state.__element).state
+  const rootState = (state.__element.__ref.__root || state.__element).state
   rootState.update({ PROJECT_STATE: obj }, options)
   return state
 }
@@ -100,7 +100,7 @@ export const updateState = function (obj, options = {}) {
 export const createState = function (element, parent, opts) {
   const skip = (opts && opts.skip) ? opts.skip : false
 
-  let { state, __root, __ref: __elementRef } = element
+  let { state, __ref: __elementRef } = element
 
   if (isFunction(state)) state = exec(state, element)
 
@@ -179,7 +179,7 @@ export const createState = function (element, parent, opts) {
   state.create = createState
   state.parent = element.parent.state
   state.__element = element
-  state.__root = __root ? __root.state : state
+  state.__root = __elementRef.__root ? __elementRef.__root.state : state
 
   // editor stuff
   state.projectSystemUpdate = projectSystemUpdate

package/src/element/update.js

@@ -1,9 +1,10 @@
 'use strict'
 
 import { window } from '@domql/globals'
-import { diff } from '@domql/utils'
+import { diff, isFunction, isNumber, isObject, isString } from '@domql/utils'
+import { createSnapshotId, merge, overwrite } from '../utils'
+
 import { on } from '../event'
-import { createSnapshotId, isFunction, isNumber, isObject, isString, merge, overwrite } from '../utils'
 import create from './create'
 import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
 import { isMethod } from './methods'
@@ -53,7 +54,8 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     if (ifPassed) __ref.__if = true
     if (itWasFalse && ifPassed) {
       delete element.__hash
-      if (!__ref.__hasRootState || __ref.__state) delete element.state
+      if (!__ref.__hasRootState) delete element.state
+      if (__ref.__state) element.state = __ref.__state
       const created = create(element, element.parent, element.key)
       if (!options.preventUpdate && element.on && isFunction(element.on.update)) {
         on.update(element.on.update, created, created.state)

package/src/event/can.js

@@ -1,10 +1,10 @@
 'use strict'
 
-import { nodes } from '../element'
-import { report } from '../utils'
+import { TAGS } from '@domql/registry'
+import { report } from '@domql/report'
 
 export const render = (element) => {
   const tag = element.tag || 'div'
-  const isValid = nodes.body.indexOf(tag) > -1
+  const isValid = TAGS.body.indexOf(tag) > -1
   return isValid || report('HTMLInvalidTag')
 }

package/src/utils/extendUtils.js

@@ -50,7 +50,7 @@ export const flattenExtend = (extend, stack) => {
 export const deepCloneExtend = obj => {
   const o = {}
   for (const prop in obj) {
-    if (['parent', 'node', '__element', '__root', '__key'].indexOf(prop) > -1) continue
+    if (['parent', 'node', '__element'].indexOf(prop) > -1) continue
     const objProp = obj[prop]
     if (isObject(objProp)) {
       o[prop] = deepCloneExtend(objProp)
@@ -63,7 +63,7 @@ export const deepCloneExtend = obj => {
 
 export const deepMergeExtend = (element, extend) => {
   for (const e in extend) {
-    if (['parent', 'node', '__element', '__root', '__key'].indexOf(e) > -1) continue
+    if (['parent', 'node', '__element'].indexOf(e) > -1) continue
     const elementProp = element[e]
     const extendProp = extend[e]
     if (elementProp === undefined) {

package/src/utils/index.js

@@ -1,6 +1,4 @@
 'use strict'
 
-export * from './report'
 export * from './object'
-export * from './node'
 export * from './extendUtils'

package/src/utils/object.js

@@ -1,87 +1,9 @@
 'use strict'
 
-import { window } from '@domql/globals'
-import nodes from '../element/nodes'
-
-export const memoize = (fn) => {
-  const cache = {}
-  return (...args) => {
-    const n = args[0]
-    if (n in cache) {
-      return cache[n]
-    } else {
-      const result = fn(n)
-      cache[n] = result
-      return result
-    }
-  }
-}
-
-export const debounce = (element, func, timeout = 300) => {
-  let timer
-  return (...args) => {
-    clearTimeout(timer)
-    timer = setTimeout(() => { func.apply(element, args) }, timeout)
-  }
-}
-
-export const isTagRegistered = arg => nodes.body.indexOf(arg)
-
-export const isObject = arg => {
-  if (arg === null) return false
-  return (typeof arg === 'object') && (arg.constructor === Object)
-}
-
-export const isString = arg => typeof arg === 'string'
-
-export const isNumber = arg => typeof arg === 'number'
-
-export const isFunction = arg => typeof arg === 'function'
-
-export const isArray = arg => Array.isArray(arg)
-
-export const isObjectLike = arg => {
-  if (arg === null) return false
-  // if (isArray(arg)) return false
-  return (typeof arg === 'object')
-}
-
-export const isNode = obj => {
-  return (
-    typeof window.Node === 'object'
-      ? obj instanceof window.Node
-      : obj && typeof obj === 'object' && typeof obj.nodeType === 'number' && typeof obj.nodeName === 'string'
-  )
-}
-
-export const isHtmlElement = obj => {
-  return (
-    typeof window.HTMLElement === 'object'
-      ? obj instanceof window.HTMLElement // DOM2
-      : obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string'
-  )
-}
-
-export const isDefined = arg => {
-  return isObject(arg) ||
-    isObjectLike(arg) ||
-    isString(arg) ||
-    isNumber(arg) ||
-    isFunction(arg) ||
-    isArray(arg) ||
-    isObjectLike(arg)
-}
-
-export const exec = (param, element, state) => {
-  if (isFunction(param)) return param(element, state || element.state)
-  return param
-}
+import { TAGS } from '@domql/registry'
+import { isArray, isObject, isObjectLike } from '@domql/utils'
 
-export const map = (obj, extention, element) => {
-  for (const e in extention) {
-    obj[e] = exec(extention[e], element)
-  }
-}
+export const isTagRegistered = arg => TAGS.body.indexOf(arg)
 
 export const merge = (element, obj) => {
   for (const e in obj) {
@@ -121,7 +43,7 @@ export const clone = obj => {
 /**
  * Deep cloning of object
  */
-export const deepClone = (obj, excluding = ['parent', 'node', '__element', 'state', '__root', '__cached', 'context', 'extend', '__ref']) => {
+export const deepClone = (obj, excluding = ['parent', 'node', '__element', 'state', 'context', 'extend', '__ref']) => {
   const o = isArray(obj) ? [] : {}
   for (const prop in obj) {
     if (excluding.indexOf(prop) > -1) continue
@@ -136,26 +58,6 @@ export const deepClone = (obj, excluding = ['parent', 'node', '__element', 'stat
   return o
 }
 
-/**
- * Overwrites object properties with another
- */
-export const isEqualDeep = (param, element) => {
-  if (param === element) return true
-  if (!param || !element) return false
-  for (const prop in param) {
-    const paramProp = param[prop]
-    const elementProp = element[prop]
-    if (isObjectLike(paramProp)) {
-      const isEqual = isEqualDeep(paramProp, elementProp)
-      if (!isEqual) return false
-    } else {
-      const isEqual = paramProp === elementProp
-      if (!isEqual) return false
-    }
-  }
-  return true
-}
-
 /**
  * Overwrites object properties with another
  */
@@ -181,7 +83,7 @@ export const overwrite = (element, params, options) => {
   return changes
 }
 
-export const overwriteShallow = (obj, params, excluding = ['node', '__root', '__ref']) => {
+export const overwriteShallow = (obj, params, excluding = ['node', '__ref']) => {
   for (const e in params) {
     if (excluding.indexOf(e) > -1) continue
     obj[e] = params[e]
@@ -192,7 +94,7 @@ export const overwriteShallow = (obj, params, excluding = ['node', '__root', '__
 /**
  * Overwrites DEEPly object properties with another
  */
-export const overwriteDeep = (obj, params, excluding = ['node', '__root', '__ref']) => {
+export const overwriteDeep = (obj, params, excluding = ['node', '__ref']) => {
   for (const e in params) {
     if (excluding.indexOf(e) > -1) continue
     const objProp = obj[e]
@@ -217,7 +119,7 @@ export const mergeIfExisted = (a, b) => {
 /**
  * Merges array extends
  */
-export const mergeArray = (arr, excluding = ['parent', 'node', '__element', 'state', '__root', '__cached', 'context', '__ref']) => {
+export const mergeArray = (arr, excluding = ['parent', 'node', '__element', 'state', 'context', '__ref']) => {
   return arr.reduce((a, c) => deepMerge(a, deepClone(c, excluding)), {})
 }
 

package/src/utils/node.js

@@ -1,14 +0,0 @@
-'use strict'
-
-export const createID = (function () {
-  let index = 0
-
-  function newId () {
-    index++
-    return index
-  }
-
-  return newId
-})()
-
-export const createSnapshotId = createID

package/src/utils/report.js

@@ -1,62 +0,0 @@
-'use strict'
-
-export const errors = {
-  en: {
-    DocumentNotDefined: {
-      title: 'Document is undefined',
-      description: 'To tweak with DOM, you should use browser.'
-    },
-    OverwriteToBuiltin: {
-      title: 'Overwriting to builtin method',
-      description: 'Overwriting a builtin method in the global define is not possible, please choose different name'
-    },
-    BrowserNotDefined: {
-      title: 'Can\'t recognize environment',
-      description: 'Environment should be browser application, that can run Javascript'
-    },
-    SetQuickPreferancesIsNotObject: {
-      title: 'Quick preferances object is required',
-      description: 'Please pass a plain object with "lang", "culture" and "area" properties'
-    },
-    InvalidParams: {
-      title: 'Params are invalid',
-      description: 'Please pass a plain object with "lang", "culture" and "area" properties'
-    },
-    CantCreateWithoutNode: {
-      title: 'You must provide node',
-      description: 'Can\'t create DOM element without setting node or text'
-    },
-    HTMLInvalidTag: {
-      title: 'Element tag name (or DOM nodeName) is invalid',
-      description: 'To create element, you must provide valid DOM node. See full list of them at here: http://www.w3schools.com/tags/'
-    },
-    HTMLInvalidAttr: {
-      title: 'Attibutes object is invalid',
-      description: 'Please pass a valid plain object to apply as an attributes for a DOM node'
-    },
-    HTMLInvalidData: {
-      title: 'Data object is invalid',
-      description: 'Please pass a valid plain object to apply as an dataset for a DOM node'
-    },
-    HTMLInvalidStyles: {
-      title: 'Styles object is invalid',
-      description: 'Please pass a valid plain object to apply as an style for a DOM node'
-    },
-    HTMLInvalidText: {
-      title: 'Text string is invalid',
-      description: 'Please pass a valid string to apply text to DOM node'
-    }
-  }
-}
-
-export const report = (err, arg, element) => {
-  const currentLang = 'en'
-  let errObj
-  if (err && typeof err === 'string') errObj = errors[currentLang][err]
-
-  return new Error(
-    `"${err}", "${arg}"\n\n`,
-    `${errObj.description}`,
-    element ? `\n\n${element}` : ''
-  )
-}