Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how could someone make library code available without using a cdn #151

Closed
joaomelo opened this issue Aug 21, 2023 · 6 comments
Closed

how could someone make library code available without using a cdn #151

joaomelo opened this issue Aug 21, 2023 · 6 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@joaomelo
Copy link

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.

Captura de tela 2023-08-21 134817

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

@sxzz sxzz added enhancement New feature or request help wanted Extra attention is needed labels Aug 22, 2023
@520Yanxiaofei
Copy link

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

@guoshuangyang
Copy link

guoshuangyang commented Aug 30, 2023

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
Copy link

itancc commented Oct 9, 2023

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

请问有解决方案了吗

@guoshuangyang
Copy link

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

请问有解决方案了吗

给一个最小还原的repo

@leookun
Copy link

leookun commented Nov 20, 2023

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
Copy link
Member

sxzz commented May 23, 2024

Refer to #234 (comment)

@sxzz sxzz closed this as not planned Won't fix, can't repro, duplicate, stale May 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

6 participants