editing styles in ssr mode does not update the view in time

Repl: https://play.vuejs.org/#__DEV____SSR__eNpNjjsOgzAMhq/iZqEdWsRKA1K33qBLlgpCQUriKDFIVZS714Slk/X5f9hJPLy/basWrZBxCIsniJpW3yu3WI+BIEHQE2SYAlqo2Fopp9yALhLY+IFu18/VUxuD8MJgxlN1UU7WRx0XMZC23rxJMwHIuelTKuGcZc1UtovzK8F2tThq0ynBuhIsyfovzRjpa46iuYG0T4ABDYaWPxnv+yKX+8Un8g9RXU3+

Problem Code：
https://github.com/vuejs/repl/blob/fd3324e97ec96f66f2444d2a4a51fa6b133cc848/src/output/moduleCompiler.ts#LL69C5-L69C5

描述

在 pc 端可以正常使用，但是在移动端报错：

undefined is not an object (evaluating '__import_1__.install')

项目地址

仓库：https://github.com/FightingDesign/playground

线上地址：https://tianyuhao.cn/playground

错误截图

移动端截图：

I am coding on Element Plus Playground which used this package to implement, and I want to reproduce some code that relative to jsx.

Is it possible to support?

While solving the tutorial challenges, it would be nice if there wouldn't be popups hiding my code while I am writing it.

Kingwl/monaco-volar#23

569fe62#r120793841

When converting SFC template to HTML, we're missing the newline before the last closing tag:

// SFC
<template>
  <h1>{{ message }}</h1>
</template>

// HTML
<div id="app">
  <h1>{{ message }}</h1></div>

https://play.vuejs.org/#__SSR__eNp9kM9uAiEQxl9lQg9q0rD3hm7S9AWa1ONecBeVyL8ss3owvrsDaGSNEQ7MMN/8GL4z+wmBHyfFvpiI/agDQlQ4hbZz2gY/Ivx6G2A7egsL3qQkyRedE03Rk5ISVDYYiYoy8T/FoFxMcYcitVAEtOoKdFh2EYiMbqEIk/ZOhI+tNGYj+8ONUpbxctBuxzl/tDTVFBnd1A9S/THLW/wTe8adMasK+2R3c154CfIkNYJTJ/gjK3VUy+W4gu8Wzkmz1lb5Cenqspo5O/N10Mc8Y7/XZsgfisYjWZeP1FcU9VSXK0sJoe0=

It works fine locally in the vue/core source code, but the online version will report an error

用ip 访问报错，提示 Cannot set properties of undefined (setting 'name') ；
控制台提示 Cannot read properties of undefined (reading 'digest') ；
Cannot set properties of undefined (setting 'name') ；

但是本地用 localhost 访问正常

At present, when we edit the file content, the change event of the editor will be triggered, and then the input content will be parsed.

But most of the time, we only wrote a part, so the analysis will report an error. I don't think it's very friendly.

Therefore, I want to confirm the completion of your code by Ctrl + s, and then parse and update it.

I can create an PR if you think this suggestion works. @yyx990803

For example, I want a dark theme. I added class="dark" to the parent container, which meets the expectations. Now I want the code and output to be arranged vertically. There is a description of "vertical" in the css file, but it does not work after adding it. I try to read the source code to solve the problem myself, but some variables do not have proper explanations, which is difficult to read. So please ask me how to make some customized settings. Especially vertical arrangement.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@shikijs/monaco, @types/node, @typescript-eslint/eslint-plugin, eslint-plugin-vue, monaco-editor-core, pnpm, shiki, simple-git-hooks, typescript, vite, vue-tsc)
• chore(deps): update dependency @volar/monaco to v2
• chore(deps): update dependency @volar/typescript to v2
• chore(deps): update dependency @vue/language-service to v2
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency codemirror to v6

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

maybe can use vls lsp for smooth experience?

In my company, there are a large number of reusable code fragments, so I made a similar to https://vuejsexamples.com/

i was use my vue2-sfc to add vue2 demos and sfc.vuejs.org add vue3 demo.Below is a screenshot of the effect of my website. But I want my users to see my output panel directly, not the code panel, because this is the most intuitive visual effect.

