@remote-ui/react - npm Package Compare versions

Comparing version 4.0.3 to 4.0.4

build/cjs/components.js

@@ -1,10 +0,91 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createRemoteReactComponent = createRemoteReactComponent;
+Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var core = require('@remote-ui/core');
+var render = require('./hooks/render.js');
+
 function createRemoteReactComponent(componentType) {
-  return componentType;
-}
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      fragmentProps = _ref.fragmentProps;
+
+  if (!fragmentProps || !fragmentProps.length) {
+    return componentType;
+  }
+
+  var wrapper = createComponentWrapper(componentType, fragmentProps);
+  wrapper.displayName = componentType;
+  return wrapper;
+}
+
+function createComponentWrapper(componentType, fragmentProps) {
+  var Component = componentType;
+  return /*#__PURE__*/react.memo(function ComponentWrapper(_ref2) {
+    var _ref2$children = _ref2.children,
+        externalChildren = _ref2$children === void 0 ? [] : _ref2$children,
+        externalProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, ["children"]);
+
+    var fragments = react.useRef({});
+
+    var _useRender = render.useRender(),
+        root = _useRender.root,
+        reconciler = _useRender.reconciler;
+
+    var _useMemo = react.useMemo(function () {
+      // React portals need to be attached to the tree after intialize in order to render.
+      // It's usually done by appending them as children of a parent node.
+      // @see https://reactjs.org/docs/portals.html
+      var portals = [];
+      var props = {};
+
+      for (var _i = 0, _Object$keys = Object.keys(externalProps); _i < _Object$keys.length; _i++) {
+        var key = _Object$keys[_i];
+        var element = externalProps[key];
+
+        if (fragmentProps.includes(key) && /*#__PURE__*/react.isValidElement(element)) {
+          var currentFragment = fragments.current[key];
+          var fragment = core.isRemoteFragment(currentFragment) ? currentFragment : root.createFragment();
+          fragments.current[key] = fragment; // Assign createText and createComponent to fragment
+          // so that it can become a React container to render the portal
+
+          // Assign createText and createComponent to fragment
+          // so that it can become a React container to render the portal
+          Object.assign(fragment, {
+            createText: function createText() {
+              return root.createText.apply(root, arguments);
+            },
+            createComponent: function createComponent(type) {
+              for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+                args[_key - 1] = arguments[_key];
+              }
+
+              return root.createComponent.apply(root, [type].concat(args));
+            }
+          });
+          var portal = reconciler.createPortal(element, fragment, null, null);
+          portals.push(portal);
+          props[key] = fragment;
+        } else {
+          props[key] = element;
+          delete fragments.current[key];
+        }
+      }
+
+      return {
+        props: props,
+        children: [].concat(_rollupPluginBabelHelpers.toConsumableArray(externalChildren), portals)
+      };
+    }, [externalChildren, externalProps, root, reconciler, fragments]),
+        props = _useMemo.props,
+        children = _useMemo.children;
+
+    return /*#__PURE__*/jsxRuntime.jsx(Component, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+      children: children
+    }));
+  });
+}
+
+exports.createRemoteReactComponent = createRemoteReactComponent;

build/cjs/hooks/subscription.js

@@ -1,30 +0,10 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useRemoteSubscription = useRemoteSubscription;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _react = require("react");
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('react');
 
