Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-viewer-react/noodl-viewer-react.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import NoodlRuntime from '@noodl/runtime';
+
+import registerPolyfills from './src/polyfills';
+import Viewer, { ssrSetupRuntime } from './src/viewer.jsx';
+
+registerPolyfills();
+
+function createArgs() {
+  // Support SSR
+  if (typeof window === 'undefined') {
+    return {
+      type: 'browser',
+      platform: {
+        requestUpdate: (callback) => setImmediate(callback),
+        getCurrentTime: () => 0,
+        objectToString: (o) => JSON.stringify(o, null, 2)
+      },
+      componentFilter: (c) => !c.name.startsWith('/#__cloud__/')
+    };
+  }
+
+  return {
+    type: 'browser',
+    platform: {
+      requestUpdate: (callback) => window.requestAnimationFrame(callback),
+      getCurrentTime: () => window.performance.now(),
+      objectToString: (o) => JSON.stringify(o, null, 2)
+    },
+    componentFilter: (c) => !c.name.startsWith('/#__cloud__/')
+  };
+}
+
+export { ssrSetupRuntime };
+
+export default {
+  render(element, noodlModules, { isLocal = false }) {
+    const runtimeArgs = createArgs();
+
+    if (isLocal) {
+      runtimeArgs.platform.isRunningLocally = () => true;
+    }
+
+    const noodlRuntime = new NoodlRuntime(runtimeArgs);
+
+    ReactDOM.render(React.createElement(Viewer, { noodlRuntime, noodlModules }, null), element);
+  },
+  renderDeployed(element, noodlModules, projectData) {
+    // React SSR adds a 'data-reactroot' attribute on the root element to be able to hydrate the app.
+    if (element.children.length > 0 && !!element.children[0].hasAttribute('data-reactroot')) {
+      ReactDOM.hydrate(this.createElement(noodlModules, projectData), element);
+    } else {
+      ReactDOM.render(this.createElement(noodlModules, projectData), element);
+    }
+  },
+  /** This can be called for server side rendering too. */
+  createElement(noodlModules, projectData) {
+    const noodlRuntime = new NoodlRuntime({
+      ...createArgs(),
+      runDeployed: true
+    });
+
+    return React.createElement(Viewer, { noodlRuntime, noodlModules, projectData }, null);
+  }
+};