@remote-ui/core - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

build/cjs/root.js

@@ -48,8 +48,5 @@ "use strict";
     createComponent: function createComponent(type) {
-      for (var _len = arguments.length, propsPart = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        propsPart[_key - 1] = arguments[_key];
-      }
+      var initialProps = arguments.length <= 1 ? undefined : arguments[1];
+      var initialChildren = arguments.length <= 2 ? undefined : arguments[2];
 
-      var initialProps = propsPart[0];
-
       if (initialProps) {
@@ -108,3 +105,27 @@ // "children" as a prop can be extremely confusing with the "children" of
       props.set(component, strict ? Object.freeze(initialProps) : initialProps);
-      children.set(component, strict ? Object.freeze([]) : []);
+
+      if (initialChildren) {
+        var normalizedChildren = [];
+
+        var _iterator = _createForOfIteratorHelper(initialChildren),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var child = _step.value;
+            var normalizedChild = typeof child === 'string' ? remoteRoot.createText(child) : child;
+            normalizedChildren.push(normalizedChild);
+            moveChildToContainer(component, normalizedChild);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
+        children.set(component, strict ? Object.freeze(normalizedChildren) : normalizedChildren);
+      } else {
+        children.set(component, strict ? Object.freeze([]) : []);
+      }
+
       return component;
@@ -157,8 +178,8 @@ },
       if ('children' in element) {
-        var _iterator = _createForOfIteratorHelper(element.children),
-            _step;
+        var _iterator2 = _createForOfIteratorHelper(element.children),
+            _step2;
 
         try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var child = _step.value;
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var child = _step2.value;
             withEach(child);
@@ -168,5 +189,5 @@ recurse(child);
         } catch (err) {
-          _iterator.e(err);
+          _iterator2.e(err);
         } finally {
-          _iterator.f();
+          _iterator2.f();
         }
@@ -236,8 +257,3 @@ }
 
-        var newTop = container === remoteRoot ? remoteRoot : tops.get(container);
-        parents.set(normalizedChild, container);
-        tops.set(normalizedChild, newTop);
-        allDescendants(normalizedChild, function (descendant) {
-          return tops.set(descendant, newTop);
-        });
+        moveChildToContainer(container, normalizedChild);
         var mergedChildren = [].concat(_toConsumableArray((_children$get = children.get(container)) !== null && _children$get !== void 0 ? _children$get : []), [normalizedChild]);
