Skip to content

Commit 30f2a09

Browse files
christian-bromannchristian-bromann
authored
fix(hydrate): support dash-case case in hydrate mode (#6158)
* fix(hydrate): support kebab case in hydrate mode * deprecate usage of dash-casing in JSX * better deprecation message * prettier * prettier * fix unit test * make deprecated properties optional
1 parent 2a1038e commit 30f2a09

14 files changed

+612
-146
lines changed

‎src/compiler/types/generate-component-types.ts

+16
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,22 @@ const attributesToMultiLineString = (attributes: d.TypeInfo, jsxAttributes: bool
7676
}
7777
const optional = jsxAttributes ? !type.required : type.optional;
7878
fullList.push(` "${type.name}"${optional ? '?' : ''}: ${type.type};`);
79+
80+
/**
81+
* deprecated usage of dash-casing in JSX, use camelCase instead
82+
*/
83+
if (type.attributeName && type.attributeName !== type.name) {
84+
const padding = ' '.repeat(8);
85+
fullList.push(
86+
[
87+
`${padding}/**`,
88+
`${padding} * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.`,
89+
`${padding} */`,
90+
].join('\n'),
91+
);
92+
fullList.push(`${padding}"${type.attributeName}"?: ${type.type};`);
93+
}
94+
7995
return fullList;
8096
}, [] as string[])
8197
.join(`\n`);

