From dfc1e593f19e32d37cc9bd2f869512d1b51e0fc0 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 4 Aug 2020 17:02:26 -0500 Subject: [PATCH] feat(forceUpdate): remove deprecated elm.forceUpdate() The `elm.forceUpdate()` method has been removed. Instead, import the function from `@stencil/core` and call `forceUpdate(elm)` --- src/declarations/stencil-public-runtime.ts | 3 --- src/runtime/bootstrap-lazy.ts | 16 ++--------- src/runtime/test/lifecycle-sync.spec.tsx | 14 +++------- src/runtime/test/render-vdom.spec.tsx | 15 ++++++++--- src/runtime/vdom/test/scoped-slot.spec.tsx | 26 +++++++++--------- .../slot-cmp-container/slot-cmp-container.tsx | 6 ++--- test/karma/test-app/components.d.ts | 14 ---------- test/karma/test-app/legacy-context/cmp.tsx | 27 ------------------- test/karma/test-app/legacy-context/index.html | 6 ----- .../test-app/legacy-context/karma.spec.ts | 26 ------------------ 10 files changed, 32 insertions(+), 121 deletions(-) delete mode 100644 test/karma/test-app/legacy-context/cmp.tsx delete mode 100644 test/karma/test-app/legacy-context/index.html delete mode 100644 test/karma/test-app/legacy-context/karma.spec.ts diff --git a/src/declarations/stencil-public-runtime.ts b/src/declarations/stencil-public-runtime.ts index 4aa1495a72b..51cca073fa6 100644 --- a/src/declarations/stencil-public-runtime.ts +++ b/src/declarations/stencil-public-runtime.ts @@ -291,9 +291,6 @@ export declare function getRenderingRef(): any; export interface HTMLStencilElement extends HTMLElement { componentOnReady(): Promise; - - /** @deprecated */ - forceUpdate(): void; } /** diff --git a/src/runtime/bootstrap-lazy.ts b/src/runtime/bootstrap-lazy.ts index b401861563f..c1850012f05 100644 --- a/src/runtime/bootstrap-lazy.ts +++ b/src/runtime/bootstrap-lazy.ts @@ -1,12 +1,12 @@ import * as d from '../declarations'; -import { appDidLoad, forceUpdate } from './update-component'; +import { appDidLoad } from './update-component'; import { BUILD } from '@app-data'; import { CMP_FLAGS } from '@utils'; import { connectedCallback } from './connected-callback'; import { convertScopedToShadow, registerStyle } from './styles'; import { createTime, installDevTools } from './profile'; import { disconnectedCallback } from './disconnected-callback'; -import { doc, getHostRef, plt, registerHost, win, supportsShadow, consoleDevWarn } from '@platform'; +import { doc, getHostRef, plt, registerHost, win, supportsShadow } from '@platform'; import { hmrStart } from './hmr-component'; import { HYDRATED_CSS, HYDRATED_STYLE_ID, PLATFORM_FLAGS, PROXY_FLAGS } from './runtime-constants'; import { patchCloneNode, patchSlotAppendChild, patchChildSlotNodes } from './dom-extras'; @@ -124,18 +124,6 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d. plt.jmp(() => disconnectedCallback(this)); } - forceUpdate() { - if (BUILD.isDev) { - consoleDevWarn(`element.forceUpdate() is deprecated, use the "forceUpdate" function from "@stencil/core" instead: - - import { forceUpdate } from ‘@stencil/core’; - - forceUpdate(this); - forceUpdate(element);`); - } - forceUpdate(this); - } - componentOnReady() { return getHostRef(this).$onReadyPromise$; } diff --git a/src/runtime/test/lifecycle-sync.spec.tsx b/src/runtime/test/lifecycle-sync.spec.tsx index 548533f5905..236ffe2ac6d 100644 --- a/src/runtime/test/lifecycle-sync.spec.tsx +++ b/src/runtime/test/lifecycle-sync.spec.tsx @@ -1,6 +1,5 @@ -import { Component, Element, Host, Method, Prop, Watch, h } from '@stencil/core'; +import { Component, Element, Host, Method, Prop, Watch, h, forceUpdate } from '@stencil/core'; import { newSpecPage } from '@stencil/core/testing'; -import { expectExtend } from '../../testing/matchers'; describe('lifecycle sync', () => { it('should fire connected/disconnected when removed', async () => { @@ -246,7 +245,7 @@ describe('lifecycle sync', () => { 'componentDidLoad a', ]); log.length = 0; - root.forceUpdate(); + forceUpdate(root); await waitForChanges(); expect(log).toEqual(['componentWillUpdate a', 'componentDidUpdate a']); @@ -269,7 +268,6 @@ describe('lifecycle sync', () => { it('all state is available on "will" lifecycles', async () => { @Component({ tag: 'cmp-child' }) class CmpChild { - @Prop() width = 0; @Prop() height = 0; @@ -319,12 +317,7 @@ describe('lifecycle sync', () => { } render() { - return ( - - ) + return ; } } @@ -349,5 +342,4 @@ describe('lifecycle sync', () => { `); }); - }); diff --git a/src/runtime/test/render-vdom.spec.tsx b/src/runtime/test/render-vdom.spec.tsx index 224f3a3982c..10bdaea7c03 100644 --- a/src/runtime/test/render-vdom.spec.tsx +++ b/src/runtime/test/render-vdom.spec.tsx @@ -390,7 +390,11 @@ describe('render-vdom', () => { @State() valid = false; render() { this.nuRender++; - return
this.valid = true}>{this.valid ? 'true' : 'false'} - {this.nuRender}
; + return ( +
(this.valid = true)}> + {this.valid ? 'true' : 'false'} - {this.nuRender} +
+ ); } } const { root } = await newSpecPage({ @@ -411,7 +415,11 @@ describe('render-vdom', () => { render() { this.valid = true; this.nuRender++; - return
{this.valid ? 'true' : 'false'} - {this.nuRender}
; + return ( +
+ {this.valid ? 'true' : 'false'} - {this.nuRender} +
+ ); } } const { root } = await newSpecPage({ @@ -424,7 +432,6 @@ describe('render-vdom', () => { `); }); - it('Hello VDOM, re-render, flush', async () => { @Component({ tag: 'cmp-a' }) class CmpA { @@ -1010,7 +1017,7 @@ describe('render-vdom', () => { }); expect(rootInstance.counter).toEqual(1); - root.forceUpdate(); + forceUpdate(root); await waitForChanges(); expect(rootInstance.counter).toEqual(1); diff --git a/src/runtime/vdom/test/scoped-slot.spec.tsx b/src/runtime/vdom/test/scoped-slot.spec.tsx index f6759408b00..390d2828e53 100644 --- a/src/runtime/vdom/test/scoped-slot.spec.tsx +++ b/src/runtime/vdom/test/scoped-slot.spec.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h } from '@stencil/core'; +import { Component, Prop, h, forceUpdate } from '@stencil/core'; import { newSpecPage } from '@stencil/core/testing'; describe('scoped slot', () => { @@ -284,7 +284,7 @@ describe('scoped slot', () => { expect(root.firstElementChild.firstElementChild.firstElementChild.firstElementChild.firstElementChild.nodeName).toBe('DINGO'); expect(root.firstElementChild.firstElementChild.firstElementChild.firstElementChild.firstElementChild.textContent).toBe('parent message'); - root.forceUpdate(); + forceUpdate(root); await waitForChanges(); expect(root.firstElementChild.nodeName).toBe('BADGER'); @@ -339,17 +339,17 @@ describe('scoped slot', () => { expect(root.firstElementChild.textContent).toBe(''); const child = root.querySelector('ion-child'); - child.forceUpdate(); + forceUpdate(child); await waitForChanges(); expect(root.firstElementChild.textContent).toBe('content 1content 2'); - child.forceUpdate(); + forceUpdate(child); await waitForChanges(); expect(root.firstElementChild.textContent).toBe(''); - child.forceUpdate(); + forceUpdate(child); await waitForChanges(); expect(root.firstElementChild.textContent).toBe('content 4'); }); @@ -501,7 +501,7 @@ describe('scoped slot', () => { expect(root.firstElementChild.firstElementChild.children[1].nodeName).toBe('EAGLE'); expect(root.firstElementChild.firstElementChild.children[1].textContent).toBe('2'); - root.forceUpdate(); + forceUpdate(root); await waitForChanges(); expect(root.firstElementChild.nodeName).toBe('ION-CHILD'); @@ -511,7 +511,7 @@ describe('scoped slot', () => { expect(root.firstElementChild.firstElementChild.children[1].nodeName).toBe('EAGLE'); expect(root.firstElementChild.firstElementChild.children[1].textContent).toBe('4'); - root.forceUpdate(); + forceUpdate(root); await waitForChanges(); expect(root.firstElementChild.nodeName).toBe('ION-CHILD'); @@ -571,7 +571,7 @@ describe('scoped slot', () => { expect(root.firstElementChild.firstElementChild.children[1].children[1].children[0].nodeName).toBe('FOX'); expect(root.firstElementChild.firstElementChild.children[1].children[1].children[0].textContent).toBe('2'); - root.forceUpdate(); + forceUpdate(root); await waitForChanges(); expect(root.firstElementChild.nodeName).toBe('ION-CHILD'); @@ -585,7 +585,7 @@ describe('scoped slot', () => { expect(root.firstElementChild.firstElementChild.children[1].children[1].children[0].nodeName).toBe('FOX'); expect(root.firstElementChild.firstElementChild.children[1].children[1].children[0].textContent).toBe('5'); - root.forceUpdate(); + forceUpdate(root); await waitForChanges(); expect(root.firstElementChild.nodeName).toBe('ION-CHILD'); @@ -650,7 +650,7 @@ describe('scoped slot', () => { expect(root.firstElementChild.firstElementChild.firstElementChild.firstElementChild.firstElementChild.nodeName).toBe('GOAT'); expect(root.firstElementChild.firstElementChild.firstElementChild.firstElementChild.firstElementChild.textContent).toBe('1'); - root.forceUpdate(); + forceUpdate(root); await waitForChanges(); expect(root.firstElementChild.nodeName).toBe('TEST-1'); @@ -660,7 +660,7 @@ describe('scoped slot', () => { expect(root.firstElementChild.firstElementChild.firstElementChild.firstElementChild.firstElementChild.nodeName).toBe('GOAT'); expect(root.firstElementChild.firstElementChild.firstElementChild.firstElementChild.firstElementChild.textContent).toBe('2'); - root.forceUpdate(); + forceUpdate(root); await waitForChanges(); expect(root.firstElementChild.nodeName).toBe('TEST-1'); @@ -727,7 +727,7 @@ describe('scoped slot', () => { // expect(root.firstElementChild.firstElementChild.children[1].firstElementChild.children[1].nodeName).toBe('GOAT'); // expect(root.firstElementChild.firstElementChild.children[1].firstElementChild.children[1].textContent).toBe('hey goat!'); - // root.forceUpdate(); + // forceUpdate(root); // await waitForChanges(); // expect(root.firstElementChild.nodeName).toBe('TEST-1'); @@ -741,7 +741,7 @@ describe('scoped slot', () => { // expect(root.firstElementChild.firstElementChild.children[1].firstElementChild.children[1].nodeName).toBe('GOAT'); // expect(root.firstElementChild.firstElementChild.children[1].firstElementChild.children[1].textContent).toBe('hey goat!'); - // root.forceUpdate(); + // forceUpdate(root); // await waitForChanges(); // expect(root.firstElementChild.nodeName).toBe('TEST-1'); diff --git a/test/end-to-end/src/slot-cmp-container/slot-cmp-container.tsx b/test/end-to-end/src/slot-cmp-container/slot-cmp-container.tsx index 02b1cc62bde..e5c43a3535e 100644 --- a/test/end-to-end/src/slot-cmp-container/slot-cmp-container.tsx +++ b/test/end-to-end/src/slot-cmp-container/slot-cmp-container.tsx @@ -1,15 +1,15 @@ -import { Component, Element, Host, h } from '@stencil/core'; +import { Component, Element, Host, h, forceUpdate } from '@stencil/core'; @Component({ tag: 'slot-cmp-container', styles: ':host { display: block; margin: 5em; }', - shadow: true + shadow: true, }) export class PropCmp { @Element() host: HTMLPropCmpElement; componentDidLoad() { - setTimeout(() => this.host.forceUpdate(), 1); + setTimeout(() => forceUpdate(this.host), 1); } render() { diff --git a/test/karma/test-app/components.d.ts b/test/karma/test-app/components.d.ts index 436a4d6c5dc..f947ebbe851 100644 --- a/test/karma/test-app/components.d.ts +++ b/test/karma/test-app/components.d.ts @@ -109,9 +109,6 @@ export namespace Components { } interface KeyReorderRoot { } - interface LegacyContext { - "getData": () => Promise<{ win: Window; doc: Document; hasQueue: boolean; isServer: boolean; unknown: any; myService: any; }>; - } interface LessCmp { } interface LifecycleAsyncA { @@ -520,12 +517,6 @@ declare global { prototype: HTMLKeyReorderRootElement; new (): HTMLKeyReorderRootElement; }; - interface HTMLLegacyContextElement extends Components.LegacyContext, HTMLStencilElement { - } - var HTMLLegacyContextElement: { - prototype: HTMLLegacyContextElement; - new (): HTMLLegacyContextElement; - }; interface HTMLLessCmpElement extends Components.LessCmp, HTMLStencilElement { } var HTMLLessCmpElement: { @@ -1026,7 +1017,6 @@ declare global { "json-basic": HTMLJsonBasicElement; "key-reorder": HTMLKeyReorderElement; "key-reorder-root": HTMLKeyReorderRootElement; - "legacy-context": HTMLLegacyContextElement; "less-cmp": HTMLLessCmpElement; "lifecycle-async-a": HTMLLifecycleAsyncAElement; "lifecycle-async-b": HTMLLifecycleAsyncBElement; @@ -1206,8 +1196,6 @@ declare namespace LocalJSX { } interface KeyReorderRoot { } - interface LegacyContext { - } interface LessCmp { } interface LifecycleAsyncA { @@ -1438,7 +1426,6 @@ declare namespace LocalJSX { "json-basic": JsonBasic; "key-reorder": KeyReorder; "key-reorder-root": KeyReorderRoot; - "legacy-context": LegacyContext; "less-cmp": LessCmp; "lifecycle-async-a": LifecycleAsyncA; "lifecycle-async-b": LifecycleAsyncB; @@ -1559,7 +1546,6 @@ declare module "@stencil/core" { "json-basic": LocalJSX.JsonBasic & JSXBase.HTMLAttributes; "key-reorder": LocalJSX.KeyReorder & JSXBase.HTMLAttributes; "key-reorder-root": LocalJSX.KeyReorderRoot & JSXBase.HTMLAttributes; - "legacy-context": LocalJSX.LegacyContext & JSXBase.HTMLAttributes; "less-cmp": LocalJSX.LessCmp & JSXBase.HTMLAttributes; "lifecycle-async-a": LocalJSX.LifecycleAsyncA & JSXBase.HTMLAttributes; "lifecycle-async-b": LocalJSX.LifecycleAsyncB & JSXBase.HTMLAttributes; diff --git a/test/karma/test-app/legacy-context/cmp.tsx b/test/karma/test-app/legacy-context/cmp.tsx deleted file mode 100644 index 27e5ef05a33..00000000000 --- a/test/karma/test-app/legacy-context/cmp.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Component, Prop, QueueApi, Method } from '@stencil/core'; - -@Component({ - tag: 'legacy-context' -}) -export class LegacyContextRoot { - - @Prop({context: 'window'}) win!: Window; - @Prop({context: 'document'}) doc!: Document; - @Prop({context: 'queue'}) queue!: QueueApi; - @Prop({context: 'isServer'}) isServer!: boolean; - @Prop({context: 'resourcesUrl'}) resourcesUrl!: string; - @Prop({context: 'unknown'}) unknown: any; - @Prop({context: 'myService'}) myService: any; - - @Method() - async getData() { - return { - win: this.win, - doc: this.doc, - hasQueue: !!this.queue, - isServer: this.isServer, - unknown: this.unknown, - myService: this.myService - } - } -} diff --git a/test/karma/test-app/legacy-context/index.html b/test/karma/test-app/legacy-context/index.html deleted file mode 100644 index b966b74e051..00000000000 --- a/test/karma/test-app/legacy-context/index.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/test/karma/test-app/legacy-context/karma.spec.ts b/test/karma/test-app/legacy-context/karma.spec.ts deleted file mode 100644 index 13627d1c80d..00000000000 --- a/test/karma/test-app/legacy-context/karma.spec.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { setupDomTests } from '../util'; - - -describe('legacy-context', function() { - const { setupDom, tearDownDom } = setupDomTests(document); - let app: HTMLElement; - - beforeEach(async () => { - app = await setupDom('/legacy-context/index.html'); - }); - afterEach(tearDownDom); - - it('should have global context', async () => { - const cmp = app.querySelector('legacy-context'); - const data = await cmp.getData(); - expect(data).toEqual({ - win: window, - doc: document, - hasQueue: true, - myService: 12, - isServer: false, - unknown: undefined, - }) - }); - -});