vite-plugin-server-actions 0.1.0 → 0.1.1

package/.nvmrc

@@ -0,0 +1 @@
+v20.17.0

package/README.md

@@ -1,15 +1,13 @@
-# 🚀 Vite Server Actions
+# ⚡ Vite Server Actions
 
 [![npm version](https://img.shields.io/npm/v/vite-plugin-server-actions.svg?style=flat)](https://www.npmjs.com/package/vite-plugin-server-actions)
 [![Downloads](https://img.shields.io/npm/dm/vite-plugin-server-actions.svg?style=flat)](https://www.npmjs.com/package/vite-plugin-server-actions)
-[![Build Status](https://img.shields.io/github/workflow/status/HelgeSverre/vite-plugin-server-actions/CI)](https://github.com/HelgeSverre/vite-plugin-server-actions/actions)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 > 🚧 **Experimental:** This is currently a proof of concept. Use at your own risk.
 
-
-**Vite Server Actions** is a Vite plugin that makes it easy to create functions (actions) that runs on the server, while
-allowing you to call them from the client-side as if they were local functions.
+**Vite Server Actions** is a Vite plugin that enables you to create server-side functions and call them from your
+client-side code as if they were local functions.
 
 ## ✨ Features
 
@@ -26,22 +24,30 @@ allowing you to call them from the client-side as if they were local functions.
 # Install using npm
 npm install vite-plugin-server-actions
 
-# Install using yarn
+# Or using yarn
 yarn add vite-plugin-server-actions
 ```
 
-2. Add to your `vite.config.js`:
+2. Add it to your `vite.config.js` file ([example](examples/todo-app/vite.config.js)):
 
 ```javascript
-import {defineConfig} from "vite";
-import serverActions from "helgesverre/vite-plugin-server-actions";
+// vite.config.js
+import { defineConfig } from "vite";
+
+// Import the plugin
+import serverActions from "vite-plugin-server-actions";
 
 export default defineConfig({
-  plugins: [serverActions()],
+  plugins: [
+    // Add the plugin
+    serverActions(),
+  ],
 });
 ```
 
-3. Create a `[whatever].server.js` file anywhere in your project:
+2. Create a server action file (e.g., `todo.server.js`):
+
+You can put it anywhere in your project, but it has to end with `.server.js`.
 
 ```javascript
 // ex: src/actions/todo.server.js
@@ -88,12 +94,12 @@ export async function listTodos() {
     await saveTodoToJsonFile({ id: Math.random(), text: newTodoText });
     newTodoText = "";
     await fetchTodos();
-  }
+}
 
   async function removeTodo(id) {
     await deleteTodoById(id);
     await fetchTodos();
-  }
+}
 
   fetchTodos();
 </script>
@@ -113,44 +119,26 @@ export async function listTodos() {
 </div>
 ```
 
-## 🤯 How it works
-
-Vite Server Actions works by creating an API endpoint for each server function you define.
-
-When you import a server action in your client-side code, Vite Server Actions will intercept the import and return a
-proxy function that sends a request to the server endpoint instead of executing the function locally.
-
-In development mode, the server is run as a middleware in the Vite dev server, while in production mode, the server is
-bundled into a single file that can be run with Node.js.
-
-### Sequence Diagram
-
-```mermaid
-sequenceDiagram
-  participant Client
-  participant Vite Dev Server
-  participant Plugin Middleware
-  participant Server Function
-  participant File System
-  Client ->> Vite Dev Server: import { addTodo } from './server/todos.server.js'
-  Vite Dev Server ->> Client: Returns proxied function
-  Client ->> Client: Call addTodo({ text: 'New todo' })
-  Client ->> Vite Dev Server: POST /api/todos/addTodo
-  Vite Dev Server ->> Plugin Middleware: Handle POST request
-  Plugin Middleware ->> Server Function: Call addTodo function
-  Server Function ->> File System: Read todos.json
-  File System ->> Server Function: Return current todos
-  Server Function ->> Server Function: Add new todo
-  Server Function ->> File System: Write updated todos.json
-  File System ->> Server Function: Write confirmation
-  Server Function ->> Plugin Middleware: Return new todo
-  Plugin Middleware ->> Vite Dev Server: Send JSON response
-  Vite Dev Server ->> Client: Return new todo data
-```
+That's it! Your server actions are now ready to use. 🎉
+
+## 📝 Examples
+
+To see a real-world example of how to use Vite Server Actions, check out the TODO app example:
+
+- [TODO App Example](examples/todo-app/README.md)
+
+## 📚 How it works
+
+**Vite Server Actions** creates an API endpoint for each server function you define. When you import a server action in
+your client-side code, it returns a proxy function) that sends a request to the server endpoint instead of executing the
+function locally.
+
+In _development_, the server actions run as a middleware in the Vite dev server.
+While in _production_, it's bundled into a single file that can be run with Node.js.
 
 ## 🔧 Configuration
 
-Vite Server Actions works out of the box, but you can customize it:
+Vite Server Actions works out of the box, but you can customize it by passing options to the plugin:
 
 ```javascript
 serverActions({
@@ -160,15 +148,7 @@ serverActions({
 
 ## 🛠️ Configuration Options
 
-TODO: Add configuration options and descriptions
-
-| Option           | Type                                   | Default     | Description                      |
-|------------------|----------------------------------------|-------------|----------------------------------|
-| logLevel         | 'error' \| 'warn' \| 'info' \| 'debug' | 'info'      | Server log level                 |
-| serverPath       | string                                 | '/api'      | Base path for server endpoints   |
-| serverPort       | number                                 | 3000        | Port for the server              |
-| serverHost       | string                                 | 'localhost' | Host for the server              |
-| serverMiddleware | (app: Express) => void                 | -           | Custom middleware for the server |
+Coming soon...
 
 ## TODO
 
@@ -182,10 +162,22 @@ This is a proof of concept, and things are still missing, such as:
 - [ ] Add more examples (Vue, React, etc.)
 - [ ] Publish to npm
 
-## 🤝 Contributing
+## 🧑‍💻 Development Setup
 
-Contributions, issues, and feature requests are welcome! Feel free to
-check [issues page](https://github.com/helgesverre/vite-plugin-server-actions/issues).
+To set up the project for development, follow these steps:
+
+```shell
+# Clone the repository
+git clone git@github.com:HelgeSverre/vite-plugin-server-actions.git
+cd vite-plugin-server-actions
+
+# Install dependencies
+npm install
+npm run dev
+
+# Format code
+npm run format
+```
 
 ## 📝 License
 

package/package.json

@@ -1,30 +1,31 @@
 {
   "name": "vite-plugin-server-actions",
+  "version": "0.1.1",
   "description": "Automatically proxy imported backend functions to a server endpoint in Vite",
-  "version": "0.1.0",
-  "type": "module",
   "keywords": [
     "vite-plugin",
     "server",
     "actions"
   ],
-  "license": "MIT",
   "homepage": "https://github.com/HelgeSverre/vite-plugin-server-actions",
+  "bugs": {
+    "url": "https://github.com/HelgeSverre/vite-plugin-server-actions/issues"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/HelgeSverre/vite-plugin-server-actions"
   },
-  "bugs": {
-    "url": "https://github.com/HelgeSverre/vite-plugin-server-actions/issues"
-  },
-  "readme": "README.md",
+  "license": "MIT",
   "author": {
     "name": "Helge Sverre",
     "email": "helge.sverre@gmail.com",
     "url": "https://helgesver.re"
   },
+  "type": "module",
   "main": "src/index.js",
   "scripts": {
+    "example:build": "npm run build --prefix examples/todo-app",
+    "example:dev": "npm run dev --prefix examples/todo-app",
     "format": "npx prettier --write src/ README.md",
     "sort": "npx sort-package-json"
   },
@@ -34,6 +35,7 @@
     "vitest": "^0.34.0"
   },
   "peerDependencies": {
-    "vite": "^2.0.0 || ^3.0.0 || ^4.0.0"
-  }
+    "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
+  },
+  "readme": "README.md"
 }