@adonisjs/vite 0.0.1-5 → 0.0.1-7

package/build/configure.js

@@ -6,19 +6,18 @@
  * 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';
 /**
  * Configures the package
  */
 export async function configure(command) {
-    const stubDestination = join(fileURLToPath(command.app.appRoot), 'vite.config.js');
-    await command.publishStub('vite/vite_config.stub', {
-        destination: stubDestination,
-    });
+    await command.publishStub('config.stub');
+    await command.publishStub('client_config.stub');
+    await command.publishStub('js_entrypoint.stub');
     await command.updateRcFile((rcFile) => {
         rcFile.addProvider('@adonisjs/vite/vite_provider');
+        rcFile.addMetaFile('public/**', false);
     });
-    const packagesToInstall = [{ name: 'vite', isDevDependency: true }];
-    command.listPackagesToInstall(packagesToInstall);
+    if (await command.prompt.confirm('Do you want to install "vite"?')) {
+        await command.installPackages([{ name: 'vite', isDevDependency: true }]);
+    }
 }

package/build/index.d.ts

@@ -2,3 +2,4 @@ import './src/backend/types/extended.js';
 export { configure } from './configure.js';
 export { stubsRoot } from './stubs/index.js';
 export { Vite } from './src/backend/vite.js';
+export { defineConfig } from './src/backend/define_config.js';

package/build/index.js

@@ -10,3 +10,4 @@ import './src/backend/types/extended.js';
 export { configure } from './configure.js';
 export { stubsRoot } from './stubs/index.js';
 export { Vite } from './src/backend/vite.js';
+export { defineConfig } from './src/backend/define_config.js';

package/build/providers/vite_provider.d.ts

@@ -1,11 +1,15 @@
+import type { Edge } from 'edge.js';
 import type { ApplicationService } from '@adonisjs/core/types';
 export default class ViteServiceProvider {
-    #private;
     protected app: ApplicationService;
     constructor(app: ApplicationService);
+    /**
+     * Returns edge when it's installed
+     */
+    protected getEdge(): Promise<Edge | null>;
     register(): void;
     /**
-     * Extend the view globals with vite tags and globals
+     * Extending edge
      */
     boot(): Promise<void>;
 }

package/build/providers/vite_provider.js

@@ -6,66 +6,45 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { EdgeError } from 'edge-error';
+import debug from '../src/backend/debug.js';
 export default class ViteServiceProvider {
     app;
     constructor(app) {
         this.app = app;
     }
     /**
-     * Inject the script needed for Vite HMR
+     * Returns edge when it's installed
      */
-    #registerViteTag(view) {
-        view.registerTag({
-            tagName: 'vite',
-            seekable: true,
-            block: false,
-            compile(parser, buffer, token) {
-                /**
-                 * Ensure an argument is defined
-                 */
-                if (!token.properties.jsArg.trim()) {
-                    throw new EdgeError('Missing entrypoint name', 'E_RUNTIME_EXCEPTION', {
-                        filename: token.filename,
-                        line: token.loc.start.line,
-                        col: token.loc.start.col,
-                    });
-                }
-                const parsed = parser.utils.transformAst(parser.utils.generateAST(token.properties.jsArg, token.loc, token.filename), token.filename, parser);
-                const entrypoints = parser.utils.stringify(parsed);
-                buffer.outputExpression(`state.vite.generateEntryPointsTags(${entrypoints})`, token.filename, token.loc.start.line, false);
-            },
-        });
-    }
-    /**
-     * Inject a script needed for the HMR working with React
-     */
-    #registerViteReactTag(view) {
-        view.registerTag({
-            tagName: 'viteReactRefresh',
-            seekable: true,
-            block: false,
-            compile(_parser, buffer, token) {
-                buffer.outputExpression(`state.vite.getReactHmrScript()`, token.filename, token.loc.start.line, false);
-            },
-        });
+    async getEdge() {
+        try {
+            const { default: edge } = await import('edge.js');
+            debug('Detected edge.js package. Adding Vite primitives to it');
+            return edge;
+        }
+        catch {
+            return null;
+        }
     }
     register() {
         this.app.container.singleton('vite', async () => {
             const { Vite } = await import('../src/backend/vite.js');
-            return new Vite(this.app);
+            const config = this.app.config.get('vite');
+            return new Vite({
+                ...config,
+                buildDirectory: this.app.makePath(config.buildDirectory || 'public/build'),
+                hotFile: this.app.makePath(config.hotFile || 'public/build/hot.json'),
+            });
         });
     }
     /**
-     * Extend the view globals with vite tags and globals
+     * Extending edge
      */
     async boot() {
-        this.app.container.resolving('view', async (view) => {
+        const edge = await this.getEdge();
+        if (edge) {
             const vite = await this.app.container.make('vite');
-            view.global('vite', vite);
-            view.global('asset', vite.assetPath.bind(vite));
-            this.#registerViteTag(view);
-            this.#registerViteReactTag(view);
-        });
+            const { edgePluginVite } = await import('../src/backend/edge_plugin_vite.js');
+            edge.use(edgePluginVite(vite));
+        }
     }
 }

