@adonisjs/vite 0.0.1-0

package/src/backend/vite.ts

@@ -0,0 +1,367 @@
+/*
+ * @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 type { Manifest } from 'vite'
+import { fileURLToPath } from 'node:url'
+import { HotFile, SetAttributes } from './types/main.js'
+import { existsSync, readFileSync } from 'node:fs'
+import { ApplicationService } from '@adonisjs/core/types'
+import { uniqBy } from './utils.js'
+
+export class Vite {
+  /**
+   * Path to the build directory
+   *
+   * @default 'public/assets'
+   */
+  #buildDirectory: string
+
+  /**
+   * Path to the hotfile
+   *
+   * @default 'public/assets/hot.json'
+   */
+  #hotFile: string
+
+  /**
+   * 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: Manifest | null = null
+
+  /**
+   * Attributes to be set on the style tags
+   */
+  #styleAttributes: SetAttributes = {}
+
+  /**
+   * Attributes to be set on the script tags
+   */
+  #scriptAttributes: SetAttributes = {}
+
+  constructor(private application: ApplicationService) {
+    this.#buildDirectory = this.application.publicPath('assets')
+    this.#hotFile = join(this.#buildDirectory, 'hot.json')
+  }
+
+  /**
+   * Checks if the application is running in hot mode
+   */
+  #isRunningHot(): boolean {
+    return existsSync(this.#hotFile)
+  }
+
+  /**
+   * Reads the file contents as JSON
+   */
+  #readFileAsJSON(filePath: string) {
+    return JSON.parse(readFileSync(filePath, 'utf-8'))
+  }
+
+  /**
+   * Returns the parsed hot file content
+   */
+  #readHotFile(): HotFile {
+    return this.#readFileAsJSON(this.#hotFile)
+  }
+
+  /**
+   * Get the path to an asset when running in hot mode
+   */
+  #hotAsset(asset: string) {
+    return this.#readHotFile().url + '/' + asset
+  }
+
+  /**
+   * Returns the script needed for the HMR working with Vite
+   */
+  #getViteHmrScript(): string {
+    if (!this.#isRunningHot()) {
+      return ''
+    }
+
+    return `<script type="module" src="${this.#hotAsset('@vite/client')}"></script>`
+  }
+
+  /**
+   * Generate style and script tags for the given entrypoints
+   * Also add the @vite/client script
+   */
+  #generateEntryPointsTagsForHotmode(entryPoints: string[]): string {
+    const viteHmr = this.#getViteHmrScript()
+    const tags = entryPoints.map((entrypoint) => this.#generateTag(entrypoint))
+
+    return [viteHmr, ...tags].join('\n')
+  }
+
+  /**
+   * Generate style and script tags for the given entrypoints
+   * using the manifest file
+   */
+  #generateEntryPointsTagsWithManifest(entryPoints: string[]): string {
+    const manifest = this.manifest()
+    const tags: { path: string; tag: string }[] = []
+
+    for (const entryPoint of entryPoints) {
+      const chunk = this.#chunk(manifest, entryPoint)
+      tags.push({ path: chunk.file, tag: this.#generateTag(chunk.file) })
+
+      for (const css of chunk.css || []) {
+        const cssChunk = this.#chunkByFile(manifest, css)
+        tags.push({ path: cssChunk.file, tag: this.#generateTag(cssChunk.file) })
+      }
+    }
+
+    return uniqBy(tags, 'path')
+      .sort((a) => (a.path.endsWith('.css') ? -1 : 1))
+      .map((preload) => preload.tag)
+      .join('\n')
+  }
+
+  /**
+   * Generate tags for the entry points
+   */
+  generateEntryPointsTags(entryPoints: string[] | string): string {
+    entryPoints = Array.isArray(entryPoints) ? entryPoints : [entryPoints]
+
+    if (this.#isRunningHot()) {
+      return this.#generateEntryPointsTagsForHotmode(entryPoints)
+    }
+
+    return this.#generateEntryPointsTagsWithManifest(entryPoints)
+  }
+
+  /**
+   * Get a chunk from the manifest file for a given file name
+   */
+  #chunk(manifest: Manifest, fileName: string) {
+    const chunk = manifest[fileName]
+
+    if (!chunk) {
+      throw new Error(`Cannot find "${fileName}" chunk in the manifest file`)
+    }
+
+    return chunk
+  }
+
+  /**
+   * Get a chunk from the manifest file for a given hashed file name
+   */
+  #chunkByFile(manifest: Manifest, fileName: string) {
+    const chunk = Object.values(manifest).find((c) => c.file === fileName)
+
+    if (!chunk) {
+      throw new Error(`Cannot find "${fileName}" chunk in the manifest file`)
+    }
+
+    return chunk
+  }
+
+  /**
+   * Check if the given path is a CSS path
+   */
+  #isCssPath(path: string) {
+    return path.match(/\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/) !== null
+  }
+
+  /**
+   * Generate a HTML tag for the given asset
+   */
+  #generateTag(asset: string): string {
+    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: string, url: string, attributes: SetAttributes) {
+    if (typeof attributes === 'function') {
+      return attributes({ src, url })
+    }
+
+    return attributes
+  }
+
+  /**
+   * Convert Record of attributes to a valid HTML string
+   */
+  #makeAttributes(attributes: Record<string, string | boolean>) {
+    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: string, url: string) {
+    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: string, url: string) {
+    const customAttributes = this.#unwrapAttributes(src, url, this.#styleAttributes)
+    const attributes = { rel: 'stylesheet', ...customAttributes }
+
+    return `<link ${this.#makeAttributes(attributes)} href="${url}">`
+  }
+
+  /**
+   * Returns path to a given asset file
+   */
+  assetPath(asset: string) {
+    if (this.#isRunningHot()) {
+      return this.#hotAsset(asset)
+    }
+
+    const chunk = this.#chunk(this.manifest(), asset)
+    return `${this.#assetsUrl}/assets/${chunk.file}`
+  }
+
+  /**
+   * Returns the manifest file content
+   *
+   * @throws Will throw an exception when running in hot mode
+   */
+  manifest(): Manifest {
+    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
+    }
+
+    return manifest
+  }
+
+  /**
+   * Returns the script needed for the HMR working with React
+   *
+   * This method is called automatically when using edge tag `@viteReactRefresh`
+   */
+  getReactHmrScript(): string {
+    if (!this.#isRunningHot()) {
+      return ''
+    }
+
+    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: string) {
+    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: string) {
+    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: string) {
+    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: string) {
+    this.#assetsUrl = url.endsWith('/') ? url : `${url}/`
+    return this
+  }
+
+  /**
+   * Include additional attributes to each script tag generated
+   */
+  setScriptAttributes(attributes: SetAttributes) {
+    this.#scriptAttributes = attributes
+    return this
+  }
+
+  /**
+   * Include additional attributes to each style tag generated
+   */
+  setStyleAttributes(attributes: SetAttributes) {
+    this.#styleAttributes = attributes
+    return this
+  }
+}