-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 _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; }
-
-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 useRemoteSubscription(subscribable) {
-  var _useState = (0, _react.useState)(function () {
+  var _useState = react.useState(function () {
     return {
@@ -35,3 +15,3 @@ subscribable: subscribable,
   }),
-      _useState2 = _slicedToArray(_useState, 2),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       state = _useState2[0],
@@ -50,4 +30,4 @@ setState = _useState2[1];
 
-  (0, _react.useDebugValue)(valueToReturn);
-  (0, _react.useEffect)(function () {
+  react.useDebugValue(valueToReturn);
+  react.useEffect(function () {
     var unsubscribe = subscribable.subscribe(checkForUpdates);
@@ -66,3 +46,3 @@ checkForUpdates();
 
-        return _objectSpread(_objectSpread({}, previousState), {}, {
+        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, previousState), {}, {
           value: value
@@ -74,2 +54,4 @@ });
   return valueToReturn;
-}
+}
+
+exports.useRemoteSubscription = useRemoteSubscription;

build/cjs/host/context.js

@@ -1,13 +0,11 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RemoteReceiverContext = exports.ControllerContext = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _react = require("react");
+var react = require('react');
 
-var ControllerContext = /*#__PURE__*/(0, _react.createContext)(null);
+var ControllerContext = /*#__PURE__*/react.createContext(null);
+var RemoteReceiverContext = /*#__PURE__*/react.createContext(null);
+
 exports.ControllerContext = ControllerContext;
-var RemoteReceiverContext = /*#__PURE__*/(0, _react.createContext)(null);
-exports.RemoteReceiverContext = RemoteReceiverContext;
+exports.RemoteReceiverContext = RemoteReceiverContext;

build/cjs/host/controller.js

@@ -1,7 +0,4 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createController = createController;
+Object.defineProperty(exports, '__esModule', { value: true });
 
@@ -21,2 +18,4 @@ function createController(components) {
   };
-}
+}
+
+exports.createController = createController;

build/cjs/host/hooks.js

@@ -1,38 +0,11 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useController = useController;
-exports.useRemoteReceiver = useRemoteReceiver;
-exports.useAttached = useAttached;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _react = require("react");
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('react');
+var context = require('./context.js');
 
-var _context = require("./context.js");
-
-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 _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; }
-
-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 useController() {
-  var controller = (0, _react.useContext)(_context.ControllerContext);
-
-  if (controller == null) {
-    throw new Error('No remote-ui Controller instance found in context');
-  }
-
-  return controller;
-}
-
 function useRemoteReceiver() {
-  var receiver = (0, _react.useContext)(_context.RemoteReceiverContext);
+  var receiver = react.useContext(context.RemoteReceiverContext);
 
@@ -45,5 +18,4 @@ if (receiver == null) {
 }
-
 function useAttached(receiver, attached) {
-  var _useState = (0, _react.useState)({
+  var _useState = react.useState({
     receiver: receiver,
@@ -54,3 +26,3 @@ id: attached.id,
   }),
-      _useState2 = _slicedToArray(_useState, 2),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       state = _useState2[0],
@@ -79,4 +51,4 @@ setState = _useState2[1];
 
-  (0, _react.useDebugValue)(returnValue);
-  (0, _react.useEffect)(function () {
+  react.useDebugValue(returnValue);
+  react.useEffect(function () {
     var didUnsubscribe = false;
@@ -128,2 +100,5 @@
   return returnValue;
-}
+}
+
+exports.useAttached = useAttached;
+exports.useRemoteReceiver = useRemoteReceiver;

build/cjs/host/index.js

@@ -1,59 +0,25 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "createRemoteReceiver", {
-  enumerable: true,
-  get: function get() {
-    return _core.createRemoteReceiver;
-  }
-});
-Object.defineProperty(exports, "RemoteRenderer", {
-  enumerable: true,
-  get: function get() {
-    return _RemoteRenderer.RemoteRenderer;
-  }
-});
-Object.defineProperty(exports, "createController", {
-  enumerable: true,
-  get: function get() {
-    return _controller.createController;
-  }
-});
-Object.defineProperty(exports, "RemoteReceiverContext", {
-  enumerable: true,
-  get: function get() {
-    return _context.RemoteReceiverContext;
-  }
-});
-Object.defineProperty(exports, "ControllerContext", {
-  enumerable: true,
-  get: function get() {
-    return _context.ControllerContext;
-  }
-});
-Object.defineProperty(exports, "useRemoteReceiver", {
-  enumerable: true,
-  get: function get() {
-    return _hooks.useRemoteReceiver;
-  }
-});
-Object.defineProperty(exports, "useWorker", {
-  enumerable: true,
-  get: function get() {
-    return _workers.useWorker;
-  }
-});
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _core = require("@remote-ui/core");
+var core = require('@remote-ui/core');
+var RemoteRenderer = require('./RemoteRenderer.js');
+var controller = require('./controller.js');
+var context = require('./context.js');
+var hooks = require('./hooks.js');
+var workers = require('./workers.js');
 
-var _RemoteRenderer = require("./RemoteRenderer.js");
 
-var _controller = require("./controller.js");
 
-var _context = require("./context.js");
-
-var _hooks = require("./hooks.js");
-
-var _workers = require("./workers.js");
+Object.defineProperty(exports, 'createRemoteReceiver', {
+  enumerable: true,
+  get: function () {
+    return core.createRemoteReceiver;
+  }
+});
+exports.RemoteRenderer = RemoteRenderer.RemoteRenderer;
+exports.createController = controller.createController;
+exports.ControllerContext = context.ControllerContext;
+exports.RemoteReceiverContext = context.RemoteReceiverContext;
+exports.useRemoteReceiver = hooks.useRemoteReceiver;
+exports.useWorker = workers.useWorker;

build/cjs/host/RemoteComponent.js

@@ -1,57 +0,65 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RemoteComponent = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _jsxRuntime = require("react/jsx-runtime");
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var core = require('@remote-ui/core');
+var RemoteText = require('./RemoteText.js');
+var hooks = require('./hooks.js');
 
-var _react = require("react");
+var emptyObject = {};
+var RemoteComponent = /*#__PURE__*/react.memo(function (_ref) {
+  var receiver = _ref.receiver,
+      component = _ref.component,
+      controller = _ref.controller;
+  var Implementation = controller.get(component.type);
+  var attached = hooks.useAttached(receiver, component);
+  var props = react.useMemo(function () {
+    var props = attached === null || attached === void 0 ? void 0 : attached.props;
+    if (!props) return emptyObject;
+    var newProps = {};
 
-var _core = require("@remote-ui/core");
+    for (var _i = 0, _Object$keys = Object.keys(props); _i < _Object$keys.length; _i++) {
+      var key = _Object$keys[_i];
+      var prop = props[key];
+      newProps[key] = core.isRemoteReceiverAttachableFragment(prop) ? /*#__PURE__*/jsxRuntime.jsx(RemoteFragment, {
+        receiver: receiver,
+        fragment: prop,
+        controller: controller
+      }) : prop;
+    }
 
-var _RemoteText = require("./RemoteText.js");
+    return newProps;
+  }, [receiver, controller, attached === null || attached === void 0 ? void 0 : attached.props, component.version]);
+  if (attached == null) return null;
+  var children = attached.children;
+  return /*#__PURE__*/jsxRuntime.jsx(Implementation, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+    children: renderChildren(children, receiver, controller)
+  }));
+});
+var RemoteFragment = /*#__PURE__*/react.memo(function (_ref2) {
+  var _useAttached;
 
-var _hooks = require("./hooks.js");
+  var receiver = _ref2.receiver,
+      fragment = _ref2.fragment,
+      controller = _ref2.controller;
 
-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; }
+  var _ref3 = (_useAttached = hooks.useAttached(receiver, fragment)) !== null && _useAttached !== void 0 ? _useAttached : {},
+      children = _ref3.children;
 
-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; }
+  if (!children) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: renderChildren(children, receiver, controller)
+  });
+});
 
-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 renderChildren(children, receiver, controller) {
+  return _rollupPluginBabelHelpers.toConsumableArray(children).map(function (child) {
+    var _controller$get;
 
-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 _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 _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 _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 RemoteComponent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var receiver = _ref.receiver,
-      component = _ref.component,
-      controller = _ref.controller;
-  var Implementation = controller.get(component.type);
-  var attached = (0, _hooks.useAttached)(receiver, component);
-  var props = attached === null || attached === void 0 ? void 0 : attached.props;
-  (0, _react.useEffect)(function () {
-    (0, _core.retain)(props);
-    return function () {
-      (0, _core.release)(props);
-    };
-  }, [props]);
-  if (attached == null) return null;
-  var children = attached.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Implementation, _objectSpread(_objectSpread({}, props), {}, {
-    children: _toConsumableArray(children).map(function (child) {
-      if ('children' in child) {
-        var _controller$get;
-
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoteComponent, {
+    switch (child.kind) {
+      case core.KIND_COMPONENT:
+        return /*#__PURE__*/jsxRuntime.jsx(RemoteComponent, {
           receiver: receiver,
@@ -62,11 +70,15 @@ component: child,
         }, child.id);
-      } else {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RemoteText.RemoteText, {
+
+      case core.KIND_TEXT:
+        return /*#__PURE__*/jsxRuntime.jsx(RemoteText.RemoteText, {
           text: child,
           receiver: receiver
         }, child.id);
-      }
-    })
-  }));
-});
-exports.RemoteComponent = RemoteComponent;
+
+      default:
+        return null;
+    }
+  });
+}
+
+exports.RemoteComponent = RemoteComponent;

build/cjs/host/RemoteRenderer.js

@@ -1,28 +0,20 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RemoteRenderer = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _jsxRuntime = require("react/jsx-runtime");
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var core = require('@remote-ui/core');
+var hooks = require('./hooks.js');
+var RemoteText = require('./RemoteText.js');
+var RemoteComponent = require('./RemoteComponent.js');
 
-var _react = require("react");
-
-var _core = require("@remote-ui/core");
-
-var _hooks = require("./hooks.js");
-
-var _RemoteText = require("./RemoteText.js");
-
-var _RemoteComponent = require("./RemoteComponent.js");
-
-var RemoteRenderer = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+var RemoteRenderer = /*#__PURE__*/react.memo(function (_ref) {
   var controller = _ref.controller,
       receiver = _ref.receiver;
 
-  var _ref2 = (0, _hooks.useAttached)(receiver, receiver.attached.root),
+  var _ref2 = hooks.useAttached(receiver, receiver.attached.root),
       children = _ref2.children;
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: children.map(function (child) {
@@ -32,4 +24,4 @@ var _controller$get;
       switch (child.kind) {
-        case _core.KIND_COMPONENT:
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RemoteComponent.RemoteComponent, {
+        case core.KIND_COMPONENT:
+          return /*#__PURE__*/jsxRuntime.jsx(RemoteComponent.RemoteComponent, {
             component: child,
@@ -41,4 +33,4 @@ receiver: receiver,
 
-        case _core.KIND_TEXT:
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RemoteText.RemoteText, {
+        case core.KIND_TEXT:
+          return /*#__PURE__*/jsxRuntime.jsx(RemoteText.RemoteText, {
             text: child,
@@ -54,2 +46,3 @@ receiver: receiver
 });
-exports.RemoteRenderer = RemoteRenderer;
+
+exports.RemoteRenderer = RemoteRenderer;

build/cjs/host/RemoteText.js

@@ -1,22 +0,18 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RemoteText = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _jsxRuntime = require("react/jsx-runtime");
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('./hooks.js');
 
-var _react = require("react");
-
-var _hooks = require("./hooks.js");
-
-var RemoteText = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+var RemoteText = /*#__PURE__*/react.memo(function (_ref) {
   var text = _ref.text,
       receiver = _ref.receiver;
-  var attached = (0, _hooks.useAttached)(receiver, text);
-  return attached ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+  var attached = hooks.useAttached(receiver, text);
+  return attached ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: attached.text
   }) : null;
 });
-exports.RemoteText = RemoteText;
+
+exports.RemoteText = RemoteText;

build/cjs/host/workers.js

@@ -1,14 +0,10 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useWorker = useWorker;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _react = require("react");
+var react = require('react');
+var webWorkers = require('@remote-ui/web-workers');
 
-var _webWorkers = require("@remote-ui/web-workers");
-
 function useWorker(creator) {
-  var workerRef = (0, _react.useRef)(null);
+  var workerRef = react.useRef(null);
 
@@ -24,8 +20,10 @@ if (workerRef.current === null) {
   var worker = workerRef.current;
-  (0, _react.useEffect)(function () {
+  react.useEffect(function () {
     return function () {
-      (0, _webWorkers.terminate)(worker);
+      webWorkers.terminate(worker);
     };
   }, [worker]);
   return worker;
-}
+}
+
+exports.useWorker = useWorker;

build/cjs/index.js

@@ -1,51 +0,33 @@
-"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 core = require('@remote-ui/core');
+var render = require('./render.js');
+var components = require('./components.js');
+var subscription = require('./hooks/subscription.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, "createRemoteRoot", {
+Object.defineProperty(exports, 'createRemoteRoot', {
   enumerable: true,
-  get: function get() {
-    return _core.createRemoteRoot;
+  get: function () {
+    return core.createRemoteRoot;
   }
 });
-Object.defineProperty(exports, "render", {
-  enumerable: true,
-  get: function get() {
-    return _render.render;
-  }
-});
-Object.defineProperty(exports, "createRemoteReactComponent", {
-  enumerable: true,
-  get: function get() {
-    return _components.createRemoteReactComponent;
-  }
-});
-Object.defineProperty(exports, "useRemoteSubscription", {
-  enumerable: true,
-  get: function get() {
-    return _index.useRemoteSubscription;
-  }
-});
-
-var _rpc = require("@remote-ui/rpc");
-
-var _core = require("@remote-ui/core");
-
-var _render = require("./render.js");
-
-var _components = require("./components.js");
-
-var _index = require("./hooks/index.js");
+exports.render = render.render;
+exports.createRemoteReactComponent = components.createRemoteReactComponent;
+exports.useRemoteSubscription = subscription.useRemoteSubscription;

build/cjs/reconciler.js

@@ -1,23 +0,13 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _reactReconciler = _interopRequireDefault(require("react-reconciler"));
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var reactReconciler = require('react-reconciler');
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-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(_e) { throw _e; }, 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(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+var reactReconciler__default = /*#__PURE__*/_interopDefaultLegacy(reactReconciler);
 
-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; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-var reconciler = (0, _reactReconciler["default"])({
+var reconciler = reactReconciler__default['default']({
   now: Date.now,
@@ -30,3 +20,3 @@ // Timeout
   queueMicrotask: function queueMicrotask(callback) {
-    return Promise.resolve(null).then(callback)["catch"](handleErrorInNextTick);
+    return Promise.resolve(null).then(callback).catch(handleErrorInNextTick);
   },
@@ -45,10 +35,10 @@ isPrimaryRenderer: true,
   // Instances
-  createTextInstance: function createTextInstance(text, fragment) {
-    return fragment.createText(text);
+  createTextInstance: function createTextInstance(text, root) {
+    return root.createText(text);
   },
-  createInstance: function createInstance(type, allProps, fragment) {
-    var _children = allProps.children,
-        props = _objectWithoutProperties(allProps, ["children"]);
+  createInstance: function createInstance(type, allProps, root) {
+    allProps.children;
+        var props = _rollupPluginBabelHelpers.objectWithoutProperties(allProps, ["children"]);
 
-    return fragment.createComponent(type, props);
+    return root.createComponent(type, props);
   },
@@ -114,3 +104,3 @@ // Updates
   clearContainer: function clearContainer(remoteRoot) {
-    var _iterator = _createForOfIteratorHelper(remoteRoot.children),
+    var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(remoteRoot.children),
         _step;
@@ -171,3 +161,2 @@
 
-var _default = reconciler;
-exports["default"] = _default;
+exports.default = reconciler;

build/cjs/render.js

@@ -1,20 +0,23 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.render = render;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _reconciler = _interopRequireDefault(require("./reconciler.js"));
+var jsxRuntime = require('react/jsx-runtime');
+var reconciler = require('./reconciler.js');
+var context = require('./context.js');
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function render(element, root, callback) {
   // @see https://github.com/facebook/react/blob/993ca533b42756811731f6b7791ae06a35ee6b4d/packages/react-reconciler/src/ReactRootTags.js
   // I think we are a legacy root?
-  var container = _reconciler["default"].createContainer(root, 0, false, null); // callback is cast here because the typings do not mark that argument
+  var container = reconciler['default'].createContainer(root, 0, false, null);
+  var renderContextValue = {
+    root: root,
+    reconciler: reconciler['default']
+  }; // callback is cast here because the typings do not mark that argument
   // as optional, even though it is.
 
-
-  _reconciler["default"].updateContainer(element, container, null, callback); // Did not work for me because (I think?) it is done by the worker
+  reconciler['default'].updateContainer( /*#__PURE__*/jsxRuntime.jsx(context.RenderContext.Provider, {
+    value: renderContextValue,
+    children: element
+  }), container, null, callback); // Did not work for me because (I think?) it is done by the worker
   // and therefore has an entirely different React.
@@ -32,3 +35,4 @@ //
   // });
+}
 
-}
+exports.render = render;

build/ts/components.d.ts

 import type { RemoteComponentType } from '@remote-ui/core';
 import type { ReactComponentTypeFromRemoteComponentType } from './types';
-export declare function createRemoteReactComponent<Type extends string, Props = {}, AllowedChildren extends RemoteComponentType<string, any> | boolean = true>(componentType: Type | RemoteComponentType<Type, Props, AllowedChildren>): RemoteComponentType<Type, Props, AllowedChildren> & ReactComponentTypeFromRemoteComponentType<RemoteComponentType<Type, Props, AllowedChildren>>;
+interface Options<Props> {
+    fragmentProps?: (keyof Props)[];
+}
+export declare function createRemoteReactComponent<Type extends string, Props = {}, AllowedChildren extends RemoteComponentType<string, any> | boolean = true>(componentType: Type | RemoteComponentType<Type, Props, AllowedChildren>, { fragmentProps }?: Options<Props>): RemoteComponentType<Type, Props, AllowedChildren> & ReactComponentTypeFromRemoteComponentType<RemoteComponentType<Type, Props, AllowedChildren>>;
+export {};
 //# sourceMappingURL=components.d.ts.map

build/ts/components.js

 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRemoteReactComponent = void 0;
-function createRemoteReactComponent(componentType) {
-    return componentType;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("@remote-ui/core");
+const hooks_1 = require("./hooks");
+function createRemoteReactComponent(componentType, { fragmentProps } = {}) {
+    if (!fragmentProps || !fragmentProps.length) {
+        return componentType;
+    }
+    const wrapper = createComponentWrapper(componentType, fragmentProps);
+    wrapper.displayName = componentType;
+    return wrapper;
 }
 exports.createRemoteReactComponent = createRemoteReactComponent;
+function createComponentWrapper(componentType, fragmentProps) {
+    const Component = componentType;
+    return react_1.memo(function ComponentWrapper(_a) {
+        var { children: externalChildren = [] } = _a, externalProps = __rest(_a, ["children"]);
+        const fragments = react_1.useRef({});
+        const { root, reconciler } = hooks_1.useRender();
+        const { props, children } = react_1.useMemo(() => {
+            // React portals need to be attached to the tree after intialize in order to render.
+            // It's usually done by appending them as children of a parent node.
+            // @see https://reactjs.org/docs/portals.html
+            const portals = [];
+            const props = {};
+            for (const key of Object.keys(externalProps)) {
+                const element = externalProps[key];
+                if (fragmentProps.includes(key) && react_1.isValidElement(element)) {
+                    const currentFragment = fragments.current[key];
+                    const fragment = core_1.isRemoteFragment(currentFragment)
+                        ? currentFragment
+                        : root.createFragment();
+                    fragments.current[key] = fragment;
+                    // Assign createText and createComponent to fragment
+                    // so that it can become a React container to render the portal
+                    Object.assign(fragment, {
+                        createText(...args) {
+                            return root.createText(...args);
+                        },
+                        createComponent(type, ...args) {
+                            return root.createComponent(type, ...args);
+                        },
+                    });
+                    const portal = reconciler.createPortal(element, fragment, null, null);
+                    portals.push(portal);
+                    props[key] = fragment;
+                }
+                else {
+                    props[key] = element;
+                    delete fragments.current[key];
+                }
+            }
+            return { props, children: [...externalChildren, ...portals] };
+        }, [externalChildren, externalProps, root, reconciler, fragments]);
+        return jsx_runtime_1.jsx(Component, Object.assign({}, props, { children: children }), void 0);
+    });
+}

build/ts/hooks/index.d.ts

 export { useRemoteSubscription } from './subscription';
+export { useRender } from './render';
 //# sourceMappingURL=index.d.ts.map

build/ts/hooks/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRemoteSubscription = void 0;
+exports.useRender = exports.useRemoteSubscription = void 0;
 var subscription_1 = require("./subscription");
 Object.defineProperty(exports, "useRemoteSubscription", { enumerable: true, get: function () { return subscription_1.useRemoteSubscription; } });
+var render_1 = require("./render");
+Object.defineProperty(exports, "useRender", { enumerable: true, get: function () { return render_1.useRender; } });

build/ts/host/RemoteComponent.js

@@ -9,24 +9,41 @@ "use strict";
 const hooks_1 = require("./hooks");
+const emptyObject = {};
 exports.RemoteComponent = react_1.memo(({ receiver, component, controller }) => {
     const Implementation = controller.get(component.type);
     const attached = hooks_1.useAttached(receiver, component);
-    const props = attached === null || attached === void 0 ? void 0 : attached.props;
-    react_1.useEffect(() => {
-        core_1.retain(props);
-        return () => {
-            core_1.release(props);
-        };
-    }, [props]);
+    const props = react_1.useMemo(() => {
+        const props = attached === null || attached === void 0 ? void 0 : attached.props;
+        if (!props)
+            return emptyObject;
+        const newProps = {};
+        for (const key of Object.keys(props)) {
+            const prop = props[key];
+            newProps[key] = core_1.isRemoteReceiverAttachableFragment(prop) ? (jsx_runtime_1.jsx(RemoteFragment, { receiver: receiver, fragment: prop, controller: controller }, void 0)) : (prop);
+        }
+        return newProps;
+    }, [receiver, controller, attached === null || attached === void 0 ? void 0 : attached.props, component.version]);
     if (attached == null)
         return null;
     const { children } = attached;
-    return (jsx_runtime_1.jsx(Implementation, Object.assign({}, props, { children: [...children].map((child) => {
-            var _a;
-            if ('children' in child) {
+    return (jsx_runtime_1.jsx(Implementation, Object.assign({}, props, { children: renderChildren(children, receiver, controller) }), void 0));
+});
+const RemoteFragment = react_1.memo(({ receiver, fragment, controller }) => {
+    var _a;
+    const { children } = (_a = hooks_1.useAttached(receiver, fragment)) !== null && _a !== void 0 ? _a : {};
+    if (!children)
+        return null;
+    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: renderChildren(children, receiver, controller) }, void 0);
+});
+function renderChildren(children, receiver, controller) {
+    return [...children].map((child) => {
+        var _a;
+        switch (child.kind) {
+            case core_1.KIND_COMPONENT:
                 return (jsx_runtime_1.jsx(exports.RemoteComponent, { receiver: receiver, component: child, controller: controller, __type__: (_a = controller.get(child.type)) === null || _a === void 0 ? void 0 : _a.__type__ }, child.id));
-            }
-            else {
-                return (jsx_runtime_1.jsx(RemoteText_1.RemoteText, { text: child, receiver: receiver }, child.id));
-            }
-        }) }), void 0));
-});
+            case core_1.KIND_TEXT:
+                return jsx_runtime_1.jsx(RemoteText_1.RemoteText, { text: child, receiver: receiver }, child.id);
+            default:
+                return null;
+        }
+    });
+}

build/ts/reconciler.js

@@ -38,8 +38,8 @@ "use strict";
     // Instances
-    createTextInstance(text, fragment) {
-        return fragment.createText(text);
+    createTextInstance(text, root) {
+        return root.createText(text);
     },
-    createInstance(type, allProps, fragment) {
+    createInstance(type, allProps, root) {
         const { children: _children } = allProps, props = __rest(allProps, ["children"]);
-        return fragment.createComponent(type, props);
+        return root.createComponent(type, props);
     },
@@ -46,0 +46,0 @@ // Updates

build/ts/render.js

@@ -7,3 +7,5 @@ "use strict";
 exports.render = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const reconciler_1 = __importDefault(require("./reconciler"));
+const context_1 = require("./context");
 function render(element, root, callback) {
@@ -13,5 +15,6 @@ // @see https://github.com/facebook/react/blob/993ca533b42756811731f6b7791ae06a35ee6b4d/packages/react-reconciler/src/ReactRootTags.js
     const container = reconciler_1.default.createContainer(root, 0, false, null);
+    const renderContextValue = { root, reconciler: reconciler_1.default };
     // callback is cast here because the typings do not mark that argument
     // as optional, even though it is.
-    reconciler_1.default.updateContainer(element, container, null, callback);
+    reconciler_1.default.updateContainer(jsx_runtime_1.jsx(context_1.RenderContext.Provider, Object.assign({ value: renderContextValue }, { children: element }), void 0), container, null, callback);
     // Did not work for me because (I think?) it is done by the worker
@@ -18,0 +21,0 @@ // and therefore has an entirely different React.

build/ts/tests/e2e.test.js

@@ -10,3 +10,3 @@ "use strict";
 const __1 = require("..");
-const RemoteHelloWorld = __1.createRemoteReactComponent('HelloWorld');
+const RemoteHelloWorld = __1.createRemoteReactComponent('HelloWorld', { fragmentProps: ['name'] });
 const RemoteWithPerson = __1.createRemoteReactComponent('WithPerson');
@@ -39,3 +39,3 @@ const PersonContext = react_1.createContext({ name: 'Mollie' });
         const remoteRoot = core_1.createRemoteRoot(receiver.receive, {
-            components: [RemoteHelloWorld],
+            components: [RemoteHelloWorld.displayName],
         });
@@ -58,2 +58,29 @@ function RemoteApp() {
     });
+    it('renders component with fragment as prop across a remote bridge', () => {
+        const name = 'Winston';
+        const receiver = core_1.createRemoteReceiver();
+        const remoteRoot = core_1.createRemoteRoot(receiver.receive, {
+            components: [RemoteHelloWorld.displayName],
+        });
+        const NameContext = react_1.createContext('');
+        function ActualApp() {
+            const name = react_1.useContext(NameContext);
+            return jsx_runtime_1.jsx(RemoteHelloWorld, { name: jsx_runtime_1.jsx(RemoteHelloWorld, { name: name }, void 0) }, void 0);
+        }
+        function RemoteApp() {
+            return (jsx_runtime_1.jsx(NameContext.Provider, Object.assign({ value: name }, { children: jsx_runtime_1.jsx(ActualApp, {}, void 0) }), void 0));
+        }
+        const controller = host_1.createController({ HelloWorld: HostHelloWorld });
+        function HostApp() {
+            return jsx_runtime_1.jsx(host_1.RemoteRenderer, { controller: controller, receiver: receiver }, void 0);
+        }
+        test_utils_1.act(() => {
+            react_dom_1.render(jsx_runtime_1.jsx(HostApp, {}, void 0), appElement);
+            __1.render(jsx_runtime_1.jsx(RemoteApp, {}, void 0), remoteRoot, () => {
+                remoteRoot.mount();
+            });
+            jest.runAllTimers();
+        });
+        expect(appElement.innerHTML).toBe(`<div>Hello, <div>Hello, ${name}</div></div>`);
+    });
     it('handles function props on remote components', () => {
@@ -60,0 +87,0 @@ const person = { name: 'Luna' };

build/ts/types.d.ts

@@ -1,3 +0,7 @@
-import type { ReactNode, ComponentType } from 'react';
-import type { RemoteComponentType, PropsForRemoteComponent } from '@remote-ui/core';
+import type { ReactNode, ComponentType, ReactElement } from 'react';
+import type { RemoteComponentType, RemoteFragment } from '@remote-ui/core';
+declare type PropsForRemoteComponent<T> = T extends RemoteComponentType<string, infer Props, any> ? {
+    [K in keyof Props]: RemoteFragmentToReactElement<Props[K]>;
+} : never;
+declare type RemoteFragmentToReactElement<T> = T extends RemoteFragment<infer R> ? ReactElement | false | RemoteFragment<R> : T;
 export declare type ReactPropsFromRemoteComponentType<Type extends RemoteComponentType<string, any, any>> = PropsForRemoteComponent<Type> & {
@@ -7,2 +11,3 @@ children?: ReactNode;
 export declare type ReactComponentTypeFromRemoteComponentType<Type extends RemoteComponentType<string, any, any>> = ComponentType<ReactPropsFromRemoteComponentType<Type>>;
+export {};
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@remote-ui/react",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "publishConfig": {
@@ -34,10 +34,10 @@ "access": "public",
   "dependencies": {
-    "@remote-ui/async-subscription": "^2.0.0",
-    "@remote-ui/core": "^2.0.1",
-    "@remote-ui/rpc": "^1.0.17",
-    "@remote-ui/web-workers": "^1.4.1",
+    "@remote-ui/async-subscription": "^2.0.1",
+    "@remote-ui/core": "^2.0.2",
+    "@remote-ui/rpc": "^1.0.18",
+    "@remote-ui/web-workers": "^1.4.2",
     "@types/react": ">=17.0.0 <18.0.0",
     "react-reconciler": ">=0.26.0 <1.0.0"
   },
-  "gitHead": "f8b2cf288f17732927233ccdebbbd4d6425b2938"
+  "gitHead": "0550a299ecee6327dd8751ac1809a7c614aed141"
 }

sewing-kit.config.ts

@@ -1,5 +0,6 @@
-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'});
@@ -6,0 +7,0 @@ pkg.entry({root: './src/host', name: 'host'});

src/hooks/index.ts

 export {useRemoteSubscription} from './subscription';
+export {useRender} from './render';

src/reconciler.ts

@@ -62,8 +62,8 @@ import reactReconciler from 'react-reconciler';
   // Instances
-  createTextInstance(text, fragment) {
-    return fragment.createText(text);
+  createTextInstance(text, root) {
+    return root.createText(text);
   },
-  createInstance(type, allProps, fragment) {
+  createInstance(type, allProps, root) {
     const {children: _children, ...props} = allProps;
-    return fragment.createComponent(type, props as any);
+    return root.createComponent(type, props);
   },
@@ -77,3 +77,2 @@
     const updateProps: Record<string, unknown> = {};
-
     let needsUpdate = false;
@@ -80,0 +79,0 @@

src/types.ts

@@ -1,10 +0,21 @@
-import type {ReactNode, ComponentType} from 'react';
-import type {
-  RemoteComponentType,
-  PropsForRemoteComponent,
-} from '@remote-ui/core';
+import type {ReactNode, ComponentType, ReactElement} from 'react';
+import type {RemoteComponentType, RemoteFragment} from '@remote-ui/core';
 
+type PropsForRemoteComponent<T> = T extends RemoteComponentType<
+  string,
+  infer Props,
+  any
+>
+  ? {[K in keyof Props]: RemoteFragmentToReactElement<Props[K]>}
+  : never;
+
+type RemoteFragmentToReactElement<T> = T extends RemoteFragment<infer R>
+  ? ReactElement | false | RemoteFragment<R>
+  : T;
+
 export type ReactPropsFromRemoteComponentType<
   Type extends RemoteComponentType<string, any, any>
-> = PropsForRemoteComponent<Type> & {children?: ReactNode};
+> = PropsForRemoteComponent<Type> & {
+  children?: ReactNode;
+};
 
@@ -11,0 +22,0 @@ export type ReactComponentTypeFromRemoteComponentType<

No alert changes

Improved metrics

Total package byte prevSize

293207

increased by2.29%

Lines of code

3077

increased by8.46%

Worsened metrics

Number of package files

134

decreased by-3.6%

Dependency changes

• Updated@remote-ui/async-subscription@^2.0.1

• Updated@remote-ui/core@^2.0.2

• Updated@remote-ui/rpc@^1.0.18

• Updated@remote-ui/web-workers@^1.4.2