@adonisjs/vite 2.0.2 → 3.0.0-0

package/LICENSE.md

@@ -1,6 +1,6 @@
 # The MIT License
 
-Copyright 2022 Harminder Virk, contributors
+Copyright (c) 2023
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/build/index.d.ts

@@ -1,4 +1,4 @@
+export { Vite } from './src/vite.js';
 export { configure } from './configure.js';
-export { Vite } from './src/backend/vite.js';
 export { stubsRoot } from './stubs/main.js';
-export { defineConfig } from './src/backend/define_config.js';
+export { defineConfig } from './src/define_config.js';

package/build/index.js

@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+export { Vite } from './src/vite.js';
 export { configure } from './configure.js';
-export { Vite } from './src/backend/vite.js';
 export { stubsRoot } from './stubs/main.js';
-export { defineConfig } from './src/backend/define_config.js';
+export { defineConfig } from './src/define_config.js';

package/build/providers/vite_provider.d.ts

@@ -1,24 +1,18 @@
 import type { ApplicationService } from '@adonisjs/core/types';
-import { Vite } from '../src/backend/vite.js';
-/**
- * Extend the container bindings
- */
+import { Vite } from '../src/vite.js';
 declare module '@adonisjs/core/types' {
     interface ContainerBindings {
         vite: Vite;
     }
 }
