vuejs / repl

Vue SFC REPL as a Vue 3 component
https://repl-vuejs.vercel.app
MIT License
906 stars 162 forks source link

Expect to support template file configuration #195

Closed JinweiOS closed 8 months ago

JinweiOS commented 8 months ago

Situation

First of all, I would like to thank Vue's huge community for bringing great convenience to my development. Well, starting from my scene, I want to use sfc playground to develop echarts charts, and hope that the echarts sample code will be displayed by default when the user opens the playground for the first time. But currently @vue/repl does not seem to directly support this scenario.

Here is some pseudocode.

// init store
const store = new ReplStore(...)

// set echarts import map
store.setImportMap({
  imports: {
    "echarts": "https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.esm.js",
    "vue": "https://play.vuejs.org/vue.runtime.esm-browser.prod.js",
    "vue/server-renderer": "https://play.vuejs.org/server-renderer.esm-browser.js"
  }
})

// todo: set welcome code
store.setFiles({ 'App.vue', welcomeRawCode})

If written like this, compileFile will be executed immediately inside the setFiles function. At this time, echarts library has not been loaded yet, and an error will be reported.

There is another way to complete the initialization through persistent url code, but if the welcome code changes frequently, the DX will be poor.

const store = new ReplStore({
  serializedState: urlCode, // If the welcome code template changes, this place needs to be regenerated.
});

Expect

So, I would like to ask if @vue/repl can support welcomeCode and newSFCCode template customization, which can be provided through ReplStore initialization or a static method. If PR is welcome, I can try to initiate one!😊 There is a PR.