feat: support for sandbox context customization

[Blackman99]

Support for customize some sandbox features

• Support customize sandbox head tags, such as <link ref="stylesheet" href="custom/css/file">
• Support customize sandbox app import code, such as import SomePlugin/GlobalComponent from 'customLib'
• Support customize sandbox app usage code, such as app.use(SomePlugin), app.component('CompName', GlobalComponent)

Example for global use ElementPlus

<script setup>
import { Repl, ReplStore } from '@vue/repl'

const store = new ReplStore()

store.setImportMap({
  imports: {
    'element-plus': 'https://unpkg.com/[email protected]/es/index.mjs'
  }
})

const customImportStatements = [`import ElementPlus from 'element-plus'`]
const customAppUsageCodes = [`app.use(ElementPlus)`]
const customHeadTags = [
  `<link ref="stylesheet" href="https://unpkg.com/[email protected]/dist/index.css">`
]
</script>
<template>
  <Repl 
    v-bind="{ 
      customImportStatements, 
      customAppUsageCodes, 
      customHeadTags,
      store
    }"
  />
</template>

Then in the repl editor, you can use any ElementPlus Components

<template>
  <el-button>
   A Button
  </el-button>
</template>

This PR can possibly solve issue (#41)

[yyx990803]

I like this, but IMO the API needs some adjustments:

1. These should be merged into a single prop previewOptions:

<Repl
  :previewOptions="{
    headHTML: `...`, // inject to end of head
    bodyHTML: `...`, // inject to end of body, e.g. Teleport targets
    customCode: `import foo from 'xxx'; app.use(foo)`
  }"
/>

Note there's no need to separate import statements and app code, since import statements are hoisted can be placed anywhere.

The entire options object can also be provided as a single injection instead of three.

[Blackman99]

Thanks for api adjustments suggestion. I've changed the origin api to suggested previewOptions

But there is still a problem:
If I merge the import code with the app use code (use the previewOptions.customCode option) like this:

const App = {
  setup() {
    const store = new ReplStore()
    store.setImportMap({
      imports: {
        "casual-ui-vue":
          "https://unpkg.com/casual-ui-vue/dist/casual-ui-vue.es.js",
      },
    });

    return () =>
      h(Repl, {
        store,
        previewOptions: {
          headHTML: '<link rel="stylesheet" href="https://unpkg.com/casual-ui-vue/dist/style.css">',
          customCode: `import CUI from 'casual-ui-vue; app.use(CUI)`
        }
      });
  }
}

somehow the repl shows an error message: Unexpected Identifier which points to the import statement:

Here's reproduction link

The error only disappeared when I separate them.

Based on that I changed the previewOptions.customCode to previewOptions.customCode.importCode and previewOptions.customCode.useCode

Here's my changed commit, in the test/main.ts, has some code I've used to test the feature, using a components lib write by myself: Casual UI

in the test/main.ts

const App = {
  setup() {
    const store = new ReplStore()
    store.setImportMap({
      imports: {
        "casual-ui-vue":
          "https://unpkg.com/casual-ui-vue/dist/casual-ui-vue.es.js",
      },
    });

    return () =>
      h(Repl, {
        store,
        previewOptions: {
          headHTML:
            '<link rel="stylesheet" href="https://unpkg.com/casual-ui-vue/dist/style.css">',
          customCode: {
            importCode: `import CUI from 'casual-ui-vue'`,
            useCode: 'app.use(CUI)'
          }
        }
      });
  }
}

In the repl, write some code like this would work as expected:

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <c-button :label="msg" />
</template>

[fvena]

Why hasn't this feature been merged yet? I believe it could be very useful. Is there any default feature that allows us to accomplish this?

[fvena]

👏👏👏👏👏🎉🎉🍾🍾🎉🎉

[bhabgs]

如何在编译阶段，就把ui组件给编译了呢？