Feat request: export injectKeyProps

[litingyes]

already exported Preview component: https://github.com/vuejs/repl/blob/main/src/index.ts#L2

but not export injectKeyProps symbol:

repl/src/types.ts

Line 18 in 47da477

export const injectKeyProps: InjectionKey<

As a result, the separate Preview component cannot be used at all: https://github.com/vuejs/repl/blob/main/src/output/Preview.vue#L20

[wangcch]

#309
Maybe we can use Sandbox, not relying on editor configuration

[litingyes]

#309 Maybe we can use Sandbox, not relying on editor configuration

Is there a difference? It looks like you just moved the code in preview to another place

[wangcch]

Is there a difference? It looks like you just moved the code in preview to another place
hi @litingyes

My original intention is to use Preview

before:
Previously, when using Preview, there was no store, so we needed to use injectKeyProps to configure the data.

after:
The usage is the same as Repl

<script setup>
import { Sandbox } from '@vue/repl'

const store = useStore(
  {
    vueVersion: ref('3.5.13'),
  },
  location.hash,
)
</script>

<template>
  <Sandbox :store="store" />
</template>

[litingyes]

Is there a difference? It looks like you just moved the code in preview to another place
hi @litingyes

My original intention is to use Preview

before: Previously, when using Preview, there was no store, so we needed to use injectKeyProps to configure the data.

after: The usage is the same as Repl

<script setup> import { Sandbox } from '@vue/repl' const store = useStore( { vueVersion: ref('3.5.13'), }, location.hash, ) </script>

So, if the Preview component does not use inject, but uses props to pass data, isn't it the same? I don't think the benefit of your change is great, so try to make the changes as minimal as possible.

[wangcch]

Is there a difference? It looks like you just moved the code in preview to another place
hi @litingyes

My original intention is to use Preview
before: Previously, when using Preview, there was no store, so we needed to use injectKeyProps to configure the data.
after: The usage is the same as Repl

<script setup> import { Sandbox } from '@vue/repl' const store = useStore( { vueVersion: ref('3.5.13'), }, location.hash, ) </script>

So, if the Preview component does not use inject, but uses props to pass data, isn't it the same? I don't think the benefit of your change is great, so try to make the changes as minimal as possible.

This PR does not change the Preview, but only makes it more suitable for more scenarios.
The Sandbox is separated from the Preview. The Preview usage remains unchanged