apptify 0.5.0 → 0.5.4

package/templates/playground/vite.config.ts

@@ -1,9 +1,11 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import apptifyRoutes from 'apptify/vite'
+import playgroundEditor from './tooling/playground-editor.mjs'
 
 export default defineConfig({
-  plugins: [apptifyRoutes({ dirs: [{ dir: 'playground/views', baseRoute: '' }] }), vue()],
+  optimizeDeps: { exclude: ['@vue/repl'] },
+  plugins: [playgroundEditor({ appDir: 'src', libraryDir: null }), apptifyRoutes(), vue()],
   server: { host: '127.0.0.1' },
   build: { outDir: 'dist' },
 })

package/tooling/playground-editor.mjs

@@ -0,0 +1,114 @@
+import { build } from 'esbuild'
+import { readFile } from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import { resolve } from 'node:path'
+import { existsSync } from 'node:fs'
+import { createHash } from 'node:crypto'
+import { parse, compileScript, compileStyle } from 'vue/compiler-sfc'
+
+// The editor runtime uses esbuild, so compile library SFCs just as Vite does.
+const vueComponents = {
+  name: 'vue-components',
+  setup(builder) {
+    builder.onResolve({ filter: /\.vue\?style$/ }, args => ({ path: args.path.slice(0, -6), namespace: 'vue-style' }))
+    builder.onLoad({ filter: /\.vue$/ }, async args => {
+      const { descriptor, errors } = parse(await readFile(args.path, 'utf8'), { filename: args.path })
+      if (errors.length) throw errors[0]
+      const id = createHash('sha256').update(args.path).digest('hex').slice(0, 8)
+      const scope = `data-v-${id}`
+      if (args.namespace === 'vue-style') {
+        const styles = descriptor.styles.map(style => {
+          const result = compileStyle({ source: style.content, filename: args.path, id: scope, scoped: style.scoped })
+          if (result.errors.length) throw result.errors[0]
+          return result.code
+        })
+        return { contents: styles.join('\n'), loader: 'css' }
+      }
+      const script = compileScript(descriptor, { id, inlineTemplate: true, genDefaultAs: '__component' })
+      return {
+        contents: `${script.content}\n__component.__scopeId = ${JSON.stringify(scope)};\nexport default __component;\nimport ${JSON.stringify(args.path + '?style')};`,
+        loader: 'ts', resolveDir: resolve(args.path, '..'),
+      }
+    })
+  },
+}
+
+/** Local-only resources for the official Vue REPL. No CDN or compile service. */
+export default function playgroundEditor({ appDir = 'playground', libraryDir = 'src' } = {}) {
+  let config
+  let resources
+  let rebuilding = Promise.resolve()
+  function rebuild() { rebuilding = rebuilding.catch(() => {}).then(prepare); return rebuilding }
+  async function prepare() {
+    if (libraryDir && existsSync(resolve(config.root, libraryDir, 'components/forms.ts'))) {
+      const { prepareInputSource } = await import('./prepare-input-source.mjs')
+      await prepareInputSource()
+    }
+    const require = createRequire(resolve(config.root, 'package.json'))
+    const bundle = await build({
+      absWorkingDir: config.root, entryPoints: [resolve(config.root, appDir, 'editor/runtime.ts')],
+      bundle: true, format: 'esm', platform: 'browser', external: ['vue'],
+      outfile: 'runtime.js', write: false, minify: true,
+      define: { 'process.env.NODE_ENV': '"production"' },
+      plugins: [vueComponents],
+    })
+    resources = new Map(bundle.outputFiles.map(file => [file.path.endsWith('.css') ? 'runtime.css' : 'runtime.js', file.contents]))
+    resources.set('vue.js', await readFile(require.resolve('vue/dist/vue.runtime.esm-browser.prod.js')))
+    resources.set('shims.js', await readFile(require.resolve('es-module-shims')))
+  }
+  return {
+    name: 'apptify-local-editor', enforce: 'pre',
+    configResolved(value) { config = value },
+    // Harden the official sandbox without replacing its compiler or module processing.
+    // Fail closed when upstream changes the reviewed implementation.
+    transform(code, id) {
+      if (!id.split('?')[0].replaceAll('\\', '/').endsWith('/@vue/repl/dist/vue-repl.js')) return
+      for (const permission of ['allow-forms', 'allow-modals', 'allow-pointer-lock', 'allow-popups', 'allow-same-origin', 'allow-top-navigation-by-user-activation']) {
+        const token = `"${permission}",`
+        if (!code.includes(token) && !code.includes(`"${permission}"\n`)) throw new Error('Vue REPL sandbox changed: review permissions before updating')
+        code = code.replace(token, '').replace(`"${permission}"\n`, '')
+      }
+      code = code.replace('const html = sandbox.contentDocument?.documentElement;', 'const html = null; // Opaque origin: rebuild on theme changes.')
+      code = code.replace('sandbox.contentWindow?.location.reload();', 'createSandbox();')
+      code = code.replace('\n\t\t\t\tswitchPreviewTheme();', '') // srcdoc already has the initial theme; avoid rebuilding on load.
+      return { code, map: null }
+    },
+    async handleHotUpdate(ctx) {
+      const source = libraryDir ? resolve(config.root, libraryDir) + '/' : undefined
+      if (!(source && ctx.file.startsWith(source)) && ctx.file !== resolve(config.root, appDir, 'editor/runtime.ts')) return
+      // Preview resources are an in-memory bundle, separate from Vite's normal CSS HMR.
+      // Rebuild it when library files change, then recreate the preview realm.
+      await rebuild()
+      ctx.server.ws.send({ type: 'full-reload', path: '*' })
+      return []
+    },
+    async configureServer(server) {
+      await rebuild()
+      server.middlewares.use((req, res, next) => {
+        const path = (req.url || '').split('?')[0]
+        const prefix = config.base + 'assets/editor/'
+        if (!path.startsWith(prefix)) return next()
+        const name = path.slice(prefix.length), content = resources.get(name)
+        if (!content) return next()
+        res.setHeader('Access-Control-Allow-Origin', '*')
+        res.setHeader('Cache-Control', 'no-store')
+        res.setHeader('Content-Type', name.endsWith('.css') ? 'text/css' : 'text/javascript')
+        res.end(content)
+      })
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if ((req.url || '').startsWith(config.base + 'assets/editor/')) {
+          res.setHeader('Access-Control-Allow-Origin', '*')
+          res.setHeader('Cache-Control', 'no-cache')
+        }
+        next()
+      })
+    },
+    async buildStart() {
+      if (config.command !== 'build') return
+      await prepare()
+      for (const [name, source] of resources) this.emitFile({ type: 'asset', fileName: 'assets/editor/' + name, source })
+    },
+  }
+}

