Skip to content

Commit 42e1f3a

Browse files
semantic-release-botsemantic-release-bot
committed
feat(vue): add tag transformation
1 parent 65250e0 commit 42e1f3a

File tree

14 files changed

+145
-50
lines changed

14 files changed

+145
-50
lines changed

‎example-project/component-library-vue/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
".": {
2323
"types": "./dist/index.d.ts",
2424
"import": "./dist/index.js"
25+
},
26+
"./tag-transformer": {
27+
"types": "./dist/tag-transformer.d.ts",
28+
"import": "./dist/tag-transformer.js"
2529
}
2630
},
2731
"types": "./dist/index.d.ts",

‎example-project/component-library-vue/src/index.ts‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,7 @@ import { defineCustomElement as defineMyRange } from 'component-library/componen
2626
import { defineCustomElement as defineMyToggle } from 'component-library/components/my-toggle.js';
2727
import { defineCustomElement as defineMyToggleContent } from 'component-library/components/my-toggle-content.js';
2828
import { defineCustomElement as defineMyTransformTest } from 'component-library/components/my-transform-test.js';
29-
import { transformTag } from 'component-library';
30-
import { transformTag as transformTagSSR } from 'component-library/hydrate';
29+
import { transformTag, getTagTransformer } from './tag-transformer.js';
3130

3231

3332

@@ -70,7 +69,7 @@ export const MyButton: StencilVueComponent<JSX.MyButton> = /*@__PURE__*/ globalT
7069
'onMyFocus': [Function],
7170
'onMyBlur': [Function]
7271
},
73-
transformTagFn: transformTagSSR
72+
getTagTransformer: getTagTransformer
7473
});
7574

7675

@@ -113,7 +112,7 @@ export const MyButtonScoped: StencilVueComponent<JSX.MyButtonScoped> = /*@__PURE
113112
'onMyFocus': [Function],
114113
'onMyBlur': [Function]
115114
},
116-
transformTagFn: transformTagSSR
115+
getTagTransformer: getTagTransformer
117116
});
118117

119118

@@ -154,7 +153,7 @@ export const MyCheckbox: StencilVueComponent<JSX.MyCheckbox, JSX.MyCheckbox["che
154153
'onIonFocus': [Function],
155154
'onIonBlur': [Function]
156155
},
157-
transformTagFn: transformTagSSR
156+
getTagTransformer: getTagTransformer
158157
});
159158

160159

@@ -170,7 +169,7 @@ export const MyComplexProps: StencilVueComponent<JSX.MyComplexProps> = /*@__PURE
170169
props: {
171170
'grault': [Number, "grault"]
172171
},
173-
transformTagFn: transformTagSSR
172+
getTagTransformer: getTagTransformer
174173
});
175174

176175

@@ -186,7 +185,7 @@ export const MyComplexPropsScoped: StencilVueComponent<JSX.MyComplexPropsScoped>
186185
props: {
187186
'grault': [Number, "grault"]
188187
},
189-
transformTagFn: transformTagSSR
188+
getTagTransformer: getTagTransformer
190189
});
191190

192191

@@ -202,7 +201,7 @@ export const MyComponent: StencilVueComponent<JSX.MyComponent> = /*@__PURE__*/ g
202201
'middleName': [String, "middle-name"],
203202
'last': [String, "last"]
204203
},
205-
transformTagFn: transformTagSSR
204+
getTagTransformer: getTagTransformer
206205
});
207206

208207

@@ -222,7 +221,7 @@ export const MyComponentScoped: StencilVueComponent<JSX.MyComponentScoped> = /*@
222221
'last': [String, "last"],
223222
'onMyCustomEvent': [Function]
224223
},
225-
transformTagFn: transformTagSSR
224+
getTagTransformer: getTagTransformer
226225
});
227226

228227

@@ -238,7 +237,7 @@ export const MyCounter: StencilVueComponent<JSX.MyCounter> = /*@__PURE__*/ globa
238237
'startValue': [Number, "start-value"],
239238
'onCount': [Function]
240239
},
241-
transformTagFn: transformTagSSR
240+
getTagTransformer: getTagTransformer
242241
});
243242

244243

@@ -313,7 +312,7 @@ export const MyInput: StencilVueComponent<JSX.MyInput, JSX.MyInput["value"]> = /
313312
'onMyBlur': [Function],
314313
'onMyFocus': [Function]
315314
},
316-
transformTagFn: transformTagSSR
315+
getTagTransformer: getTagTransformer
317316
});
318317

319318

@@ -387,7 +386,7 @@ export const MyInputScoped: StencilVueComponent<JSX.MyInputScoped> = /*@__PURE__
387386
'onMyBlur': [Function],
388387
'onMyFocus': [Function]
389388
},
390-
transformTagFn: transformTagSSR
389+
getTagTransformer: getTagTransformer
391390
});
392391

393392

@@ -397,7 +396,7 @@ export const MyList: StencilVueComponent<JSX.MyList> = /*@__PURE__*/ globalThis.
397396
props: {
398397

399398
},
400-
transformTagFn: transformTagSSR
399+
getTagTransformer: getTagTransformer
401400
});
402401

