@jalno/vite-plugin

@jalno/vite-plugin

If you have used Jalno before, you propebly used other packages of Jalno Organization.
Each Jalno Package may has one or more Frontend and each frontend may has some assets.
If you are familiar with Jalno, probably you are familiar with node_webpack, a Jalno package that use webpack under the hode to find all assets and bundle them into a file.

In new version of Jalno, we migrate from legacy directory hierarchy into new style, usign composer.
This package do the same as node_webpack, but more faster and efficient, thanks to lovely Vite

This plugin supports finding Jalno frontends, themes, and translator phrases
Also, this plugin provides support for Jquery and generally, legecy code style that may be used in Jalno projects.

By default, this plugin will:

• Automatically find Jalno packages in vendor directory and install each package's frontends using npm (Enabled by default).

• Generate a corresponding chunk for every theme (styles and scripts).

• Generate a corresponding chunk for each language to use with @jalno/translator package.

• Support Jalno legacy projects (Disabled by default).

• Inject some necessary injection using @rollup/plugin-inject (Disabled by default).

• Configures all options that need by Laravel framework to work. (manifest, publicDirectory, buildDirectory, base, ...) without need to use laravel-vite-plugin.
  But you can use laravel-vite-plugin alongside @jalno/vite-plugin

Installation

npm install -D @jalno/vite-plugin

Basic Usage

// vite.config.js
import jalno, { Project as JalnoProject } from '@jalno/vite-plugin';

// Set the root of project into plugin.
// Otherwise, plugin will warn about that, but still working using `process.cwd()`
JalnoProject.setRoot(import.meta.dirname);

export default {
  plugins: [
    jalno(),
  ],
}

In the basic usage, the auto install behaviour is enabled. But, the legecy support and auto rollup inject is disabled.

Migrate from node_webpack to vite

// vite.config.js
import jalno, { Project as JalnoProject } from '@jalno/vite-plugin';

// Set the root of project into plugin.
// Otherwise, plugin will warn about that, but still working using `process.cwd()`
JalnoProject.setRoot(import.meta.dirname);

export default {
  plugins: [
    jalno({
        legacyPreset: true,
        rollupInject: true,
    }),
  ],
}

Using alongside laravel-vite-plugin

The laravel-vite-plugin should be placed before @jalno/vite-plugin in plugins array.
Becase laravel-vite-plugin will ignore the passed inputs if the inputs are not empty, but @jalno/vite-plugin does not!

// vite.config.js
import laravel from 'laravel-vite-plugin';
import jalno, { Project as JalnoProject } from '@jalno/vite-plugin';

// Set the root of project into plugin.
// Otherwise, plugin will warn about that, but still working using `process.cwd()`
JalnoProject.setRoot(import.meta.dirname);

export default {
  plugins: [
    laravel({
        input: [
            'resources/js/main.js'
        ],
        refresh: true,
    }),
    jalno({
        legacyPreset: true,
        rollupInject: true,
    }),
  ],
}

Auto Install Configuration

You can configure auto install using this sample code.
This options is enabled by default.
You don't need to change anything, in case of you know what are you doing.
For more information about options, see: JalnoAutoInstallPlugin

// vite.config.js
import jalno, { Project as JalnoProject } from '@jalno/vite-plugin';

// Set the root of project into plugin.
// Otherwise, plugin will warn about that, but still working using `process.cwd()`
JalnoProject.setRoot(import.meta.dirname);

export default {
  plugins: [
    jalno({
        // disable auto install using:
        autoInstall: false,

        // or

        // configure behaviour of auto install:
        autoInstall: {
            /**
             * The path to binary of the `npm`
             * @default `npm`
             */
            npmBinary: 'npm',

            /**
             * Log level of npm.
             * Use can turn off npm warns by setting log level.
             * Values: "silent" | "error" | "warn" | "notice" | "http" | "info" | "verbose" | "silly"
             * @default `notice`
             */
            npmLogLevel: 'notice',

            /**
             * The default install command.
             * @default `install`
             */
            installCommand: 'install',

            /**
             * Additional packages to install along with jalno packages.
             * @default `[]`
             */
            additionalPackages: [],
        }
    }),
  ],
}

Legacy Preset

You can configure legecy preset using this sample code.
This options is disabled by default.
Probably you need to enable this option if you want to migrate from node_webpack to vite.
For more information about options, see: JalnoLegacyPresetPlugin

// vite.config.js
import jalno, { Project as JalnoProject } from '@jalno/vite-plugin';

// Set the root of project into plugin.
// Otherwise, plugin will warn about that, but still working using `process.cwd()`
JalnoProject.setRoot(import.meta.dirname);

export default {
  plugins: [
    jalno({
        // turn off legacy preset, (default is turned off)
        legacyPreset: false,

        // or

        // turn on it using:
        legacyPreset: true,

        // or

        // turn on with configuring options:
        /*
        * @see https://github.com/jalno/vite-plugin/blob/master/src/JalnoLegacyPresetPlugin.ts#L5
        */
        legacyPreset: {
            // configureDefaultAliases by default `true`.
            configureDefaultAliases: true,
        },
    }),
  ],
}

Rollup Inject

If you enabled Legacy Preset in previous step, you probably need to enable this option too! This options is disabled by default.
If you enable this options, the plugin using @rollup/plugin-inject under the hood.
The default configuration of the plugins is in: index.ts -> getDefaultRollupInjectOptions

You can configure rollup inject using this sample code.
Probably you need to enable this option if you want to migrate from node_webpack to vite.
For more information about options, see: Rollup Inject

// vite.config.js
import jalno, { Project as JalnoProject } from '@jalno/vite-plugin';

// Set the root of project into plugin.
// Otherwise, plugin will warn about that, but still working using `process.cwd()`
JalnoProject.setRoot(import.meta.dirname);

export default {
  plugins: [
    jalno({
        // disable rollup inject (default is disabled)
        rollupInject: false,

        // or

        // enable with default configuration:
        rollupInject: true,

        // enable with passing your extra options to `@rollup/plugin-inject`
        rollupInject: {
            // enable source map, disabled by default.
            sourceMap: true,

            // Add another modules to `@rollup/plugin-inject`.
            modules: {
                // $: 'jquery',
            },
        },
    }),
  ],
}

You need to install the @rollup/plugin-inject plugin in your root project to use this option.
To install this plugin, run:

npm add -D @rollup/plugin-inject

References

• Plugin API
• Jalno Framework
• Jalno Organization