mirror of
https://github.com/lobehub/lobehub.git
synced 2026-09-20 04:56:13 +08:00
Innei
2df9829a5e
* ✨ feat(share): extract share pages into a standalone SSR micro app `/share/t/:id` and `/share/page/:id` were client-only routes inside the main SPA, so a shared link opened on a blank shell and link previews carried the generic app card. They now live in `apps/share`, built the same way as `apps/workbench`: a React Router framework-mode app that server-renders on a Cloudflare Worker for cloud, plus a plain SPA build that Next serves for self-hosted deployments. What the server renders is the shell, the hero and a complete meta set — title, description and the OG/Twitter card — resolved from the route loader through a per-request tRPC client. The conversation and page-viewer stacks stay on the client: `clientOnly()` gates them and, in the SSR environment, a resolver stub cuts every `*.client` module out of the worker graph entirely. Gating the render alone does not help, because the dynamic import still pulls the graph into the bundle. Keeping that worker deployable took three more cuts, each found by tracing the module graph rather than guessing: - `@/store/user` is stubbed for SSR — `GroupAvatar` reads the viewer profile, and the store drags the model catalog and every provider behind it (39MB→19MB) - `shiki` and `shiki/wasm` are stubbed for SSR — the `@lobehub/ui` barrel reads the bundled-language catalog at module scope, registering ~400 grammars for a highlighter the server never runs (19MB→7.6MB, 1.78MB gzip) - SSR i18n resolves only the namespaces the shell renders; the generic loader would register every locale x namespace pair as a worker chunk The conversation list keeps its `headerSlot` while it shows the skeleton. It returned early before, so mounting the list to fetch blanked a title the server had already rendered. `/share` is removed from the desktop and mobile routers and rewritten by the Next middleware to `/spa-share/<locale>/…`, mirroring how `/verify` reaches workbench. The cloud worker is published from lobehub-cloud, which builds this same app against its business overlay, so this repo ships no deploy workflow for it. * 🐛 fix(share): preload the error namespace so the boundary renders translated The root ErrorBoundary reaches for the `error` namespace, which SSR did not bundle, so a failed share page rendered `error.title error.desc error.retry` verbatim. Fetching it on demand does not fix that case: a chunk-load failure is exactly when the client can never load the dictionary to correct itself. * 🐛 fix(share): drop the dev template fetch that served the main SPA The handler asked the main Vite server for `/index.share.html`, which does not exist at the repo root. Vite answers that with the HTML fallback — 200, main SPA shell — so `/share/*` in `bun run dev` silently booted an app that no longer has those routes. Share is developed against its own Vite server, so the branch goes rather than the file being added. `spaDevShells.test.ts` guards both directions: every remaining dev template must exist at the root and point at its own app entry, and share must not reintroduce one. * 📝 docs(skill): record the cloud-overlay split in split-micro-app Share is the second micro app and the first whose rendering code lives in the lobehub-cloud business overlay, so the skill needed the ownership rules that decides which repo builds and deploys, and the Vite 8 tsconfig-nearest-importer landmine that makes an overlay build ship the open-source fallback with a green build. Also folds in what the extraction turned up: the full Docker chain, the dev shell that answers 200 with the wrong app, shiki and @lobehub/ui bundle cuts, the error namespace, hydration and virtualized-prefill rules, the asset prefix convention, and the prod promote gate.
60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
|
|
import path from 'node:path';
|
|
|
|
import { describe, expect, it } from 'vitest';
|
|
|
|
const root = path.resolve(import.meta.dirname, '..');
|
|
|
|
const walk = (dir: string): string[] =>
|
|
readdirSync(dir).flatMap((entry) => {
|
|
const target = path.join(dir, entry);
|
|
|
|
if (statSync(target).isDirectory()) return walk(target);
|
|
|
|
return target.endsWith('route.ts') ? [target] : [];
|
|
});
|
|
|
|
const devShells = walk(path.resolve(root, 'src/app'))
|
|
.flatMap((file) => {
|
|
const source = readFileSync(file, 'utf8');
|
|
|
|
return [...source.matchAll(/fetchViteDevTemplate\('(\/[^']+\.html)'\)/g)].map((match) => ({
|
|
file: path.relative(root, file),
|
|
template: match[1]!,
|
|
}));
|
|
})
|
|
.sort((a, b) => a.template.localeCompare(b.template));
|
|
|
|
const entrySrc = (html: string) =>
|
|
html.match(/<script type="module" src="([^"]+)"><\/script>/)?.[1];
|
|
|
|
describe('dev SPA shells', () => {
|
|
it('finds every route handler that fetches a named dev template', () => {
|
|
expect(devShells.map((shell) => shell.template)).toEqual([
|
|
'/index.auth.html',
|
|
'/index.workbench.html',
|
|
]);
|
|
});
|
|
|
|
// Vite falls back to the main `index.html` for a missing root shell, so a typo
|
|
// or a forgotten file boots the main SPA under the micro app's URL instead of
|
|
// failing — silently, and only in dev.
|
|
it.each(devShells)('$template exists at the repo root for $file', ({ template }) => {
|
|
expect(existsSync(path.resolve(root, `.${template}`))).toBe(true);
|
|
});
|
|
|
|
it.each(
|
|
devShells.filter(({ template }) =>
|
|
existsSync(path.resolve(root, `apps/${template.slice(7, -5)}/index.html`)),
|
|
),
|
|
)('$template points at its own app entry, not the main SPA', ({ template }) => {
|
|
const app = template.slice(7, -5);
|
|
const rootShell = readFileSync(path.resolve(root, `.${template}`), 'utf8');
|
|
const appShell = readFileSync(path.resolve(root, `apps/${app}/index.html`), 'utf8');
|
|
|
|
expect(entrySrc(rootShell)).toBe(`/apps/${app}/src/entry.tsx`);
|
|
expect(entrySrc(appShell)).toBe('/src/entry.tsx');
|
|
expect(rootShell.replace(`/apps/${app}/src/entry.tsx`, '/src/entry.tsx')).toBe(appShell);
|
|
});
|
|
});
|