Typescript support and examples

Describe the bug

Problems while creating the Options field for loadModule

To Reproduce

<template>
  <component :is="computedComponent" />
</template>

<script lang="ts">
import { loadModule } from "vue3-sfc-loader/src/index"
import { defineComponent, defineAsyncComponent } from "vue"

const options = {
    async getFile(url: string) {
        const res = await fetch(url)
        if ( !res.ok )
            throw Object.assign(new Error(`${res.statusText} ${url}`), { res })
        return await res.text()
    },
    addStyle(textContent: any) {

        const style = Object.assign(document.createElement("style"), { textContent })
        const ref = document.head.getElementsByTagName("style")[0] || null
        document.head.insertBefore(style, ref)
    },
}

export default defineComponent({
    data() {
        return {
            currentComponent: "./DashBoard.vue",
        }
    },
    props: {
        url: {
            type: String,
            required: true
        },
    },
    computed: {
        computedComponent() {
            const currentComponent: String = this.url // the trick is here
            return defineAsyncComponent( () => loadModule(currentComponent, options) )
        }
    },
})
</script>

Expected behavior It should works but it gets:

ERROR in src/components/Page.vue:41:77
TS2345: Argument of type '{ getFile(url: string): Promise<string>; addStyle(textContent: any): void; }' is not assignable to parameter of type 'Options'.
  Type '{ getFile(url: string): Promise<string>; addStyle(textContent: any): void; }' is missing the following properties from type 'Options': pathResolve, getResource
    39 |         computedComponent() {
    40 |             const currentComponent: String = this.url // the trick is here
  > 41 |             return defineAsyncComponent( () => loadModule(currentComponent, options) )
       |                                                                             ^^^^^^^
    42 |         }
    43 |     },
    44 | })

Versions

• Compiling via typescript:
• vue3-sfc-loader: latest

[Toilal]

The main issue is that webpack doesn’t build a proper d.ts file. It should be a single d.ts, referenced through package.json typings field.

We have to find a way to build a single d.ts file matching the dist bundle. Maybe the easier to achieve this is to manually write d.ts file and implement it in TypeScript sources.

[rafaellehmkuhl]

Seems that you’re missing the moduleCache key on options object.