how could someone make library code available without using a cdn

[joaomelo]

Hi there,

Excellent framework and REPL library. I'm an enthusiastic user of Vue. I'm authoring a library of vue components to be used in many projects in my company. I'm using the "@vue/repl" to create a documentation page where de lib components are loaded and presented with live examples. Below is a draft of such a page.

I also intend to use this playground to do incremental development of the components watching the behavior on the documentation page as I enhance the actual lib component. In that use case, I don't want to use the imports map to point to library code in a repository while developing locally. That's because the publish code is not the one I want to import the components. I want to import the component's local version. But I don't know how to do that.

I created a WPlaygroung component and imaged I could create some global scope for every REPL with the lib code

<script setup>
import { Repl } from "@vue/repl";
import CodeMirror from "@vue/repl/codemirror-editor";
import "@vue/repl/style.css";
defineProps({
   exampleCode: {
     type: String,
     default: null,
   },
});
</script>
<template>
  <Repl :editor="CodeMirror" />
</template>

Can you help me figure out a way to inject the library components and functions in the REPL scope without using a CDN but referencing the local code I'm working on?

Thanks a lot,
JM

[520Yanxiaofei]

我也遇到这个问题了，不引用cdn时，尝试引入第三方包组件时，抛出default错误

[guoshuangyang]

local

Try to package the esm format in full, and then add the esm link in importmap. If you want to do incremental development of the components, Maybe you can listen for changes and package it in real time and server it

[itancc]

我也遇到这个问题了，不引用cdn时，尝试引入第三方包组件时，抛出default错误

请问有解决方案了吗

[guoshuangyang]

我也遇到这个问题了，不引用cdn时，尝试引入第三方包组件时，抛出default错误

请问有解决方案了吗

给一个最小还原的repo

[leookun]

I can sort of see where you're coming from, and I'm guessing you want to provide context to the repl through a transfer function instead of a cdn.
I looked at the source code for this repository, which generates a static html with regexp, and used it as an iframe for preview. However, functions are not properly preserved in JSON.stringify, which is the main reason why the repository does not provide a function passing dependency.
Perhaps you can find a way or a plugin to make your lib output a bundle string at runtime instead of a function object, and then inject it into the final iframe as previewOptions.headHTML, you might spend some time on this

The easiest way is to write a script and put your lib artifacts into the public folder, which is probably what @vuejs/repl expects you to do

我大概明白你的想法，我猜测你希望通过传递函数而不是cdn来为repl提供上下文。
我查看了此仓库的源代码，它通过正则替换来生成一个静态的html，并将它作为预览的ifream。但是函数在JSON.stringify中不会正确保留，这也是这个仓库不提供函数传递依赖的主要原因。

或许你可以寻找一些方法或者插件，让你的lib产出运行时的bundle string，而不是函数对象，然后作为previewOptions.headHTML注入到最终的iframe中，你可能会在这上面耗费一些时间

最简单的方法是写一个脚本，把你的lib产物输入到public文件夹中，这应该也是@vuejs/repl 期望你做的

[sxzz]

Refer to #234 (comment)