@adonisjs/vite 0.0.1-0 → 0.0.1-10

package/build/src/backend/vite.js

@@ -1,67 +1,175 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
 import { existsSync, readFileSync } from 'node:fs';
-import { uniqBy } from './utils.js';
+import debug from './debug.js';
+import { makeAttributes, uniqBy } from './utils.js';
+/**
+ * Vite class exposes the APIs to generate tags and URLs for
+ * assets processed using vite.
+ */
 export class Vite {
-    application;
-    #buildDirectory;
-    #hotFile;
+    /**
+     * Manifest file name
+     */
     #manifestFilename = 'manifest.json';
-    #assetsUrl = '';
+    /**
+     * We cache the manifest file content in production
+     * to avoid reading the file multiple times
+     */
     #manifestCache = null;
-    #styleAttributes = {};
-    #scriptAttributes = {};
-    constructor(application) {
-        this.application = application;
-        this.#buildDirectory = this.application.publicPath('assets');
-        this.#hotFile = join(this.#buildDirectory, 'hot.json');
+    /**
+     * Configuration options
+     */
+    #options;
+    constructor(options) {
+        this.#options = options;
+        this.#options.assetsUrl = (this.#options.assetsUrl || '/').replace(/\/$/, '');
+        debug('vite config %O', this.#options);
     }
+    /**
+     * Checks if the application is running in hot mode
+     */
     #isRunningHot() {
-        return existsSync(this.#hotFile);
+        return existsSync(this.#options.hotFile);
     }
+    /**
+     * Reads the file contents as JSON
+     */
     #readFileAsJSON(filePath) {
         return JSON.parse(readFileSync(filePath, 'utf-8'));
     }
+    /**
+     * Returns the parsed hot file content
+     */
     #readHotFile() {
-        return this.#readFileAsJSON(this.#hotFile);
+        return this.#readFileAsJSON(this.#options.hotFile);
     }
+    /**
+     * Get the path to an asset when running in hot mode
+     */
     #hotAsset(asset) {
         return this.#readHotFile().url + '/' + asset;
     }
-    #getViteHmrScript() {
-        if (!this.#isRunningHot()) {
-            return '';
+    /**
+     * 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 `<script type="module" src="${this.#hotAsset('@vite/client')}"></script>`;
+        return attributes;
     }
-    #generateEntryPointsTagsForHotmode(entryPoints) {
-        const viteHmr = this.#getViteHmrScript();
-        const tags = entryPoints.map((entrypoint) => this.#generateTag(entrypoint));
-        return [viteHmr, ...tags].join('\n');
+    /**
+     * 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: [],
+        });
     }
-    #generateEntryPointsTagsWithManifest(entryPoints) {
+    /**
+     * 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 },
+        });
+    }
+    /**
+     * Generate a HTML tag for the given asset
+     */
+    #generateTag(asset, attributes) {
+        let url = '';
+        if (this.#isRunningHot()) {
+            url = this.#hotAsset(asset);
+        }
+        else {
+            url = `${this.#options.assetsUrl}/${asset}`;
+        }
+        if (this.#isCssPath(asset)) {
+            return this.#makeStyleTag(asset, url, attributes);
+        }
+        return this.#makeScriptTag(asset, url, attributes);
+    }
+    /**
+     * 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: this.#hotAsset('@vite/client'),
+                ...attributes,
+            },
+            children: [],
+        });
+    }
+    /**
+     * Generate style and script tags for the given entrypoints
+     * Also adds the @vite/client script
+     */
+    #generateEntryPointsTagsForHotMode(entryPoints, attributes) {
+        const viteHmr = this.#getViteHmrScript(attributes);
+        const tags = entryPoints.map((entrypoint) => this.#generateTag(entrypoint, attributes));
+        return viteHmr ? [viteHmr].concat(tags) : tags;
+    }
+    /**
+     * Generate style and script tags for the given entrypoints
+     * using the manifest file
+     */
+    #generateEntryPointsTagsWithManifest(entryPoints, attributes) {
         const manifest = this.manifest();
         const tags = [];
         for (const entryPoint of entryPoints) {
             const chunk = this.#chunk(manifest, entryPoint);
-            tags.push({ path: chunk.file, tag: this.#generateTag(chunk.file) });
+            tags.push({
+                path: chunk.file,
+                tag: this.#generateTag(chunk.file, { ...attributes, integrity: chunk.integrity }),
+            });
             for (const css of chunk.css || []) {
                 const cssChunk = this.#chunkByFile(manifest, css);
-                tags.push({ path: cssChunk.file, tag: this.#generateTag(cssChunk.file) });
+                tags.push({
+                    path: cssChunk.file,
+                    tag: this.#generateTag(cssChunk.file, { ...attributes, integrity: cssChunk.integrity }),
+                });
             }
         }
         return uniqBy(tags, 'path')
             .sort((a) => (a.path.endsWith('.css') ? -1 : 1))
-            .map((preload) => preload.tag)
-            .join('\n');
-    }
-    generateEntryPointsTags(entryPoints) {
-        entryPoints = Array.isArray(entryPoints) ? entryPoints : [entryPoints];
-        if (this.#isRunningHot()) {
-            return this.#generateEntryPointsTagsForHotmode(entryPoints);
-        }
-        return this.#generateEntryPointsTagsWithManifest(entryPoints);
+            .map((tag) => tag.tag);
     }
+    /**
+     * Get a chunk from the manifest file for a given file name
+     */
     #chunk(manifest, fileName) {
         const chunk = manifest[fileName];
         if (!chunk) {
@@ -69,6 +177,9 @@ export class Vite {
         }
         return chunk;
     }
+    /**
+     * Get a chunk from the manifest file for a given hashed file name
+     */
     #chunkByFile(manifest, fileName) {
         const chunk = Object.values(manifest).find((c) => c.file === fileName);
         if (!chunk) {
@@ -76,107 +187,89 @@ export class Vite {
         }
         return chunk;
     }
+    /**
+     * Check if the given path is a CSS path
+     */
     #isCssPath(path) {
         return path.match(/\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/) !== null;
     }
-    #generateTag(asset) {
-        let url = '';
+    /**
+     * Generate tags for the entry points
+     */
+    generateEntryPointsTags(entryPoints, attributes) {
+        entryPoints = Array.isArray(entryPoints) ? entryPoints : [entryPoints];
         if (this.#isRunningHot()) {
-            url = this.#hotAsset(asset);
-        }
-        else {
-            url = `${this.#assetsUrl}/assets/${asset}`;
-        }
-        if (this.#isCssPath(asset)) {
-            return this.#makeStyleTag(asset, url);
+            return this.#generateEntryPointsTagsForHotMode(entryPoints, attributes);
         }
-        return this.#makeScriptTag(asset, url);
+        return this.#generateEntryPointsTagsWithManifest(entryPoints, attributes);
     }
-    #unwrapAttributes(src, url, attributes) {
-        if (typeof attributes === 'function') {
-            return attributes({ src, url });
+    /**
+     * Returns the dev server URL when running in hot
+     * mode. Otherwise an empty string
+     */
+    devUrl() {
+        if (this.#isRunningHot()) {
+            return this.#readHotFile().url;
         }
-        return attributes;
+        return '';
     }
-    #makeAttributes(attributes) {
-        return Object.keys(attributes)
-            .map((key) => {
-            const value = attributes[key];
-            if (value === true)
-                return key;
-            if (value === false)
-                return null;
-            return `${key}="${value}"`;
-        })
-            .filter((attr) => attr !== null)
-            .join(' ');
-    }
-    #makeScriptTag(src, url) {
-        const customAttributes = this.#unwrapAttributes(src, url, this.#scriptAttributes);
-        const attributes = { type: 'module', ...customAttributes };
-        return `<script ${this.#makeAttributes(attributes)} src="${url}"></script>`;
-    }
-    #makeStyleTag(src, url) {
-        const customAttributes = this.#unwrapAttributes(src, url, this.#styleAttributes);
-        const attributes = { rel: 'stylesheet', ...customAttributes };
-        return `<link ${this.#makeAttributes(attributes)} href="${url}">`;
+    /**
+     * Returns the dev server URL when running in hot
+     * mode, otherwise returns the explicitly configured
+     * "assets" URL
+     */
+    assetsUrl() {
+        if (this.#isRunningHot()) {
+            return this.#readHotFile().url;
+        }
+        return this.#options.assetsUrl;
     }
+    /**
+     * Returns path to a given asset file
+     */
     assetPath(asset) {
         if (this.#isRunningHot()) {
             return this.#hotAsset(asset);
         }
         const chunk = this.#chunk(this.manifest(), asset);
-        return `${this.#assetsUrl}/assets/${chunk.file}`;
+        return `${this.#options.assetsUrl}/${chunk.file}`;
     }
+    /**
+     * Returns the manifest file contents
+     *
+     * @throws Will throw an exception when running in hot mode
+     */
     manifest() {
         if (this.#isRunningHot()) {
             throw new Error('Cannot read the manifest file when running in hot mode');
         }
-        if (this.#manifestCache) {
-            return this.#manifestCache;
-        }
-        const manifest = this.#readFileAsJSON(join(this.#buildDirectory, this.#manifestFilename));
-        if (this.application.inProduction) {
-            this.#manifestCache = manifest;
+        if (!this.#manifestCache) {
+            this.#manifestCache = this.#readFileAsJSON(join(this.#options.buildDirectory, this.#manifestFilename));
         }
-        return manifest;
+        return this.#manifestCache;
     }
-    getReactHmrScript() {
+    /**
+     * Returns the script needed for the HMR working with React
+     */
+    getReactHmrScript(attributes) {
         if (!this.#isRunningHot()) {
-            return '';
+            return null;
         }
-        return `
-      <script type="module">
-        import RefreshRuntime from '${this.#hotAsset('@react-refresh')}'
-        RefreshRuntime.injectIntoGlobalHook(window)
-        window.$RefreshReg$ = () => {}
-        window.$RefreshSig$ = () => (type) => type
-        window.__vite_plugin_react_preamble_installed__ = true
-      </script>
-      `;
-    }
-    setHotFilePath(path) {
-        this.#hotFile = join(fileURLToPath(this.application.appRoot), path);
-        return this;
-    }
-    setManifestFilename(name) {
-        this.#manifestFilename = name;
-        return this;
-    }
-    setBuildDirectory(path) {
-        this.#buildDirectory = this.application.publicPath(path);
-        return this;
-    }
-    setAssetsUrl(url) {
-        this.#assetsUrl = url.endsWith('/') ? url : `${url}/`;
-        return this;
-    }
-    setScriptAttributes(attributes) {
-        this.#scriptAttributes = attributes;
-        return this;
-    }
-    setStyleAttributes(attributes) {
-        this.#styleAttributes = attributes;
-        return this;
+        return this.#generateElement({
+            tag: 'script',
+            attributes: {
+                type: 'module',
+                ...attributes,
+            },
+            children: [
+                '',
+                `import RefreshRuntime from '${this.#hotAsset('@react-refresh')}'`,
+                `RefreshRuntime.injectIntoGlobalHook(window)`,
+                `window.$RefreshReg$ = () => {}`,
+                `window.$RefreshSig$ = () => (type) => type`,
+                `window.__vite_plugin_react_preamble_installed__ = true`,
+                '',
+            ],
+        });
     }
 }

package/build/src/{vite_plugin → client}/config.d.ts

@@ -1,5 +1,10 @@
 import { ConfigEnv, Plugin, UserConfig } from 'vite';
-import { PluginFullOptions } from './types/index.js';
+import type { PluginFullOptions } from './types.js';
+/**
+ * Vite config hook
+ */
 export declare const configHook: (options: PluginFullOptions, userConfig: UserConfig, { command }: ConfigEnv) => UserConfig;
+/**
+ * Update the user vite config to match the Adonis requirements
+ */
 export declare const config: (options: PluginFullOptions) => Plugin;
-//# sourceMappingURL=config.d.ts.map

package/build/src/{vite_plugin → client}/config.js

@@ -1,14 +1,29 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 import { defu } from 'defu';
-import { resolveDevServerUrl } from './utils.js';
+import { join } from 'node:path';
 import { HotFile } from './hot_file.js';
+import { resolveDevServerUrl } from './utils.js';
 import { ConfigResolver } from './config_resolver.js';
-import { join } from 'node:path';
+/**
+ * Vite config hook
+ */
 export const configHook = (options, userConfig, { command }) => {
     const config = {
         publicDir: userConfig.publicDir ?? false,
         base: ConfigResolver.resolveBase(userConfig, options, command),
         resolve: { alias: ConfigResolver.resolveAlias(userConfig) },
         server: {
+            /**
+             * Will allow to rewrite the URL to the public path
+             * in dev mode
+             */
             origin: '__adonis_vite__',
         },
         build: {
@@ -23,11 +38,17 @@ export const configHook = (options, userConfig, { command }) => {
     };
     return defu(config, userConfig);
 };
+/**
+ * Update the user vite config to match the Adonis requirements
+ */
 export const config = (options) => {
     let devServerUrl;
     return {
         name: 'vite-plugin-adonis:config',
         config: configHook.bind(null, options),
+        /**
+         * Store the dev server url for further usage when rewriting URLs
+         */
         configureServer(server) {
             const hotfile = new HotFile(options.hotFile);
             server.httpServer?.once('listening', async () => {
@@ -36,6 +57,11 @@ export const config = (options) => {
             });
             server.httpServer?.on('close', () => hotfile.clean());
         },
+        /**
+         * Rewrite URL to the public path in dev mode
+         *
+         * See : https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms#vite-processed-assets
+         */
         transform: (code) => ({
             code: code.replace(/__adonis_vite__/g, devServerUrl),
             map: null,

package/build/src/{vite_plugin → client}/config_resolver.d.ts

@@ -1,9 +1,20 @@
 import { ResolvedConfig, UserConfig, AliasOptions } from 'vite';
-import { PluginFullOptions } from './types/index.js';
+import { PluginFullOptions } from './types.js';
 export declare class ConfigResolver {
     static resolvedConfig?: ResolvedConfig;
+    /**
+     * Resolve the `config.base` value
+     */
     static resolveBase(config: UserConfig, options: PluginFullOptions, command: 'build' | 'serve'): string;
+    /**
+     * Resolve the `config.resolve.alias` value
+     *
+     * Basically we are merging the user defined alias with the
+     * default alias.
+     */
     static resolveAlias(config: UserConfig): AliasOptions;
+    /**
+     * Resolve the `config.build.outDir` value
+     */
     static resolveOutDir(config: UserConfig, options: PluginFullOptions): string;
 }
-//# sourceMappingURL=config_resolver.d.ts.map

package/build/src/{vite_plugin → client}/config_resolver.js

@@ -1,16 +1,32 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 import { addTrailingSlash } from './utils.js';
-import { join } from 'node:path';
 export class ConfigResolver {
     static resolvedConfig;
+    /**
+     * Resolve the `config.base` value
+     */
     static resolveBase(config, options, command) {
         if (config.base) {
             return config.base;
         }
         if (command === 'build') {
-            return addTrailingSlash(options.assetsUrl) + addTrailingSlash(options.buildDirectory);
+            return addTrailingSlash(options.assetsUrl);
         }
         return '/';
     }
+    /**
+     * Resolve the `config.resolve.alias` value
+     *
+     * Basically we are merging the user defined alias with the
+     * default alias.
+     */
     static resolveAlias(config) {
         const defaultAlias = { '@/': `/resources/js/` };
         if (Array.isArray(config.resolve?.alias)) {
@@ -21,7 +37,10 @@ export class ConfigResolver {
         }
         return { ...defaultAlias, ...config.resolve?.alias };
     }
+    /**
+     * Resolve the `config.build.outDir` value
+     */
     static resolveOutDir(config, options) {
-        return config.build?.outDir ?? join(options.publicDirectory, options.buildDirectory);
+        return config.build?.outDir ?? options.buildDirectory;
     }
 }

package/build/src/{vite_plugin → client}/helpers/inertia.d.ts

@@ -1,2 +1,4 @@
+/**
+ * Resolves a page component.
+ */
 export declare function resolvePageComponent(name: string, pages: Record<string, any>): Promise<any>;
-//# sourceMappingURL=inertia.d.ts.map

package/build/src/{vite_plugin → client}/helpers/inertia.js

@@ -1,3 +1,14 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+/**
+ * Resolves a page component.
+ */
 export async function resolvePageComponent(name, pages) {
     const path = Object.keys(pages)
         .sort((a, b) => a.length - b.length)

package/build/src/{vite_plugin → client}/hot_file.d.ts

@@ -1,9 +1,14 @@
 export declare class HotFile {
     #private;
     constructor(path: string);
+    /**
+     * Write the hot file
+     */
     write(data: {
         url: string;
     }): Promise<void>;
+    /**
+     * Delete the hot file
+     */
     clean(): void;
 }
-//# sourceMappingURL=hot_file.d.ts.map

package/build/src/{vite_plugin → client}/hot_file.js

@@ -1,9 +1,23 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import { dirname, join } from 'node:path';
 import { existsSync, rmSync } from 'node:fs';
 import { mkdir, writeFile } from 'node:fs/promises';
-import { dirname, join } from 'node:path';
 import { ConfigResolver } from './config_resolver.js';
 export class HotFile {
+    /**
+     * Path to the hot file
+     */
     #path;
+    /**
+     * Register hooks to clean the hot file on exit
+     */
     #cleanHotFileOnExit() {
         const clean = this.clean.bind(this);
         process.on('exit', clean);
@@ -11,16 +25,21 @@ export class HotFile {
         process.on('SIGTERM', process.exit);
         process.on('SIGHUP', process.exit);
         process.on('SIGBREAK', process.exit);
-        process.on('SIGKILL', process.exit);
     }
     constructor(path) {
         this.#path = join(ConfigResolver.resolvedConfig.root, path);
         this.#cleanHotFileOnExit();
     }
+    /**
+     * Write the hot file
+     */
     async write(data) {
         await mkdir(dirname(this.#path), { recursive: true });
         await writeFile(this.#path, JSON.stringify(data, null, 2));
     }
+    /**
+     * Delete the hot file
+     */
     clean() {
         if (!existsSync(this.#path)) {
             return;

package/build/src/client/main.d.ts

@@ -0,0 +1,6 @@
+import { PluginOption } from 'vite';
+import type { PluginOptions } from './types.js';
+/**
+ * Vite plugin for adonisjs
+ */
+export default function adonisjs(options: PluginOptions): PluginOption[];

package/build/src/client/main.js

@@ -0,0 +1,24 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import { defu } from 'defu';
+import PluginRestart from 'vite-plugin-restart';
+import { config } from './config.js';
+const VitePluginRestart = PluginRestart;
+/**
+ * Vite plugin for adonisjs
+ */
+export default function adonisjs(options) {
+    const fullOptions = defu(options, {
+        buildDirectory: 'public/assets',
+        assetsUrl: '/assets',
+        hotFile: 'public/assets/hot.json',
+        reload: ['./resources/views/**/*.edge'],
+    });
+    return [VitePluginRestart({ reload: fullOptions.reload }), config(fullOptions)];
+}