kitchen-simulator 3.3.0 → 3.5.0

package/es/index.js

@@ -14,6 +14,8 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import LiteRenderer from "./LiteRenderer";
 import { createRoot } from 'react-dom/client';
+var ROOT_KEY = '__kitchenSimulatorRoot__';
+var API_KEY = '__kitchenSimulatorApi__';
 function nextFrame() {
   return new Promise(function (resolve) {
     return requestAnimationFrame(resolve);
@@ -164,6 +166,7 @@ function installGltfTracker() {
   }
   var subscribe = function subscribe(fn) {
     listeners.add(fn);
+    // IMPORTANT: emits synchronously
     fn(inFlight);
     return function () {
       return listeners["delete"](fn);
@@ -171,8 +174,8 @@ function installGltfTracker() {
   };
 
   /**
-   * Wait until GLTF network is idle (inFlight===0).
-   * Includes a grace window to catch loads that start slightly after the event.
+   * Wait until inFlight becomes 0 (with grace window).
+   * Safe even when already idle.
    */
   var waitForIdle = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
@@ -187,7 +190,7 @@ function installGltfTracker() {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
             _ref3 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref3$timeoutMs = _ref3.timeoutMs, timeoutMs = _ref3$timeoutMs === void 0 ? 30000 : _ref3$timeoutMs, _ref3$graceMs = _ref3.graceMs, graceMs = _ref3$graceMs === void 0 ? 50 : _ref3$graceMs;
-            start = Date.now(); // Grace: give async pipelines a chance to start requests
+            start = Date.now();
             if (!(graceMs > 0)) {
               _context3.next = 1;
               break;
@@ -196,17 +199,19 @@ function installGltfTracker() {
             return sleep(graceMs);
           case 1:
             return _context3.abrupt("return", new Promise(function (resolve, reject) {
-              var unsub = subscribe(function (count) {
+              var unsub = null;
+              var onChange = function onChange(count) {
                 if (count === 0) {
-                  unsub();
+                  if (unsub) unsub();
                   resolve(true);
                   return;
                 }
                 if (Date.now() - start > timeoutMs) {
-                  unsub();
+                  if (unsub) unsub();
                   reject(new Error('GLTF did not become idle within timeout'));
                 }
-              });
+              };
+              unsub = subscribe(onChange);
             }));
           case 2:
           case "end":
@@ -235,91 +240,168 @@ function installGltfTracker() {
   };
 }
 export function renderKitchenSimulator(container) {
-  var _props$framesPerEvent, _props$waitForGltfIdl, _props$gltfTimeoutMs, _props$gltfGraceMs;
+  var _props$framesPerEvent, _props$waitForGltfIdl, _props$gltfTimeoutMs, _props$gltfGraceMs, _props$syncGltfGraceM, _props$syncExtraFrame;
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var root = createRoot(container);
+  if (!container) throw new Error('renderKitchenSimulator: container is required');
+
+  // ✅ Reuse existing API for same container
+  if (container[API_KEY]) {
+    var _container$API_KEY$__, _container$API_KEY;
+    // update render with latest props (safe)
+    (_container$API_KEY$__ = (_container$API_KEY = container[API_KEY]).__render) === null || _container$API_KEY$__ === void 0 || _container$API_KEY$__.call(_container$API_KEY, props);
+    return container[API_KEY];
+  }
+
+  // ✅ Reuse root for same container
+  var root = container[ROOT_KEY];
+  if (!root) {
+    root = createRoot(container);
+    container[ROOT_KEY] = root;
+  }
   var setExternalEventFn = null;
-  var queue = [];
-  var pendingMarkers = new Set();
-  var draining = false;
   var destroyed = false;
-  var FRAMES_PER_EVENT = (_props$framesPerEvent = props.framesPerEvent) !== null && _props$framesPerEvent !== void 0 ? _props$framesPerEvent : 2;
 
-  // ✅ assume all events may load gltfs
-  var WAIT_FOR_GLTF_IDLE_AFTER_EACH_EVENT = (_props$waitForGltfIdl = props.waitForGltfIdleAfterEachEvent) !== null && _props$waitForGltfIdl !== void 0 ? _props$waitForGltfIdl : true;
-  var GLTF_TIMEOUT_MS = (_props$gltfTimeoutMs = props.gltfTimeoutMs) !== null && _props$gltfTimeoutMs !== void 0 ? _props$gltfTimeoutMs : 30000;
-  var GLTF_GRACE_MS = (_props$gltfGraceMs = props.gltfGraceMs) !== null && _props$gltfGraceMs !== void 0 ? _props$gltfGraceMs : 50;
+  // queue + marker handling
+  var queue = [];
+  var pendingMarkers = new Set();
+  var MARKER = Symbol('marker');
   var gltfTracker = installGltfTracker();
-  function drain() {
-    return _drain.apply(this, arguments);
+
+  // defaults
+  var defaultFramesPerEvent = (_props$framesPerEvent = props.framesPerEvent) !== null && _props$framesPerEvent !== void 0 ? _props$framesPerEvent : 2;
+  var waitForGltf = (_props$waitForGltfIdl = props.waitForGltfIdleAfterEachEvent) !== null && _props$waitForGltfIdl !== void 0 ? _props$waitForGltfIdl : true;
+  var defaultTimeout = (_props$gltfTimeoutMs = props.gltfTimeoutMs) !== null && _props$gltfTimeoutMs !== void 0 ? _props$gltfTimeoutMs : 30000;
+  var defaultGrace = (_props$gltfGraceMs = props.gltfGraceMs) !== null && _props$gltfGraceMs !== void 0 ? _props$gltfGraceMs : 50;
+  var syncGrace = (_props$syncGltfGraceM = props.syncGltfGraceMs) !== null && _props$syncGltfGraceM !== void 0 ? _props$syncGltfGraceM : 250; // SyncScene uses larger grace
+  var syncExtraFrames = (_props$syncExtraFrame = props.syncExtraFrames) !== null && _props$syncExtraFrame !== void 0 ? _props$syncExtraFrame : 2;
+  var draining = false;
+  function isSyncScene(ev) {
+    var _ev$payload;
+    return (ev === null || ev === void 0 ? void 0 : ev.type) === 'EXTERNAL_EVENT_SYNC_SCENE' || (ev === null || ev === void 0 || (_ev$payload = ev.payload) === null || _ev$payload === void 0 ? void 0 : _ev$payload.mode) === 'sync-scene' ||
+    // if you pass mode sometimes
+    (ev === null || ev === void 0 ? void 0 : ev.__sync) === true;
   }
-  function _drain() {
-    _drain = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-      var _setExternalEventFn, ev, i, _ev$gltfTimeoutMs, _ev$gltfGraceMs;
+  function settle(_x) {
+    return _settle.apply(this, arguments);
+  }
+  function _settle() {
+    _settle = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(ev) {
+      var _ev$framesPerEvent, _ev$gltfGraceMs, _ev$gltfTimeoutMs;
+      var frames, i, graceMs, timeoutMs, _i;
       return _regeneratorRuntime.wrap(function (_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            if (!(draining || destroyed)) {
-              _context5.next = 1;
-              break;
-            }
-            return _context5.abrupt("return");
+            frames = (_ev$framesPerEvent = ev === null || ev === void 0 ? void 0 : ev.framesPerEvent) !== null && _ev$framesPerEvent !== void 0 ? _ev$framesPerEvent : defaultFramesPerEvent; // 1) allow React + reducers to run
+            i = 0;
           case 1:
-            draining = true;
-            _context5.prev = 2;
-          case 3:
-            if (!(queue.length && !destroyed)) {
-              _context5.next = 10;
+            if (!(i < frames)) {
+              _context5.next = 3;
               break;
             }
-            ev = queue.shift(); // skip internal markers
-            if (!(ev && ev.__batchMarker)) {
+            _context5.next = 2;
+            return nextFrame();
+          case 2:
+            i += 1;
+            _context5.next = 1;
+            break;
+          case 3:
+            if (waitForGltf) {
               _context5.next = 4;
               break;
             }
-            pendingMarkers["delete"](ev.__batchMarker);
-            return _context5.abrupt("continue", 3);
+            return _context5.abrupt("return");
           case 4:
-            (_setExternalEventFn = setExternalEventFn) === null || _setExternalEventFn === void 0 || _setExternalEventFn(ev);
-
-            // baseline spacing for react + legacy lifecycle
-            i = 0;
+            // 2) wait for gltf idle
+            graceMs = isSyncScene(ev) ? syncGrace : (_ev$gltfGraceMs = ev === null || ev === void 0 ? void 0 : ev.gltfGraceMs) !== null && _ev$gltfGraceMs !== void 0 ? _ev$gltfGraceMs : defaultGrace;
+            timeoutMs = (_ev$gltfTimeoutMs = ev === null || ev === void 0 ? void 0 : ev.gltfTimeoutMs) !== null && _ev$gltfTimeoutMs !== void 0 ? _ev$gltfTimeoutMs : defaultTimeout;
+            _context5.next = 5;
+            return gltfTracker.waitForIdle({
+              graceMs: graceMs,
+              timeoutMs: timeoutMs
+            });
           case 5:
-            if (!(i < FRAMES_PER_EVENT)) {
-              _context5.next = 7;
-              break;
-            }
             _context5.next = 6;
             return nextFrame();
           case 6:
-            i += 1;
-            _context5.next = 5;
-            break;
+            if (!isSyncScene(ev)) {
+              _context5.next = 9;
+              break;
+            }
+            _i = 0;
           case 7:
-            if (!WAIT_FOR_GLTF_IDLE_AFTER_EACH_EVENT) {
+            if (!(_i < syncExtraFrames)) {
               _context5.next = 9;
               break;
             }
             _context5.next = 8;
-            return gltfTracker.waitForIdle({
-              timeoutMs: (_ev$gltfTimeoutMs = ev === null || ev === void 0 ? void 0 : ev.gltfTimeoutMs) !== null && _ev$gltfTimeoutMs !== void 0 ? _ev$gltfTimeoutMs : GLTF_TIMEOUT_MS,
-              graceMs: (_ev$gltfGraceMs = ev === null || ev === void 0 ? void 0 : ev.gltfGraceMs) !== null && _ev$gltfGraceMs !== void 0 ? _ev$gltfGraceMs : GLTF_GRACE_MS
-            });
-          case 8:
-            _context5.next = 9;
             return nextFrame();
+          case 8:
+            _i += 1;
+            _context5.next = 7;
+            break;
           case 9:
-            _context5.next = 3;
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return _settle.apply(this, arguments);
+  }
+  function drain() {
+    return _drain.apply(this, arguments);
+  }
+  function _drain() {
+    _drain = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+      var item;
+      return _regeneratorRuntime.wrap(function (_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            if (!(draining || destroyed)) {
+              _context6.next = 1;
+              break;
+            }
+            return _context6.abrupt("return");
+          case 1:
+            draining = true;
+            _context6.prev = 2;
+          case 3:
+            if (!(queue.length && !destroyed)) {
+              _context6.next = 8;
+              break;
+            }
+            item = queue.shift(); // marker?
+            if (!(item && item.__marker === MARKER)) {
+              _context6.next = 4;
+              break;
+            }
+            pendingMarkers["delete"](item.token);
+            return _context6.abrupt("continue", 3);
+          case 4:
+            if (setExternalEventFn) {
+              _context6.next = 6;
+              break;
+            }
+            _context6.next = 5;
+            return nextFrame();
+          case 5:
+            queue.unshift(item); // put back and retry
+            return _context6.abrupt("continue", 3);
+          case 6:
+            setExternalEventFn(item);
+            _context6.next = 7;
+            return settle(item);
+          case 7:
+            _context6.next = 3;
             break;
-          case 10:
-            _context5.prev = 10;
+          case 8:
+            _context6.prev = 8;
             draining = false;
-            return _context5.finish(10);
-          case 11:
+            return _context6.finish(8);
+          case 9:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
-      }, _callee5, null, [[2,, 10, 11]]);
+      }, _callee6, null, [[2,, 8, 9]]);
     }));
     return _drain.apply(this, arguments);
   }
@@ -331,16 +413,27 @@ export function renderKitchenSimulator(container) {
       _this2.state = {
         externalEvent: p.externalEvent || null
       };
-      setExternalEventFn = _this2.setExternalEvent.bind(_this2);
+      _this2._mounted = false;
       return _this2;
     }
     _inherits(Wrapper, _React$Component);
     return _createClass(Wrapper, [{
-      key: "setExternalEvent",
-      value: function setExternalEvent(newEvent) {
-        this.setState({
-          externalEvent: newEvent
-        });
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var _this3 = this;
+        this._mounted = true;
+        setExternalEventFn = function setExternalEventFn(newEvent) {
+          if (!_this3._mounted) return;
+          _this3.setState({
+            externalEvent: newEvent
+          });
+        };
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this._mounted = false;
+        setExternalEventFn = null;
       }
     }, {
       key: "render",
@@ -351,8 +444,15 @@ export function renderKitchenSimulator(container) {
       }
     }]);
   }(React.Component);
-  root.render(/*#__PURE__*/React.createElement(Wrapper, props));
-  return {
+  var api = {
+    // internal: rerender wrapper with latest props if host calls renderKitchenSimulator again
+    __render: function __render(nextProps) {
+      root.render(/*#__PURE__*/React.createElement(Wrapper, nextProps));
+    },
+    /**
+     * Send one or many events (in order).
+     * Resolves when this batch has been delivered + settled.
+     */
     sendExternalEvents: function sendExternalEvents(eventOrEvents) {
       var events = Array.isArray(eventOrEvents) ? eventOrEvents : [eventOrEvents];
       var _iterator2 = _createForOfIteratorHelper(events),
@@ -362,8 +462,6 @@ export function renderKitchenSimulator(container) {
           var e = _step2.value;
           queue.push(e);
         }
-
-        // marker for this batch
       } catch (err) {
         _iterator2.e(err);
       } finally {
@@ -372,7 +470,8 @@ export function renderKitchenSimulator(container) {
       var token = Symbol('batch');
       pendingMarkers.add(token);
       queue.push({
-        __batchMarker: token
+        __marker: MARKER,
+        token: token
       });
       drain();
       return new Promise(function (resolve) {
@@ -411,20 +510,28 @@ export function renderKitchenSimulator(container) {
         check();
       });
     },
-    updateExternalEvent: function updateExternalEvent(newExternalEvent) {
-      return this.sendExternalEvents(newExternalEvent);
+    updateExternalEvent: function updateExternalEvent(e) {
+      return api.sendExternalEvents(e);
     },
     clearQueue: function clearQueue() {
       queue.length = 0;
       pendingMarkers.clear();
     },
     unmount: function unmount() {
-      var _this$clearQueue;
       destroyed = true;
-      (_this$clearQueue = this.clearQueue) === null || _this$clearQueue === void 0 || _this$clearQueue.call(this);
+      api.clearQueue();
       gltfTracker.uninstall();
       root.unmount();
+      container[ROOT_KEY] = null;
+      container[API_KEY] = null;
     }
   };
+
+  // first render
+  api.__render(props);
+
+  // store api on container so repeated calls reuse it
+  container[API_KEY] = api;
+  return api;
 }
 export default renderKitchenSimulator;

package/lib/index.js

@@ -22,6 +22,8 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var ROOT_KEY = '__kitchenSimulatorRoot__';
+var API_KEY = '__kitchenSimulatorApi__';
 function nextFrame() {
   return new Promise(function (resolve) {
     return requestAnimationFrame(resolve);
@@ -172,6 +174,7 @@ function installGltfTracker() {
   }
   var subscribe = function subscribe(fn) {
     listeners.add(fn);
+    // IMPORTANT: emits synchronously
     fn(inFlight);
     return function () {
       return listeners["delete"](fn);
@@ -179,8 +182,8 @@ function installGltfTracker() {
   };
 
   /**
-   * Wait until GLTF network is idle (inFlight===0).
-   * Includes a grace window to catch loads that start slightly after the event.
+   * Wait until inFlight becomes 0 (with grace window).
+   * Safe even when already idle.
    */
   var waitForIdle = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
@@ -195,7 +198,7 @@ function installGltfTracker() {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
             _ref3 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref3$timeoutMs = _ref3.timeoutMs, timeoutMs = _ref3$timeoutMs === void 0 ? 30000 : _ref3$timeoutMs, _ref3$graceMs = _ref3.graceMs, graceMs = _ref3$graceMs === void 0 ? 50 : _ref3$graceMs;
-            start = Date.now(); // Grace: give async pipelines a chance to start requests
+            start = Date.now();
             if (!(graceMs > 0)) {
               _context3.next = 1;
               break;
@@ -204,17 +207,19 @@ function installGltfTracker() {
             return sleep(graceMs);
           case 1:
             return _context3.abrupt("return", new Promise(function (resolve, reject) {
-              var unsub = subscribe(function (count) {
+              var unsub = null;
+              var onChange = function onChange(count) {
                 if (count === 0) {
-                  unsub();
+                  if (unsub) unsub();
                   resolve(true);
                   return;
                 }
                 if (Date.now() - start > timeoutMs) {
-                  unsub();
+                  if (unsub) unsub();
                   reject(new Error('GLTF did not become idle within timeout'));
                 }
-              });
+              };
+              unsub = subscribe(onChange);
             }));
           case 2:
           case "end":
@@ -243,91 +248,168 @@ function installGltfTracker() {
   };
 }
 function renderKitchenSimulator(container) {
-  var _props$framesPerEvent, _props$waitForGltfIdl, _props$gltfTimeoutMs, _props$gltfGraceMs;
+  var _props$framesPerEvent, _props$waitForGltfIdl, _props$gltfTimeoutMs, _props$gltfGraceMs, _props$syncGltfGraceM, _props$syncExtraFrame;
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var root = (0, _client.createRoot)(container);
+  if (!container) throw new Error('renderKitchenSimulator: container is required');
+
+  // ✅ Reuse existing API for same container
+  if (container[API_KEY]) {
+    var _container$API_KEY$__, _container$API_KEY;
+    // update render with latest props (safe)
+    (_container$API_KEY$__ = (_container$API_KEY = container[API_KEY]).__render) === null || _container$API_KEY$__ === void 0 || _container$API_KEY$__.call(_container$API_KEY, props);
+    return container[API_KEY];
+  }
+
+  // ✅ Reuse root for same container
+  var root = container[ROOT_KEY];
+  if (!root) {
+    root = (0, _client.createRoot)(container);
+    container[ROOT_KEY] = root;
+  }
   var setExternalEventFn = null;
-  var queue = [];
-  var pendingMarkers = new Set();
-  var draining = false;
   var destroyed = false;
-  var FRAMES_PER_EVENT = (_props$framesPerEvent = props.framesPerEvent) !== null && _props$framesPerEvent !== void 0 ? _props$framesPerEvent : 2;
 
-  // ✅ assume all events may load gltfs
-  var WAIT_FOR_GLTF_IDLE_AFTER_EACH_EVENT = (_props$waitForGltfIdl = props.waitForGltfIdleAfterEachEvent) !== null && _props$waitForGltfIdl !== void 0 ? _props$waitForGltfIdl : true;
-  var GLTF_TIMEOUT_MS = (_props$gltfTimeoutMs = props.gltfTimeoutMs) !== null && _props$gltfTimeoutMs !== void 0 ? _props$gltfTimeoutMs : 30000;
-  var GLTF_GRACE_MS = (_props$gltfGraceMs = props.gltfGraceMs) !== null && _props$gltfGraceMs !== void 0 ? _props$gltfGraceMs : 50;
+  // queue + marker handling
+  var queue = [];
+  var pendingMarkers = new Set();
+  var MARKER = Symbol('marker');
   var gltfTracker = installGltfTracker();
-  function drain() {
-    return _drain.apply(this, arguments);
+
+  // defaults
+  var defaultFramesPerEvent = (_props$framesPerEvent = props.framesPerEvent) !== null && _props$framesPerEvent !== void 0 ? _props$framesPerEvent : 2;
+  var waitForGltf = (_props$waitForGltfIdl = props.waitForGltfIdleAfterEachEvent) !== null && _props$waitForGltfIdl !== void 0 ? _props$waitForGltfIdl : true;
+  var defaultTimeout = (_props$gltfTimeoutMs = props.gltfTimeoutMs) !== null && _props$gltfTimeoutMs !== void 0 ? _props$gltfTimeoutMs : 30000;
+  var defaultGrace = (_props$gltfGraceMs = props.gltfGraceMs) !== null && _props$gltfGraceMs !== void 0 ? _props$gltfGraceMs : 50;
+  var syncGrace = (_props$syncGltfGraceM = props.syncGltfGraceMs) !== null && _props$syncGltfGraceM !== void 0 ? _props$syncGltfGraceM : 250; // SyncScene uses larger grace
+  var syncExtraFrames = (_props$syncExtraFrame = props.syncExtraFrames) !== null && _props$syncExtraFrame !== void 0 ? _props$syncExtraFrame : 2;
+  var draining = false;
+  function isSyncScene(ev) {
+    var _ev$payload;
+    return (ev === null || ev === void 0 ? void 0 : ev.type) === 'EXTERNAL_EVENT_SYNC_SCENE' || (ev === null || ev === void 0 || (_ev$payload = ev.payload) === null || _ev$payload === void 0 ? void 0 : _ev$payload.mode) === 'sync-scene' ||
+    // if you pass mode sometimes
+    (ev === null || ev === void 0 ? void 0 : ev.__sync) === true;
   }
-  function _drain() {
-    _drain = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-      var _setExternalEventFn, ev, i, _ev$gltfTimeoutMs, _ev$gltfGraceMs;
+  function settle(_x) {
+    return _settle.apply(this, arguments);
+  }
+  function _settle() {
+    _settle = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(ev) {
+      var _ev$framesPerEvent, _ev$gltfGraceMs, _ev$gltfTimeoutMs;
+      var frames, i, graceMs, timeoutMs, _i;
       return _regenerator["default"].wrap(function (_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            if (!(draining || destroyed)) {
-              _context5.next = 1;
-              break;
-            }
-            return _context5.abrupt("return");
+            frames = (_ev$framesPerEvent = ev === null || ev === void 0 ? void 0 : ev.framesPerEvent) !== null && _ev$framesPerEvent !== void 0 ? _ev$framesPerEvent : defaultFramesPerEvent; // 1) allow React + reducers to run
+            i = 0;
           case 1:
-            draining = true;
-            _context5.prev = 2;
-          case 3:
-            if (!(queue.length && !destroyed)) {
-              _context5.next = 10;
+            if (!(i < frames)) {
+              _context5.next = 3;
               break;
             }
-            ev = queue.shift(); // skip internal markers
-            if (!(ev && ev.__batchMarker)) {
+            _context5.next = 2;
+            return nextFrame();
+          case 2:
+            i += 1;
+            _context5.next = 1;
+            break;
+          case 3:
+            if (waitForGltf) {
               _context5.next = 4;
               break;
             }
-            pendingMarkers["delete"](ev.__batchMarker);
-            return _context5.abrupt("continue", 3);
+            return _context5.abrupt("return");
           case 4:
-            (_setExternalEventFn = setExternalEventFn) === null || _setExternalEventFn === void 0 || _setExternalEventFn(ev);
-
-            // baseline spacing for react + legacy lifecycle
-            i = 0;
+            // 2) wait for gltf idle
+            graceMs = isSyncScene(ev) ? syncGrace : (_ev$gltfGraceMs = ev === null || ev === void 0 ? void 0 : ev.gltfGraceMs) !== null && _ev$gltfGraceMs !== void 0 ? _ev$gltfGraceMs : defaultGrace;
+            timeoutMs = (_ev$gltfTimeoutMs = ev === null || ev === void 0 ? void 0 : ev.gltfTimeoutMs) !== null && _ev$gltfTimeoutMs !== void 0 ? _ev$gltfTimeoutMs : defaultTimeout;
+            _context5.next = 5;
+            return gltfTracker.waitForIdle({
+              graceMs: graceMs,
+              timeoutMs: timeoutMs
+            });
           case 5:
-            if (!(i < FRAMES_PER_EVENT)) {
-              _context5.next = 7;
-              break;
-            }
             _context5.next = 6;
             return nextFrame();
           case 6:
-            i += 1;
-            _context5.next = 5;
-            break;
+            if (!isSyncScene(ev)) {
+              _context5.next = 9;
+              break;
+            }
+            _i = 0;
           case 7:
-            if (!WAIT_FOR_GLTF_IDLE_AFTER_EACH_EVENT) {
+            if (!(_i < syncExtraFrames)) {
               _context5.next = 9;
               break;
             }
             _context5.next = 8;
-            return gltfTracker.waitForIdle({
-              timeoutMs: (_ev$gltfTimeoutMs = ev === null || ev === void 0 ? void 0 : ev.gltfTimeoutMs) !== null && _ev$gltfTimeoutMs !== void 0 ? _ev$gltfTimeoutMs : GLTF_TIMEOUT_MS,
-              graceMs: (_ev$gltfGraceMs = ev === null || ev === void 0 ? void 0 : ev.gltfGraceMs) !== null && _ev$gltfGraceMs !== void 0 ? _ev$gltfGraceMs : GLTF_GRACE_MS
-            });
-          case 8:
-            _context5.next = 9;
             return nextFrame();
+          case 8:
+            _i += 1;
+            _context5.next = 7;
+            break;
           case 9:
-            _context5.next = 3;
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return _settle.apply(this, arguments);
+  }
+  function drain() {
+    return _drain.apply(this, arguments);
+  }
+  function _drain() {
+    _drain = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+      var item;
+      return _regenerator["default"].wrap(function (_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            if (!(draining || destroyed)) {
+              _context6.next = 1;
+              break;
+            }
+            return _context6.abrupt("return");
+          case 1:
+            draining = true;
+            _context6.prev = 2;
+          case 3:
+            if (!(queue.length && !destroyed)) {
+              _context6.next = 8;
+              break;
+            }
+            item = queue.shift(); // marker?
+            if (!(item && item.__marker === MARKER)) {
+              _context6.next = 4;
+              break;
+            }
+            pendingMarkers["delete"](item.token);
+            return _context6.abrupt("continue", 3);
+          case 4:
+            if (setExternalEventFn) {
+              _context6.next = 6;
+              break;
+            }
+            _context6.next = 5;
+            return nextFrame();
+          case 5:
+            queue.unshift(item); // put back and retry
+            return _context6.abrupt("continue", 3);
+          case 6:
+            setExternalEventFn(item);
+            _context6.next = 7;
+            return settle(item);
+          case 7:
+            _context6.next = 3;
             break;
-          case 10:
-            _context5.prev = 10;
+          case 8:
+            _context6.prev = 8;
             draining = false;
-            return _context5.finish(10);
-          case 11:
+            return _context6.finish(8);
+          case 9:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
-      }, _callee5, null, [[2,, 10, 11]]);
+      }, _callee6, null, [[2,, 8, 9]]);
     }));
     return _drain.apply(this, arguments);
   }
@@ -339,16 +421,27 @@ function renderKitchenSimulator(container) {
       _this2.state = {
         externalEvent: p.externalEvent || null
       };
-      setExternalEventFn = _this2.setExternalEvent.bind(_this2);
+      _this2._mounted = false;
       return _this2;
     }
     (0, _inherits2["default"])(Wrapper, _React$Component);
     return (0, _createClass2["default"])(Wrapper, [{
-      key: "setExternalEvent",
-      value: function setExternalEvent(newEvent) {
-        this.setState({
-          externalEvent: newEvent
-        });
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var _this3 = this;
+        this._mounted = true;
+        setExternalEventFn = function setExternalEventFn(newEvent) {
+          if (!_this3._mounted) return;
+          _this3.setState({
+            externalEvent: newEvent
+          });
+        };
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this._mounted = false;
+        setExternalEventFn = null;
       }
     }, {
       key: "render",
@@ -359,8 +452,15 @@ function renderKitchenSimulator(container) {
       }
     }]);
   }(_react["default"].Component);
-  root.render(/*#__PURE__*/_react["default"].createElement(Wrapper, props));
-  return {
+  var api = {
+    // internal: rerender wrapper with latest props if host calls renderKitchenSimulator again
+    __render: function __render(nextProps) {
+      root.render(/*#__PURE__*/_react["default"].createElement(Wrapper, nextProps));
+    },
+    /**
+     * Send one or many events (in order).
+     * Resolves when this batch has been delivered + settled.
+     */
     sendExternalEvents: function sendExternalEvents(eventOrEvents) {
       var events = Array.isArray(eventOrEvents) ? eventOrEvents : [eventOrEvents];
       var _iterator2 = _createForOfIteratorHelper(events),
@@ -370,8 +470,6 @@ function renderKitchenSimulator(container) {
           var e = _step2.value;
           queue.push(e);
         }
-
-        // marker for this batch
       } catch (err) {
         _iterator2.e(err);
       } finally {
@@ -380,7 +478,8 @@ function renderKitchenSimulator(container) {
       var token = Symbol('batch');
       pendingMarkers.add(token);
       queue.push({
-        __batchMarker: token
+        __marker: MARKER,
+        token: token
       });
       drain();
       return new Promise(function (resolve) {
@@ -419,20 +518,28 @@ function renderKitchenSimulator(container) {
         check();
       });
     },
-    updateExternalEvent: function updateExternalEvent(newExternalEvent) {
-      return this.sendExternalEvents(newExternalEvent);
+    updateExternalEvent: function updateExternalEvent(e) {
+      return api.sendExternalEvents(e);
     },
     clearQueue: function clearQueue() {
       queue.length = 0;
       pendingMarkers.clear();
     },
     unmount: function unmount() {
-      var _this$clearQueue;
       destroyed = true;
-      (_this$clearQueue = this.clearQueue) === null || _this$clearQueue === void 0 || _this$clearQueue.call(this);
+      api.clearQueue();
       gltfTracker.uninstall();
       root.unmount();
+      container[ROOT_KEY] = null;
+      container[API_KEY] = null;
     }
   };
+
+  // first render
+  api.__render(props);
+
+  // store api on container so repeated calls reuse it
+  container[API_KEY] = api;
+  return api;
 }
 var _default = exports["default"] = renderKitchenSimulator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",