package/tooling/prepare-input-source.mjs

@@ -0,0 +1,38 @@
+import { readFile, writeFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import ts from 'typescript'
+import postcss from 'postcss'
+
+// Extract the actual AppleInput declarations with TypeScript's AST. Preserve
+// implementation logic; only erase TS types and route dependencies to public ESM.
+export async function prepareInputSource() {
+  const root = new URL('../', import.meta.url)
+  const source = await readFile(new URL('src/components/forms.ts', root), 'utf8')
+  const ast = ts.createSourceFile('forms.ts', source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS)
+  const names = ['fieldProps', 'FieldVm', 'fieldId', 'controlAttrs', 'field', 'spinner', 'stringValue', 'AppleInput']
+  const declarations = new Map()
+  for (const statement of ast.statements) {
+    const name = ts.isVariableStatement(statement) ? statement.declarationList.declarations[0]?.name.getText(ast) : statement.name?.getText(ast)
+    if (names.includes(name)) declarations.set(name, statement.getText(ast))
+  }
+  for (const name of names) if (!declarations.has(name)) throw new Error(`AppleInput source changed: missing ${name}`)
+  const script = [
+    "import { defineComponent, h, useId, type PropType, type Slots, type VNodeChild } from 'vue'",
+    "import { ripple } from 'apptify'",
+    "import { Eye, EyeOff, LoaderCircle, X } from 'lucide-vue-next'",
+    ...names.map(name => declarations.get(name)),
+    'export default AppleInput',
+  ].join('\n\n')
+  const js = ts.transpileModule(script, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext } }).outputText
+  const cssAst = postcss.parse(await readFile(new URL('src/styles/forms.css', root), 'utf8'))
+  const boundary = cssAst.nodes.findIndex(node => node.type === 'rule' && node.selector === '.apple-textarea')
+  if (boundary < 0) throw new Error('Input CSS section changed: review source extraction')
+  const css = cssAst.nodes.slice(0, boundary).map(node => node.toString()).join('\n')
+  const code = `<!-- AppleInput 同源实现：src/components/forms.ts + src/styles/forms.css。\n只移除 TypeScript 类型并转接浏览器公开依赖，保留 Options API/render 实现。 -->\n<script>\n${js}</script>\n\n<style>\n${css}\n</style>\n`
+  const destination = new URL('playground/editor/apple-input-source.ts', root)
+  const snapshot = '// Generated by tooling/prepare-input-source.mjs; do not edit the snapshot by hand.\nexport default ' + JSON.stringify(code) + '\n'
+  // Do not trigger a hot update during dev-server startup for unchanged data.
+  const previous = await readFile(destination, 'utf8').catch(() => undefined)
+  if (previous !== snapshot) await writeFile(destination, snapshot)
+}
+if (process.argv[1] === fileURLToPath(import.meta.url)) await prepareInputSource()

package/tooling/prepare-playground.mjs

@@ -3,22 +3,32 @@ import { basename, join, relative } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { createHash } from 'node:crypto'
 
+import { prepareInputSource } from './prepare-input-source.mjs'
+await prepareInputSource()
 const root = fileURLToPath(new URL('../', import.meta.url))
 const output = join(root, 'templates/playground')
 const library = JSON.parse(await readFile(join(root, 'package.json'), 'utf8'))
 await rm(output, { recursive: true, force: true })
 await mkdir(output, { recursive: true })
 const copyOptions = { recursive: true, filter: source => basename(source) !== '.DS_Store' }
