Update parser & split safe zone

build/dev-server.js

@@ -27,7 +27,7 @@ const bundleWrite = (bundle) => {
 }
 
 const startWatch = () => {
-	watch('src', (filename) => {
+	watch('src', {recursive: true}, (evt, filename) => {
 		console.log('[RD]', 'File changed:', filename)
 		rollup({
 			entry,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ef.js",
-  "version": "0.3.4-beta.2",
+  "version": "0.3.4-beta.3",
   "description": "(maybe) An elegant HTML template engine & basic framework",
   "main": "dist/ef.min.js",
   "module": "src/ef.js",
@@ -29,7 +29,7 @@
     "browser-sync": "^2.18.13",
     "eslint": "^4.4.1",
     "node-watch": "^0.5.5",
-    "rollup": "^0.47.2",
+    "rollup": "^0.47.4",
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^8.1.0",
     "rollup-plugin-eslint": "^4.0.0",
@@ -41,6 +41,6 @@
     "shelljs": "^0.7.8"
   },
   "dependencies": {
-    "eft-parser": "^0.5.8"
+    "eft-parser": "^0.5.9"
   }
 }

src/lib/renderer.js

@@ -27,7 +27,7 @@ const update = function(newState) {
 }
 
 const destroy = function() {
-	const {$element, $avatar} = this
+	const {$element, __EFAVATAR__} = this
 	inform()
 	this.$umount()
 	for (let i in this) {
@@ -36,7 +36,7 @@ const destroy = function() {
 	}
 	queueDom(() => {
 		DOM.remove($element)
-		DOM.remove($avatar)
+		DOM.remove(__EFAVATAR__)
 	})
 	delete this.$element
 	delete this.$avatar
@@ -52,9 +52,6 @@ const destroy = function() {
 	return exec()
 }
 
-// All detatched components will be put in the safe zone zone
-const safeZone = document.createDocumentFragment()
-
 const state = class {
 	constructor (ast) {
 		const children = {}
@@ -70,6 +67,12 @@ const state = class {
 			key: null
 		}
 
+		/* Detatched components will be put in the safe zone
+		 * Split safe zone to each component
+		 * in order to make the component memory recycleable
+		 */
+		const safeZone = document.createDocumentFragment()
+
 		if (ENV !== 'production') nodeInfo.avatar = document.createComment('AVATAR OF COMPONENT')
 
 		const mount = () => {
@@ -88,7 +91,7 @@ const state = class {
 				},
 				configurable: true
 			},
-			$avatar: {
+			__EFAVATAR__: {
 				get() {
 					return nodeInfo.avatar
 				},