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

feat: enable stringification of DOM nodes controlled by FAST's renderer #6485

Merged
merged 9 commits into from
Oct 31, 2022

Conversation

EisenbergEffect
Copy link
Contributor

@EisenbergEffect EisenbergEffect commented Oct 28, 2022

Pull Request

📖 Description

Some 3rd party script have odd behaviors where they attempt to JSON.stringify DOM node instances. This can result in errors in some cases where FAST is storing controllers/state on the node for quick access. This PR prevents errors that could occur during stringification.

🎫 Issues

  • Tracked internally.

👩‍💻 Reviewer Notes

The main fix was to provide explicit toJSON implementations on core FAST types. These implementations are no ops so that FAST types aren't serialized at all. The problem caused by this situation was a bit more complex than this and so also required a few other internal changes to core types to ensure that we could no op the quick access properties to begin with.

📑 Test Plan

Tests were added for:

  • ref
  • slotted
  • children
  • onChange bindings
  • oneTime bindings
  • twoWay bindings
  • signal bindings
  • event bindings
  • bindings to text
  • content bindings that render composed templates
  • class bindings

Additionally, some basic tests were added for ref which were previously missing.

✅ Checklist

General

  • I have included a change request file using $ yarn change
  • I have added tests for my changes.
  • I have tested my changes.
  • I have updated the project documentation to reflect my changes.
  • I have read the CONTRIBUTING documentation and followed the standards for this project.

⏭ Next Steps

This will create some merge conflicts with the security work branch. So, next steps will be to fix all of that up.

After the security work is merged we'll also need to do a general cleanup pass on fast-element. While working on the last couple of PRs I've noticed some negative effects of all the recent code churn and they need to be addressed before this library is ready to be used in production.

@github-actions
Copy link

github-actions bot commented Oct 28, 2022

📊 Tachometer Benchmark Results

Summary