-await cp(join(root, 'playground'), join(output, 'playground'), copyOptions)
+await cp(join(root, 'playground'), join(output, 'src'), copyOptions)
 await cp(join(root, 'public'), join(output, 'public'), copyOptions)
-await cp(join(root, 'index.html'), join(output, 'index.html'))
+await writeFile(join(output, 'index.html'), (await readFile(join(root, 'index.html'), 'utf8')).replace('/playground/main.ts', '/src/main.ts'))
+await mkdir(join(output, 'tooling'), { recursive: true })
+await cp(join(root, 'tooling/prepare-input-source.mjs'), join(output, 'tooling/prepare-input-source.mjs'))
+await cp(join(root, 'tooling/playground-editor.mjs'), join(output, 'tooling/playground-editor.mjs'))
 
-const snapshot = { createdAt: new Date().toISOString(), libraryVersion: library.version, files: {} }
+const snapshot = { createdAt: new Date().toISOString(), libraryVersion: library.version, files: {}, sourcePaths: {} }
 async function record(directory) {
   for (const entry of await readdir(directory, { withFileTypes: true })) {
     const path = join(directory, entry.name)
     if (entry.isDirectory()) await record(path)
-    else snapshot.files[relative(output, path)] = createHash('sha256').update(await readFile(path)).digest('hex')
+    else {
+      const key = relative(output, path).replaceAll('\\', '/')
+      const sourcePath = key.startsWith('src/') ? 'playground/' + key.slice(4) : key
+      snapshot.sourcePaths[key] = sourcePath
+      snapshot.files[key] = createHash('sha256').update(await readFile(join(root, sourcePath))).digest('hex')
+    }
   }
 }
 await record(output)
