tonka-vite-plugin 1.11.0 → 1.30.0

package/README.md

@@ -1 +1,85 @@
-# inertia-vite-plugin
+# Tonka Vite Plugin 🔌
+
+The official Vite plugin for the [**Tonka Framework**](https://clicalmani.github.io/tonka).
+
+This plugin automates the configuration of Vite for applications using **InertiaJS** and **React**. It handles the tedious setup of entry points, build directories, SSR (Server-Side Rendering), and asset manifest generation, ensuring your frontend and backend work together seamlessly.
+
+## 🌟 Features
+
+*   ⚙️ **Zero-Config Setup**: Automatically configures input files, output directories, and the manifest (`manifest.json`) required by the backend.
+*   🚀 **SSR Support**: Built-in configuration for Server-Side Rendering to enable instant initial page loads.
+*   🔄 **HMR Ready**: Supports React Fast Refresh configuration.
+*   🛣️ **Smart Aliases**: Defaults to a clean `@` alias for your project root or custom paths.
+*   📦 **TypeScript**: Fully typed with TypeScript for a great developer experience.
+
+## 📦 Installation
+
+Since this is a local plugin specific to your Tonka setup, copy the plugin file into your project root.
+
+1.  Create a file named `tonka-vite-plugin.ts` (or `.js`) in your project root.
+2.  Paste the code provided in the documentation into this file.
+
+## 🚀 Quick Start
+
+Import the plugin into your `vite.config.ts` to activate it.
+
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tonka from './tonka-vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    tonka({
+      // Entry points for the build
+      input: ['resources/css/app.css', 'resources/js/app.tsx'],
+      
+      // Enable Server-Side Rendering
+      ssr: 'resources/js/ssr.tsx',
+      
+      // Enable React Fast Refresh
+      refresh: true,
+    }),
+    react(),
+  ],
+});
+```
+
+## ⚙️ Configuration Options
+
+The plugin accepts a configuration object to customize its behavior.
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `input` | `string \| string[] \| Record` | `['resources/css/app.css', 'resources/js/app.tsx']` | The entry points for the build. Maps to `rollupOptions.input`. |
+| `ssr` | `string \| false` | `false` | The entry point file for the SSR build. Set to the path of your SSR entry file (e.g., `resources/js/ssr.tsx`) to enable SSR. |
+| `refresh` | `boolean` | `false` | Enables support for React Fast Refresh (HMR). Note: The actual script injection is handled by the backend `@vite` directive. |
+| `outDir` | `string` | `'public/build'` | The directory where the compiled assets will be output. |
+| `assetsDir` | `string` | `'assets'` | The directory inside `outDir` to place assets. |
+| `manifest` | `boolean` | `true` | Whether to generate a `manifest.json` file in the output directory. Required for the backend `@vite` directive. |
+| `alias` | `Record<string, string>` | `{ '@': '.' }` | Path aliases for module resolution. |
+
+## 🔍 How it Works
+
+### 1. Build Configuration
+When you run `npm run build`, the plugin automatically configures Rollup (the bundler inside Vite) to output your files to `public/build` (or your specified `outDir`) and generates a `manifest.json` that maps your source files (e.g., `resources/js/app.tsx`) to their hashed filenames (e.g., `app.a1b2c.js`).
+
+### 2. SSR Support
+If you provide an `ssr` entry point, the plugin configures Vite to perform a second build specifically for the server. This allows your backend (Tonka) to render the initial page state on the server for faster load times and SEO.
+
+### 3. Integration with Backend
+The plugin prepares the assets, but the **injection** of the `<script>` tags into the HTML is handled by your backend (Tonka) via the `@vite` Blade directive. This ensures that the correct script source is used:
+*   **Dev**: Points to `http://localhost:5173/@vite/client` (for HMR).
+*   **Prod**: Points to `/build/assets/xxxxx.js` (using the manifest).
+
+## 🛠️ Development vs Production
+
+**In Development:**
+The plugin ensures the dev server runs on port 5173 and resolves aliases correctly. It relies on the backend to proxy requests or inject the client script.
+
+**In Production:**
+The plugin is essential to correctly generate the `manifest.json`. Without this plugin generating the manifest, your backend would fail to locate the compiled `.js` files after a build.
+
+## 📝 License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+import { TonkaPluginOptions } from '../types';
+export default function tonkaPlugin(options?: TonkaPluginOptions): Plugin;

