From b4a4067dbf64b8eb676e6e87713901921ba58b9c Mon Sep 17 00:00:00 2001 From: Yukino Song Date: Tue, 2 May 2017 04:03:35 +0800 Subject: [PATCH] Version bump --- README.md | 36 ++++++++++++------- package.json | 4 +-- src/ef.js | 65 +++++++++++++---------------------- src/lib/utils/render-query.js | 11 ++++-- test/test.js | 14 ++++---- 5 files changed, 65 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index 0bc3bd8..5dd26a3 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 3144a4d..2db12d3 100644 --- a/package.json +++ b/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" } } diff --git a/src/ef.js b/src/ef.js index 8c4ae86..ab0f977 100644 --- a/src/ef.js +++ b/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!`) diff --git a/src/lib/utils/render-query.js b/src/lib/utils/render-query.js index 76f94b9..523b776 100644 --- a/src/lib/utils/render-query.js +++ b/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 diff --git a/test/test.js b/test/test.js index e309230..0e9a35b 100644 --- a/test/test.js +++ b/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()