Skip to content

export static functions in compile to component #125

@rien-vroom-cquential

Description

@rien-vroom-cquential

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions