@adonisjs/vite 0.0.1-9 → 2.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 <br />
 
-[![gh-workflow-image]][gh-workflow-url] [![npm-image]][npm-url] ![][typescript-image] [![license-image]][license-url] [![snyk-image]][snyk-url]
+[![gh-workflow-image]][gh-workflow-url] [![npm-image]][npm-url] ![][typescript-image] [![license-image]][license-url]
 
 ## Introduction
 Package to add [Vite](https://vitejs.dev/) as an assets bundler to AdonisJS.
@@ -21,8 +21,8 @@ In order to ensure that the AdonisJS community is welcoming to all, please revie
 ## License
 AdonisJS static files middleware is open-sourced software licensed under the [MIT license](LICENSE.md).
 
-[gh-workflow-image]: https://img.shields.io/github/actions/workflow/status/adonisjs/vite/test.yml?style=for-the-badge
-[gh-workflow-url]: https://github.com/adonisjs/vite/actions/workflows/test.yml "Github action"
+[gh-workflow-image]: https://img.shields.io/github/actions/workflow/status/adonisjs/vite/checks.yml?style=for-the-badge
+[gh-workflow-url]: https://github.com/adonisjs/vite/actions/workflows/checks.yml "Github action"
 
 [npm-image]: https://img.shields.io/npm/v/@adonisjs/vite/latest.svg?style=for-the-badge&logo=npm
 [npm-url]: https://www.npmjs.com/package/@adonisjs/vite/v/latest "npm"
@@ -31,6 +31,3 @@ AdonisJS static files middleware is open-sourced software licensed under the [MI
 
 [license-url]: LICENSE.md
 [license-image]: https://img.shields.io/github/license/adonisjs/vite?style=for-the-badge
-
-[snyk-image]: https://img.shields.io/snyk/vulnerabilities/github/adonisjs/vite?label=Snyk%20Vulnerabilities&style=for-the-badge
-[snyk-url]: https://snyk.io/test/github/adonisjs/vite?targetFile=package.json "snyk"

package/build/index.d.ts

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

package/build/index.js

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

package/build/providers/vite_provider.d.ts

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

package/build/providers/vite_provider.js

@@ -13,16 +13,56 @@ export default class ViteServiceProvider {
         this.app = app;
     }
     /**
-     * Returns edge when it's installed
+     * Registers edge plugin when edge is installed
      */
-    async getEdge() {
+    async registerEdgePlugin() {
+        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');
+            edge.default.use(edgePluginVite(vite));
+        }
+    }
+    /**
+     * Registers CSP keywords when @adonisjs/shield is installed
+     */
+    async registerShieldKeywords() {
+        let cspKeywords = null;
         try {
-            const { default: edge } = await import('edge.js');
-            debug('Detected edge.js package. Adding Vite primitives to it');
-            return edge;
+            const shieldExports = await import('@adonisjs/shield');
+            cspKeywords = shieldExports.cspKeywords;
         }
-        catch {
-            return null;
+        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://');
+            });
         }
     }
     register() {
@@ -36,15 +76,8 @@ export default class ViteServiceProvider {
             });
         });
     }
-    /**
-     * Extending edge
-     */
     async boot() {
-        const edge = await this.getEdge();
-        if (edge) {
-            const vite = await this.app.container.make('vite');
-            const { edgePluginVite } = await import('../src/backend/edge_plugin_vite.js');
-            edge.use(edgePluginVite(vite));
-        }
+        await this.registerEdgePlugin();
+        await this.registerShieldKeywords();
     }
 }

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

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

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

@@ -1,4 +1,4 @@
-import { ViteOptions } from './types/main.js';
+import { ViteOptions } from './types.js';
 /**
  * Define the backend config for resolving vite assets
  */

package/build/src/backend/define_config.js

@@ -6,6 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+import { join } from 'node:path';
 /**
  * Define the backend config for resolving vite assets
  */
@@ -14,6 +15,9 @@ export function defineConfig(config) {
         buildDirectory: 'public/assets',
         hotFile: 'public/assets/hot.json',
         assetsUrl: '/assets',
+        manifestFile: config.buildDirectory
+            ? join(config.buildDirectory, '.vite/manifest.json')
+            : 'public/assets/.vite/manifest.json',
         ...config,
     };
 }

package/build/src/backend/{edge_plugin_vite.d.ts → plugins/edge.d.ts}

@@ -1,5 +1,5 @@
 import type { PluginFn } from 'edge.js/types';
-import type { Vite } from './vite.js';
+import type { Vite } from '../vite.js';
 /**
  * The edge plugin for vite to share vite service with edge
  * and register custom tags

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

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { EdgeError } from 'edge-error';
-import debug from './debug.js';
+import debug from '../debug.js';
 /**
  * The edge plugin for vite to share vite service with edge
  * and register custom tags
@@ -22,11 +22,29 @@ export const edgePluginVite = (vite) => {
             tagName: 'viteReactRefresh',
             seekable: true,
             block: false,
-            compile(_parser, buffer, token) {
+            compile(parser, buffer, token) {
+                let attributes = '';
+                if (token.properties.jsArg.trim()) {
+                    /**
+                     * Converting a single argument to a SequenceExpression so that we
+                     * work around the following edge cases.
+                     *
+                     * - If someone passes an object literal to the tag, ie { nonce: 'foo' }
+                     *   it will be parsed as a LabeledStatement and not an object.
+                     * - If we wrap the object literal inside parenthesis, ie ({nonce: 'foo'})
+                     *   then we will end up messing other expressions like a variable reference
+                     *   , or a member expression and so on.
+                     * - So the best bet is to convert user supplied argument to a sequence expression
+                     *   and hence ignore it during stringification.
+                     */
+                    const jsArg = `a,${token.properties.jsArg}`;
+                    const parsed = parser.utils.transformAst(parser.utils.generateAST(jsArg, token.loc, token.filename), token.filename, parser);
+                    attributes = parser.utils.stringify(parsed.expressions[1]);
+                }
                 /**
                  * Get HMR script
                  */
-                buffer.writeExpression(`const __vite_hmr_script = state.vite.getReactHmrScript()`, token.filename, token.loc.start.line);
+                buffer.writeExpression(`const __vite_hmr_script = state.vite.getReactHmrScript(${attributes})`, token.filename, token.loc.start.line);
                 /**
                  * Check if the script exists (only in hot mode)
                  */
@@ -58,7 +76,10 @@ export const edgePluginVite = (vite) => {
                 }
                 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);
+                const methodCall = parsed.type === 'SequenceExpression'
+                    ? `generateEntryPointsTags${entrypoints}`
+                    : `generateEntryPointsTags(${entrypoints})`;
+                buffer.outputExpression(`state.vite.${methodCall}.join('\\n')`, token.filename, token.loc.start.line, false);
             },
         });
     };

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

@@ -45,6 +45,13 @@ export type ViteOptions = {
      * @default 'public/assets'
      */
     buildDirectory: string;
+    /**
+     * Path to the manifest file relative from the root of
+     * the application
+     *
+     * @default 'public/assets/.vite/manifest.json'
+     */
+    manifestFile: string;
     /**
      * The URL to prefix when generating assets URLs. For example: This
      * could the CDN URL when generating the production build

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

@@ -1,5 +1,5 @@
 import type { Manifest } from 'vite';
-import type { AdonisViteElement, ViteOptions } from './types/main.js';
+import type { AdonisViteElement, ViteOptions } from './types.js';
 /**
  * Vite class exposes the APIs to generate tags and URLs for
  * assets processed using vite.
@@ -10,7 +10,18 @@ export declare class Vite {
     /**
      * Generate tags for the entry points
      */
-    generateEntryPointsTags(entryPoints: string[] | string): AdonisViteElement[];
+    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;
     /**
      * Returns path to a given asset file
      */
@@ -24,5 +35,5 @@ export declare class Vite {
     /**
      * Returns the script needed for the HMR working with React
      */
-    getReactHmrScript(): AdonisViteElement | null;
+    getReactHmrScript(attributes?: Record<string, any>): AdonisViteElement | null;
 }

package/build/src/backend/vite.js

@@ -6,7 +6,6 @@
  * 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 { existsSync, readFileSync } from 'node:fs';
 import debug from './debug.js';
 import { makeAttributes, uniqBy } from './utils.js';
@@ -15,10 +14,6 @@ import { makeAttributes, uniqBy } from './utils.js';
  * assets processed using vite.
  */
 export class Vite {
-    /**
-     * Manifest file name
-     */
-    #manifestFilename = 'manifest.json';
     /**
      * We cache the manifest file content in production
      * to avoid reading the file multiple times
@@ -122,12 +117,13 @@ export class Vite {
     /**
      * Returns the script needed for the HMR working with Vite
      */
-    #getViteHmrScript() {
+    #getViteHmrScript(attributes) {
         return this.#generateElement({
             tag: 'script',
             attributes: {
                 type: 'module',
                 src: this.#hotAsset('@vite/client'),
+                ...attributes,
             },
             children: [],
         });