403402

@@ -407,7 +406,7 @@ export const MyListItem: StencilVueComponent<JSX.MyListItem> = /*@__PURE__*/ glo
407406
props: {
408407

409408
},
410-
transformTagFn: transformTagSSR
409+
getTagTransformer: getTagTransformer
411410
});
412411

413412

@@ -417,7 +416,7 @@ export const MyListItemScoped: StencilVueComponent<JSX.MyListItemScoped> = /*@__
417416
props: {
418417

419418
},
420-
transformTagFn: transformTagSSR
419+
getTagTransformer: getTagTransformer
421420
});
422421

423422

@@ -427,7 +426,7 @@ export const MyListScoped: StencilVueComponent<JSX.MyListScoped> = /*@__PURE__*/
427426
props: {
428427

429428
},
430-
transformTagFn: transformTagSSR
429+
getTagTransformer: getTagTransformer
431430
});
432431

433432

@@ -466,7 +465,7 @@ export const MyPopover: StencilVueComponent<JSX.MyPopover> = /*@__PURE__*/ globa
466465
'onMyPopoverWillDismiss': [Function],
467466
'onMyPopoverDidDismiss': [Function]
468467
},
469-
transformTagFn: transformTagSSR
468+
getTagTransformer: getTagTransformer
470469
});
471470

472471

@@ -496,7 +495,7 @@ export const MyRadio: StencilVueComponent<JSX.MyRadio> = /*@__PURE__*/ globalThi
496495
'onIonFocus': [Function],
497496
'onIonBlur': [Function]
498497
},
499-
transformTagFn: transformTagSSR
498+
getTagTransformer: getTagTransformer
500499
});
501500

502501

@@ -521,7 +520,7 @@ export const MyRadioGroup: StencilVueComponent<JSX.MyRadioGroup, JSX.MyRadioGrou
521520
'onMyChange': [Function],
522521
'onMyValueChange': [Function]
523522
},
524-
transformTagFn: transformTagSSR
523+
getTagTransformer: getTagTransformer
525524
});
526525

527526

@@ -569,7 +568,7 @@ export const MyRange: StencilVueComponent<JSX.MyRange, JSX.MyRange["value"]> = /
569568
'onMyFocus': [Function],
570569
'onMyBlur': [Function]
571570
},
572-
transformTagFn: transformTagSSR
571+
getTagTransformer: getTagTransformer
573572
});
574573

575574

@@ -579,7 +578,7 @@ export const MyToggle: StencilVueComponent<JSX.MyToggle> = /*@__PURE__*/ globalT
579578
props: {
580579

581580
},
582-
transformTagFn: transformTagSSR
581+
getTagTransformer: getTagTransformer
583582
});
584583

585584

