waku 0.19.1 → 0.19.3

package/README.md

@@ -27,17 +27,21 @@ Start a new Waku project with the `create` command for your preferred package ma
 npm create waku@latest
 ```
 
+**Node.js version requirement:** `^20.8.0 || ^18.16.0`
+
 ## Rendering
 
-Let's face it: React is getting complicated. But not without good reason!
+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).
+
+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.
 
-While there's a bit of a learning curve to modern React rendering, it introduces powerful new patterns of composability that are only possible with the advent of React server components. So stick with us.
+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 APIs to abstract away some of the complexity for an improved developer experience.
+> Future versions of Waku may provide additional opt-in APIs to abstract some of the complexity away for an improved developer experience.
 
 #### Server components
 
-Waku supports [server components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) and [server actions](https://react.dev/reference/react/use-server). Server components can be made async and can securely perform server-side logic and data fetching. Feel free to use heavy dependencies since they aren't included in the client bundle. They have no 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
@@ -115,7 +119,17 @@ export const Providers = ({ children }) => {
 
 #### Server-side rendering
 
-Waku provides static prerendering (SSG) or server-side rendering (SSR) options for layouts and pages including both their server and client components.
+SSR is a distinct concept from RSC. Waku provides static prerendering (SSG) or server-side rendering (SSR) options for both layouts and pages including all of their server _and_ client components.
+
+#### tl;dr:
+
+Each layout and page in Waku is composed of a React component heirarchy.
+
+It begins with a server component at the top of the tree. Then at points down the heirarchy, 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 heirarchy, all imported components are hydrated and will run in the browser as well.
+
+Server components can still be rendered below this boundary, but only via composition (e.g., `children` props). They form [a new layer](https://github.com/reactwg/server-components/discussions/4) that run _before_ any client code.
+
+Client components are still server-side rendered. SSR is seperate from RSC. See the [linked diagrams](https://github.com/reactwg/server-components/discussions/4) for a helpful visual.
 
 #### Further reading
 
@@ -362,7 +376,7 @@ export const Providers = ({ children }) => {
 
 #### Other layouts
 
-Layouts are also helpful further down the tree. For example, you could add a layout at `path: '/blog` to add a sidebar to both the blog index and all blog article pages.
+Layouts are also helpful further down the tree. For example, you could add a layout at `path: '/blog'` to add a sidebar to both the blog index and all blog article pages.
 
 ```tsx
 // ./src/entries.tsx
@@ -635,6 +649,27 @@ Adding the `--with-vercel-static` flag to the build script will produce static s
 }
 ```
 
