fix(vue-xrender): xTpl component throw warnning

Author: 2214962083

packages/doc-site/.vuepress/client.ts

@@ -11,6 +11,11 @@ export default defineClientConfig({
       configLoadSandbox(preOptions => {
         return {
           ...preOptions,
+          pkgCdn: {
+            '@vue/runtime-dom'(version) {
+              return `https://unpkg.com/vue@${version}/dist/vue.esm-browser.js`
+            }
+          },
           lifeCycle: {
             // TODO: FIX types declaration
             loadTsLibs(_, defaultTsLibs) {

packages/doc-site/zh/libs/vue-xrender/components.md

@@ -2,15 +2,18 @@
 
 ## XJsx
 
-用于在 template 渲染 jsx 的组件。
+### 介绍
+
+用于在 `template` 渲染 `jsx` 的组件。
+`jsx` function 会接收一个 `props`，`props` 的属性 `children` 指向 `<XJsx></XJsx>` 的默认插槽
 
 ### props
 
 | 参数 | 说明             | 类型                                                                                              | 是否必填 | 默认值 |
 | ---- | ---------------- | ------------------------------------------------------------------------------------------------- | -------- | ------ |
 | jsx  | 要动态渲染的 jsx | `FunctionComponent` \|<br/><br/> `VNode` \|<br/><br/>`(props: Object, h: CreateElement) => VNode` | 是       | -      |
 
-### 示例
+### 用法
 
 #### composition-api 使用
 
@@ -122,6 +125,48 @@ export default {
 </script>
 ```
 
+### 示例
+
+::: demo XJsx Demo
+
+```vue App.vue
+<template>
+  <x-jsx :jsx="CardJsx"> CardJsx 的 children 节点 </x-jsx>
+</template>
+
+<script lang="tsx">
+import {defineComponent, ref} from 'vue'
+import {JsxFn, XJsx} from 'vue-xrender'
+
+export default defineComponent({
+  components: {
+    XJsx
+  },
+  setup() {
+    const time = ref(0)
+
+    setInterval(() => {
+      time.value++
+    }, 1000)
+
+    const CardJsx: JsxFn = props => (
+      <div>
+        <h1>CardJsx 组件，在 setup jsx 函数中创建，在模板中使用</h1>
+        <h2>CardJsx 实时时间: {time.value}s</h2>
+        {props.children}
+      </div>
+    )
+
+    return {
+      CardJsx
+    }
+  }
+})
+</script>
+```
+
+:::
+
 ### 注意
 
 项目要配置 Jsx 编译器，否则无法编译 Jsx 语法
@@ -190,7 +235,13 @@ module.exports = {
 
 ## XTpl
 
-用于渲染动态 template 字符串的组件
+### 介绍
+
+用于渲染动态 `template` 字符串的组件
+
+`template` 字符串可在运行时随时拼接变更
+
+本组件不支持传递插槽
 
 ### props
 
@@ -199,7 +250,7 @@ module.exports = {
 | tpl  | 要动态编译的 template 字符串 | string | 是       | -                    |
 | ctx  | template 字符串的上下文      | Object | 否       | XTpl.$parent \|\| {} |
 
-### 示例
+### 用法
 
 #### composition-api 使用
 
@@ -309,6 +360,48 @@ export default {
 </script>
 ```
 
+### 示例
+
+::: demo XTpl Demo
+
+```vue App.vue
+<template>
+  <x-tpl :tpl="CardTpl" />
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue'
+import {XTpl} from 'vue-xrender'
+
+export default defineComponent({
+  components: {
+    XTpl
+  },
+  setup() {
+    const time = ref(0)
+
+    setInterval(() => {
+      time.value++
+    }, 1000)
+
+    const CardTpl = `
+      <div>
+        <h1>CardTpl 动态模板字符串，在模板中使用</h1>
+        <h2>CardTpl 实时时间: {{time}}s</h2>
+      </div>
+    `
+
+    return {
+      time, // 注意要在此处暴露 time，否则 vm 实例上会找不到 time 渲染
+      CardTpl
+    }
+  }
+})
+</script>
+```
+
+:::
+
 ### 注意
 
 **该组件依赖于 vue 运行时 compiler**，请在打包器配置将别名（alias）指向 **vue 完整版**

packages/vue-xrender/src/components/x-tpl/index.ts

@@ -68,6 +68,14 @@ const vm = defineComponent({
     if (isVue2) {
       finalCtx.$slots = $slots
     } else {
+      if (finalCtx._) {
+        // $parent is vm, not setup sugar expose
+        const _vm = finalCtx._
+        finalCtx = {
+          ...vm.data,
+          ..._vm.setupState
+        }
+      }
       // vue3 cover $slots will throw error
       finalCtx = {
         ...finalCtx,

packages/vuepress-plugin-sandbox/src/clientConfigFile.ts

@@ -17,6 +17,10 @@ export default defineClientConfig({
       // set global css
       const styleEl = document.createElement('style')
       styleEl.innerHTML = `
+      .demo-container {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+      }
       .demo-container + .demo-container {
         margin-top: 3rem;
       }