Skip to content

Commit

Permalink
Clean up and extra documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
lemonmade committed Aug 27, 2024
1 parent 2479b21 commit b2ac6b7
Show file tree
Hide file tree
Showing 6 changed files with 407 additions and 149 deletions.
4 changes: 2 additions & 2 deletions .changeset/slimy-lizards-tickle.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
'@remote-dom/core': minor
---

## Added native support for synchronizing attributes and event listeners
Added native support for synchronizing attributes and event listeners

Previously, Remote DOM only offered “remote properties” as a way to synchronize element state between the host and remote environments. These remote properties effectively synchronize a subset of a custom element’s instance properties. The `RemoteElement` class offers [a declarative way to define the properties that should be synchronized](/packages/core/README.md#remote-properties).

Expand Down Expand Up @@ -110,7 +110,7 @@ myElement.addEventListener('change', () => console.log('Changed!'));
// No `myElement.onChange` property is created
```

The `remoteProperties` configuration will continue to be supported for cases where you want to synchronize instance properties. Because instance properties can be any JavaScript type, properties are the highest-fidelity field that can be synchronized between the remote and host environments. However, adding event listeners using the `remoteProperties.event` configuration is **deprecated and will be removed in the next major version**. You should use the `remoteEvents` configuration instead. If you were previously defining remote properties which only accepted strings, consider using the `remoteAttributes` configuration instead, which stores the value entirely in an HTML attribute instead.
The `remoteProperties` configuration will continue to be supported for cases where you want to synchronize instance properties. Because instance properties can be any JavaScript type, properties are the highest-fidelity field that can be synchronized between the remote and host environments. However, adding event listeners using the `remoteProperties.event` configuration is **deprecated and will be removed in the next major version**. You should use the `remoteEvents` configuration instead. If you were previously defining remote properties which only accepted strings, consider using the `remoteAttributes` configuration, which stores the value entirely in an HTML attribute instead.

This change is being released in a backwards-compatible way, so you can continue to use the existing `remoteProperties` configuration on host and/or remote environments without any code changes.

Expand Down
18 changes: 10 additions & 8 deletions packages/core/source/elements.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,6 @@ export {
RemoteElement,
createRemoteElement,
type RemoteElementConstructor,
type RemoteElementPropertyType,
type RemoteElementPropertyDefinition,
type RemoteElementPropertiesDefinition,
type RemoteElementAttributeDefinition,
type RemoteElementEventListenerDefinition,
type RemoteElementEventListenersDefinition,
type RemoteElementSlotDefinition,
type RemoteElementSlotsDefinition,
type RemotePropertiesFromElementConstructor,
type RemoteMethodsFromElementConstructor,
type RemoteSlotsFromElementConstructor,
Expand All @@ -19,6 +11,16 @@ export {
export {RemoteFragmentElement} from './elements/RemoteFragmentElement.ts';
export {RemoteRootElement} from './elements/RemoteRootElement.ts';
export {RemoteReceiverElement} from './elements/RemoteReceiverElement.ts';
export type {
RemoteElementPropertyType,
RemoteElementPropertyDefinition,
RemoteElementPropertiesDefinition,
RemoteElementAttributeDefinition,
RemoteElementEventListenerDefinition,
RemoteElementEventListenersDefinition,
RemoteElementSlotDefinition,
RemoteElementSlotsDefinition,
} from './elements/types.ts';

export {RemoteEvent} from './elements/RemoteEvent.ts';
export {RemoteMutationObserver} from './elements/RemoteMutationObserver.ts';
Expand Down
Loading

0 comments on commit b2ac6b7

Please sign in to comment.