feat(vue): refactor vue loader with vue/compiler-sfc

[Teages]

Refactor the vue loader with vue/compiler-sfc.

Resolve #209 #249 #243 #14 #15
Close #210

Some break changes:

• Since there is no effective way to confirm the position of blocks, all blocks will be reordered after build. (unless it can be quick return)
• The script blocks will look a little (?) different from source if developer uses <script setup lang="*">, but they are still human readable

But I think it is worth.

also updated test.

---

It is a draft pull request because I found some times vue-tsc^2.1.0 will add the vue global declare in dts output for no resaon.

It happens in my own package Teages/mkdist-vue-loader but after I merged back to mkdist it disappeared....

fixed with 31e93f0

tested with 2452db9

Example

import type { Data } from './type';
export interface PropsData {
    name: string;
    data: Data;
}
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<PropsData>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<PropsData>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
type __VLS_TypePropsToOption<T> = {
    [K in keyof T]-?: {} extends Pick<T, K> ? {
        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
    } : {
        type: import('vue').PropType<T[K]>;
        required: true;
    };
};
declare module 'vue' {
    interface GlobalComponents {
    }
    interface GlobalDirectives {
    }
}
declare global {
    const __VLS_intrinsicElements: __VLS_IntrinsicElements;
    const __VLS_directiveBindingRestFields: {
        instance: null;
        oldValue: null;
        modifiers: any;
        dir: any;
    };
    const __VLS_unref: typeof import('vue').unref;
    const __VLS_nativeElements: {
        a: HTMLAnchorElement;
        abbr: HTMLElement;
        address: HTMLElement;
        area: HTMLAreaElement;
        article: HTMLElement;
        aside: HTMLElement;
        audio: HTMLAudioElement;
        b: HTMLElement;
        base: HTMLBaseElement;
        bdi: HTMLElement;
        bdo: HTMLElement;
        blockquote: HTMLQuoteElement;
        body: HTMLBodyElement;
        br: HTMLBRElement;
        button: HTMLButtonElement;
        canvas: HTMLCanvasElement;
        caption: HTMLTableCaptionElement;
        cite: HTMLElement;
        code: HTMLElement;
        col: HTMLTableColElement;
        colgroup: HTMLTableColElement;
        data: HTMLDataElement;
        datalist: HTMLDataListElement;
        dd: HTMLElement;
        del: HTMLModElement;
        details: HTMLDetailsElement;
        dfn: HTMLElement;
        dialog: HTMLDialogElement;
        div: HTMLDivElement;
        dl: HTMLDListElement;
        dt: HTMLElement;
        em: HTMLElement;
        embed: HTMLEmbedElement;
        fieldset: HTMLFieldSetElement;
        figcaption: HTMLElement;
        figure: HTMLElement;
        footer: HTMLElement;
        form: HTMLFormElement;
        h1: HTMLHeadingElement;
        h2: HTMLHeadingElement;
        h3: HTMLHeadingElement;
        h4: HTMLHeadingElement;
        h5: HTMLHeadingElement;
        h6: HTMLHeadingElement;
        head: HTMLHeadElement;
        header: HTMLElement;
        hgroup: HTMLElement;
        hr: HTMLHRElement;
        html: HTMLHtmlElement;
        i: HTMLElement;
        iframe: HTMLIFrameElement;
        img: HTMLImageElement;
        input: HTMLInputElement;
        ins: HTMLModElement;
        kbd: HTMLElement;
        label: HTMLLabelElement;
        legend: HTMLLegendElement;
        li: HTMLLIElement;
        link: HTMLLinkElement;
        main: HTMLElement;
        map: HTMLMapElement;
        mark: HTMLElement;
        menu: HTMLMenuElement;
        meta: HTMLMetaElement;
        meter: HTMLMeterElement;
        nav: HTMLElement;
        noscript: HTMLElement;
        object: HTMLObjectElement;
        ol: HTMLOListElement;
        optgroup: HTMLOptGroupElement;
        option: HTMLOptionElement;
        output: HTMLOutputElement;
        p: HTMLParagraphElement;
        picture: HTMLPictureElement;
        pre: HTMLPreElement;
        progress: HTMLProgressElement;
        q: HTMLQuoteElement;
        rp: HTMLElement;
        rt: HTMLElement;
        ruby: HTMLElement;
        s: HTMLElement;
        samp: HTMLElement;
        script: HTMLScriptElement;
        search: HTMLElement;
        section: HTMLElement;
        select: HTMLSelectElement;
        slot: HTMLSlotElement;
        small: HTMLElement;
        source: HTMLSourceElement;
        span: HTMLSpanElement;
        strong: HTMLElement;
        style: HTMLStyleElement;
        sub: HTMLElement;
        summary: HTMLElement;
        sup: HTMLElement;
        table: HTMLTableElement;
        tbody: HTMLTableSectionElement;
        td: HTMLTableCellElement;
        template: HTMLTemplateElement;
        textarea: HTMLTextAreaElement;
        tfoot: HTMLTableSectionElement;
        th: HTMLTableCellElement;
        thead: HTMLTableSectionElement;
        time: HTMLTimeElement;
        title: HTMLTitleElement;
        tr: HTMLTableRowElement;
        track: HTMLTrackElement;
        u: HTMLElement;
        ul: HTMLUListElement;
        var: HTMLElement;
        video: HTMLVideoElement;
        wbr: HTMLElement;
        animate: SVGAnimateElement;
        animateMotion: SVGAnimateMotionElement;
        animateTransform: SVGAnimateTransformElement;
        circle: SVGCircleElement;
        clipPath: SVGClipPathElement;
        defs: SVGDefsElement;
        desc: SVGDescElement;
        ellipse: SVGEllipseElement;
        feBlend: SVGFEBlendElement;
        feColorMatrix: SVGFEColorMatrixElement;
        feComponentTransfer: SVGFEComponentTransferElement;
        feComposite: SVGFECompositeElement;
        feConvolveMatrix: SVGFEConvolveMatrixElement;
        feDiffuseLighting: SVGFEDiffuseLightingElement;
        feDisplacementMap: SVGFEDisplacementMapElement;
        feDistantLight: SVGFEDistantLightElement;
        feDropShadow: SVGFEDropShadowElement;
        feFlood: SVGFEFloodElement;
        feFuncA: SVGFEFuncAElement;
        feFuncB: SVGFEFuncBElement;
        feFuncG: SVGFEFuncGElement;
        feFuncR: SVGFEFuncRElement;
        feGaussianBlur: SVGFEGaussianBlurElement;
        feImage: SVGFEImageElement;
        feMerge: SVGFEMergeElement;
        feMergeNode: SVGFEMergeNodeElement;
        feMorphology: SVGFEMorphologyElement;
        feOffset: SVGFEOffsetElement;
        fePointLight: SVGFEPointLightElement;
        feSpecularLighting: SVGFESpecularLightingElement;
        feSpotLight: SVGFESpotLightElement;
        feTile: SVGFETileElement;
        feTurbulence: SVGFETurbulenceElement;
        filter: SVGFilterElement;
        foreignObject: SVGForeignObjectElement;
        g: SVGGElement;
        image: SVGImageElement;
        line: SVGLineElement;
        linearGradient: SVGLinearGradientElement;
        marker: SVGMarkerElement;
        mask: SVGMaskElement;
        metadata: SVGMetadataElement;
        mpath: SVGMPathElement;
        path: SVGPathElement;
        pattern: SVGPatternElement;
        polygon: SVGPolygonElement;
        polyline: SVGPolylineElement;
        radialGradient: SVGRadialGradientElement;
        rect: SVGRectElement;
        set: SVGSetElement;
        stop: SVGStopElement;
        svg: SVGSVGElement;
        switch: SVGSwitchElement;
        symbol: SVGSymbolElement;
        text: SVGTextElement;
        textPath: SVGTextPathElement;
        tspan: SVGTSpanElement;
        use: SVGUseElement;
        view: SVGViewElement;
    };
    type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
    type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
    type __VLS_GlobalComponents = import('vue').GlobalComponents & Pick<typeof import('vue'), 'Transition' | 'TransitionGroup' | 'KeepAlive' | 'Suspense' | 'Teleport'>;
    type __VLS_GlobalDirectives = import('vue').GlobalDirectives;
    type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
    type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
    type __VLS_unknownDirective = (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
    type __VLS_WithComponent<N0 extends string, LocalComponents, N1 extends string, N2 extends string, N3 extends string> = N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
        [K in N0]: LocalComponents[N1];
    } : N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
        [K in N0]: LocalComponents[N2];
    } : N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
        [K in N0]: LocalComponents[N3];
    } : N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
        [K in N0]: __VLS_GlobalComponents[N1];
    } : N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
        [K in N0]: __VLS_GlobalComponents[N2];
    } : N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
        [K in N0]: __VLS_GlobalComponents[N3];
    } : {
        [K in N0]: unknown;
    };
    type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
        __ctx?: {
            props?: infer P;
        };
    } ? NonNullable<P> : never : T extends (props: infer P, ...args: any) => any ? P : {};
    type __VLS_IsFunction<T, K> = K extends keyof T ? __VLS_IsAny<T[K]> extends false ? unknown extends T[K] ? false : true : false : false;
    type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
    type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R ? U extends T ? never : __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R) : never;
    type __VLS_OverloadUnion<T> = Exclude<__VLS_OverloadUnionInner<(() => never) & T>, T extends () => never ? never : () => never>;
    type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F ? F extends (event: infer E, ...args: infer A) => any ? {
        [K in E & string]: (...args: A) => void;
    } : never : never;
    type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<__VLS_UnionToIntersection<__VLS_ConstructorOverloads<T> & {
        [K in keyof T]: T[K] extends any[] ? {
            (...args: T[K]): void;
        } : never;
    }>>;
    type __VLS_PrettifyGlobal<T> = {
        [K in keyof T]: T[K];
    } & {};
    function __VLS_getVForSourceType(source: number): [number, number, number][];
    function __VLS_getVForSourceType(source: string): [string, number, number][];
    function __VLS_getVForSourceType<T extends any[]>(source: T): [
        item: T[number],
        key: number,
        index: number
    ][];
    function __VLS_getVForSourceType<T extends {
        [Symbol.iterator](): Iterator<any>;
    }>(source: T): [
        item: T extends {
            [Symbol.iterator](): Iterator<infer T1>;
        } ? T1 : never,
        key: number,
        index: undefined
    ][];
    function __VLS_getVForSourceType<T extends number | {
        [Symbol.iterator](): Iterator<any>;
    }>(source: T): [
        item: number | (Exclude<T, number> extends {
            [Symbol.iterator](): Iterator<infer T1>;
        } ? T1 : never),
        key: number,
        index: undefined
    ][];
    function __VLS_getVForSourceType<T>(source: T): [
        item: T[keyof T],
        key: keyof T,
        index: number
    ][];
    function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
    function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
    function __VLS_directiveAsFunction<T extends import('vue').Directive>(dir: T): T extends (...args: any) => any ? T | __VLS_unknownDirective : NonNullable<(T & Record<string, __VLS_unknownDirective>)['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>;
    function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K;
    function __VLS_makeOptional<T>(t: T): {
        [K in keyof T]?: T[K];
    };
    function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;
    function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K): T extends new (...args: any) => any ? (props: (K extends {
        $props: infer Props;
    } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & {
        __ctx?: {
            attrs?: any;
            slots?: K extends {
                $slots: infer Slots;
            } ? Slots : any;
            emit?: K extends {
                $emit: infer Emit;
            } ? Emit : any;
        } & {
            props?: (K extends {
                $props: infer Props;
            } ? Props : any) & Record<string, unknown>;
            expose?(exposed: K): void;
        };
    } : T extends () => any ? (props: {}, ctx?: any) => ReturnType<T> : T extends (...args: any) => any ? T : (_: {} & Record<string, unknown>, ctx?: any) => {
        __ctx?: {
            attrs?: any;
            expose?: any;
            slots?: any;
            emit?: any;
            props?: {} & Record<string, unknown>;
        };
    };
    function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T & Record<string, unknown>) => void;
    function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
    function __VLS_pickFunctionalComponentCtx<T, K>(comp: T, compInstance: K): NonNullable<__VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
        __ctx?: infer Ctx;
    } ? Ctx : never : any, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any>>;
    function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
    function __VLS_tryAsConstant<const T>(t: T): T;
}