clickTrigger10x

  • repeat-basic-splice-itemCount=1000&deleteCount=20&addCount=20: unsure 🔍 -9% - +8% (-9.91ms - +8.86ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • repeat-nested-push-itemCount=100&addCount=20: unsure 🔍 -0% - +1% (-0.84ms - +1.41ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • repeat-nested-reverse-itemCount=100: slower ❌ 0% - 2% (0.42ms - 7.98ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • repeat-nested-shift-itemCount=100: unsure 🔍 -0% - +2% (-0.90ms - +7.90ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • repeat-nested-unshift-itemCount=100&addCount=20: unsure 🔍 -0% - +0% (-0.53ms - +0.90ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary

create10k

  • render-create10k: unsure 🔍 -2% - +1% (-3.86ms - +3.18ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary

createDelete5x

  • render-createDelete5x: unsure 🔍 -3% - +2% (-10.87ms - +5.95ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary

runFile1k

  • observable-runFile1k: unsure 🔍 -15% - +11% (-1.40ms - +0.99ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary

update10th

  • render-update10th: unsure 🔍 -1% - +1% (-1.36ms - +1.53ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary

usedJSHeapSize

  • observable-runFile1k: unsure 🔍 -0% - +1% (-0.17ms - +0.37ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • render-create10k: unsure 🔍 +0% - +0% (+0.01ms - +0.03ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • render-createDelete5x: unsure 🔍 +0% - +0% (+0.04ms - +0.18ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • render-update10th: unsure 🔍 +0% - +0% (+0.00ms - +0.02ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • repeat-basic-splice-itemCount=1000&deleteCount=20&addCount=20: unsure 🔍 -0% - +1% (-0.14ms - +0.24ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • repeat-nested-push-itemCount=100&addCount=20: unsure 🔍 +0% - +0% (+0.09ms - +0.16ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • repeat-nested-reverse-itemCount=100: unsure 🔍 -0% - +0% (-0.10ms - +0.22ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • repeat-nested-shift-itemCount=100: unsure 🔍 +0% - +0% (+0.07ms - +0.13ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary
  • repeat-nested-unshift-itemCount=100&addCount=20: unsure 🔍 +0% - +0% (+0.09ms - +0.15ms)
    users/eisenbergeffect/prevent-stringify-error vs master Customize summary

Results

observable-runFile1k

runFile1k

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master8.36ms - 10.03ms-unsure 🔍
-11% - +16%
-0.99ms - +1.40ms
users/eisenbergeffect/prevent-stringify-error8.13ms - 9.85msunsure 🔍
-15% - +11%
-1.40ms - +0.99ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master48.59ms - 48.97ms-unsure 🔍
-1% - +0%
-0.37ms - +0.17ms
users/eisenbergeffect/prevent-stringify-error48.69ms - 49.06msunsure 🔍
-0% - +1%
-0.17ms - +0.37ms
-
render-create10k

create10k

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master254.60ms - 259.51ms-unsure 🔍
-1% - +2%
-3.18ms - +3.86ms
users/eisenbergeffect/prevent-stringify-error254.19ms - 259.24msunsure 🔍
-2% - +1%
-3.86ms - +3.18ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master47.27ms - 47.28ms-unsure 🔍
-0% - -0%
-0.03ms - -0.01ms
users/eisenbergeffect/prevent-stringify-error47.28ms - 47.30msunsure 🔍
+0% - +0%
+0.01ms - +0.03ms
-
render-createDelete5x

createDelete5x

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master359.92ms - 372.01ms-unsure 🔍
-2% - +3%
-5.95ms - +10.87ms
users/eisenbergeffect/prevent-stringify-error357.67ms - 369.35msunsure 🔍
-3% - +2%
-10.87ms - +5.95ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master54.12ms - 54.22ms-unsure 🔍
-0% - -0%
-0.18ms - -0.04ms
users/eisenbergeffect/prevent-stringify-error54.23ms - 54.33msunsure 🔍
+0% - +0%
+0.04ms - +0.18ms
-
render-update10th

update10th

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master125.07ms - 127.16ms-unsure 🔍
-1% - +1%
-1.53ms - +1.36ms
users/eisenbergeffect/prevent-stringify-error125.19ms - 127.21msunsure 🔍
-1% - +1%
-1.36ms - +1.53ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master47.28ms - 47.29ms-unsure 🔍
-0% - -0%
-0.02ms - -0.00ms
users/eisenbergeffect/prevent-stringify-error47.29ms - 47.31msunsure 🔍
+0% - +0%
+0.00ms - +0.02ms
-
repeat-basic-splice-itemCount=1000&deleteCount=20&addCount=20

clickTrigger10x

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master100.02ms - 112.99ms-unsure 🔍
-8% - +9%
-8.86ms - +9.91ms
users/eisenbergeffect/prevent-stringify-error99.19ms - 112.77msunsure 🔍
-9% - +8%
-9.91ms - +8.86ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master46.71ms - 46.98ms-unsure 🔍
-1% - +0%
-0.24ms - +0.14ms
users/eisenbergeffect/prevent-stringify-error46.76ms - 47.03msunsure 🔍
-0% - +1%
-0.14ms - +0.24ms
-
repeat-nested-push-itemCount=100&addCount=20

clickTrigger10x

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master253.61ms - 255.45ms-unsure 🔍
-1% - +0%
-1.41ms - +0.84ms
users/eisenbergeffect/prevent-stringify-error254.17ms - 255.47msunsure 🔍
-0% - +1%
-0.84ms - +1.41ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master51.51ms - 51.55ms-unsure 🔍
-0% - -0%
-0.16ms - -0.09ms
users/eisenbergeffect/prevent-stringify-error51.63ms - 51.68msunsure 🔍
+0% - +0%
+0.09ms - +0.16ms
-
repeat-nested-reverse-itemCount=100

clickTrigger10x

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master377.83ms - 382.73ms-faster ✔
0% - 2%
0.42ms - 7.98ms
users/eisenbergeffect/prevent-stringify-error381.61ms - 387.36msslower ❌
0% - 2%
0.42ms - 7.98ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master58.58ms - 58.64ms-unsure 🔍
-0% - +0%
-0.22ms - +0.10ms
users/eisenbergeffect/prevent-stringify-error58.51ms - 58.82msunsure 🔍
-0% - +0%
-0.10ms - +0.22ms
-
repeat-nested-shift-itemCount=100

clickTrigger10x

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master418.50ms - 424.70ms-unsure 🔍
-2% - +0%
-7.90ms - +0.90ms
users/eisenbergeffect/prevent-stringify-error421.98ms - 428.22msunsure 🔍
-0% - +2%
-0.90ms - +7.90ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master51.62ms - 51.65ms-unsure 🔍
-0% - -0%
-0.13ms - -0.07ms
users/eisenbergeffect/prevent-stringify-error51.71ms - 51.75msunsure 🔍
+0% - +0%
+0.07ms - +0.13ms
-
repeat-nested-unshift-itemCount=100&addCount=20

clickTrigger10x

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master241.30ms - 242.26ms-unsure 🔍
-0% - +0%
-0.90ms - +0.53ms
users/eisenbergeffect/prevent-stringify-error241.43ms - 242.50msunsure 🔍
-0% - +0%
-0.53ms - +0.90ms
-

usedJSHeapSize

VersionAvg timevs mastervs users/eisenbergeffect/prevent-stringify-error
master51.49ms - 51.53ms-unsure 🔍
-0% - -0%
-0.15ms - -0.09ms
users/eisenbergeffect/prevent-stringify-error51.62ms - 51.65msunsure 🔍
+0% - +0%
+0.09ms - +0.15ms
-

tachometer-reporter-action v2 for Validate Benchmarks

@EisenbergEffect EisenbergEffect added this to the FAST Element 2.0 milestone Oct 28, 2022
@EisenbergEffect EisenbergEffect added improvement A non-feature-adding improvement area:fast-element Pertains to fast-element labels Oct 28, 2022
Copy link
Contributor

@nicholasrice nicholasrice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks Rob! Did you determine that $fastController wouldn't be an issue?

@EisenbergEffect
Copy link
Contributor Author

Looks good, thanks Rob! Did you determine that $fastController wouldn't be an issue?

Oops. Forgot to check that one. That's likely an issue. I'm off for the weekend. I'll add some code for that on Monday.

@EisenbergEffect
Copy link
Contributor Author

Looks good, thanks Rob! Did you determine that $fastController wouldn't be an issue?

Ok, I've added that scenario. Should be good to go now.

@EisenbergEffect EisenbergEffect merged commit a4982f4 into master Oct 31, 2022
@EisenbergEffect EisenbergEffect deleted the users/eisenbergeffect/prevent-stringify-error branch October 31, 2022 21:44
janechu pushed a commit that referenced this pull request Jun 10, 2024
…er (#6485)

* test: add basic ref tests

* fix: prevent children behavior from causing errors if dom stringified

* test: add slot stringify guard

* fix: prevent all binding types from causing errors if dom stringified

* doc: mark toJSON methods as internal so they don't clutter the APIs

* Change files

* chore: fix change file

* fix: prevent serialized web components from throwing

Co-authored-by: EisenbergEffect <roeisenb@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:fast-element Pertains to fast-element improvement A non-feature-adding improvement
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants