@remote-ui/core - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

build/cjs/component.js

@@ -1,10 +0,9 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createRemoteComponent = createRemoteComponent;
+Object.defineProperty(exports, '__esModule', { value: true });
 
 function createRemoteComponent(componentType) {
   return componentType;
-}
+}
+
+exports.createRemoteComponent = createRemoteComponent;

build/cjs/index.js

@@ -1,113 +0,43 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "retain", {
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var rpc = require('@remote-ui/rpc');
+var component = require('./component.js');
+var types = require('./types.js');
+var root = require('./root.js');
+var receiver = require('./receiver.js');
+var utilities = require('./utilities.js');
+
+
+
+Object.defineProperty(exports, 'release', {
   enumerable: true,
-  get: function get() {
-    return _rpc.retain;
+  get: function () {
+    return rpc.release;
   }
 });
-Object.defineProperty(exports, "release", {
+Object.defineProperty(exports, 'retain', {
   enumerable: true,
-  get: function get() {
-    return _rpc.release;
+  get: function () {
+    return rpc.retain;
   }
 });
-Object.defineProperty(exports, "createRemoteComponent", {
-  enumerable: true,
-  get: function get() {
-    return _component.createRemoteComponent;
-  }
-});
-Object.defineProperty(exports, "ACTION_MOUNT", {
-  enumerable: true,
-  get: function get() {
-    return _types.ACTION_MOUNT;
-  }
-});
-Object.defineProperty(exports, "ACTION_INSERT_CHILD", {
-  enumerable: true,
-  get: function get() {
-    return _types.ACTION_INSERT_CHILD;
-  }
-});
-Object.defineProperty(exports, "ACTION_REMOVE_CHILD", {
-  enumerable: true,
-  get: function get() {
-    return _types.ACTION_REMOVE_CHILD;
-  }
-});
-Object.defineProperty(exports, "ACTION_UPDATE_PROPS", {
-  enumerable: true,
-  get: function get() {
-    return _types.ACTION_UPDATE_PROPS;
-  }
-});
-Object.defineProperty(exports, "ACTION_UPDATE_TEXT", {
-  enumerable: true,
-  get: function get() {
-    return _types.ACTION_UPDATE_TEXT;
-  }
-});
-Object.defineProperty(exports, "KIND_ROOT", {
-  enumerable: true,
-  get: function get() {
-    return _types.KIND_ROOT;
-  }
-});
-Object.defineProperty(exports, "KIND_COMPONENT", {
-  enumerable: true,
-  get: function get() {
-    return _types.KIND_COMPONENT;
-  }
-});
-Object.defineProperty(exports, "KIND_TEXT", {
-  enumerable: true,
-  get: function get() {
-    return _types.KIND_TEXT;
-  }
-});
-Object.defineProperty(exports, "createRemoteRoot", {
-  enumerable: true,
-  get: function get() {
-    return _root.createRemoteRoot;
-  }
-});
-Object.defineProperty(exports, "createRemoteReceiver", {
-  enumerable: true,
-  get: function get() {
-    return _receiver.createRemoteReceiver;
-  }
-});
-Object.defineProperty(exports, "createRemoteChannel", {
-  enumerable: true,
-  get: function get() {
-    return _receiver.createRemoteChannel;
-  }
-});
-Object.defineProperty(exports, "isRemoteComponent", {
-  enumerable: true,
-  get: function get() {
-    return _utilities.isRemoteComponent;
-  }
-});
-Object.defineProperty(exports, "isRemoteText", {
-  enumerable: true,
-  get: function get() {
-    return _utilities.isRemoteText;
-  }
-});
-
-var _rpc = require("@remote-ui/rpc");
-
-var _component = require("./component");
-
-var _types = require("./types");
-
-var _root = require("./root");
-
-var _receiver = require("./receiver");
-
-var _utilities = require("./utilities");
+exports.createRemoteComponent = component.createRemoteComponent;
+exports.ACTION_INSERT_CHILD = types.ACTION_INSERT_CHILD;
+exports.ACTION_MOUNT = types.ACTION_MOUNT;
+exports.ACTION_REMOVE_CHILD = types.ACTION_REMOVE_CHILD;
+exports.ACTION_UPDATE_PROPS = types.ACTION_UPDATE_PROPS;
+exports.ACTION_UPDATE_TEXT = types.ACTION_UPDATE_TEXT;
+exports.KIND_COMPONENT = types.KIND_COMPONENT;
+exports.KIND_FRAGMENT = types.KIND_FRAGMENT;
+exports.KIND_ROOT = types.KIND_ROOT;
+exports.KIND_TEXT = types.KIND_TEXT;
+exports.createRemoteRoot = root.createRemoteRoot;
+exports.createRemoteChannel = receiver.createRemoteChannel;
+exports.createRemoteReceiver = receiver.createRemoteReceiver;
+exports.isRemoteFragmentSerialization = receiver.isRemoteFragmentSerialization;
+exports.isRemoteReceiverAttachableFragment = receiver.isRemoteReceiverAttachableFragment;
+exports.isRemoteComponent = utilities.isRemoteComponent;
+exports.isRemoteFragment = utilities.isRemoteFragment;
+exports.isRemoteText = utilities.isRemoteText;

build/cjs/receiver.js

@@ -1,45 +0,11 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createRemoteChannel = createRemoteChannel;
-exports.createRemoteReceiver = createRemoteReceiver;
-exports.ROOT_ID = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rpc = require("@remote-ui/rpc");
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var rpc = require('@remote-ui/rpc');
+var types = require('./types.js');
+var utilities = require('./utilities.js');
 
-var _types = require("./types");
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 var ROOT_ID = Symbol('RootId');
-exports.ROOT_ID = ROOT_ID;
-
 function createRemoteChannel(_ref) {
@@ -51,3 +17,3 @@ var mount = _ref.mount,
       updateText = _ref.updateText;
-  var messageMap = new Map([[_types.ACTION_MOUNT, mount], [_types.ACTION_REMOVE_CHILD, removeChild], [_types.ACTION_INSERT_CHILD, insertChild], [_types.ACTION_UPDATE_PROPS, updateProps], [_types.ACTION_UPDATE_TEXT, updateText]]);
+  var messageMap = new Map([[types.ACTION_MOUNT, mount], [types.ACTION_REMOVE_CHILD, removeChild], [types.ACTION_INSERT_CHILD, insertChild], [types.ACTION_UPDATE_PROPS, updateProps], [types.ACTION_UPDATE_TEXT, updateText]]);
   return function (type) {
@@ -61,3 +27,2 @@ for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
 }
-
 function createRemoteReceiver() {
@@ -78,3 +43,5 @@ var queuedUpdates = new Set();
       var root = attachedNodes.get(ROOT_ID);
-      var normalizedChildren = children.map(addVersion);
+      var normalizedChildren = children.map(function (child) {
+        return normalizeNode(child, addVersion);
+      });
       root.version += 1;
@@ -84,3 +51,3 @@ root.children = normalizedChildren;
 
-      var _iterator = _createForOfIteratorHelper(normalizedChildren),
+      var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(normalizedChildren),
           _step;
@@ -91,3 +58,3 @@
           var child = _step.value;
-          (0, _rpc.retain)(child);
+          rpc.retain(child);
           attach(child);
@@ -107,6 +74,6 @@ } // eslint-disable-next-line promise/catch-or-return
     insertChild: function insertChild(id, index, child) {
-      var normalizedChild = addVersion(child);
-      (0, _rpc.retain)(normalizedChild);
+      var attached = attachedNodes.get(id !== null && id !== void 0 ? id : ROOT_ID);
+      var normalizedChild = normalizeNode(child, addVersion);
+      rpc.retain(normalizedChild);
       attach(normalizedChild);
-      var attached = attachedNodes.get(id !== null && id !== void 0 ? id : ROOT_ID);
       var children = attached.children;
@@ -128,3 +95,3 @@
       var _children$splice = children.splice(index, 1),
-          _children$splice2 = _slicedToArray(_children$splice, 1),
+          _children$splice2 = _rollupPluginBabelHelpers.slicedToArray(_children$splice, 1),
           removed = _children$splice2[0];
@@ -136,3 +103,3 @@
       enqueueUpdate(attached).then(function () {
-        (0, _rpc.release)(removed);
+        rpc.release(removed);
       });
@@ -143,5 +110,18 @@ },
 
-      var oldProps = _objectSpread({}, component.props);
+      var oldProps = _rollupPluginBabelHelpers.objectSpread2({}, component.props);
 
-      (0, _rpc.retain)(newProps);
+      rpc.retain(newProps);
+      Object.keys(newProps).forEach(function (key) {
+        var newProp = newProps[key];
+        var oldProp = oldProps[key];
+
+        if (isRemoteReceiverAttachableFragment(oldProp)) {
+          detach(oldProp);
+        }
+
+        if (isRemoteFragmentSerialization(newProp)) {
+          var attachableNewProp = addVersion(newProp);
+          attach(attachableNewProp);
+        }
+      });
       Object.assign(component.props, newProps);
@@ -151,5 +131,5 @@ component.version += 1; // eslint-disable-next-line promise/catch-or-return
       enqueueUpdate(component).then(function () {
-        for (var _i2 = 0, _Object$keys = Object.keys(newProps); _i2 < _Object$keys.length; _i2++) {
-          var key = _Object$keys[_i2];
-          (0, _rpc.release)(oldProps[key]);
+        for (var _i = 0, _Object$keys = Object.keys(newProps); _i < _Object$keys.length; _i++) {
+          var key = _Object$keys[_i];
+          rpc.release(oldProps[key]);
         }
@@ -193,6 +173,6 @@ });
           if (subscribers) {
-            subscribers["delete"](subscriber);
+            subscribers.delete(subscriber);
 
             if (subscribers.size === 0) {
-              attachmentSubscribers["delete"](id);
+              attachmentSubscribers.delete(id);
             }
@@ -217,6 +197,6 @@ }
         if (listenersForEvent) {
-          listenersForEvent["delete"](listener);
+          listenersForEvent.delete(listener);
 
           if (listenersForEvent.size === 0) {
-            listeners["delete"](event);
+            listeners.delete(event);
           }
@@ -238,3 +218,3 @@ }
     if (listenersForEvent) {
-      var _iterator2 = _createForOfIteratorHelper(listenersForEvent),
+      var _iterator2 = _rollupPluginBabelHelpers.createForOfIteratorHelper(listenersForEvent),
           _step2;
@@ -260,3 +240,3 @@
       setTimeout(function () {
-        var attachedToUpdate = _toConsumableArray(queuedUpdates);
+        var attachedToUpdate = _rollupPluginBabelHelpers.toConsumableArray(queuedUpdates);
 
@@ -266,3 +246,3 @@ timeout = null;
 
-        var _iterator3 = _createForOfIteratorHelper(attachedToUpdate),
+        var _iterator3 = _rollupPluginBabelHelpers.createForOfIteratorHelper(attachedToUpdate),
             _step3;
@@ -276,3 +256,3 @@
             if (subscribers) {
-              var _iterator4 = _createForOfIteratorHelper(subscribers),
+              var _iterator4 = _rollupPluginBabelHelpers.createForOfIteratorHelper(subscribers),
                   _step4;
@@ -309,4 +289,15 @@
 
+    if (child.kind === types.KIND_COMPONENT && 'props' in child) {
+      var _ref5 = child,
+          _ref5$props = _ref5.props,
+          props = _ref5$props === void 0 ? {} : _ref5$props;
+      Object.keys(props).forEach(function (key) {
+        var prop = props[key];
+        if (!isRemoteReceiverAttachableFragment(prop)) return;
+        attach(prop);
+      });
+    }
+
     if ('children' in child) {
-      var _iterator5 = _createForOfIteratorHelper(child.children),
+      var _iterator5 = _rollupPluginBabelHelpers.createForOfIteratorHelper(child.children),
           _step5;
@@ -328,6 +319,17 @@
   function detach(child) {
-    attachedNodes["delete"](child.id);
+    attachedNodes.delete(child.id);
 
+    if (child.kind === types.KIND_COMPONENT && 'props' in child) {
+      var _ref6 = child,
+          _ref6$props = _ref6.props,
+          props = _ref6$props === void 0 ? {} : _ref6$props;
+      Object.keys(props).forEach(function (key) {
+        var prop = props[key];
+        if (!isRemoteReceiverAttachableFragment(prop)) return;
+        detach(prop);
+      });
+    }
+
     if ('children' in child) {
-      var _iterator6 = _createForOfIteratorHelper(child.children),
+      var _iterator6 = _rollupPluginBabelHelpers.createForOfIteratorHelper(child.children),
           _step6;
@@ -352,2 +354,37 @@
   return value;
-}
+}
+
+function normalizeNode(node, normalizer) {
+  if (node.kind === types.KIND_FRAGMENT || node.kind === types.KIND_COMPONENT) {
+    node.children.forEach(function (child) {
+      return normalizeNode(child, normalizer);
+    });
+  }
+
+  if (node.kind === types.KIND_COMPONENT && 'props' in node) {
+    var _ref7 = node,
+        props = _ref7.props;
+
+    for (var _i2 = 0, _Object$keys2 = Object.keys(props); _i2 < _Object$keys2.length; _i2++) {
+      var key = _Object$keys2[_i2];
+      var prop = props[key];
+      if (!isRemoteFragmentSerialization(prop)) continue;
+      props[key] = normalizeNode(prop, normalizer);
+    }
+  }
+
+  return normalizer(node);
+}
+
+function isRemoteFragmentSerialization(object) {
+  return utilities.isRemoteFragment(object) && 'id' in object && 'children' in object;
+}
+function isRemoteReceiverAttachableFragment(object) {
+  return isRemoteFragmentSerialization(object) && 'version' in object;
+}
+
+exports.ROOT_ID = ROOT_ID;
+exports.createRemoteChannel = createRemoteChannel;
+exports.createRemoteReceiver = createRemoteReceiver;
+exports.isRemoteFragmentSerialization = isRemoteFragmentSerialization;
+exports.isRemoteReceiverAttachableFragment = isRemoteReceiverAttachableFragment;

build/cjs/root.js

@@ -1,44 +0,12 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createRemoteRoot = createRemoteRoot;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _types = require("./types");
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var types = require('./types.js');
+var utilities = require('./utilities.js');
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 var FUNCTION_CURRENT_IMPLEMENTATION_KEY = '__current';
 var EMPTY_OBJECT = {};
 var EMPTY_ARRAY = [];
-
 function createRemoteRoot(channel) {
@@ -62,3 +30,3 @@ var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
   var remoteRoot = {
-    kind: _types.KIND_ROOT,
+    kind: types.KIND_ROOT,
     options: strict ? Object.freeze({
@@ -104,3 +72,3 @@ strict: strict,
           if (_key2 === 'children') continue;
-          normalizedInternalProps[_key2] = makeValueHotSwappable(initialProps[_key2]);
+          normalizedInternalProps[_key2] = makeValueHotSwappable(serializeProp(initialProps[_key2]));
         }
@@ -111,3 +79,3 @@ }
         if (Array.isArray(initialChildren)) {
-          var _iterator = _createForOfIteratorHelper(initialChildren),
+          var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(initialChildren),
               _step;
@@ -131,3 +99,3 @@
 
-          var _iterator2 = _createForOfIteratorHelper(moreChildren),
+          var _iterator2 = _rollupPluginBabelHelpers.createForOfIteratorHelper(moreChildren),
               _step2;
@@ -155,4 +123,4 @@
 
-      var component = _objectSpread({
-        kind: _types.KIND_COMPONENT,
+      var component = _rollupPluginBabelHelpers.objectSpread2({
+        kind: types.KIND_COMPONENT,
 
@@ -181,3 +149,3 @@ get children() {
         insertChildBefore: function insertChildBefore(child, before) {
-          return _insertChildBefore(component, child, before, internals, rootInternals);
+          return _insertChildBefore(component, normalizeChild(child, remoteRoot), before, internals, rootInternals);
         }
@@ -195,3 +163,3 @@ }, EMPTY_OBJECT);
 
-      var _iterator3 = _createForOfIteratorHelper(internals.children),
+      var _iterator3 = _rollupPluginBabelHelpers.createForOfIteratorHelper(internals.children),
           _step3;
@@ -202,3 +170,3 @@
           var _child2 = _step3.value;
-          moveChildToContainer(component, _child2, rootInternals);
+          moveNodeToContainer(component, _child2, rootInternals);
         }
@@ -220,4 +188,4 @@ } catch (err) {
 
-      var text = _objectSpread({
-        kind: _types.KIND_TEXT,
+      var text = _rollupPluginBabelHelpers.objectSpread2({
+        kind: types.KIND_TEXT,
 
@@ -237,2 +205,30 @@ get text() {
     },
+    createFragment: function createFragment() {
+      var id = "".concat(currentId++);
+      var internals = {
+        children: strict ? Object.freeze([]) : []
+      };
+
+      var fragment = _rollupPluginBabelHelpers.objectSpread2({
+        kind: types.KIND_FRAGMENT,
+
+        get children() {
+          return internals.children;
+        },
+
+        appendChild: function appendChild(child) {
+          return _appendChild(fragment, normalizeChild(child, remoteRoot), internals, rootInternals);
+        },
+        removeChild: function removeChild(child) {
+          return _removeChild(fragment, child, internals, rootInternals);
+        },
+        insertChildBefore: function insertChildBefore(child, before) {
+          return _insertChildBefore(fragment, normalizeChild(child, remoteRoot), before, internals, rootInternals);
+        }
+      }, EMPTY_OBJECT);
+
+      makePartOfTree(fragment, rootInternals);
+      makeRemote(fragment, id, remoteRoot);
+      return fragment;
+    },
     appendChild: function appendChild(child) {
@@ -245,3 +241,3 @@ return _appendChild(remoteRoot, normalizeChild(child, remoteRoot), rootInternals, rootInternals);
     insertChildBefore: function insertChildBefore(child, before) {
-      return _insertChildBefore(remoteRoot, child, before, rootInternals, rootInternals);
+      return _insertChildBefore(remoteRoot, normalizeChild(child, remoteRoot), before, rootInternals, rootInternals);
     },
@@ -251,3 +247,3 @@ mount: function mount() {
       rootInternals.mounted = true;
-      return Promise.resolve(channel(_types.ACTION_MOUNT, rootInternals.children.map(serialize)));
+      return Promise.resolve(channel(types.ACTION_MOUNT, rootInternals.children.map(serializeChild)));
     }
@@ -262,3 +258,3 @@ };
   var tops = _ref2.tops;
-  return ((_tops$get = tops.get(element)) === null || _tops$get === void 0 ? void 0 : _tops$get.kind) === _types.KIND_ROOT;
+  return ((_tops$get = tops.get(element)) === null || _tops$get === void 0 ? void 0 : _tops$get.kind) === types.KIND_ROOT;
 }
@@ -269,3 +265,3 @@
     if ('children' in element) {
-      var _iterator4 = _createForOfIteratorHelper(element.children),
+      var _iterator4 = _rollupPluginBabelHelpers.createForOfIteratorHelper(element.children),
           _step4;
@@ -296,3 +292,3 @@
 
-  if (mounted && (element.kind === _types.KIND_ROOT || connected(element, rootInternals))) {
+  if (mounted && (element.kind === types.KIND_ROOT || connected(element, rootInternals))) {
     // should only create context once async queue is cleared
@@ -318,3 +314,3 @@ remote(channel); // technically, we should be waiting for the remote update to apply,
     remote: function remote(channel) {
-      return channel(_types.ACTION_UPDATE_TEXT, text.id, newText);
+      return channel(types.ACTION_UPDATE_TEXT, text.id, newText);
     },
@@ -331,3 +327,4 @@ local: function local() {
   var strict = rootInternals.strict;
-  var currentProps = internals.internalProps;
+  var currentProps = internals.internalProps,
+      currentExternalProps = internals.externalProps;
   var normalizedNewProps = {};
@@ -341,6 +338,8 @@ var hotSwapFunctions = [];
     if (_key3 === 'children') continue;
+    var currentExternalValue = currentExternalProps[_key3];
+    var newExternalValue = newProps[_key3];
     var currentValue = currentProps[_key3];
-    var newValue = newProps[_key3]; // Bail out if we have equal, primitive types
+    var newValue = serializeProp(newExternalValue); // Bail out if we have equal, primitive types
 
-    if (currentValue === newValue && (newValue == null || _typeof(newValue) !== 'object')) {
+    if (currentValue === newValue && (newValue == null || _rollupPluginBabelHelpers['typeof'](newValue) !== 'object')) {
       continue;
@@ -350,3 +349,3 @@ }
     var _tryHotSwappingValues = tryHotSwappingValues(currentValue, newValue),
-        _tryHotSwappingValues2 = _slicedToArray(_tryHotSwappingValues, 2),
+        _tryHotSwappingValues2 = _rollupPluginBabelHelpers.slicedToArray(_tryHotSwappingValues, 2),
         value = _tryHotSwappingValues2[0],
@@ -356,3 +355,3 @@ hotSwaps = _tryHotSwappingValues2[1];
     if (hotSwaps) {
-      hotSwapFunctions.push.apply(hotSwapFunctions, _toConsumableArray(hotSwaps));
+      hotSwapFunctions.push.apply(hotSwapFunctions, _rollupPluginBabelHelpers.toConsumableArray(hotSwaps));
     }
@@ -363,2 +362,10 @@
     normalizedNewProps[_key3] = value;
+
+    if (utilities.isRemoteFragment(currentExternalValue)) {
+      removeNodeFromContainer(currentExternalValue, rootInternals);
+    }
+
+    if (utilities.isRemoteFragment(newExternalValue)) {
+      moveNodeToContainer(component, newExternalValue, rootInternals);
+    }
   }
@@ -369,12 +376,12 @@
       if (hasRemoteChange) {
-        channel(_types.ACTION_UPDATE_PROPS, component.id, normalizedNewProps);
+        channel(types.ACTION_UPDATE_PROPS, component.id, normalizedNewProps);
       }
     },
     local: function local() {
-      var mergedExternalProps = _objectSpread(_objectSpread({}, internals.externalProps), newProps);
+      var mergedExternalProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, currentExternalProps), newProps);
 
       internals.externalProps = strict ? Object.freeze(mergedExternalProps) : mergedExternalProps;
-      internals.internalProps = _objectSpread(_objectSpread({}, internals.internalProps), normalizedNewProps);
+      internals.internalProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, internals.internalProps), normalizedNewProps);
 
-      var _iterator5 = _createForOfIteratorHelper(hotSwapFunctions),
+      var _iterator5 = _rollupPluginBabelHelpers.createForOfIteratorHelper(hotSwapFunctions),
           _step5;
@@ -384,3 +391,3 @@
         for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var _step5$value = _slicedToArray(_step5.value, 2),
+          var _step5$value = _rollupPluginBabelHelpers.slicedToArray(_step5.value, 2),
               hotSwappable = _step5$value[0],
@@ -474,3 +481,3 @@ _newValue = _step5$value[1];
 
-  if (_typeof(currentValue) === 'object' && currentValue != null) {
+  if (_rollupPluginBabelHelpers['typeof'](currentValue) === 'object' && currentValue != null && !utilities.isRemoteFragment(currentValue)) {
     return tryHotSwappingObjectValues(currentValue, newValue);
@@ -483,2 +490,6 @@ }
 function makeValueHotSwappable(value) {
+  if (utilities.isRemoteFragment(value)) {
+    return value;
+  }
+
   if (typeof value === 'function') {
@@ -498,3 +509,3 @@ var wrappedFunction = function wrappedFunction() {
     return value.map(makeValueHotSwappable);
-  } else if (_typeof(value) === 'object' && value != null) {
+  } else if (_rollupPluginBabelHelpers['typeof'](value) === 'object' && value != null) {
     return Object.keys(value).reduce(function (newValue, key) {
@@ -515,8 +526,8 @@ newValue[key] = makeValueHotSwappable(value[key]);
       var nested = collectNestedHotSwappableValues(element);
-      return nested ? [].concat(_toConsumableArray(all), _toConsumableArray(nested)) : all;
+      return nested ? [].concat(_rollupPluginBabelHelpers.toConsumableArray(all), _rollupPluginBabelHelpers.toConsumableArray(nested)) : all;
     }, []);
-  } else if (_typeof(value) === 'object' && value != null) {
+  } else if (_rollupPluginBabelHelpers['typeof'](value) === 'object' && value != null) {
     return Object.keys(value).reduce(function (all, key) {
       var nested = collectNestedHotSwappableValues(value[key]);
-      return nested ? [].concat(_toConsumableArray(all), _toConsumableArray(nested)) : all;
+      return nested ? [].concat(_rollupPluginBabelHelpers.toConsumableArray(all), _rollupPluginBabelHelpers.toConsumableArray(nested)) : all;
     }, []);
@@ -536,7 +547,7 @@ }
     remote: function remote(channel) {
-      return channel(_types.ACTION_INSERT_CHILD, container.id, container.children.length, serialize(child));
+      return channel(types.ACTION_INSERT_CHILD, container.id, container.children.length, serializeChild(child));
     },
     local: function local() {
-      moveChildToContainer(container, child, rootInternals);
-      var mergedChildren = [].concat(_toConsumableArray(internals.children), [child]);
+      moveNodeToContainer(container, child, rootInternals);
+      var mergedChildren = [].concat(_rollupPluginBabelHelpers.toConsumableArray(internals.children), [child]);
       internals.children = strict ? Object.freeze(mergedChildren) : mergedChildren;
@@ -557,20 +568,12 @@ }
 function _removeChild(container, child, internals, rootInternals) {
-  var strict = rootInternals.strict,
-      tops = rootInternals.tops,
-      parents = rootInternals.parents;
+  var strict = rootInternals.strict;
   return perform(container, rootInternals, {
     remote: function remote(channel) {
-      return channel(_types.ACTION_REMOVE_CHILD, container.id, container.children.indexOf(child));
+      return channel(types.ACTION_REMOVE_CHILD, container.id, container.children.indexOf(child));
     },
     local: function local() {
-      parents["delete"](child);
+      removeNodeFromContainer(child, rootInternals);
 
-      if (child.kind === _types.KIND_COMPONENT) {
-        allDescendants(child, function (descendant) {
-          return tops.set(descendant, child);
-        });
-      }
+      var newChildren = _rollupPluginBabelHelpers.toConsumableArray(internals.children);
 
-      var newChildren = _toConsumableArray(internals.children);
-
       newChildren.splice(newChildren.indexOf(child), 1);
@@ -592,8 +595,8 @@ internals.children = strict ? Object.freeze(newChildren) : newChildren;
     remote: function remote(channel) {
-      return channel(_types.ACTION_INSERT_CHILD, container.id, container.children.indexOf(before), serialize(child));
+      return channel(types.ACTION_INSERT_CHILD, container.id, container.children.indexOf(before), serializeChild(child));
     },
     local: function local() {
-      moveChildToContainer(container, child, rootInternals);
+      moveNodeToContainer(container, child, rootInternals);
 
-      var newChildren = _toConsumableArray(internals.children);
+      var newChildren = _rollupPluginBabelHelpers.toConsumableArray(internals.children);
 
@@ -610,17 +613,53 @@ newChildren.splice(newChildren.indexOf(before), 0, child);
 
-function moveChildToContainer(container, child, _ref4) {
-  var tops = _ref4.tops,
-      parents = _ref4.parents;
-  var newTop = container.kind === _types.KIND_ROOT ? container : tops.get(container);
-  tops.set(child, newTop);
-  parents.set(child, container);
-  allDescendants(child, function (descendant) {
-    return tops.set(descendant, newTop);
+function moveNodeToContainer(container, node, rootInternals) {
+  var tops = rootInternals.tops,
+      parents = rootInternals.parents;
+  var newTop = container.kind === types.KIND_ROOT ? container : tops.get(container);
+  tops.set(node, newTop);
+  parents.set(node, container);
+  moveFragmentToContainer(node, rootInternals);
+  allDescendants(node, function (descendant) {
+    tops.set(descendant, newTop);
+    moveFragmentToContainer(descendant, rootInternals);
   });
 }
 
-function makePartOfTree(node, _ref5) {
-  var parents = _ref5.parents,
-      tops = _ref5.tops,
-      nodes = _ref5.nodes;
+function moveFragmentToContainer(node, rootInternals) {
+  if (node.kind !== types.KIND_COMPONENT) return;
+  var props = node.props;
+  if (!props) return;
+  Object.values(props).forEach(function (prop) {
+    if (!utilities.isRemoteFragment(prop)) return;
+    moveNodeToContainer(node, prop, rootInternals);
+  });
+}
+
+function removeNodeFromContainer(node, rootInternals) {
+  var tops = rootInternals.tops,
+      parents = rootInternals.parents;
+  tops.delete(node);
+  parents.delete(node);
+  allDescendants(node, function (descendant) {
+    tops.delete(descendant);
+    removeFragmentFromContainer(descendant, rootInternals);
+  });
+  removeFragmentFromContainer(node, rootInternals);
+}
+
+function removeFragmentFromContainer(node, rootInternals) {
+  if (node.kind !== types.KIND_COMPONENT) return;
+  var props = node.remoteProps;
+
+  for (var _i3 = 0, _Object$keys3 = Object.keys(props !== null && props !== void 0 ? props : {}); _i3 < _Object$keys3.length; _i3++) {
+    var _key4 = _Object$keys3[_i3];
+    var prop = props[_key4];
+    if (!utilities.isRemoteFragment(prop)) continue;
+    removeNodeFromContainer(prop, rootInternals);
+  }
+}
+
+function makePartOfTree(node, _ref4) {
+  var parents = _ref4.parents,
+      tops = _ref4.tops,
+      nodes = _ref4.nodes;
   nodes.add(node);
@@ -643,4 +682,4 @@ Object.defineProperty(node, 'parent', {
 
-function serialize(value) {
-  return value.kind === _types.KIND_TEXT ? {
+function serializeChild(value) {
+  return value.kind === types.KIND_TEXT ? {
     id: value.id,
@@ -655,3 +694,3 @@ kind: value.kind,
     children: value.children.map(function (child) {
-      return serialize(child);
+      return serializeChild(child);
     })
@@ -661,2 +700,24 @@ };
 
+function serializeProp(prop) {
+  if (utilities.isRemoteFragment(prop)) {
+    return serializeFragment(prop);
+  }
+
+  return prop;
+}
+
+function serializeFragment(value) {
+  return {
+    id: value.id,
+    kind: value.kind,
+
+    get children() {
+      return value.children.map(function (child) {
+        return serializeChild(child);
+      });
+    }
+
+  };
+}
+
 function makeRemote(value, id, root) {
@@ -678,3 +739,3 @@ Object.defineProperty(value, 'id', {
 function tryHotSwappingObjectValues(currentValue, newValue) {
-  if (_typeof(newValue) !== 'object' || newValue == null) {
+  if (_rollupPluginBabelHelpers['typeof'](newValue) !== 'object' || newValue == null) {
     var _collectNestedHotSwap;
@@ -691,6 +752,6 @@
 
-  for (var _key4 in currentValue) {
-    var currentObjectValue = currentValue[_key4];
+  for (var _key5 in currentValue) {
+    var currentObjectValue = currentValue[_key5];
 
-    if (!(_key4 in newValue)) {
+    if (!(_key5 in newValue)) {
       hasChanged = true;
@@ -700,3 +761,3 @@ var nestedHotSwappables = collectNestedHotSwappableValues(currentObjectValue);
       if (nestedHotSwappables) {
-        hotSwaps.push.apply(hotSwaps, _toConsumableArray(nestedHotSwappables.map(function (hotSwappable) {
+        hotSwaps.push.apply(hotSwaps, _rollupPluginBabelHelpers.toConsumableArray(nestedHotSwappables.map(function (hotSwappable) {
           return [hotSwappable, undefined];
@@ -707,21 +768,21 @@ })));
 
-    var newObjectValue = newValue[_key4];
+    var newObjectValue = newValue[_key5];
 
     var _tryHotSwappingValues3 = tryHotSwappingValues(currentObjectValue, newObjectValue),
-        _tryHotSwappingValues4 = _slicedToArray(_tryHotSwappingValues3, 2),
+        _tryHotSwappingValues4 = _rollupPluginBabelHelpers.slicedToArray(_tryHotSwappingValues3, 2),
         updatedValue = _tryHotSwappingValues4[0],
         elementHotSwaps = _tryHotSwappingValues4[1];
 
-    if (elementHotSwaps) hotSwaps.push.apply(hotSwaps, _toConsumableArray(elementHotSwaps));
+    if (elementHotSwaps) hotSwaps.push.apply(hotSwaps, _rollupPluginBabelHelpers.toConsumableArray(elementHotSwaps));
 
     if (updatedValue !== IGNORE) {
       hasChanged = true;
-      normalizedNewValue[_key4] = updatedValue;
+      normalizedNewValue[_key5] = updatedValue;
     }
   }
 
-  for (var _key5 in newValue) {
-    if (_key5 in normalizedNewValue) continue;
+  for (var _key6 in newValue) {
+    if (_key6 in normalizedNewValue) continue;
     hasChanged = true;
-    normalizedNewValue[_key5] = makeValueHotSwappable(newValue[_key5]);
+    normalizedNewValue[_key6] = makeValueHotSwappable(newValue[_key6]);
   }
@@ -760,7 +821,7 @@
       var _tryHotSwappingValues5 = tryHotSwappingValues(currentArrayValue, newArrayValue),
-          _tryHotSwappingValues6 = _slicedToArray(_tryHotSwappingValues5, 2),
+          _tryHotSwappingValues6 = _rollupPluginBabelHelpers.slicedToArray(_tryHotSwappingValues5, 2),
           updatedValue = _tryHotSwappingValues6[0],
           elementHotSwaps = _tryHotSwappingValues6[1];
 
-      if (elementHotSwaps) hotSwaps.push.apply(hotSwaps, _toConsumableArray(elementHotSwaps));
+      if (elementHotSwaps) hotSwaps.push.apply(hotSwaps, _rollupPluginBabelHelpers.toConsumableArray(elementHotSwaps));
 
@@ -779,3 +840,3 @@ if (updatedValue === IGNORE) {
       if (nestedHotSwappables) {
-        hotSwaps.push.apply(hotSwaps, _toConsumableArray(nestedHotSwappables.map(function (hotSwappable) {
+        hotSwaps.push.apply(hotSwaps, _rollupPluginBabelHelpers.toConsumableArray(nestedHotSwappables.map(function (hotSwappable) {
           return [hotSwappable, undefined];
@@ -788,2 +849,4 @@ })));
   return [hasChanged ? normalizedNewValue : IGNORE, hotSwaps];
-}
+}
+
+exports.createRemoteRoot = createRemoteRoot;

build/cjs/types.js

@@ -1,26 +0,23 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.KIND_TEXT = exports.KIND_COMPONENT = exports.KIND_ROOT = exports.UPDATE_REMOVE = exports.UPDATE_INSERT = exports.ACTION_UPDATE_PROPS = exports.ACTION_UPDATE_TEXT = exports.ACTION_REMOVE_CHILD = exports.ACTION_INSERT_CHILD = exports.ACTION_MOUNT = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var ACTION_MOUNT = 0;
-exports.ACTION_MOUNT = ACTION_MOUNT;
 var ACTION_INSERT_CHILD = 1;
-exports.ACTION_INSERT_CHILD = ACTION_INSERT_CHILD;
 var ACTION_REMOVE_CHILD = 2;
-exports.ACTION_REMOVE_CHILD = ACTION_REMOVE_CHILD;
 var ACTION_UPDATE_TEXT = 3;
-exports.ACTION_UPDATE_TEXT = ACTION_UPDATE_TEXT;
 var ACTION_UPDATE_PROPS = 4;
-exports.ACTION_UPDATE_PROPS = ACTION_UPDATE_PROPS;
-var UPDATE_INSERT = 0;
-exports.UPDATE_INSERT = UPDATE_INSERT;
-var UPDATE_REMOVE = 1;
-exports.UPDATE_REMOVE = UPDATE_REMOVE;
 var KIND_ROOT = 0;
-exports.KIND_ROOT = KIND_ROOT;
 var KIND_COMPONENT = 1;
+var KIND_TEXT = 2;
+var KIND_FRAGMENT = 3;
+
+exports.ACTION_INSERT_CHILD = ACTION_INSERT_CHILD;
+exports.ACTION_MOUNT = ACTION_MOUNT;
+exports.ACTION_REMOVE_CHILD = ACTION_REMOVE_CHILD;
+exports.ACTION_UPDATE_PROPS = ACTION_UPDATE_PROPS;
+exports.ACTION_UPDATE_TEXT = ACTION_UPDATE_TEXT;
 exports.KIND_COMPONENT = KIND_COMPONENT;
-var KIND_TEXT = 2;
-exports.KIND_TEXT = KIND_TEXT;
+exports.KIND_FRAGMENT = KIND_FRAGMENT;
+exports.KIND_ROOT = KIND_ROOT;
+exports.KIND_TEXT = KIND_TEXT;

build/cjs/utilities.js

@@ -1,17 +0,19 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isRemoteComponent = isRemoteComponent;
-exports.isRemoteText = isRemoteText;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _types = require("./types");
+var types = require('./types.js');
 
 function isRemoteComponent(child) {
-  return child != null && child.kind === _types.KIND_COMPONENT;
+  return child != null && child.kind === types.KIND_COMPONENT;
 }
+function isRemoteText(child) {
+  return child != null && child.kind === types.KIND_TEXT;
+}
+function isRemoteFragment(object) {
+  return object != null && object.kind === types.KIND_FRAGMENT;
+}
 
-function isRemoteText(child) {
-  return child != null && child.kind === _types.KIND_TEXT;
-}
+exports.isRemoteComponent = isRemoteComponent;
+exports.isRemoteFragment = isRemoteFragment;
+exports.isRemoteText = isRemoteText;

build/ts/index.d.ts

 export type { RemoteComponentType, PropsForRemoteComponent, AllowedChildrenForRemoteComponent, IdentifierForRemoteComponent, } from '@remote-ui/types';
 export { retain, release } from '@remote-ui/rpc';
 export { createRemoteComponent } from './component';
-export { ACTION_MOUNT, ACTION_INSERT_CHILD, ACTION_REMOVE_CHILD, ACTION_UPDATE_PROPS, ACTION_UPDATE_TEXT, KIND_ROOT, KIND_COMPONENT, KIND_TEXT, } from './types';
-export type { RemoteRoot, RemoteChannel, RemoteComponent, RemoteText, RemoteChild, Serialized, ActionArgumentMap, RemoteTextSerialization, RemoteComponentSerialization, } from './types';
+export { ACTION_MOUNT, ACTION_INSERT_CHILD, ACTION_REMOVE_CHILD, ACTION_UPDATE_PROPS, ACTION_UPDATE_TEXT, KIND_ROOT, KIND_COMPONENT, KIND_TEXT, KIND_FRAGMENT, } from './types';
+export type { RemoteRoot, RemoteChannel, RemoteComponent, RemoteText, RemoteChild, RemoteFragment, Serialized, ActionArgumentMap, RemoteTextSerialization, RemoteComponentSerialization, RemoteFragmentSerialization, } from './types';
 export { createRemoteRoot } from './root';
-export { createRemoteReceiver, createRemoteChannel } from './receiver';
-export type { RemoteReceiver, RemoteReceiverAttachment, RemoteReceiverAttachable, RemoteReceiverAttachableChild, RemoteReceiverAttachableRoot, RemoteReceiverAttachableComponent, RemoteReceiverAttachableText, } from './receiver';
-export { isRemoteComponent, isRemoteText } from './utilities';
+export { createRemoteReceiver, createRemoteChannel, isRemoteFragmentSerialization, isRemoteReceiverAttachableFragment, } from './receiver';
+export type { RemoteReceiver, RemoteReceiverAttachment, RemoteReceiverAttachable, RemoteReceiverAttachableChild, RemoteReceiverAttachableRoot, RemoteReceiverAttachableComponent, RemoteReceiverAttachableText, RemoteReceiverAttachableFragment, } from './receiver';
+export { isRemoteComponent, isRemoteText, isRemoteFragment } from './utilities';
 //# sourceMappingURL=index.d.ts.map

build/ts/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isRemoteText = exports.isRemoteComponent = exports.createRemoteChannel = exports.createRemoteReceiver = exports.createRemoteRoot = exports.KIND_TEXT = exports.KIND_COMPONENT = exports.KIND_ROOT = exports.ACTION_UPDATE_TEXT = exports.ACTION_UPDATE_PROPS = exports.ACTION_REMOVE_CHILD = exports.ACTION_INSERT_CHILD = exports.ACTION_MOUNT = exports.createRemoteComponent = exports.release = exports.retain = void 0;
+exports.isRemoteFragment = exports.isRemoteText = exports.isRemoteComponent = exports.isRemoteReceiverAttachableFragment = exports.isRemoteFragmentSerialization = exports.createRemoteChannel = exports.createRemoteReceiver = exports.createRemoteRoot = exports.KIND_FRAGMENT = exports.KIND_TEXT = exports.KIND_COMPONENT = exports.KIND_ROOT = exports.ACTION_UPDATE_TEXT = exports.ACTION_UPDATE_PROPS = exports.ACTION_REMOVE_CHILD = exports.ACTION_INSERT_CHILD = exports.ACTION_MOUNT = exports.createRemoteComponent = exports.release = exports.retain = void 0;
 var rpc_1 = require("@remote-ui/rpc");
@@ -18,2 +18,3 @@ Object.defineProperty(exports, "retain", { enumerable: true, get: function () { return rpc_1.retain; } });
 Object.defineProperty(exports, "KIND_TEXT", { enumerable: true, get: function () { return types_1.KIND_TEXT; } });
+Object.defineProperty(exports, "KIND_FRAGMENT", { enumerable: true, get: function () { return types_1.KIND_FRAGMENT; } });
 var root_1 = require("./root");
@@ -24,4 +25,7 @@ Object.defineProperty(exports, "createRemoteRoot", { enumerable: true, get: function () { return root_1.createRemoteRoot; } });
 Object.defineProperty(exports, "createRemoteChannel", { enumerable: true, get: function () { return receiver_1.createRemoteChannel; } });
+Object.defineProperty(exports, "isRemoteFragmentSerialization", { enumerable: true, get: function () { return receiver_1.isRemoteFragmentSerialization; } });
+Object.defineProperty(exports, "isRemoteReceiverAttachableFragment", { enumerable: true, get: function () { return receiver_1.isRemoteReceiverAttachableFragment; } });
 var utilities_1 = require("./utilities");
 Object.defineProperty(exports, "isRemoteComponent", { enumerable: true, get: function () { return utilities_1.isRemoteComponent; } });
 Object.defineProperty(exports, "isRemoteText", { enumerable: true, get: function () { return utilities_1.isRemoteText; } });
+Object.defineProperty(exports, "isRemoteFragment", { enumerable: true, get: function () { return utilities_1.isRemoteFragment; } });

build/ts/receiver.d.ts

 import { ACTION_MOUNT, ACTION_INSERT_CHILD, ACTION_UPDATE_PROPS, ACTION_UPDATE_TEXT } from './types';
-import type { ActionArgumentMap, RemoteChannel, RemoteTextSerialization, RemoteComponentSerialization } from './types';
+import type { ActionArgumentMap, RemoteChannel, RemoteTextSerialization, RemoteComponentSerialization, RemoteFragmentSerialization } from './types';
 export declare const ROOT_ID: unique symbol;
@@ -11,2 +11,6 @@ export interface RemoteReceiverAttachableText extends RemoteTextSerialization {
 }
+export interface RemoteReceiverAttachableFragment extends Omit<RemoteFragmentSerialization, 'children'> {
+    children: RemoteReceiverAttachableChild[];
+    version: number;
+}
 export interface RemoteReceiverAttachableRoot {
@@ -18,3 +22,3 @@ id: typeof ROOT_ID;
 export declare type RemoteReceiverAttachableChild = RemoteReceiverAttachableText | RemoteReceiverAttachableComponent;
-export declare type RemoteReceiverAttachable = RemoteReceiverAttachableChild | RemoteReceiverAttachableRoot;
+export declare type RemoteReceiverAttachable = RemoteReceiverAttachableChild | RemoteReceiverAttachableRoot | RemoteReceiverAttachableFragment;
 interface RemoteChannelRunner {
@@ -41,3 +45,5 @@ mount(...args: ActionArgumentMap[typeof ACTION_MOUNT]): void;
 export declare function createRemoteReceiver(): RemoteReceiver;
+export declare function isRemoteFragmentSerialization(object: unknown): object is RemoteFragmentSerialization;
+export declare function isRemoteReceiverAttachableFragment(object: unknown): object is RemoteReceiverAttachableFragment;
 export {};
 //# sourceMappingURL=receiver.d.ts.map

build/ts/receiver.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createRemoteReceiver = exports.createRemoteChannel = exports.ROOT_ID = void 0;
+exports.isRemoteReceiverAttachableFragment = exports.isRemoteFragmentSerialization = exports.createRemoteReceiver = exports.createRemoteChannel = exports.ROOT_ID = void 0;
 const rpc_1 = require("@remote-ui/rpc");
 const types_1 = require("./types");
+const utilities_1 = require("./utilities");
 exports.ROOT_ID = Symbol('RootId');
@@ -33,3 +34,3 @@ function createRemoteChannel({ mount, insertChild, removeChild, updateProps, updateText, }) {
             const root = attachedNodes.get(exports.ROOT_ID);
-            const normalizedChildren = children.map(addVersion);
+            const normalizedChildren = children.map((child) => normalizeNode(child, addVersion));
             root.version += 1;
@@ -48,6 +49,6 @@ root.children = normalizedChildren;
         insertChild: (id, index, child) => {
-            const normalizedChild = addVersion(child);
+            const attached = attachedNodes.get(id !== null && id !== void 0 ? id : exports.ROOT_ID);
+            const normalizedChild = normalizeNode(child, addVersion);
             rpc_1.retain(normalizedChild);
             attach(normalizedChild);
-            const attached = attachedNodes.get(id !== null && id !== void 0 ? id : exports.ROOT_ID);
             const { children } = attached;
@@ -78,2 +79,13 @@ if (index === children.length) {
             rpc_1.retain(newProps);
+            Object.keys(newProps).forEach((key) => {
+                const newProp = newProps[key];
+                const oldProp = oldProps[key];
+                if (isRemoteReceiverAttachableFragment(oldProp)) {
+                    detach(oldProp);
+                }
+                if (isRemoteFragmentSerialization(newProp)) {
+                    const attachableNewProp = addVersion(newProp);
+                    attach(attachableNewProp);
+                }
+            });
             Object.assign(component.props, newProps);
@@ -155,18 +167,19 @@ component.version += 1;
     function enqueueUpdate(attached) {
-        timeout = timeout !== null && timeout !== void 0 ? timeout : new Promise((resolve) => {
-            setTimeout(() => {
-                const attachedToUpdate = [...queuedUpdates];
-                timeout = null;
-                queuedUpdates.clear();
-                for (const attached of attachedToUpdate) {
-                    const subscribers = attachmentSubscribers.get(attached.id);
-                    if (subscribers) {
-                        for (const subscriber of subscribers) {
-                            subscriber(attached);
+        timeout =
+            timeout !== null && timeout !== void 0 ? timeout : new Promise((resolve) => {
+                setTimeout(() => {
+                    const attachedToUpdate = [...queuedUpdates];
+                    timeout = null;
+                    queuedUpdates.clear();
+                    for (const attached of attachedToUpdate) {
+                        const subscribers = attachmentSubscribers.get(attached.id);
+                        if (subscribers) {
+                            for (const subscriber of subscribers) {
+                                subscriber(attached);
+                            }
                         }
                     }
-                }
-                resolve();
-            }, 0);
-        });
+                    resolve();
+                }, 0);
+            });
         queuedUpdates.add(attached);
@@ -177,2 +190,11 @@ return timeout;
         attachedNodes.set(child.id, child);
+        if (child.kind === types_1.KIND_COMPONENT && 'props' in child) {
+            const { props = {} } = child;
+            Object.keys(props).forEach((key) => {
+                const prop = props[key];
+                if (!isRemoteReceiverAttachableFragment(prop))
+                    return;
+                attach(prop);
+            });
+        }
         if ('children' in child) {
@@ -186,2 +208,11 @@ for (const grandChild of child.children) {
         attachedNodes.delete(child.id);
+        if (child.kind === types_1.KIND_COMPONENT && 'props' in child) {
+            const { props = {} } = child;
+            Object.keys(props).forEach((key) => {
+                const prop = props[key];
+                if (!isRemoteReceiverAttachableFragment(prop))
+                    return;
+                detach(prop);
+            });
+        }
         if ('children' in child) {
@@ -199,1 +230,24 @@ for (const grandChild of child.children) {
 }
+function normalizeNode(node, normalizer) {
+    if (node.kind === types_1.KIND_FRAGMENT || node.kind === types_1.KIND_COMPONENT) {
+        node.children.forEach((child) => normalizeNode(child, normalizer));
+    }
+    if (node.kind === types_1.KIND_COMPONENT && 'props' in node) {
+        const { props } = node;
+        for (const key of Object.keys(props)) {
+            const prop = props[key];
+            if (!isRemoteFragmentSerialization(prop))
+                continue;
+            props[key] = normalizeNode(prop, normalizer);
+        }
+    }
+    return normalizer(node);
+}
+function isRemoteFragmentSerialization(object) {
+    return utilities_1.isRemoteFragment(object) && 'id' in object && 'children' in object;
+}
+exports.isRemoteFragmentSerialization = isRemoteFragmentSerialization;
+function isRemoteReceiverAttachableFragment(object) {
+    return isRemoteFragmentSerialization(object) && 'version' in object;
+}
+exports.isRemoteReceiverAttachableFragment = isRemoteReceiverAttachableFragment;

build/ts/root.js

@@ -5,2 +5,3 @@ "use strict";
 const types_1 = require("./types");
+const utilities_1 = require("./utilities");
 const FUNCTION_CURRENT_IMPLEMENTATION_KEY = '__current';
@@ -50,3 +51,3 @@ const EMPTY_OBJECT = {};
                         continue;
-                    normalizedInternalProps[key] = makeValueHotSwappable(initialProps[key]);
+                    normalizedInternalProps[key] = makeValueHotSwappable(serializeProp(initialProps[key]));
                 }
@@ -89,3 +90,3 @@ }
                     return internals.internalProps;
-                }, updateProps: (newProps) => updateProps(component, newProps, internals, rootInternals), appendChild: (child) => appendChild(component, normalizeChild(child, remoteRoot), internals, rootInternals), removeChild: (child) => removeChild(component, child, internals, rootInternals), insertChildBefore: (child, before) => insertChildBefore(component, child, before, internals, rootInternals) }, EMPTY_OBJECT);
+                }, updateProps: (newProps) => updateProps(component, newProps, internals, rootInternals), appendChild: (child) => appendChild(component, normalizeChild(child, remoteRoot), internals, rootInternals), removeChild: (child) => removeChild(component, child, internals, rootInternals), insertChildBefore: (child, before) => insertChildBefore(component, normalizeChild(child, remoteRoot), before, internals, rootInternals) }, EMPTY_OBJECT);
             Object.defineProperty(component, 'type', {
@@ -100,3 +101,3 @@ value: type,
             for (const child of internals.children) {
-                moveChildToContainer(component, child, rootInternals);
+                moveNodeToContainer(component, child, rootInternals);
             }
@@ -115,5 +116,17 @@ return component;
         },
+        createFragment() {
+            const id = `${currentId++}`;
+            const internals = {
+                children: strict ? Object.freeze([]) : [],
+            };
+            const fragment = Object.assign({ kind: types_1.KIND_FRAGMENT, get children() {
+                    return internals.children;
+                }, appendChild: (child) => appendChild(fragment, normalizeChild(child, remoteRoot), internals, rootInternals), removeChild: (child) => removeChild(fragment, child, internals, rootInternals), insertChildBefore: (child, before) => insertChildBefore(fragment, normalizeChild(child, remoteRoot), before, internals, rootInternals) }, EMPTY_OBJECT);
+            makePartOfTree(fragment, rootInternals);
+            makeRemote(fragment, id, remoteRoot);
+            return fragment;
+        },
         appendChild: (child) => appendChild(remoteRoot, normalizeChild(child, remoteRoot), rootInternals, rootInternals),
         removeChild: (child) => removeChild(remoteRoot, child, rootInternals, rootInternals),
-        insertChildBefore: (child, before) => insertChildBefore(remoteRoot, child, before, rootInternals, rootInternals),
+        insertChildBefore: (child, before) => insertChildBefore(remoteRoot, normalizeChild(child, remoteRoot), before, rootInternals, rootInternals),
         mount() {
@@ -123,3 +136,3 @@ if (rootInternals.mounted)
             rootInternals.mounted = true;
-            return Promise.resolve(channel(types_1.ACTION_MOUNT, rootInternals.children.map(serialize)));
+            return Promise.resolve(channel(types_1.ACTION_MOUNT, rootInternals.children.map(serializeChild)));
         },
@@ -176,3 +189,3 @@ };
     const { strict } = rootInternals;
-    const { internalProps: currentProps } = internals;
+    const { internalProps: currentProps, externalProps: currentExternalProps, } = internals;
     const normalizedNewProps = {};
@@ -185,4 +198,6 @@ const hotSwapFunctions = [];
             continue;
+        const currentExternalValue = currentExternalProps[key];
+        const newExternalValue = newProps[key];
         const currentValue = currentProps[key];
-        const newValue = newProps[key];
+        const newValue = serializeProp(newExternalValue);
         // Bail out if we have equal, primitive types
@@ -201,2 +216,8 @@ if (currentValue === newValue &&
         normalizedNewProps[key] = value;
+        if (utilities_1.isRemoteFragment(currentExternalValue)) {
+            removeNodeFromContainer(currentExternalValue, rootInternals);
+        }
+        if (utilities_1.isRemoteFragment(newExternalValue)) {
+            moveNodeToContainer(component, newExternalValue, rootInternals);
+        }
     }
@@ -210,3 +231,3 @@ return perform(component, rootInternals, {
         local: () => {
-            const mergedExternalProps = Object.assign(Object.assign({}, internals.externalProps), newProps);
+            const mergedExternalProps = Object.assign(Object.assign({}, currentExternalProps), newProps);
             internals.externalProps = strict
@@ -298,3 +319,5 @@ ? Object.freeze(mergedExternalProps)
     }
-    if (typeof currentValue === 'object' && currentValue != null) {
+    if (typeof currentValue === 'object' &&
+        currentValue != null &&
+        !utilities_1.isRemoteFragment(currentValue)) {
         return tryHotSwappingObjectValues(currentValue, newValue);
@@ -305,2 +328,5 @@ }
 function makeValueHotSwappable(value) {
+    if (utilities_1.isRemoteFragment(value)) {
+        return value;
+    }
     if (typeof value === 'function') {
@@ -353,5 +379,5 @@ const wrappedFunction = ((...args) => {
     return perform(container, rootInternals, {
-        remote: (channel) => channel(types_1.ACTION_INSERT_CHILD, container.id, container.children.length, serialize(child)),
+        remote: (channel) => channel(types_1.ACTION_INSERT_CHILD, container.id, container.children.length, serializeChild(child)),
         local: () => {
-            moveChildToContainer(container, child, rootInternals);
+            moveNodeToContainer(container, child, rootInternals);
             const mergedChildren = [...internals.children, child];
@@ -374,10 +400,7 @@ internals.children = strict
 function removeChild(container, child, internals, rootInternals) {
-    const { strict, tops, parents } = rootInternals;
+    const { strict } = rootInternals;
     return perform(container, rootInternals, {
         remote: (channel) => channel(types_1.ACTION_REMOVE_CHILD, container.id, container.children.indexOf(child)),
         local: () => {
-            parents.delete(child);
-            if (child.kind === types_1.KIND_COMPONENT) {
-                allDescendants(child, (descendant) => tops.set(descendant, child));
-            }
+            removeNodeFromContainer(child, rootInternals);
             const newChildren = [...internals.children];
@@ -395,5 +418,5 @@ newChildren.splice(newChildren.indexOf(child), 1);
     return perform(container, rootInternals, {
-        remote: (channel) => channel(types_1.ACTION_INSERT_CHILD, container.id, container.children.indexOf(before), serialize(child)),
+        remote: (channel) => channel(types_1.ACTION_INSERT_CHILD, container.id, container.children.indexOf(before), serializeChild(child)),
         local: () => {
-            moveChildToContainer(container, child, rootInternals);
+            moveNodeToContainer(container, child, rootInternals);
             const newChildren = [...internals.children];
@@ -408,8 +431,46 @@ newChildren.splice(newChildren.indexOf(before), 0, child);
 }
-function moveChildToContainer(container, child, { tops, parents }) {
+function moveNodeToContainer(container, node, rootInternals) {
+    const { tops, parents } = rootInternals;
     const newTop = container.kind === types_1.KIND_ROOT ? container : tops.get(container);
-    tops.set(child, newTop);
-    parents.set(child, container);
-    allDescendants(child, (descendant) => tops.set(descendant, newTop));
+    tops.set(node, newTop);
+    parents.set(node, container);
+    moveFragmentToContainer(node, rootInternals);
+    allDescendants(node, (descendant) => {
+        tops.set(descendant, newTop);
+        moveFragmentToContainer(descendant, rootInternals);
+    });
 }
+function moveFragmentToContainer(node, rootInternals) {
+    if (node.kind !== types_1.KIND_COMPONENT)
+        return;
+    const props = node.props;
+    if (!props)
+        return;
+    Object.values(props).forEach((prop) => {
+        if (!utilities_1.isRemoteFragment(prop))
+            return;
+        moveNodeToContainer(node, prop, rootInternals);
+    });
+}
+function removeNodeFromContainer(node, rootInternals) {
+    const { tops, parents } = rootInternals;
+    tops.delete(node);
+    parents.delete(node);
+    allDescendants(node, (descendant) => {
+        tops.delete(descendant);
+        removeFragmentFromContainer(descendant, rootInternals);
+    });
+    removeFragmentFromContainer(node, rootInternals);
+}
+function removeFragmentFromContainer(node, rootInternals) {
+    if (node.kind !== types_1.KIND_COMPONENT)
+        return;
+    const props = node.remoteProps;
+    for (const key of Object.keys(props !== null && props !== void 0 ? props : {})) {
+        const prop = props[key];
+        if (!utilities_1.isRemoteFragment(prop))
+            continue;
+        removeNodeFromContainer(prop, rootInternals);
+    }
+}
 function makePartOfTree(node, { parents, tops, nodes }) {
@@ -432,3 +493,3 @@ nodes.add(node);
 }
-function serialize(value) {
+function serializeChild(value) {
     return value.kind === types_1.KIND_TEXT
@@ -441,5 +502,20 @@ ? { id: value.id, kind: value.kind, text: value.text }
             props: value.remoteProps,
-            children: value.children.map((child) => serialize(child)),
+            children: value.children.map((child) => serializeChild(child)),
         };
 }
+function serializeProp(prop) {
+    if (utilities_1.isRemoteFragment(prop)) {
+        return serializeFragment(prop);
+    }
+    return prop;
+}
+function serializeFragment(value) {
+    return {
+        id: value.id,
+        kind: value.kind,
+        get children() {
+            return value.children.map((child) => serializeChild(child));
+        },
+    };
+}
 function makeRemote(value, id, root) {
@@ -446,0 +522,0 @@ Object.defineProperty(value, 'id', {

build/ts/types.d.ts

@@ -18,2 +18,3 @@ import { RemoteComponentType, IdentifierForRemoteComponent, PropsForRemoteComponent } from '@remote-ui/types';
 export declare const KIND_TEXT = 2;
+export declare const KIND_FRAGMENT = 3;
 export declare type Id = string;
@@ -63,2 +64,3 @@ export interface ActionArgumentMap {
     createText(text?: string): RemoteText<RemoteRoot<AllowedComponents, AllowedChildrenTypes>>;
+    createFragment(): RemoteFragment<RemoteRoot<AllowedComponents, AllowedChildrenTypes>>;
     mount(): Promise<void>;
@@ -81,2 +83,13 @@ }
 }
+export interface RemoteFragment<Root extends RemoteRoot<any, any> = RemoteRoot<any, any>> {
+    readonly kind: typeof KIND_FRAGMENT;
+    readonly id: string;
+    readonly children: readonly AllowedChildren<ExtractChildren<any>, Root>[];
+    readonly root: Root;
+    readonly top: RemoteComponent<any, Root> | Root | null;
+    readonly parent: RemoteComponent<any, Root> | Root | null;
+    appendChild(child: AllowedChildren<ExtractChildren<any>, Root, true>): void | Promise<void>;
+    removeChild(child: AllowedChildren<ExtractChildren<any>, Root>): void | Promise<void>;
+    insertChildBefore(child: AllowedChildren<ExtractChildren<any>, Root>, before: AllowedChildren<ExtractChildren<any>, Root>): void | Promise<void>;
+}
 export interface RemoteText<Root extends RemoteRoot<any, any>> {
@@ -100,4 +113,9 @@ readonly kind: typeof KIND_TEXT;
 };
+export declare type RemoteFragmentSerialization = {
+    -readonly [K in 'id' | 'kind']: RemoteFragment<any>[K];
+} & {
+    children: (RemoteComponentSerialization | RemoteTextSerialization)[];
+};
 export declare type Serialized<T> = T extends RemoteComponent<infer Type, any> ? RemoteComponentSerialization<Type> : T extends RemoteText<any> ? RemoteTextSerialization : never;
 export {};
 //# sourceMappingURL=types.d.ts.map

build/ts/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KIND_TEXT = exports.KIND_COMPONENT = exports.KIND_ROOT = exports.UPDATE_REMOVE = exports.UPDATE_INSERT = exports.ACTION_UPDATE_PROPS = exports.ACTION_UPDATE_TEXT = exports.ACTION_REMOVE_CHILD = exports.ACTION_INSERT_CHILD = exports.ACTION_MOUNT = void 0;
+exports.KIND_FRAGMENT = exports.KIND_TEXT = exports.KIND_COMPONENT = exports.KIND_ROOT = exports.UPDATE_REMOVE = exports.UPDATE_INSERT = exports.ACTION_UPDATE_PROPS = exports.ACTION_UPDATE_TEXT = exports.ACTION_REMOVE_CHILD = exports.ACTION_INSERT_CHILD = exports.ACTION_MOUNT = void 0;
 exports.ACTION_MOUNT = 0;
@@ -14,1 +14,2 @@ exports.ACTION_INSERT_CHILD = 1;
 exports.KIND_TEXT = 2;
+exports.KIND_FRAGMENT = 3;

build/ts/utilities.d.ts

 import type { RemoteComponentType } from '@remote-ui/types';
-import type { RemoteRoot, RemoteComponent, RemoteText } from './types';
+import type { RemoteRoot, RemoteComponent, RemoteText, RemoteFragment } from './types';
 export declare function isRemoteComponent<Type extends RemoteComponentType<string, any, any> = any, Root extends RemoteRoot<any, any> = RemoteRoot<any, any>>(child: unknown): child is RemoteComponent<Type, Root>;
 export declare function isRemoteText<Root extends RemoteRoot<any, any> = RemoteRoot<any, any>>(child: unknown): child is RemoteText<Root>;
+export declare function isRemoteFragment<Root extends RemoteRoot<any, any> = RemoteRoot<any, any>>(object: unknown): object is RemoteFragment<Root>;
 //# sourceMappingURL=utilities.d.ts.map

build/ts/utilities.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isRemoteText = exports.isRemoteComponent = void 0;
+exports.isRemoteFragment = exports.isRemoteText = exports.isRemoteComponent = void 0;
 const types_1 = require("./types");
@@ -13,1 +13,5 @@ function isRemoteComponent(child) {
 exports.isRemoteText = isRemoteText;
+function isRemoteFragment(object) {
+    return object != null && object.kind === types_1.KIND_FRAGMENT;
+}
+exports.isRemoteFragment = isRemoteFragment;

index.js

@@ -1,1 +0,1 @@
-module.exports = require("./build/cjs/index");
+module.exports = require("./build/cjs/index.js");

package.json

 {
   "name": "@remote-ui/core",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "publishConfig": {
@@ -23,6 +23,6 @@ "access": "public",
   "dependencies": {
-    "@remote-ui/rpc": "^1.0.17",
-    "@remote-ui/types": "^1.0.7"
+    "@remote-ui/rpc": "^1.0.18",
+    "@remote-ui/types": "^1.0.8"
   },
-  "gitHead": "a48af3eb93fd1a19bd29424e718e9ed60a75ea5e"
+  "gitHead": "0550a299ecee6327dd8751ac1809a7c614aed141"
 }

sewing-kit.config.ts

@@ -1,7 +0,8 @@
-import {createPackage} from '@sewing-kit/config';
+import {createPackage, Runtime} from '@sewing-kit/config';
 import {defaultProjectPlugin} from '../../config/sewing-kit';
 
 export default createPackage((pkg) => {
+  pkg.runtimes(Runtime.Node, Runtime.Browser);
   pkg.entry({root: './src/index'});
   pkg.use(defaultProjectPlugin());
 });

src/index.ts

@@ -20,2 +20,3 @@ export type {
   KIND_TEXT,
+  KIND_FRAGMENT,
 } from './types';
@@ -28,2 +29,3 @@ export type {
   RemoteChild,
+  RemoteFragment,
   Serialized,
@@ -33,5 +35,11 @@ ActionArgumentMap,
   RemoteComponentSerialization,
+  RemoteFragmentSerialization,
 } from './types';
 export {createRemoteRoot} from './root';
-export {createRemoteReceiver, createRemoteChannel} from './receiver';
+export {
+  createRemoteReceiver,
+  createRemoteChannel,
+  isRemoteFragmentSerialization,
+  isRemoteReceiverAttachableFragment,
+} from './receiver';
 export type {
@@ -45,3 +53,4 @@ RemoteReceiver,
   RemoteReceiverAttachableText,
+  RemoteReceiverAttachableFragment,
 } from './receiver';
-export {isRemoteComponent, isRemoteText} from './utilities';
+export {isRemoteComponent, isRemoteText, isRemoteFragment} from './utilities';

src/receiver.ts

@@ -8,2 +8,4 @@ import {retain, release} from '@remote-ui/rpc';
   ACTION_UPDATE_TEXT,
+  KIND_COMPONENT,
+  KIND_FRAGMENT,
 } from './types';
@@ -15,3 +17,5 @@ import type {
   RemoteComponentSerialization,
+  RemoteFragmentSerialization,
 } from './types';
+import {isRemoteFragment} from './utilities';
 
@@ -30,2 +34,8 @@ export const ROOT_ID = Symbol('RootId');
 
+export interface RemoteReceiverAttachableFragment
+  extends Omit<RemoteFragmentSerialization, 'children'> {
+  children: RemoteReceiverAttachableChild[];
+  version: number;
+}
+
 export interface RemoteReceiverAttachableRoot {
@@ -43,3 +53,4 @@ id: typeof ROOT_ID;
   | RemoteReceiverAttachableChild
-  | RemoteReceiverAttachableRoot;
+  | RemoteReceiverAttachableRoot
+  | RemoteReceiverAttachableFragment;
 
@@ -119,3 +130,5 @@ interface RemoteChannelRunner {
 
-      const normalizedChildren = children.map(addVersion);
+      const normalizedChildren = children.map((child) =>
+        normalizeNode(child, addVersion),
+      );
 
@@ -138,6 +151,2 @@ root.version += 1;
     insertChild: (id, index, child) => {
-      const normalizedChild = addVersion(child);
-      retain(normalizedChild);
-      attach(normalizedChild);
-
       const attached = attachedNodes.get(
@@ -147,2 +156,6 @@ id ?? ROOT_ID,
 
+      const normalizedChild = normalizeNode(child, addVersion);
+      retain(normalizedChild);
+      attach(normalizedChild);
+
       const {children} = attached;
@@ -164,2 +177,3 @@
       ) as RemoteReceiverAttachableRoot;
+
       const {children} = attached;
@@ -181,2 +195,3 @@
       ) as RemoteReceiverAttachableComponent;
+
       const oldProps = {...(component.props as any)};
@@ -186,2 +201,14 @@
 
+      Object.keys(newProps).forEach((key) => {
+        const newProp = (newProps as any)[key];
+        const oldProp = (oldProps as any)[key];
+        if (isRemoteReceiverAttachableFragment(oldProp)) {
+          detach(oldProp);
+        }
+        if (isRemoteFragmentSerialization(newProp)) {
+          const attachableNewProp = addVersion(newProp);
+          attach(attachableNewProp);
+        }
+      });
+
       Object.assign(component.props, newProps);
@@ -199,2 +226,3 @@ component.version += 1;
       const text = attachedNodes.get(id) as RemoteReceiverAttachableText;
+
       text.text = newText;
@@ -307,5 +335,16 @@ text.version += 1;
 
-  function attach(child: RemoteReceiverAttachableChild) {
+  function attach(
+    child: RemoteReceiverAttachableChild | RemoteReceiverAttachableFragment,
+  ) {
     attachedNodes.set(child.id, child);
 
+    if (child.kind === KIND_COMPONENT && 'props' in child) {
+      const {props = {}} = child as any;
+      Object.keys(props).forEach((key) => {
+        const prop = props[key];
+        if (!isRemoteReceiverAttachableFragment(prop)) return;
+        attach(prop);
+      });
+    }
+
     if ('children' in child) {
@@ -318,5 +357,16 @@ for (const grandChild of child.children) {
 
-  function detach(child: RemoteReceiverAttachableChild) {
+  function detach(
+    child: RemoteReceiverAttachableChild | RemoteReceiverAttachableFragment,
+  ) {
     attachedNodes.delete(child.id);
 
+    if (child.kind === KIND_COMPONENT && 'props' in child) {
+      const {props = {}} = child as any;
+      Object.keys(props).forEach((key) => {
+        const prop = props[key];
+        if (!isRemoteReceiverAttachableFragment(prop)) return;
+        detach(prop);
+      });
+    }
+
     if ('children' in child) {
@@ -330,5 +380,48 @@ for (const grandChild of child.children) {
 
-function addVersion(value: any): RemoteReceiverAttachableChild {
+function addVersion<T>(
+  value: T,
+): T extends RemoteTextSerialization
+  ? RemoteReceiverAttachableText
+  : T extends RemoteComponentSerialization
+  ? RemoteReceiverAttachableChild
+  : T extends RemoteFragmentSerialization
+  ? RemoteReceiverAttachableFragment
+  : never {
   (value as any).version = 0;
   return value as any;
 }
+
+function normalizeNode<
+  T extends
+    | RemoteTextSerialization
+    | RemoteComponentSerialization
+    | RemoteFragmentSerialization,
+  R
+>(node: T, normalizer: (node: T) => R) {
+  if (node.kind === KIND_FRAGMENT || node.kind === KIND_COMPONENT) {
+    (node as any).children.forEach((child: T) =>
+      normalizeNode(child, normalizer),
+    );
+  }
+  if (node.kind === KIND_COMPONENT && 'props' in node) {
+    const {props} = node as any;
+    for (const key of Object.keys(props)) {
+      const prop = props[key];
+      if (!isRemoteFragmentSerialization(prop)) continue;
+      props[key] = normalizeNode(prop as any, normalizer);
+    }
+  }
+  return normalizer(node);
+}
+
+export function isRemoteFragmentSerialization(
+  object: unknown,
+): object is RemoteFragmentSerialization {
+  return isRemoteFragment(object) && 'id' in object && 'children' in object;
+}
+
+export function isRemoteReceiverAttachableFragment(
+  object: unknown,
+): object is RemoteReceiverAttachableFragment {
+  return isRemoteFragmentSerialization(object) && 'version' in object;
+}

src/root.ts

@@ -11,2 +11,3 @@ import {RemoteComponentType} from '@remote-ui/types';
   KIND_TEXT,
+  KIND_FRAGMENT,
 } from './types';
@@ -19,7 +20,14 @@ import type {
   RemoteComponent,
+  RemoteFragment,
   RemoteRootOptions,
+  RemoteFragmentSerialization,
 } from './types';
+import {isRemoteFragment} from './utilities';
 
 type AnyChild = RemoteText<any> | RemoteComponent<any, any>;
-type AnyParent = RemoteRoot<any, any> | RemoteComponent<any, any>;
+type AnyNode = AnyChild | RemoteFragment<any>;
+type AnyParent =
+  | RemoteRoot<any, any>
+  | RemoteComponent<any, any>
+  | RemoteFragment<any>;
 
@@ -30,5 +38,5 @@ interface RootInternals {
   channel: RemoteChannel;
-  nodes: WeakSet<AnyChild>;
-  tops: WeakMap<AnyChild, AnyParent>;
-  parents: WeakMap<AnyChild, AnyParent>;
+  nodes: WeakSet<AnyNode>;
+  tops: WeakMap<AnyNode, AnyParent>;
+  parents: WeakMap<AnyNode, AnyParent>;
   children: readonly AnyChild[];
@@ -43,4 +51,8 @@ }
 
-type ParentInternals = RootInternals | ComponentInternals;
+interface FragmentInternals {
+  children: readonly AnyChild[];
+}
 
+type ParentInternals = RootInternals | ComponentInternals | FragmentInternals;
+
 interface TextInternals {
@@ -117,3 +129,3 @@ text: string;
           normalizedInternalProps[key] = makeValueHotSwappable(
-            initialProps[key],
+            serializeProp(initialProps[key]),
           );
@@ -178,3 +190,9 @@ }
         insertChildBefore: (child, before) =>
-          insertChildBefore(component, child, before, internals, rootInternals),
+          insertChildBefore(
+            component,
+            normalizeChild(child, remoteRoot),
+            before,
+            internals,
+            rootInternals,
+          ),
         // Just satisfying the type definition, since we need to write
@@ -198,3 +216,3 @@ // some properties manually, which we do below. If we just `as any`
       for (const child of internals.children) {
-        moveChildToContainer(component, child, rootInternals);
+        moveNodeToContainer(component, child, rootInternals);
       }
@@ -225,2 +243,42 @@
     },
+    createFragment() {
+      const id = `${currentId++}`;
+
+      const internals: FragmentInternals = {
+        children: strict ? Object.freeze([]) : [],
+      };
+
+      const fragment: RemoteFragment<Root> = {
+        kind: KIND_FRAGMENT,
+        get children() {
+          return internals.children;
+        },
+        appendChild: (child) =>
+          appendChild(
+            fragment,
+            normalizeChild(child, remoteRoot),
+            internals,
+            rootInternals,
+          ),
+        removeChild: (child) =>
+          removeChild(fragment, child, internals, rootInternals),
+        insertChildBefore: (child, before) =>
+          insertChildBefore(
+            fragment,
+            normalizeChild(child, remoteRoot),
+            before,
+            internals,
+            rootInternals,
+          ),
+
+        // Just satisfying the type definition, since we need to write
+        // some properties manually.
+        ...EMPTY_OBJECT,
+      };
+
+      makePartOfTree(fragment, rootInternals);
+      makeRemote(fragment, id, remoteRoot);
+
+      return fragment;
+    },
     appendChild: (child) =>
@@ -238,3 +296,3 @@ appendChild(
         remoteRoot,
-        child,
+        normalizeChild(child, remoteRoot),
         before,
@@ -249,3 +307,3 @@ rootInternals,
       return Promise.resolve(
-        channel(ACTION_MOUNT, rootInternals.children.map(serialize)),
+        channel(ACTION_MOUNT, rootInternals.children.map(serializeChild)),
       );
@@ -258,8 +316,8 @@ },
 
-function connected(element: AnyChild, {tops}: RootInternals) {
+function connected(element: AnyNode, {tops}: RootInternals) {
   return tops.get(element)?.kind === KIND_ROOT;
 }
 
-function allDescendants(element: AnyChild, withEach: (item: AnyChild) => void) {
-  const recurse = (element: AnyChild) => {
+function allDescendants(element: AnyNode, withEach: (item: AnyNode) => void) {
+  const recurse = (element: AnyNode) => {
     if ('children' in element) {
@@ -337,3 +395,6 @@ for (const child of element.children) {
   const {strict} = rootInternals;
-  const {internalProps: currentProps} = internals;
+  const {
+    internalProps: currentProps,
+    externalProps: currentExternalProps,
+  } = internals;
 
@@ -348,4 +409,7 @@ const normalizedNewProps: {[key: string]: any} = {};
 
+    const currentExternalValue = currentExternalProps[key];
+    const newExternalValue = newProps[key];
+
     const currentValue = currentProps[key];
-    const newValue = newProps[key];
+    const newValue = serializeProp(newExternalValue);
 
@@ -370,2 +434,9 @@ // Bail out if we have equal, primitive types
     normalizedNewProps[key] = value;
+
+    if (isRemoteFragment(currentExternalValue)) {
+      removeNodeFromContainer(currentExternalValue, rootInternals);
+    }
+    if (isRemoteFragment(newExternalValue)) {
+      moveNodeToContainer(component, newExternalValue, rootInternals);
+    }
   }
@@ -381,3 +452,3 @@
       const mergedExternalProps = {
-        ...internals.externalProps,
+        ...currentExternalProps,
         ...newProps,
@@ -486,3 +557,7 @@ };
 
-  if (typeof currentValue === 'object' && currentValue != null) {
+  if (
+    typeof currentValue === 'object' &&
+    currentValue != null &&
+    !isRemoteFragment(currentValue)
+  ) {
     return tryHotSwappingObjectValues(currentValue, newValue);
@@ -495,2 +570,5 @@ }
 function makeValueHotSwappable(value: unknown): unknown {
+  if (isRemoteFragment(value)) {
+    return value;
+  }
   if (typeof value === 'function') {
@@ -566,6 +644,6 @@ const wrappedFunction: HotSwappableFunction<any> = ((...args: any[]) => {
         container.children.length,
-        serialize(child),
+        serializeChild(child),
       ),
     local: () => {
-      moveChildToContainer(container, child, rootInternals);
+      moveNodeToContainer(container, child, rootInternals);
 
@@ -595,3 +673,3 @@ const mergedChildren = [...internals.children, child];
 ) {
-  const {strict, tops, parents} = rootInternals;
+  const {strict} = rootInternals;
 
@@ -603,11 +681,7 @@ return perform(container, rootInternals, {
         (container as any).id,
-        container.children.indexOf(child),
+        container.children.indexOf(child as any),
       ),
     local: () => {
-      parents.delete(child);
+      removeNodeFromContainer(child, rootInternals);
 
-      if (child.kind === KIND_COMPONENT) {
-        allDescendants(child, (descendant) => tops.set(descendant, child));
-      }
-
       const newChildren = [...internals.children];
@@ -641,6 +715,6 @@ newChildren.splice(newChildren.indexOf(child), 1);
         container.children.indexOf(before as any),
-        serialize(child),
+        serializeChild(child),
       ),
     local: () => {
-      moveChildToContainer(container, child, rootInternals);
+      moveNodeToContainer(container, child, rootInternals);
 
@@ -661,16 +735,64 @@ const newChildren = [...internals.children];
 
-function moveChildToContainer(
+function moveNodeToContainer(
   container: AnyParent,
-  child: AnyChild,
-  {tops, parents}: RootInternals,
+  node: AnyNode,
+  rootInternals: RootInternals,
 ) {
+  const {tops, parents} = rootInternals;
   const newTop =
     container.kind === KIND_ROOT ? container : tops.get(container)!;
 
-  tops.set(child, newTop);
-  parents.set(child, container);
-  allDescendants(child, (descendant) => tops.set(descendant, newTop));
+  tops.set(node, newTop);
+  parents.set(node, container);
+
+  moveFragmentToContainer(node, rootInternals);
+
+  allDescendants(node, (descendant) => {
+    tops.set(descendant, newTop);
+    moveFragmentToContainer(descendant, rootInternals);
+  });
 }
 
-function makePartOfTree(node: AnyChild, {parents, tops, nodes}: RootInternals) {
+function moveFragmentToContainer(node: AnyNode, rootInternals: RootInternals) {
+  if (node.kind !== KIND_COMPONENT) return;
+
+  const props = node.props as any;
+  if (!props) return;
+
+  Object.values(props).forEach((prop) => {
+    if (!isRemoteFragment(prop)) return;
+    moveNodeToContainer(node, prop, rootInternals);
+  });
+}
+
+function removeNodeFromContainer(node: AnyNode, rootInternals: RootInternals) {
+  const {tops, parents} = rootInternals;
+
+  tops.delete(node);
+  parents.delete(node);
+
+  allDescendants(node, (descendant) => {
+    tops.delete(descendant);
+    removeFragmentFromContainer(descendant, rootInternals);
+  });
+
+  removeFragmentFromContainer(node, rootInternals);
+}
+
+function removeFragmentFromContainer(
+  node: AnyNode,
+  rootInternals: RootInternals,
+) {
+  if (node.kind !== KIND_COMPONENT) return;
+
+  const props = node.remoteProps as any;
+  for (const key of Object.keys(props ?? {})) {
+    const prop = props[key];
+    if (!isRemoteFragment(prop)) continue;
+
+    removeNodeFromContainer(prop, rootInternals);
+  }
+}
+
+function makePartOfTree(node: AnyNode, {parents, tops, nodes}: RootInternals) {
   nodes.add(node);
@@ -695,3 +817,3 @@
 
-function serialize(value: AnyChild): Serialized<typeof value> {
+function serializeChild(value: AnyChild): Serialized<typeof value> {
   return value.kind === KIND_TEXT
@@ -704,8 +826,27 @@ ? {id: value.id, kind: value.kind, text: value.text}
         props: value.remoteProps,
-        children: value.children.map((child) => serialize(child as any)),
+        children: value.children.map((child) => serializeChild(child)),
       };
 }
 
+function serializeProp(prop: any) {
+  if (isRemoteFragment(prop)) {
+    return serializeFragment(prop);
+  }
+  return prop;
+}
+
+function serializeFragment(
+  value: RemoteFragment<any>,
+): RemoteFragmentSerialization {
+  return {
+    id: value.id,
+    kind: value.kind,
+    get children() {
+      return value.children.map((child) => serializeChild(child));
+    },
+  };
+}
+
 function makeRemote<Root extends RemoteRoot<any, any>>(
-  value: RemoteText<Root> | RemoteComponent<any, Root>,
+  value: RemoteText<Root> | RemoteComponent<any, Root> | RemoteFragment<Root>,
   id: string,
@@ -712,0 +853,0 @@ root: Root,

src/types.ts

@@ -29,2 +29,3 @@ import {
 export const KIND_TEXT = 2;
+export const KIND_FRAGMENT = 3;
 
@@ -168,2 +169,5 @@ export type Id = string;
   ): RemoteText<RemoteRoot<AllowedComponents, AllowedChildrenTypes>>;
+  createFragment(): RemoteFragment<
+    RemoteRoot<AllowedComponents, AllowedChildrenTypes>
+  >;
   mount(): Promise<void>;
@@ -200,2 +204,23 @@ }
 
+export interface RemoteFragment<
+  Root extends RemoteRoot<any, any> = RemoteRoot<any, any>
+> {
+  readonly kind: typeof KIND_FRAGMENT;
+  readonly id: string;
+  readonly children: readonly AllowedChildren<ExtractChildren<any>, Root>[];
+  readonly root: Root;
+  readonly top: RemoteComponent<any, Root> | Root | null;
+  readonly parent: RemoteComponent<any, Root> | Root | null;
+  appendChild(
+    child: AllowedChildren<ExtractChildren<any>, Root, true>,
+  ): void | Promise<void>;
+  removeChild(
+    child: AllowedChildren<ExtractChildren<any>, Root>,
+  ): void | Promise<void>;
+  insertChildBefore(
+    child: AllowedChildren<ExtractChildren<any>, Root>,
+    before: AllowedChildren<ExtractChildren<any>, Root>,
+  ): void | Promise<void>;
+}
+
 export interface RemoteText<Root extends RemoteRoot<any, any>> {
@@ -233,2 +258,8 @@ readonly kind: typeof KIND_TEXT;
 
+export type RemoteFragmentSerialization = {
+  -readonly [K in 'id' | 'kind']: RemoteFragment<any>[K];
+} & {
+  children: (RemoteComponentSerialization | RemoteTextSerialization)[];
+};
+
 export type Serialized<T> = T extends RemoteComponent<infer Type, any>
@@ -235,0 +266,0 @@ ? RemoteComponentSerialization<Type>

src/utilities.ts

 import type {RemoteComponentType} from '@remote-ui/types';
-import type {RemoteRoot, RemoteComponent, RemoteText} from './types';
-import {KIND_COMPONENT, KIND_TEXT} from './types';
+import type {
+  RemoteRoot,
+  RemoteComponent,
+  RemoteText,
+  RemoteFragment,
+} from './types';
+import {KIND_COMPONENT, KIND_TEXT, KIND_FRAGMENT} from './types';
 
@@ -17,1 +22,7 @@ export function isRemoteComponent<
 }
+
+export function isRemoteFragment<
+  Root extends RemoteRoot<any, any> = RemoteRoot<any, any>
+>(object: unknown): object is RemoteFragment<Root> {
+  return object != null && (object as any).kind === KIND_FRAGMENT;
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

5585

increased by0.16%

Worsened metrics

Total package byte prevSize

398766

decreased by-30.23%

Number of package files

63

decreased by-5.97%

Dependency changes

• Updated@remote-ui/rpc@^1.0.18

• Updated@remote-ui/types@^1.0.8