Use TypeScript and Bun for App Stories tooling

Author: huacnlee

website/DESIGN.md

@@ -237,7 +237,7 @@ apps through PRs in [longbridge/gpui-kit-showcases](https://github.com/longbridg
 - **Manifests are the source of truth.** Each app has `apps/<app-id>/manifest.json`
   and local preview images in the Showcase repository. `author` and an English-only
   `description` are required; the project link field is `website`. The Astro pages
-  load these at build time with `src/lib/showcases.mjs` and pass serializable data
+  load these at build time with `src/lib/showcases.ts` and pass serializable data
   to the Vue app; no duplicated hard-coded app list.
 - **Screenshots show the complete window.** Authors must preserve all four corners
   and edges in a clear, tidy capture. Images are archived unchanged and referenced

website/package.json

@@ -3,12 +3,12 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "astro dev",
-    "build": "astro build && bunx pagefind --site dist",
-    "test:showcases": "bun test tests/showcases.test.mjs tests/showcase-browser.test.mjs",
-    "test:seo": "bun test tests/seo.test.mjs",
-    "preview": "astro preview",
-    "astro": "astro"
+    "dev": "bun --bun astro dev",
+    "build": "bun --bun astro build && bunx pagefind --site dist",
+    "test:showcases": "bun test tests/showcases.test.ts tests/showcase-browser.test.ts",
+    "test:seo": "bun test tests/seo.test.ts",
+    "preview": "bun --bun astro preview",
+    "astro": "bun --bun astro"
   },
   "dependencies": {
     "@astrojs/markdown-remark": "^7.3.0",

website/src/components/AppsApp.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { selectShowcases } from "../lib/showcase-browser.mjs";
+import { selectShowcases } from "../lib/showcase-browser.ts";
 import { computed, ref } from "vue";
 import { ArrowRight, ArrowUpRight, Boxes, Github, Monitor } from "lucide-vue-next";
 

website/src/components/ShowcaseDetail.astro

@@ -1,6 +1,6 @@
 ---
 import DocsLayout from '../layouts/DocsLayout.astro';
-import { getShowcaseReadme } from '../lib/showcases.mjs';
+import { getShowcaseReadme } from '../lib/showcases.ts';
 const { app, lang = 'en' } = Astro.props;
 const isZh = lang === 'zh-CN';
 const html = await getShowcaseReadme(app);

website/src/lib/showcase-browser.mjs website/src/lib/showcase-browser.tswebsite/src/lib/showcase-browser.mjs renamed to website/src/lib/showcase-browser.ts

@@ -80,13 +80,13 @@ async function catalogModule(name) {
 let catalog;
 export function getShowcaseApps() {
   return catalog ??= (async () => {
-    const { validateCatalog } = await catalogModule('validate.mjs');
+    const { validateCatalog } = await catalogModule('validate.ts');
     await validateCatalog(showcaseRoot());
     return loadShowcases(showcaseRoot());
   })();
 }
 export async function getShowcaseReadme(app) {
-  const { renderReadme } = await catalogModule('readme.mjs');
+  const { renderReadme } = await catalogModule('readme.ts');
   const markdown = await readFile(join(showcaseRoot(), 'apps', app.id, 'README.md'), 'utf8');
   return renderReadme(markdown, app, app.mediaBase);
 }

website/src/lib/showcases.mjs website/src/lib/showcases.tswebsite/src/lib/showcases.mjs renamed to website/src/lib/showcases.ts

@@ -1,6 +1,6 @@
 ---
 import DocsLayout from '../layouts/DocsLayout.astro';
-import { getShowcaseApps } from '../lib/showcases.mjs';
+import { getShowcaseApps } from '../lib/showcases.ts';
 import AppsApp from '../components/AppsApp.vue';
 const apps = await getShowcaseApps();
 ---

website/src/pages/apps.astro

@@ -1,6 +1,6 @@
 ---
 import ShowcaseDetail from '../../components/ShowcaseDetail.astro';
-import { getShowcaseApps } from '../../lib/showcases.mjs';
+import { getShowcaseApps } from '../../lib/showcases.ts';
 export async function getStaticPaths() {
   return (await getShowcaseApps()).filter(app => app.hasReadme).map(app => ({ params: { id: app.id }, props: { app } }));
 }

website/src/pages/apps/[id].astro

@@ -1,6 +1,6 @@
 ---
 import DocsLayout from '../../layouts/DocsLayout.astro';
-import { getShowcaseApps } from '../../lib/showcases.mjs';
+import { getShowcaseApps } from '../../lib/showcases.ts';
 import AppsApp from '../../components/AppsApp.vue';
 const apps = await getShowcaseApps();
 ---

website/src/pages/zh-CN/apps.astro

@@ -1,6 +1,6 @@
 ---
 import ShowcaseDetail from '../../../components/ShowcaseDetail.astro';
-import { getShowcaseApps } from '../../../lib/showcases.mjs';
+import { getShowcaseApps } from '../../../lib/showcases.ts';
 export async function getStaticPaths() {
   return (await getShowcaseApps()).filter(app => app.hasReadme).map(app => ({ params: { id: app.id }, props: { app } }));
 }