- HTML Parser
- Reactive System
- Component Tree
-
✅ html parser.
- Html syntax validation.
-
directives.
-
✅ {{}}
-
✅ v-bind
-
✅ v-if
thought
: parse child template identified byv-if
to be appended as child by its parent node if value ofv-if
expression istrue
, otherwise remove this child.
-
✅ v-for
-
thought
: It's the same withv-if
, parsing child template with for loop over along with collecting all directives inside of it. -
how to append nodes generated by
v-for
?the way of appending nodes generated by
v-for
changes to insert before its sibling node and replace the original node as a placeholder with last generated node.
-
-
✅ v-on
Actually Vue simply use the native dom event system, without creating its own. Another thing should be pointed out here is that the event machanism as functions
$emit
,$on
on components differs with the one mentioned before, which actually is communication between components, however React doesn't need it. React utilize state lifting or callback function passing down as props to do so. But both are for the same purpose of communication between components.In addtion, correspondingly React might build its own event system based on virtual dom without the native unlike Vue. Later I will validate this point.
-
( cancel) v-model
v-model
is the combination ofv-bind
andv-on
on functionality, so don't consider to implement it, instead involve kind of custom directive in to leave it outside for extension
-
-
✅ data observer.
As to how to finalize data observer, I think changing each simple value of path recurvely with a object which contains the sub-path data and a watcher list used to collect all dom updates related to that data. Thus, while that sub-path data has been changed somehow, excuting all dom updates from watcher list in set function which is defined by
Object.defineProperty
.progress
:-
complete a simple observe function which create observer for each field of data, even nested. Support array's function like
push
,unshift
to trigger the reactive, meaning watcher list will be executed iteratively while change happends on array. -
test completely on Array's navtive functions like
pop
,push
,unshift
,reverse
and so forth.
-
-
make directive reactive to data chage.
- ✅ make dom updates of mustache direactive
{{}}
when data change. - ✅ make dom updates of directive
v-bind
when data change. - ✅ make dom updates of directive
v-if
when data change. - ✅ make dom updates of directive
v-for
when data change. - ✅ implement
track-by
directive forv-for
to obtain better performance when working on Array.
- ✅ make dom updates of mustache direactive
-
component tree.
- ✅ refactor render function as well as test related to make it supported to render component.
- ✅ complete coding on creation of component tree.
- ✅ complete basic implementation of hooks involving
useData
,useMethod
,useEvents
,useComponents
as a base. - ✅ implementation of props.
- ✅ pub-sub pattern implementation working on communication between components.
- ✅ lifecycle functions of component.
- ✅ when unmount components, unsubscribe event bound to avoid risk of memory leak.
- ✅ when unmount components, all descendant components exectute unmount lifecycle function.
- tests
- ✅ propogation of events happends on component tree.
- ✅ validate event trigger.
- ✅ unsubscribe dom events.
- ✅ destruture components subtree and unmount lifecycle function executes.
-
slot
- ✅ regular slot
- ✅ named slot
-
✅ update as a batch.
- ✅ Don't allow exsiting spaces between tags.
- ✅ Tags like <br /> couldn't be parsed yet.
- ✅ >, < should not be considered as a tag or end of tag while in between quotes or test.
- ✅ filter attributes to get ones without in relation to VUE to directly set in the target node.
- (cancel) For both
v-if
and mustache braces, there is js expression support left on its value. - ✅ executed twice on the reactive registration of v-if in v-if test.
-
When debug tests in Jest, error shows in the termial like
node_modules\jest\node_modules\jest-cli\build\cli\index.js:227 } catch {
This issue is caused by the conflict between local installation of node and nvm. through removing local installation and setting default version of node in nvm as greater than 9.11.2, it's fixed. Because node version less than 9.11.2 doesn't offer handling the catch block of jest file.
refer to
-
Remove items in array loop-over. refer to
Looping through array and removing items, without breaking for loop
How to Loop Through Array and Remove Items Without Breaking the For Loop
-
how to dispatch an event programmatically?
-
bubble and capture phase in an event lifecycle.
-
Detecting support for a given javascript event?
-
what's the microtasks and macrotasks?
Event loop: microtasks and macrotasks
[What are micro tasks and macro tasks in the event loop?] (https://medium.com/globant/what-are-micro-tasks-and-macro-tasks-in-the-event-loop-29bc0abdd445)
-
what's the memory leak in javascript? How to escape from memory leaks in Javascript
take notes of questions I encountered in this program.
-
How to deal with placeholder node for
v-if
? -
How to deal with placeholder node for
v-for
? -
How to keep track of directives in
v-if
andv-for
block? -
How to implement an observer pattern based on
Object.definePropery
? -
How to implement
track-by
to improve the performace ofv-for
directive? -
Is creation of component tree necessary? and how to create it?
From my perspective, it's necessary to create a component tree that helps finding out all children components to unmount them with invoking their lifecycle function. As how to create it, we can identify component node in template and render it to concatenate with parent component ref as a child ref in parsing phase, end up with getting the root element ref and unsubscription array. Then inserting that root elemment ref into DOM tree, meanwhile storing them into the component instance.
-
Are directives able to work in the component node?
-
Do I need to collect all DOM updates as a batch for performance while data changes?
-
Whether I have to use a class to create component, Could I use a function simply?
Class
actually is a contructor function which creates an object in heap and initialize it. There are totally two duties, one is creating an object, another is initialization of it. So can we manually create an object, then using a normal function to initialze it? but how can we access that object created? React uses hooks to sort out this problem, therefore I think we can do the same as react by adopting hooks. hooks is based on JS closure by its own.In terms of programming language, once function can be returned inside of another function, closure mechaism is inevitable to be included into that language, because as long as the ref to that function hasn't died, then its context couldn't be recycled.
A developer opts to write function only through hooks, this programming style is exactly what I prefer.
-
how to implement slots?
Before rendering child component found in parent's template, wrap the block inside child component tags and compile it as a child template. then take compilation result as a parameter to render child component. In this process, using the compilation result of child template to replace the position
slot
resides.