-
Notifications
You must be signed in to change notification settings - Fork 794
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(runtime): SSR class handling breaks normal class handling (#6116)
* feat(emit error events): emit custom event on component error within lifecycle or render * test(add test for component error handling) * revert un-required changes * Added host element to loadModule error handling * chore(format): add prettier - upgrade prettier to v2.3.2 - lock version to prevent breaking changes in minor versions - add prettier.dry-run package.json script - add pipeline action to evaluate format status - add prettierignore file for faster runs STENCIL-8: Add Prettier to Stencil * format codebase * revert cherry pick * feat(emit error events): emit custom event on component error within lifecycle or render * test(add test for component error handling) * revert un-required changes * Added host element to loadModule error handling * revert cherry pick * run prettier * rm rv karma/test-components * rv extra prettier call * Flaky test? * fix lint * fixup `strictNullChecks` issues * chore: tidy * chore: formatting * chore: revert type * fix(runtime): SSR handling breaks normal class handling * chore: typos * chore: idiot * chore: add unit test --------- Co-authored-by: Ryan Waskiewicz <[email protected]> Co-authored-by: John Jenkins <[email protected]>
- Loading branch information
3 people
authored
Jan 25, 2025
1 parent
dc4c88f
commit 1e8a2d2
Showing
9 changed files
with
292 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { h } from '@stencil/core'; | ||
| import { render } from '@wdio/browser-runner/stencil'; | ||
| import { $, expect } from '@wdio/globals'; | ||
|
|
||
| describe('asynchronous re-rendering', () => { | ||
| before(async () => { | ||
| render({ | ||
| template: () => <async-rerender></async-rerender>, | ||
| }); | ||
| }); | ||
|
|
||
| it('button click re-renders', async () => { | ||
| await $('async-rerender .number').waitForExist(); | ||
| const listItems1 = await $$('async-rerender .number'); | ||
| await expect(listItems1.length).toBe(10); | ||
|
|
||
| const button = await $$('button'); | ||
| await button[0].click(); | ||
| await $('async-rerender .loaded').waitForExist(); | ||
| const listItems2 = await $$('async-rerender .number'); | ||
| await expect(listItems2.length).toBe(5); | ||
|
|
||
| await button[1].click(); | ||
| await $('async-rerender .loaded').waitForExist(); | ||
| const listItems3 = await $$('async-rerender .number'); | ||
| await expect(listItems3.length).toBe(10); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { Component, h, Host, State } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'async-rerender', | ||
| scoped: true, | ||
| }) | ||
| export class MyComponent { | ||
| @State() data: any[]; | ||
|
|
||
| @State() isLoaded = false; | ||
|
|
||
| componentWillLoad() { | ||
| this.fetchData(); | ||
| } | ||
|
|
||
| private asyncThing(): Promise<{ name: string }[]> { | ||
| return new Promise((resolve) => { | ||
| setTimeout(() => { | ||
| const data = Array.from({ length: 20 }, (_, i) => ({ name: `name ${i + 1}` })); | ||
|
|
||
| const getRandomItems = (arr: any, num: number) => { | ||
| const shuffled = arr.sort(() => 0.5 - Math.random()); | ||
| return shuffled.slice(0, num); | ||
| }; | ||
|
|
||
| resolve(getRandomItems(data, 10)); | ||
| }, 500); | ||
| }); | ||
| } | ||
|
|
||
| async fetchData() { | ||
| this.data = await this.asyncThing(); | ||
| this.isLoaded = true; | ||
| } | ||
|
|
||
| async prev() { | ||
| this.isLoaded = false; | ||
| this.data = (await this.asyncThing()).slice(0, 5); | ||
| this.isLoaded = true; | ||
| } | ||
|
|
||
| async after() { | ||
| this.isLoaded = false; | ||
| this.data = await this.asyncThing(); | ||
| this.isLoaded = true; | ||
| } | ||
|
|
||
| display() { | ||
| return this.data !== undefined && this.data !== null; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <Host> | ||
| <p> | ||
| <button onClick={() => this.prev()}>Previous</button> | ||
| <button onClick={() => this.after()}>Next</button> | ||
| </p> | ||
| {this.display() && ( | ||
| <section class={`data-state ${this.isLoaded ? 'loaded' : ''}`}> | ||
| {this.data?.map((d) => <div class="number">{d.name}</div>)} | ||
| </section> | ||
| )} | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { h } from '@stencil/core'; | ||
| import { render } from '@wdio/browser-runner/stencil'; | ||
| import { $, expect } from '@wdio/globals'; | ||
|
|
||
| describe('scoped adding and removing of classes', () => { | ||
| before(async () => { | ||
| render({ | ||
| template: () => ( | ||
| <scoped-add-remove-classes | ||
| items={[ | ||
| { id: 1, label: 'Item 1', selected: false }, | ||
| { id: 2, label: 'Item 2', selected: true }, | ||
| { id: 3, label: 'Item 3', selected: false }, | ||
| { id: 4, label: 'Item 4', selected: false }, | ||
| { id: 5, label: 'Item 5', selected: false }, | ||
| { id: 6, label: 'Item 6', selected: false }, | ||
| { id: 7, label: 'Item 7', selected: false }, | ||
| { id: 8, label: 'Item 8', selected: false }, | ||
| ]} | ||
| selectedItems={[2]} | ||
| ></scoped-add-remove-classes> | ||
| ), | ||
| }); | ||
| }); | ||
|
|
||
| it('clicking new items, adds class and removes other item classes', async () => { | ||
| await $('scoped-add-remove-classes .menu-item').waitForExist(); | ||
| const items = $$('scoped-add-remove-classes .menu-item'); | ||
|
|
||
| let selectedItems = await $$('scoped-add-remove-classes .menu-selected'); | ||
| await expect(selectedItems.length).toBe(1); | ||
|
|
||
| await items[0].click(); | ||
| selectedItems = await $$('scoped-add-remove-classes .menu-selected'); | ||
| await expect(selectedItems.length).toBe(1); | ||
|
|
||
| await items[1].click(); | ||
| selectedItems = await $$('scoped-add-remove-classes .menu-selected'); | ||
| await expect(selectedItems.length).toBe(1); | ||
|
|
||
| await items[7].click(); | ||
| selectedItems = await $$('scoped-add-remove-classes .menu-selected'); | ||
| await expect(selectedItems.length).toBe(1); | ||
| }); | ||
| }); |
Oops, something went wrong.