package/build/services/vite.d.ts

@@ -1,3 +1,3 @@
-import { Vite } from '../index.js';
+import type { Vite } from '../src/backend/vite.js';
 declare let vite: Vite;
 export { vite as default };

package/build/src/backend/debug.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="@types/node" resolution-mode="require"/>
+declare const _default: import("util").DebugLogger;
+export default _default;

package/build/src/backend/debug.js

@@ -0,0 +1,10 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import { debuglog } from 'node:util';
+export default debuglog('adonisjs:vite');

package/build/src/backend/define_config.d.ts

@@ -0,0 +1,5 @@
+import { ViteOptions } from './types/main.js';
+/**
+ * Define the backend config for resolving vite assets
+ */
+export declare function defineConfig(config: Partial<ViteOptions>): ViteOptions;

package/build/src/backend/define_config.js

@@ -0,0 +1,19 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+/**
+ * Define the backend config for resolving vite assets
+ */
+export function defineConfig(config) {
+    return {
+        buildDirectory: 'public/assets',
+        hotFile: 'public/assets/hot.json',
+        assetsUrl: '/assets',
+        ...config,
+    };
+}

package/build/src/backend/edge_plugin_vite.d.ts

@@ -0,0 +1,7 @@
+import type { PluginFn } from 'edge.js/types';
+import type { Vite } from './vite.js';
+/**
+ * The edge plugin for vite to share vite service with edge
+ * and register custom tags
+ */
+export declare const edgePluginVite: (vite: Vite) => PluginFn<undefined>;

package/build/src/backend/edge_plugin_vite.js

@@ -0,0 +1,65 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import { EdgeError } from 'edge-error';
+import debug from './debug.js';
+/**
+ * The edge plugin for vite to share vite service with edge
+ * and register custom tags
+ */
+export const edgePluginVite = (vite) => {
+    return (edge) => {
+        debug('sharing vite and asset globals with edge');
+        edge.global('vite', vite);
+        edge.global('asset', vite.assetPath.bind(vite));
+        debug('registering vite tags with edge');
+        edge.registerTag({
+            tagName: 'viteReactRefresh',
+            seekable: true,
+            block: false,
+            compile(_parser, buffer, token) {
+                /**
+                 * Get HMR script
+                 */
+                buffer.writeExpression(`const __vite_hmr_script = state.vite.getReactHmrScript()`, token.filename, token.loc.start.line);
+                /**
+                 * Check if the script exists (only in hot mode)
+                 */
+                buffer.writeStatement('if(__vite_hmr_script) {', token.filename, token.loc.start.line);
+                /**
+                 * Write output
+                 */
+                buffer.outputExpression(`__vite_hmr_script.toString()`, token.filename, token.loc.start.line, false);
+                /**
+                 * Close if block
+                 */
+                buffer.writeStatement('}', token.filename, token.loc.start.line);
+            },
+        });
+        edge.registerTag({
+            tagName: 'vite',
+            seekable: true,
+            block: false,
+            compile(parser, buffer, token) {
+                /**
+                 * Ensure an argument is defined
+                 */
+                if (!token.properties.jsArg.trim()) {
+                    throw new EdgeError('Missing entrypoint name', 'E_RUNTIME_EXCEPTION', {
+                        filename: token.filename,
+                        line: token.loc.start.line,
+                        col: token.loc.start.col,
+                    });
+                }
+                const parsed = parser.utils.transformAst(parser.utils.generateAST(token.properties.jsArg, token.loc, token.filename), token.filename, parser);
+                const entrypoints = parser.utils.stringify(parsed);
+                buffer.outputExpression(`state.vite.generateEntryPointsTags(${entrypoints}).join('\\n')`, token.filename, token.loc.start.line, false);
+            },
+        });
+    };
+};