@@ -137,7 +133,7 @@ export class Vite {
      * Also adds the @vite/client script
      */
     #generateEntryPointsTagsForHotMode(entryPoints, attributes) {
-        const viteHmr = this.#getViteHmrScript();
+        const viteHmr = this.#getViteHmrScript(attributes);
         const tags = entryPoints.map((entrypoint) => this.#generateTag(entrypoint, attributes));
         return viteHmr ? [viteHmr].concat(tags) : tags;
     }
@@ -195,12 +191,33 @@ export class Vite {
     /**
      * Generate tags for the entry points
      */
-    generateEntryPointsTags(entryPoints) {
+    generateEntryPointsTags(entryPoints, attributes) {
         entryPoints = Array.isArray(entryPoints) ? entryPoints : [entryPoints];
         if (this.#isRunningHot()) {
-            return this.#generateEntryPointsTagsForHotMode(entryPoints);
+            return this.#generateEntryPointsTagsForHotMode(entryPoints, attributes);
+        }
+        return this.#generateEntryPointsTagsWithManifest(entryPoints, attributes);
+    }
+    /**
+     * Returns the dev server URL when running in hot
+     * mode. Otherwise an empty string
+     */
+    devUrl() {
+        if (this.#isRunningHot()) {
+            return this.#readHotFile().url;
+        }
+        return '';
+    }
+    /**
+     * 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.#generateEntryPointsTagsWithManifest(entryPoints);
+        return this.#options.assetsUrl;
     }
     /**
      * Returns path to a given asset file
@@ -222,14 +239,14 @@ export class Vite {
             throw new Error('Cannot read the manifest file when running in hot mode');
         }
         if (!this.#manifestCache) {
-            this.#manifestCache = this.#readFileAsJSON(join(this.#options.buildDirectory, this.#manifestFilename));
+            this.#manifestCache = this.#readFileAsJSON(this.#options.manifestFile);
         }
         return this.#manifestCache;
     }
     /**
      * Returns the script needed for the HMR working with React
      */
-    getReactHmrScript() {
+    getReactHmrScript(attributes) {
         if (!this.#isRunningHot()) {
             return null;
         }
@@ -237,6 +254,7 @@ export class Vite {
             tag: 'script',
             attributes: {
                 type: 'module',
+                ...attributes,
             },
             children: [
                 '',

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

@@ -1,5 +1,10 @@
 import { PluginOption } from 'vite';
 import type { PluginOptions } from './types.js';
+declare module 'vite' {
+    interface ManifestChunk {
+        integrity: string;
+    }
+}
 /**
  * Vite plugin for adonisjs
  */

package/build/src/client/main.js

@@ -9,7 +9,6 @@
 import { defu } from 'defu';
 import PluginRestart from 'vite-plugin-restart';
 import { config } from './config.js';
-const VitePluginRestart = PluginRestart;
 /**
  * Vite plugin for adonisjs
  */
@@ -20,5 +19,5 @@ export default function adonisjs(options) {
         hotFile: 'public/assets/hot.json',
         reload: ['./resources/views/**/*.edge'],
     });
-    return [VitePluginRestart({ reload: fullOptions.reload }), config(fullOptions)];
+    return [PluginRestart({ reload: fullOptions.reload }), config(fullOptions)];
 }

package/build/src/client/utils.js

@@ -6,6 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
+import { networkInterfaces } from 'node:os';
 /**
  * Resolve the dev server URL from the server address and configuration.
  */
@@ -20,6 +21,19 @@ export const resolveDevServerUrl = (address, config) => {
     if (host === '::1') {
         host = 'localhost';
     }
+    else if (host === '::') {
+        const networkAddress = Object.values(networkInterfaces())
+            .flatMap((nInterface) => nInterface ?? [])
+            .find((detail) => {
+            return (detail &&
+                detail.address &&
+                detail.family === 'IPv4' &&
+                !detail.address.includes('127.0.0.1'));
+        });
+        if (networkAddress) {
+            host = networkAddress.address;
+        }
+    }
     return `${protocol}://${host}:${address.port}`;
 };
 /**

package/build/stubs/client_config.stub

@@ -1,6 +1,6 @@
----
-to: {{ app.makePath('vite.config.js') }}
----
+{{{
+  exports({ to: app.makePath('vite.config.js') })
+}}}
 import { defineConfig } from 'vite'
 import adonisjs from '@adonisjs/vite/client'
 
@@ -16,7 +16,7 @@ export default defineConfig({
       /**
        * Paths to watch and reload the browser on file change
        */
-      reloads: ['resources/views/**/*.edge'],
+      reload: ['resources/views/**/*.edge'],
     }),
   ],
 })

package/build/stubs/config.stub