package/src/vite_plugin/config.ts

@@ -0,0 +1,97 @@
+/*
+ * @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 { AddressInfo } from 'node:net'
+import { ConfigEnv, Plugin, UserConfig } from 'vite'
+import { PluginFullOptions } from './types/index.js'
+import { resolveDevServerUrl } from './utils.js'
+import { HotFile } from './hot_file.js'
+import { ConfigResolver } from './config_resolver.js'
+import { join } from 'node:path'
+
+/**
+ * Vite config hook
+ */
+export const configHook = (
+  options: PluginFullOptions,
+  userConfig: UserConfig,
+  { command }: ConfigEnv
+): UserConfig => {
+  const config: UserConfig = {
+    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: {
+      assetsDir: '',
+      manifest: userConfig.build?.manifest ?? true,
+      emptyOutDir: true,
+      outDir: ConfigResolver.resolveOutDir(userConfig, options),
+
+      rollupOptions: {
+        input: options.entrypoints.map((entrypoint) => join(userConfig.root || '', entrypoint)),
+      },
+    },
+  }
+
+  return defu(config, userConfig)
+}
+
+/**
+ * Update the user vite config to match the Adonis requirements
+ */
+export const config = (options: PluginFullOptions): Plugin => {
+  let devServerUrl: string
+
+  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() as AddressInfo,
+          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/src/vite_plugin/config_resolver.ts

@@ -0,0 +1,62 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { ResolvedConfig, UserConfig, AliasOptions } from 'vite'
+import { addTrailingSlash } from './utils.js'
+import { PluginFullOptions } from './types/index.js'
+import { join } from 'node:path'
+
+export class ConfigResolver {
+  static resolvedConfig?: ResolvedConfig
+
+  /**
+   * Resolve the `config.base` value
+   */
+  static resolveBase(
+    config: UserConfig,
+    options: PluginFullOptions,
+    command: 'build' | 'serve'
+  ): string {
+    if (config.base) {
+      return config.base
+    }
+
+    if (command === 'build') {
+      return addTrailingSlash(options.assetsUrl) + addTrailingSlash(options.buildDirectory)
+    }
+
+    return '/'
+  }
+
+  /**
+   * Resolve the `config.resolve.alias` value
+   *
+   * Basically we are merging the user defined alias with the
+   * default alias.
+   */
+  static resolveAlias(config: UserConfig): AliasOptions {
+    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.build.outDir` value
+   */
+  static resolveOutDir(config: UserConfig, options: PluginFullOptions): string {
+    return config.build?.outDir ?? join(options.publicDirectory, options.buildDirectory)
+  }
+}

package/src/vite_plugin/helpers/inertia.ts

@@ -0,0 +1,27 @@
+/*
+ * @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: string, pages: Record<string, any>) {
+  const path = Object.keys(pages)
+    .sort((a, b) => a.length - b.length)
+    .find((filepath) => filepath.endsWith(name))
+
+  if (!path) {
+    throw new Error(`Page component "${name}" could not be found.`)
+  }
+
+  let component = typeof pages[path] === 'function' ? await pages[path]() : pages[path]
+
+  component = component.default ?? component
+
+  return component
+}

package/src/vite_plugin/hot_file.ts

@@ -0,0 +1,59 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+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: string
+
+  /**
+   * Register hooks to clean the hot file on exit
+   */
+  #cleanHotFileOnExit() {
+    const clean = this.clean.bind(this)
+
+    process.on('exit', clean)
+
+    process.on('SIGINT', process.exit)
+    process.on('SIGTERM', process.exit)
+    process.on('SIGHUP', process.exit)
+    process.on('SIGBREAK', process.exit)
+    process.on('SIGKILL', process.exit)
+  }
+
+  constructor(path: string) {
+    this.#path = join(ConfigResolver.resolvedConfig!.root, path)
+    this.#cleanHotFileOnExit()
+  }
+
+  /**
+   * Write the hot file
+   */
+  async write(data: { url: string }) {
+    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
+    }
+
+    rmSync(this.#path)
+  }
+}

package/src/vite_plugin/index.ts

@@ -0,0 +1,38 @@
+/*
+ * @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 { PluginOption } from 'vite'
+import { config } from './config.js'
+import { PluginFullOptions, PluginOptions } from './types/index.js'
+import PluginRestart from 'vite-plugin-restart'
+import { join } from 'node:path'
+
+const VitePluginRestart = PluginRestart as any as typeof PluginRestart.default
+
+/**
+ * Vite plugin for AdonisJS
+ */
+export default function Adonis(options: PluginOptions): PluginOption[] {
+  const hotfileDefaultDestination = join(
+    options.publicDirectory || 'public',
+    options.buildDirectory || 'assets',
+    'hot.json'
+  )
+
+  const fullOptions = defu<PluginFullOptions, [Partial<PluginOptions>]>(options, {
+    publicDirectory: 'public',
+    buildDirectory: 'assets',
+    assetsUrl: '',
+    hotFile: hotfileDefaultDestination,
+    reload: ['./resources/views/**/*.edge'],
+  })
+
+  return [VitePluginRestart({ reload: fullOptions.reload }), config(fullOptions)]
+}

package/src/vite_plugin/types/index.ts

@@ -0,0 +1,56 @@
+/*
+ * @adonisjs/vite
+ *
+ * (c) AdonisJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+/**
+ * Possible plugin options
+ */
+export type PluginOptions = {
+  /**
+   * Path to the hot file
+   *
+   * @default public/hot.json
+   */
+  hotFile?: string
+
+  /**
+   * 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.
+   *
+   * @default ''
+   */
+  assetsUrl?: string
+
+  /**
+   * Public subdirectory where the assets will be compiled.
+   *
+   * @default 'assets'
+   */
+  buildDirectory?: string
+
+  /**
+   * Files that should trigger a page reload when changed.
+   *
+   * @default ['./resources/views/** /*.edge']
+   */
+  reload?: string[]
+}
+
+export type PluginFullOptions = Required<PluginOptions>