I would like to create a feature that allows importing third-party packages, but I have found that there is no way to query all available third-party packages. Can I write a common list here for loading these third-party packages? I am willing to contribute to this. I'm wondering if the official team has any plans regarding this.

In preview tab, event I set href atrribute of <a> with value javascript:void(0), it will still open a new tab.
The only solution I found so far is to prevent the default event in the click event
e.preventDefault

demo

The preview area of Vue SFC Playground seems to be small.

Link to reproduce the problem.

I expect it to look like this:

github、preview

sfc url

it will be ok when you remove Comp.vue code

<style>
  .test {
    color: red;
  }
</style>

是不是不支持webGL内容的展示啊？
使用了，echarts-gl，没有成功哦。echarts一点问题没有。

I am thinking to fork this project but notice that there is no License assigned to it. Can you please add a License to this project?

On Windows 10, the scrollbar makes it difficult to reach components. A solution would be to set scrollbar-width: thin on the file selector div. Other users don't experience this issue, but it might be due to the OS.

If possible I would like to contribute and make this simple change myself. It seems to have a more prevalent fade effect on Chrome, so I'm not sure as to what the issue is.

export default (descriptor: defaultCompiler.SFCDescriptor, id: string) => {
  if (descriptor.script || descriptor.scriptSetup) {
    // 1.编译script
    const compiledScript = defaultCompiler.compileScript(descriptor, {
      inlineTemplate: true, // 是否编译模板并直接在setup()里面内联生成的渲染函数
      id, // 用于样式的作用域
      templateOptions: {
        // 编译模板的选项
        compilerOptions: {
          // 模板编译选项
        },
      },
    });
    return (
      extendVueInstance().constString +
      "\n" +
      deleteImport(compiledScript.content.replace("export default ", "return "))
    );
  }
};

根据官方demo 在我的系统内部进行了一些改造，但是我同时希望他能够支持 vue的其他ui组件，不知道该如何实现

After the refactoring of volarjs/volar.js#50, now we can customize ServiceEnvironment to set the locale option.

@vue/repl依赖中的crypto，你用的是web标准中的crypto，我在http生产环境中crypto下的subtle 报undefined，然后我在Stack Overflow上看到有说是 Web Crypto API 只能在安全环境下（本地localhost、127.0.0.1或者https）使用，在其他局域网地址或者其他ip下无法使用。报错文件为 vue-repl.js 下的 hashId方法。
我希望能够不使用Crypto 来对文件名进行加密，因为这会导致在非安全环境下报错，而我们大多数开发者都是在http这种非安全环境下开发的，所以我建议你们能够重写 vue-repl.js 下的 hashId方法，因为只因为想加密文件名而导致整个程序无法继续运行，就很可惜。

Add Ctrl+F to code search because the browser's built-in document search cannot find when the editor scrolls.

I'm have documentation for an existing component library. I'd like to add this into the examples to showcase the components, but I dont see anything about registering components. Is that possible?

If so, can I register global components, or use a plugin in the Vue instance that is responsible for rendering the results?

repl在火狐浏览器下运行（mac下所有也会出现这问题，我想是所有用webkit内核的浏览器都会出现）时，出现此问题，希望官方大大解决一下，目前我也在自己寻找解决方法，

Hi. Is it possible to add some option, a switch, so I could turn on/off automatic URL generation or maybe a button to copy generated URL to the clipboard? (and the setting would be saved in localStorage). My reason is that every time I change the code, the url is also updated, making the browser history cluttered with unnecessary entries. I always have to remember to open the playground in incognito mode to bypass this, which is a little annoying to me :/. Thanks for considering my request.

long, long list...

I want to use repl as a third-party dependency, but monaco doesn't meet expectations

https://stackblitz.com/edit/vitejs-vite-b2a1x1?file=src%2FApp.vue

In the current implementation, the re-rendering of the components is not replacing the changed parts like HMR does in real-time but in fact re-rendering all components and mounting them again. Is there way to enable HMR like the vite's dev server offers?

Here's a demo of an element-plus I wrote