package/build/src/backend/types/extended.d.ts

@@ -7,3 +7,8 @@ declare module '@adonisjs/core/types' {
         vite: Vite;
     }
 }
+declare module 'vite' {
+    interface ManifestChunk {
+        integrity: string;
+    }
+}

package/build/src/backend/types/main.d.ts

@@ -1,5 +1,5 @@
 /**
- * Content of the hotfile
+ * Contents of the hotfile
  */
 export type HotFile = {
     url: string;
@@ -16,3 +16,50 @@ export type SetAttributesCallbackParams = {
  * Can be either a record or a callback that returns a record.
  */
 export type SetAttributes = Record<string, string | boolean> | ((params: SetAttributesCallbackParams) => Record<string, string | boolean>);
+/**
+ * Representation of an AdonisJS Vite Element returned
+ * by different tags generation APIs
+ */
+export type AdonisViteElement = {
+    tag: 'link';
+    attributes: Record<string, any>;
+} | {
+    tag: 'script';
+    attributes: Record<string, any>;
+    children: string[];
+};
+/**
+ * Vite backend integration configuration options
+ */
+export type ViteOptions = {
+    /**
+     * Path to the hot file relative from the root of the
+     * application.
+     *
+     * @default public/assets/hot.json
+     */
+    hotFile: string;
+    /**
+     * Public directory where the assets will be compiled.
+     *
+     * @default 'public/assets'
+     */
+    buildDirectory: string;
+    /**
+     * The URL to prefix when generating assets URLs. For example: This
+     * could the CDN URL when generating the production build
+     *
+     * @default ''
+     */
+    assetsUrl?: string;
+    /**
+     * A custom set of attributes to apply on all
+     * script tags
+     */
+    scriptAttributes?: SetAttributes;
+    /**
+     * A custom set of attributes to apply on all
+     * style tags
+     */
+    styleAttributes?: SetAttributes;
+};

package/build/src/backend/utils.d.ts

@@ -2,3 +2,7 @@
  * Returns a new array with unique items by the given key
  */
 export declare function uniqBy<T>(array: T[], key: keyof T): T[];
+/**
+ * Convert Record of attributes to a valid HTML string
+ */
+export declare function makeAttributes(attributes: Record<string, string | boolean>): string;

package/build/src/backend/utils.js

@@ -16,3 +16,21 @@ export function uniqBy(array, key) {
         return seen.has(k) ? false : seen.add(k);
     });
 }
+/**
+ * Convert Record of attributes to a valid HTML string
+ */
+export function makeAttributes(attributes) {
+    return Object.keys(attributes)
+        .map((key) => {
+        const value = attributes[key];
+        if (value === true) {
+            return key;
+        }
+        if (!value) {
+            return null;
+        }
+        return `${key}="${value}"`;
+    })
+        .filter((attr) => attr !== null)
+        .join(' ');
+}

package/build/src/backend/vite.d.ts

@@ -1,60 +1,28 @@
 import type { Manifest } from 'vite';