package/dist/index.js

@@ -0,0 +1,42 @@
+import path from 'path';
+export default function tonkaPlugin(options = {}) {
+    const root = process.cwd();
+    return {
+        name: 'tonka-vite-plugin',
+        config: (userConfig, { command }) => {
+            const input = options.input || {
+                'resources/css/app.css': undefined,
+                'resources/js/app.tsx': undefined,
+            };
+            const outDir = options.outDir || path.resolve(root, 'public/build');
+            const manifest = options.manifest !== false ? 'manifest.json' : false;
+            const ssrBuild = options.ssr ? options.ssr : false;
+            return {
+                build: {
+                    outDir: outDir,
+                    manifest: manifest,
+                    assetsDir: options.assetsDir || 'assets',
+                    rollupOptions: {
+                        input: input,
+                    },
+                    ssr: ssrBuild,
+                    sourcemap: command === 'serve',
+                },
+                resolve: {
+                    alias: options.alias || {
+                        '@': path.resolve(root, '.'),
+                    },
+                },
+                optimizeDeps: {
+                    include: ['react', 'react-dom', '@inertiajs/react', 'axios'],
+                    exclude: [],
+                },
+            };
+        },
+        transformIndexHtml(html) {
+            if (options.refresh) {
+            }
+            return html;
+        },
+    };
+}

package/package.json

@@ -1,24 +1,35 @@
-{
-  "name": "tonka-vite-plugin",
-  "version": "1.11.0",
-  "description": "Tonka vite plugin for Inertia",
-  "main": "./bin/index.js",
-  "types": "./lib/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/clicalmani/inertia-vite-plugin.git"
-  },
-  "keywords": [
-    "Inertia",
-    "vite"
-  ],
-  "author": "@clicalmani",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/clicalmani/inertia-vite-plugin/issues"
-  },
-  "homepage": "https://github.com/clicalmani/inertia-vite-plugin#readme"
-}
+{
+  "name": "tonka-vite-plugin",
+  "version": "1.30.0",
+  "description": "A Vite plugin for Inertia.js that provides automatic page imports and enhanced development experience.",
+  "main": "./dist/index.js",       
+  "types": "./dist/index.d.ts",     
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "scripts": {
+    "build": "tsc" 
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0" 
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clicalmani/inertia-vite-plugin.git"
+  },
+  "keywords": [
+    "Inertia",
+    "vite"
+  ],
+  "author": "@clicalmani",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/clicalmani/inertia-vite-plugin/issues"
+  },
+  "homepage": "https://github.com/clicalmani/inertia-vite-plugin#readme"
+}

package/types/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Interface for the options passed to the Tonka plugin.
+ * This defines the shape of the configuration object in `vite.config.ts`.
+ */
+export interface TonkaPluginOptions {
+  /**
+   * Entry points for the build.
+   * Can be an array of file paths or an object (for named chunks).
+   */
+  input?: string | string[] | Record<string, string>;
+
+  /**
+   * The entry point for Server-Side Rendering (SSR).
+   * Provide a file path string to enable SSR, or false to disable it.
+   */
+  ssr?: string | false;
+
+  /**
+   * Whether to enable React Fast Refresh (HMR).
+   * If true, the plugin may attempt to configure HMR settings.
+   */
+  refresh?: boolean;
+
+  /**
+   * The output directory for the production build.
+   * Defaults to 'public/build'.
+   */
+  outDir?: string;
+
+  /**
+   * The directory inside `outDir` for assets.
+   */
+  assetsDir?: string;
+
+  /**
+   * Path aliases (e.g., '@' to point to the root or resources).
+   */
+  alias?: Record<string, string>;
+  
+  /**
+   * Whether to generate a manifest.json file.
+   * Defaults to true for production.
+   */
+  manifest?: boolean;
+}

package/bin/index.js

@@ -1,12 +0,0 @@
-import fs from 'fs';
-export default function() {
-    return {
-        name: 'rollup-plugin-tonka-vite',
-        transformIndexHtml: {
-            order: 'pre',
-            async handler() {
-                return await fs.promises.readFile('./resources/views/app.twig.php', 'utf8');
-            }
-        }
-    }
-}

package/lib/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * Do an index transform
- * 
- * @param string source
- * @return Promise<string>
- */
-export default () => Promise<string>