-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(ivy): add feature principle doc
- Loading branch information
Showing
1 changed file
with
73 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
# Tree Shaking Principles | ||
|
||
When designing code please keep these principles in mind | ||
|
||
## Enums for features are not-tree-shakable | ||
|
||
Here is an example of code which is not tree shakable. | ||
|
||
``` | ||
export function query<T>( | ||
predicate: Type<any>| string[], descend?: boolean, | ||
read?: QueryReadType | Type<T>): QueryList<T> { | ||
ngDevMode && assertPreviousIsParent(); | ||
const queryList = new QueryList<T>(); | ||
const query = currentQuery || (currentQuery = new LQuery_()); | ||
query.track(queryList, predicate, descend, read); | ||
return queryList; | ||
} | ||
``` | ||
|
||
Notice that `query()` takes the `QueryReadType` as enumeration. | ||
|
||
``` | ||
function readFromNodeInjector( | ||
nodeInjector: LInjector, node: LNode, read: QueryReadType | Type<any>): any { | ||
if (read === QueryReadType.ElementRef) { | ||
return getOrCreateElementRef(nodeInjector); | ||
} | ||
if (read === QueryReadType.ViewContainerRef) { | ||
return getOrCreateContainerRef(nodeInjector); | ||
} | ||
if (read === QueryReadType.TemplateRef) { | ||
return getOrCreateTemplateRef(nodeInjector); | ||
} | ||
const matchingIdx = geIdxOfMatchingDirective(node, read); | ||
if (matchingIdx !== null) { | ||
return node.view.data[matchingIdx]; | ||
} | ||
return null; | ||
} | ||
``` | ||
|
||
Sometimes later in the above code the `readFromNodeInjector` takes the `QueryReadType` enumeration and performs specific behavior. | ||
|
||
The issue is that once the `query` instruction is pulled in it will pull in `ElementRef`, `ContainerRef`, and `TemplateRef` regardless if the `query` instruction queries for them. | ||
|
||
A better way to do this is to encapsulate the work into an object or function which will then be passed into the `query` instead of the enumeration. | ||
|
||
``` | ||
function queryElementRefFeature() {...} | ||
function queryContainerRefFeature() {...} | ||
function queryTemplateRefFeature() {...} | ||
query(predicate, descend, queryElementRefFeature) {...} | ||
``` | ||
|
||
this would allow the `readFromNodeInjector` to simply call the `read` function (or object) like so. | ||
|
||
``` | ||
function readFromNodeInjector( | ||
nodeInjector: LInjector, node: LNode, readFn: (injector: Injector) => any) | Type<any>): any { | ||
if (isFeature(readFn)) { | ||
return readFn(nodeInjector); | ||
} | ||
const matchingIdx = geIdxOfMatchingDirective(node, readFn); | ||
if (matchingIdx !== null) { | ||
return node.view.data[matchingIdx]; | ||
} | ||
return null; | ||
} | ||
``` | ||
|
||
This approach allows us to preserve the tree-shaking. In essence the if statement has moved from runtime (non-tree-shakable) to compile time (tree-shakable) position. |