Version bump

README.md

@@ -23,25 +23,33 @@ Community project(s):
 
 ## Usage
 ``` javascript
-import ef from 'ef.js'
+import { create, inform, exec, bundle, setParser, parseEft, t, version } from 'ef.js'
+// or you can use import * as ef from 'ef.js'
 
-ef.setParser(someparser) // Change the default parser for ef.js so you can use a different type of template
-ef.parseEft('Your awesome template') // Get ef.js ast using default parser
+version // Version string of ef.js
+
+setParser(someparser) // Change the default parser for ef.js so you can use a different type of template
+parseEft('Your awesome template') // Get ef.js ast using default parser
 
 const templateString = 'Your awesome template'
 const ast = [/* AST which supported by ef */]
 
 const data = {
-	$data: {/* Binding data */}
+	$data: {/* Binding data */},
 	$methods: {/* Binding methods */}
 }
 
-const template1 = new ef(template)
-const template2 = new ef(ast)
-const template3 = ef.t`Your awesome template`
+const template1 = create(template)
+const template2 = create(ast)
+const template3 = t`Your awesome template`
+
+const component1 = new template1() // Create a component without data
+const component2 = new template2(data) // Create a component and then updates it's data
 
-const component1 = template1.render() // Create a component without data
-const component2 = template2.render(data) // Create a component and then updates it's data
+inform() // Tell ef to cache operation **USE WITH CARE**
+exec() // Tell ef to execute all cached operations **USE WITH CARE**
+exec(true) // Force execute cached operations **USE WITH CARE**
+bundle(callback) // Wrapper for inform() and exec()
 
 component1.$element // The DOM element of component1
 component2.$element // The DOM element of component2
@@ -58,7 +66,7 @@ component1.$subscribe('info.data', logData) // Observe a value
 component1.$unsubscribe('info.data', logData) // Stop observing a value
 
 component1.$update(data) // Update the whole component state
-component2.$attached // Check if the component has mounted to something
+component2.$parent // Get where the component is mounted
 
 component1.$refs // Get all referenced nodes
 
@@ -67,6 +75,8 @@ component1.mountingPoint = null // Detach the mounted component
 
 component1.listMP.push(componet2) // Mount component2 to list 'listMP' mounting point on component1
 
+component1.$mount(...) // Mount method called by ef when trying to mount
+compinent1.$umount() // Unmount from parent
 component1.$destroy() // Destroy the component when not needed for more memory
 
 ```
@@ -93,8 +103,8 @@ this is a comment
 	content inside mustaches after '=' stands for the default value for this binding
 	content without mustaches stands for a static data
 	which means that you cannot modify them using ef.js
-	#class = {{class = some class name}}
-	#style = {{attr.style = background: #ECECEC}}
+	#class = {{class.some = some}} {{class.class = class}} {{class.name = name}}
+	#style = background: {{style.background = #ECECEC}};
 	#id = testdiv
 	#some-attr = some text
 	#content
@@ -118,7 +128,7 @@ this is a comment
 	'-' stands for standard mounting point
 	-node1
 	'.' after a tag name stands for class names for this tag
-	>p.some.class.names
+	>p.some.class.names.{{class.binded = binded}}
 		'#' at the end of a tag name stands for the reference name of the node
 		Mustaches after a dot will bind to 'class' automatically
 		>span.{{emergency = emergency}}#notice_box

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ef.js",
-  "version": "0.2.1-alpha.6",
+  "version": "0.3.0-alpha.1",
   "description": "(maybe) An elegant HTML template engine & basic framework",
   "main": "dist/ef.min.js",
   "module": "src/ef.js",
@@ -42,6 +42,6 @@
     "shelljs": "^0.7.5"
   },
   "dependencies": {
-    "eft-parser": "^0.5.5"
+    "eft-parser": "^0.5.6"
   }
 }

src/ef.js

