vue-facing-decorator icon indicating copy to clipboard operation
vue-facing-decorator copied to clipboard

export static functions in compile to component

Open rien-vroom-cquential opened this issue 8 months ago • 2 comments

In the old vue class components we could define a public static function which would be callable from other components/locations. This original functionality is defined here i believe: https://github.com/vuejs/vue-class-component/blob/master/src/component.ts#L119

Anyhow i think public static functions should be added to the exported class/object in https://github.com/facing-dev/vue-facing-decorator/blob/master/src/component.ts#L74 However i'm not capable enough to make a sane solution for this (e.g. im not sure how to handle inheritance and other side effects).

Normally you can use a seperate ts class or something. But we want to use this for a lib and its really helpfull to have these kind of functions included in the component instead of a "random" other ts file/object/class

Minimal reproducable code:

### App.vue
<script lang="ts">
import { Component, Vue } from 'vue-facing-decorator'
import HelloWorld from './components/HelloWorld.vue'

@Component({
    components: {HelloWorld}
})
export default class App extends Vue {
    public get failingMsg(): string {
        return HelloWorld.staticFunctionCall('test');
    }
}
</script>
<template>
  <main>
    <HelloWorld :msg="failingMsg" />
  </main>
</template>

### HelloWorld.vue
<script lang="ts">
import { Component, Vue, Prop } from 'vue-facing-decorator'

@Component
export default class HelloWorld extends Vue {
    @Prop() public msg!: string;

    public static staticFunctionCall(changeA: string): string {
        // Do something
        return changeA;
    }
}
</script>
<template>
    {{ msg }}
</template>

Error received in the browser:

App.vue:9 Uncaught TypeError: HelloWorld.staticFunctionCall is not a function
    at get refMsg (App.vue:9:27)
    at ReactiveEffect.fn (chunk-U6BEPC57.js?v=e33feee7:1236:13)
    at ReactiveEffect.run (chunk-U6BEPC57.js?v=e33feee7:435:19)
    at get value (chunk-U6BEPC57.js?v=e33feee7:1248:107)
    at Object.get [as refMsg] (chunk-U6BEPC57.js?v=e33feee7:4970:22)
    at Object.get (chunk-U6BEPC57.js?v=e33feee7:4530:19)
    at Proxy._sfc_render (App.vue:21:25)
    at renderComponentRoot (chunk-U6BEPC57.js?v=e33feee7:2350:17)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-U6BEPC57.js?v=e33feee7:7466:46)
    at ReactiveEffect.run (chunk-U6BEPC57.js?v=e33feee7:435:19)

The code above is perfectly valid by (vue-)tsc and eslint, but fails in the browser.

rien-vroom-cquential avatar May 27 '24 14:05 rien-vroom-cquential