Initial Move from Azure DevOps to GitHub

src/Bindings/BindingHandlersRegisterer.ts

@@ -0,0 +1,26 @@
+import * as ko from "knockout";
+import * as ReactBindingHandler from "./ReactBindingHandler";
+
+interface RestorePoint {
+  readonly element: JQuery;
+  readonly width: number;
+}
+
+export class BindingHandlersRegisterer {
+  public static registerBindingHandlers() {
+    ko.bindingHandlers.setTemplateReady = {
+      init(
+        element: any,
+        wrappedValueAccessor: () => any,
+        allBindings?: ko.AllBindings,
+        viewModel?: any,
+        bindingContext?: ko.BindingContext
+      ) {
+        const value = ko.unwrap(wrappedValueAccessor());
+        bindingContext.$data.isTemplateReady(value);
+      }
+    } as ko.BindingHandler;
+
+    ReactBindingHandler.Registerer.register();
+  }
+}

src/Bindings/ReactBindingHandler.ts

@@ -0,0 +1,48 @@
+/**
+ * Custom binding to make it easy to insert a React component.
+ * Mounts the react component and renders when needed.
+ *
+ * Usage:
+ * 1) Implement ReactAdapter:
+ *  parameters: pass any parameters including Knockout Observable's.
+ *  render(): render your ReactComponent here.
+ *
+ * 2) In the markup, add this:
+ * <div data-bind="react:myAdapter"></div>
+ */
+import * as ko from "knockout";
+import * as ReactDOM from "react-dom";
+
+export interface ReactAdapter {
+  parameters: any;
+  renderComponent: () => JSX.Element;
+  setElement?: (elt: Element) => void;
+}
+
+export class Registerer {
+  public static register(): void {
+    ko.bindingHandlers.react = {
+      init: (
+        element: any,
+        wrappedValueAccessor: () => any,
+        allBindings?: ko.AllBindings,
+        viewModel?: any,
+        bindingContext?: ko.BindingContext
+      ) => {
+        const adapter: ReactAdapter = wrappedValueAccessor();
+
+        if (adapter.setElement) {
+          adapter.setElement(element);
+        }
+
+        // If any of the ko observable change inside parameters, trigger a new render.
+        ko.computed(() => ko.toJSON(adapter.parameters)).subscribe(() =>
+          ReactDOM.render(adapter.renderComponent(), element)
+        );
+
+        // Initial rendering at mount point
+        ReactDOM.render(adapter.renderComponent(), element);
+      }
+    } as ko.BindingHandler;
+  }
+}