Skip to content

Use signals for props reactivity (#79)#91

Open
LeaVerou wants to merge 2 commits intomainfrom
signals-props
Open

Use signals for props reactivity (#79)#91
LeaVerou wants to merge 2 commits intomainfrom
signals-props

Conversation

@LeaVerou
Copy link
Copy Markdown
Contributor

Summary

Replaces fragile regex-based static dependency inference (inferDependencies()) and manual dependency cascade (Props.updateDependents() / topological sort) with a signals-based auto-tracking system.

  • src/signals.js (new): minimal Signal and Computed classes. Computed auto-discovers dependencies by intercepting .value reads during its compute function — no explicit dep declaration needed. Re-tracks each recomputation, so dynamic/conditional deps work.
  • Prop.js: adds getSignal(element) returning a Signal (plain props) or Computed (computed props) per element. Reads go through signal.value for auto-tracking; writes update signal.value to propagate automatically. Removes dependencies, dependsOn(), update().
  • Props.js: removes dependents graph, updateDependents(), and topological sort. propChanged() now only fires events — signals handle propagation.
  • util.js: removes inferDependencies() and sortObject().
  • test/Prop.js: removes dep inference tests, updates defaults test.

Authors writing computed props just use this.foo in get — deps are discovered at runtime with no extra configuration.

Test plan

  • All existing tests pass (npm test)
  • Computed props update when dependencies change
  • Dynamic/conditional deps (if (this.foo) return this.bar) work correctly
  • propchange events still fire for both plain and computed props
  • Attribute reflection still works for plain props
  • Function defaults that reference other props update reactively

🤖 Generated with Claude Code

LeaVerou and others added 2 commits March 19, 2026 18:06
Signal: reactive value container with .value getter/setter, subscribe(),
EventTarget (change events), and overridable equals().

Computed: lazy, auto-tracking signal — intercepts Signal.value reads
during compute to discover deps at runtime. Re-tracks each recomputation
so dynamic/conditional dependencies work correctly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace regex-based inferDependencies() and manual dependency cascade
with signals-based auto-tracking:

- Prop: add getSignal(element) to lazily create Signal (plain props) or
  Computed (spec.get props) per element. Reads go through signal.value
  for auto-tracking; writes update signal.value to propagate to dependents.
  Remove: dependencies field, dependsOn(), update().

- Props: remove dependents graph and updateDependents()/topological sort.
  propChanged() now only fires events — signals handle propagation.

- util.js: remove inferDependencies() and sortObject() (no longer needed).

- test/Prop.js: remove dependency inference tests, update defaults test
  for new computed-prop-based function defaults.

Fixes #79

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 19, 2026

Deploy Preview for nude-element ready!

Name Link
🔨 Latest commit deaf40a
🔍 Latest deploy log https://app.netlify.com/projects/nude-element/deploys/69bc742621893600074decd8
😎 Deploy Preview https://deploy-preview-91--nude-element.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

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