@adonisjs/vite 5.1.0 → 5.1.1

package/build/vite-DDpuL-Eo.js

@@ -0,0 +1,472 @@
+import { n as makeAttributes, r as uniqBy } from "./utils-CdZpa_tV.js";
+import { join } from "node:path";
+import string from "@poppinss/utils/string";
+import { existsSync, readFileSync } from "node:fs";
+//#region src/vite.ts
+const STYLE_FILE_REGEX = /\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\?)/;
+/**
+* Vite class exposes the APIs to generate tags and URLs for
+* assets processed using vite.
+*/
+var Vite = class {
+	/**
+	* We cache the manifest file content in production
+	* to avoid reading the file multiple times
+	*/
+	#manifestCache;
+	#options;
+	#devServer;
+	/**
+	* Indicates whether the Vite manifest file exists on disk
+	*/
+	hasManifestFile;
+	get useDevServer() {
+		return !!this.#devServer;
+	}
+	/**
+	* Creates a new Vite instance for managing asset compilation and serving
+	*
+	* @param options - Configuration options for Vite integration
+	*
+	* @example
+	* const vite = new Vite({
+	*   buildDirectory: 'build',
+	*   assetsUrl: '/assets',
+	*   manifestFile: 'build/manifest.json'
+	* })
+	*/
+	constructor(options) {
+		this.#options = options;
+		this.#options.assetsUrl = (this.#options.assetsUrl || "/").replace(/\/$/, "");
+		this.hasManifestFile = existsSync(this.#options.manifestFile);
+	}
+	/**
+	* Reads the file contents as JSON
+	*/
+	#readFileAsJSON(filePath) {
+		return JSON.parse(readFileSync(filePath, "utf-8"));
+	}
+	/**
+	* Generates a JSON element with a custom toString implementation
+	*/
+	#generateElement(element) {
+		return {
+			...element,
+			toString() {
+				const attributes = `${makeAttributes(element.attributes)}`;
+				if (element.tag === "link") return `<${element.tag} ${attributes}/>`;
+				return `<${element.tag} ${attributes}>${element.children.join("\n")}</${element.tag}>`;
+			}
+		};
+	}
+	/**
+	* Returns the script needed for the HMR working with Vite
+	*/
+	#getViteHmrScript(attributes) {
+		return this.#generateElement({
+			tag: "script",
+			attributes: {
+				type: "module",
+				src: "/@vite/client",
+				...attributes
+			},
+			children: []
+		});
+	}
+	/**
+	* Check if the given path is a CSS path
+	*/
+	#isCssPath(path) {
+		return path.match(STYLE_FILE_REGEX) !== null;
+	}
+	/**
+	* If the module is a style module
+	*/
+	#isStyleModule(mod) {
+		if (this.#isCssPath(mod.url) || mod.id && /\?vue&type=style/.test(mod.id)) return true;
+		return false;
+	}
+	/**
+	* Unwrap attributes from the user defined function or return
+	* the attributes as it is
+	*/
+	#unwrapAttributes(src, url, attributes) {
+		if (typeof attributes === "function") return attributes({
+			src,
+			url
+		});
+		return attributes;
+	}
+	/**
+	* Create a style tag for the given path
+	*/
+	#makeStyleTag(src, url, attributes) {
+		const customAttributes = this.#unwrapAttributes(src, url, this.#options?.styleAttributes);
+		return this.#generateElement({
+			tag: "link",
+			attributes: {
+				rel: "stylesheet",
+				...customAttributes,
+				...attributes,
+				href: url
+			}
+		});
+	}
+	/**
+	* Create a script tag for the given path
+	*/
+	#makeScriptTag(src, url, attributes) {
+		const customAttributes = this.#unwrapAttributes(src, url, this.#options?.scriptAttributes);
+		return this.#generateElement({
+			tag: "script",
+			attributes: {
+				type: "module",
+				...customAttributes,
+				...attributes,
+				src: url
+			},
+			children: []
+		});
+	}
+	/**
+	* Generate an asset URL for a given asset path
+	*/
+	#generateAssetUrl(path) {
+		return `${this.#options.assetsUrl}/${path}`;
+	}
+	/**
+	* Generate a HTML tag for the given asset
+	*/
+	#generateTag(asset, attributes) {
+		let url = "";
+		if (this.useDevServer) url = `/${asset}`;
+		else url = this.#generateAssetUrl(asset);
+		if (this.#isCssPath(asset)) return this.#makeStyleTag(asset, url, attributes);
+		return this.#makeScriptTag(asset, url, attributes);
+	}
+	/**
+	* Collect CSS files from the module graph recursively
+	*/
+	#collectCss(mod, styleUrls, visitedModules, importer) {
+		if (!mod.url) return;
+		/**
+		* Prevent visiting the same module twice
+		*/
+		if (visitedModules.has(mod.url)) return;
+		visitedModules.add(mod.url);
+		if (this.#isStyleModule(mod) && (!importer || !this.#isStyleModule(importer))) if (mod.url.startsWith("/")) styleUrls.add(mod.url);
+		else if (mod.url.startsWith("\0")) styleUrls.add(`/@id/__x00__${mod.url.substring(1)}`);
+		else styleUrls.add(`/@id/${mod.url}`);
+		mod.importedModules.forEach((dep) => this.#collectCss(dep, styleUrls, visitedModules, mod));
+	}
+	/**
+	* Generate style and script tags for the given entrypoints
+	* Also adds the @vite/client script
+	*/
+	async #generateEntryPointsTagsForDevMode(entryPoints, attributes) {
+		const server = this.getDevServer();
+		const tags = entryPoints.map((entrypoint) => this.#generateTag(entrypoint, attributes));
+		const jsEntrypoints = entryPoints.filter((entrypoint) => !this.#isCssPath(entrypoint));
+		/**
+		* If the module graph is empty, that means we didn't execute the entrypoint
+		* yet : we just started the AdonisJS dev server.
+		* So let's execute the entrypoints to populate the module graph
+		*/
+		if (server?.moduleGraph.idToModuleMap.size === 0) await Promise.allSettled(jsEntrypoints.map((entrypoint) => server.warmupRequest(`/${entrypoint}`)));
+		/**
+		* We need to collect the CSS files imported by the entrypoints
+		* Otherwise, we gonna have a FOUC each time we full reload the page
+		*/
+		const preloadUrls = /* @__PURE__ */ new Set();
+		const visitedModules = /* @__PURE__ */ new Set();
+		const cssTagsElement = /* @__PURE__ */ new Set();
+		/**
+		* Let's search for the CSS files by browsing the module graph
+		* generated by Vite.
+		*/
+		for (const entryPoint of jsEntrypoints) {
+			const filePath = join(server.config.root, entryPoint);
+			const entryMod = server.moduleGraph.getModuleById(string.toUnixSlash(filePath));
+			if (entryMod) this.#collectCss(entryMod, preloadUrls, visitedModules);
+		}
+		Array.from(preloadUrls).map((href) => this.#generateElement({
+			tag: "link",
+			attributes: {
+				rel: "stylesheet",
+				href
+			}
+		})).forEach((element) => cssTagsElement.add(element));
+		const viteHmr = this.#getViteHmrScript(attributes);
+		return [...cssTagsElement, viteHmr].concat(tags).sort((tag) => tag.tag === "link" ? -1 : 1);
+	}
+	/**
+	* Get a chunk from the manifest file for a given file name
+	*/
+	#chunk(manifest, entrypoint) {
+		const chunk = manifest[entrypoint];
+		if (!chunk) throw new Error(`Cannot find "${entrypoint}" chunk in the manifest file`);
+		return chunk;
+	}
+	/**
+	* Get a list of chunks for a given filename
+	*/
+	#chunksByFile(manifest, file) {
+		return Object.entries(manifest).filter(([, chunk]) => chunk.file === file).map(([_, chunk]) => chunk);
+	}
+	/**
+	* Generate preload tag for a given url
+	*/
+	#makePreloadTagForUrl(url) {
+		const attributes = this.#isCssPath(url) ? {
+			rel: "preload",
+			as: "style",
+			href: url
+		} : {
+			rel: "modulepreload",
+			href: url
+		};
+		return this.#generateElement({
+			tag: "link",
+			attributes
+		});
+	}
+	/**
+	* Generate style and script tags for the given entrypoints
+	* using the manifest file
+	*/
+	#generateEntryPointsTagsWithManifest(entryPoints, attributes) {
+		const manifest = this.manifest();
+		const tags = [];
+		const preloads = [];
+		for (const entryPoint of entryPoints) {
+			/**
+			* 1. We generate tags + modulepreload for the entrypoint
+			*/
+			const chunk = this.#chunk(manifest, entryPoint);
+			preloads.push({ path: this.#generateAssetUrl(chunk.file) });
+			tags.push({
+				path: chunk.file,
+				tag: this.#generateTag(chunk.file, {
+					...attributes,
+					integrity: chunk.integrity
+				})
+			});
+			/**
+			* 2. We go through the CSS files that are imported by the entrypoint
+			* and generate tags + preload for them
+			*/
+			for (const css of chunk.css || []) {
+				preloads.push({ path: this.#generateAssetUrl(css) });
+				tags.push({
+					path: css,
+					tag: this.#generateTag(css)
+				});
+			}
+			/**
+			* 3. We go through every import of the entrypoint and generate preload
+			*/
+			for (const importNode of chunk.imports || []) {
+				preloads.push({ path: this.#generateAssetUrl(manifest[importNode].file) });
+				/**
+				* 4. Finally, we generate tags + preload for the CSS files imported by the import
+				* of the entrypoint
+				*/
+				for (const css of manifest[importNode].css || []) {
+					const subChunk = this.#chunksByFile(manifest, css);
+					preloads.push({ path: this.#generateAssetUrl(css) });
+					tags.push({
+						path: this.#generateAssetUrl(css),
+						tag: this.#generateTag(css, {
+							...attributes,
+							integrity: subChunk[0]?.integrity
+						})
+					});
+				}
+			}
+		}
+		/**
+		* And finally, we return the preloads + script and link tags
+		*/
+		return uniqBy(preloads, "path").sort((preload) => this.#isCssPath(preload.path) ? -1 : 1).map((preload) => this.#makePreloadTagForUrl(preload.path)).concat(tags.map(({ tag }) => tag));
+	}
+	/**
+	* Generate HTML tags (script and link) for the specified entry points
+	*
+	* In development mode, includes HMR script and dynamically discovers CSS files.
+	* In production mode, uses the manifest file to generate optimized tags with preloading.
+	*
+	* @param entryPoints - Single entry point or array of entry points to generate tags for
+	* @param attributes - Additional HTML attributes to apply to the generated tags
+	*
+	* @example
+	* // Generate tags for a single entry point
+	* const tags = await vite.generateEntryPointsTags('app.js')
+	*
+	* @example
+	* // Generate tags for multiple entry points with custom attributes
+	* const tags = await vite.generateEntryPointsTags(
+	*   ['app.js', 'admin.js'],
+	*   { defer: true }
+	* )
+	*/
+	async generateEntryPointsTags(entryPoints, attributes) {
+		entryPoints = Array.isArray(entryPoints) ? entryPoints : [entryPoints];
+		if (this.useDevServer) return this.#generateEntryPointsTagsForDevMode(entryPoints, attributes);
+		return this.#generateEntryPointsTagsWithManifest(entryPoints, attributes);
+	}
+	/**
+	* Returns the base URL for serving static assets
+	*
+	* @example
+	* const url = vite.assetsUrl()
+	* // Returns: '/assets' or '/build' depending on configuration
+	*/
+	assetsUrl() {
+		return this.#options.assetsUrl;
+	}
+	/**
+	* Returns the full URL path to a specific asset file
+	*
+	* In development mode, returns the asset path with leading slash.
+	* In production mode, uses the manifest file to return the versioned/hashed asset URL.
+	*
+	* @param asset - The relative path to the asset file
+	*
+	* @example
+	* const path = vite.assetPath('images/logo.png')
+	* // Dev: '/images/logo.png'
+	* // Prod: '/assets/images/logo-abc123.png'
+	*/
+	assetPath(asset) {
+		if (this.useDevServer) return `/${asset}`;
+		const chunk = this.#chunk(this.manifest(), asset);
+		return this.#generateAssetUrl(chunk.file);
+	}
+	/**
+	* Returns the parsed Vite manifest file contents
+	*
+	* The manifest file contains information about compiled assets including
+	* file paths, integrity hashes, and import dependencies.
+	*
+	* @throws Will throw an exception when running in development mode
+	*
+	* @example
+	* const manifest = vite.manifest()
+	* console.log(manifest['app.js'].file) // 'assets/app-abc123.js'
+	*/
+	manifest() {
+		if (this.useDevServer) throw new Error("Cannot read the manifest file when running in dev mode");
+		if (!this.hasManifestFile) throw new Error("Missing manifest file. Make sure to first create a build");
+		if (!this.#manifestCache) this.#manifestCache = this.#readFileAsJSON(this.#options.manifestFile);
+		return this.#manifestCache;
+	}
+	/**
+	* Creates and initializes the Vite development server
+	*
+	* Lazy loads Vite APIs to avoid importing them in production.
+	* The server runs in middleware mode and is configured for custom app integration.
+	*
+	* @param options - Additional Vite configuration options to merge with defaults
+	*
+	* @example
+	* await vite.createDevServer({
+	*   root: './src',
+	*   server: { port: 3000 }
+	* })
+	*/
+	async createDevServer(options) {
+		const { createServer } = await import("vite");
+		const hmrPort = Number(process.env.VITE_HMR_PORT);
+		/**
+		* We do not await the server creation since it will
+		* slow down the boot process of AdonisJS
+		*/
+		this.#devServer = await createServer({
+			server: {
+				middlewareMode: true,
+				...hmrPort && !Number.isNaN(hmrPort) ? { hmr: { port: hmrPort } } : {}
+			},
+			appType: "custom",
+			...options
+		});
+	}
+	/**
+	* Creates a server-side module runner for executing modules in Node.js context
+	*
+	* Only available in development mode as it requires the Vite dev server.
+	* Useful for server-side rendering and module transformation.
+	*
+	* @param options - Configuration options for the module runner
+	*
+	* @example
+	* const runner = await vite.createModuleRunner({
+	*   hmr: { port: 24678 }
+	* })
+	* const mod = await runner.import('./app.js')
+	*/
+	async createModuleRunner(options = {}) {
+		const { createServerModuleRunner } = await import("vite");
+		return createServerModuleRunner(this.#devServer.environments.ssr, options);
+	}
+	/**
+	* Gracefully stops the Vite development server
+	*
+	* Waits for the server creation promise to complete before closing.
+	*
+	* @example
+	* await vite.stopDevServer()
+	*/
+	async stopDevServer() {
+		await this.#devServer?.close();
+	}
+	/**
+	* Returns the Vite development server instance
+	*
+	* Only available in development mode after calling createDevServer().
+	* Returns undefined in production or if the server hasn't been created yet.
+	*
+	* @example
+	* const server = vite.getDevServer()
+	* if (server) {
+	*   console.log('Dev server is running on', server.config.server.port)
+	* }
+	*/
+	getDevServer() {
+		return this.#devServer;
+	}
+	/**
+	* Generates the React Hot Module Replacement (HMR) script for development
+	*
+	* Only returns a script element in development mode. In production mode,
+	* returns null since HMR is not needed.
+	*
+	* @param attributes - Additional HTML attributes to apply to the script tag
+	*
+	* @example
+	* const hmrScript = vite.getReactHmrScript({ async: true })
+	* if (hmrScript) {
+	*   console.log(hmrScript.toString()) // <script type="module" async>...<\/script>
+	* }
+	*/
+	getReactHmrScript(attributes) {
+		if (!this.useDevServer) return null;
+		return this.#generateElement({
+			tag: "script",
+			attributes: {
+				type: "module",
+				...attributes
+			},
+			children: [
+				"",
+				`import RefreshRuntime from '/@react-refresh'`,
+				`RefreshRuntime.injectIntoGlobalHook(window)`,
+				`window.$RefreshReg$ = () => {}`,
+				`window.$RefreshSig$ = () => (type) => type`,
+				`window.__vite_plugin_react_preamble_installed__ = true`,
+				""
+			]
+		});
+	}
+};
+//#endregion
+export { Vite as t };

package/build/vite_middleware-Bszg_DDr.js

@@ -0,0 +1,71 @@
+//#region src/vite_middleware.ts
+/**
+* Middleware for proxying requests between AdonisJS and Vite development server
+*
+* Since Vite dev server is integrated within the AdonisJS process, this
+* middleware is used to proxy the requests to it.
+*
+* Some of the requests are directly handled by the Vite dev server,
+* like the one for the assets, while others are passed down to the
+* AdonisJS server.
+*/
+var ViteMiddleware = class {
+	/**
+	* Creates a new ViteMiddleware instance
+	*
+	* @param vite - The Vite instance containing the dev server
+	*
+	* @example
+	* const middleware = new ViteMiddleware(viteInstance)
+	*/
+	constructor(vite) {
+		this.vite = vite;
+	}
+	/**
+	* Handles HTTP requests by proxying them to the Vite dev server when appropriate
+	*
+	* @param request - The HTTP request object from AdonisJS context
+	* @param response - The HTTP response object from AdonisJS context
+	* @param next - Function to call the next middleware in the chain
+	*
+	* @example
+	* await middleware.handle(ctx, next)
+	*/
+	async handle({ request, response }, next) {
+		const devServer = this.vite.getDevServer();
+		if (!devServer) return next();
+		return new Promise((resolve, reject) => {
+			function done(error) {
+				response.response.removeListener("finish", done);
+				if (error) reject(error);
+				else resolve();
+			}
+			/**
+			* When vite handles the request, we will resolve this promise after the
+			* response is sent.
+			*/
+			response.response.addListener("finish", done);
+			/**
+			* Even if the request is not handled by Vite, we will relay headers
+			* to Node.js.
+			*/
+			response.relayHeaders();
+			devServer.middlewares.handle(request.request, response.response, async () => {
+				/**
+				* This callback is invoked when Vite does not handle the request. In that
+				* case, we will call next and resolve this promise. Also we remove the
+				* unneeded "finish" listener
+				*/
+				response.response.removeListener("finish", done);
+				try {
+					await next();
+					done();
+				} catch (error) {
+					done(error);
+				}
+			});
+		});
+	}
+};
+//#endregion
+export { ViteMiddleware as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adonisjs/vite",
   "description": "Vite plugin for AdonisJS",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "engines": {
     "node": ">=24.0.0"
   },
@@ -30,7 +30,7 @@
     "precompile": "npm run lint && npm run clean",
     "clean": "del-cli build",
     "copy:templates": "copyfiles --up 1 \"stubs/**/*.stub\" build",
-    "compile": "tsup-node && tsc --emitDeclarationOnly --declaration",
+    "compile": "tsdown && tsc --emitDeclarationOnly --declaration",
     "build": "npm run compile",
     "postbuild": "npm run copy:templates",
     "prebenchmark": "npm run build",
@@ -68,7 +68,7 @@
     "prettier": "^3.8.1",
     "release-it": "^19.2.4",
     "supertest": "^7.2.2",
-    "tsup": "^8.5.1",
+    "tsdown": "^0.21.2",
     "typedoc": "^0.28.17",
     "typescript": "~5.9.3",
     "vite": "^7.3.1"
@@ -140,7 +140,7 @@
       }
     }
   },