@@ -1,6 +1,6 @@
----
-to: {{ app.configPath('vite.ts') }}
----
+{{{
+  exports({ to: app.configPath('vite.ts') })
+}}}
 import { defineConfig } from '@adonisjs/vite'
 
 const viteBackendConfig = defineConfig({

package/build/stubs/js_entrypoint.stub

@@ -1,4 +1,4 @@
----
-to: {{ app.makePath('resources/js/app.js') }}
----
+{{{
+  exports({ 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-9",
+  "version": "2.0.0",
   "engines": {
     "node": ">=18.16.0"
   },
@@ -22,7 +22,7 @@
     "./services/main": "./build/services/vite.js",
     "./vite_provider": "./build/providers/vite_provider.js",
     "./client": "./build/src/client/main.js",
-    "./plugin_edge": "./build/backend/edge_plugin_vite.js",
+    "./plugins/edge": "./build/backend/plugins/edge.js",
     "./types": "./build/src/backend/types.js"
   },
   "scripts": {
@@ -34,52 +34,63 @@
     "quick:test": "node --enable-source-maps --loader=ts-node/esm bin/test.ts",
     "pretest": "npm run lint",
     "test": "c8 npm run quick:test",
-    "compile": "npm run lint && npm run clean && tsc && npm run copy:templates",
+    "precompile": "npm run lint && npm run clean ",
+    "compile": "tsc",
+    "postcompile": "npm run copy:templates",
     "build": "npm run compile",
-    "postbuild": "npm run copy:templates",
     "release": "np",
     "version": "npm run build",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@adonisjs/assembler": "^6.1.3-18",
-    "@adonisjs/core": "^6.1.5-19",
-    "@adonisjs/eslint-config": "^1.1.8",
-    "@adonisjs/prettier-config": "^1.1.8",
-    "@adonisjs/tsconfig": "^1.1.8",
-    "@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",
-    "@swc/core": "^1.3.78",
-    "@types/node": "^20.5.1",
+    "@adonisjs/assembler": "^6.1.3-28",
+    "@adonisjs/core": "^6.1.5-32",
+    "@adonisjs/eslint-config": "^1.1.9",
+    "@adonisjs/prettier-config": "^1.1.9",
+    "@adonisjs/session": "^7.0.0-14",
+    "@adonisjs/shield": "^8.0.0-9",
+    "@adonisjs/tsconfig": "^1.1.9",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@japa/assert": "^2.0.1",
+    "@japa/expect-type": "^2.0.0",
+    "@japa/file-system": "^2.0.1",
+    "@japa/runner": "^3.1.0",
+    "@swc/core": "^1.3.99",
+    "@types/node": "^20.10.0",
     "c8": "^8.0.0",
     "copyfiles": "^2.4.1",
-    "del-cli": "^5.0.0",
-    "edge.js": "^6.0.0-8",
-    "eslint": "^8.45.0",
+    "del-cli": "^5.1.0",
+    "edge.js": "^6.0.0",
+    "eslint": "^8.54.0",
     "husky": "^8.0.3",
     "np": "^8.0.4",
-    "prettier": "^3.0.0",
-    "rollup": "^3.28.1",
+    "prettier": "^3.1.0",
+    "rollup": "^4.6.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9"
+    "typescript": "5.2.2",
+    "vite": "^5.0.2"
   },
   "dependencies": {
-    "defu": "^6.1.2",
-    "edge-error": "^4.0.0-0",
-    "vite-plugin-restart": "^0.3.1"
+    "defu": "^6.1.3",
+    "edge-error": "^4.0.0",
+    "vite-plugin-restart": "^0.4.0"
   },
   "peerDependencies": {
-    "@adonisjs/core": "^6.1.5-18",
-    "edge.js": "^6.0.0-8"
+    "@adonisjs/core": "^6.1.5-32",
+    "@adonisjs/shield": "^8.0.0-9",
+    "edge.js": "^6.0.0",
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
     "edge.js": {
       "optional": true
+    },
+    "@adonisjs/shield": {
+      "optional": true
     }
   },
   "author": "Julien Ripouteau <julien@ripouteau.com>",
@@ -111,11 +122,11 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "next"
+    "tag": "latest"
   },
   "np": {
     "message": "chore(release): %s",
-    "tag": "next",
+    "tag": "latest",
     "branch": "main",
     "anyBranch": false
   },

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

@@ -1,14 +0,0 @@
-import { Vite } from '../vite.js';
-/**
- * Extend the container bindings
- */
-declare module '@adonisjs/core/types' {
-    interface ContainerBindings {
-        vite: Vite;
-    }
-}
-declare module 'vite' {
-    interface ManifestChunk {
-        integrity: string;
-    }
-}

package/build/src/backend/types/main.js

@@ -1,9 +0,0 @@
-/*
- * @adonisjs/vite
- *
- * (c) AdonisJS
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-export {};