@dev-to/vue-loader 0.2.2

package/README.md

@@ -0,0 +1,19 @@
+# @dev-to/vue-loader
+
+Vue host-side loader that mounts remote Vue components served by a DevTo-enabled Vite server.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { VueLoader } from '@dev-to/vue-loader'
+</script>
+
+<template>
+  <VueLoader
+    origin="http://localhost:5173"
+    name="MyCard"
+    :component-props="{ title: 'Hello' }"
+  />
+</template>
+```

package/dist/VueLoader.d.ts

@@ -0,0 +1,133 @@
+import { type PropType, type VNodeChild } from 'vue';
+import { type DevToDiscoveryContract, type DevToVueBridgeContract } from '@dev-to/shared';
+export declare const DEFAULT_DISCOVERY_ENDPOINT: "/__dev_to__/discovery.json";
+export declare const DEFAULT_CONTRACT_ENDPOINT: "/__dev_to__/vue/contract.js";
+export declare const DEFAULT_INIT_ENDPOINT: "/__dev_to__/vue/init.js";
+export declare function loadDiscoveryContract(origin: string, discoveryEndpoint?: string): Promise<DevToDiscoveryContract>;
+export declare function loadBridgeContract(origin: string, contractEndpoint?: string): Promise<DevToVueBridgeContract>;
+export declare function ensureBridgeInit(origin: string, contract: DevToVueBridgeContract): Promise<void>;
+export interface VueEntryResolutionResult {
+    success: true;
+    entryUrl: string;
+}
+export interface VueEntryResolutionError {
+    success: false;
+    error: {
+        message: string;
+        type: 'COMPONENT_NOT_FOUND' | 'CONTRACT_LOAD_FAILED';
+        componentName?: string;
+        errorReason?: string;
+        setupGuide?: {
+            title: string;
+            steps: string[];
+        };
+    };
+}
+export type VueEntryResolution = VueEntryResolutionResult | VueEntryResolutionError;
+export declare function resolveVueEntry(origin: string, componentName: string, contractEndpoint?: string): Promise<VueEntryResolution>;
+export declare function resolveVueEntryForLoader(origin: string, componentName: string, contractEndpoint?: string): Promise<{
+    success: true;
+    entryUrl: string;
+} | {
+    success: false;
+    loaderError: VueLoaderError;
+}>;
+export interface VueLoaderError {
+    message: string;
+    origin?: string;
+    componentName?: string;
+    type?: string;
+    errorReason?: string;
+    statusCode?: number | string;
+    setupGuide?: {
+        title: string;
+        steps: string[];
+    };
+}
+export interface VueLoaderProps<P extends Record<string, unknown> = Record<string, unknown>> {
+    origin?: string;
+    name?: string;
+    url?: string;
+    contractEndpoint?: string;
+    componentProps?: P;
+    loading?: () => VNodeChild;
+    externalError?: VueLoaderError | null;
+    renderError?: (error: Error | VueLoaderError) => VNodeChild;
+}
+export declare const VueLoader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    origin: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    contractEndpoint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    componentProps: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    loading: {
+        type: PropType<() => VNodeChild>;
+        default: undefined;
+    };
+    externalError: {
+        type: PropType<VueLoaderError | null>;
+        default: null;
+    };
+    renderError: {
+        type: PropType<(error: Error | VueLoaderError) => VNodeChild>;
+        default: undefined;
+    };
+}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    origin: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    contractEndpoint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    componentProps: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    loading: {
+        type: PropType<() => VNodeChild>;
+        default: undefined;
+    };
+    externalError: {
+        type: PropType<VueLoaderError | null>;
+        default: null;
+    };
+    renderError: {
+        type: PropType<(error: Error | VueLoaderError) => VNodeChild>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    url: string;
+    origin: string;
+    name: string;
+    contractEndpoint: string;
+    componentProps: Record<string, unknown>;
+    loading: () => VNodeChild;
+    externalError: VueLoaderError | null;
+    renderError: (error: Error | VueLoaderError) => VNodeChild;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=VueLoader.d.ts.map

package/dist/VueLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VueLoader.d.ts","sourceRoot":"","sources":["../src/VueLoader.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,QAAQ,EACb,KAAK,UAAU,EAChB,MAAM,KAAK,CAAA;AAEZ,OAAO,EAKL,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC5B,MAAM,gBAAgB,CAAA;AAwCvB,eAAO,MAAM,0BAA0B,8BAAwB,CAAA;AAC/D,eAAO,MAAM,yBAAyB,+BAA2B,CAAA;AACjE,eAAO,MAAM,qBAAqB,2BAAuB,CAAA;AAyCzD,wBAAsB,qBAAqB,CACzC,MAAM,EAAE,MAAM,EACd,iBAAiB,CAAC,EAAE,MAAM,GACzB,OAAO,CAAC,sBAAsB,CAAC,CAwBjC;AAED,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,MAAM,EACd,gBAAgB,CAAC,EAAE,MAAM,GACxB,OAAO,CAAC,sBAAsB,CAAC,CAyBjC;AAED,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,sBAAsB,iBActF;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,IAAI,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,KAAK,CAAA;IACd,KAAK,EAAE;QACL,OAAO,EAAE,MAAM,CAAA;QACf,IAAI,EAAE,qBAAqB,GAAG,sBAAsB,CAAA;QACpD,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,UAAU,CAAC,EAAE;YACX,KAAK,EAAE,MAAM,CAAA;YACb,KAAK,EAAE,MAAM,EAAE,CAAA;SAChB,CAAA;KACF,CAAA;CACF;AAED,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG,uBAAuB,CAAA;AAEnF,wBAAsB,eAAe,CACnC,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,EACrB,gBAAgB,CAAC,EAAE,MAAM,GACxB,OAAO,CAAC,kBAAkB,CAAC,CA6D7B;AAED,wBAAsB,wBAAwB,CAC5C,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,EACrB,gBAAgB,CAAC,EAAE,MAAM,GACxB,OAAO,CACR;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,WAAW,EAAE,cAAc,CAAA;CAAE,CAClD,CAgBA;AAOD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,EAAE,CAAA;KAChB,CAAA;CACF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACzF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,CAAC,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,UAAU,CAAA;IAC1B,aAAa,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,UAAU,CAAA;CAC5D;AA+CD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;cAOgB,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;;;;cACtC,QAAQ,CAAC,MAAM,UAAU,CAAC;;;;cACtB,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC;;;;cAC/B,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,UAAU,CAAC;;;UAEtE,UAAU;;;;;;;;;;;;;;;;;;cALM,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;;;;cACtC,QAAQ,CAAC,MAAM,UAAU,CAAC;;;;cACtB,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC;;;;cAC/B,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,UAAU,CAAC;;;;;;;;;mBAF5C,UAAU;;yBAEJ,KAAK,GAAG,cAAc,KAAK,UAAU;4EA6PzF,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { DEFAULT_CONTRACT_ENDPOINT, DEFAULT_DISCOVERY_ENDPOINT, DEFAULT_INIT_ENDPOINT, VueLoader, ensureBridgeInit, loadBridgeContract, loadDiscoveryContract, resolveVueEntry, resolveVueEntryForLoader, } from './VueLoader.js';
+export type { VueEntryResolution, VueEntryResolutionError, VueEntryResolutionResult, VueLoaderError, VueLoaderProps, } from './VueLoader.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,0BAA0B,EAC1B,qBAAqB,EACrB,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,wBAAwB,GACzB,MAAM,gBAAgB,CAAA;AAEvB,YAAY,EACV,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,EACxB,cAAc,EACd,cAAc,GACf,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -0,0 +1,453 @@
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { DEV_TO_DEBUG_HTML_PATH, DEV_TO_DISCOVERY_PATH, DEV_TO_VUE_CONTRACT_PATH, DEV_TO_VUE_INIT_PATH } from "@dev-to/shared";
+function isRecord(value) {
+    return 'object' == typeof value && null !== value;
+}
+function unwrapDefault(value) {
+    if (!isRecord(value)) return value;
+    const defaultValue = value['default'];
+    return null != defaultValue ? defaultValue : value;
+}
+function toError(value) {
+    return value instanceof Error ? value : new Error(String(value));
+}
+function resolveRemoteRuntime(runtimeModule) {
+    const runtimeRecord = isRecord(runtimeModule) ? runtimeModule : {};
+    const vueCandidate = runtimeRecord['default'] ?? runtimeRecord['Vue'] ?? runtimeModule;
+    if (!isRecord(vueCandidate) || 'function' != typeof vueCandidate['createApp'] || 'function' != typeof vueCandidate['h'] || 'function' != typeof vueCandidate['defineComponent']) throw new Error('Invalid Vue runtime module from dev server.');
+    return vueCandidate;
+}
+const DEFAULT_DISCOVERY_ENDPOINT = DEV_TO_DISCOVERY_PATH;
+const DEFAULT_CONTRACT_ENDPOINT = DEV_TO_VUE_CONTRACT_PATH;
+const DEFAULT_INIT_ENDPOINT = DEV_TO_VUE_INIT_PATH;
+function resolveEndpointUrl(origin, endpoint) {
+    if (endpoint.startsWith('http://') || endpoint.startsWith('https://')) return endpoint;
+    if (endpoint.startsWith('/')) return `${origin}${endpoint}`;
+    return `${origin}/${endpoint}`;
+}
+function isBridgeContract(value) {
+    if (!isRecord(value)) return false;
+    const paths = value['paths'];
+    const events = value['events'];
+    if (!isRecord(paths) || 'string' != typeof paths['vueRuntime']) return false;
+    return !(!isRecord(events) || 'string' != typeof events['fullReload']);
+}
+function resolveContract(initModule) {
+    const moduleRecord = isRecord(initModule) ? initModule : {};
+    const contractCandidate = moduleRecord['DEV_TO_VUE_CONTRACT'] ?? moduleRecord['default'] ?? null;
+    if (!contractCandidate) throw new Error('Dev server contract not found. Please ensure `@dev-to/vue-plugin` (devToVuePlugin) is enabled in the Vite dev server.');
+    if (!isBridgeContract(contractCandidate)) throw new Error('Invalid dev server contract.');
+    return contractCandidate;
+}
+const nativeImport = new Function('url', 'return import(url)');
+const discoveryCache = new Map();
+const contractCache = new Map();
+const initCache = new Map();
+async function loadDiscoveryContract(origin, discoveryEndpoint) {
+    const endpoint = discoveryEndpoint || DEFAULT_DISCOVERY_ENDPOINT;
+    const discoveryUrl = resolveEndpointUrl(origin, endpoint);
+    if (discoveryCache.has(discoveryUrl)) return discoveryCache.get(discoveryUrl);
+    const p = fetch(discoveryUrl).then(async (resp)=>{
+        if (!resp.ok) throw new Error(`Discovery endpoint returned ${resp.status}: ${resp.statusText}`);
+        const data = await resp.json();
+        if (!data || 'object' != typeof data) throw new Error('Invalid discovery response: not a JSON object');
+        return data;
+    }).catch((e)=>{
+        discoveryCache.delete(discoveryUrl);
+        throw e instanceof Error ? e : new Error(String(e));
+    });
+    discoveryCache.set(discoveryUrl, p);
+    return p;
+}
+async function loadBridgeContract(origin, contractEndpoint) {
+    const endpoint = contractEndpoint || DEFAULT_CONTRACT_ENDPOINT;
+    const initUrl = resolveEndpointUrl(origin, endpoint);
+    if (contractCache.has(initUrl)) return contractCache.get(initUrl);
+    const p = nativeImport(initUrl).then((m)=>resolveContract(m)).catch(async (e)=>{
+        contractCache.delete(initUrl);
+        const err = e instanceof Error ? e : new Error(String(e));
+        if (err.message.includes('Failed to fetch')) try {
+            const resp = await fetch(initUrl, {
+                method: 'HEAD'
+            }).catch(()=>null);
+            if (resp) err.statusCode = resp.status;
+        } catch  {}
+        throw err;
+    });
+    contractCache.set(initUrl, p);
+    return p;
+}
+async function ensureBridgeInit(origin, contract) {
+    const initPath = contract?.paths?.initClient || DEFAULT_INIT_ENDPOINT;
+    const initUrl = resolveEndpointUrl(origin, initPath);
+    if (initCache.has(initUrl)) return initCache.get(initUrl);
+    const p = nativeImport(initUrl).then(()=>void 0).catch((e)=>{
+        initCache.delete(initUrl);
+        throw e instanceof Error ? e : new Error(String(e));
+    });
+    initCache.set(initUrl, p);
+    return p;
+}
+async function resolveVueEntry(origin, componentName, contractEndpoint) {
+    try {
+        const contract = await loadBridgeContract(origin, contractEndpoint);
+        const dev = contract?.dev || {};
+        const componentMap = dev.componentMap || {};
+        const entry = componentMap[componentName] || componentMap['*'];
+        if (!entry) {
+            const errorMessage = `Component "${componentName}" not found in devComponentMap`;
+            const isWildcardMode = !!componentMap['*'];
+            const errorReason = isWildcardMode ? `The component "${componentName}" is not configured, and the wildcard fallback is also missing or invalid.` : `The component "${componentName}" is not configured in devComponentMap. Please add it to your Vite configuration.`;
+            return {
+                success: false,
+                error: {
+                    message: errorMessage,
+                    type: 'COMPONENT_NOT_FOUND',
+                    componentName,
+                    errorReason,
+                    setupGuide: {
+                        title: 'Setup Guide',
+                        steps: [
+                            "import { devToVuePlugin } from '@dev-to/vue-plugin'",
+                            '',
+                            "// Option 1: Shorthand (Default)",
+                            `devToVuePlugin('${componentName}')`,
+                            '',
+                            "// Option 2: Explicit Mapping",
+                            "devToVuePlugin({",
+                            `  '${componentName}': '/', // Default entry`,
+                            "  'Other': 'src/Card.vue' // Specific file",
+                            "})"
+                        ]
+                    }
+                }
+            };
+        }
+        const entryUrl = entry.startsWith('http://') || entry.startsWith('https://') ? entry : `${origin}${entry.startsWith('/') ? '' : '/'}${entry}`;
+        return {
+            success: true,
+            entryUrl
+        };
+    } catch (e) {
+        const errorMessage = e instanceof Error ? e.message : String(e);
+        return {
+            success: false,
+            error: {
+                message: errorMessage,
+                type: 'CONTRACT_LOAD_FAILED'
+            }
+        };
+    }
+}
+async function resolveVueEntryForLoader(origin, componentName, contractEndpoint) {
+    const r = await resolveVueEntry(origin, componentName, contractEndpoint);
+    if (r.success) return r;
+    const e = r.error;
+    return {
+        success: false,
+        loaderError: {
+            message: e.message,
+            origin,
+            componentName: e.componentName || componentName,
+            type: e.type,
+            errorReason: e.errorReason,
+            setupGuide: e.setupGuide
+        }
+    };
+}
+function safeLocationHref() {
+    if ("u" < typeof window) return '';
+    try {
+        return window.location.href;
+    } catch  {
+        return '';
+    }
+}
+function safeOrigin() {
+    if ("u" < typeof window) return '';
+    try {
+        return window.location.origin;
+    } catch  {
+        return '';
+    }
+}
+function getOriginFromFinalJsUrl(finalJsUrl) {
+    let origin = '';
+    try {
+        const urlParam = finalJsUrl.match(/url=([^&]+)/)?.[1] || '';
+        const decoded = urlParam ? decodeURIComponent(urlParam) : finalJsUrl;
+        const parsed = decoded.startsWith('http') ? new URL(decoded) : new URL(decoded, safeLocationHref() || 'http://localhost');
+        origin = parsed.origin;
+    } catch  {
+        origin = safeOrigin();
+    }
+    return origin;
+}
+function syncProps(target, next) {
+    for (const key of Object.keys(target))if (!(key in next)) delete target[key];
+    for (const [key, value] of Object.entries(next))target[key] = value;
+}
+const VueLoader = defineComponent({
+    name: 'VueLoader',
+    props: {
+        origin: {
+            type: String,
+            default: void 0
+        },
+        name: {
+            type: String,
+            default: void 0
+        },
+        url: {
+            type: String,
+            default: void 0
+        },
+        contractEndpoint: {
+            type: String,
+            default: void 0
+        },
+        componentProps: {
+            type: Object,
+            default: ()=>({})
+        },
+        loading: {
+            type: Function,
+            default: void 0
+        },
+        externalError: {
+            type: Object,
+            default: null
+        },
+        renderError: {
+            type: Function,
+            default: void 0
+        }
+    },
+    setup (props) {
+        const containerRef = ref(null);
+        const appRef = ref(null);
+        const runtimeRef = ref(null);
+        const componentRef = ref(null);
+        const propsStateRef = ref(null);
+        const state = ref({
+            isReady: false,
+            error: null
+        });
+        const version = ref(0);
+        const resolvedUrl = ref(props.url);
+        const fullReloadListenerRef = ref(null);
+        const ensureFullReloadListener = (eventName)=>{
+            if (!eventName || "u" < typeof window) return;
+            const current = fullReloadListenerRef.value;
+            if (current?.eventName === eventName) return;
+            if (current) window.removeEventListener(current.eventName, current.handler);
+            const handler = ()=>{
+                version.value += 1;
+            };
+            window.addEventListener(eventName, handler);
+            fullReloadListenerRef.value = {
+                eventName,
+                handler
+            };
+        };
+        const unmountRemoteApp = ()=>{
+            try {
+                appRef.value?.unmount?.();
+            } catch  {}
+            appRef.value = null;
+            propsStateRef.value = null;
+        };
+        const renderRemoteApp = (force = false)=>{
+            const runtime = runtimeRef.value;
+            const ComponentRef = componentRef.value;
+            if (!runtime || !ComponentRef) return;
+            if (!containerRef.value) return;
+            if (appRef.value && !force) return;
+            unmountRemoteApp();
+            const propsState = runtime.reactive({});
+            syncProps(propsState, props.componentProps ?? {});
+            const Wrapper = runtime.defineComponent({
+                name: 'DevToVueWrapper',
+                setup () {
+                    return ()=>runtime.h(ComponentRef, propsState);
+                }
+            });
+            const app = runtime.createApp(Wrapper);
+            app.mount(containerRef.value);
+            appRef.value = app;
+            propsStateRef.value = propsState;
+            state.value.isReady = true;
+        };
+        const loadViteComponent = async (entryUrl, exportName, currentVersion)=>{
+            if (!entryUrl) throw new Error('Not found entry url.');
+            const originFromUrl = getOriginFromFinalJsUrl(entryUrl);
+            const connector = entryUrl.includes('?') ? '&' : '?';
+            const jsUrlWithParam = currentVersion > 0 ? `${entryUrl}${connector}v=${currentVersion}` : entryUrl;
+            try {
+                const contract = await loadBridgeContract(originFromUrl, props.contractEndpoint);
+                await ensureBridgeInit(originFromUrl, contract);
+                ensureFullReloadListener(contract.events.fullReload);
+                const runtimeModule = await nativeImport(`${originFromUrl}${contract.paths.vueRuntime}`);
+                const runtime = resolveRemoteRuntime(runtimeModule);
+                const moduleNs = await nativeImport(jsUrlWithParam);
+                const moduleRecord = isRecord(moduleNs) ? moduleNs : {};
+                const exportCandidate = exportName ? moduleRecord[exportName] : void 0;
+                const candidate = exportName ? exportCandidate ?? moduleRecord['default'] ?? moduleNs : moduleRecord['default'] ?? moduleNs;
+                const ComponentValue = unwrapDefault(candidate);
+                if (ComponentValue) return {
+                    Component: ComponentValue,
+                    runtime
+                };
+                throw new Error('Vite Dev Component Load Fail: Component not found in module.');
+            } catch (e) {
+                const err = toError(e);
+                if (err.message.includes('Failed to fetch')) try {
+                    const resp = await fetch(jsUrlWithParam, {
+                        method: 'HEAD'
+                    }).catch(()=>null);
+                    if (resp) err.statusCode = resp.status;
+                } catch  {}
+                throw err;
+            }
+        };
+        watch(()=>[
+                props.url,
+                props.origin,
+                props.name,
+                props.contractEndpoint
+            ], (values, _old, onInvalidate)=>{
+            const [directUrl, origin, name, contractEndpoint] = values;
+            let cancelled = false;
+            onInvalidate(()=>{
+                cancelled = true;
+            });
+            if (directUrl) {
+                resolvedUrl.value = directUrl;
+                state.value.error = null;
+                return;
+            }
+            if (!origin || !name) {
+                if (!directUrl && (origin || name)) state.value.error = new Error('Missing dev server origin or component name for resolution.');
+                return;
+            }
+            state.value.isReady = false;
+            state.value.error = null;
+            resolveVueEntryForLoader(origin, name, contractEndpoint).then((res)=>{
+                if (cancelled) return;
+                if (true === res.success) resolvedUrl.value = res.entryUrl;
+                else state.value.error = res.loaderError;
+            });
+        }, {
+            immediate: true
+        });
+        watch(()=>[
+                resolvedUrl.value,
+                props.name,
+                version.value
+            ], (values, _old, onInvalidate)=>{
+            const [url, name, currentVersion] = values;
+            if (!url) return;
+            let cancelled = false;
+            onInvalidate(()=>{
+                cancelled = true;
+            });
+            state.value.isReady = false;
+            if (state.value.error instanceof Error) state.value.error = null;
+            loadViteComponent(url, name, currentVersion).then(({ Component, runtime })=>{
+                if (cancelled) return;
+                runtimeRef.value = runtime;
+                componentRef.value = Component;
+                renderRemoteApp(true);
+            }).catch((err)=>{
+                if (cancelled) return;
+                state.value.error = err instanceof Error ? err : new Error(String(err));
+                state.value.isReady = false;
+                unmountRemoteApp();
+            });
+        }, {
+            immediate: true
+        });
+        watch(()=>props.componentProps, (next)=>{
+            if (!propsStateRef.value) return;
+            syncProps(propsStateRef.value, next || {});
+        }, {
+            deep: true
+        });
+        onMounted(()=>{
+            renderRemoteApp(false);
+        });
+        onBeforeUnmount(()=>{
+            unmountRemoteApp();
+            if ("u" < typeof window) return;
+            const current = fullReloadListenerRef.value;
+            if (current) window.removeEventListener(current.eventName, current.handler);
+        });
+        const renderErrorNode = (err)=>{
+            if (props.renderError) return props.renderError(err);
+            const isLoaderErrorObject = !(err instanceof Error);
+            const message = err.message || String(err);
+            const currentOrigin = (isLoaderErrorObject ? err.origin : void 0) || props.origin || (props.url ? getOriginFromFinalJsUrl(props.url) : '');
+            const debugPanelUrl = `${currentOrigin}${DEV_TO_DEBUG_HTML_PATH}`;
+            return h('div', {
+                style: {
+                    border: '1px solid #e5e7eb',
+                    padding: '10px',
+                    borderRadius: '6px'
+                }
+            }, [
+                h('div', {
+                    style: {
+                        fontWeight: '600',
+                        marginBottom: '6px'
+                    }
+                }, 'DevTo Vue Loader Error'),
+                h('pre', {
+                    style: {
+                        fontSize: '12px',
+                        whiteSpace: 'pre-wrap'
+                    }
+                }, message),
+                currentOrigin ? h('div', {
+                    style: {
+                        fontSize: '12px',
+                        marginTop: '6px'
+                    }
+                }, [
+                    h('span', 'Origin: '),
+                    h('code', currentOrigin)
+                ]) : null,
+                currentOrigin ? h('div', {
+                    style: {
+                        fontSize: '12px',
+                        marginTop: '6px'
+                    }
+                }, [
+                    h('a', {
+                        href: debugPanelUrl,
+                        target: '_blank',
+                        rel: 'noreferrer'
+                    }, debugPanelUrl)
+                ]) : null
+            ]);
+        };
+        return ()=>{
+            if (props.externalError) return renderErrorNode(props.externalError);
+            if (state.value.error) return renderErrorNode(state.value.error);
+            const children = [
+                h('div', {
+                    ref: containerRef,
+                    class: 'vdev-loader-container',
+                    'data-is': 'VueLoader'
+                })
+            ];
+            if (!state.value.isReady) {
+                const loadingNode = props.loading ? props.loading() : h('div', 'Loading...');
+                children.push(loadingNode);
+            }
+            return h('div', {
+                class: 'vdev-loader-root'
+            }, children);
+        };
+    }
+});
+export { DEFAULT_CONTRACT_ENDPOINT, DEFAULT_DISCOVERY_ENDPOINT, DEFAULT_INIT_ENDPOINT, VueLoader, ensureBridgeInit, loadBridgeContract, loadDiscoveryContract, resolveVueEntry, resolveVueEntryForLoader };

