Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@remote-ui/core

Package Overview
Dependencies
Maintainers
3
Versions
86
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@remote-ui/core - npm Package Compare versions

Comparing version 2.1.16 to 2.2.0

58

build/cjs/root.js

@@ -105,6 +105,10 @@ 'use strict';

remove: () => remove(component),
updateProps: newProps => updateProps(component, newProps, internals, rootInternals),
append: (...children) => append(component, children.map(child => normalizeChild(child, remoteRoot)), 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),
replaceChildren: (...children) => replaceChildren(component, children.map(child => normalizeChild(child, remoteRoot)), internals, rootInternals),
insertBefore: (child, before) => insertBefore(component, normalizeChild(child, remoteRoot), before, internals, rootInternals),
insertChildBefore: (child, before) => insertBefore(component, normalizeChild(child, remoteRoot), before, internals, rootInternals),
// Just satisfying the type definition, since we need to write

@@ -138,2 +142,5 @@ // some properties manually, which we do below. If we just `as any`

};
const update = newText => updateText(text, newText, internals, rootInternals);
const text = {

@@ -146,3 +153,5 @@ kind: types.KIND_TEXT,

updateText: newText => updateText(text, newText, internals, rootInternals),
update,
updateText: update,
remove: () => remove(text),
// Just satisfying the type definition, since we need to write

@@ -169,5 +178,8 @@ // some properties manually.

append: (...children) => append(fragment, children.map(child => normalizeChild(child, remoteRoot)), internals, rootInternals),
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),
replaceChildren: (...children) => replaceChildren(fragment, children.map(child => normalizeChild(child, remoteRoot)), internals, rootInternals),
insertBefore: (child, before) => insertBefore(fragment, normalizeChild(child, remoteRoot), before, internals, rootInternals),
insertChildBefore: (child, before) => insertBefore(fragment, normalizeChild(child, remoteRoot), before, internals, rootInternals),
// Just satisfying the type definition, since we need to write

@@ -183,5 +195,8 @@ // some properties manually.

append: (...children) => append(remoteRoot, children.map(child => normalizeChild(child, remoteRoot)), rootInternals, rootInternals),
appendChild: child => appendChild(remoteRoot, normalizeChild(child, remoteRoot), rootInternals, rootInternals),
replaceChildren: (...children) => replaceChildren(remoteRoot, children.map(child => normalizeChild(child, remoteRoot)), rootInternals, rootInternals),
removeChild: child => removeChild(remoteRoot, child, rootInternals, rootInternals),
insertChildBefore: (child, before) => insertChildBefore(remoteRoot, normalizeChild(child, remoteRoot), before, rootInternals, rootInternals),
insertBefore: (child, before) => insertBefore(remoteRoot, normalizeChild(child, remoteRoot), before, rootInternals, rootInternals),
insertChildBefore: (child, before) => insertBefore(remoteRoot, normalizeChild(child, remoteRoot), before, rootInternals, rootInternals),

@@ -328,4 +343,4 @@ mount() {

//
// root.appendChild(textField);
// root.appendChild(button);
// root.append(textField);
// root.append(button);
//

@@ -450,2 +465,14 @@ // function getPropsForValue(value = '') {

function remove(child) {
var _child$parent;
(_child$parent = child.parent) === null || _child$parent === void 0 ? void 0 : _child$parent.removeChild(child);
}
function append(container, children, internals, rootInternals) {
for (const child of children) {
appendChild(container, child, internals, rootInternals);
}
}
function appendChild(container, child, internals, rootInternals) {

@@ -492,2 +519,10 @@ var _currentParent$childr;

});
}
function replaceChildren(container, children, internals, rootInternals) {
for (const child of container.children) {
removeChild(container, child, internals, rootInternals);
}
append(container, children, internals, rootInternals);
} // there is a problem with this, because when multiple children

@@ -519,3 +554,3 @@ // are removed, there is no guarantee the messages will arrive in the