-import { SetAttributes } from './types/main.js';
-import { ApplicationService } from '@adonisjs/core/types';
+import type { AdonisViteElement, ViteOptions } from './types/main.js';
+/**
+ * Vite class exposes the APIs to generate tags and URLs for
+ * assets processed using vite.
+ */
 export declare class Vite {
     #private;
-    private application;
-    constructor(application: ApplicationService);
+    constructor(options: ViteOptions);
     /**
      * Generate tags for the entry points
      */
-    generateEntryPointsTags(entryPoints: string[] | string): string;
+    generateEntryPointsTags(entryPoints: string[] | string): AdonisViteElement[];
     /**
      * Returns path to a given asset file
      */
     assetPath(asset: string): string;
     /**
-     * Returns the manifest file content
+     * Returns the manifest file contents
      *
      * @throws Will throw an exception when running in hot mode
      */
     manifest(): Manifest;
     /**
      * Returns the script needed for the HMR working with React
-     *
-     * This method is called automatically when using edge tag `@viteReactRefresh`
-     */
-    getReactHmrScript(): string;
-    /**
-     * Set the path to the hotfile
-     *
-     * You must also set the `hotFile` option in the vite plugin config
-     */
-    setHotFilePath(path: string): this;
-    /**
-     * Set the manifest filename
-     *
-     * You must also set the `build.manifest` option in your vite configuration
-     */
-    setManifestFilename(name: string): this;
-    /**
-     * Set the build directory. Subdirectory of the AdonisJs public directory
-     *
-     * You must also set the `buildDirectory` option in the vite plugin config
-     */
-    setBuildDirectory(path: string): this;
-    /**
-     * Set the assets url
-     *
-     * You must also set the `assetsUrl` option in the vite plugin config
-     */
-    setAssetsUrl(url: string): this;
-    /**
-     * Include additional attributes to each script tag generated
-     */
-    setScriptAttributes(attributes: SetAttributes): this;
-    /**
-     * Include additional attributes to each style tag generated
      */
-    setStyleAttributes(attributes: SetAttributes): this;
+    getReactHmrScript(): AdonisViteElement | null;
 }

package/build/src/backend/vite.js

@@ -7,54 +7,37 @@
  * 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;
-    /**
-     * Path to the build directory
-     *
-     * @default 'public/assets'
-     */
-    #buildDirectory;
-    /**
-     * Path to the hotfile
-     *
-     * @default 'public/assets/hot.json'
-     */
-    #hotFile;
     /**
      * Manifest file name
      */
     #manifestFilename = 'manifest.json';
-    /**
-     * Assets URL
-     */
-    #assetsUrl = '';
     /**
      * We cache the manifest file content in production
      * to avoid reading the file multiple times
      */
     #manifestCache = null;
     /**
-     * Attributes to be set on the style tags
-     */
-    #styleAttributes = {};
-    /**
-     * Attributes to be set on the script tags
+     * Configuration options
      */