and this is element-plus official demo

I've seen a lot of community implementations like https://element-plus.run, which is actually bad for developers, and the pain point is that we can't bring in a whole component library at once. As you can see, the lack of el-rows in my demo caused my code to only partially render

So I have a proposal

// if it works will be great 
import { use } from 'vue'
import ElementPlus from 'element-plus'
use(ElementPlus)

Can we add eslint and prettier to our project for formatting code?

Problem 1.

in file repl\src\output\srcdoc.html#55

Promise.resolve event and script code eval sometimes run at a wrong time.
which may cause CSS code inject failed：
from source code we want window.__css__ = xxxxxxCode evaluate before document.getElementById('__sfc-styles').innerHTML = window.__css__
But this will cause when we use window.__css__ , it is still nothing

Resovle:

window.__next__ = () => {
    setTimeout(() => resolve(), 0)
}

it is a microtask vs macrotask problem

Problem 2.

in file Preview.vue#152

sometimes event not fire when we are typing, especially in App.vue with style tag，change watch fuction will fix this.

About these two problem，I create a PR at #47

As initially discussed here, for both the standalone and the embedded use cases, you could consider extracting the Output component whose only purpose is to show compiled results or preview. Store data like files and importmap could be provided through the prop.

Then it's possible to use any favorable editor(monaco or codemirror) with the Output component, and we could use the Output component alone as a readonly preview of a project.

Hello, thank you so much for developing such a nice library, but I found some typescript(4.9) syntax support not very good when using it. The version of surcrase shows 3.21.0 in the pnpm-lock.yaml file, but the latest version of sucrase is 3.29.0 and the syntax for Typescript4.9 is already supported, should the sucrase version be updated?

caused by vuejs/core#6158

repro url

repro:

last chrome:

1. open url
2. open file Comp.vue
3. remove attribute "scoped" from style tag. both "p" tag has yellow background
4. add attribute "scoped" to style tag. only first "p" tag has yellow background

last firefox:

1. open url
2. open file Comp.vue
3. remove attribute "scoped" from style tag. both "p" tag has yellow background
4. add attribute "scoped" to style tag. both "p" tag has yellow background

expected:
because there is a bug vuejs/core#6158 firefox should have only first "p" tag with yellow background

Add import for Pinia.

It is recommended to hide the ssr tab button in non-ssr mode

I made a very initial version to support Less.
I think repl can add an option about custom file extension transformer.
Or we can just support less transform in repl.

I can create an PR for it if you agree with the suggestion.

/cc @yyx990803

module.exports = {}

I want to render a component of a element-plush and what do I need to do

When use https://sfc.vuejs.org/ sometimes css is not in the output iframe page.
I trace the code and find when code use window.__css__，it is still nothing
this is a problem with es-module-shims witch causes normal script run as module script in twice.

here is a demo:

<html>
<head>
    <meta charset="utf-8">
    <script async="" src="https://unpkg.com/[email protected]/dist/es-module-shims.wasm.js"></script>
</head>
<body>
<script>
    async function start() {
      const scripts = [
        `console.log('script run!!!!!! but run twice')`
      ]
      for(let script of scripts) {
        const scriptNode = document.createElement('script')
        scriptNode.setAttribute('type', 'module')

        scriptNode.innerHTML = script
        document.head.appendChild(scriptNode)
      }
    }
    setTimeout(() => start(), 2000)
</script>
<div>this is a test</div>
<div id="app"></div>
</body>
</html>

you will see two log with script run!!!!!! but run twice

Thus window.__css__ = 'xxxxxxxx' code was covered by window.__css__ = ''(run twice)

replace template with this code in the sfc playground.

<template>
  <keep-alive>
    <A  v-if="1" ></A>
    break
    <A v-else></A>
  </keep-alive>    
</template>

this combination should trigger 2 errors
Vue template compilation error: <KeepAlive> expects exactly one child component.(45)
Vue template compilation error: v-else/v-else-if has no adjacent v-if or v-else-if.(30)

but instead it causes infinite loop

severity: annoyance, edge case

Just like vue version is selectable, we should also support ts version is selectable.