feat(playground): support hash sync when embedded in iframe (#298)

Author: gene9831

docs/.vitepress/config.mts

@@ -1,13 +1,10 @@
-import pkg from '@opentiny/tiny-robot/package.json' with { type: 'json' }
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import { fileURLToPath } from 'url'
 import { defineConfig } from 'vitepress'
 import { vitepressDemoPlugin } from 'vitepress-demo-plugin'
-import { SidebarBadgePlugin, MarkdownBadgePlugin } from './plugins/badge'
+import { MarkdownBadgePlugin, SidebarBadgePlugin } from './plugins/badge'
 import { themeConfig } from './themeConfig'
 
-const { version } = pkg
-
 const devAlias = {
   '@opentiny/tiny-robot': fileURLToPath(new URL('../../packages/components/src', import.meta.url)),
   '@opentiny/tiny-robot-kit': fileURLToPath(new URL('../../packages/kit/src', import.meta.url)),
@@ -47,9 +44,6 @@ export default defineConfig({
         ...(process.env.VP_MODE === 'development' ? devAlias : prodAlias),
       },
     },
-    define: {
-      __TINY_ROBOT_VERSION__: JSON.stringify(version),
-    },
   },
   markdown: {
     config: (md) => {

docs/.vitepress/theme/index.ts

@@ -10,7 +10,6 @@ declare global {
     __SW_REGISTERED__?: boolean
     __CODE_PLAYGROUND_LISTENED__?: boolean
   }
-  const __TINY_ROBOT_VERSION__: string
 }
 
 export default {
@@ -80,7 +79,7 @@ function listenCodePlaygroundEvent() {
       })
     }
 
-    const tinyRobotVersion = __TINY_ROBOT_VERSION__ || 'latest'
+    const tinyRobotVersion = 'latest'
     const defaultFiles = getDefaultFiles({ tinyRobotVersion })
     const cssFile = defaultFiles.find((file) => file.filename === 'src/index.css')
     if (cssFile) {

packages/playground/src/App.vue

@@ -1,29 +1,107 @@
 <script setup lang="ts">
-import { File, Repl } from '@vue/repl'
+import { Repl } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
 import { nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 import Header from './Header.vue'
 import { generateImportMap, generateStore, getDefaultFiles, getVersions } from './utils'
 
-declare global {
-  const __TINY_ROBOT_VERSION__: string
-}
-
-const tinyRobotVersion = ref(__TINY_ROBOT_VERSION__ || 'latest')
+const tinyRobotVersion = ref('latest')
 
 const tinyRobotVersions = ref<string[]>([tinyRobotVersion.value])
+const tinyRobotLatestVersion = ref<string | undefined>(undefined)
 
 const { store, builtinImportMap } = generateStore({
   tinyRobotVersion: tinyRobotVersion.value,
   files: location.hash ? [] : getDefaultFiles({ tinyRobotVersion: tinyRobotVersion.value }),
 })
 
+// Extract TinyRobot version from import-map in store (e.g. from hash) and sync to tinyRobotVersion
+function syncTinyRobotVersionFromImportMap() {
+  type ImportMapShape = { imports?: Record<string, string> }
+  let importMap: ImportMapShape | null = null
+
+  const importMapFile = store.files['import-map.json']
+  if (importMapFile?.code) {
+    try {
+      importMap = JSON.parse(importMapFile.code) as ImportMapShape
+    } catch {
+      // ignore
+    }
+  }
+  const tinyRobotUrl = importMap?.imports?.['@opentiny/tiny-robot']
+  if (!tinyRobotUrl) return
+
+  // Match version in URL like .../tiny-robot@0.3.2/... or .../tiny-robot@latest/...
+  const match = tinyRobotUrl.match(/@opentiny\/tiny-robot@([^/]+)/)
+  const version = match?.[1]?.trim()
+  if (version) {
+    tinyRobotVersion.value = version
+  }
+}
+
+/**
+ * Trigger a full recompile of all files in the store.
+ * Use this when file contents (e.g. src/index.css) are updated in-place so that the preview
+ * picks up the changes without needing to activate the corresponding tab.
+ */
+function triggerFullRecompile() {
+  store.setFiles(store.getFiles(), store.mainFile)
+}
+
+// Listen for messages from the host app (useful when embedded in an iframe).
+const ALLOWED_ORIGINS = ['https://playground.opentiny.design'] as const
+
+function isAllowedMessageOrigin(origin: string): boolean {
+  // Allow local dev (any port) and the official playground domain.
+  if (!origin) return false
+  if (ALLOWED_ORIGINS.includes(origin as (typeof ALLOWED_ORIGINS)[number])) return true
+
+  try {
+    const url = new URL(origin)
+    const host = url.hostname.toLowerCase()
+    if (host === 'localhost' || host === '127.0.0.1') return true
+    return false
+  } catch {
+    return false
+  }
+}
+
+// 使用 document.referrer 推导父页面的 origin，在跨域场景下无法直接访问 window.parent.location
+function getParentOrigin(): string | null {
+  try {
+    const referrer = document.referrer
+    if (!referrer) return null
+    const url = new URL(referrer)
+    const origin = url.origin
+    return isAllowedMessageOrigin(origin) ? origin : null
+  } catch {
+    return null
+  }
+}
+
 if (location.hash) {
-  store.deserialize(location.hash)
+  try {
+    store.deserialize(location.hash)
+    syncTinyRobotVersionFromImportMap()
+  } catch {
+    // ignore
+  }
 }
 
-// persist state to URL hash
-watchEffect(() => history.replaceState({}, '', store.serialize()))
+// Persist state to URL hash; when in an iframe, notify the parent so it can sync the URL.
+watchEffect(() => {
+  const serialized = store.serialize()
+  history.replaceState({}, '', serialized)
+  if (window.self !== window.top) {
+    const targetOrigin = getParentOrigin()
+    if (targetOrigin) {
+      window.parent.postMessage(
+        { type: 'playground-hash-change', url: window.location.href, hash: serialized },
+        targetOrigin,
+      )
+    }
+  }
+})
 
 // Watch for TinyRobot version changes and update import map
 watch(tinyRobotVersion, async (newVersion) => {
@@ -43,28 +121,35 @@ watch(tinyRobotVersion, async (newVersion) => {
       `@opentiny/tiny-robot@${newVersion}/dist/style.css`,
     )
     if (indexCssFile.code !== updatedCss) {
-      store.addFile(new File('src/index.css', updatedCss))
+      indexCssFile.code = updatedCss
+      triggerFullRecompile()
     }
   }
 })
 
-// Load available Vue versions on component mount
+// Load available TinyRobot versions on component mount
 onMounted(async () => {
   try {
-    tinyRobotVersions.value = await getVersions('@opentiny/tiny-robot', {
+    const { versions, lastVersion } = await getVersions('@opentiny/tiny-robot', {
       includePrerelease: true,
-      includeLatest: false,
+      includeLatest: true,
     })
+    tinyRobotVersions.value = versions
+    tinyRobotLatestVersion.value = lastVersion
   } catch (error) {
-    console.error('Failed to load Vue versions:', error)
+    console.error('Failed to load TinyRobot versions:', error)
   }
 })
 </script>
 
 <template>
   <div class="playground-container">
     <!-- Header with Vue version selector -->
-    <Header v-model:tiny-robot-version="tinyRobotVersion" :tiny-robot-versions="tinyRobotVersions" />
+    <Header
+      v-model:tiny-robot-version="tinyRobotVersion"
+      :tiny-robot-versions="tinyRobotVersions"
+      :tiny-robot-latest-version="tinyRobotLatestVersion"
+    />
 
     <!-- Main playground area -->
     <main class="playground-main">

packages/playground/src/Header.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import IconGithub from './components/IconGithub.vue'
+import IconShare from './components/IconShare.vue'
+import { notify } from './utils/notify'
 
 // Define props interface for version data
 interface Props {
   tinyRobotVersions: string[]
+  tinyRobotLatestVersion?: string
 }
 
 // Define props with default values
@@ -12,6 +15,42 @@ withDefaults(defineProps<Props>(), {
 })
 
 const tinyRobotVersion = defineModel<string>('tinyRobotVersion', { required: true })
+
+// 获取分享链接
+// 1. 如果当前页面是 iframe，则使用 document.referrer 获取父页面 URL
+// 2. 如果当前页面不是 iframe，则使用当前页面 URL
+const getShareUrl = () => {
+  if (typeof window === 'undefined') return ''
+
+  const { location } = window
+  const currentHash = location.hash
+
+  try {
+    const referrer = typeof document !== 'undefined' ? document.referrer : ''
+    if (referrer) {
+      const url = new URL(referrer)
+      // 这里写死 pathname。https://playground.opentiny.design/tiny-robot.html
+      url.pathname = '/tiny-robot.html'
+      url.hash = currentHash
+      return url.toString()
+    }
+  } catch {}
+
+  return location.href
+}
+
+// Handle click on the share URL button: copy the URL to clipboard or show it as a fallback.
+const handleShareClick = async () => {
+  const url = getShareUrl()
+  if (!url) return
+
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(url)
+      notify('链接已复制到剪贴板')
+    }
+  } catch {}
+}
 </script>
 
 <template>
@@ -26,10 +65,13 @@ const tinyRobotVersion = defineModel<string>('tinyRobotVersion', { required: tru
           <label for="tiny-robot-version" class="version-label">TinyRobot 版本:</label>
           <select id="tiny-robot-version" v-model="tinyRobotVersion" class="version-select">
             <option v-for="version in tinyRobotVersions" :key="version" :value="version">
-              {{ version }}
+              {{ version }}{{ version === 'latest' && tinyRobotLatestVersion ? ` (${tinyRobotLatestVersion})` : '' }}
             </option>
           </select>
         </div>
+        <button type="button" class="share-button" @click="handleShareClick" aria-label="Copy share URL">
+          <IconShare size="20" />
+        </button>
         <a
           class="github-button"
           href="https://github.com/opentiny/tiny-robot"
@@ -83,6 +125,27 @@ const tinyRobotVersion = defineModel<string>('tinyRobotVersion', { required: tru
   gap: 1rem;
 }
 
+.share-button {
+  background: transparent;
+  border-radius: 999px;
+  color: #333;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-button:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
 .version-selector {
   display: flex;
   align-items: center;
@@ -96,6 +159,7 @@ const tinyRobotVersion = defineModel<string>('tinyRobotVersion', { required: tru
 }
 
 .version-select {
+  min-width: 130px;
   padding: 0.375rem 0.75rem;
   border: 1px solid #ced4da;
   border-radius: 0.375rem;

packages/playground/src/components/IconShare.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: string | number
+  }>(),
+  {
+    size: 24,
+  },
+)
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
+    <path d="m21 3-9 9" />
+    <path d="M15 3h6v6" />
+  </svg>
+</template>