Code formatting updates.
This commit is contained in:
@@ -11,12 +11,15 @@ const SayNow = ({ dateTime }) => {
|
||||
const App = () => {
|
||||
return ['div', { 'className': 'header' },
|
||||
[SayNow({ dateTime: new Date() }),
|
||||
['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
|
||||
['input',
|
||||
{ 'type': 'submit', 'disabled': 'disabled' },
|
||||
[]]
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
render(createElement(App()), document.getElementById('root'));
|
||||
render(createElement(App()),
|
||||
document.getElementById('root'));
|
||||
```
|
||||
|
||||
We are creating two components, that output JSM, as we defined it earlier. We create one component prop for the `SayNow` component: `dateTime`. It gets passed from the `App` component. The `SayNow` component prints out the `DateTime` passed in to it. You might notice that we are passing props the same way one does in the real React, and it just works!
|
||||
@@ -26,7 +29,8 @@ The next step is to call render multiple times.
|
||||
{format: "javascript"}
|
||||
```
|
||||
setInterval(() =>
|
||||
render(createElement(App()), document.getElementById('root')),
|
||||
render(createElement(App()),
|
||||
document.getElementById('root')),
|
||||
1000);
|
||||
```
|
||||
|
||||
|
||||
@@ -46,7 +46,8 @@ Here we begin by adding a global object that will store our last render tree, ke
|
||||
const renderTrees = {};
|
||||
function render(element, container) {
|
||||
const tree =
|
||||
render_internal(element, container, renderTrees[container]);
|
||||
render_internal(element, container,
|
||||
renderTrees[container]);
|
||||
// render complete, store the updated tree
|
||||
renderTrees[container] = tree;
|
||||
}
|
||||
@@ -72,9 +73,11 @@ function render_internal(element, container, prevElement) {
|
||||
domElement = createDOMElement(element);
|
||||
}
|
||||
setDOMProps(element, domElement, prevElement);
|
||||
children = renderChildren(element, domElement, prevElement);
|
||||
children =
|
||||
renderChildren(element, domElement, prevElement);
|
||||
|
||||
if (!prevElement || domElement !== prevElement.domElement) {
|
||||
if (!prevElement ||
|
||||
domElement !== prevElement.domElement) {
|
||||
container.appendChild(domElement);
|
||||
}
|
||||
|
||||
@@ -144,16 +147,19 @@ For rendering children we use two loops. The first loop removes any elements tha
|
||||
|
||||
{format: "javascript"}
|
||||
```
|
||||
function renderChildren(element, domElement, prevElement = { props: { children: [] }}) {
|
||||
function renderChildren(element, domElement,
|
||||
prevElement = { props: { children: [] }}) {
|
||||
const elementLen = element.props.children.length;
|
||||
const prevElementLen = prevElement.props.children.length;
|
||||
// remove now unused elements
|
||||
for (let i = elementLen; i < prevElementLen - elementLen; i++) {
|
||||
for (let i = elementLen; i < prevElementLen - elementLen;
|
||||
i++) {
|
||||
removeDOMElement(element.props.children[i]);
|
||||
}
|
||||
// render existing and new elements
|
||||
return element.props.children.map((child, i) => {
|
||||
const prevChild = i < prevElementLen ? prevElement.props.children[i] : undefined;
|
||||
const prevChild = i < prevElementLen ?
|
||||
prevElement.props.children[i] : undefined;
|
||||
return render_internal(child, domElement, prevChild);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user