function insertChildBefore(container, child, before, internals, rootInternals) {
function insertBefore(container, child, before, internals, rootInternals) {
var _currentParent$childr2;

@@ -536,3 +571,3 @@

remote: channel => {
const beforeIndex = container.children.indexOf(before);
const beforeIndex = before == null ? container.children.length - 1 : container.children.indexOf(before);
channel(types.ACTION_INSERT_CHILD, container.id, beforeIndex < existingIndex || existingIndex < 0 ? beforeIndex : beforeIndex - 1, serializeChild(child), currentParent ? currentParent.id : false);

@@ -559,3 +594,8 @@ },

newChildren.splice(newChildren.indexOf(before), 0, child);
if (before == null) {
newChildren.push(child);
} else {
newChildren.splice(newChildren.indexOf(before), 0, child);
}
internals.children = strict ? Object.freeze(newChildren) : newChildren;

@@ -562,0 +602,0 @@ }

33

build/ts/types.d.ts

@@ -47,4 +47,13 @@ import { RemoteComponentType, IdentifierForRemoteComponent, PropsForRemoteComponent } from '@remote-ui/types';

readonly options: RemoteRootOptions<AllowedComponents>;
append(...children: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>, true>[]): void | Promise<void>;
/**
* @deprecated use `RemoteRoot.append` instead.
*/
appendChild(child: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>, true>): void | Promise<void>;
removeChild(child: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>): void | Promise<void>;
replaceChildren(...children: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>, true>[]): void | Promise<void>;
insertBefore(child: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>, before?: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>> | null): void | Promise<void>;
/**
* @deprecated use `RemoteRoot.insertBefore` instead.
*/
insertChildBefore(child: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>, before: AllowedChildren<AllowedChildrenTypes, RemoteRoot<AllowedComponents, AllowedChildrenTypes>>): void | Promise<void>;

@@ -78,5 +87,15 @@ createComponent<Type extends AllowedComponents>(type: Type, ...rest: IfAllOptionalKeys<PropsForRemoteComponent<Type>, [

readonly parent: RemoteComponent<any, Root> | Root | null;
remove(): void | Promise<void>;
updateProps(props: Partial<PropsForRemoteComponent<Type>>): void | Promise<void>;
append(...children: AllowedChildren<ExtractChildren<Type>, Root, true>[]): void | Promise<void>;
/**
* @deprecated use `RemoteComponent.append` instead.
*/
appendChild(child: AllowedChildren<ExtractChildren<Type>, Root, true>): void | Promise<void>;
removeChild(child: AllowedChildren<ExtractChildren<Type>, Root>): void | Promise<void>;
replaceChildren(...children: AllowedChildren<ExtractChildren<Type>, Root, true>[]): void | Promise<void>;
insertBefore(child: AllowedChildren<ExtractChildren<Type>, Root>, before?: AllowedChildren<ExtractChildren<Type>, Root> | null): void | Promise<void>;
/**
* @deprecated use `RemoteComponent.insertBefore` instead.
*/
insertChildBefore(child: AllowedChildren<ExtractChildren<Type>, Root>, before: AllowedChildren<ExtractChildren<Type>, Root>): void | Promise<void>;

@@ -91,4 +110,13 @@ }

readonly parent: RemoteComponent<any, Root> | Root | null;
append(...children: AllowedChildren<ExtractChildren<any>, Root, true>[]): void | Promise<void>;
/**
* @deprecated use `RemoteComponent.append` instead.
*/
appendChild(child: AllowedChildren<ExtractChildren<any>, Root, true>): void | Promise<void>;
removeChild(child: AllowedChildren<ExtractChildren<any>, Root>): void | Promise<void>;
replaceChildren(...children: AllowedChildren<ExtractChildren<any>, Root, true>[]): void | Promise<void>;
insertBefore(child: AllowedChildren<ExtractChildren<any>, Root>, before?: AllowedChildren<ExtractChildren<any>, Root> | null): void | Promise<void>;
/**
* @deprecated use `RemoteComponent.insertBefore` instead.
*/
insertChildBefore(child: AllowedChildren<ExtractChildren<any>, Root>, before: AllowedChildren<ExtractChildren<any>, Root>): void | Promise<void>;

@@ -103,3 +131,8 @@ }

readonly parent: RemoteComponent<any, Root> | Root | null;
update(text: string): void | Promise<void>;
/**
* @deprecated use `RemoteText.update` instead.
*/
updateText(text: string): void | Promise<void>;
remove(): void | Promise<void>;
}

