-
Notifications
You must be signed in to change notification settings - Fork 152
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
feat: support for sandbox context customization #42
Conversation
…lugins or global components
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like this, but IMO the API needs some adjustments:
- 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.
Thanks for api adjustments suggestion. I've changed the origin api to suggested But there is still a problem: 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: The error only disappeared when I separate them. Based on that I changed the 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> |
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? |
👏👏👏👏👏🎉🎉🍾🍾🎉🎉 |
如何在编译阶段,就把ui组件给编译了呢? |
Support for customize some sandbox features
<link ref="stylesheet" href="custom/css/file">
import SomePlugin/GlobalComponent from 'customLib'
app.use(SomePlugin)
,app.component('CompName', GlobalComponent)
Example for global use ElementPlus
Then in the repl editor, you can use any ElementPlus Components
This PR can possibly solve issue (#41)