@@ -11,51 +11,34 @@ import { version } from '../package.json'
 // Set parser
 let parser = eftParser
 
-// Construct the class
-const ef = class {
-	constructor(value) {
-		const valType = typeOf(value)
-		if (valType === 'string') value = parse(value, parser)
-		else if (valType !== 'array') throw new TypeError('Cannot create new component without proper template or AST!')
-
-		const ast = value
-		Object.defineProperty(this, 'render', {
-			value: (newState) => {
-				inform()
-				const result = new state(ast)
-				if (newState) result.$update(newState)
-				exec()
-				return result
-			}
-		})
-	}
-
-	static inform() {
-		return inform()
-	}
-
-	static exec(immediate) {
-		return exec(immediate)
-	}
-
-	static bundle(cb) {
-		inform()
-		return exec(cb(inform, exec))
-	}
-
-	static setPatser(newParser) {
-		parser = newParser
+const create = (value) => {
+	const valType = typeOf(value)
+	if (valType === 'string') value = parse(value, parser)
+	else if (valType !== 'array') throw new TypeError('Cannot create new component without proper template or AST!')
+
+	const ast = value
+	const _ef_ = class extends state {
+		constructor(newState) {
+			inform()
+			super(ast)
+			if (newState) this.$update(newState)
+			exec()
+		}
 	}
+	return _ef_
+}
 
-	static parseEft(template) {
-		return eftParser(template)
-	}
+const bundle = (cb) => {
+	inform()
+	return exec(cb(inform, exec))
+}
 
-	static t(...strs) {
-		return new ef(mixStr(...strs))
-	}
+const setParser = (newParser) => {
+	parser = newParser
 }
 
-export default ef
+const t = (...args) => create(mixStr(...args))
+
+export { create, inform, exec, bundle, setParser, eftParser as parseEft, t, version }
 
 info(`ef.js v${version} initialized!`)

src/lib/utils/render-query.js

@@ -1,4 +1,5 @@
 import ARR from './array-helper.js'
+import {info} from '../debug.js'
 
 const query = []
 const domQuery = []
@@ -16,10 +17,16 @@ const inform = () => {
 const exec = (immediate) => {
 	if (!immediate && (count -= 1) > 0) return count
 	count = 0
-	for (let i of ARR.unique(query)) i()
+	const renderQuery = ARR.unique(query)
+
+	if (ENV !== 'production') info(`${query.length} modification operations cached, ${renderQuery.length} executed.`)
+
+	for (let i of renderQuery) i()
 	ARR.empty(query)
 	if (domQuery.length > 0) {
-		for (let i of ARR.rightUnique(domQuery)) i()
+		const domRenderQuery = ARR.rightUnique(domQuery)
+		if (ENV !== 'production') info(`${domQuery.length} DOM operations cached, ${domRenderQuery.length} executed.`)
+		for (let i of domRenderQuery) i()
 		ARR.empty(domQuery)
 	}
 	return count

test/test.js

@@ -89,15 +89,15 @@ var data1 = {
 	}
 }
 
-var module1 = new ef(template)
-var module2 = new ef(template2)
+var module1 = ef.create(template)
+var module2 = ef.create(template2)
 
 ef.inform()
 
-var state = module1.render()
-var state2 = module1.render()
-var state3 = module2.render()
-var state4 = module2.render(data1)
+var state = new module1()
+var state2 = new module1()
+var state3 = new module2()
+var state4 = new module2(data1)
 
 state3.list1.push(state4)
 state2.branch = state3
@@ -148,7 +148,7 @@ state2.$methods.sendMsg = function (info) {
 	ef.inform()
 	var count = parseInt(info.state.$data.style)
 	var startTime = Date.now()
-	for (var i = 0; i < count; i++) states.push(module1.render())
+	for (var i = 0; i < count; i++) states.push(new module1())
 	state4.list1.push.apply(state4.list1, states)
 	ef.exec()
 	var endTime = Date.now()