Move the docs routes to app/routes/docs/

apps/repl/app/app-ssr.ts

@@ -17,10 +17,10 @@ export default class SsrApp extends Application {
   modules = {
     './router': Router,
     ...customLayout(
-      import.meta.glob('./routes/{application,error-404}/+template.gts', { eager: true })
+      import.meta.glob('./routes/{application,error-404,docs,docs/*}/+template.gts', {
+        eager: true,
+      })
     ),
-    ...import.meta.glob('./templates/docs.gts', { eager: true }),
-    ...import.meta.glob('./templates/docs/**/*.gts', { eager: true }),
     './routes/application': { default: SsrApplicationRoute },
     './services/page-title': PageTitleService,
   };

apps/repl/app/custom-layout.ts

@@ -7,8 +7,6 @@
  *
  * Other files in that folder belong to that route alone.
  *
- * The docs routes are plain templates and stay in app/templates/.
- *
  * The resolver still looks modules up by the classic layout
  * (routes/, templates/, controllers/), so the module keys are translated here.
  */

apps/repl/app/router.ts

@@ -33,13 +33,13 @@ function bundle(name: string, loader: () => Promise<{ default: unknown }>[]) {
 }
 
 (window as any)._embroiderRouteBundles_ = [
-  bundle('docs', () => [import('./templates/docs.gts')]),
-  bundle('docs.index', () => [import('./templates/docs/index.gts')]),
-  bundle('docs.repl-sdk', () => [import('./templates/docs/repl-sdk.gts')]),
-  bundle('docs.ember-repl', () => [import('./templates/docs/ember-repl.gts')]),
-  bundle('docs.embedding', () => [import('./templates/docs/embedding.gts')]),
-  bundle('docs.editor', () => [import('./templates/docs/editor.gts')]),
-  bundle('docs.related', () => [import('./templates/docs/related.gts')]),
+  bundle('docs', () => [import('./routes/docs/+template.gts')]),
+  bundle('docs.index', () => [import('./routes/docs/index/+template.gts')]),
+  bundle('docs.repl-sdk', () => [import('./routes/docs/repl-sdk/+template.gts')]),
+  bundle('docs.ember-repl', () => [import('./routes/docs/ember-repl/+template.gts')]),
+  bundle('docs.embedding', () => [import('./routes/docs/embedding/+template.gts')]),
+  bundle('docs.editor', () => [import('./routes/docs/editor/+template.gts')]),
+  bundle('docs.related', () => [import('./routes/docs/related/+template.gts')]),
 ];
 
 Router.map(function () {

apps/repl/app/templates/docs.gts → apps/repl/app/routes/docs/+template.gts

@@ -1,9 +1,9 @@
-import './docs/styles.css';
+import './styles.css';
 // This side-effect import is needed because I forgot
 // to include some variables imports in the sub-components.
 import 'nvp.ui';
 
-import { NavLink, Topics } from './docs/topics.gts';
+import { NavLink, Topics } from './topics.gts';
 
 <template>
   <nav class="docs-nav">

apps/repl/app/templates/docs/editor.gts → apps/repl/app/routes/docs/editor/+template.gts

@@ -10,7 +10,7 @@ import {
   issueURL,
   sample,
   TryIt,
-} from './support/code.gts';
+} from '../support/code.gts';
 
 const IssueLink = <template>
   <ExternalLink href={{issueURL}}>

apps/repl/app/templates/docs/embedding.gts → apps/repl/app/routes/docs/embedding/+template.gts

@@ -3,8 +3,8 @@ import { REPL } from 'limber-ui';
 import { ExternalLink } from '@nullvoxpopuli/limber-shared';
 import { highlighted } from '@nullvoxpopuli/limber-shared/highlighting';
 
-import { Example, Live, Option, Refresh } from './support/api.gts';
-import { H2 } from './support/code.gts';
+import { Example, Live, Option, Refresh } from '../support/api.gts';
+import { H2 } from '../support/code.gts';
 
 const hello = `<template>
   hello world

apps/repl/app/templates/docs/ember-repl.gts → apps/repl/app/routes/docs/ember-repl/+template.gts

@@ -3,8 +3,8 @@ import { Tabs } from 'nvp.ui/tabs';
 import { ExternalLink } from '@nullvoxpopuli/limber-shared';
 import { highlighted } from '@nullvoxpopuli/limber-shared/highlighting';
 
-import { H2, H3 } from './support/code.gts';
-import { Type } from './support/type.gts';
+import { H2, H3 } from '../support/code.gts';
+import { Type } from '../support/type.gts';
 
 const samples = {
   setup: {

apps/repl/app/templates/docs/index.gts → apps/repl/app/routes/docs/index/+template.gts

@@ -1,7 +1,7 @@
 import { ExternalLink } from '@nullvoxpopuli/limber-shared';
 
-import { issueURL } from './support/code.gts';
-import { NavLink, Topics } from './topics.gts';
+import { issueURL } from '../support/code.gts';
+import { NavLink, Topics } from '../topics.gts';
 
 <template>
   <br /><br />

apps/repl/app/templates/docs/related.gts → apps/repl/app/routes/docs/related/+template.gts

@@ -8,7 +8,7 @@ import { ExternalLink } from '@nullvoxpopuli/limber-shared';
     Do you know of or work on a REPL?<br />
     Feel free to PR it here ❤️
     <ExternalLink
-      href="https://github.com/NullVoxPopuli/limber/edit/main/apps/repl/app/templates/docs/related.gts"
+      href="https://github.com/NullVoxPopuli/limber/edit/main/apps/repl/app/routes/docs/related/+template.gts"
     >Edit this file on GitHub</ExternalLink>
 
     <h2>Other non-node, browser-focused REPLs</h2>

apps/repl/app/templates/docs/repl-sdk.gts → apps/repl/app/routes/docs/repl-sdk/+template.gts

@@ -3,8 +3,8 @@ import { Tabs } from 'nvp.ui/tabs';
 import { ExternalLink } from '@nullvoxpopuli/limber-shared';
 import { highlighted } from '@nullvoxpopuli/limber-shared/highlighting';
 
-import { formats } from './repl-sdk/formats.gts';
-import { H2, H3, H4 } from './support/code.gts';
+import { H2, H3, H4 } from '../support/code.gts';
+import { formats } from './formats.gts';
 
 const samples = {
   compile: {

apps/repl/package.json

@@ -107,7 +107,7 @@
     "vfile": "^6.0.3",
     "vite": "8.0.8",
     "vite-bundle-analyzer": "^1.3.7",
-    "vite-ember-ssr": "0.6.0",
+    "vite-ember-ssr": "0.6.2",
     "vite-plugin-circular-dependency": "^0.5.0",
     "vite-plugin-mkcert": "^1.17.9"
   },

apps/repl/types/global.d.ts

@@ -1,11 +1,3 @@
-// Types for compiled templates
-declare module 'limber/templates/*' {
-  import type { TemplateFactory } from 'htmlbars-inline-precompile';
-
-  const tmpl: TemplateFactory;
-  export default tmpl;
-}
-
 type Injections = Array<object | undefined>;
 
 type LazyTrackedArgs = {

apps/repl/vite.config.js

@@ -218,6 +218,9 @@ export default defineConfig({
         'docs/related',
       ],
       ssrEntry: 'app/app-ssr.ts',
+      // Same layout rule as app/custom-layout.ts.
+      routeName: (path) =>
+        /^app\/routes\/(.+)\/\+template\.gts$/.exec(path)?.[1]?.replaceAll('/', '.'),
       rehydrate: true,
       // A prerendered page has its content in the HTML, so it does not need the app shell.
       // The shell is 100vh tall and comes first, so with it the content starts below the fold

patches/vite-ember-ssr@0.6.2.patch

@@ -0,0 +1,88 @@
+diff --git a/dist/vite-plugin-BBT5xWeo.d.ts b/dist/vite-plugin-BBT5xWeo.d.ts
+index 86553ef419c125bfa9e77e38e27d955ebc306196..da14f0af9929d64180672e4464ffcc9a476ab275 100644
+--- a/dist/vite-plugin-BBT5xWeo.d.ts
++++ b/dist/vite-plugin-BBT5xWeo.d.ts
+@@ -28,6 +28,14 @@ declare const CSS_MANIFEST_FILENAME = "css-manifest.json";
+  */
+ type CssManifest = Record<string, string[]>;
+ interface EmberSsrPluginOptions {
++  /**
++   * Returns the Ember route name for a lazy-loaded module.
++   * Use this when route templates are not in `app/templates/`.
++   *
++   * The path is relative to the project root, for example `app/routes/about/+template.gts`.
++   * Return `undefined` to use the default `app/templates/` convention.
++   */
++  routeName?: (modulePath: string) => string | undefined;
+   /**
+    * Output directory for the client build.
+    * @default 'dist/client'
+@@ -54,6 +62,14 @@ interface EmberSsrPluginOptions {
+  */
+ declare function emberSsr(options?: EmberSsrPluginOptions): Plugin;
+ interface EmberSsgPluginOptions {
++  /**
++   * Returns the Ember route name for a lazy-loaded module.
++   * Use this when route templates are not in `app/templates/`.
++   *
++   * The path is relative to the project root, for example `app/routes/about/+template.gts`.
++   * Return `undefined` to use the default `app/templates/` convention.
++   */
++  routeName?: (modulePath: string) => string | undefined;
+   /**
+    * Routes to prerender as static HTML files.
+    *
+diff --git a/dist/vite-plugin-By7tVdQI.js b/dist/vite-plugin-By7tVdQI.js
+index 8be1c01a058c7ddeb917b6225144721d53b02db2..4a56a34687d632df50fb1e5414f2a8c535bcaf47 100644
+--- a/dist/vite-plugin-By7tVdQI.js
++++ b/dist/vite-plugin-By7tVdQI.js
+@@ -20,10 +20,12 @@ const CSS_MANIFEST_FILENAME = "css-manifest.json";
+ *
+ * Returns undefined if the path doesn't match the convention.
+ */
+-function sourcePathToRouteName(facadeModuleId, root) {
++function sourcePathToRouteName(facadeModuleId, root, toRouteName) {
+ 	let relativePath = facadeModuleId;
+ 	if (relativePath.startsWith(root)) relativePath = relativePath.slice(root.length);
+ 	if (relativePath.startsWith("/")) relativePath = relativePath.slice(1);
++	const custom = toRouteName?.(relativePath);
++	if (custom) return custom;
+ 	const match = relativePath.match(/^app\/templates\/(.+)\.(gts|gjs|hbs|ts|js)$/);
+ 	if (!match) return void 0;
+ 	return match[1].replace(/\//g, ".");
+@@ -45,7 +47,7 @@ function sourcePathToRouteName(facadeModuleId, root) {
+ * Keys are Ember route names derived from the source file path using
+ * Ember's conventional `app/templates/` directory structure.
+ */
+-function buildCssManifest(bundle, base, root) {
++function buildCssManifest(bundle, base, root, toRouteName) {
+ 	const manifest = {};
+ 	const chunksByFile = /* @__PURE__ */ new Map();
+ 	const mainEntryFiles = /* @__PURE__ */ new Set();
+@@ -76,7 +78,7 @@ function buildCssManifest(bundle, base, root) {
+ 		const css = /* @__PURE__ */ new Set();
+ 		collectCss(chunk.fileName, /* @__PURE__ */ new Set(), css);
+ 		if (css.size === 0) continue;
+-		const routeName = chunk.facadeModuleId ? sourcePathToRouteName(chunk.facadeModuleId, root) ?? chunk.name : chunk.name;
++		const routeName = chunk.facadeModuleId ? sourcePathToRouteName(chunk.facadeModuleId, root, toRouteName) ?? chunk.name : chunk.name;
+ 		if (!routeName) continue;
+ 		const cssFiles = Array.from(css).map((c) => `${base}${c}`);
+ 		if (cssFiles.length > 0) manifest[routeName] = cssFiles;
+@@ -206,7 +208,7 @@ function emberSsr(options = {}) {
+ 			if (process.env.__VITE_EMBER_SSG_CHILD__) return;
+ 			const base = resolvedConfig.base ?? "/";
+ 			const root = resolvedConfig.root;
+-			const manifest = buildCssManifest(bundle, base, root);
++			const manifest = buildCssManifest(bundle, base, root, options.routeName);
+ 			if (Object.keys(manifest).length === 0) return;
+ 			this.emitFile({
+ 				type: "asset",
+@@ -283,7 +285,7 @@ function emberSsg(options) {
+ 			if (process.env.__VITE_EMBER_SSG_CHILD__) return;
+ 			const base = resolvedConfig.base ?? "/";
+ 			const root = resolvedConfig.root;
+-			const manifest = buildCssManifest(bundle, base, root);
++			const manifest = buildCssManifest(bundle, base, root, options.routeName);
+ 			if (Object.keys(manifest).length === 0) return;
+ 			this.emitFile({
+ 				type: "asset",

pnpm-workspace.yaml

@@ -75,6 +75,7 @@ catalogs:
 
 patchedDependencies:
   "browserslist-generator": "patches/browserslist-generator.patch"
+  "vite-ember-ssr@0.6.2": "patches/vite-ember-ssr@0.6.2.patch"
 
 overrides:
   "@glint/template": "1.8.0"