what-server 0.5.3 → 0.5.5

package/README.md

@@ -0,0 +1,136 @@
+# what-server
+
+Server-side rendering, streaming, islands architecture, and static site generation for [What Framework](https://whatfw.com). Zero JavaScript shipped by default -- islands opt in to client interactivity.
+
+## Install
+
+```bash
+npm install what-server what-core
+```
+
+Or use via the main package:
+
+```js
+import { renderToString, renderToStream } from 'what-framework/server';
+```
+
+## Render to String
+
+```js
+import { renderToString } from 'what-server';
+import { h } from 'what-core';
+
+function App() {
+  return h('div', null,
+    h('h1', null, 'Hello from the server'),
+    h('p', null, 'This page ships zero JavaScript.')
+  );
+}
+
+const html = renderToString(h(App));
+// <div><h1>Hello from the server</h1><p>This page ships zero JavaScript.</p></div>
+```
+
+## Streaming SSR
+
+```js
+import { renderToStream } from 'what-server';
+
+for await (const chunk of renderToStream(h(App))) {
+  response.write(chunk);
+}
+response.end();
+```
+
+## Page Modes
+
+```js
+import { definePage } from 'what-server';
+
+export const page = definePage({
+  mode: 'static',  // Pre-render at build time (default)
+  // mode: 'server'  // Render on each request
+  // mode: 'client'  // Render in browser (SPA)
+  // mode: 'hybrid'  // Static shell + interactive islands
+});
+```
+
+## Static Generation
+
+```js
+import { generateStaticPage } from 'what-server';
+
+const html = generateStaticPage({
+  component: App,
+  title: 'My Page',
+  meta: { description: 'A statically generated page' },
+  mode: 'static',
+});
+```
+
+## Server Components
+
+Mark components as server-only. They render on the server and ship no JavaScript to the client.
+
+```js
+import { server } from 'what-server';
+
+const Header = server(({ title }) => h('header', null, title));
+```
+
+## Server Actions
+
+```js
+import { action, useAction, formAction, useFormAction } from 'what-server/actions';
+
+// Define a server action
+const addTodo = action(async (text) => {
+  await db.todos.create({ text });
+});
+
+// Use in a component
+function TodoForm() {
+  const { execute, isPending } = useAction(addTodo);
+  return h('button', { onclick: () => execute('New todo') }, 'Add');
+}
+
+// Form action
+const submitForm = formAction(async (formData) => {
+  const email = formData.get('email');
+  await subscribe(email);
+});
+```
+
+## Sub-path Exports
+
+| Path | Contents |
+|---|---|
+| `what-server` | `renderToString`, `renderToStream`, `definePage`, `generateStaticPage`, `server` |
+| `what-server/islands` | Islands hydration runtime |
+| `what-server/actions` | Server actions and mutations |
+
+## API
+
+| Export | Description |
+|---|---|
+| `renderToString(vnode)` | Render a component tree to an HTML string |
+| `renderToStream(vnode)` | Render as an async iterator for streaming |
+| `definePage(config)` | Define page rendering mode and metadata |
+| `generateStaticPage(page, data?)` | Generate a full HTML document |
+| `server(Component)` | Mark a component as server-only |
+| `action(fn)` | Define a server action |
+| `formAction(fn)` | Define a form-based server action |
+| `useAction(action)` | Hook to call a server action |
+| `useFormAction(action)` | Hook for form server actions |
+| `useOptimistic(state)` | Optimistic UI updates |
+| `useMutation(fn)` | Mutation with loading/error states |
+| `invalidatePath(path)` | Revalidate a page path |
+
+## Links
+
+- [Documentation](https://whatfw.com)
+- [GitHub](https://github.com/CelsianJs/whatfw)
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-server",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "What Framework - SSR, islands architecture, static generation",
   "type": "module",
   "main": "src/index.js",
@@ -29,17 +29,17 @@
     "server-rendering",
     "what-framework"
   ],
-  "author": "",
+  "author": "ZVN DEV (https://zvndev.com)",
   "license": "MIT",
   "peerDependencies": {
     "what-core": "^0.5.3"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/zvndev/what-fw"
+    "url": "https://github.com/CelsianJs/whatfw"
   },
   "bugs": {
-    "url": "https://github.com/zvndev/what-fw/issues"
+    "url": "https://github.com/CelsianJs/whatfw/issues"
   },
-  "homepage": "https://whatframework.dev"
+  "homepage": "https://whatfw.com"
 }

package/src/actions.js

@@ -17,7 +17,6 @@ import { signal, batch } from 'what-core';
 
 // Registry of server actions
 const actionRegistry = new Map();
-let actionIdCounter = 0;
 
 // --- CSRF Protection ---
 // Server generates a token per session; client sends it with every action request.
@@ -170,11 +169,15 @@ export function formAction(actionFn, options = {}) {
       formData = formDataOrEvent;
     }
 
-    // Convert FormData to plain object
+    // Convert FormData to plain object, preserving File instances
     const data = {};
+    let hasFiles = false;
     for (const [key, value] of formData.entries()) {
+      if (typeof File !== 'undefined' && value instanceof File) {
+        hasFiles = true;
+      }
       if (data[key]) {
-        // Handle multiple values (e.g., checkboxes)
+        // Handle multiple values (e.g., checkboxes, multi-file inputs)
         if (Array.isArray(data[key])) {
           data[key].push(value);
         } else {
@@ -186,7 +189,11 @@ export function formAction(actionFn, options = {}) {
     }
 
     try {
-      const result = await actionFn(data);
+      // If form contains files, pass the raw FormData as second arg
+      // so the action handler can access files directly
+      const result = hasFiles
+        ? await actionFn(data, formData)
+        : await actionFn(data);
       if (onSuccess) onSuccess(result, form);
       if (resetOnSuccess && form) form.reset();
       return result;

package/src/index.js

@@ -15,6 +15,23 @@ export function renderToString(vnode) {
     return escapeHtml(String(vnode));
   }
 
+  // Signal — unwrap by calling it
+  if (typeof vnode === 'function' && vnode._signal) {
+    return renderToString(vnode());
+  }
+
+  // Reactive function child — call to get value
+  if (typeof vnode === 'function') {
+    try {
+      return renderToString(vnode());
+    } catch (e) {
+      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+        console.warn('[what-server] Error rendering reactive function in SSR:', e.message);
+      }
+      return '';
+    }
+  }
+
   // Array
   if (Array.isArray(vnode)) {
     return vnode.map(renderToString).join('');
@@ -52,6 +69,24 @@ export async function* renderToStream(vnode) {
     return;
   }
 
+  // Signal — unwrap by calling it
+  if (typeof vnode === 'function' && vnode._signal) {
+    yield* renderToStream(vnode());
+    return;
+  }
+
+  // Reactive function child — call to get value
+  if (typeof vnode === 'function') {
+    try {
+      yield* renderToStream(vnode());
+    } catch (e) {
+      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+        console.warn('[what-server] Error rendering reactive function in stream SSR:', e.message);
+      }
+    }
+    return;
+  }
+
   if (Array.isArray(vnode)) {
     for (const child of vnode) {
       yield* renderToStream(child);
@@ -60,10 +95,17 @@ export async function* renderToStream(vnode) {
   }
 
   if (typeof vnode.tag === 'function') {
-    const result = vnode.tag({ ...vnode.props, children: vnode.children });
-    // Support async components
-    const resolved = result instanceof Promise ? await result : result;
-    yield* renderToStream(resolved);
+    try {
+      const result = vnode.tag({ ...vnode.props, children: vnode.children });
+      // Support async components
+      const resolved = result instanceof Promise ? await result : result;
+      yield* renderToStream(resolved);
+    } catch (e) {
+      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+        console.warn('[what-server] Error rendering component in stream SSR:', e.message);
+      }
+      yield `<!-- SSR Error: ${escapeHtml(e.message || 'Component error')} -->`;
+    }
     return;
   }
 
@@ -181,7 +223,12 @@ function renderAttrs(props) {
         .join(';');
       out += ` style="${escapeHtml(css)}"`;
     } else if (val === true) {
-      out += ` ${key}`;
+      // ARIA attributes require explicit ="true", HTML boolean attrs can be bare
+      if (key.startsWith('aria-') || key === 'role') {
+        out += ` ${key}="true"`;
+      } else {
+        out += ` ${key}`;
+      }
     } else {
       out += ` ${key}="${escapeHtml(String(val))}"`;
     }
@@ -199,6 +246,7 @@ function escapeHtml(str) {
 }
 
 function camelToKebab(str) {
+  if (str.startsWith('--')) return str; // CSS custom properties (variables) — leave unchanged
   return str.replace(/([A-Z])/g, '-$1').toLowerCase();
 }
 
@@ -219,4 +267,7 @@ export {
   invalidatePath,
   handleActionRequest,
   getRegisteredActions,
+  generateCsrfToken,
+  validateCsrfToken,
+  csrfMetaTag,
 } from './actions.js';