-  "tsup": {
+  "tsdown": {
     "entry": [
       "./src/hooks/build_hook.ts",
       "./providers/vite_provider.ts",
@@ -156,7 +156,8 @@
     "format": "esm",
     "dts": false,
     "sourcemap": false,
-    "target": "esnext"
+    "target": "esnext",
+    "fixedExtension": false
   },
   "c8": {
     "reporter": [

package/build/chunk-AF6PV64J.js

@@ -1,56 +0,0 @@
-// src/vite_middleware.ts
-var ViteMiddleware = class {
-  /**
-   * Creates a new ViteMiddleware instance
-   *
-   * @param vite - The Vite instance containing the dev server
-   *
-   * @example
-   * const middleware = new ViteMiddleware(viteInstance)
-   */
-  constructor(vite) {
-    this.vite = vite;
-    this.#devServer = this.vite.getDevServer();
-  }
-  #devServer;
-  /**
-   * Handles HTTP requests by proxying them to the Vite dev server when appropriate
-   *
-   * @param request - The HTTP request object from AdonisJS context
-   * @param response - The HTTP response object from AdonisJS context
-   * @param next - Function to call the next middleware in the chain
-   *
-   * @example
-   * await middleware.handle(ctx, next)
-   */
-  async handle({ request, response }, next) {
-    if (!this.#devServer) {
-      return next();
-    }
-    return new Promise((resolve, reject) => {
-      function done(error) {
-        response.response.removeListener("finish", done);
-        if (error) {
-          reject(error);
-        } else {
-          resolve();
-        }
-      }
-      response.response.addListener("finish", done);
-      response.relayHeaders();
-      this.#devServer.middlewares.handle(request.request, response.response, async () => {
-        response.response.removeListener("finish", done);
-        try {
-          await next();
-          done();
-        } catch (error) {
-          done(error);
-        }
-      });
-    });
-  }
-};
-
-export {
-  ViteMiddleware
-};