@@ -32,14 +42,15 @@ async function adapt(directory) {
       let source = await readFile(path, 'utf8')
       source = source.replace(/(['"])(?:\.\.\/)+src(?:\/(?:index|core\/motion|core\/context|components\/content))?\1/g, "'apptify'")
       if (/(['"])(?:\.\.\/)+src(?:\/[^'"]*)?\1/.test(source)) throw new Error('Unmapped private library import: ' + path)
+      if (path === join(output, 'src/editor/runtime.ts')) source = "import 'apptify/style.css'\n" + source
       if (entry.name === 'main.ts') source = "import 'apptify/style.css'\n" + source
-      if (path === join(output, 'playground/App.vue')) {
+      if (path === join(output, 'src/App.vue')) {
         const navigationEnd = ']\n\nfunction navigate'
         if (!source.includes(navigationEnd)) throw new Error('App navigation layout changed; update template adaptation')
         source = source.replace('to="/" aria-label="Apptify 首页"', ':to="homePath" aria-label="Apptify 首页"')
         source = source.replace(navigationEnd, "].filter(item => router.getRoutes().some(page => page.path === item.href))\nconst homePath = navigation[0]?.href ?? '/'\n\nfunction navigate")
       }
-      if (path === join(output, 'playground/views/[...all].vue')) {
+      if (path === join(output, 'src/views/[...all].vue')) {
         source = source.replace('to="/" custom', ':to="homePath" custom')
         source = source.replace('const router = useRouter()', "const router = useRouter()\nconst homePath = router.getRoutes().some(page => page.path === '/') ? '/' : '/settings'")
         source = source.replace("else void router.push('/')", 'else void router.push(homePath)')
@@ -48,7 +59,7 @@ async function adapt(directory) {
     }
   }
 }
-await adapt(join(output, 'playground'))
+await adapt(join(output, 'src'))
 const manifest = {
   name: 'apptify-app', version: '0.0.0', private: true, type: 'module',
   scripts: { dev: 'vite', typecheck: 'vue-tsc --noEmit', build: 'vue-tsc --noEmit && vite build', preview: 'vite preview --host 127.0.0.1' },
@@ -57,19 +68,21 @@ const manifest = {
     'vue-router': library.devDependencies['vue-router'], vuetify: library.peerDependencies.vuetify,
     'lucide-vue-next': library.dependencies['lucide-vue-next'],
   },
-  devDependencies: Object.fromEntries(['@vitejs/plugin-vue', 'typescript', 'vite', 'vite-plugin-pages', 'vue-tsc'].map(name => [name, library.devDependencies[name]])),
+  devDependencies: Object.fromEntries(['@vitejs/plugin-vue', 'typescript', 'vite', 'vite-plugin-pages', 'vue-tsc', '@vue/repl', 'es-module-shims', 'esbuild', 'postcss'].map(name => [name, library.devDependencies[name]])),
 }
 await writeFile(join(output, 'package.json'), JSON.stringify(manifest, null, 2) + '\n')
 const tsconfig = JSON.parse(await readFile(join(root, 'tsconfig.json'), 'utf8'))
-tsconfig.include = ['playground/**/*.ts', 'playground/**/*.vue']
+tsconfig.include = ['src/**/*.ts', 'src/**/*.vue']
 await writeFile(join(output, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2) + '\n')
 await writeFile(join(output, 'vite.config.ts'), [
   "import { defineConfig } from 'vite'",
   "import vue from '@vitejs/plugin-vue'",
   "import apptifyRoutes from 'apptify/vite'",
+  "import playgroundEditor from './tooling/playground-editor.mjs'",
   '',
   'export default defineConfig({',
-  "  plugins: [apptifyRoutes({ dirs: [{ dir: 'playground/views', baseRoute: '' }] }), vue()],",
+  "  optimizeDeps: { exclude: ['@vue/repl'] },",
+  "  plugins: [playgroundEditor({ appDir: 'src', libraryDir: null }), apptifyRoutes(), vue()],",
   "  server: { host: '127.0.0.1' },",
   "  build: { outDir: 'dist' },",
   '})', '',
@@ -77,14 +90,27 @@ await writeFile(join(output, 'vite.config.ts'), [
 // npm excludes .gitignore from tarballs; the copy command restores its dot.
 await writeFile(join(output, 'gitignore'), 'node_modules/\ndist/\n.env.local\n')
 await writeFile(join(output, 'README.md'), [
-  '# Apptify 可编辑应用模板', '',
-  '完整源码位于 playground/，静态图片与来源说明位于 public/images/。导航、账号/登录、设置、404 和页面动效均可直接编辑复用。', '',
-  '通过 apptify-playground 复制命令创建时，vendor/ 包含本地组件库 tgz，package.json 使用相对 file: 依赖；移动整个项目后仍可独立安装。', '',
-  '运行 npm install、npm run typecheck、npm run build；开发使用 npm run dev。请使用 Node.js 22 或 24 LTS。', '',
-  '开始业务开发可直接删除 playground/views/index.vue 和 playground/views/components.vue，再添加自己的页面；文件路由自动生成，导航自动隐藏已删除页面，品牌链接回到第一个保留的导航页面。删除页面后重启开发服务。', '',
-  '导航项在 playground/App.vue 的 navigation 数组；页面文件在 playground/views/；布局和账号入口在 App.vue 与 playground/components/UserMenu.vue。', '',
-  '设置保留主题、动效与玻璃偏好。404 在 playground/views/[...all].vue；首页和组件总览没有被其他页面硬导入。ComponentDemo.vue、catalog.ts 和 ComponentIndex.vue 可以保留，也可在删除总览页后按需删除。', '',
-  '登录、注册、忘记密码、邮箱验证码仍为 UI 演示入口，需要接入自己的后端。部署采用 history 路由，服务器应把未知页面路径回退到 index.html。', '',
-  '若手工复制包内 templates/playground，先将 package.json 的 apptify 依赖替换为实际本地 tgz 路径，或安装自己的正式发布版本；当前项目尚未发布 npm。', '',
+  "# Apptify 应用模板",
+  "",
+  "可编辑的 Vue 应用，包含导航、账号表单、外观设置、404 与组件示例。建议 Node.js 22 或 24 LTS。",
+  "",
+  "```sh",
+  "npm install",
+  "npm run dev",
+  "```",
+  "",
+  "检查：`npm run typecheck`、`npm run build`。",
+  "",
+  "- 页面：`src/views/`，文件路由自动生成。",
+  "- 布局与导航：`src/App.vue` 的 `navigation` 数组。",
+  "- 账号表单：`src/components/UserMenu.vue`，需要接入自己的后端。",
+  "- 样式：`src/style.css`；图片与来源：`public/images/`。",
+  "",
+  "可删除 `views/index.vue` 和 `views/components.vue`，再添加业务页面；删除后重启开发服务。删除组件总览后，可一并删除 `ComponentDemo.vue`、`catalog.ts` 和 `components/ComponentIndex.vue`。",
+  "",
+  "复制命令在 `vendor/` 保存库归档，移动整个项目后仍可独立安装。使用 npm 更新库：`npm install apptify@latest`。手工复制模板时，将 `gitignore` 重命名为 `.gitignore`。",
+  "",
+  "部署时将页面请求回退到 `index.html`，保留 API 与静态资源路由。",
+  "",
 ].join('\n'))
 console.log('Prepared editable playground template: ' + output)

package/tooling/test-create-apptify.mjs

@@ -0,0 +1,86 @@
+import assert from 'node:assert/strict'
+import { mkdir, mkdtemp, readFile, readdir, rm, symlink, writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { tmpdir } from 'node:os'
+import { fileURLToPath } from 'node:url'
+import { execFileSync, spawnSync } from 'node:child_process'
+
+const root = fileURLToPath(new URL('../', import.meta.url))
+const scratch = await mkdtemp(join(tmpdir(), 'create-apptify-test-'))
+const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm'
+const env = { ...process.env, npm_config_cache: join(scratch, 'cache'), npm_config_offline: 'true' }
+const installer = join(scratch, 'installer')
+const creator = join(installer, 'node_modules/create-apptify')
+const library = join(installer, 'node_modules/apptify')
+const cli = join(creator, 'bin/create-apptify.mjs')
+
+async function unpack(cwd, destination) {
+  const packed = JSON.parse(execFileSync(npm, ['pack', '--ignore-scripts', '--json', '--pack-destination', scratch], { cwd, env, encoding: 'utf8' }))[0]
+  await mkdir(destination, { recursive: true })
+  execFileSync('tar', ['-xzf', join(scratch, packed.filename), '--strip-components=1', '-C', destination])
+  return packed
+}
+
+try {
+  // Use real tarballs in an installed layout, without fetching dependencies.
+  // The generator only reads/copies the library; it never imports its Vue code.
+  const packed = await unpack(join(root, 'packages/create-apptify'), creator)
+  const files = new Set(packed.files.map(file => file.path))
+  for (const path of ['package.json', 'bin/create-apptify.mjs', 'README.md', 'LICENSE']) assert(files.has(path), 'Missing creator file: ' + path)
+  await unpack(root, library)
+  await mkdir(join(installer, 'node_modules/.bin'))
+  await symlink('../create-apptify/bin/create-apptify.mjs', join(installer, 'node_modules/.bin/create-apptify'))
+  await writeFile(join(installer, 'package.json'), JSON.stringify({ private: true, dependencies: { 'create-apptify': packed.version } }) + '\n')
+
+  const run = (args, cwd = installer) => spawnSync(process.execPath, [cli, ...args], { cwd, env, encoding: 'utf8' })
+  const help = run(['--help'])
+  assert.equal(help.status, 0, help.stderr)
+  assert.match(help.stdout, /npm create apptify@latest/)
+  assert.equal(run([]).status, 1)
+  assert.match(run([]).stderr, /Destination must be empty/)
+  assert.equal(run(['--unknown']).status, 1)
+  assert.equal(run(['one', 'two']).status, 1)
+
+  const app = join(scratch, 'my app')
+  const result = spawnSync(npm, ['create', 'apptify', '--offline', '--', app], { cwd: installer, env, encoding: 'utf8', timeout: 60_000 })
+  assert.equal(result.status, 0, result.stdout + result.stderr)
+  const manifest = JSON.parse(await readFile(join(app, 'package.json'), 'utf8'))
+  assert.match(manifest.dependencies.apptify, /^file:\.\/vendor\/apptify-/)
+  assert.match(await readFile(join(app, '.gitignore'), 'utf8'), /node_modules/)
+  await readFile(join(app, 'src/App.vue'))
+  assert(!(await readdir(app)).includes('playground'), 'Generated app must use src/')
+  assert.match(await readFile(join(app, 'index.html'), 'utf8'), /src="\/src\/main\.ts"/)
+  assert.deepEqual(JSON.parse(await readFile(join(app, 'tsconfig.json'), 'utf8')).include, ['src/**/*.ts', 'src/**/*.vue'])
+  const archive = join(app, manifest.dependencies.apptify.slice('file:./'.length))
+  const portableManifest = JSON.parse(execFileSync('tar', ['-xOf', archive, 'package/package.json'], { encoding: 'utf8' }))
+  assert.equal(portableManifest.name, 'apptify')
+
+  const before = await readFile(join(app, 'package.json'), 'utf8')
+  const refused = run([app])
+  assert.equal(refused.status, 1)
+  assert.match(refused.stderr, /Destination must be empty/)
+  assert.equal(await readFile(join(app, 'package.json'), 'utf8'), before)
+  assert.equal(run([join(library, 'unsafe')]).status, 1)
+  const alias = join(scratch, 'library-alias')
+  await symlink(library, alias, 'dir')
+  assert.equal(run([join(alias, 'unsafe')]).status, 1)
+
+  const empty = join(scratch, 'existing-empty')
+  await mkdir(empty)
+  const copied = run([empty])
+  assert.equal(copied.status, 0, copied.stderr)
+  await readFile(join(empty, 'src/App.vue'))
+  const current = join(scratch, 'current-directory')
+  await mkdir(current)
+  const defaultTarget = run([], current)
+  assert.equal(defaultTarget.status, 0, defaultTarget.stderr)
+  await readFile(join(current, 'src/router/index.ts'))
+  assert.match(JSON.parse(await readFile(join(current, 'package.json'), 'utf8')).dependencies.apptify, /^file:\.\/vendor\//)
+  await rm(installer, { recursive: true, force: true })
+  execFileSync('tar', ['-t', '-f', archive])
+  console.log('create-apptify: packed CLI, npm create, portable archive, help, argument validation and overwrite protection passed.')
+  await rm(scratch, { recursive: true, force: true })
+} catch (error) {
+  console.error('Acceptance workspace retained: ' + scratch)
+  throw error
+}

package/tooling/test-playground-package.mjs

@@ -5,7 +5,7 @@ import { tmpdir } from 'node:os'
 import { createHash } from 'node:crypto'
 import { execFileSync, spawn } from 'node:child_process'
 import { fileURLToPath } from 'node:url'
-import { chromium } from '@playwright/test'
+import { chromium, expect } from '@playwright/test'
 
 const root = fileURLToPath(new URL('../', import.meta.url))
 const scratch = await mkdtemp(join(tmpdir(), 'apptify-package-'))
@@ -123,6 +123,12 @@ try {
     assert.equal(await image.evaluate(async image => { await image.decode(); return image.naturalWidth > 0 }), true)
     await page.locator('.component-index [aria-current]').first().waitFor()
   })
+  await checkPage(server.url, '/component-docs/apple-input', async page => {
+    const frame = page.frameLocator('[data-testid="input-playground"] .vue-repl iframe')
+    await expect(frame.locator('.apple-input-wrap input').first()).toBeVisible()
+    await frame.locator('.apple-input-wrap input').first().fill('Template src preview')
+    await expect(frame.locator('.apple-input-wrap input').first()).toHaveValue('Template src preview')
+  })
   await checkPage(server.url, '/settings', async page => {
     await page.setViewportSize({ width: 320, height: 900 })
     await page.getByRole('button', { name: '深色', exact: true }).click()
@@ -150,12 +156,12 @@ try {
   server.stop()
   server = undefined
 
-  await rm(join(app, 'playground/views/index.vue'))
-  await rm(join(app, 'playground/views/components.vue'))
+  await rm(join(app, 'src/views/index.vue'))
+  await rm(join(app, 'src/views/components.vue'))
   // These files only served the removed overview page. Deleting them must be optional.
-  await rm(join(app, 'playground/ComponentDemo.vue'))
-  await rm(join(app, 'playground/catalog.ts'))
-  await rm(join(app, 'playground/components/ComponentIndex.vue'))
+  await rm(join(app, 'src/ComponentDemo.vue'))
+  await rm(join(app, 'src/catalog.ts'))
+  await rm(join(app, 'src/components/ComponentIndex.vue'))
   run(['run', 'typecheck'], app)
   run(['run', 'build'], app)
   server = await serve()
@@ -178,7 +184,7 @@ try {
   await browser.close()
 }
 for (const [path, hash] of Object.entries(snapshot.files)) {
-  assert.equal(createHash('sha256').update(await readFile(join(root, path))).digest('hex'), hash, 'Source changed during packing; rerun for its latest snapshot: ' + path)
+  assert.equal(createHash('sha256').update(await readFile(join(root, snapshot.sourcePaths?.[path] ?? path))).digest('hex'), hash, 'Source changed during packing; rerun for its latest snapshot: ' + path)
 }
 for (const [path, hash] of Object.entries(snapshot.buildSources || {})) {
   assert.equal(createHash('sha256').update(await readFile(join(root, path))).digest('hex'), hash, 'Build source changed after this archive was created; pack the latest version: ' + path)

package/templates/playground/playground/components/ComponentIndex.vue

@@ -1,62 +0,0 @@
-<template>
-  <nav class="component-index" aria-label="组件定位">
-    <AppleTree :items="treeItems" :model-value="activeId || activeGroup" :expanded="expandedGroups" label="组件目录树" @update:expanded="expanded = $event" @select="navigate">
-      <template #item="{ item }">
-        <router-link :to="`/components#${item.value}`" :class="['index-link', { 'index-group': item.children, active: activeId === item.value || (item.children && activeGroup === item.value) }]" :aria-current="activeId === item.value ? 'location' : undefined" tabindex="-1" @click.prevent>
-          <component :is="icons[item.label]" v-if="item.children" :size="15" aria-hidden="true" />
-          <span>{{ item.label }}</span><small v-if="item.children">{{ item.children.length }}</small>
-        </router-link>
-      </template>
-    </AppleTree>
-    <p v-if="!treeItems.length" class="index-empty" role="status">未找到组件，请尝试其他关键词。</p>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { Bell, Box, MousePointer2, Smartphone, Table2, TextCursorInput } from 'lucide-vue-next'
-import { AppleTree } from 'apptify'
-import type { AppleTreeItem, AppleValue } from 'apptify'
-import { sections, componentId } from '../catalog'
-
-const props = defineProps<{ activeGroup: string; activeId: string; search?: string }>()
-const emit = defineEmits<{ navigate: [] }>()
-const router = useRouter()
-const route = useRoute()
-const expanded = ref<AppleValue[]>([props.activeGroup])
-const icons: Record<string, typeof Box> = { '基础': Box, '表单': TextCursorInput, '导航': MousePointer2, '数据展示': Table2, '反馈': Bell, '移动交互': Smartphone }
-const query = computed(() => props.search?.trim().toLocaleLowerCase() ?? '')
-const treeItems = computed<AppleTreeItem[]>(() => sections.flatMap(section => {
-  const groupMatches = section.label.toLocaleLowerCase().includes(query.value)
-  const items = section.items.filter(item => groupMatches || `${item.label} ${item.name} ${componentId(item.name)} ${item.description}`.toLocaleLowerCase().includes(query.value))
-  return items.length ? [{ label: section.label, value: section.id, children: items.map(item => ({ label: item.label, value: componentId(item.name) })) }] : []
-}))
-const expandedGroups = computed(() => query.value ? treeItems.value.map(item => item.value) : expanded.value)
-watch(() => props.activeGroup, group => {
-  if (!expanded.value.includes(group)) expanded.value = [...expanded.value, group]
-})
-function navigate(item: AppleTreeItem) {
-  const hash = `#${item.value}`
-  if (route.hash === hash) {
-    const target = document.getElementById(String(item.value))
-    if (target) window.scrollTo({ top: target.getBoundingClientRect().top + window.scrollY - 96, behavior: 'instant' })
-  } else void router.push(`/components${hash}`)
-  emit('navigate')
-}
-</script>
-
-<style scoped>
-.component-index { min-width: 0; }
-.component-index :deep(.apple-tree__row) { min-height: 38px; gap: 0; font-size: 12px; border-radius: 6px; }
-.component-index :deep(.apple-tree__toggle), .component-index :deep(.apple-tree__spacer) { flex-basis: 24px; width: 24px; height: 34px; }
-.component-index .index-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 8px 4px; font-size: 12px; color: inherit; text-decoration: none; }
-.component-index .index-group { border-radius: 0; }
-/* The tree row owns the fade; avoid a second, smaller hover background on its link. */
-.component-index .index-link:hover { background: transparent; }
-.index-link > span { flex: 1; overflow-wrap: anywhere; }
-.index-link > svg { flex-shrink: 0; }
-.index-link.active { color: var(--apple-text); font-weight: 600; }
-.index-link small { font-size: 10px; color: var(--apple-secondary); font-variant-numeric: tabular-nums; }
-.index-empty { margin: 12px 8px; font-size: 12px; line-height: 1.7; color: var(--apple-secondary); }
-</style>

package/templates/playground/playground/components/PageFooter.vue

@@ -1,3 +0,0 @@
-<template>
-  <footer class="page-footer"><span>Apptify</span><span>Write your own footer here</span></footer>
-</template>

package/templates/playground/playground/views/components.vue

@@ -1,126 +0,0 @@
-<template>
-  <apple-aside class="sidebar" aria-label="组件目录">
-    <div class="sidebar-heading"><strong>组件目录</strong><span>点击定位，直接预览</span></div>
-    <div class="directory-search"><apple-search v-model="directorySearch" label="搜索组件目录" placeholder="名称、标签或描述" /></div>
-    <ComponentIndex :active-group="activeGroup" :active-id="activeId" :search="directorySearch" />
-  </apple-aside>
-  <main class="main-content components-page">
-    <header class="page-heading"><div><div class="page-kicker">COMPONENTS</div><h1>组件<span>。</span></h1><p>{{ catalog.length }} 个组件，完整呈现。向下浏览，直接体验。</p></div></header>
-    <div class="feed-toolbar">
-      <apple-button class="mobile-index-toggle" variant="ghost" size="small" :icon="PanelLeft" @click="mobileIndex = true">组件目录</apple-button>
-      <span class="feed-count">全部组件 <small>{{ catalog.length }}</small></span>
-      <div class="preview-controls" role="group" aria-label="预览尺寸">
-        <apple-button variant="ghost" size="small" icon-only :icon="Monitor" :class="{ active: previewMode === 'desktop' }" :aria-pressed="previewMode === 'desktop'" label="桌面预览" @click="previewMode = 'desktop'" />
-        <apple-button variant="ghost" size="small" icon-only :icon="Smartphone" :class="{ active: previewMode === 'mobile' }" :aria-pressed="previewMode === 'mobile'" label="手机预览" @click="previewMode = 'mobile'" />
-      </div>
-    </div>
-    <div ref="feed" class="component-feed">
-      <section v-for="(section, index) in sections" :id="section.id" :key="section.id" class="feed-group feed-anchor" :data-group="section.id" :aria-labelledby="`${section.id}-heading`">
-        <header class="feed-group-heading"><span>0{{ index + 1 }}</span><h2 :id="`${section.id}-heading`">{{ section.label }}</h2><small>{{ section.items.length }} 个组件</small></header>
-        <article v-for="item in section.items" :id="componentId(item.name)" :key="item.name" class="component-card feed-anchor" :data-group="section.id" :aria-labelledby="`${componentId(item.name)}-heading`">
-          <header class="component-card-heading"><div><h3 :id="`${componentId(item.name)}-heading`"><router-link :to="`#${componentId(item.name)}`">{{ item.label }}<Hash :size="14" /></router-link></h3><p>{{ item.description }}</p></div><code>{{ componentId(item.name) }}</code></header>
-          <section class="detail-preview" :class="{ 'mobile-preview': previewMode === 'mobile' }" :aria-label="`${item.label}预览`"><ComponentDemo :name="item.name" @navigate="navigateGroup" /></section>
-          <apple-accordion class="component-source" :items="sourceSections">
-            <template #item>
-              <div class="code-view"><div class="code-toolbar"><span>使用示例</span><apple-button variant="ghost" size="small" @click="copy(item.code)">复制代码</apple-button></div><pre><code>{{ item.code }}</code></pre><h4>接口</h4><p class="api-line">{{ item.api }}</p></div>
-            </template>
-          </apple-accordion>
-        </article>
-      </section>
-    </div>
-    <PageFooter />
-  </main>
-  <apple-drawer v-model="mobileIndex" title="组件目录" placement="left" width="290px">
-    <div class="directory-search"><apple-search v-model="directorySearch" label="搜索组件目录" placeholder="名称、标签或描述" /></div>
-    <ComponentIndex :active-group="activeGroup" :active-id="activeId" :search="directorySearch" @navigate="mobileIndex = false" />
-  </apple-drawer>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { Hash, Monitor, PanelLeft, Smartphone } from 'lucide-vue-next'
-import { useApple } from 'apptify'
-import { catalog, sections, componentId } from '../catalog'
-import ComponentDemo from '../ComponentDemo.vue'
-import ComponentIndex from '../components/ComponentIndex.vue'
-import PageFooter from '../components/PageFooter.vue'
-
-const route = useRoute()
-const router = useRouter()
-const apple = useApple()
-const feed = ref<HTMLElement>()
-const activeGroup = ref(sections[0].id)
-const activeId = ref('')
-const previewMode = ref('desktop')
-const mobileIndex = ref(false)
-const directorySearch = ref('')
-const sourceSections = [{ label: '代码与 API', value: 'source' }]
-let anchors: HTMLElement[] = []
-let frame = 0
-let observer: ResizeObserver | undefined
-
-function updatePosition() {
-  frame = 0
-  let current: HTMLElement | undefined
-  for (const anchor of anchors) {
-    if (anchor.getBoundingClientRect().top > 128) break
-    if (!current || Math.abs(anchor.getBoundingClientRect().top - current.getBoundingClientRect().top) > 1) current = anchor
-    else if (anchor.id === route.hash.slice(1) || (current.id !== route.hash.slice(1) && anchor.id === activeId.value)) current = anchor
-  }
-  activeId.value = current?.id ?? ''
-  activeGroup.value = current?.dataset.group ?? sections[0].id
-}
-function schedulePosition() {
-  if (!frame) frame = requestAnimationFrame(updatePosition)
-}
-function navigateGroup(label: string) {
-  const section = sections.find(section => section.label === label)
-  void router.push(section ? `/components#${section.id}` : '/components')
-}
-async function copy(value: string) {
-  try { await navigator.clipboard.writeText(value); apple.notify('已复制', { tone: 'success' }) }
-  catch { apple.notify('无法访问剪贴板，请手动选择代码复制', { tone: 'warning' }) }
-}
-watch(() => route.hash, () => { mobileIndex.value = false; schedulePosition() })
-watch(activeId, async () => {
-  await nextTick()
-  const sidebar = document.querySelector<HTMLElement>('.sidebar')
-  const current = sidebar?.querySelector<HTMLElement>('[aria-current="location"]')
-  if (!sidebar || !current) return
-  const item = current.getBoundingClientRect(), bounds = sidebar.getBoundingClientRect()
-  if (item.top < bounds.top + 16) sidebar.scrollTop -= bounds.top + 16 - item.top
-  else if (item.bottom > bounds.bottom - 16) sidebar.scrollTop += item.bottom - bounds.bottom + 16
-})
-onMounted(() => {
-  anchors = Array.from(feed.value!.querySelectorAll<HTMLElement>('.feed-anchor'))
-  window.addEventListener('scroll', schedulePosition, { passive: true })
-  window.addEventListener('resize', schedulePosition)
-  observer = new ResizeObserver(schedulePosition)
-  observer.observe(feed.value!)
-  schedulePosition()
-})
-onBeforeUnmount(() => {
-  window.removeEventListener('scroll', schedulePosition)
-  window.removeEventListener('resize', schedulePosition)
-  observer?.disconnect()
-  cancelAnimationFrame(frame)
-})
-</script>
-
-<style scoped>
-.directory-search { min-width: 0; margin: 0 4px 16px; }
-.directory-search :deep(.apple-field__label) { font-size: 11px; }
-.directory-search :deep(input) { min-width: 0; font-size: 12px; }
-.components-page > * { max-width: none; }
-.feed-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 20px; align-items: start; }
-.feed-group-heading { grid-column: 1 / -1; padding-bottom: 0; }
-.component-card { margin-bottom: 0; }
-.component-source :deep(.apple-accordion__item) { border: 0; }
-.component-source :deep(.apple-accordion__item > h3) { font-size: 11px; font-weight: 400; }
-.component-source :deep(.apple-accordion__item > h3 > button) { min-height: 44px; gap: 8px; padding: 13px 28px; color: var(--apple-secondary); }
-.component-source :deep(.apple-accordion__content) { padding: 0; }
-@media (max-width: 800px) {
-  .component-source :deep(.apple-accordion__item > h3 > button) { padding-inline: 18px; }
-}
-</style>