Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduces the ability to make objects and array changes reactive by "tracking" them #12

Merged
merged 14 commits into from
Nov 21, 2024

Conversation

cesarParra
Copy link
Owner

@cesarParra cesarParra commented Nov 20, 2024

Background

This PR introduces reactive signals to complex Javascript objects and arrays. Now, there is an option to react (through a computed or effect) if the value within a signal object changes, or if a signal array's values changes (through a push, pop, splice, etc. for example).

Summary

To improve that experience, you can now set a track flag when creating the signal. When set to true, this will make the signal reactive to changes in the object or array properties.

📒 Think about this as using the @track decorator in LWC properties. It works the exact same way behind the scenes.

import { $signal } from "c/signals";

const obj = $signal({ x: 1, y: 2 }, { track: true });
const computedFromObj = $computed(() => obj.value.x + obj.value.y);

// When a value in the object changes, the computed value will automatically update
obj.value.x = 2;

console.log(computedFromObj.value); // 4

Checklist

  • Port the Observable Membrane codebase
  • Integrate with signals
  • UTs
  • Configurable option track explicitly
  • Clean up the observable membrane's TODOs
  • Remove any Node references
  • Examples updates
  • Docs

@cesarParra cesarParra marked this pull request as ready for review November 21, 2024 11:17
@cesarParra cesarParra changed the title Observable membrane Ability to make objects and array changes reactive by "tracking" them Nov 21, 2024
@cesarParra cesarParra changed the title Ability to make objects and array changes reactive by "tracking" them Introduces the ability to make objects and array changes reactive by "tracking" them Nov 21, 2024
README.md Outdated Show resolved Hide resolved
@cesarParra cesarParra merged commit 8a6bdf4 into main Nov 21, 2024
1 check passed
@cesarParra cesarParra deleted the observable-membrane branch November 21, 2024 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant