@beatzball/create-litro 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # create-litro
 
+## 0.1.3
+
+### Patch Changes
+
+- bfd8f9a: Fix fullstack recipe: add `base: '/_litro/'` to `vite.config.ts` and extend `LitroPage` in `[slug].ts`
+
+  Without `base: '/_litro/'`, Vite's compiled modulepreload URL resolver emits paths like `/assets/chunk.js` instead of `/_litro/assets/chunk.js`. These requests hit the Nitro catch-all page handler and return HTML, causing a MIME type error that leaves dynamic routes (e.g. `/blog/hello-world`) stuck on "Loading…".
+
+  Also fixes `pages/blog/[slug].ts` to extend `LitroPage` (not `LitElement`) and implement `fetchData()`, so client-side SPA navigation to different slugs correctly updates `serverData`.
+
+## 0.1.2
+
+### Patch Changes
+
+- 19f4909: Fix recipe templates using unscoped `litro/runtime/...` imports instead of `@beatzball/litro/runtime/...`, and bump `nitropack` devDependency to `^2.13.1`.
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/recipes/11ty-blog/template/app.ts

@@ -2,8 +2,8 @@
 import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
 
 // Client runtime: router outlet and link custom elements.
-import 'litro/runtime/LitroOutlet.js';
-import 'litro/runtime/LitroLink.js';
+import '@beatzball/litro/runtime/LitroOutlet.js';
+import '@beatzball/litro/runtime/LitroLink.js';
 
 // Routes generated by the page scanner before each vite build.
 import { routes } from './routes.generated.js';

package/dist/recipes/11ty-blog/template/package.json

@@ -19,7 +19,7 @@
     "h3": "^1.13.0"
   },
   "devDependencies": {
-    "nitropack": "^2.10.4",
+    "nitropack": "^2.13.1",
     "vite": "^5.4.11",
     "typescript": "^5.7.3"
   }

package/dist/recipes/fullstack/template/app.ts

@@ -2,8 +2,8 @@
 import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
 
 // Client runtime: router outlet and link custom elements.
-import 'litro/runtime/LitroOutlet.js';
-import 'litro/runtime/LitroLink.js';
+import '@beatzball/litro/runtime/LitroOutlet.js';
+import '@beatzball/litro/runtime/LitroLink.js';
 
 // Routes generated by the page scanner before each vite build.
 // routes.generated.ts lives at the project root (not in dist/) so Vite's

package/dist/recipes/fullstack/template/package.json

@@ -19,7 +19,7 @@
     "h3": "^1.13.0"
   },
   "devDependencies": {
-    "nitropack": "^2.10.4",
+    "nitropack": "^2.13.1",
     "vite": "^5.4.11",
     "typescript": "^5.7.3"
   }

package/dist/recipes/fullstack/template/pages/blog/[slug].ts

@@ -1,6 +1,8 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { LitroPage } from '@beatzball/litro/runtime';
 import { definePageData } from '@beatzball/litro';
