waku 0.20.0 → 0.20.1

package/README.md

@@ -13,9 +13,9 @@ visit [waku.gg](https://waku.gg) or `npm create waku@latest`
 
 ## Introduction
 
-**Waku** _(wah-ku)_ or **わく** means “framework” in Japanese. As the minimal React framework, it aims to accelerate the work of developers at startups and agencies building small to medium-sized React projects. These include marketing websites, light ecommerce, and web applications.
+**Waku** _(wah-ku)_ or **わく** means “framework” in Japanese. As the minimal React framework, it’s designed to accelerate the work of developers at startups and agencies building small to medium-sized React projects. These include marketing websites, light ecommerce, and web applications.
 
-We recommend other frameworks for heavy ecommerce or enterprise applications. Waku is a lightweight alternative designed to bring a fun developer experience to the modern React server components era. Yes, let’s make React development fun!
+We recommend other frameworks for heavy ecommerce or enterprise applications. Waku is a lightweight alternative bringing a fast developer experience to the modern React server components era. Yes, let’s make React development fast again!
 
 > Waku is in rapid development and some features are currently missing. Please try it on non-production projects and report any issues you may encounter. Expect that there will be some breaking changes on the road towards a stable v1 release. Contributors are welcome.
 
@@ -24,30 +24,30 @@ We recommend other frameworks for heavy ecommerce or enterprise applications. Wa
 Start a new Waku project with the `create` command for your preferred package manager. It will scaffold a new project with our default [Waku starter](https://github.com/dai-shi/waku/tree/main/examples/01_template).
 
 ```
-npm create waku@next
+npm create waku@latest
 ```
 
-**Node.js version requirement:** `^20.8.0 || ^18.17.0`
+**Node.js version requirement:** `^20.8.0` or `^18.17.0`
 
 ## Rendering
 
-While there's a bit of a learning curve to modern React rendering, it introduces powerful new patterns of full-stack composability that are only possible with the advent of [server components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md).
+While there’s a little bit of a learning curve to modern React rendering, it introduces powerful new patterns of full-stack composability that are only possible with the advent of [server components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md).
 
-So please don't be intimidated by the `'use client'` directive! Once you get the hang of it, you'll appreciate how awesome it is to flexibly move server-client boundaries with a single line of code as your full-stack React codebase evolves over time. It's way simpler than maintaining separate codebases for your backend and frontend.
+So please don’t be intimidated by the `'use client'` directive! Once you get the hang of it, you’ll appreciate how awesome it is to flexibly move server-client boundaries with a single line of code as your full-stack React codebase evolves over time. It’s way simpler than maintaining separate codebases for your backend and frontend.
 
-And please don't fret about client components! Even if you only lightly optimize towards server components, your client bundle size will be smaller than traditional React frameworks, which are always 100% client components.
+And please don’t fret about client components! Even if you only lightly optimize towards server components, your client bundle size will be smaller than traditional React frameworks, which are always 100% client components.
 
 > Future versions of Waku may provide additional opt-in APIs to abstract some of the complexity away for an improved developer experience.
 
 #### Server components
 
-Server components can be made async and can securely perform server-side logic and data fetching. Feel free to access the local file-system and import heavy dependencies since they aren't included in the client bundle. They have no state, interactivity, or access to browser APIs since they run _exclusively_ on the server.
+Server components can be made async and can securely perform server-side logic and data fetching. Feel free to access the local file-system and import heavy dependencies since they aren’t included in the client bundle. They have no state, interactivity, or access to browser APIs since they run _exclusively_ on the server.
 
 ```tsx
 // server component
 import db from 'some-db';
 
-import { Gallery } from '../components/gallery.js';
+import { Gallery } from '../components/gallery';
 
 export const Store = async () => {
   const products = await db.query('SELECT * FROM products');
@@ -58,7 +58,7 @@ export const Store = async () => {
 
 #### Client components
 
-A `'use client'` directive placed at the top of a file will create a server-client boundary when the module is imported into a server component. All components imported below the boundary will be hydrated to run in the browser as well. They can use all traditional React features such as state, effects, and event handlers.
+A `'use client'` directive placed at the top of a file will create a server-client boundary when imported into a server component. All components imported below the boundary will be hydrated to run in the browser as well. They can use all traditional React features such as state, effects, and event handlers.
 
 ```tsx
 // client component
@@ -95,7 +95,7 @@ Server components can import client components and doing so will create a server
 
 ```tsx
 // ./src/pages/_layout.tsx
-import { Providers } from '../components/providers.js';
+import { Providers } from '../components/providers';
 
 export default async function RootLayout({ children }) {
   return (
@@ -131,9 +131,9 @@ Waku provides static prerendering (SSG) and server-side rendering (SSR) options
 
 Each layout and page in Waku is composed of a React component hierarchy.
 
-It begins with a server component at the top of the tree. Then at points down the hierarchy, you'll eventually import a component that needs client component APIs. Mark this file with a `'use client'` directive at the top. When imported into a server component, it will create a server-client boundary. Below this point in the component hierarchy, all imported components are hydrated and will run in the browser as well.
+It begins with a server component at the top of the tree. Then at points down the hierarchy, you’ll eventually import a component that needs client component APIs. Mark this file with a `'use client'` directive at the top. When imported into a server component, it will create a server-client boundary. Below this point, all imported components are hydrated and will run in the browser as well.
 
-Server components can be rendered below this boundary, but only via composition (e.g., `children` props). Together they form [a new "React server" layer](https://github.com/reactwg/server-components/discussions/4) that runs _before_ the traditional "React client" layer with which you're already familiar.
+Server components can be rendered below this boundary, but only via composition (e.g., `children` props). Together they form [a new “React server” layer](https://github.com/reactwg/server-components/discussions/4) that runs _before_ the traditional “React client” layer with which you’re already familiar.
 
 Client components are server-side rendered as SSR is separate from RSC. See the [linked diagrams](https://github.com/reactwg/server-components/discussions/4) for a helpful visual.
 
@@ -143,32 +143,40 @@ To learn more about the modern React architecture, we recommend [Making Sense of
 
 ## Routing
 
-Waku provides a familiar file-based “pages router” experience built for the modern React server components era.
+Waku provides minimal file-based “pages router” experience built for the modern React server components era.
 
-Its underlying [low-level API](https://github.com/dai-shi/waku/blob/main/docs/create-pages.mdx) is also available for those that prefer programmatic routing. This documentation covers file-based routing since many React developers prefer it, but please feel free to try both and see which you prefer.
+Its underlying [low-level API](https://github.com/dai-shi/waku/blob/main/docs/create-pages.mdx) is also available for those that prefer programmatic routing. This documentation covers file-based routing since many React developers prefer it, but feel free to try both and see which you prefer.
 
 ### Overview
 
-The directory for file-based routing in Waku projects is `./src/pages`. Layouts and pages can be created by making a new file with two exports: a default function for the React component and a named `getConfig` function that returns a configuration object including the render method and other options.
+The directory for file-based routing in Waku projects is `./src/pages`.
 
-Waku currently supports two rendering options: `'static'` for static prerendering (SSG) or `'dynamic'` for server-side rendering (SSR).
+Layouts and pages can be created by making a new file with two exports: a default function for the React component and a named `getConfig` function that returns a configuration object to specify the render method and other options.
+
+Waku currently supports two rendering options:
+
+- `'static'` for static prerendering (SSG)
+
+- `'dynamic'` for server-side rendering (SSR)
 
 For example, you can statically prerender a global header and footer in the root layout at build time, but dynamically render the rest of a home page at request time for personalized user experiences.
 
 ```tsx
 // ./src/pages/_layout.tsx
+import '../styles.css';
 
-import { Header } from '../components/header.js';
-import { Footer } from '../components/footer.js';
+import { Providers } from '../components/providers';
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
 
 // Create root layout
 export default async function RootLayout({ children }) {
   return (
-    <>
+    <Providers>
       <Header />
       <main>{children}</main>
       <Footer />
-    </>
+    </Providers>
   );
 }
 
@@ -187,10 +195,10 @@ export default async function HomePage() {
   const data = await getData();
 
   return (
-    <div>
-      <h1>{data.someDynamicTitle}</h1>
-      <div>{data.someDynamicContent}</div>
-    </div>
+    <>
+      <h1>{data.title}</h1>
+      <div>{data.content}</div>
+    </>
   );
 }
 
@@ -207,9 +215,11 @@ export const getConfig = async () => {
 
 ### Pages
 
+Pages render a single route, segment route, or catch-all route based on the file system path (conventions below). All page components automatically receive two props related to the rendered route: `path` (string) and `searchParams` ([URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)).
+
 #### Single routes
 
-Pages can be rendered as a single route (e.g., `/about` or `/blog`).
+Pages can be rendered as a single route (e.g., `about.tsx` or `blog/index.tsx`).
 
 ```tsx
 // ./src/pages/about.tsx
@@ -243,7 +253,11 @@ export const getConfig = async () => {
 
 #### Segment routes
 
-Pages can also render a segment route (e.g., `/blog/[slug]`). The rendered React component automatically receives a prop named by the segment (e.g, `slug`) with the value of the rendered segment (e.g., `'introducing-waku'`). If statically prerendering a segment route at build time, a `staticPaths` array must also be provided.
+Segment routes (e.g., `[slug].tsx` or `[slug]/index.tsx`) are marked with brackets.
+
+The rendered React component automatically receives a prop named by the segment (e.g, `slug`) with the value of the rendered segment (e.g., `'introducing-waku'`).
+
+If statically prerendering a segment route at build time, a `staticPaths` array must also be provided.
 
 ```tsx
 // ./src/pages/blog/[slug].tsx
@@ -262,13 +276,13 @@ const getData = async (slug) => {
 export const getConfig = async () => {
   return {
     render: 'static',
-    staticPaths: ['introducing-waku', 'introducing-create-pages'],
+    staticPaths: ['introducing-waku', 'introducing-pages-router'],
   };
 };
 ```
 
 ```tsx
-// ./src/pages/shop/[category]/index.tsx
+// ./src/pages/shop/[category].tsx
 
 // Create product category pages
 export default async function ProductCategoryPage({ category }) {
@@ -288,7 +302,7 @@ export const getConfig = async () => {
 };
 ```
 
-Static paths (or other values) could also be generated programmatically.
+Static paths (or other config values) can also be generated programmatically.
 
 ```tsx
 // ./src/pages/blog/[slug].tsx
@@ -320,7 +334,7 @@ const getStaticPaths = async () => {
 
 #### Nested segment routes
 
-Routes can contain multiple segments (e.g., `/shop/[category]/[product]`).
+Routes can contain multiple segments (e.g., `/shop/[category]/[product]`) by creating folders with brackets as well.
 
 ```tsx
 // ./src/pages/shop/[category]/[product].tsx
@@ -351,8 +365,8 @@ export const getConfig = async () => {
   return {
     render: 'static',
     staticPaths: [
-      ['some-category', 'some-product'],
-      ['some-category', 'another-product'],
+      ['same-category', 'some-product'],
+      ['same-category', 'another-product'],
     ],
   };
 };
@@ -360,9 +374,9 @@ export const getConfig = async () => {
 
 #### Catch-all routes
 
-Catch-all or "wildcard" routes (e.g., `/app/[...catchAll]`) have indefinite segments. Wildcard routes receive a prop with segment values as an ordered array.
+Catch-all or “wildcard” segment routes (e.g., `/app/[...catchAll]`) are marked with an ellipsis before the name and have indefinite segments.
 
-For example, the `/app/profile/settings` route would receive a `catchAll` prop with the value `['profile', 'settings']`. These values can then be used to determine what to render in the component.
+Wildcard routes receive a prop with segment values as an ordered array. For example, the `/app/profile/settings` route would receive a `catchAll` prop with the value `['profile', 'settings']`. These values can then be used to determine what to render in the component.
 
 ```tsx
 // ./src/pages/app/[...catchAll].tsx
@@ -391,9 +405,9 @@ The root layout placed at `./pages/_layout.tsx` is especially useful. It can be
 // ./src/pages/_layout.tsx
 import '../styles.css';
 
-import { Providers } from '../components/providers.js';
-import { Header } from '../components/header.js';
-import { Footer } from '../components/footer.js';
+import { Providers } from '../components/providers';
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
 
 // Create root layout
 export default async function RootLayout({ children }) {
@@ -430,11 +444,11 @@ export const Providers = ({ children }) => {
 
 #### Other layouts
 
-Layouts are also helpful further down the tree. For example, you could add a layout at `./pages/blog/_layout.tsx` to add a sidebar to both the blog index and all blog article pages.
+Layouts are also helpful in nested routes. For example, you can add a layout at `./pages/blog/_layout.tsx` to add a sidebar to both the blog index and all blog article pages.
 
 ```tsx
 // ./src/pages/blog/_layout.tsx
-import { Sidebar } from '../../components/sidebar.js';
+import { Sidebar } from '../../components/sidebar';
 
 // Create blog layout
 export default async function BlogLayout({ children }) {
@@ -457,7 +471,7 @@ export const getConfig = async () => {
 
 ### Link
 
-Internal links should be made with the Waku `<Link />` component. It accepts a `to` prop for the destination, which is automatically prefetched ahead of the navigation.
+The`<Link />` component should be used for internal links. It accepts a `to` prop for the destination, which is automatically prefetched ahead of the navigation.
 
 ```tsx
 // ./src/pages/index.tsx
@@ -479,7 +493,7 @@ The `useRouter` hook can be used to inspect the current route or perform program
 
 #### router properties
 
-The `router` object has a `value` property with two additional properties related to the current route: `path` (string) and `searchParams` ([URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)).
+The `router` object has two properties related to the current route: `path` (string) and `searchParams` ([URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)).
 
 ```tsx
 'use client';
@@ -487,8 +501,7 @@ The `router` object has a `value` property with two additional properties relate
 import { useRouter_UNSTABLE as useRouter } from 'waku';
 
 export const Component = () => {
-  const router = useRouter();
-  const { path, searchParams } = router.value;
+  const { path, searchParams } = useRouter();
 
   return (
     <>
@@ -575,7 +588,7 @@ export const getConfig = async () => {
 };
 ```
 
-Metadata could also be generated programmatically.
+Metadata can also be generated programmatically.
 
 ```tsx
 // ./src/pages/index.tsx
@@ -621,7 +634,7 @@ Install any required dev dependencies (e.g., `npm i -D tailwindcss autoprefixer`
 import '../styles.css';
 
 export default async function RootLayout({ children }) {
-  return <main>{children}</main>;
+  return <>{children}</>;
 }
 
 export const getConfig = async () => {
@@ -659,7 +672,17 @@ export default {
 
 Static assets such as images, fonts, stylesheets, and scripts can be placed in a special `./public` folder of the Waku project root directory. The public directory structure is served relative to the `/` base path.
 
-For example, an image added to `./public/images/logo.svg` can be rendered via `<img src="/images/logo.svg" />`.
+```tsx
+// assuming image is saved at `/public/images/logo.svg`
+
+export const Logo = () => {
+  return (
+    <>
+      <img src="/images/logo.svg" />
+    </>
+  );
+};
+```
 
 ## File system
 
@@ -686,8 +709,8 @@ All of the wonderful patterns of React server components are supported. For exam
 
 ```tsx
 // ./src/pages/blog/[slug].tsx
-import { MDX } from '../../components/mdx.js';
-import { getArticle, getStaticPaths } from '../../lib/blog.js';
+import { MDX } from '../../components/mdx';
+import { getArticle, getStaticPaths } from '../../lib/blog';
 
 export default async function BlogArticlePage({ slug }) {
   const article = await getArticle(slug);
@@ -717,13 +740,13 @@ Data should be fetched on the server when possible for the best user experience,
 
 ## State management
 
-We recommend [Jotai](https://jotai.org) for global React state management based on the atomic model's performance and scalability, but Waku should be compatible with all React state management libraries such as Zustand and Valtio.
+We recommend [Jotai](https://jotai.org) for global React state management based on the atomic model’s performance and scalability, but Waku should be compatible with all React state management libraries such as Zustand and Valtio.
 
-We're exploring a deeper integration of atomic state management into Waku to achieve the performance and developer experience of signals while preserving React's declarative programming model.
+We’re exploring a deeper integration of atomic state management into Waku to achieve the performance and developer experience of signals while preserving React’s declarative programming model.
 
 ## Environment variables
 
-It's important to distinguish environment variables that must be kept secret from those that can be made public.
+It’s important to distinguish environment variables that must be kept secret from those that can be made public.
 
 #### Private
 
@@ -731,7 +754,7 @@ By default all environment variables are considered private and accessible only
 
 #### Public
 
-A special `WAKU_PUBLIC_` prefix is required to make an environment variable public and accessible in client components. They will be present as cleartext in the production JavaScript bundle sent to users' browsers.
+A special `WAKU_PUBLIC_` prefix is required to make an environment variable public and accessible in client components. They will be present as cleartext in the production JavaScript bundle sent to users’ browsers.
 
 ### Runtime agnostic (recommended)
 
@@ -861,4 +884,4 @@ Please join our friendly [GitHub discussions](https://github.com/dai-shi/waku/di
 
 ## Roadmap
 
-Waku is in active development and we're seeking additional contributors. Check out our [roadmap](https://github.com/dai-shi/waku/issues/24) for more information.
+Waku is in active development and we’re seeking additional contributors. Check out our [roadmap](https://github.com/dai-shi/waku/issues/24) for more information.

package/dist/cli.js

@@ -45,6 +45,10 @@ const { values, positionals } = parseArgs({
         'with-aws-lambda': {
             type: 'boolean'
         },
+        port: {
+            type: 'string',
+            short: 'p'
+        },
         version: {
             type: 'boolean',
             short: 'v'
@@ -88,7 +92,7 @@ async function runDev() {
         config,
         env: process.env
     }));
-    const port = parseInt(process.env.PORT || '3000', 10);
+    const port = parseInt(values.port || '3000', 10);
     await startServer(app, port);
 }
 async function runBuild() {
@@ -119,7 +123,7 @@ async function runStart({ distDir = 'dist', entriesJs = 'entries.js', publicDir
         }
         return c.text('404 Not Found', 404);
     });
-    const port = parseInt(process.env.PORT || '8080', 10);
+    const port = parseInt(values.port || '8080', 10);
     await startServer(app, port);
 }
 function startServer(app, port) {
@@ -157,6 +161,7 @@ Options:
   --with-partykit       Output for PartyKit on build
   --with-deno           Output for Deno on build
   --with-aws-lambda     Output for AWS Lambda on build
+  -p, --port            Port number for the server
   -v, --version         Display the version number
   -h, --help            Display this help message
 `);

package/dist/client.d.ts

@@ -13,7 +13,7 @@ type CacheEntry = [
     elements: Elements
 ];
 declare const fetchCache: [CacheEntry?];
-export declare const fetchRSC: (input: string, searchParamsString: string, setElements: SetElements, cache?: [CacheEntry?], unstable_onFetchData?: ((data: unknown) => void) | undefined) => Elements;
+export declare const fetchRSC: (input: string, searchParamsString: string, setElements: SetElements, cache?: [CacheEntry?], unstable_onFetchData?: (data: unknown) => void) => Elements;
 export declare const prefetchRSC: (input: string, searchParamsString: string) => void;
 export declare const Root: ({ initialInput, initialSearchParamsString, cache, unstable_onFetchData, children, }: {
     initialInput?: string;

package/dist/client.js

@@ -101,7 +101,17 @@ export const Slot = ({ id, children, fallback })=>{
     if (!elementsPromise) {
         throw new Error('Missing Root component');
     }
-    const elements = use(elementsPromise);
+    let elements;
+    try {
+        elements = use(elementsPromise);
+    } catch (e) {
+        if (e instanceof Error) {
+            // HACK we assume any error as Not Found,
+            // probably caused by history api fallback
+            e.statusCode = 404;
+        }
+        throw e;
+    }
     if (!(id in elements)) {
         if (fallback) {
             return fallback;

package/dist/config.d.ts

@@ -41,13 +41,15 @@ export interface Config {
     indexHtml?: string;
     /**
      * The client main file relative to srcDir.
-     * Defaults to "main.tsx".
+     * The extension should be `.js`,
+     * but resolved with other extensions in the development mode.
+     * Defaults to "main.js".
      */
     mainJs?: string;
     /**
      * The entries.js file relative to srcDir or distDir.
      * The extension should be `.js`,
-     * but resolved with `.ts`, `.tsx` and `.jsx` in the development mode.
+     * but resolved with other extensions in the development mode.
      * Defaults to "entries.js".
      */
     entriesJs?: string;

package/dist/lib/builder/build.js

@@ -2,7 +2,7 @@ import { Readable } from 'node:stream';
 import { pipeline } from 'node:stream/promises';
 import { build as buildVite, resolveConfig as resolveViteConfig } from 'vite';
 import viteReact from '@vitejs/plugin-react';
-import { resolveConfig } from '../config.js';
+import { resolveConfig, EXTENSIONS } from '../config.js';
 import { decodeFilePathFromAbsolute, extname, filePathToFileURL, fileURLToFilePath, joinPath } from '../utils/path.js';
 import { appendFile, createWriteStream, existsSync, mkdir, readdir, readFile, rename, unlink, writeFile } from '../utils/node-fs.js';
 import { encodeInput, generatePrefetchCode } from '../renderers/utils.js';
@@ -51,14 +51,7 @@ const analyzeEntries = async (rootDir, config, entriesFile)=>{
         });
         for (const file of files){
             const ext = extname(file);
-            if ([
-                '.js',
-                '.ts',
-                '.tsx',
-                '.jsx',
-                '.mjs',
-                '.cjs'
-            ].includes(ext)) {
+            if (EXTENSIONS.includes(ext)) {
                 moduleFileMap.set(joinPath(preserveModuleDir, file.slice(0, -ext.length)), joinPath(dir, file));
             }
         }
@@ -183,6 +176,9 @@ const buildServerBundle = async (rootDir, config, entriesFile, clientEntryFiles,
             },
             noExternal: /^(?!node:)/
         },
+        esbuild: {
+            jsx: 'automatic'
+        },
         define: {
             'process.env.NODE_ENV': JSON.stringify('production')
         },
@@ -210,8 +206,7 @@ const buildServerBundle = async (rootDir, config, entriesFile, clientEntryFiles,
     return serverBuildOutput;
 };
 // For SSR (render client components on server to generate HTML)
-const buildSsrBundle = async (rootDir, config, clientEntryFiles, serverBuildOutput, isNodeCompatible)=>{
-    const mainJsFile = joinPath(rootDir, config.srcDir, config.mainJs);
+const buildSsrBundle = async (rootDir, config, mainJsFile, clientEntryFiles, serverBuildOutput, isNodeCompatible)=>{
     const cssAssets = serverBuildOutput.output.flatMap(({ type, fileName })=>type === 'asset' && fileName.endsWith('.css') ? [
             fileName
         ] : []);
@@ -220,7 +215,8 @@ const buildSsrBundle = async (rootDir, config, clientEntryFiles, serverBuildOutp
         plugins: [
             rscIndexPlugin({
                 ...config,
-                cssAssets
+                cssAssets,
+                mainJs: mainJsFile.split('/').pop()
             }),
             rscEnvPlugin({
                 config
@@ -242,6 +238,9 @@ const buildSsrBundle = async (rootDir, config, clientEntryFiles, serverBuildOutp
             },
             noExternal: /^(?!node:)/
         },
+        esbuild: {
+            jsx: 'automatic'
+        },
         define: {
             'process.env.NODE_ENV': JSON.stringify('production')
         },
@@ -270,8 +269,7 @@ const buildSsrBundle = async (rootDir, config, clientEntryFiles, serverBuildOutp
     });
 };
 // For Browsers
-const buildClientBundle = async (rootDir, config, clientEntryFiles, serverBuildOutput)=>{
-    const mainJsFile = joinPath(rootDir, config.srcDir, config.mainJs);
+const buildClientBundle = async (rootDir, config, mainJsFile, clientEntryFiles, serverBuildOutput)=>{
     const nonJsAssets = serverBuildOutput.output.flatMap(({ type, fileName })=>type === 'asset' && !fileName.endsWith('.js') ? [
             fileName
         ] : []);
@@ -282,7 +280,8 @@ const buildClientBundle = async (rootDir, config, clientEntryFiles, serverBuildO
             viteReact(),
             rscIndexPlugin({
                 ...config,
-                cssAssets
+                cssAssets,
+                mainJs: mainJsFile.split('/').pop()
             }),
             rscEnvPlugin({
                 config
@@ -296,6 +295,7 @@ const buildClientBundle = async (rootDir, config, clientEntryFiles, serverBuildO
                 onwarn,
                 input: {
                     main: mainJsFile,
+                    // rollup will ouput the style files related to clientEntryFiles, but since it does not find any link to them in the index.html file, it will not inject them. They are only mentioned by the standalone `clientEntryFiles`
                     ...clientEntryFiles
                 },
                 preserveEntrySignatures: 'exports-only',
@@ -376,7 +376,11 @@ const pathSpec2pathname = (pathSpec)=>{
     }
     return '/' + pathSpec.map(({ name })=>name).join('/');
 };
-const emitHtmlFiles = async (rootDir, config, distEntriesFile, distEntries, buildConfig, getClientModules)=>{
+const emitHtmlFiles = async (rootDir, config, distEntriesFile, distEntries, buildConfig, getClientModules, clientBuildOutput)=>{
+    const nonJsAssets = clientBuildOutput.output.flatMap(({ type, fileName })=>type === 'asset' && !fileName.endsWith('.js') ? [
+            fileName
+        ] : []);
+    const cssAssets = nonJsAssets.filter((asset)=>asset.endsWith('.css'));
     const basePrefix = config.basePath + config.rscPath + '/';
     const publicIndexHtmlFile = joinPath(rootDir, config.distDir, config.publicDir, config.indexHtml);
     const publicIndexHtml = await readFile(publicIndexHtmlFile, {
@@ -389,6 +393,12 @@ const emitHtmlFiles = async (rootDir, config, distEntriesFile, distEntries, buil
         const pathSpec = typeof pathname === 'string' ? pathname2pathSpec(pathname) : pathname;
         let htmlStr = publicIndexHtml;
         let htmlHead = publicIndexHtmlHead;
+        if (cssAssets.length) {
+            const cssStr = cssAssets.map((asset)=>`<link rel="stylesheet" href="${asset}">`).join('\n');
+            // HACK is this too naive to inject style code?
+            htmlStr = htmlStr.replace(/<\/head>/, cssStr);
+            htmlHead += cssStr;
+        }
         const inputsForPrefetch = new Set();
         const moduleIdsForPrefetch = new Set();
         for (const { input, skipPrefetch } of entries || []){
@@ -455,12 +465,7 @@ export const publicIndexHtml = ${JSON.stringify(publicIndexHtml)};
     await appendFile(distEntriesFile, code);
 };
 const resolveFileName = (fname)=>{
-    for (const ext of [
-        '.js',
-        '.ts',
-        '.tsx',
-        '.jsx'
-    ]){
+    for (const ext of EXTENSIONS){
         const resolvedName = fname.slice(0, -extname(fname).length) + ext;
         if (existsSync(resolvedName)) {
             return resolvedName;
@@ -474,11 +479,12 @@ export async function build(options) {
     const rootDir = (await resolveViteConfig({}, 'build', 'production', 'production')).root;
     const entriesFile = resolveFileName(joinPath(rootDir, config.srcDir, config.entriesJs));
     const distEntriesFile = resolveFileName(joinPath(rootDir, config.distDir, config.entriesJs));
+    const mainJsFile = resolveFileName(joinPath(rootDir, config.srcDir, config.mainJs));
     const isNodeCompatible = options.deploy !== 'cloudflare' && options.deploy !== 'partykit' && options.deploy !== 'deno';
     const { clientEntryFiles, serverEntryFiles, serverModuleFiles } = await analyzeEntries(rootDir, config, entriesFile);
     const serverBuildOutput = await buildServerBundle(rootDir, config, entriesFile, clientEntryFiles, serverEntryFiles, serverModuleFiles, (options.deploy === 'vercel-serverless' ? 'vercel' : false) || (options.deploy === 'netlify-functions' ? 'netlify' : false) || (options.deploy === 'cloudflare' ? 'cloudflare' : false) || (options.deploy === 'partykit' ? 'partykit' : false) || (options.deploy === 'deno' ? 'deno' : false) || (options.deploy === 'aws-lambda' ? 'aws-lambda' : false), isNodeCompatible);
-    await buildSsrBundle(rootDir, config, clientEntryFiles, serverBuildOutput, isNodeCompatible);
-    await buildClientBundle(rootDir, config, clientEntryFiles, serverBuildOutput);
+    await buildSsrBundle(rootDir, config, mainJsFile, clientEntryFiles, serverBuildOutput, isNodeCompatible);
+    const clientBuildOutput = await buildClientBundle(rootDir, config, mainJsFile, clientEntryFiles, serverBuildOutput);
     const distEntries = await import(filePathToFileURL(distEntriesFile));
     const buildConfig = await getBuildConfig({
         config,
@@ -486,7 +492,7 @@ export async function build(options) {
     });
     await appendFile(distEntriesFile, `export const buildConfig = ${JSON.stringify(buildConfig)};`);
     const { getClientModules } = await emitRscFiles(rootDir, config, distEntries, buildConfig);
-    await emitHtmlFiles(rootDir, config, distEntriesFile, distEntries, buildConfig, getClientModules);
+    await emitHtmlFiles(rootDir, config, distEntriesFile, distEntries, buildConfig, getClientModules, clientBuildOutput);
     if (options.deploy?.startsWith('vercel-')) {
         await emitVercelOutput(rootDir, config, options.deploy.slice('vercel-'.length));
     } else if (options.deploy?.startsWith('netlify-')) {

package/dist/lib/config.d.ts

@@ -22,4 +22,5 @@ export declare function resolveConfig(config: Config): Promise<{
         default: import("./middleware/types.js").Middleware;
     }>[];
 }>;
+export declare const EXTENSIONS: string[];
 export {};

package/dist/lib/config.js

@@ -23,7 +23,7 @@ export async function resolveConfig(config) {
         assetsDir: 'assets',
         ssrDir: 'ssr',
         indexHtml: 'index.html',
-        mainJs: 'main.tsx',
+        mainJs: 'main.js',
         entriesJs: 'entries.js',
         preserveModuleDirs: [
             'pages',
@@ -43,3 +43,11 @@ export async function resolveConfig(config) {
     }
     return resolvedConfig;
 }
+export const EXTENSIONS = [
+    '.js',
+    '.ts',
+    '.tsx',
+    '.jsx',
+    '.mjs',
+    '.cjs'
+];