[codecov]

Codecov Report

Attention: Patch coverage is 88.55422% with 19 lines in your changes missing coverage. Please review.

Project coverage is 80.11%. Comparing base (9000888) to head (80717d1).
Report is 59 commits behind head on main.

Files with missing lines	Patch %	Lines
src/loaders/vue.ts	87.33%	19 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #251      +/-   ##
==========================================
- Coverage   82.86%   80.11%   -2.76%     
==========================================
  Files          12       12              
  Lines         852      890      +38     
  Branches      133      189      +56     
==========================================
+ Hits          706      713       +7     
- Misses        144      175      +31     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Teages]

according to tests in 2452db9 I think global declare pollution may be a configuration issue (and should not be handled in this pr), so I think this PR is ready for review.

now fixed

[typed-sigterm]

@Teages This is a nice workaround! Since the PR hasn't received reviews for 1 month, can you temporarily release this fork to NPM?

[Teages]

@Teages This is a nice workaround! Since the PR hasn't received reviews for 1 month, can you temporarily release this fork to NPM?

@typed-sigterm the package is avalibale on @teages/mkdist@1.6.0-patch.251

{
  "devDependencies": {
    "mkdist": "npm:@teages/mkdist@1.6.0-patch.251"
  }
}

or:

{
  "resolutions": {
    "mkdist": "npm:@teages/mkdist@1.6.0-patch.251",
  }
}

It works with the main branch of nuxt/ui, but fell free to feedback here if you got something goes wrong