@@ -285,8 +301,3 @@ children.set(container, strict ? Object.freeze(mergedChildren) : mergedChildren);
       local: function local() {
-        var newTop = container === remoteRoot ? remoteRoot : tops.get(container);
-        tops.set(child, newTop);
-        parents.set(child, container);
-        allDescendants(child, function (descendant) {
-          return tops.set(descendant, newTop);
-        });
+        moveChildToContainer(container, child);
 
@@ -301,2 +312,11 @@ var newChildren = _toConsumableArray(children.get(container) || []);
 
+  function moveChildToContainer(container, child) {
+    var newTop = container === remoteRoot ? remoteRoot : tops.get(container);
+    tops.set(child, newTop);
+    parents.set(child, container);
+    allDescendants(child, function (descendant) {
+      return tops.set(descendant, newTop);
+    });
+  }
+
   function makePartOfTree(value) {
@@ -303,0 +323,0 @@ Reflect.defineProperty(value, 'parent', {

build/node/root.js

@@ -25,4 +25,5 @@ "use strict";
 
-    createComponent(type, ...propsPart) {
-      let [initialProps] = propsPart;
+    createComponent(type, ...rest) {
+      let initialProps = rest[0];
+      const initialChildren = rest[1];
 
@@ -77,3 +78,17 @@ if (initialProps) {
       props.set(component, strict ? Object.freeze(initialProps) : initialProps);
-      children.set(component, strict ? Object.freeze([]) : []);
+
+      if (initialChildren) {
+        const normalizedChildren = [];
+
+        for (const child of initialChildren) {
+          const normalizedChild = typeof child === 'string' ? remoteRoot.createText(child) : child;
+          normalizedChildren.push(normalizedChild);
+          moveChildToContainer(component, normalizedChild);
+        }
+
+        children.set(component, strict ? Object.freeze(normalizedChildren) : normalizedChildren);
+      } else {
+        children.set(component, strict ? Object.freeze([]) : []);
+      }
+
       return component;
@@ -182,6 +197,3 @@ },
 
-        const newTop = container === remoteRoot ? remoteRoot : tops.get(container);
-        parents.set(normalizedChild, container);
-        tops.set(normalizedChild, newTop);
-        allDescendants(normalizedChild, descendant => tops.set(descendant, newTop));
+        moveChildToContainer(container, normalizedChild);
         const mergedChildren = [...((_children$get = children.get(container)) !== null && _children$get !== void 0 ? _children$get : []), normalizedChild];
@@ -221,6 +233,3 @@ children.set(container, strict ? Object.freeze(mergedChildren) : mergedChildren);
       local: () => {
-        const newTop = container === remoteRoot ? remoteRoot : tops.get(container);
-        tops.set(child, newTop);
-        parents.set(child, container);
-        allDescendants(child, descendant => tops.set(descendant, newTop));
+        moveChildToContainer(container, child);
         const newChildren = [...(children.get(container) || [])];
@@ -233,2 +242,9 @@ newChildren.splice(newChildren.indexOf(before), 0, child);
 
+  function moveChildToContainer(container, child) {
+    const newTop = container === remoteRoot ? remoteRoot : tops.get(container);
+    tops.set(child, newTop);
+    parents.set(child, container);
+    allDescendants(child, descendant => tops.set(descendant, newTop));
+  }
+
   function makePartOfTree(value) {
@@ -235,0 +251,0 @@ Reflect.defineProperty(value, 'parent', {

build/ts/root.js

@@ -17,4 +17,5 @@ "use strict";
         },
-        createComponent(type, ...propsPart) {
-            let [initialProps] = propsPart;
+        createComponent(type, ...rest) {
+            let initialProps = rest[0];
+            const initialChildren = rest[1];
             if (initialProps) {
@@ -53,3 +54,14 @@ // "children" as a prop can be extremely confusing with the "children" of
             props.set(component, strict ? Object.freeze(initialProps) : initialProps);
-            children.set(component, strict ? Object.freeze([]) : []);
+            if (initialChildren) {
+                const normalizedChildren = [];
+                for (const child of initialChildren) {
+                    const normalizedChild = typeof child === 'string' ? remoteRoot.createText(child) : child;
+                    normalizedChildren.push(normalizedChild);
+                    moveChildToContainer(component, normalizedChild);
+                }
+                children.set(component, strict ? Object.freeze(normalizedChildren) : normalizedChildren);
+            }
+            else {
+                children.set(component, strict ? Object.freeze([]) : []);
+            }
             return component;
@@ -133,6 +145,3 @@ },
                 var _a;
-                const newTop = container === remoteRoot ? remoteRoot : tops.get(container);
-                parents.set(normalizedChild, container);
-                tops.set(normalizedChild, newTop);
-                allDescendants(normalizedChild, (descendant) => tops.set(descendant, newTop));
+                moveChildToContainer(container, normalizedChild);
                 const mergedChildren = [
@@ -172,6 +181,3 @@ ...((_a = children.get(container)) !== null && _a !== void 0 ? _a : []),
             local: () => {
-                const newTop = container === remoteRoot ? remoteRoot : tops.get(container);
-                tops.set(child, newTop);
-                parents.set(child, container);
-                allDescendants(child, (descendant) => tops.set(descendant, newTop));
+                moveChildToContainer(container, child);
                 const newChildren = [...(children.get(container) || [])];
@@ -183,2 +189,8 @@ newChildren.splice(newChildren.indexOf(before), 0, child);
     }
+    function moveChildToContainer(container, child) {
+        const newTop = container === remoteRoot ? remoteRoot : tops.get(container);
+        tops.set(child, newTop);
+        parents.set(child, container);
+        allDescendants(child, (descendant) => tops.set(descendant, newTop));
+    }
     function makePartOfTree(value) {
@@ -185,0 +197,0 @@ Reflect.defineProperty(value, 'parent', {

build/ts/types.d.ts

@@ -39,3 +39,3 @@ import { RemoteComponentType, IdentifierForRemoteComponent, PropsForRemoteComponent } from '@remote-ui/types';
     insertChildBefore(child: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>, before: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>): void | Promise<void>;
-    createComponent<Type extends AllowedComponents>(type: Type, ...propsPart: IfAllOptionalKeys<PropsForRemoteComponent<Type>, [PropsForRemoteComponent<Type>?], [PropsForRemoteComponent<Type>]>): RemoteComponent<Type, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>;
+    createComponent<Type extends AllowedComponents>(type: Type, ...rest: IfAllOptionalKeys<PropsForRemoteComponent<Type>, [PropsForRemoteComponent<Type>?, Iterable<AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>>?], [PropsForRemoteComponent<Type>, Iterable<AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>>?]>): RemoteComponent<Type, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>;
     createText(text?: string): RemoteText<RemoteRoot<AllowedComponents, AllowedChildrenTypes>>;
@@ -42,0 +42,0 @@ mount(): Promise<void>;

CHANGELOG.md

@@ -10,2 +10,8 @@ # Changelog
 
+## [1.2.0] - 2020-06-25
+
+### Added
+
+- `RemoteRoot#createComponent()` now accepts an array of children as the third argument, which allows you to more seamlessly construct a large tree of nodes.
+
 ## [1.1.1] - 2020-06-24
@@ -12,0 +18,0 @@

package.json

 {
   "name": "@remote-ui/core",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "publishConfig": {
@@ -5,0 +5,0 @@ "access": "public",

README.md

@@ -74,2 +74,20 @@ # `@remote-ui/core`
 
+`createComponent` also accepts a third argument: an array of children. This can be used to construct a tree of components without requiring intermediate variables.
+
+```ts
+root.appendChild(
+  root.createComponent('BlockStack', undefined, [
+    root.createComponent(
+      'Button',
+      {
+        onPress() {
+          console.log('Pressed!');
+        },
+      },
+      ['Press me!'],
+    ),
+  ]),
+);
+```
+
 ##### `RemoteRoot#appendChild()`
@@ -76,0 +94,0 @@

src/root.ts

@@ -55,4 +55,5 @@ import {RemoteComponentType} from '@remote-ui/types';
     },
-    createComponent(type, ...propsPart) {
-      let [initialProps] = propsPart;
+    createComponent(type, ...rest) {
+      let initialProps = rest[0];
+      const initialChildren = rest[1];
 
@@ -108,4 +109,22 @@ if (initialProps) {
       props.set(component, strict ? Object.freeze(initialProps) : initialProps);
-      children.set(component, strict ? Object.freeze([]) : []);
 
+      if (initialChildren) {
+        const normalizedChildren: CanBeChild[] = [];
+
+        for (const child of initialChildren) {
+          const normalizedChild =
+            typeof child === 'string' ? remoteRoot.createText(child) : child;
+
+          normalizedChildren.push(normalizedChild);
+          moveChildToContainer(component, normalizedChild);
+        }
+
+        children.set(
+          component,
+          strict ? Object.freeze(normalizedChildren) : normalizedChildren,
+        );
+      } else {
+        children.set(component, strict ? Object.freeze([]) : []);
+      }
+
       return (component as unknown) as RemoteComponent<typeof type, Root>;
@@ -214,3 +233,2 @@ },
         const mergedProps = {...props.get(component), ...newProps};
-
         props.set(component, strict ? Object.freeze(mergedProps) : mergedProps);
@@ -234,11 +252,4 @@ },
       local: () => {
-        const newTop =
-          container === remoteRoot ? remoteRoot : tops.get(container as any)!;
+        moveChildToContainer(container, normalizedChild);
 
-        parents.set(normalizedChild, container);
-        tops.set(normalizedChild, newTop);
-        allDescendants(normalizedChild, (descendant) =>
-          tops.set(descendant, newTop),
-        );
-
         const mergedChildren = [
@@ -281,3 +292,3 @@ ...(children.get(container) ?? []),
         const newChildren = [...(children.get(container) ?? [])];
-        newChildren.splice(newChildren.indexOf(child as any), 1);
+        newChildren.splice(newChildren.indexOf(child), 1);
         children.set(
@@ -305,11 +316,7 @@ container,
       local: () => {
-        const newTop =
-          container === remoteRoot ? remoteRoot : tops.get(container as any)!;
+        moveChildToContainer(container, child);
 
-        tops.set(child, newTop);
-        parents.set(child, container);
-        allDescendants(child, (descendant) => tops.set(descendant, newTop));
+        const newChildren = [...(children.get(container) || [])];
+        newChildren.splice(newChildren.indexOf(before), 0, child);
 
-        const newChildren = [...(children.get(container) || [])];
-        newChildren.splice(newChildren.indexOf(before as any), 0, child);
         children.set(
@@ -323,2 +330,11 @@ container,
 
+  function moveChildToContainer(container: HasChildren, child: CanBeChild) {
+    const newTop =
+      container === remoteRoot ? remoteRoot : tops.get(container as any)!;
+
+    tops.set(child, newTop);
+    parents.set(child, container);
+    allDescendants(child, (descendant) => tops.set(descendant, newTop));
+  }
+
   function makePartOfTree(value: CanBeChild) {
@@ -325,0 +341,0 @@ Reflect.defineProperty(value, 'parent', {

src/types.ts

@@ -120,6 +120,22 @@ import {
     type: Type,
-    ...propsPart: IfAllOptionalKeys<
+    ...rest: IfAllOptionalKeys<
       PropsForRemoteComponent<Type>,
-      [PropsForRemoteComponent<Type>?],
-      [PropsForRemoteComponent<Type>]
+      [
+        PropsForRemoteComponent<Type>?,
+        Iterable<
+          AllowedChildren<
+            AllowedChildrenTypes,
+            RemoteRoot<AllowedComponents, AllowedChildrenTypes>
+          >
+        >?,
+      ],
+      [
+        PropsForRemoteComponent<Type>,
+        Iterable<
+          AllowedChildren<
+            AllowedChildrenTypes,
+            RemoteRoot<AllowedComponents, AllowedChildrenTypes>
+          >
+        >?,
+      ]
     >
@@ -126,0 +142,0 @@ ): RemoteComponent<Type, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>;

No alert changes

Improved metrics

Total package byte prevSize

390637

increased by1.03%

Lines of code

3148

increased by2.64%

Number of lines in readme file

321

increased by5.94%

No dependency changes