Skip to content

Commit eda7cd0

Browse files
author
John Jenkins
committed
chore: test 2 layer extends
1 parent 79f3abb commit eda7cd0

File tree

5 files changed

+121
-62
lines changed

5 files changed

+121
-62
lines changed

‎test/wdio/ts-target/components.d.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,18 @@ export namespace Components {
1818
*/
1919
"prop2": string;
2020
}
21+
interface ExtendedCmpCmp {
22+
"method1": () => Promise<void>;
23+
"method2": () => Promise<void>;
24+
/**
25+
* @default 'ExtendedCmp text'
26+
*/
27+
"prop1": string;
28+
/**
29+
* @default 'ExtendedCmp prop2 text'
30+
*/
31+
"prop2": string;
32+
}
2133
interface ExtendsCmpCmp {
2234
"method1": () => Promise<void>;
2335
"method2": () => Promise<void>;
@@ -74,6 +86,12 @@ declare global {
7486
prototype: HTMLExtendedCmpElement;
7587
new (): HTMLExtendedCmpElement;
7688
};
89+
interface HTMLExtendedCmpCmpElement extends Components.ExtendedCmpCmp, HTMLStencilElement {
90+
}
91+
var HTMLExtendedCmpCmpElement: {
92+
prototype: HTMLExtendedCmpCmpElement;
93+
new (): HTMLExtendedCmpCmpElement;
94+
};
7795
interface HTMLExtendsCmpCmpElement extends Components.ExtendsCmpCmp, HTMLStencilElement {
7896
}
7997
var HTMLExtendsCmpCmpElement: {
@@ -100,6 +118,7 @@ declare global {
100118
};
101119
interface HTMLElementTagNameMap {
102120
"extended-cmp": HTMLExtendedCmpElement;
121+
"extended-cmp-cmp": HTMLExtendedCmpCmpElement;
103122
"extends-cmp-cmp": HTMLExtendsCmpCmpElement;
104123
"extends-external": HTMLExtendsExternalElement;
105124
"extends-mixin": HTMLExtendsMixinElement;
@@ -117,6 +136,16 @@ declare namespace LocalJSX {
117136
*/
118137
"prop2"?: string;
119138
}
139+
interface ExtendedCmpCmp {
140+
/**
141+
* @default 'ExtendedCmp text'
142+
*/
143+
"prop1"?: string;
144+
/**
145+
* @default 'ExtendedCmp prop2 text'
146+
*/
147+
"prop2"?: string;
148+
}
120149
interface ExtendsCmpCmp {
121150
/**
122151
* @default 'default text'
@@ -161,6 +190,7 @@ declare namespace LocalJSX {
161190
}
162191
interface IntrinsicElements {
163192
"extended-cmp": ExtendedCmp;
193+
"extended-cmp-cmp": ExtendedCmpCmp;
164194
"extends-cmp-cmp": ExtendsCmpCmp;
165195
"extends-external": ExtendsExternal;
166196
"extends-mixin": ExtendsMixin;
@@ -172,6 +202,7 @@ declare module "@stencil/core" {
172202
export namespace JSX {
173203
interface IntrinsicElements {
174204
"extended-cmp": LocalJSX.ExtendedCmp & JSXBase.HTMLAttributes<HTMLExtendedCmpElement>;
205+
"extended-cmp-cmp": LocalJSX.ExtendedCmpCmp & JSXBase.HTMLAttributes<HTMLExtendedCmpCmpElement>;
175206
"extends-cmp-cmp": LocalJSX.ExtendsCmpCmp & JSXBase.HTMLAttributes<HTMLExtendsCmpCmpElement>;
176207
"extends-external": LocalJSX.ExtendsExternal & JSXBase.HTMLAttributes<HTMLExtendsExternalElement>;
177208
"extends-mixin": LocalJSX.ExtendsMixin & JSXBase.HTMLAttributes<HTMLExtendsMixinElement>;

‎test/wdio/ts-target/extends-cmp/extended-cmp-cmp.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Component, h, Prop, State, Method, Watch } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'extended-cmp-cmp',
5+
})
6+
export class ExtendedCmpCmp {
7+
@Prop() prop1: string = 'ExtendedCmp text';
8+
@Watch('prop1')
9+
prop1Changed(newValue: string) {
10+
console.info('extended class handler prop1:', newValue);
11+
}
12+
@Prop() prop2: string = 'ExtendedCmp prop2 text';
13+
@Watch('prop2')
14+
prop2Changed(newValue: string) {
15+
console.info('extended class handler prop2:', newValue);
16+
}
17+
18+
@State() state1: string = 'ExtendedCmp state text';
19+
@Watch('state1')
20+
state1Changed(newValue: string) {
21+
console.info('extended class handler state1:', newValue);
22+
}
23+
@State() state2: string = 'ExtendedCmp state2 text';
24+
@Watch('state2')
25+
state2Changed(newValue: string) {
26+
console.info('extended class handler state2:', newValue);
27+
}
28+
29+
@Method()
30+
async method1() {
31+
this.prop1 = 'ExtendedCmp method1 called';
32+
}
33+
34+
@Method()
35+
async method2() {
36+
this.prop1 = 'ExtendedCmp method2 called';
37+
}
38+
39+
render() {
40+
return (
41+
<div>
42+
<p class="extended-prop-1">Extended class prop 1: {this.prop1}</p>
43+
<p class="extended-prop-2">Extended class prop 2: {this.prop2}</p>
44+
<p class="extended-state-1">Extended class state 1: {this.state1}</p>
45+
<p class="extended-state-2">Extended class state 2: {this.state2}</p>
46+
</div>
47+
);
48+
}
49+
}

‎test/wdio/ts-target/extends-cmp/extended-cmp.tsx

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,10 @@
1-
import { Component, h, Prop, State, Method, Watch } from '@stencil/core';
1+
import { Component, h } from '@stencil/core';
2+
import { ExtendedCmpCmp } from './extended-cmp-cmp.js';
23

34
@Component({
45
tag: 'extended-cmp',
56
})
6-
export class ExtendedCmp {
7-
@Prop() prop1: string = 'ExtendedCmp text';
8-
@Watch('prop1')
9-
prop1Changed(newValue: string) {
10-
console.info('extended class handler prop1:', newValue);
11-
}
12-
@Prop() prop2: string = 'ExtendedCmp prop2 text';
13-
@Watch('prop2')
14-
prop2Changed(newValue: string) {
15-
console.info('extended class handler prop2:', newValue);
16-
}
17-
18-
@State() state1: string = 'ExtendedCmp state text';
19-
@Watch('state1')
20-
state1Changed(newValue: string) {
21-
console.info('extended class handler state1:', newValue);
22-
}
23-
@State() state2: string = 'ExtendedCmp state2 text';
24-
@Watch('state2')
25-
state2Changed(newValue: string) {
26-
console.info('extended class handler state2:', newValue);
27-
}
28-
29-
@Method()
30-
async method1() {
31-
this.prop1 = 'ExtendedCmp method1 called';
32-
}
33-
34-
@Method()
35-
async method2() {
36-
this.prop1 = 'ExtendedCmp method2 called';
37-
}
38-
7+
export class ExtendedCmp extends ExtendedCmpCmp {
398
render() {
409
return (
4110
<div>

‎test/wdio/ts-target/extends-mixin/mixin-class.ts

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,10 @@
1-
import { Prop, State, Method, Watch } from '@stencil/core';
1+
import { Prop, Watch } from '@stencil/core';
2+
import { MixinParent } from './mxin-class-parent.js';
23

3-
export class Mixin {
4+
export class Mixin extends MixinParent {
45
@Prop() prop1: string = 'ExtendedCmp text';
56
@Watch('prop1')
67
prop1Changed(newValue: string) {
78
console.info('extended class handler prop1:', newValue);
89
}
9-
@Prop() prop2: string = 'ExtendedCmp prop2 text';
10-
@Watch('prop2')
11-
prop2Changed(newValue: string) {
12-
console.info('extended class handler prop2:', newValue);
13-
}
14-
15-
@State() state1: string = 'ExtendedCmp state text';
16-
@Watch('state1')
17-
state1Changed(newValue: string) {
18-
console.info('extended class handler state1:', newValue);
19-
}
20-
@State() state2: string = 'ExtendedCmp state2 text';
21-
@Watch('state2')
22-
state2Changed(newValue: string) {
23-
console.info('extended class handler state2:', newValue);
24-
}
25-
26-
@Method()
27-
async method1() {
28-
this.prop1 = 'ExtendedCmp method1 called';
29-
}
30-
31-
@Method()
32-
async method2() {
33-
this.prop1 = 'ExtendedCmp method2 called';
34-
}
3510
}

‎test/wdio/ts-target/extends-mixin/mxin-class-parent.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Prop, State, Method, Watch } from '@stencil/core';
2+
3+
export class MixinParent {
4+
@Prop() prop1: string = 'ExtendedCmp text';
5+
@Watch('prop1')
6+
prop1Changed(newValue: string) {
7+
console.info('extended class handler prop1:', newValue);
8+
}
9+
@Prop() prop2: string = 'ExtendedCmp prop2 text';
10+
@Watch('prop2')
11+
prop2Changed(newValue: string) {
12+
console.info('extended class handler prop2:', newValue);
13+
}
14+
15+
@State() state1: string = 'ExtendedCmp state text';
16+
@Watch('state1')
17+
state1Changed(newValue: string) {
18+
console.info('extended class handler state1:', newValue);
19+
}
20+
@State() state2: string = 'ExtendedCmp state2 text';
21+
@Watch('state2')
22+
state2Changed(newValue: string) {
23+
console.info('extended class handler state2:', newValue);
24+
}
25+
26+
@Method()
27+
async method1() {
28+
this.prop1 = 'ExtendedCmp method1 called';
29+
}
30+
31+
@Method()
32+
async method2() {
33+
this.prop1 = 'ExtendedCmp method2 called';
34+
}
35+
}

0 commit comments

Comments
 (0)