package/dist/index.umd.js

@@ -0,0 +1,521 @@
+(function(root, factory) {
+    if ('object' == typeof exports && 'object' == typeof module) module.exports = factory(require("Vue"));
+    else if ('function' == typeof define && define.amd) define([
+        "Vue"
+    ], factory);
+    else if ('object' == typeof exports) exports["DevToVueLoader"] = factory(require("Vue"));
+    else root["DevToVueLoader"] = factory(root["Vue"]);
+})(globalThis, (__rspack_external_vue)=>(()=>{
+        "use strict";
+        var __webpack_modules__ = {
+            vue (module1) {
+                module1.exports = __rspack_external_vue;
+            }
+        };
+        var __webpack_module_cache__ = {};
+        function __webpack_require__(moduleId) {
+            var cachedModule = __webpack_module_cache__[moduleId];
+            if (void 0 !== cachedModule) return cachedModule.exports;
+            var module1 = __webpack_module_cache__[moduleId] = {
+                exports: {}
+            };
+            __webpack_modules__[moduleId](module1, module1.exports, __webpack_require__);
+            return module1.exports;
+        }
+        (()=>{
+            __webpack_require__.d = (exports1, definition)=>{
+                for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                    enumerable: true,
+                    get: definition[key]
+                });
+            };
+        })();
+        (()=>{
+            __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+        })();
+        (()=>{
+            __webpack_require__.r = (exports1)=>{
+                if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+                    value: 'Module'
+                });
+                Object.defineProperty(exports1, '__esModule', {
+                    value: true
+                });
+            };
+        })();
+        var __webpack_exports__ = {};
+        (()=>{
+            __webpack_require__.r(__webpack_exports__);
+            __webpack_require__.d(__webpack_exports__, {
+                resolveVueEntry: ()=>resolveVueEntry,
+                resolveVueEntryForLoader: ()=>resolveVueEntryForLoader,
+                loadBridgeContract: ()=>loadBridgeContract,
+                DEFAULT_CONTRACT_ENDPOINT: ()=>DEFAULT_CONTRACT_ENDPOINT,
+                DEFAULT_DISCOVERY_ENDPOINT: ()=>DEFAULT_DISCOVERY_ENDPOINT,
+                VueLoader: ()=>VueLoader,
+                ensureBridgeInit: ()=>ensureBridgeInit,
+                DEFAULT_INIT_ENDPOINT: ()=>DEFAULT_INIT_ENDPOINT,
+                loadDiscoveryContract: ()=>loadDiscoveryContract
+            });
+            var external_Vue_ = __webpack_require__("vue");
+            const DEV_TO_NAMESPACE = 'dev_to';
+            const DEV_TO_BASE_PATH = `/__${DEV_TO_NAMESPACE}__`;
+            const DEV_TO_DISCOVERY_PATH = `${DEV_TO_BASE_PATH}/discovery.json`;
+            const DEV_TO_DEBUG_HTML_PATH = `${DEV_TO_BASE_PATH}/debug.html`;
+            const DEV_TO_VUE_NAMESPACE = 'vue';
+            const DEV_TO_VUE_BASE_PATH = `${DEV_TO_BASE_PATH}/${DEV_TO_VUE_NAMESPACE}`;
+            const DEV_TO_VUE_CONTRACT_PATH = `${DEV_TO_VUE_BASE_PATH}/contract.js`;
+            const DEV_TO_VUE_INIT_PATH = `${DEV_TO_VUE_BASE_PATH}/init.js`;
+            function isRecord(value) {
+                return 'object' == typeof value && null !== value;
+            }
+            function unwrapDefault(value) {
+                if (!isRecord(value)) return value;
+                const defaultValue = value['default'];
+                return null != defaultValue ? defaultValue : value;
+            }
+            function toError(value) {
+                return value instanceof Error ? value : new Error(String(value));
+            }
+            function resolveRemoteRuntime(runtimeModule) {
+                const runtimeRecord = isRecord(runtimeModule) ? runtimeModule : {};
+                const vueCandidate = runtimeRecord['default'] ?? runtimeRecord['Vue'] ?? runtimeModule;
+                if (!isRecord(vueCandidate) || 'function' != typeof vueCandidate['createApp'] || 'function' != typeof vueCandidate['h'] || 'function' != typeof vueCandidate['defineComponent']) throw new Error('Invalid Vue runtime module from dev server.');
+                return vueCandidate;
+            }
+            const DEFAULT_DISCOVERY_ENDPOINT = DEV_TO_DISCOVERY_PATH;
+            const DEFAULT_CONTRACT_ENDPOINT = DEV_TO_VUE_CONTRACT_PATH;
+            const DEFAULT_INIT_ENDPOINT = DEV_TO_VUE_INIT_PATH;
+            function resolveEndpointUrl(origin, endpoint) {
+                if (endpoint.startsWith('http://') || endpoint.startsWith('https://')) return endpoint;
+                if (endpoint.startsWith('/')) return `${origin}${endpoint}`;
+                return `${origin}/${endpoint}`;
+            }
+            function isBridgeContract(value) {
+                if (!isRecord(value)) return false;
+                const paths = value['paths'];
+                const events = value['events'];
+                if (!isRecord(paths) || 'string' != typeof paths['vueRuntime']) return false;
+                return !(!isRecord(events) || 'string' != typeof events['fullReload']);
+            }
+            function resolveContract(initModule) {
+                const moduleRecord = isRecord(initModule) ? initModule : {};
+                const contractCandidate = moduleRecord['DEV_TO_VUE_CONTRACT'] ?? moduleRecord['default'] ?? null;
+                if (!contractCandidate) throw new Error('Dev server contract not found. Please ensure `@dev-to/vue-plugin` (devToVuePlugin) is enabled in the Vite dev server.');
+                if (!isBridgeContract(contractCandidate)) throw new Error('Invalid dev server contract.');
+                return contractCandidate;
+            }
+            const nativeImport = new Function('url', 'return import(url)');
+            const discoveryCache = new Map();
+            const contractCache = new Map();
+            const initCache = new Map();
+            async function loadDiscoveryContract(origin, discoveryEndpoint) {
+                const endpoint = discoveryEndpoint || DEFAULT_DISCOVERY_ENDPOINT;
+                const discoveryUrl = resolveEndpointUrl(origin, endpoint);
+                if (discoveryCache.has(discoveryUrl)) return discoveryCache.get(discoveryUrl);
+                const p = fetch(discoveryUrl).then(async (resp)=>{
+                    if (!resp.ok) throw new Error(`Discovery endpoint returned ${resp.status}: ${resp.statusText}`);
+                    const data = await resp.json();
+                    if (!data || 'object' != typeof data) throw new Error('Invalid discovery response: not a JSON object');
+                    return data;
+                }).catch((e)=>{
+                    discoveryCache.delete(discoveryUrl);
+                    throw e instanceof Error ? e : new Error(String(e));
+                });
+                discoveryCache.set(discoveryUrl, p);
+                return p;
+            }
+            async function loadBridgeContract(origin, contractEndpoint) {
+                const endpoint = contractEndpoint || DEFAULT_CONTRACT_ENDPOINT;
+                const initUrl = resolveEndpointUrl(origin, endpoint);
+                if (contractCache.has(initUrl)) return contractCache.get(initUrl);
+                const p = nativeImport(initUrl).then((m)=>resolveContract(m)).catch(async (e)=>{
+                    contractCache.delete(initUrl);
+                    const err = e instanceof Error ? e : new Error(String(e));
+                    if (err.message.includes('Failed to fetch')) try {
+                        const resp = await fetch(initUrl, {
+                            method: 'HEAD'
+                        }).catch(()=>null);
+                        if (resp) err.statusCode = resp.status;
+                    } catch  {}
+                    throw err;
+                });
+                contractCache.set(initUrl, p);
+                return p;
+            }
+            async function ensureBridgeInit(origin, contract) {
+                const initPath = contract?.paths?.initClient || DEFAULT_INIT_ENDPOINT;
+                const initUrl = resolveEndpointUrl(origin, initPath);
+                if (initCache.has(initUrl)) return initCache.get(initUrl);
+                const p = nativeImport(initUrl).then(()=>void 0).catch((e)=>{
+                    initCache.delete(initUrl);
+                    throw e instanceof Error ? e : new Error(String(e));
+                });
+                initCache.set(initUrl, p);
+                return p;
+            }
+            async function resolveVueEntry(origin, componentName, contractEndpoint) {
+                try {
+                    const contract = await loadBridgeContract(origin, contractEndpoint);
+                    const dev = contract?.dev || {};
+                    const componentMap = dev.componentMap || {};
+                    const entry = componentMap[componentName] || componentMap['*'];
+                    if (!entry) {
+                        const errorMessage = `Component "${componentName}" not found in devComponentMap`;
+                        const isWildcardMode = !!componentMap['*'];
+                        const errorReason = isWildcardMode ? `The component "${componentName}" is not configured, and the wildcard fallback is also missing or invalid.` : `The component "${componentName}" is not configured in devComponentMap. Please add it to your Vite configuration.`;
+                        return {
+                            success: false,
+                            error: {
+                                message: errorMessage,
+                                type: 'COMPONENT_NOT_FOUND',
+                                componentName,
+                                errorReason,
+                                setupGuide: {
+                                    title: 'Setup Guide',
+                                    steps: [
+                                        "import { devToVuePlugin } from '@dev-to/vue-plugin'",
+                                        '',
+                                        "// Option 1: Shorthand (Default)",
+                                        `devToVuePlugin('${componentName}')`,
+                                        '',
+                                        "// Option 2: Explicit Mapping",
+                                        "devToVuePlugin({",
+                                        `  '${componentName}': '/', // Default entry`,
+                                        "  'Other': 'src/Card.vue' // Specific file",
+                                        "})"
+                                    ]
+                                }
+                            }
+                        };
+                    }
+                    const entryUrl = entry.startsWith('http://') || entry.startsWith('https://') ? entry : `${origin}${entry.startsWith('/') ? '' : '/'}${entry}`;
+                    return {
+                        success: true,
+                        entryUrl
+                    };
+                } catch (e) {
+                    const errorMessage = e instanceof Error ? e.message : String(e);
+                    return {
+                        success: false,
+                        error: {
+                            message: errorMessage,
+                            type: 'CONTRACT_LOAD_FAILED'
+                        }
+                    };
+                }
+            }
+            async function resolveVueEntryForLoader(origin, componentName, contractEndpoint) {
+                const r = await resolveVueEntry(origin, componentName, contractEndpoint);
+                if (r.success) return r;
+                const e = r.error;
+                return {
+                    success: false,
+                    loaderError: {
+                        message: e.message,
+                        origin,
+                        componentName: e.componentName || componentName,
+                        type: e.type,
+                        errorReason: e.errorReason,
+                        setupGuide: e.setupGuide
+                    }
+                };
+            }
+            function safeLocationHref() {
+                if ("u" < typeof window) return '';
+                try {
+                    return window.location.href;
+                } catch  {
+                    return '';
+                }
+            }
+            function safeOrigin() {
+                if ("u" < typeof window) return '';
+                try {
+                    return window.location.origin;
+                } catch  {
+                    return '';
+                }
+            }
+            function getOriginFromFinalJsUrl(finalJsUrl) {
+                let origin = '';
+                try {
+                    const urlParam = finalJsUrl.match(/url=([^&]+)/)?.[1] || '';
+                    const decoded = urlParam ? decodeURIComponent(urlParam) : finalJsUrl;
+                    const parsed = decoded.startsWith('http') ? new URL(decoded) : new URL(decoded, safeLocationHref() || 'http://localhost');
+                    origin = parsed.origin;
+                } catch  {
+                    origin = safeOrigin();
+                }
+                return origin;
+            }
+            function syncProps(target, next) {
+                for (const key of Object.keys(target))if (!(key in next)) delete target[key];
+                for (const [key, value] of Object.entries(next))target[key] = value;
+            }
+            const VueLoader = (0, external_Vue_.defineComponent)({
+                name: 'VueLoader',
+                props: {
+                    origin: {
+                        type: String,
+                        default: void 0
+                    },
+                    name: {
+                        type: String,
+                        default: void 0
+                    },
+                    url: {
+                        type: String,
+                        default: void 0
+                    },
+                    contractEndpoint: {
+                        type: String,
+                        default: void 0
+                    },
+                    componentProps: {
+                        type: Object,
+                        default: ()=>({})
+                    },
+                    loading: {
+                        type: Function,
+                        default: void 0
+                    },
+                    externalError: {
+                        type: Object,
+                        default: null
+                    },
+                    renderError: {
+                        type: Function,
+                        default: void 0
+                    }
+                },
+                setup (props) {
+                    const containerRef = (0, external_Vue_.ref)(null);
+                    const appRef = (0, external_Vue_.ref)(null);
+                    const runtimeRef = (0, external_Vue_.ref)(null);
+                    const componentRef = (0, external_Vue_.ref)(null);
+                    const propsStateRef = (0, external_Vue_.ref)(null);
+                    const state = (0, external_Vue_.ref)({
+                        isReady: false,
+                        error: null
+                    });
+                    const version = (0, external_Vue_.ref)(0);
+                    const resolvedUrl = (0, external_Vue_.ref)(props.url);
+                    const fullReloadListenerRef = (0, external_Vue_.ref)(null);
+                    const ensureFullReloadListener = (eventName)=>{
+                        if (!eventName || "u" < typeof window) return;
+                        const current = fullReloadListenerRef.value;
+                        if (current?.eventName === eventName) return;
+                        if (current) window.removeEventListener(current.eventName, current.handler);
+                        const handler = ()=>{
+                            version.value += 1;
+                        };
+                        window.addEventListener(eventName, handler);
+                        fullReloadListenerRef.value = {
+                            eventName,
+                            handler
+                        };
+                    };
+                    const unmountRemoteApp = ()=>{
+                        try {
+                            appRef.value?.unmount?.();
+                        } catch  {}
+                        appRef.value = null;
+                        propsStateRef.value = null;
+                    };
+                    const renderRemoteApp = (force = false)=>{
+                        const runtime = runtimeRef.value;
+                        const ComponentRef = componentRef.value;
+                        if (!runtime || !ComponentRef) return;
+                        if (!containerRef.value) return;
+                        if (appRef.value && !force) return;
+                        unmountRemoteApp();
+                        const propsState = runtime.reactive({});
+                        syncProps(propsState, props.componentProps ?? {});
+                        const Wrapper = runtime.defineComponent({
+                            name: 'DevToVueWrapper',
+                            setup () {
+                                return ()=>runtime.h(ComponentRef, propsState);
+                            }
+                        });
+                        const app = runtime.createApp(Wrapper);
+                        app.mount(containerRef.value);
+                        appRef.value = app;
+                        propsStateRef.value = propsState;
+                        state.value.isReady = true;
+                    };
+                    const loadViteComponent = async (entryUrl, exportName, currentVersion)=>{
+                        if (!entryUrl) throw new Error('Not found entry url.');
+                        const originFromUrl = getOriginFromFinalJsUrl(entryUrl);
+                        const connector = entryUrl.includes('?') ? '&' : '?';
+                        const jsUrlWithParam = currentVersion > 0 ? `${entryUrl}${connector}v=${currentVersion}` : entryUrl;
+                        try {
+                            const contract = await loadBridgeContract(originFromUrl, props.contractEndpoint);
+                            await ensureBridgeInit(originFromUrl, contract);
+                            ensureFullReloadListener(contract.events.fullReload);
+                            const runtimeModule = await nativeImport(`${originFromUrl}${contract.paths.vueRuntime}`);
+                            const runtime = resolveRemoteRuntime(runtimeModule);
+                            const moduleNs = await nativeImport(jsUrlWithParam);
+                            const moduleRecord = isRecord(moduleNs) ? moduleNs : {};
+                            const exportCandidate = exportName ? moduleRecord[exportName] : void 0;
+                            const candidate = exportName ? exportCandidate ?? moduleRecord['default'] ?? moduleNs : moduleRecord['default'] ?? moduleNs;
+                            const ComponentValue = unwrapDefault(candidate);
+                            if (ComponentValue) return {
+                                Component: ComponentValue,
+                                runtime
+                            };
+                            throw new Error('Vite Dev Component Load Fail: Component not found in module.');
+                        } catch (e) {
+                            const err = toError(e);
+                            if (err.message.includes('Failed to fetch')) try {
+                                const resp = await fetch(jsUrlWithParam, {
+                                    method: 'HEAD'
+                                }).catch(()=>null);
+                                if (resp) err.statusCode = resp.status;
+                            } catch  {}
+                            throw err;
+                        }
+                    };
+                    (0, external_Vue_.watch)(()=>[
+                            props.url,
+                            props.origin,
+                            props.name,
+                            props.contractEndpoint
+                        ], (values, _old, onInvalidate)=>{
+                        const [directUrl, origin, name, contractEndpoint] = values;
+                        let cancelled = false;
+                        onInvalidate(()=>{
+                            cancelled = true;
+                        });
+                        if (directUrl) {
+                            resolvedUrl.value = directUrl;
+                            state.value.error = null;
+                            return;
+                        }
+                        if (!origin || !name) {
+                            if (!directUrl && (origin || name)) state.value.error = new Error('Missing dev server origin or component name for resolution.');
+                            return;
+                        }
+                        state.value.isReady = false;
+                        state.value.error = null;
+                        resolveVueEntryForLoader(origin, name, contractEndpoint).then((res)=>{
+                            if (cancelled) return;
+                            if (true === res.success) resolvedUrl.value = res.entryUrl;
+                            else state.value.error = res.loaderError;
+                        });
+                    }, {
+                        immediate: true
+                    });
+                    (0, external_Vue_.watch)(()=>[
+                            resolvedUrl.value,
+                            props.name,
+                            version.value
+                        ], (values, _old, onInvalidate)=>{
+                        const [url, name, currentVersion] = values;
+                        if (!url) return;
+                        let cancelled = false;
+                        onInvalidate(()=>{
+                            cancelled = true;
+                        });
+                        state.value.isReady = false;
+                        if (state.value.error instanceof Error) state.value.error = null;
+                        loadViteComponent(url, name, currentVersion).then(({ Component, runtime })=>{
+                            if (cancelled) return;
+                            runtimeRef.value = runtime;
+                            componentRef.value = Component;
+                            renderRemoteApp(true);
+                        }).catch((err)=>{
+                            if (cancelled) return;
+                            state.value.error = err instanceof Error ? err : new Error(String(err));
+                            state.value.isReady = false;
+                            unmountRemoteApp();
+                        });
+                    }, {
+                        immediate: true
+                    });
+                    (0, external_Vue_.watch)(()=>props.componentProps, (next)=>{
+                        if (!propsStateRef.value) return;
+                        syncProps(propsStateRef.value, next || {});
+                    }, {
+                        deep: true
+                    });
+                    (0, external_Vue_.onMounted)(()=>{
+                        renderRemoteApp(false);
+                    });
+                    (0, external_Vue_.onBeforeUnmount)(()=>{
+                        unmountRemoteApp();
+                        if ("u" < typeof window) return;
+                        const current = fullReloadListenerRef.value;
+                        if (current) window.removeEventListener(current.eventName, current.handler);
+                    });
+                    const renderErrorNode = (err)=>{
+                        if (props.renderError) return props.renderError(err);
+                        const isLoaderErrorObject = !(err instanceof Error);
+                        const message = err.message || String(err);
+                        const currentOrigin = (isLoaderErrorObject ? err.origin : void 0) || props.origin || (props.url ? getOriginFromFinalJsUrl(props.url) : '');
+                        const debugPanelUrl = `${currentOrigin}${DEV_TO_DEBUG_HTML_PATH}`;
+                        return (0, external_Vue_.h)('div', {
+                            style: {
+                                border: '1px solid #e5e7eb',
+                                padding: '10px',
+                                borderRadius: '6px'
+                            }
+                        }, [
+                            (0, external_Vue_.h)('div', {
+                                style: {
+                                    fontWeight: '600',
+                                    marginBottom: '6px'
+                                }
+                            }, 'DevTo Vue Loader Error'),
+                            (0, external_Vue_.h)('pre', {
+                                style: {
+                                    fontSize: '12px',
+                                    whiteSpace: 'pre-wrap'
+                                }
+                            }, message),
+                            currentOrigin ? (0, external_Vue_.h)('div', {
+                                style: {
+                                    fontSize: '12px',
+                                    marginTop: '6px'
+                                }
+                            }, [
+                                (0, external_Vue_.h)('span', 'Origin: '),
+                                (0, external_Vue_.h)('code', currentOrigin)
+                            ]) : null,
+                            currentOrigin ? (0, external_Vue_.h)('div', {
+                                style: {
+                                    fontSize: '12px',
+                                    marginTop: '6px'
+                                }
+                            }, [
+                                (0, external_Vue_.h)('a', {
+                                    href: debugPanelUrl,
+                                    target: '_blank',
+                                    rel: 'noreferrer'
+                                }, debugPanelUrl)
+                            ]) : null
+                        ]);
+                    };
+                    return ()=>{
+                        if (props.externalError) return renderErrorNode(props.externalError);
+                        if (state.value.error) return renderErrorNode(state.value.error);
+                        const children = [
+                            (0, external_Vue_.h)('div', {
+                                ref: containerRef,
+                                class: 'vdev-loader-container',
+                                'data-is': 'VueLoader'
+                            })
+                        ];
+                        if (!state.value.isReady) {
+                            const loadingNode = props.loading ? props.loading() : (0, external_Vue_.h)('div', 'Loading...');
+                            children.push(loadingNode);
+                        }
+                        return (0, external_Vue_.h)('div', {
+                            class: 'vdev-loader-root'
+                        }, children);
+                    };
+                }
+            });
+        })();
+        return __webpack_exports__;
+    })());

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@dev-to/vue-loader",
+  "version": "0.2.2",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./umd": "./dist/index.umd.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "typescript": ">=5.0.0",
+    "vue": ">=3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YangYongAn/dev-to.git",
+    "directory": "packages/vue-loader"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@dev-to/shared": "1.0.4"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "lint": "pnpm -w lint",
+    "test": "echo 'test @dev-to/vue-loader'"
+  }
+}