npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@jalno/vite-plugin

v1.0.4

Published

Jalno plugin for Vite.

Downloads

123

Readme

@jalno/vite-plugin npm

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