Run all JsComponent interactions asynchronously

Initialization, update and dispose of JsComponent
is now executed in the next event loop cycle - i.e.
after all other knockout components have been initialized.
The main reason for this is to NOT handle
exceptions from the JS component and avoid
crashing the entire page when one component fails to load.

src/Framework/Framework/Resources/Scripts/binding-handlers/js-component.ts

@@ -51,38 +51,48 @@ export default {
             const value0 = valueAccessor()
 
             let lastProps = getCurrentProps(value0)
-            var [module, componentF] = findComponent(value0.view, value0.name)
-            const component = componentF.create(
-                element,
-                lastProps,
-                value0.commands ?? {},
-                value0.templates ?? {},
-                setProps
-            )
+            let component: DotvvmJsComponent
+            // defer all operations with the component so that
+            // * exceptions don't break the whole page
+            // * exceptions normally break the debugger
+            //   knockout.js "handles" all exceptions, so you'd only get a console message and have to enable "break on all exceptions" in order to debug the component
+            // * we get the synchronous initialization done faster...
+            defer(() => {
+                const [module, componentF] = findComponent(value0.view, value0.name)
+                component = componentF.create(
+                    element,
+                    lastProps,
+                    value0.commands ?? {},
+                    value0.templates ?? {},
+                    setProps
+                )
+            })
 
             function update() {
                 const value = valueAccessor()
                 const currentProps = getCurrentProps(value)
 
-                const toUpdate: { [key: string]: any } = {}
-                for (const [n, v] of Object.entries(currentProps)) {
-                    if (lastProps[n] !== v) {
-                        toUpdate[n] = v
+                defer(() => {
+                    const toUpdate: { [key: string]: any } = {}
+                    for (const [n, v] of Object.entries(currentProps)) {
+                        if (lastProps[n] !== v) {
+                            toUpdate[n] = v
+                        }
+                    }
+                    if (keys(toUpdate).length > 0) {
+                        component?.updateProps(toUpdate)
                     }
-                }
-                if (keys(toUpdate).length > 0) {
-                    component.updateProps(toUpdate)
-                }
 
-                lastProps = currentProps
+                    lastProps = currentProps
+                })
             }
             newState.subscribe(update)
             // run update when something observable changes
             let updaterComputed = ko.computed(() => update())
             ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
                 updaterComputed.dispose()
-                component.dispose()
                 newState.unsubscribe(update)
+                defer(() => component?.dispose?.())
             })
 
             // No need to evaluate data-bind attributes inside the component

src/Framework/Framework/Resources/Scripts/binding-handlers/textbox-text.ts

@@ -30,7 +30,7 @@ export default {
                 }
                 metadata = (obs as any).dotvvmMetadata;
             }
-            setTimeout(() => {
+            defer(() => {
                 // remove element from collection when its removed from dom
                 ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
                     for (const meta of metadata) {
@@ -40,7 +40,7 @@ export default {
                         }
                     }
                 });
-            }, 0);
+            });
 
             const valueUpdateHandler = () => {
                 const obs = valueAccessor();

src/Framework/Framework/Resources/Scripts/postback/queue.ts

@@ -31,6 +31,6 @@ export function runNextInQueue(queueName: string) {
     const queue = getPostbackQueue(queueName);
     if (queue.queue.length > 0) {
         const callback = queue.queue.shift()!;
-        Promise.resolve().then(callback)
+        defer(callback)
     }
 }

src/Framework/Framework/Resources/Scripts/postback/updater.ts

@@ -41,7 +41,7 @@ export function restoreUpdatedControls(resultObject: any, updatedControls: any)
             } else {
                 updatedControl.parent.appendChild(element);
             }
-            Promise.resolve().then(() => ko.applyBindings(updatedControl.dataContext, element))
+            defer(() => ko.applyBindings(updatedControl.dataContext, element))
         }
     }
 }

src/Framework/Framework/Resources/Scripts/utils/promise.ts

@@ -0,0 +1,2 @@
+/** Runs the callback in the next event loop cycle */ 
+const defer: <T>(callback: () => T) => Promise<T> = Promise.resolve().then