@@ -106,0 +139,0 @@ export declare type RemoteChild<Root extends RemoteRoot<any, any>> = RemoteComponent<any, Root> | RemoteText<Root>;

18

CHANGELOG.md
# Changelog
All notable changes to this project will be documented in this file.
## 2.2.0
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
### Minor Changes
## [Unreleased]
- [#197](https://github.com/Shopify/remote-ui/pull/197) [`e15d142`](https://github.com/Shopify/remote-ui/commit/e15d1423f3759bdf9368d1fe3964347fd8a0c301) Thanks [@lemonmade](https://github.com/lemonmade)! - Added a number of methods that align more closely with the corresponding DOM API, and deprecated a few existing methods with overlapping functionality:
- `RemoteParent.appendChild` is deprecated, with a new `RemoteParent.append` API recommended instead. This new API matches the [`Element.append`](https://developer.mozilla.org/en-US/docs/Web/API/Element/append) DOM API: it allows you to pass multiple children, including strings that are converted to text nodes.
- `RemoteParent.insertChildBefore` is deprecated, with a new `RemoteParent.insertBefore` API recommended instead. This matches the [`Node.insertBefore`](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) DOM API, including the fact that the second argument can be null (in which case, the method behaves the same as `append`
- `RemoteParent.replaceChildren` is new, and matches the [`Element.replaceChildren`](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren) DOM API. It allows passing any number of children/ strings, and those are used to fully replace the existing children.
- `RemoteComponent.remove` and `RemoteText.remove` are new, and match the [`Element.remove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) DOM API.
- `RemoteText.updateText` is deprecated in favor of a new `RemoteText.update` method, which is a little shorter.
### Patch Changes
- Updated dependencies [[`e15d142`](https://github.com/Shopify/remote-ui/commit/e15d1423f3759bdf9368d1fe3964347fd8a0c301)]:
- @remote-ui/rpc@1.4.0
## [2.1.14] - 2021-07-14

@@ -11,0 +21,0 @@

7

package.json
{
"name": "@remote-ui/core",
"version": "2.1.16",
"version": "2.2.0",
"publishConfig": {

@@ -22,6 +22,5 @@ "access": "public",

"dependencies": {
"@remote-ui/rpc": "^1.3.4",
"@remote-ui/rpc": "^1.4.0",
"@remote-ui/types": "^1.1.2"
},
"gitHead": "a35cf5c1e3d89949e60af9b90339c6551325396d"
}
}

94

README.md

@@ -72,3 +72,3 @@ # `@remote-ui/core`

To prevent this kind of mistake, any `children` prop will be deleted from the props object. If you want to implement a render prop-style API, you can do so without potentially causing confusion by using a different prop name, and ensuring that you handle the fact that the host will receive a promise whenever they call this function. If you are just trying to append other `RemoteComponent` and `RemoteText` instances to your tree, use `RemoteComponent#appendChild()`.
To prevent this kind of mistake, any `children` prop will be deleted from the props object. If you want to implement a render prop-style API, you can do so without potentially causing confusion by using a different prop name, and ensuring that you handle the fact that the host will receive a promise whenever they call this function. If you are just trying to append other `RemoteComponent` and `RemoteText` instances to your tree, use `RemoteComponent#append()`.

@@ -78,3 +78,3 @@ `createComponent` also allows you to pass initial children for the created component. If you have only one child, you can pass it directly as the third argument. If you have more than one child, you can either pass them as an array for the third argument, or as additional positional arguments. You can also pass a string directly, and it will be normalized into a `RemoteText` object for you.

```ts
root.appendChild(
root.append(
root.createComponent('BlockStack', undefined, [

@@ -102,7 +102,7 @@ root.createComponent('Text', undefined, 'This will be fun!'),

const icon = root.createComponent('Icon');
iconFragment.appendChild(icon);
iconFragment.append(icon);
const headerFragment = root.createFragment();
const header = root.createText('Hello world!');
headerFragment.appendChild(header);
headerFragment.append(header);
const card = root.createComponent('Card', {

@@ -114,14 +114,14 @@ icon: iconFragment,

##### `RemoteRoot#appendChild()`
##### `RemoteRoot#append()`
This method appends a `RemoteComponent` or `RemoteText` to the remote root as the last child. This method returns a promise for when the update has been applied in the host.
This method appends one or more `RemoteComponent` or `RemoteText` to the remote root as the last children. This method returns a promise for when the update has been applied in the host.
```ts
const card = root.createComponent('Card');
root.appendChild(card);
root.append(card);
```
##### `RemoteRoot#insertChildBefore()`
##### `RemoteRoot#insertBefore()`
This method inserts a `RemoteComponent` or `RemoteText` in the remote root before the specified child. This method returns a promise for when the update has been applied in the host.
This method inserts a `RemoteComponent` or `RemoteText` in the remote root before the specified child. This method returns a promise for when the update has been applied in the host. If the second argument is excluded, this method behaves identically to `append()`.

@@ -131,4 +131,4 @@ ```ts

const earlierCard = root.createComponent('Card');
root.appendChild(card);
root.insertChildBefore(earlierCard, card);
root.append(card);
root.insertBefore(earlierCard, card);
```

@@ -142,3 +142,3 @@

const card = root.createComponent('Card');
root.appendChild(card);
root.append(card);

@@ -150,2 +150,16 @@ // later...

##### `RemoteRoot#replaceChildren()`
This method removes all children from the root, and replaces them with the list of children passed to this method. This method returns a promise for when the update has been applied in the host.
```ts
const card = root.createComponent('Card');
root.append(card);
// later...
const newCard = root.createComponent('Card');
root.replaceChildren(newCard);
```
##### `RemoteRoot#children`

@@ -161,3 +175,3 @@

const card = root.createComponent('Card');
root.appendChild(card);
root.append(card);
root.mount();

@@ -208,10 +222,20 @@ ```

##### `RemoteComponent#appendChild()`
##### `RemoteComponent#remove()`
Just like [`RemoteRoot#appendChild`](#remoterootappendchild), but appending a child for a single component rather than the root.
Removes the component from its parent, if it is attached to one.
##### `RemoteComponent#insertChildBefore()`
```ts
const card = root.createComponent('Card');
root.append(card);
card.remove();
```
Just like [`RemoteRoot#insertChildBefore`](#remoterootinsertchildbefore), but inserting a child for a single component rather than the root.
##### `RemoteComponent#append()`
Just like [`RemoteRoot#append`](#remoterootappend), but appending children for a single component rather than the root.
##### `RemoteComponent#insertBefore()`
Just like [`RemoteRoot#insertBefore`](#remoterootinsertbefore), but inserting a child for a single component rather than the root.
##### `RemoteComponent#removeChild()`

@@ -221,2 +245,6 @@

##### `RemoteComponent#replaceChildren()`
Just like [`RemoteRoot#replaceChildren`](#remoterootreplacechildren), but replacing children for a single component rather than the root.
#### `RemoteText`

@@ -228,3 +256,3 @@

The current text content of the element. This representation is not mutable, so changing any value on this object will have no effect (use `updateText` instead)
The current text content of the element. This representation is not mutable, so changing any value on this object will have no effect (use `update` instead)

@@ -239,3 +267,3 @@ ##### `RemoteText#root`

##### `RemoteText#updateText()`
##### `RemoteText#update()`

@@ -248,6 +276,16 @@ Updates the text content.

if (LOCALE === 'fr') {
text.updateText('Bonjour');
text.update('Bonjour');
}
```
##### `RemoteComponent#remove()`
Removes the text from its parent, if it is attached to one.
```ts
const text = root.createText('Hello');
root.append(card);
text.remove();
```
#### `RemoteFragment`

@@ -273,9 +311,9 @@

##### `RemoteFragment#appendChild()`
##### `RemoteFragment#append()`
Just like [`RemoteRoot#appendChild`](#remoterootappendchild), but appending a child for a single fragment rather than the root.
Just like [`RemoteRoot#append`](#remoterootappend), but appending a child for a single fragment rather than the root.
##### `RemoteFragment#insertChildBefore()`
##### `RemoteFragment#insertBefore()`
Just like [`RemoteRoot#insertChildBefore`](#remoterootinsertchildbefore), but inserting a child for a single fragment rather than the root.
Just like [`RemoteRoot#insertBefore`](#remoterootinsertbefore), but inserting a child for a single fragment rather than the root.

@@ -286,2 +324,6 @@ ##### `RemoteFragment#removeChild()`

##### `RemoteFragment#replaceChildren()`
Just like [`RemoteRoot#replaceChildren`](#remoterootreplacechildren), but replacing children for a single fragment rather than the root.
### `createRemoteReceiver()`

@@ -404,3 +446,3 @@

These types are used to validate the passed arguments in `RemoteRoot#createComponent`, `RemoteRoot#appendChild`, and the other mutation APIs. With the example above, TypeScript would complain about the following calls, because we are not providing the mandatory `title` prop to `createComponent`, and we are appending a component other than `CardSection` to `Card`.
These types are used to validate the passed arguments in `RemoteRoot#createComponent`, `RemoteRoot#append`, and the other mutation APIs. With the example above, TypeScript would complain about the following calls, because we are not providing the mandatory `title` prop to `createComponent`, and we are appending a component other than `CardSection` to `Card`.

@@ -415,3 +457,3 @@ ```ts

const card = root.createComponent(Card);
card.appendChild(button);
card.append(button);
```

@@ -418,0 +460,0 @@

129

src/root.ts

@@ -178,4 +178,12 @@ import {RemoteComponentType} from '@remote-ui/types';

},
remove: () => remove(component),
updateProps: (newProps) =>
updateProps(component, newProps, internals, rootInternals),
append: (...children) =>
append(
component,
children.map((child) => normalizeChild(child, remoteRoot)),
internals,
rootInternals,
),
appendChild: (child) =>

@@ -190,4 +198,19 @@ appendChild(

removeChild(component, child, internals, rootInternals),
replaceChildren: (...children) =>
replaceChildren(
component,
children.map((child) => normalizeChild(child, remoteRoot)),
internals,
rootInternals,
),
insertBefore: (child, before) =>
insertBefore(
component,
normalizeChild(child, remoteRoot),
before,
internals,
rootInternals,
),
insertChildBefore: (child, before) =>
insertChildBefore(
insertBefore(
component,

@@ -227,2 +250,4 @@ normalizeChild(child, remoteRoot),

const internals: TextInternals = {text: content};
const update: RemoteText<Root>['update'] = (newText) =>
updateText(text, newText, internals, rootInternals);

@@ -234,4 +259,5 @@ const text: RemoteText<Root> = {

},
updateText: (newText) =>
updateText(text, newText, internals, rootInternals),
update,
updateText: update,
remove: () => remove(text),
// Just satisfying the type definition, since we need to write

@@ -259,2 +285,9 @@ // some properties manually.

},
append: (...children) =>
append(
fragment,
children.map((child) => normalizeChild(child, remoteRoot)),
internals,
rootInternals,
),
appendChild: (child) =>

@@ -269,4 +302,19 @@ appendChild(

removeChild(fragment, child, internals, rootInternals),
replaceChildren: (...children) =>
replaceChildren(
fragment,
children.map((child) => normalizeChild(child, remoteRoot)),
internals,
rootInternals,
),
insertBefore: (child, before) =>
insertBefore(
fragment,
normalizeChild(child, remoteRoot),
before,
internals,
rootInternals,
),
insertChildBefore: (child, before) =>
insertChildBefore(
insertBefore(
fragment,

@@ -291,2 +339,10 @@ normalizeChild(child, remoteRoot),

},
append: (...children) =>
append(
remoteRoot,
children.map((child) => normalizeChild(child, remoteRoot)),
rootInternals,
rootInternals,
),
appendChild: (child) =>

@@ -299,6 +355,21 @@ appendChild(

),
replaceChildren: (...children) =>
replaceChildren(
remoteRoot,
children.map((child) => normalizeChild(child, remoteRoot)),
rootInternals,
rootInternals,
),
removeChild: (child) =>
removeChild(remoteRoot, child, rootInternals, rootInternals),
insertBefore: (child, before) =>
insertBefore(
remoteRoot,
normalizeChild(child, remoteRoot),
before,
rootInternals,
rootInternals,
),
insertChildBefore: (child, before) =>
insertChildBefore(
insertBefore(
remoteRoot,

@@ -481,4 +552,4 @@ normalizeChild(child, remoteRoot),

//
// root.appendChild(textField);
// root.appendChild(button);
// root.append(textField);
// root.append(button);
//

@@ -624,2 +695,17 @@ // function getPropsForValue(value = '') {

function remove(child: AnyChild) {
(child.parent as AnyParent)?.removeChild(child);
}
function append(
container: AnyParent,
children: AnyChild[],
internals: ParentInternals,
rootInternals: RootInternals,
) {
for (const child of children) {
appendChild(container, child, internals, rootInternals);
}
}
function appendChild(

@@ -686,2 +772,15 @@ container: AnyParent,

function replaceChildren(
container: AnyParent,
children: AnyChild[],
internals: ParentInternals,
rootInternals: RootInternals,
) {
for (const child of container.children) {
removeChild(container, child, internals, rootInternals);
}
append(container, children, internals, rootInternals);
}
// there is a problem with this, because when multiple children

@@ -721,6 +820,6 @@ // are removed, there is no guarantee the messages will arrive in the

function insertChildBefore(
function insertBefore(
container: AnyParent,
child: AnyChild,
before: AnyChild,
before: AnyChild | undefined | null,
internals: ParentInternals,

@@ -742,3 +841,6 @@ rootInternals: RootInternals,

remote: (channel) => {
const beforeIndex = container.children.indexOf(before as any);
const beforeIndex =
before == null
? container.children.length - 1
: container.children.indexOf(before as any);

@@ -782,3 +884,8 @@ channel(

newChildren.splice(newChildren.indexOf(before), 0, child);
if (before == null) {
newChildren.push(child);
} else {
newChildren.splice(newChildren.indexOf(before), 0, child);
}
internals.children = strict ? Object.freeze(newChildren) : newChildren;

@@ -785,0 +892,0 @@ },

56

src/tests/root.test.ts

@@ -54,3 +54,3 @@ import {createRemoteRoot} from '../root';

describe('appendChild()', () => {
describe('append()', () => {
it('does not throw error when appending a child created by the remote root', () => {

@@ -61,3 +61,3 @@ const root = createRemoteRoot(() => {});

const card = root.createComponent('Card');
root.appendChild(card);
root.append(card);
}).not.toThrow();

@@ -71,3 +71,3 @@ });

const card = {} as any;
root.appendChild(card);
root.append(card);
}).toThrow(

@@ -79,4 +79,4 @@ 'Cannot append a node that was not created by this remote root',

describe('insertChildBefore()', () => {
it('does not throw error when calling insertChildBefore for a component created by the remote root', () => {
describe('insertBefore()', () => {
it('does not throw error when calling insertBefore for a component created by the remote root', () => {
const root = createRemoteRoot(() => {});

@@ -87,8 +87,8 @@

const image = root.createComponent('Image');
root.appendChild(image);
root.insertChildBefore(card, image);
root.append(image);
root.insertBefore(card, image);
}).not.toThrow();
});
it('throws error when calling insertChildBefore for a component not created by the remote root', () => {
it('throws error when calling insertBefore for a component not created by the remote root', () => {
const root = createRemoteRoot(() => {});

@@ -99,4 +99,4 @@

const button = {} as any;
root.appendChild(card);
root.insertChildBefore(button, card);
root.append(card);
root.insertBefore(button, card);
}).toThrow(

@@ -108,2 +108,28 @@ 'Cannot insert a node that was not created by this remote root',

describe('replaceChildren()', () => {
it('does not throw error when calling insertBefore for a component created by the remote root', () => {
const root = createRemoteRoot(() => {});
expect(() => {
const card = root.createComponent('Card');
const image = root.createComponent('Image');
root.append(image);
root.replaceChildren(card);
}).not.toThrow();
});
it('throws error when calling insertBefore for a component not created by the remote root', () => {
const root = createRemoteRoot(() => {});
expect(() => {
const card = root.createComponent('Card');
const button = {} as any;
root.append(card);
root.replaceChildren(button);
}).toThrow(
'Cannot append a node that was not created by this remote root',
);
});
});
describe('hot-swapping', () => {

@@ -118,3 +144,3 @@ it('hot-swaps function props', () => {

root.appendChild(button);
root.append(button);
root.mount();

@@ -146,3 +172,3 @@

root.appendChild(resourceList);
root.append(resourceList);
root.mount();

@@ -179,3 +205,3 @@

root.appendChild(card);
root.append(card);
root.mount();

@@ -205,3 +231,3 @@

root.appendChild(modal);
root.append(modal);
root.mount();

@@ -245,3 +271,3 @@

root.appendChild(modal);
root.append(modal);
root.mount();

@@ -248,0 +274,0 @@

72

src/types.ts

@@ -114,2 +114,12 @@ import {

readonly options: RemoteRootOptions<AllowedComponents>;
append(
...children: AllowedChildren<
AllowedChildrenTypes,
RemoteRoot<AllowedComponents, AllowedChildrenTypes>,
true
>[]
): void | Promise<void>;
/**
* @deprecated use `RemoteRoot.append` instead.
*/
appendChild(

@@ -128,2 +138,22 @@ child: AllowedChildren<

): void | Promise<void>;
replaceChildren(
...children: AllowedChildren<
AllowedChildrenTypes,
RemoteRoot<AllowedComponents, AllowedChildrenTypes>,
true
>[]
): void | Promise<void>;
insertBefore(
child: AllowedChildren<
AllowedChildrenTypes,
RemoteRoot<AllowedComponents, AllowedChildrenTypes>
>,
before?: AllowedChildren<
AllowedChildrenTypes,
RemoteRoot<AllowedComponents, AllowedChildrenTypes>
> | null,
): void | Promise<void>;
/**
* @deprecated use `RemoteRoot.insertBefore` instead.
*/
insertChildBefore(

@@ -149,3 +179,3 @@ child: AllowedChildren<

true
>[]
>[],
]

@@ -166,3 +196,3 @@ | [

true
>[]
>[],
]

@@ -203,5 +233,12 @@ | [

readonly parent: RemoteComponent<any, Root> | Root | null;
remove(): void | Promise<void>;
updateProps(
props: Partial<PropsForRemoteComponent<Type>>,
): void | Promise<void>;
append(
...children: AllowedChildren<ExtractChildren<Type>, Root, true>[]
): void | Promise<void>;
/**
* @deprecated use `RemoteComponent.append` instead.
*/
appendChild(

@@ -213,2 +250,12 @@ child: AllowedChildren<ExtractChildren<Type>, Root, true>,

): void | Promise<void>;
replaceChildren(
...children: AllowedChildren<ExtractChildren<Type>, Root, true>[]
): void | Promise<void>;
insertBefore(
child: AllowedChildren<ExtractChildren<Type>, Root>,
before?: AllowedChildren<ExtractChildren<Type>, Root> | null,
): void | Promise<void>;
/**
* @deprecated use `RemoteComponent.insertBefore` instead.
*/
insertChildBefore(

@@ -229,2 +276,8 @@ child: AllowedChildren<ExtractChildren<Type>, Root>,

readonly parent: RemoteComponent<any, Root> | Root | null;
append(
...children: AllowedChildren<ExtractChildren<any>, Root, true>[]
): void | Promise<void>;
/**
* @deprecated use `RemoteComponent.append` instead.
*/
appendChild(

@@ -236,2 +289,12 @@ child: AllowedChildren<ExtractChildren<any>, Root, true>,

): void | Promise<void>;
replaceChildren(
...children: AllowedChildren<ExtractChildren<any>, Root, true>[]
): void | Promise<void>;
insertBefore(
child: AllowedChildren<ExtractChildren<any>, Root>,
before?: AllowedChildren<ExtractChildren<any>, Root> | null,
): void | Promise<void>;
/**
* @deprecated use `RemoteComponent.insertBefore` instead.
*/
insertChildBefore(

@@ -250,3 +313,8 @@ child: AllowedChildren<ExtractChildren<any>, Root>,

readonly parent: RemoteComponent<any, Root> | Root | null;
update(text: string): void | Promise<void>;
/**
* @deprecated use `RemoteText.update` instead.
*/
updateText(text: string): void | Promise<void>;
remove(): void | Promise<void>;
}

@@ -253,0 +321,0 @@ 

LICENSE.md
build/esm/root.mjs

Sorry, the diff of this file is not supported yet

build/esnext/root.esnext

Sorry, the diff of this file is not supported yet

build/ts/root.d.ts.map

Sorry, the diff of this file is not supported yet

build/ts/types.d.ts.map

Sorry, the diff of this file is not supported yet

build/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc