domql 1.2.12 → 1.3.2

package/README.md

@@ -7,51 +7,17 @@ DOM rendering Javascript framework.
 - No transpilations, simple ES6 code
 - One-time import and subtrees
 
-You can start with [starter-kit](https://github.com/rackai/starter-kit) as a boilerplate, or jump into the live editor [playground](https://domql.com/playground/).
+You can start with [starter-kit](https://github.com/rackai/starter-kit) as a boilerplate, or jump into the [playground](https://domql.com/playground/).
 
 [![npm version](https://badge.fury.io/js/%40rackai%2Fdomql.svg)](https://badge.fury.io/js/%40rackai%2Fdomql)
 [![Build Status](https://travis-ci.org/rackai/domql.svg?branch=master)](https://travis-ci.org/rackai/domql)
 [![Coverage Status](https://coveralls.io/repos/github/rackai/domql/badge.svg?branch=main)](https://coveralls.io/github/rackai/domql?branch=main)
 
-TODO:
-- [x] error reporting
-- [x] virtual DOM tree
-- [x] create
-  - [x] create using prototype class
-  - [x] support multiple level prototypes
-  - [x] DOM caching
-- [x] state
-- [x] binding
-  - [x] with other component
-  - [x] with state
-- [x] update
-  - [x] set (recreate)
-  - [x] only iterate with diff
-- [x] events
-  - [x] event handling
-  - [ ] bubbling and propogation
-- [ ] run changes inside animationFrame
-
-### Getting started
-
-To install all dependencies and run dev server, run:
-
-```shell
-yarn && yarn start
-```
-
-### Examples
-
-Initialization: 
-
 ```javascript
 import DOM from '@rackai/domql'
 
 DOM.create({ text: 'Rendered' })
 ```
-
-Attributes:
-
 ```javascript
 var link = {
   tag: 'a',
@@ -70,8 +36,6 @@ var img = {
   }
 }
 ```
-
-Reusing: 
 ```javascript
 var Link = {
   tag: 'a'
@@ -96,8 +60,6 @@ var header = {
   menu
 }
 ```
-
-Array Support:
 ```javascript
 var navItems = ['Home', 'About', 'FAQ', 'Contact']
 
@@ -106,8 +68,6 @@ var menu = {
   ...navItems
 }
 ```
-
-Update:
 ```javascript
 var val = {
   text: 0

package/package.json

@@ -3,7 +3,7 @@
   "description": "DOM rendering Javascript framework at early stage.",
   "private": false,
   "author": "rackai",
-  "version": "1.2.12",
+  "version": "1.3.2",
   "repository": "https://github.com/rackai/domql",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/src/element/create.js

@@ -46,12 +46,12 @@ const create = (element, parent, key, options = {}) => {
     }
   }
 
-  // enable STATE
-  element.state = createState(element, parent)
-
   // create PROTOtypal inheritance
   applyPrototype(element, parent, options)
 
+  // enable STATE
+  element.state = createState(element, parent)
+
   // console.groupCollapsed('Create:', assignedKey)
   // console.log(element)
 
@@ -71,6 +71,11 @@ const create = (element, parent, key, options = {}) => {
     return assignNode(element, parent, assignedKey)
   }
 
+  // run `on.init`
+  if (element.on && isFunction(element.on.init)) {
+    on.init(element.on.init, element, element.state)
+  }
+
   // generate a CLASS name
   assignClass(element)
 
@@ -86,11 +91,6 @@ const create = (element, parent, key, options = {}) => {
     element.log = log
   }
 
-  // run `on.init`
-  if (element.on && isFunction(element.on.init)) {
-    on.init(element.on.init, element, element.state)
-  }
-
   // enable TRANSFORM in data
   if (!element.transform) element.transform = {}
 

package/src/element/createProps.js

@@ -4,7 +4,10 @@ import { deepClone, deepMerge, exec, isArray } from '../utils'
 
 const initProps = (element, parent) => {
   const propsStack = []
-  if (element.props) propsStack.push(element.props)
+
+  if (element.props === 'inherit') {
+    if (parent && parent.props) propsStack.push(parent.props[element.key])
+  } else if (element.props) propsStack.push(element.props)
 
   if (isArray(element.__proto)) {
     element.__proto.map(proto => {

package/src/element/createState.js

@@ -34,7 +34,11 @@ export const updateState = function (obj, options = {}) {
 
 export default function (element, parent) {
   let { state } = element
-  if (!state) return (parent && parent.state) || {}
+  // if (!state) return (parent && parent.state) || {}
+  if (!state) {
+    if (parent && parent.state) return parent.state
+    return {}
+  }
   if (isFunction(state)) state = exec(state, element)
 
   state = deepClone(state, ['update', 'parse', '__element'])

package/src/element/update.js

@@ -9,6 +9,7 @@ import { merge } from '../utils/object'
 import { appendNode } from './assign'
 import { createNode } from '.'
 import { updateProps } from './createProps'
+import createState from './createState'
 
 const UPDATE_DEFAULT_OPTIONS = {
   stackChanges: false,
@@ -20,17 +21,6 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const element = this
   const { define, parent, node } = element
 
-  // console.groupCollapsed('Update:', element.path)
-  // console.log('params:')
-  // console.log(params)
-  // console.log('props:')
-  // console.log(element.props)
-  // console.log('element:')
-  // console.log(element)
-  // console.log('PARAMS.PROPS:')
-  // console.log(params.props)
-  // console.groupEnd('Update:')
-  // if params is string
   if (isString(params) || isNumber(params)) {
     params = { text: params }
   }
@@ -39,14 +29,10 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     on.initUpdate(element.on.initUpdate, element, element.state)
   }
 
-  // console.log(element, parent)
   updateProps(params.props, element, parent)
-  // // console.log(element.path)
-  // // console.log(element)
 
-  // console.groupCollapsed('UPDATE:')
-  // console.log(element)
-  // console.groupEnd('UPDATE:')
+  // const state = params.state || element.state
+  // element.state = createState({ state }, parent)
 
   const overwriteChanges = overwrite(element, params, UPDATE_DEFAULT_OPTIONS)
   const execChanges = throughUpdatedExec(element, UPDATE_DEFAULT_OPTIONS)
@@ -70,9 +56,6 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     }
   }
 
-  // console.log(node)
-  // console.groupEnd('Update:')
-
   if (!node || options.preventRecursive) return
 
   for (const param in element) {

package/src/utils/object.js

@@ -77,7 +77,7 @@ export const deepMerge = (element, proto) => {
     const elementProp = element[e]
     const protoProp = proto[e]
     // const cachedProps = cache.props
-    if (e === 'parent' || e === 'props') continue
+    if (e === 'parent' || e === 'props' || e === 'state') continue
     if (elementProp === undefined) {
       element[e] = protoProp
     } else if (isObjectLike(elementProp) && isObject(protoProp)) {
@@ -122,7 +122,7 @@ export const overwrite = (element, params, options) => {
   const changes = {}
 
   for (const e in params) {
-    if (e === 'props') continue
+    if (e === 'props' || e === 'state') continue
 
     const elementProp = element[e]
     const paramsProp = params[e]

package/src/utils/protoUtils.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isArray, isFunction, isObject } from './object'
+import { exec, isArray, isFunction, isObject } from './object'
 
 export const generateHash = () => Math.random().toString(36).substring(2)