-    #scriptAttributes = {};
-    constructor(application) {
-        this.application = application;
-        this.#buildDirectory = this.application.publicPath('assets');
-        this.#hotFile = join(this.#buildDirectory, 'hot.json');
+    #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
@@ -66,7 +49,7 @@ export class Vite {
      * 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
@@ -74,43 +57,114 @@ export class Vite {
     #hotAsset(asset) {
         return this.#readHotFile().url + '/' + asset;
     }
+    /**
+     * 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 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: [],
+        });
+    }
+    /**
+     * 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() {
-        if (!this.#isRunningHot()) {
-            return '';
-        }
-        return `<script type="module" src="${this.#hotAsset('@vite/client')}"></script>`;
+        return this.#generateElement({
+            tag: 'script',
+            attributes: {
+                type: 'module',
+                src: this.#hotAsset('@vite/client'),
+            },
+            children: [],
+        });
     }
     /**
      * Generate style and script tags for the given entrypoints
-     * Also add the @vite/client script
+     * Also adds the @vite/client script
      */
-    #generateEntryPointsTagsForHotmode(entryPoints) {
+    #generateEntryPointsTagsForHotMode(entryPoints, attributes) {
         const viteHmr = this.#getViteHmrScript();
-        const tags = entryPoints.map((entrypoint) => this.#generateTag(entrypoint));
-        return [viteHmr, ...tags].join('\n');
+        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) {
+    #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');
+            .map((tag) => tag.tag);
     }
     /**
      * Get a chunk from the manifest file for a given file name
@@ -138,71 +192,13 @@ export class Vite {
     #isCssPath(path) {
         return path.match(/\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/) !== null;
     }
-    /**
-     * Generate a HTML tag for the given asset
-     */
-    #generateTag(asset) {
-        let url = '';
-        if (this.#isRunningHot()) {
-            url = this.#hotAsset(asset);
-        }
-        else {
-            url = `${this.#assetsUrl}/assets/${asset}`;
-        }
-        if (this.#isCssPath(asset)) {
-            return this.#makeStyleTag(asset, url);
-        }
-        return this.#makeScriptTag(asset, url);
-    }
-    /**
-     * 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;
-    }
-    /**
-     * Convert Record of attributes to a valid HTML string
-     */
-    #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(' ');
-    }
-    /**
-     * Create a script tag for the given path
-     */
-    #makeScriptTag(src, url) {
-        const customAttributes = this.#unwrapAttributes(src, url, this.#scriptAttributes);
-        const attributes = { type: 'module', ...customAttributes };
-        return `<script ${this.#makeAttributes(attributes)} src="${url}"></script>`;
-    }
-    /**
-     * Create a style tag for the given path
-     */
-    #makeStyleTag(src, url) {
-        const customAttributes = this.#unwrapAttributes(src, url, this.#styleAttributes);
-        const attributes = { rel: 'stylesheet', ...customAttributes };
-        return `<link ${this.#makeAttributes(attributes)} href="${url}">`;
-    }
     /**
      * Generate tags for the entry points
      */
     generateEntryPointsTags(entryPoints) {
         entryPoints = Array.isArray(entryPoints) ? entryPoints : [entryPoints];
         if (this.#isRunningHot()) {
-            return this.#generateEntryPointsTagsForHotmode(entryPoints);
+            return this.#generateEntryPointsTagsForHotMode(entryPoints);
         }
         return this.#generateEntryPointsTagsWithManifest(entryPoints);
     }
