Skip to content

Commit 733cc8b

Browse files
committed
minor #449 [Vue] Fix TypeScript issues (7-zete-7)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Vue] Fix TypeScript issues | Q | A | ------------- | --- | Bug fix? | yes | License | MIT When the `enableTypeScriptLoader` call is uncommented in the `webpack.config.js` file and there is at least one TypeScript file in the project, the following errors occur: ```shell $ encore dev Running webpack ... ERROR Failed to compile with 3 errors error in /path/to/symfony/project/vendor/symfony/ux-vue/Resources/assets/src/render_controller.ts [tsl] ERROR in /path/to/symfony/project/vendor/symfony/ux-vue/Resources/assets/src/render_controller.ts(31,38) TS2304: Cannot find name 'resolveVueComponent'. error in /path/to/symfony/project/vendor/symfony/ux-vue/Resources/assets/src/render_controller.ts [tsl] ERROR in /path/to/symfony/project/vendor/symfony/ux-vue/Resources/assets/src/render_controller.ts(35,26) TS2339: Property '__vue_app__' does not exist on type 'Element'. error in /path/to/symfony/project/vendor/symfony/ux-vue/Resources/assets/src/render_controller.ts [tsl] ERROR in /path/to/symfony/project/vendor/symfony/ux-vue/Resources/assets/src/render_controller.ts(36,26) TS2339: Property '__vue_app__' does not exist on type 'Element'. ``` Commits ------- 32cff27 [Vue] Fix TypeScript issues
2 parents b2441fa + 32cff27 commit 733cc8b

File tree

4 files changed

+16
-6
lines changed

4 files changed

+16
-6
lines changed

src/Vue/Resources/assets/src/register_controller.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,16 @@
99

1010
'use strict';
1111

12+
import type { Component } from 'vue';
13+
14+
declare global {
15+
function resolveVueComponent(name: string): Component;
16+
17+
interface Window {
18+
resolveVueComponent(name: string): Component;
19+
}
20+
}
21+
1222
export function registerVueControllerComponents(context: __WebpackModuleApi.RequireContext) {
1323
const vueControllers: { [key: string]: object } = {};
1424

@@ -19,7 +29,7 @@ export function registerVueControllerComponents(context: __WebpackModuleApi.Requ
1929
importAllVueComponents(context);
2030

2131
// Expose a global Vue loader to allow rendering from the Stimulus controller
22-
(window as any).resolveVueComponent = (name: string): object => {
32+
window.resolveVueComponent = (name: string): object => {
2333
const component = vueControllers[`./${name}.vue`];
2434
if (typeof component === 'undefined') {
2535
throw new Error(`Vue controller "${name}" does not exist`);

src/Vue/Resources/assets/src/render_controller.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
'use strict';
1111

1212
import { Controller } from '@hotwired/stimulus';
13-
import { App, Component, createApp } from 'vue';
13+
import { App, createApp } from 'vue';
1414

15-
export default class extends Controller {
15+
export default class extends Controller<Element & { __vue_app__?: App<Element> }> {
1616
private props: Record<string, unknown> | null;
1717
private app: App<Element>;
1818
readonly componentValue: string;
@@ -28,7 +28,7 @@ export default class extends Controller {
2828

2929
this._dispatchEvent('vue:connect', { componentName: this.componentValue, props: this.props });
3030

31-
const component: Component = window.resolveVueComponent(this.componentValue);
31+
const component = window.resolveVueComponent(this.componentValue);
3232

3333
this.app = createApp(component, this.props);
3434

src/Vue/Resources/assets/test/register_controller.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ require.context = createRequireContextPolyfill(__dirname);
1818
describe('registerVueControllerComponents', () => {
1919
it('test', () => {
2020
registerVueControllerComponents(require.context('./fixtures', true, /\.vue$/));
21-
const resolveComponent = (window as any).resolveVueComponent;
21+
const resolveComponent = window.resolveVueComponent;
2222

2323
expect(resolveComponent).not.toBeUndefined();
2424
expect(resolveComponent('Hello')).toBe(Hello);

src/Vue/Resources/assets/test/render_controller.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Hello = {
3838
props: ['name']
3939
};
4040

41-
(window as any).resolveVueComponent = () => {
41+
window.resolveVueComponent = () => {
4242
return Hello;
4343
};
4444

0 commit comments

Comments
 (0)