Code formatting updates.
This commit is contained in:
@@ -501,7 +501,8 @@ tree, keyed by the ~container~.
|
||||
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;
|
||||
}
|
||||
@@ -538,9 +539,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);
|
||||
}
|
||||
|
||||
@@ -642,16 +645,19 @@ position is passed to ~render_internal~, or ~undefined~ if there is no
|
||||
corresponding element, like when the list of children has grown.
|
||||
|
||||
#+BEGIN_SRC 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);
|
||||
});
|
||||
}
|
||||
@@ -729,12 +735,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'));
|
||||
#+END_SRC
|
||||
|
||||
We are creating two components, that output JSM, as we defined it
|
||||
@@ -748,7 +757,8 @@ The next step is to call render multiple times.
|
||||
|
||||
#+BEGIN_SRC javascript
|
||||
setInterval(() =>
|
||||
render(createElement(App()), document.getElementById('root')),
|
||||
render(createElement(App()),
|
||||
document.getElementById('root')),
|
||||
1000);
|
||||
#+END_SRC
|
||||
|
||||
|
||||
Reference in New Issue
Block a user