@@ -214,10 +210,10 @@ export class Vite {
             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 content
+     * Returns the manifest file contents
      *
      * @throws Will throw an exception when running in hot mode
      */
@@ -225,88 +221,32 @@ export class Vite {
         if (this.#isRunningHot()) {
             throw new Error('Cannot read the manifest file when running in hot mode');
         }
-        /**
-         * Use in-memory cache when available
-         */
-        if (this.#manifestCache) {
-            return this.#manifestCache;
-        }
-        const manifest = this.#readFileAsJSON(join(this.#buildDirectory, this.#manifestFilename));
-        /**
-         * Cache the manifest in production to avoid re-reading the file from disk
-         */
-        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;
     }
     /**
      * Returns the script needed for the HMR working with React
-     *
-     * This method is called automatically when using edge tag `@viteReactRefresh`
      */
     getReactHmrScript() {
         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>
-      `;
-    }
-    /**
-     * Set the path to the hotfile
-     *
-     * You must also set the `hotFile` option in the vite plugin config
-     */
-    setHotFilePath(path) {
-        this.#hotFile = join(fileURLToPath(this.application.appRoot), path);
-        return this;
-    }
-    /**
-     * Set the manifest filename
-     *
-     * You must also set the `build.manifest` option in your vite configuration
-     */
-    setManifestFilename(name) {
-        this.#manifestFilename = name;
-        return this;
-    }
-    /**
-     * Set the build directory. Subdirectory of the AdonisJs public directory
-     *
-     * You must also set the `buildDirectory` option in the vite plugin config
-     */
-    setBuildDirectory(path) {
-        this.#buildDirectory = this.application.publicPath(path);
-        return this;
-    }
-    /**
-     * Set the assets url
-     *
-     * You must also set the `assetsUrl` option in the vite plugin config
-     */
-    setAssetsUrl(url) {
-        this.#assetsUrl = url.endsWith('/') ? url : `${url}/`;
-        return this;
-    }
-    /**
-     * Include additional attributes to each script tag generated
-     */
-    setScriptAttributes(attributes) {
-        this.#scriptAttributes = attributes;
-        return this;
-    }
-    /**
-     * Include additional attributes to each style tag generated
-     */
-    setStyleAttributes(attributes) {
-        this.#styleAttributes = attributes;
-        return this;
+        return this.#generateElement({
+            tag: 'script',
+            attributes: {
+                type: 'module',
+            },
+            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,5 @@
 import { ConfigEnv, Plugin, UserConfig } from 'vite';
-import { PluginFullOptions } from './types/index.js';
+import type { PluginFullOptions } from './types.js';
 /**
  * Vite config hook
  */

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

@@ -1,5 +1,5 @@
 import { ResolvedConfig, UserConfig, AliasOptions } from 'vite';
-import { PluginFullOptions } from './types/index.js';
+import { PluginFullOptions } from './types.js';
 export declare class ConfigResolver {
     static resolvedConfig?: ResolvedConfig;
     /**

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

@@ -7,7 +7,6 @@
  * file that was distributed with this source code.
  */
 import { addTrailingSlash } from './utils.js';
-import { join } from 'node:path';
 export class ConfigResolver {
     static resolvedConfig;
     /**
@@ -18,7 +17,7 @@ export class ConfigResolver {
             return config.base;
         }
         if (command === 'build') {
-            return addTrailingSlash(options.assetsUrl) + addTrailingSlash(options.buildDirectory);
+            return addTrailingSlash(options.assetsUrl);
         }
         return '/';
     }
@@ -42,6 +41,6 @@ export class ConfigResolver {
      * 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/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/{vite_plugin/index.js → client/main.js}

@@ -7,20 +7,17 @@
  * file that was distributed with this source code.
  */
 import { defu } from 'defu';
-import { config } from './config.js';
 import PluginRestart from 'vite-plugin-restart';
-import { join } from 'node:path';
+import { config } from './config.js';
 const VitePluginRestart = PluginRestart;
 /**
- * Vite plugin for AdonisJS
+ * Vite plugin for adonisjs
  */
-export default function Adonis(options) {
-    const hotfileDefaultDestination = join(options.publicDirectory || 'public', options.buildDirectory || 'assets', 'hot.json');
+export default function adonisjs(options) {
     const fullOptions = defu(options, {
-        publicDirectory: 'public',
-        buildDirectory: 'assets',
-        assetsUrl: '',
-        hotFile: hotfileDefaultDestination,
+        buildDirectory: 'public/assets',
+        assetsUrl: '/assets',
+        hotFile: 'public/assets/hot.json',
         reload: ['./resources/views/**/*.edge'],
     });
     return [VitePluginRestart({ reload: fullOptions.reload }), config(fullOptions)];

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

@@ -12,12 +12,6 @@ export type PluginOptions = {
      * Paths to the entrypoints files
      */
     entrypoints: string[];
-    /**
-     * Path to your AdonisJS public directory
-     *
-     * @default 'public'
-     */
-    publicDirectory?: string;
     /**
      * The URL where the assets will be served. This is particularly
      * useful if you are using a CDN to deploy your assets.
@@ -26,9 +20,9 @@ export type PluginOptions = {
      */
     assetsUrl?: string;
     /**
-     * Public subdirectory where the assets will be compiled.
+     * Public directory where the assets will be compiled.
      *
-     * @default 'assets'
+     * @default 'public/assets'
      */
     buildDirectory?: string;
     /**

package/build/stubs/client_config.stub

@@ -0,0 +1,22 @@
+---
+to: {{ app.makePath('vite.config.js') }}
+---
+import { defineConfig } from 'vite'
+import adonisjs from '@adonisjs/vite/client'
+
+export default defineConfig({
+  plugins: [
+    adonisjs({
+      /**
+       * Entrypoints of your application. Each entrypoint will
+       * result in a separate bundle.
+       */
+      entrypoints: ['resources/js/app.js'],
+
+      /**
+       * Paths to watch and reload the browser on file change
+       */
+      reloads: ['resources/views/**/*.edge'],
+    }),
+  ],
+})

package/build/stubs/config.stub

@@ -0,0 +1,21 @@
+---
+to: {{ app.configPath('vite.ts') }}
+---
+import { defineConfig } from '@adonisjs/vite'
+
+const viteBackendConfig = defineConfig({
+  /**
+   * The output of vite will be written inside this
+   * directory. The path should be relative from
+   * the application root.
+   */
+  buildDirectory: 'public/assets',
+
+  /**
+   * Feel free to change the value of the "assetsUrl" to
+   * point to a CDN in production.
+   */
+  assetsUrl: '/assets',
+})
+
+export default viteBackendConfig

package/build/stubs/js_entrypoint.stub

@@ -0,0 +1,4 @@
+---
+to: {{ app.makePath('resources/js/app.js') }}
+---
+console.log('Log from JS entrypoint')

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adonisjs/vite",
   "description": "Vite plugin for Adonis.js",
-  "version": "0.0.1-5",
+  "version": "0.0.1-7",
   "engines": {
     "node": ">=18.16.0"
   },
@@ -21,9 +21,9 @@
     ".": "./build/index.js",
     "./services/main": "./build/services/vite.js",
     "./vite_provider": "./build/providers/vite_provider.js",
-    "./plugin": "./build/src/vite_plugin/index.js",
-    "./types": "./build/src/backend/types.js",
-    "./types/extended": "./build/src/backend/types/extended.js"
+    "./client": "./build/src/client/main.js",
+    "./plugin_edge": "./build/backend/edge_plugin_vite.js",
+    "./types": "./build/src/backend/types.js"
   },
   "scripts": {
     "clean": "del-cli build",
@@ -42,23 +42,22 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@adonisjs/core": "^6.1.5-11",
+    "@adonisjs/core": "^6.1.5-15",
     "@adonisjs/eslint-config": "^1.1.8",
     "@adonisjs/prettier-config": "^1.1.8",
     "@adonisjs/tsconfig": "^1.1.8",
-    "@adonisjs/view": "^7.0.0-5",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
     "@japa/assert": "^2.0.0-1",
     "@japa/expect-type": "^2.0.0-0",
     "@japa/file-system": "^2.0.0-1",
     "@japa/runner": "^3.0.0-6",
-    "@poppinss/dev-utils": "^2.0.3",
     "@swc/core": "^1.3.70",
     "@types/node": "^20.4.4",
     "c8": "^8.0.0",
     "copyfiles": "^2.4.1",
     "del-cli": "^5.0.0",
+    "edge.js": "^6.0.0-6",
     "eslint": "^8.45.0",
     "husky": "^8.0.3",
     "np": "^8.0.4",
@@ -66,16 +65,15 @@
     "rollup": "^3.26.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.6"
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "defu": "^6.1.2",
-    "edge-error": "^3.0.0",
+    "edge-error": "^4.0.0-0",
     "vite-plugin-restart": "^0.3.1"
   },
   "peerDependencies": {
-    "@adonisjs/core": "^6.1.5-11",
-    "@adonisjs/view": "^7.0.0-5"
+    "@adonisjs/core": "^6.1.5-15"
   },
   "author": "Julien Ripouteau <julien@ripouteau.com>",
   "license": "MIT",
@@ -120,7 +118,8 @@
       "html"
     ],
     "exclude": [
-      "tests/**"
+      "tests/**",
+      "tests_helpers/**"
     ]
   },
   "directories": {

package/build/src/vite_plugin/index.d.ts

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

package/build/stubs/vite/vite_config.stub

@@ -1,18 +0,0 @@
----
-to: {{ destination }}
----
-
-import { defineConfig } from "vite";
-import Adonis from "@adonisjs/vite/plugin";
-
-export default defineConfig({
-  plugins: [
-    Adonis({
-      /**
-       * Entrypoints of your application. Each entrypoint will
-       * result in a separate bundle.
-       */
-      entrypoints: ["resources/js/app.js"],
-    }),
-  ],
-});

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

@@ -7,10 +7,10 @@
  * 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
  */

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

@@ -6,9 +6,9 @@
  * 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 {
     /**

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

@@ -1,5 +1,5 @@
-import { AddressInfo } from 'node:net';
 import { ResolvedConfig } from 'vite';
+import { AddressInfo } from 'node:net';
 /**
  * Resolve the dev server URL from the server address and configuration.
  */