domql 2.0.3 → 2.0.7

package/README.md

@@ -0,0 +1,208 @@
+# DOMQL
+DOM rendering Javascript framework.
+
+- Minimalistic
+- No dependencies
+- Extendable
+- 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/).
+
+[![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',
+  class: 'menu link',
+  attr: {
+    href: '#'
+  }
+}
+```
+```javascript
+var img = {
+  tag: 'img',
+  class: 'avatar',
+  attr: {
+    src: '...'
+  }
+}
+```
+
+Reusing: 
+```javascript
+var Link = {
+  tag: 'a'
+}
+
+var ListItem = {
+  proto: Link,
+  class: 'ui link',
+  attr: {
+    href: '#'
+  }
+}
+
+var menu = {
+  childProto: ListItem,
+  home: 'Home',
+  text: 'About'
+}
+
+var header = {
+  logo: {},
+  menu
+}
+```
+
+Array Support:
+```javascript
+var navItems = ['Home', 'About', 'FAQ', 'Contact']
+
+var menu = {
+  proto: ListItem,
+  ...navItems
+}
+```
+
+Update:
+```javascript
+var val = {
+  text: 0
+}
+
+var Increment = {
+  tag: 'button',
+  text: 'Increment',
+  on: {
+    click: (e) => {
+      val.update({ text: val.text++ })
+    }
+  }
+}
+```
+
+## API
+
+### Properties
+
+| Property | Type | Description | Default |
+| --- | --- | --- | --- |
+| `key` | `Number` `String` | Defines the key of the Element | The key of the object, or randomly generated name |
+| `proto` | `Object` `Array` | Clones the other element | `undefined` |
+| `childProto` | `Object` `Array` | Specifies the `proto` for all child elements | `undefined` |
+| `tag` | `String` | Specifis the HTML tag  | `div` or related HTML tag if the key matches |
+| `class` | `Any` | Specifies the HTML class | `undefined` |
+| `attr` | `Object` | Specifies the set of HTML attributes | `{}` |
+| `text` | `Any` | Text inside the element | `undefined` |
+| `content` | `Object` `Array` | Fragment wrapper to use dynamic content loading | `undefined`
+
+To specify your own property per Element, set the function inside `define` property like:
+
+```javascript
+var User = {
+  define: {
+    username: param => param.toUpperCase()
+  },
+  text: element => element.username
+}
+
+var Contact = {
+  proto: User,
+  username: 'nikoloza'
+}
+```
+
+### Methods
+| Method | Description | Params |
+| --- | --- | --- |
+| `update` | Updates element by passed object | `properties`: `Object` `Array` |
+| `set` | Sets passed element in the `content` property | `element`: `Object` `Array` |
+
+
+### Events
+All native DOM events are supported and can be specified inside `on` parameter. Additionally, `init` and `render` can be also invoked. All events except these two receive `event` object as a first parameter, following the `element` object itself.
+
+
+
+### Reserved keywords
+
+```
+key
+tag
+node
+proto
+on
+class
+text
+data
+style
+attr
+update
+set
+define
+```
+
+Anything except these keywords will create a new nested child element. The easier method to specify HTML tag is to use related nodeName as a key, for example: 
+
+```javascript
+var layout = { // this will be <div>
+  header: {}, // will create <header>
+  aside: {}, // will create <aside>
+  main: { // will create <main>
+    childProto: {
+      article: { // will create <article>
+        title: {}, // will create <div>
+        description: {}, // will create <div>
+        _rating: {} // will create <div class="rating">
+      }
+    }
+  },
+  footer: {} //  will create <footer>
+}
+```
+
+### Credits
+Inspired by [brisky](https://github.com/vigour-io/brisky)

package/package.json

@@ -1,25 +1,58 @@
 {
   "name": "domql",
-  "version": "2.0.3",
-  "main": "index.js",
-  "license": "MIT",
-  "source": "index.js",
+  "description": "DOM rendering Javascript framework at early stage.",
+  "private": false,
+  "author": "rackai",
+  "version": "2.0.7",
+  "repository": "https://github.com/rackai/domql",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "main": "src/index.js",
+  "files": [
+    "src",
+    "packages"
+  ],
+  "scripts": {
+    "start": "parcel examples/index.html --no-cache",
+    "build": "parcel build examples/index.html",
+    "standard": "npx standard \"src/**/*.js\"",
+    "test": "yarn standard && jest --coverage --coverageReporters=text-lcov | coveralls",
+    "test-watch": "jest --watch",
+    "bump": "npx np"
+  },
+  "source": true,
   "dependencies": {
-    "@domql/cache": "latest",
-    "@domql/define": "latest",
-    "@domql/element": "latest",
-    "@domql/event": "latest",
-    "@domql/extends": "latest",
-    "@domql/key": "latest",
-    "@domql/mixins": "latest",
-    "@domql/node": "latest",
-    "@domql/parse": "latest",
-    "@domql/props": "latest",
-    "@domql/registry": "latest",
-    "@domql/report": "latest",
-    "@domql/state": "latest",
-    "@domql/tree": "latest",
-    "@domql/utils": "latest"
+    "regenerator-runtime": "^0.13.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^27.0.2",
+    "babel-preset-env": "^1.7.0",
+    "coveralls": "^3.0.5",
+    "eslint": "^7.12.1",
+    "eslint-plugin-jest": "^26.1.0",
+    "jest": "^27.0.6",
+    "nodemon": "^2.0.6",
+    "np": "^7.2.0",
+    "parcel-bundler": "^1.12.4",
+    "standard": "^16.0.1"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.js"
+    ]
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "env": [
+      "jest"
+    ]
   },
-  "gitHead": "feba8b60eccc9ed2caed62555e7083779c67044a"
+  "browserslist": [
+    "> 1%",
+    "ie >= 9"
+  ]
 }

package/packages/cookie/index.js

@@ -0,0 +1,22 @@
+'use strict'
+
+export const isMobile = (() => /Mobi/.test(navigator.userAgent))()
+
+export const setCookie = (cname, cvalue, exdays = 365) => {
+  const d = new Date()
+  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000))
+  const expires = `expires=${d.toUTCString()}`
+  document.cookie = `${cname}=${cvalue};${expires};path=/`
+}
+
+export const getCookie = (cname) => {
+  const name = `${cname}=`
+  const decodedCookie = decodeURIComponent(document.cookie)
+  const ca = decodedCookie.split(';')
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i]
+    while (c.charAt(0) === ' ') c = c.substring(1)
+    if (c.indexOf(name) === 0) return c.substring(name.length, c.length)
+  }
+  return ''
+}

package/packages/emotion/index.js

@@ -0,0 +1,35 @@
+'use strict'
+
+import DOM from '../../src'
+import { isObjectLike, exec } from '../../src/utils'
+import { classList } from '../../src/element/mixins'
+
+import { css } from '@emotion/css'
+
+const style = (params, element, node) => {
+  const execPareams = exec(params, element)
+  if (params) {
+    if (isObjectLike(element.class)) element.class.style = execPareams
+    else element.class = { style: execPareams }
+  }
+  classf(element.class, element, node)
+}
+
+const classf = (params, element, node) => {
+  if (isObjectLike(params)) {
+    const classObjHelper = {}
+    for (const key in params) {
+      const prop = exec(params[key], element)
+      const CSSed = css(prop)
+      classObjHelper[key] = CSSed
+    }
+    classList(classObjHelper, element, node)
+  }
+}
+
+DOM.define({
+  style,
+  class: classf
+}, {
+  overwrite: true
+})

package/packages/object/index.js

@@ -0,0 +1,29 @@
+'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/packages/object/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@domql/object",
+  "version": "0.0.1",
+  "private": false,
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/domql/domql.git"
+  },
+  "author": "Rackai",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/domql/domql/issues"
+  },
+  "homepage": "https://github.com/domql/domql#readme"
+}

package/packages/routeLink/index.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { Link } from '@rackai/symbols'
+import { deepMerge } from '../../src/utils'
+import route from './router'
+
+const RouteLink = {
+  on: {
+    click: (event, element, state) => {
+      const root = element.lookup('app')
+      const { href } = element.props
+      const firstThree = href[0] + href[1] + href[2]
+      if (href && firstThree !== 'htt' && firstThree !== 'ske') {
+        route(root, href, {})
+        event.preventDefault()
+      }
+    }
+  }
+}
+
+deepMerge(Link, RouteLink)
+
+export default RouteLink

package/packages/router/index.js

@@ -0,0 +1,18 @@
+'use strict'
+
+export const splitRoute = (route = window.location.pathname) => route.slice(1).split('/')
+
+export default (rootElement, path, state = {}, level = 0, pushState = true) => {
+  const route = path || window.location.pathname
+  const routes = splitRoute(route)
+
+  const content = rootElement.routes[`/${routes[level]}`]
+
+  if (content) {
+    if (pushState) window.history.pushState(state, null, route)
+    rootElement.set({ proto: content })
+      .node.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  if (level === 0) rootElement.state.update({ activePage: routes[level] })
+}

package/src/element/assign.js

@@ -0,0 +1,22 @@
+'use strict'
+
+/**
+ * Receives child and parent nodes as parametes
+ * and assigns them into real DOM tree
+ */
+export const appendNode = (node, parentNode) => {
+  parentNode.appendChild(node)
+  return node
+}
+
+/**
+ * Receives elements and assigns the first
+ * parameter as a child of the second one
+ */
+export const assignNode = (element, parent, key) => {
+  parent[key || element.key] = element
+  if (element.tag !== 'shadow') {
+    appendNode(element.node, parent.node)
+  }
+  return element
+}

package/src/element/cache.js

@@ -0,0 +1,52 @@
+'use strict'
+
+import { can } from '../event'
+import { exec, isString, isTagRegistered, report } from '../utils'
+
+const cachedElements = {}
+
+const createNode = (element) => {
+  const { tag } = element
+  if (tag) {
+    if (tag === 'string') return document.createTextNode(element.text)
+    else if (tag === 'fragment') {
+      return document.createDocumentFragment()
+    } else if (tag === 'svg' || tag === 'path') { // change that
+      return document.createElementNS('http://www.w3.org/2000/svg', tag)
+    } else return document.createElement(tag)
+  } else {
+    return document.createElement('div')
+  }
+}
+
+const detectTag = element => {
+  let { tag, key } = element
+  tag = exec(tag, element)
+
+  if (tag === true) tag = key
+
+  if (isString(tag)) {
+    const tagExists = isTagRegistered(tag) > -1
+    if (tagExists) return tag
+  } else {
+    const isKeyATag = isTagRegistered(key) > -1
+    if (isKeyATag) return key
+  }
+
+  return 'div'
+}
+
+export default (element) => {
+  const tag = element.tag = detectTag(element)
+
+  if (!can.render(element)) {
+    return report('HTMLInvalidTag')
+  }
+
+  let cachedTag = cachedElements[tag]
+  if (!cachedTag) cachedTag = cachedElements[tag] = createNode(element)
+
+  const clonedNode = cachedTag.cloneNode(true)
+  if (tag === 'string') clonedNode.nodeValue = element.text
+  return clonedNode
+}

package/src/element/create.js

@@ -0,0 +1,144 @@
+'use strict'
+
+import root from './root'
+import createNode from './createNode'
+import { appendNode, assignNode } from './assign'
+import { applyPrototype } from './proto'
+import nodes from './nodes'
+import set from './set'
+import createState from './createState'
+import createProps from './createProps'
+import update from './update'
+import * as on from '../event/on'
+import { assignClass } from './mixins/classList'
+import { isFunction, isNumber, isString, createID, isNode } from '../utils'
+import { remove, lookup, log, keys, parse, parseDeep } from './methods'
+import cacheNode from './cache'
+// import { overwrite, clone, fillTheRest } from '../utils'
+
+const ENV = process.env.NODE_ENV
+
+/**
+ * Creating a domQL element using passed parameters
+ */
+const create = (element, parent, key, options = {}) => {
+  // if ELEMENT is not given
+  if (element === undefined) element = {}
+  if (element === null) return
+
+  // define KEY
+  const assignedKey = element.key || key || createID.next().value
+
+  // if PARENT is not given
+  // if (parent === null) parent = root
+  // if (parent === undefined) parent = root
+  if (!parent) parent = root
+  if (isNode(parent)) parent = root[`${key}_parent`] = { node: parent }
+
+  // if (assignedKey === 'all') debugger
+
+  // if element is STRING
+  if (isString(element) || isNumber(element)) {
+    element = {
+      text: element,
+      tag: (!element.proto && parent.childProto && parent.childProto.tag) ||
+      ((nodes.body.indexOf(key) > -1) && key) || 'string'
+    }
+  }
+
+  // enable STATE
+  element.state = createState(element, parent)
+
+  // create PROTOtypal inheritance
+  applyPrototype(element, parent, options)
+
+  // console.groupCollapsed('Create:', assignedKey)
+  // console.log(element)
+
+  // create and assign a KEY
+  element.key = assignedKey
+
+  // set the PATH
+  if (ENV === 'test' || ENV === 'development') {
+    if (!parent.path) parent.path = []
+    element.path = parent.path.concat(assignedKey)
+  }
+
+  // if it already HAS A NODE
+  if (element.node) {
+    // console.log('hasNode!')
+    // console.groupEnd('Create:')
+    return assignNode(element, parent, assignedKey)
+  }
+
+  // generate a CLASS name
+  assignClass(element)
+
+  // assign METHODS
+  element.set = set
+  element.update = update
+  element.remove = remove
+  element.lookup = lookup
+  if (ENV === 'test' || ENV === 'development') {
+    element.keys = keys
+    element.parse = parse
+    element.parseDeep = parseDeep
+    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 = {}
+
+  // enable CACHING
+  if (!element.__cached) element.__cached = {}
+
+  // enable EXEC
+  if (!element.__exec) element.__exec = {}
+
+  // enable CHANGES storing
+  if (!element.__changes) element.__changes = []
+
+  // enable CHANGES storing
+  const hasRoot = parent.parent && parent.parent.key === ':root'
+  if (!element.__root) element.__root = hasRoot ? parent : parent.__root
+
+  // apply props settings
+  createProps(element, parent)
+
+  // console.log('cache.props:')
+  // console.log(cache.props)
+  // console.log('applied props:')
+  // console.log(element.props)
+  // console.log('element:')
+  // console.log(element)
+  // console.groupEnd('Create:')
+
+  // don't render IF in condition
+  if (isFunction(element.if) && !element.if(element, element.state)) {
+    // TODO: move as fragment
+    const ifFragment = cacheNode({ tag: 'fragment' })
+    element.__ifFragment = appendNode(ifFragment, parent.node)
+    element.__ifFalsy = true
+    return
+  }
+
+  // CREATE a real NODE
+  createNode(element)
+
+  // assign NODE
+  assignNode(element, parent, key)
+
+  // run `on.render`
+  if (element.on && isFunction(element.on.render)) {
+    on.render(element.on.render, element, element.state)
+  }
+
+  return element
+}
+
+export default create