+### Netlify
+
+Waku projects can be deployed to Netlify with the [Netlify CLI](https://docs.netlify.com/cli/get-started/).
+
+```
+npm run build -- --with-netlify
+netlify deploy --dir=dist/public
+```
+
+#### Pure SSG
+
+Adding the `--with-netlify-static` flag to the build script will produce static sites without Netlify functions.
+
+```
+{
+  "scripts": {
+    "build": "waku build --with-ssr --with-netlify-static"
+  }
+}
+```
+
 ### Cloudflare (experimental)
 
 ```
@@ -649,6 +684,14 @@ npm run build -- --with-deno
 DENO_DEPLOY_TOKEN=... deployctl deploy --project=... --prod dist/serve.js --exclude node_modules
 ```
 
+### AWS Lambda (experimental)
+
+```
+npm run build -- --with-aws-lambda
+```
+
+The handler entrypoint is `dist/serve.js` - see [Hono AWS Lambda Deploy Docs](https://hono.dev/getting-started/aws-lambda#_3-deploy)
+
 ## Community
 
 Please join our friendly [GitHub discussions](https://github.com/dai-shi/waku/discussions) or [Discord server](https://discord.gg/MrQdmzd) to participate in the Waku community. Hope to see you there!

package/cli.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+// eslint-disable-next-line import/no-unresolved
+import './dist/cli.js';

package/dist/cli.d.ts

@@ -1,2 +1 @@
-#!/usr/bin/env node
 export {};

package/dist/cli.js

@@ -1,6 +1,5 @@
-#!/usr/bin/env node
 import path from 'node:path';
-import { existsSync, readFileSync, writeFileSync, unlinkSync } from 'node:fs';
+import { existsSync, writeFileSync, unlinkSync } from 'node:fs';
 import { pathToFileURL } from 'node:url';
 import { parseArgs } from 'node:util';
 import { createRequire } from 'node:module';
@@ -9,11 +8,18 @@ import { Hono } from 'hono';
 import { serve } from '@hono/node-server';
 import { serveStatic } from '@hono/node-server/serve-static';
 import * as swc from '@swc/core';
+import * as dotenv from 'dotenv';
 import { resolveConfig } from './lib/config.js';
 import { honoMiddleware as honoDevMiddleware } from './lib/middleware/hono-dev.js';
 import { honoMiddleware as honoPrdMiddleware } from './lib/middleware/hono-prd.js';
 import { build } from './lib/builder/build.js';
 const require = createRequire(new URL('.', import.meta.url));
+dotenv.config({
+    path: [
+        '.env.local',
+        '.env'
+    ]
+});
 const { values, positionals } = parseArgs({
     args: process.argv.slice(2),
     allowPositionals: true,
@@ -33,6 +39,15 @@ const { values, positionals } = parseArgs({
         'with-deno': {
             type: 'boolean'
         },
+        'with-netlify': {
+            type: 'boolean'
+        },
+        'with-netlify-static': {
+            type: 'boolean'
+        },
+        'with-aws-lambda': {
+            type: 'boolean'
+        },
         version: {
             type: 'boolean',
             short: 'v'
@@ -43,7 +58,6 @@ const { values, positionals } = parseArgs({
         }
     }
 });
-loadEnv();
 const config = await loadConfig();
 const cmd = positionals[0];
 if (values.version) {
@@ -92,22 +106,22 @@ async function runBuild(options) {
         ...options,
         config,
         env: process.env,
-        deploy: (values['with-vercel'] ?? !!process.env.VERCEL ? values['with-vercel-static'] ? 'vercel-static' : 'vercel-serverless' : undefined) || (values['with-cloudflare'] ? 'cloudflare' : undefined) || (values['with-deno'] ? 'deno' : undefined)
+        deploy: (values['with-vercel'] ?? !!process.env.VERCEL ? values['with-vercel-static'] ? 'vercel-static' : 'vercel-serverless' : undefined) || (values['with-cloudflare'] ? 'cloudflare' : undefined) || (values['with-deno'] ? 'deno' : undefined) || (values['with-netlify'] ?? !!process.env.NETLIFY ? values['with-netlify-static'] ? 'netlify-static' : 'netlify-functions' : undefined) || (values['with-aws-lambda'] ? 'aws-lambda' : undefined)
     });
 }
 async function runStart(options) {
     const { distDir, publicDir, entriesJs } = await resolveConfig(config);
     const loadEntries = ()=>import(pathToFileURL(path.resolve(distDir, entriesJs)).toString());
     const app = new Hono();
+    app.use('*', serveStatic({
+        root: path.join(distDir, publicDir)
+    }));
     app.use('*', honoPrdMiddleware({
         ...options,
         config,
         loadEntries,
         env: process.env
     }));
-    app.use('*', serveStatic({
-        root: path.join(distDir, publicDir)
-    }));
     const port = parseInt(process.env.PORT || '8080', 10);
     startServer(app, port);
 }
@@ -141,27 +155,12 @@ Options:
   --with-vercel         Output for Vercel on build
   --with-cloudflare     Output for Cloudflare on build
   --with-deno           Output for Deno on build
+  --with-netlify        Output for Netlify on build
+  --with-aws-lambda     Output for AWS Lambda on build
   -v, --version         Display the version number
   -h, --help            Display this help message
 `);
 }
-// TODO consider using a library such as `dotenv`
-function loadEnv() {
-    if (existsSync('.env.local')) {
-        for (const line of readFileSync('.env.local', 'utf8').split('\n')){
-            const [key, value] = line.split('=');
-            if (key && value) {
-                if (value.startsWith('"') && value.endsWith('"')) {
-                    process.env[key.trim()] = value.slice(1, -1);
-                } else if (value.startsWith("'") && value.endsWith("'")) {
-                    process.env[key.trim()] = value.slice(1, -1);
-                } else {
-                    process.env[key.trim()] = value.trim();
-                }
-            }
-        }
-    }
-}
 // TODO is this a good idea?
 async function loadConfig() {
     if (!existsSync('waku.config.ts')) {

package/dist/client.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 type Elements = Promise<Record<string, ReactNode>>;
-type SetElements = (fn: (prev: Elements) => Elements) => void;
+type SetElements = (updater: Elements | ((prev: Elements) => Elements)) => void;
 type CacheEntry = [
     input: string,
     searchParamsString: string,

package/dist/client.js

@@ -2,7 +2,7 @@
 'use client';
 import { createContext, createElement, memo, use, useCallback, useState, startTransition } from 'react';
 import RSDWClient from 'react-server-dom-webpack/client';
-import { encodeInput } from './lib/renderers/utils.js';
+import { encodeInput, encodeActionId } from './lib/renderers/utils.js';
 const { createFromFetch, encodeReply } = RSDWClient;
 const BASE_PATH = `${import.meta.env?.WAKU_CONFIG_BASE_PATH}${import.meta.env?.WAKU_CONFIG_RSC_PATH}/`;
 const checkStatus = async (responsePromise)=>{
@@ -37,7 +37,7 @@ export const fetchRSC = (input, searchParamsString, setElements, cache = fetchCa
     }
     const options = {
         async callServer (actionId, args) {
-            const response = fetch(BASE_PATH + encodeInput(encodeURIComponent(actionId)), {
+            const response = fetch(BASE_PATH + encodeInput(encodeActionId(actionId)), {
                 method: 'POST',
                 body: await encodeReply(args)
             });

package/dist/config.d.ts

@@ -27,6 +27,11 @@ export interface Config {
      * Defaults to "assets".
      */
     assetsDir?: string;
+    /**
+     * The SSR directory relative to distDir.
+     * Defaults to "ssr".
+     */
+    ssrDir?: string;
     /**
      * The index.html file for any directories.
      * Defaults to "index.html".

package/dist/lib/builder/build.d.ts

@@ -3,5 +3,5 @@ export declare function build(options: {
     config?: Config;
     ssr?: boolean;
     env?: Record<string, string>;
-    deploy?: 'vercel-static' | 'vercel-serverless' | 'cloudflare' | 'deno' | undefined;
+    deploy?: 'vercel-static' | 'vercel-serverless' | 'cloudflare' | 'deno' | 'netlify-static' | 'netlify-functions' | 'aws-lambda' | undefined;
 }): Promise<void>;