+import type { LitroLocation } from '@beatzball/litro-router';
 
 export interface PostData {
   slug: string;
@@ -24,9 +26,19 @@ export async function generateRoutes(): Promise<string[]> {
 }
 
 @customElement('page-blog-slug')
-export class BlogPostPage extends LitElement {
+export class BlogPostPage extends LitroPage {
   @state() declare serverData: PostData | null;
 
+  // Called by LitroRouter on client-side navigation to fetch data for the new slug.
+  override async fetchData(location: LitroLocation): Promise<PostData> {
+    const slug = location.params['slug'] ?? '';
+    return {
+      slug,
+      title: `Post: ${slug}`,
+      content: `This is the content for the "${slug}" post.`,
+    };
+  }
+
   render() {
     return html`
       <article>

package/dist/recipes/fullstack/template/vite.config.ts

@@ -1,6 +1,15 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
+  // base must match publicAssets.baseURL in nitro.config.ts ('/_litro/').
+  // Vite embeds the base into the compiled preload URL resolver so that
+  // modulepreload hints resolve to /_litro/assets/... instead of /assets/...
+  // Without this, preload requests hit the catch-all page handler and return
+  // HTML, causing a MIME type error for module scripts.
+  base: '/_litro/',
+  resolve: {
+    conditions: ['source', 'browser', 'module', 'import', 'default'],
+  },
   build: {
     outDir: 'dist/client',
     rollupOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beatzball/create-litro",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Create a new Litro app",
   "license": "Apache-2.0",
   "repository": {

package/recipes/11ty-blog/template/app.ts

@@ -2,8 +2,8 @@
 import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
 
 // Client runtime: router outlet and link custom elements.
-import 'litro/runtime/LitroOutlet.js';
-import 'litro/runtime/LitroLink.js';
+import '@beatzball/litro/runtime/LitroOutlet.js';
+import '@beatzball/litro/runtime/LitroLink.js';
 
 // Routes generated by the page scanner before each vite build.
 import { routes } from './routes.generated.js';

package/recipes/11ty-blog/template/package.json

@@ -19,7 +19,7 @@
     "h3": "^1.13.0"
   },
   "devDependencies": {
-    "nitropack": "^2.10.4",
+    "nitropack": "^2.13.1",
     "vite": "^5.4.11",
     "typescript": "^5.7.3"
   }

package/recipes/fullstack/template/app.ts

@@ -2,8 +2,8 @@
 import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
 
 // Client runtime: router outlet and link custom elements.
-import 'litro/runtime/LitroOutlet.js';
-import 'litro/runtime/LitroLink.js';
+import '@beatzball/litro/runtime/LitroOutlet.js';
+import '@beatzball/litro/runtime/LitroLink.js';
 
 // Routes generated by the page scanner before each vite build.
 // routes.generated.ts lives at the project root (not in dist/) so Vite's

package/recipes/fullstack/template/package.json

@@ -19,7 +19,7 @@
     "h3": "^1.13.0"
   },
   "devDependencies": {
-    "nitropack": "^2.10.4",
+    "nitropack": "^2.13.1",
     "vite": "^5.4.11",
     "typescript": "^5.7.3"
   }

package/recipes/fullstack/template/pages/blog/[slug].ts

@@ -1,6 +1,8 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { LitroPage } from '@beatzball/litro/runtime';
 import { definePageData } from '@beatzball/litro';
+import type { LitroLocation } from '@beatzball/litro-router';
 
 export interface PostData {
   slug: string;
@@ -24,9 +26,19 @@ export async function generateRoutes(): Promise<string[]> {
 }
 
 @customElement('page-blog-slug')
-export class BlogPostPage extends LitElement {
+export class BlogPostPage extends LitroPage {
   @state() declare serverData: PostData | null;
 
+  // Called by LitroRouter on client-side navigation to fetch data for the new slug.
+  override async fetchData(location: LitroLocation): Promise<PostData> {
+    const slug = location.params['slug'] ?? '';
+    return {
+      slug,
+      title: `Post: ${slug}`,
+      content: `This is the content for the "${slug}" post.`,
+    };
+  }
+
   render() {
     return html`
       <article>

package/recipes/fullstack/template/vite.config.ts

@@ -1,6 +1,15 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
+  // base must match publicAssets.baseURL in nitro.config.ts ('/_litro/').
+  // Vite embeds the base into the compiled preload URL resolver so that
+  // modulepreload hints resolve to /_litro/assets/... instead of /assets/...
+  // Without this, preload requests hit the catch-all page handler and return
+  // HTML, causing a MIME type error for module scripts.
+  base: '/_litro/',
+  resolve: {
+    conditions: ['source', 'browser', 'module', 'import', 'default'],
+  },
   build: {
     outDir: 'dist/client',
     rollupOptions: {