@@ -591,7 +590,7 @@ export const MyToggleContent: StencilVueComponent<JSX.MyToggleContent> = /*@__PU
591590
props: {
592591
'visible': [Boolean, "visible"]
593592
},
594-
transformTagFn: transformTagSSR
593+
getTagTransformer: getTagTransformer
595594
});
596595

597596

@@ -603,10 +602,7 @@ export const MyTransformTest: StencilVueComponent<JSX.MyTransformTest> = /*@__PU
603602
props: {
604603
'message': [String, "message"]
605604
},
606-
transformTagFn: transformTagSSR
605+
getTagTransformer: getTagTransformer
607606
});
608607

609608

610-
// Re-export transformTag utilities
611-
export { transformTag, setTagTransformer } from 'component-library';
612-

‎example-project/component-library-vue/src/tag-transformer.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { setTagTransformer as clientSetTagTransformer } from 'component-library/components/index.js';
2+
3+
let tagTransformer: ((tagName: string) => string) | undefined;
4+
5+
export const setTagTransformer = (transformer: (tagName: string) => string) => {
6+
clientSetTagTransformer(transformer);
7+
tagTransformer = transformer;
8+
};
9+
10+
export const transformTag = (tag: string): string => {
11+
return tagTransformer ? tagTransformer(tag) : tag;
12+
};
13+
14+
export const getTagTransformer = () => tagTransformer;

‎example-project/vue-app/src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77
<main>
88
<RouterView />
99
</main>
10-
</template>
10+
</template>

‎example-project/vue-app/src/main.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import { RouterView, RouterLink } from 'vue-router'
33
import App from './App.vue'
44
import router from './router'
55
import './style.css'
6+
import { setTagTransformer } from 'component-library-vue/tag-transformer'
67

8+
// Configure tag transformation
9+
setTagTransformer((tag: string) => tag.startsWith('my-transform-') ? `v1-${tag}` : tag)
710
const app = createApp(App)
811

912
// Register router components globally

‎example-project/vue-app/src/router.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import { createRouter, createWebHistory } from 'vue-router'
2-
import SfcTestsView from './views/SfcTests.vue'
3-
import BasicCompositionView from './views/BasicComposition.vue'
42

53
const router = createRouter({
64
history: createWebHistory(),
75
routes: [
86
{
97
path: '/',
10-
component: SfcTestsView
8+
component: () => import ('./views/SfcTests.vue'),
119
},
1210
{
1311
path: '/legacy',
14-
component: BasicCompositionView
12+
component: () => import ('./views/BasicComposition.vue'),
1513
}
1614
]
1715
})

‎example-project/vue-app/src/views/BasicComposition.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@
2929
<my-radio value="option3">Option 3</my-radio>
3030
</my-radio-group>
3131
<p data-testid="radio-group-value">Radio Group Value: {{ radioGroupValue }}</p>
32+
<hr />
33+
<h2>Transform Tag Test</h2>
34+
<MyTransformTest message="This component's tag should be transformed to v1-my-transform-test" />
35+
<p data-testid="transform-test-info">
36+
Check the DOM: the tag should be &lt;v1-my-transform-test&gt; instead of &lt;my-transform-test&gt;
37+
</p>
3238
</template>
3339

3440
<script lang="ts">
@@ -38,7 +44,7 @@ import HelloWorld from '../components/HelloWorld.vue'
3844
import Input from '../components/Input.vue'
3945
// @ts-ignore
4046
import Checkbox from '../components/Checkbox.vue'
41-
import { MyComponent, MyCheckbox, MyInput, MyRadio, MyRadioGroup } from 'component-library-vue'
47+
import { MyComponent, MyCheckbox, MyInput, MyRadio, MyRadioGroup, MyTransformTest } from 'component-library-vue'
4248
4349
4450
export default defineComponent({
@@ -51,7 +57,8 @@ export default defineComponent({
5157
MyCheckbox,
5258
MyInput,
5359
MyRadio,
54-
MyRadioGroup
60+
MyRadioGroup,
61+
MyTransformTest,
5562
},
5663
setup() {
5764
const input = ref('')

‎example-project/vue-app/src/views/SfcTests.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import HelloWorld from '../components/HelloWorld.vue'
44
import Input from '../components/Input.vue'
55
// @ts-ignore
66
import Checkbox from '../components/Checkbox.vue';
7-
import { MyComponent, MyCheckbox, MyInput, MyRadio, MyRadioGroup } from 'component-library-vue'
7+
import { MyComponent, MyCheckbox, MyInput, MyRadio, MyRadioGroup, MyTransformTest } from 'component-library-vue'
88
import { ref } from 'vue'
99
1010
@@ -49,6 +49,12 @@ const radioGroupValue = ref('option1')
4949
<my-radio value="option3">Option 3</my-radio>
5050
</my-radio-group>
5151
<p data-testid="radio-group-value">Radio Group Value: {{ radioGroupValue }}</p>
52+
<hr />
53+
<h2>Transform Tag Test</h2>
54+
<MyTransformTest message="This component's tag should be transformed to v1-my-transform-test" />
55+
<p data-testid="transform-test-info">
56+
Check the DOM: the tag should be &lt;v1-my-transform-test&gt; instead of &lt;my-transform-test&gt;
57+
</p>
5258
</template>
5359

5460
<style scoped>

‎example-project/vue-app/tests/test.e2e.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,20 @@ describe('Stencil Vue Integration', () => {
4949
await radioBtns[2].click();
5050
await expect(await radioGroup.getText()).toEqual('Radio Group Value: option3');
5151
});
52+
53+
it('should transform tag names correctly', async () => {
54+
// The my-transform-test component should be transformed to v1-my-transform-test
55+
const transformedElement = $('v1-my-transform-test');
56+
await expect(transformedElement).toExist();
57+
58+
// Verify the original tag name is NOT in the DOM
59+
const originalElement = $('my-transform-test');
60+
await expect(originalElement).not.toExist();
61+
62+
// Verify the component renders correctly with the transformed tag
63+
const message = await transformedElement.getText();
64+
await expect(message).toContain('This component\'s tag should be transformed');
65+
});
5266
})
5367
})
5468
});

‎packages/vue/src/create-tag-transformer.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const createTagTransformer = ({
2+
stencilPackageName,
3+
customElementsDir,
4+
}: {
5+
stencilPackageName: string;
6+
customElementsDir: string;
7+
}) => {
8+
return `import { setTagTransformer as clientSetTagTransformer } from '${stencilPackageName}/${customElementsDir}/index.js';
9+
10+
let tagTransformer: ((tagName: string) => string) | undefined;
11+
12+
export const setTagTransformer = (transformer: (tagName: string) => string) => {
13+
clientSetTagTransformer(transformer);
14+
tagTransformer = transformer;
15+
};
16+
17+
export const transformTag = (tag: string): string => {
18+
return tagTransformer ? tagTransformer(tag) : tag;
19+
}
20+
21+
export const getTagTransformer = () => tagTransformer;
22+
`;
23+
};

0 commit comments

Comments
 (0)