‎src/compiler/types/generate-prop-types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export const generatePropTypes = (cmpMeta: d.ComponentCompilerMeta, typeImportDa
2020
}
2121
return {
2222
name: cmpProp.name,
23+
attributeName: cmpProp.attribute,
2324
type: getType(cmpProp, typeImportData, cmpMeta.sourceFilePath),
2425
optional: cmpProp.optional,
2526
required: cmpProp.required,

‎src/compiler/types/tests/generate-app-types.spec.ts

+106
Original file line numberDiff line numberDiff line change
@@ -847,6 +847,10 @@ export namespace Components {
847847
*/
848848
interface MyComponent {
849849
"name": UserImplementedPropType;
850+
/**
851+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
852+
*/
853+
"my-cmp"?: UserImplementedPropType;
850854
}
851855
}
852856
declare global {
@@ -869,6 +873,10 @@ declare namespace LocalJSX {
869873
*/
870874
interface MyComponent {
871875
"name"?: UserImplementedPropType;
876+
/**
877+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
878+
*/
879+
"my-cmp"?: UserImplementedPropType;
872880
}
873881
interface IntrinsicElements {
874882
"my-component": MyComponent;
@@ -949,7 +957,15 @@ export namespace Components {
949957
*/
950958
interface MyComponent {
951959
"email": SecondUserImplementedPropType;
960+
/**
961+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
962+
*/
963+
"my-cmp"?: SecondUserImplementedPropType;
952964
"name": UserImplementedPropType;
965+
/**
966+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
967+
*/
968+
"my-cmp"?: UserImplementedPropType;
953969
}
954970
}
955971
declare global {
@@ -972,7 +988,15 @@ declare namespace LocalJSX {
972988
*/
973989
interface MyComponent {
974990
"email"?: SecondUserImplementedPropType;
991+
/**
992+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
993+
*/
994+
"my-cmp"?: SecondUserImplementedPropType;
975995
"name"?: UserImplementedPropType;
996+
/**
997+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
998+
*/
999+
"my-cmp"?: UserImplementedPropType;
9761000
}
9771001
interface IntrinsicElements {
9781002
"my-component": MyComponent;
@@ -1063,12 +1087,20 @@ export namespace Components {
10631087
*/
10641088
interface MyComponent {
10651089
"name": UserImplementedPropType;
1090+
/**
1091+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1092+
*/
1093+
"my-cmp"?: UserImplementedPropType;
10661094
}
10671095
/**
10681096
* docs
10691097
*/
10701098
interface MyNewComponent {
10711099
"fullName": UserImplementedPropType;
1100+
/**
1101+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1102+
*/
1103+
"my-cmp"?: UserImplementedPropType;
10721104
}
10731105
}
10741106
declare global {
@@ -1101,12 +1133,20 @@ declare namespace LocalJSX {
11011133
*/
11021134
interface MyComponent {
11031135
"name"?: UserImplementedPropType;
1136+
/**
1137+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1138+
*/
1139+
"my-cmp"?: UserImplementedPropType;
11041140
}
11051141
/**
11061142
* docs
11071143
*/
11081144
interface MyNewComponent {
11091145
"fullName"?: UserImplementedPropType;
1146+
/**
1147+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1148+
*/
1149+
"my-cmp"?: UserImplementedPropType;
11101150
}
11111151
interface IntrinsicElements {
11121152
"my-component": MyComponent;
@@ -1207,12 +1247,20 @@ export namespace Components {
12071247
*/
12081248
interface MyComponent {
12091249
"name": UserImplementedPropType;
1250+
/**
1251+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1252+
*/
1253+
"my-cmp"?: UserImplementedPropType;
12101254
}
12111255
/**
12121256
* docs
12131257
*/
12141258
interface MyNewComponent {
12151259
"newName": UserImplementedPropType1;
1260+
/**
1261+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1262+
*/
1263+
"my-cmp"?: UserImplementedPropType1;
12161264
}
12171265
}
12181266
declare global {
@@ -1245,12 +1293,20 @@ declare namespace LocalJSX {
12451293
*/
12461294
interface MyComponent {
12471295
"name"?: UserImplementedPropType;
1296+
/**
1297+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1298+
*/
1299+
"my-cmp"?: UserImplementedPropType;
12481300
}
12491301
/**
12501302
* docs
12511303
*/
12521304
interface MyNewComponent {
12531305
"newName"?: UserImplementedPropType1;
1306+
/**
1307+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1308+
*/
1309+
"my-cmp"?: UserImplementedPropType1;
12541310
}
12551311
interface IntrinsicElements {
12561312
"my-component": MyComponent;
@@ -1351,12 +1407,20 @@ export namespace Components {
13511407
*/
13521408
interface MyComponent {
13531409
"name": UserImplementedPropType;
1410+
/**
1411+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1412+
*/
1413+
"my-cmp"?: UserImplementedPropType;
13541414
}
13551415
/**
13561416
* docs
13571417
*/
13581418
interface MyNewComponent {
13591419
"name": UserImplementedPropType1;
1420+
/**
1421+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1422+
*/
1423+
"my-cmp"?: UserImplementedPropType1;
13601424
}
13611425
}
13621426
declare global {
@@ -1389,12 +1453,20 @@ declare namespace LocalJSX {
13891453
*/
13901454
interface MyComponent {
13911455
"name"?: UserImplementedPropType;
1456+
/**
1457+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1458+
*/
1459+
"my-cmp"?: UserImplementedPropType;
13921460
}
13931461
/**
13941462
* docs
13951463
*/
13961464
interface MyNewComponent {
13971465
"name"?: UserImplementedPropType1;
1466+
/**
1467+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1468+
*/
1469+
"my-cmp"?: UserImplementedPropType1;
13981470
}
13991471
interface IntrinsicElements {
14001472
"my-component": MyComponent;
@@ -1472,6 +1544,10 @@ export namespace Components {
14721544
*/
14731545
interface MyComponent {
14741546
"name": UserImplementedPropType;
1547+
/**
1548+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1549+
*/
1550+
"my-cmp"?: UserImplementedPropType;
14751551
}
14761552
}
14771553
export interface MyComponentCustomEvent<T> extends CustomEvent<T> {
@@ -1509,6 +1585,10 @@ declare namespace LocalJSX {
15091585
*/
15101586
interface MyComponent {
15111587
"name"?: UserImplementedPropType;
1588+
/**
1589+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1590+
*/
1591+
"my-cmp"?: UserImplementedPropType;
15121592
"onMyEvent"?: (event: MyComponentCustomEvent<UserImplementedEventType>) => void;
15131593
}
15141594
interface IntrinsicElements {
@@ -1590,6 +1670,10 @@ export namespace Components {
15901670
*/
15911671
interface MyComponent {
15921672
"name": UserImplementedPropType;
1673+
/**
1674+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1675+
*/
1676+
"my-cmp"?: UserImplementedPropType;
15931677
}
15941678
}
15951679
declare global {
@@ -1612,6 +1696,10 @@ declare namespace LocalJSX {
16121696
*/
16131697
interface MyComponent {
16141698
"name"?: UserImplementedPropType;
1699+
/**
1700+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1701+
*/
1702+
"my-cmp"?: UserImplementedPropType;
16151703
}
16161704
interface IntrinsicElements {
16171705
"my-component": MyComponent;
@@ -1682,6 +1770,10 @@ export namespace Components {
16821770
*/
16831771
interface MyComponent {
16841772
"name": UserImplementedPropType;
1773+
/**
1774+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1775+
*/
1776+
"my-cmp"?: UserImplementedPropType;
16851777
}
16861778
}
16871779
declare global {
@@ -1704,6 +1796,10 @@ declare namespace LocalJSX {
17041796
*/
17051797
interface MyComponent {
17061798
"name"?: UserImplementedPropType;
1799+
/**
1800+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1801+
*/
1802+
"my-cmp"?: UserImplementedPropType;
17071803
}
17081804
interface IntrinsicElements {
17091805
"my-component": MyComponent;
@@ -1762,6 +1858,8 @@ declare module "@stencil/core" {
17621858

17631859
await generateAppTypes(config, compilerCtx, buildCtx, 'src');
17641860

1861+
console.log(mockWriteFile.mock.calls[0][1]);
1862+
17651863
expect(mockWriteFile).toHaveBeenCalledWith(
17661864
'/components.d.ts',
17671865
`/* eslint-disable */
@@ -1781,6 +1879,10 @@ export namespace Components {
17811879
*/
17821880
interface MyComponent {
17831881
"name": UserImplementedPropType;
1882+
/**
1883+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1884+
*/
1885+
"my-cmp"?: UserImplementedPropType;
17841886
}
17851887
}
17861888
declare global {
@@ -1803,6 +1905,10 @@ declare namespace LocalJSX {
18031905
*/
18041906
interface MyComponent {
18051907
"name"?: UserImplementedPropType;
1908+
/**
1909+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
1910+
*/
1911+
"my-cmp"?: UserImplementedPropType;
18061912
}
18071913
interface IntrinsicElements {
18081914
"my-component": MyComponent;

‎src/compiler/types/tests/generate-prop-types.spec.ts

+5
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ describe('generate-prop-types', () => {
4444

4545
const expectedTypeInfo: d.TypeInfo = [
4646
{
47+
attributeName: 'my-cmp',
4748
jsdoc: '',
4849
internal: false,
4950
name: 'propName',
@@ -69,6 +70,7 @@ describe('generate-prop-types', () => {
6970

7071
const expectedTypeInfo: d.TypeInfo = [
7172
{
73+
attributeName: 'my-cmp',
7274
jsdoc: '',
7375
internal: false,
7476
name: 'propName',
@@ -114,6 +116,7 @@ describe('generate-prop-types', () => {
114116

115117
const expectedTypeInfo: d.TypeInfo = [
116118
{
119+
attributeName: 'my-cmp',
117120
jsdoc: '',
118121
internal: false,
119122
name: 'propName',
@@ -149,6 +152,7 @@ describe('generate-prop-types', () => {
149152

150153
const expectedTypeInfo: d.TypeInfo = [
151154
{
155+
attributeName: 'my-cmp',
152156
jsdoc: '@readonly',
153157
internal: false,
154158
name: 'propName',
@@ -176,6 +180,7 @@ describe('generate-prop-types', () => {
176180

177181
const expectedTypeInfo: d.TypeInfo = [
178182
{
183+
attributeName: 'my-cmp',
179184
jsdoc: '',
180185
internal: false,
181186
name: 'propName',

‎src/declarations/stencil-private.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2565,6 +2565,7 @@ export interface TypesModule {
25652565
export type TypeInfo = {
25662566
name: string;
25672567
type: string;
2568+
attributeName?: string;
25682569
optional: boolean;
25692570
required: boolean;
25702571
internal: boolean;

‎src/hydrate/platform/proxy-host-element.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -90,17 +90,18 @@ export function proxyHostElement(elm: d.HostElement, cstr: d.ComponentConstructo
9090
}
9191

9292
// element
93-
Object.defineProperty(elm, memberName, {
94-
get: function (this: any) {
93+
const getterSetterDescriptor: PropertyDescriptor = {
94+
get: function (this: d.RuntimeRef) {
9595
return getValue(this, memberName);
9696
},
97-
set(this: d.RuntimeRef, newValue) {
98-
// proxyComponent, set value
97+
set: function (this: d.RuntimeRef, newValue: unknown) {
9998
setValue(this, memberName, newValue, cmpMeta);
10099
},
101100
configurable: true,
102101
enumerable: true,
103-
});
102+
};
103+
Object.defineProperty(elm, memberName, getterSetterDescriptor);
104+
Object.defineProperty(elm, metaAttributeName, getterSetterDescriptor);
104105

105106
if (!(cstr as any).prototype.__stencilAugmented) {
106107
// instance prototype

0 commit comments

Comments
 (0)