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

fix(engine): Fix composed: false getRootNode #170

Merged
merged 6 commits into from
Mar 23, 2018

Conversation

davidturissini
Copy link
Contributor

@davidturissini davidturissini commented Mar 22, 2018

Details

Passing composed: false to getRootNode returned the same node passed in. This is incorrect and resulted in infinite loops in piercing.

For reference, here is the expected behavior from Chrome (Web Component, not lightning web components):

class MyComponent extends HTMLElement {
    trigger() {
        const event = new CustomEvent('foo', {
            bubbles: true,
            composed: true,
        });

        this.dispatchEvent(event);
    }
}

class Parent extends HTMLElement {
    constructor() {
      super();
      this.root = this.attachShadow({ mode: 'closed' });
      var el = document.createElement('my-component');
      this.root.appendChild(el); 
    }

    getChild() {
      return this.root.querySelector('my-component');
    }
}

customElements.define('my-component', MyComponent);
customElements.define('my-parent', Parent);

const el = document.createElement('my-parent');
document.body.appendChild(el);
el.getChild().getRootNode({ composed: false }); // 'my-parent' shadow root
el.getRootNode({ composed: false }); // document

el.getRootNode({ composed: true }); // document
el.getChild().getRootNode({ composed: true }); // document

Does this PR introduce a breaking change?

  • Yes
  • No