-export default class ViteServiceProvider {
+export default class ViteProvider {
     protected app: ApplicationService;
     constructor(app: ApplicationService);
     /**
      * Registers edge plugin when edge is installed
      */
     protected registerEdgePlugin(): Promise<void>;
-    /**
-     * Registers CSP keywords when @adonisjs/shield is installed
-     */
-    protected registerShieldKeywords(): Promise<void>;
-    register(): void;
+    register(): Promise<void>;
     boot(): Promise<void>;
+    shutdown(): Promise<void>;
 }

package/build/providers/vite_provider.js

@@ -6,10 +6,9 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import debug from '../src/backend/debug.js';
-import { Vite } from '../src/backend/vite.js';
-import { defineConfig } from '../src/backend/define_config.js';
-export default class ViteServiceProvider {
+import { Vite } from '../src/vite.js';
+import ViteMiddleware from '../src/middlewares/vite_middleware.js';
+export default class ViteProvider {
     app;
     constructor(app) {
         this.app = app;
@@ -21,60 +20,30 @@ export default class ViteServiceProvider {
         if (this.app.usingEdgeJS) {
             const edge = await import('edge.js');
             const vite = await this.app.container.make('vite');
-            const { edgePluginVite } = await import('../src/backend/plugins/edge.js');
+            const { edgePluginVite } = await import('../src/plugins/edge.js');
             edge.default.use(edgePluginVite(vite));
         }
     }
-    /**
-     * Registers CSP keywords when @adonisjs/shield is installed
-     */
-    async registerShieldKeywords() {
-        let cspKeywords = null;
-        try {
-            const shieldExports = await import('@adonisjs/shield');
-            cspKeywords = shieldExports.cspKeywords;
-        }
-        catch { }
-        if (cspKeywords) {
-            debug('Detected @adonisjs/shield package. Adding Vite keywords for CSP policy');
-            const vite = await this.app.container.make('vite');
-            /**
-             * Registering the @viteUrl keyword for CSP directives.
-             * Returns http URL to the dev or the CDN server, otherwise
-             * an empty string
-             */
-            cspKeywords.register('@viteUrl', function () {
-                const assetsURL = vite.assetsUrl();
-                if (!assetsURL || !assetsURL.startsWith('http://') || assetsURL.startsWith('https://')) {
-                    return '';
-                }
-                return assetsURL;
-            });
-            /**
-             * Registering the @viteDevUrl keyword for the CSP directives.
-             * Returns the dev server URL in development and empty string
-             * in prod
-             */
-            cspKeywords.register('@viteDevUrl', function () {
-                return vite.devUrl();
-            });
-            /**
-             * Registering the @viteHmrUrl keyword for the CSP directives.
-             * Returns the Websocket URL for the HMR server
-             */
-            cspKeywords.register('@viteHmrUrl', function () {
-                return vite.devUrl().replace('http://', 'ws://').replace('https://', 'wss://');
-            });
+    async register() {
+        const config = this.app.config.get('vite');
+        const vite = new Vite(this.app.inDev, config);
+        this.app.container.bind('vite', () => vite);
+        this.app.container.bind(ViteMiddleware, () => new ViteMiddleware(vite));
+        if (this.app.inDev) {
+            const server = await this.app.container.make('server');
+            server.use([() => import('../src/middlewares/vite_middleware.js')]);
         }
     }
-    register() {
-        this.app.container.singleton('vite', async () => {
-            const config = this.app.config.get('vite', defineConfig({}));
-            return new Vite(config);
-        });
-    }
     async boot() {
-        await this.registerEdgePlugin();
-        await this.registerShieldKeywords();
+        if (!this.app.inDev)
+            return;
+        const vite = await this.app.container.make('vite');
+        await Promise.all([vite.createDevServer(), this.registerEdgePlugin()]);
+    }
+    async shutdown() {
+        if (!this.app.inDev)
+            return;
+        const vite = await this.app.container.make('vite');
+        await vite.stopDevServer();
     }
 }

package/build/services/vite.d.ts

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

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

@@ -1,9 +1,20 @@
-import { ConfigEnv, Plugin, UserConfig } from 'vite';
+import type { AliasOptions, ConfigEnv, Plugin, UserConfig } from 'vite';
 import type { PluginFullOptions } from './types.js';
+/**
+ * Resolve the `config.resolve.alias` value
+ *
+ * Basically we are merging the user defined alias with the
+ * default alias.
+ */
+export declare function resolveAlias(config: UserConfig): AliasOptions;
+/**
+ * Resolve the `config.base` value
+ */
+export declare function resolveBase(config: UserConfig, options: PluginFullOptions, command: 'build' | 'serve'): string;
 /**
  * Vite config hook
  */
-export declare const configHook: (options: PluginFullOptions, userConfig: UserConfig, { command }: ConfigEnv) => UserConfig;
+export declare function configHook(options: PluginFullOptions, userConfig: UserConfig, { command }: ConfigEnv): UserConfig;
 /**
  * Update the user vite config to match the Adonis requirements
  */

package/build/src/client/config.js

@@ -6,68 +6,62 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { defu } from 'defu';
 import { join } from 'node:path';
-import { HotFile } from './hot_file.js';
-import { resolveDevServerUrl } from './utils.js';
-import { ConfigResolver } from './config_resolver.js';
+import { addTrailingSlash } from '../utils.js';
+/**
+ * Resolve the `config.resolve.alias` value
+ *
+ * Basically we are merging the user defined alias with the
+ * default alias.
+ */
+export function resolveAlias(config) {
+    const defaultAlias = { '@/': `/resources/js/` };
+    if (Array.isArray(config.resolve?.alias)) {
+        return [
+            ...(config.resolve?.alias ?? []),
+            Object.entries(defaultAlias).map(([find, replacement]) => ({ find, replacement })),
+        ];
+    }
+    return { ...defaultAlias, ...config.resolve?.alias };
+}
+/**
+ * Resolve the `config.base` value
+ */
+export function resolveBase(config, options, command) {
+    if (config.base)
+        return config.base;
+    if (command === 'build') {
+        return addTrailingSlash(options.assetsUrl);
+    }
+    return '/';
+}
 /**
  * Vite config hook
  */
-export const configHook = (options, userConfig, { command }) => {
+export function 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__',
-        },
+        resolve: { alias: resolveAlias(userConfig) },
+        base: resolveBase(userConfig, options, command),
         build: {
             assetsDir: '',
-            manifest: userConfig.build?.manifest ?? true,
             emptyOutDir: true,
-            outDir: ConfigResolver.resolveOutDir(userConfig, options),
+            manifest: userConfig.build?.manifest ?? true,
+            outDir: userConfig.build?.outDir ?? options.buildDirectory,
+            assetsInlineLimit: userConfig.build?.assetsInlineLimit ?? 0,
             rollupOptions: {
                 input: options.entrypoints.map((entrypoint) => join(userConfig.root || '', entrypoint)),
             },
         },
     };
-    return defu(config, userConfig);
-};
+    return config;
+}
 /**
  * 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 () => {
-                devServerUrl = resolveDevServerUrl(server.httpServer.address(), server.config);
-                await hotfile.write({ url: devServerUrl });
-            });
-            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,
-        }),
-        configResolved: async (resolvedConfig) => {
-            ConfigResolver.resolvedConfig = resolvedConfig;
-        },
     };
 };

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

@@ -6,6 +6,6 @@ declare module 'vite' {
     }
 }
 /**
- * Vite plugin for adonisjs
+ * Vite plugin for AdonisJS
  */
 export default function adonisjs(options: PluginOptions): PluginOption[];

package/build/src/client/main.js

@@ -6,18 +6,16 @@
  * 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';
 /**
- * Vite plugin for adonisjs
+ * Vite plugin for AdonisJS
  */
 export default function adonisjs(options) {
-    const fullOptions = defu(options, {
-        buildDirectory: 'public/assets',
+    const fullOptions = Object.assign({
         assetsUrl: '/assets',
-        hotFile: 'public/assets/hot.json',
+        buildDirectory: 'public/assets',
         reload: ['./resources/views/**/*.edge'],
-    });
+    }, options);
     return [PluginRestart({ reload: fullOptions.reload }), config(fullOptions)];
 }

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

@@ -1,17 +1,4 @@
-/**
- * Possible plugin options
- */
-export type PluginOptions = {
-    /**
-     * Path to the hot file
-     *
-     * @default public/hot.json
-     */
-    hotFile?: string;
-    /**
-     * Paths to the entrypoints files
-     */
-    entrypoints: string[];
+export interface PluginOptions {
     /**
      * The URL where the assets will be served. This is particularly
      * useful if you are using a CDN to deploy your assets.
@@ -19,17 +6,21 @@ export type PluginOptions = {
      * @default ''
      */
     assetsUrl?: string;
-    /**
-     * Public directory where the assets will be compiled.
-     *
-     * @default 'public/assets'
-     */
-    buildDirectory?: string;
     /**
      * Files that should trigger a page reload when changed.
      *
      * @default ['./resources/views/** /*.edge']
      */
     reload?: string[];
-};
+    /**
+     * Paths to the entrypoints files
+     */
+    entrypoints: string[];
+    /**
+     * Public directory where the assets will be compiled.
+     *
+     * @default 'public/assets'
+     */
+    buildDirectory?: string;
+}
 export type PluginFullOptions = Required<PluginOptions>;

package/build/src/define_config.d.ts

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

package/build/src/{backend/define_config.js → define_config.js}

@@ -8,12 +8,11 @@
  */
 import { join } from 'node:path';
 /**
- * Define the backend config for resolving vite assets
+ * Define the backend config for Vite
  */
 export function defineConfig(config) {
     return {
         buildDirectory: 'public/assets',
-        hotFile: 'public/assets/hot.json',
         assetsUrl: '/assets',
         manifestFile: config.buildDirectory
             ? join(config.buildDirectory, '.vite/manifest.json')

package/build/src/hooks/build_hook.d.ts

@@ -0,0 +1,8 @@
+import type { AssemblerHookHandler } from '@adonisjs/application/types';
+/**
+ * This is an Assembler hook that should be executed when the application is
+ * builded using the `node ace build` command.
+ *
+ * The hook is responsible for launching a Vite multi-build process.
+ */
+export default function viteBuildHook({ logger }: Parameters<AssemblerHookHandler>[0]): Promise<void>;

package/build/src/hooks/build_hook.js

@@ -0,0 +1,25 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import { multibuild } from '@vavite/multibuild';
+/**
+ * This is an Assembler hook that should be executed when the application is
+ * builded using the `node ace build` command.
+ *
+ * The hook is responsible for launching a Vite multi-build process.
+ */
+export default async function viteBuildHook({ logger }) {
+    logger.info('building assets with vite');
+    await multibuild(undefined, {
+        onStartBuildStep: (step) => {
+            if (!step.currentStep.description)
+                return;
+            logger.info(step.currentStep.description);
+        },
+    });
+}

package/build/src/middlewares/vite_middleware.d.ts

@@ -0,0 +1,17 @@
+import type { HttpContext } from '@adonisjs/core/http';
+import type { NextFn } from '@adonisjs/core/types/http';
+import type { Vite } from '../vite.js';
+/**
+ * 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.
+ */
+export default class ViteMiddleware {
+    #private;
+    protected vite: Vite;
+    constructor(vite: Vite);
+    handle({ request, response }: HttpContext, next: NextFn): Promise<unknown>;
+}

package/build/src/middlewares/vite_middleware.js

@@ -0,0 +1,31 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+/**
+ * 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.
+ */
+export default class ViteMiddleware {
+    vite;
+    #devServer;
+    constructor(vite) {
+        this.vite = vite;
+        this.#devServer = this.vite.getDevServer();
+    }
+    async handle({ request, response }, next) {
+        return await new Promise((resolve) => {
+            this.#devServer.middlewares.handle(request.request, response.response, () => {
+                return resolve(next());
+            });
+        });
+    }
+}

package/build/src/{backend/plugins → plugins}/edge.js

@@ -7,17 +7,14 @@
  * 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');
+    const edgeVite = (edge) => {
         edge.global('vite', vite);
         edge.global('asset', vite.assetPath.bind(vite));
-        debug('registering vite tags with edge');
         edge.registerTag({
             tagName: 'viteReactRefresh',
             seekable: true,
@@ -83,4 +80,5 @@ export const edgePluginVite = (vite) => {
             },
         });
     };
+    return edgeVite;
 };

package/build/src/{backend/types.d.ts → types.d.ts}

@@ -1,9 +1,3 @@
-/**
- * Contents of the hotfile
- */
-export type HotFile = {
-    url: string;
-};
 /**
  * Parameters passed to the setAttributes callback
  */
@@ -28,17 +22,7 @@ export type AdonisViteElement = {
     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;
+export interface ViteOptions {
     /**
      * Public directory where the assets will be compiled.
      *
@@ -61,12 +45,12 @@ export type ViteOptions = {
     assetsUrl?: string;
     /**
      * A custom set of attributes to apply on all
-     * script tags
+     * script tags injected by edge `@vite` tag
      */
-    scriptAttributes?: SetAttributes;
+    styleAttributes?: SetAttributes;
     /**
      * A custom set of attributes to apply on all
-     * style tags
+     * style tags injected by edge `@vite` tag
      */
-    styleAttributes?: SetAttributes;
-};
+    scriptAttributes?: SetAttributes;
+}

package/build/src/{backend/utils.d.ts → utils.d.ts}

@@ -6,3 +6,7 @@ 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;
+/**
+ * Add a trailing slash if missing
+ */
+export declare const addTrailingSlash: (url: string) => string;

package/build/src/{backend/utils.js → utils.js}

@@ -34,3 +34,9 @@ export function makeAttributes(attributes) {
         .filter((attr) => attr !== null)
         .join(' ');
 }
+/**
+ * Add a trailing slash if missing
+ */
+export const addTrailingSlash = (url) => {
+    return url.endsWith('/') ? url : url + '/';
+};

package/build/src/{backend/vite.d.ts → vite.d.ts}

@@ -1,4 +1,5 @@
-import type { Manifest } from 'vite';
+import type { ViteRuntime } from 'vite/runtime';
+import type { Manifest, ViteDevServer } from 'vite';
 import type { AdonisViteElement, ViteOptions } from './types.js';
 /**
  * Vite class exposes the APIs to generate tags and URLs for
@@ -6,22 +7,18 @@ import type { AdonisViteElement, ViteOptions } from './types.js';
  */
 export declare class Vite {
     #private;
-    constructor(options: ViteOptions);
+    protected inDev: boolean;
+    constructor(inDev: boolean, options: ViteOptions);
     /**
      * Generate tags for the entry points
      */
     generateEntryPointsTags(entryPoints: string[] | string, attributes?: Record<string, any>): AdonisViteElement[];
-    /**
-     * Returns the dev server URL when running in hot
-     * mode. Otherwise an empty string
-     */
-    devUrl(): string;
     /**
      * Returns the dev server URL when running in hot
      * mode, otherwise returns the explicitly configured
      * "assets" URL
      */
-    assetsUrl(): string | undefined;
+    assetsUrl(): string | boolean | undefined;
     /**
      * Returns path to a given asset file
      */
@@ -29,9 +26,30 @@ export declare class Vite {
     /**
      * Returns the manifest file contents
      *
-     * @throws Will throw an exception when running in hot mode
+     * @throws Will throw an exception when running in dev
      */
     manifest(): Manifest;
+    /**
+     * Create the Vite Dev Server and runtime
+     *
+     * We lazy load the APIs to avoid loading it in production
+     * since we don't need it
+     */
+    createDevServer(): Promise<void>;
+    /**
+     * Stop the Vite Dev server
+     */
+    stopDevServer(): Promise<void>;
+    /**
+     * Get the Vite Dev server instance
+     * Will not be available when running in production
+     */
+    getDevServer(): ViteDevServer | undefined;
+    /**
+     * Get the Vite runtime instance
+     * Will not be available when running in production
+     */
+    getRuntime(): ViteRuntime | undefined;
     /**
      * Returns the script needed for the HMR working with React
      */