Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(forceUpdate): remove deprecated elm.forceUpdate()
The `elm.forceUpdate()` method has been removed. Instead, import the function from `@stencil/core` and call `forceUpdate(elm)`
  • Loading branch information
adamdbradley committed Aug 4, 2020
1 parent 58a27d2 commit dfc1e59
Show file tree
Hide file tree
Showing 10 changed files with 32 additions and 121 deletions.
3 changes: 0 additions & 3 deletions src/declarations/stencil-public-runtime.ts
Expand Up @@ -291,9 +291,6 @@ export declare function getRenderingRef(): any;

export interface HTMLStencilElement extends HTMLElement {
componentOnReady(): Promise<this>;

/** @deprecated */
forceUpdate(): void;
}

/**
Expand Down
16 changes: 2 additions & 14 deletions 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';
Expand Down Expand Up @@ -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$;
}
Expand Down
14 changes: 3 additions & 11 deletions 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 () => {
Expand Down Expand Up @@ -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']);

Expand All @@ -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;

Expand Down Expand Up @@ -319,12 +317,7 @@ describe('lifecycle sync', () => {
}

render() {
return (
<cmp-child
width={this.value}
height={this.value}
/>
)
return <cmp-child width={this.value} height={this.value} />;
}
}

Expand All @@ -349,5 +342,4 @@ describe('lifecycle sync', () => {
</cmp-root>
`);
});

});
15 changes: 11 additions & 4 deletions src/runtime/test/render-vdom.spec.tsx
Expand Up @@ -390,7 +390,11 @@ describe('render-vdom', () => {
@State() valid = false;
render() {
this.nuRender++;
return <div ref={() => this.valid = true}>{this.valid ? 'true' : 'false'} - {this.nuRender}</div>;
return (
<div ref={() => (this.valid = true)}>
{this.valid ? 'true' : 'false'} - {this.nuRender}
</div>
);
}
}
const { root } = await newSpecPage({
Expand All @@ -411,7 +415,11 @@ describe('render-vdom', () => {
render() {
this.valid = true;
this.nuRender++;
return <div>{this.valid ? 'true' : 'false'} - {this.nuRender}</div>;
return (
<div>
{this.valid ? 'true' : 'false'} - {this.nuRender}
</div>
);
}
}
const { root } = await newSpecPage({
Expand All @@ -424,7 +432,6 @@ describe('render-vdom', () => {
`);
});


it('Hello VDOM, re-render, flush', async () => {
@Component({ tag: 'cmp-a' })
class CmpA {
Expand Down Expand Up @@ -1010,7 +1017,7 @@ describe('render-vdom', () => {
});

expect(rootInstance.counter).toEqual(1);
root.forceUpdate();
forceUpdate(root);
await waitForChanges();

expect(rootInstance.counter).toEqual(1);
Expand Down
26 changes: 13 additions & 13 deletions 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', () => {
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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');
});
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand Down
6 changes: 3 additions & 3 deletions 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() {
Expand Down
14 changes: 0 additions & 14 deletions test/karma/test-app/components.d.ts
Expand Up @@ -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 {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1206,8 +1196,6 @@ declare namespace LocalJSX {
}
interface KeyReorderRoot {
}
interface LegacyContext {
}
interface LessCmp {
}
interface LifecycleAsyncA {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1559,7 +1546,6 @@ declare module "@stencil/core" {
"json-basic": LocalJSX.JsonBasic & JSXBase.HTMLAttributes<HTMLJsonBasicElement>;
"key-reorder": LocalJSX.KeyReorder & JSXBase.HTMLAttributes<HTMLKeyReorderElement>;
"key-reorder-root": LocalJSX.KeyReorderRoot & JSXBase.HTMLAttributes<HTMLKeyReorderRootElement>;
"legacy-context": LocalJSX.LegacyContext & JSXBase.HTMLAttributes<HTMLLegacyContextElement>;
"less-cmp": LocalJSX.LessCmp & JSXBase.HTMLAttributes<HTMLLessCmpElement>;
"lifecycle-async-a": LocalJSX.LifecycleAsyncA & JSXBase.HTMLAttributes<HTMLLifecycleAsyncAElement>;
"lifecycle-async-b": LocalJSX.LifecycleAsyncB & JSXBase.HTMLAttributes<HTMLLifecycleAsyncBElement>;
Expand Down
27 changes: 0 additions & 27 deletions test/karma/test-app/legacy-context/cmp.tsx

This file was deleted.

6 changes: 0 additions & 6 deletions test/karma/test-app/legacy-context/index.html

This file was deleted.

26 changes: 0 additions & 26 deletions test/karma/test-app/legacy-context/karma.spec.ts

This file was deleted.

0 comments on commit dfc1e59

Please sign in to comment.