@davidturissini davidturissini requested a review from caridy March 22, 2018 19:54
if (!composed && !isUndefined(node[ViewModelReflection])) {
return node; // this is not quite the root (it is the host), but for us is sufficient
if (!composed) {
return findShadowRoot(node.parentNode); // this is not quite the root (it is the host), but for us is sufficient
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think this is correct, but honestly am not 100% sure

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't understand how is this code different. I was avoiding the usage of recursive methods, instead use the while statement to do the exact same that the new recursive method is doing. Or at least that was the intent. Let's chat more about this tomorrow morning.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

while loop over recursion

@salesforce-best-lwc-internal
Copy link

Benchmark comparison

Base commit: f8623c8 | Target commit: 2246b59

benchmark base(f8623c8) target(2246b59) trend
table-append-1k.benchmark:benchmark-table/append/1k 240.69 (± 3.28 ms) 261.05 (± 8.75 ms) 👎
table-clear-1k.benchmark:benchmark-table/clear/1k 12.46 (± 0.38 ms) 14.20 (± 0.57 ms) 👎
table-create-10k.benchmark:benchmark-table/create/10k 1411.16 (± 14.91 ms) 1485.47 (± 18.91 ms) 👎
table-create-1k.benchmark:benchmark-table/create/1k 149.81 (± 1.32 ms) 170.51 (± 6.99 ms) 👎
table-update-10th-1k.benchmark:benchmark-table/update-10th/1k 126.47 (± 1.26 ms) 142.58 (± 8.59 ms) 👎
tablecmp-append-1k.benchmark:benchmark-table-component/append/1k 329.05 (± 4.76 ms) 335.93 (± 5.96 ms) 👎
tablecmp-clear-1k.benchmark:benchmark-table/clear/1k 33.49 (± 0.86 ms) 43.87 (± 5.69 ms) 👎
tablecmp-create-10k.benchmark:benchmark-table-component/create/10k 2477.68 (± 25.37 ms) 2552.80 (± 84.35 ms) 👎
tablecmp-create-1k.benchmark:benchmark-table-component/create/1k 259.12 (± 2.60 ms) 273.73 (± 5.25 ms) 👎
tablecmp-update-10th-1k.benchmark:benchmark-table-component/update-10th/1k 116.28 (± 1.95 ms) 124.39 (± 2.82 ms) 👎

Copy link
Collaborator

@apapko apapko 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 to me, but we should have @caridy bless this


describe('dom', () => {
describe('getRootNode composed true', () => {
it('should return correct value from child node', () => {
class MyComponent extends Element {
Copy link
Contributor

Choose a reason for hiding this comment

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

this is never used in this test.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed


const elm = createElement('x-parent', { is: Parent });
document.body.appendChild(elm);
const child = elm.querySelector('div');
Copy link
Contributor

Choose a reason for hiding this comment

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

don't do this here because it will be broken once we introduce shadow dom.

const elm = createElement('x-parent', { is: Parent });
document.body.appendChild(elm);
const child = elm.querySelector('div');
const match = getRootNode.call(child, { composed: true });
Copy link
Contributor

Choose a reason for hiding this comment

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

don't test getRootNode directly because it eventually will be replaced with the one from the browser.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The whole point of the test is ensuring that our getRootNode behaves correctly.

});

it('should return correct value from self', () => {
class MyComponent extends Element {
Copy link
Contributor

Choose a reason for hiding this comment

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

not used.

@salesforce-best-lwc-internal
Copy link

Benchmark comparison

Base commit: f8623c8 | Target commit: 1882366

benchmark base(f8623c8) target(1882366) trend
table-append-1k.benchmark:benchmark-table/append/1k 240.69 (± 3.28 ms) 252.37 (± 6.07 ms) 👎
table-clear-1k.benchmark:benchmark-table/clear/1k 12.46 (± 0.38 ms) 12.45 (± 0.43 ms) 👌
table-create-10k.benchmark:benchmark-table/create/10k 1411.16 (± 14.91 ms) 1459.82 (± 10.23 ms) 👎
table-create-1k.benchmark:benchmark-table/create/1k 149.81 (± 1.32 ms) 159.04 (± 4.50 ms) 👎
table-update-10th-1k.benchmark:benchmark-table/update-10th/1k 126.47 (± 1.26 ms) 129.40 (± 2.50 ms) 👎
tablecmp-append-1k.benchmark:benchmark-table-component/append/1k 329.05 (± 4.76 ms) 352.72 (± 6.91 ms) 👎
tablecmp-clear-1k.benchmark:benchmark-table/clear/1k 33.49 (± 0.86 ms) 34.74 (± 1.35 ms) 👎
tablecmp-create-10k.benchmark:benchmark-table-component/create/10k 2477.68 (± 25.37 ms) 2550.05 (± 27.22 ms) 👎
tablecmp-create-1k.benchmark:benchmark-table-component/create/1k 259.12 (± 2.60 ms) 274.44 (± 3.83 ms) 👎
tablecmp-update-10th-1k.benchmark:benchmark-table-component/update-10th/1k 116.28 (± 1.95 ms) 119.78 (± 2.48 ms) 👎

Copy link
Contributor

@caridy caridy left a comment

Choose a reason for hiding this comment

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

small optimizations can be added

@salesforce-best-lwc-internal
Copy link

Benchmark comparison

Base commit: f8623c8 | Target commit: e58b707

benchmark base(f8623c8) target(e58b707) trend
table-append-1k.benchmark:benchmark-table/append/1k 240.69 (± 3.28 ms) 251.31 (± 5.00 ms) 👎
table-clear-1k.benchmark:benchmark-table/clear/1k 12.46 (± 0.38 ms) 12.09 (± 0.45 ms) 👌
table-create-10k.benchmark:benchmark-table/create/10k 1411.16 (± 14.91 ms) 1425.20 (± 9.87 ms) 👎
table-create-1k.benchmark:benchmark-table/create/1k 149.81 (± 1.32 ms) 146.71 (± 1.63 ms) 👍
table-update-10th-1k.benchmark:benchmark-table/update-10th/1k 126.47 (± 1.26 ms) 121.04 (± 1.73 ms) 👍
tablecmp-append-1k.benchmark:benchmark-table-component/append/1k 329.05 (± 4.76 ms) 332.51 (± 4.39 ms) 👌
tablecmp-clear-1k.benchmark:benchmark-table/clear/1k 33.49 (± 0.86 ms) 33.81 (± 1.53 ms) 👌
tablecmp-create-10k.benchmark:benchmark-table-component/create/10k 2477.68 (± 25.37 ms) 2547.45 (± 93.23 ms) 👎
tablecmp-create-1k.benchmark:benchmark-table-component/create/1k 259.12 (± 2.60 ms) 267.29 (± 3.40 ms) 👎
tablecmp-update-10th-1k.benchmark:benchmark-table-component/update-10th/1k 116.28 (± 1.95 ms) 114.75 (± 2.53 ms) 👌

@davidturissini davidturissini merged commit 1fa6fac into v0.19.0 Mar 23, 2018
@davidturissini davidturissini deleted the dturissini/getRootNodeFix branch March 23, 2018 22:57
davidturissini added a commit that referenced this pull request Mar 26, 2018
* WIP: Fixing attrs to props in compiler (#167)

* fix(engine): Fix composed: false getRootNode (#170)

* fix(engine): Fixing composed false in getRootNode
* fix(engine): Removed recursion. Cleaned tests
* fix(engine): lint
* fix(engine): Small optimization
* fix(engine): lint
davidturissini added a commit that referenced this pull request Mar 26, 2018
* WIP: Fixing attrs to props in compiler (#167)

* fix(compiler): Attributes on native DOM Elements

* fix(compiler): Moving boolean attributes to props

* fix(engine): Fix composed: false getRootNode (#170)

* fix(engine): Fixing composed false in getRootNode
* fix(engine): Removed recursion. Cleaned tests
* fix(engine): lint
* fix(engine): Small optimization
* fix(engine): lint

* chore(engine): Some more tests

* fix(compiler): Fixing failing tests

* chore(test): Adding assertion to integration test
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.

3 participants