| < F) Features | G) Plugins | > H) Going further |
Plugins extend jsenv’s core features, providing custom capabilities to suit specific needs. By default, jsenv operates with a standard configuration, but plugins allow you to adapt it for frameworks like React or add non-standard functionality.
Adding a plugin is straightforward: import it and include it in the plugins array when calling jsenv’s core functions.
Example
import { startDevServer } from "@jsenv/core";
import { jsenvPluginReact } from "@jsenv/plugin-react";
await startDevServer({
plugins: [
jsenvPluginReact(),
// Add other plugins here
],
});In this example, we import jsenv’s core alongside the React plugin, then add it to the plugins array.
Ecosystem plugins enhance jsenv's fundamental capabilities. These plugins provides support for specific features or frameworks.
Adds compatibility with React JSX, allowing seamless integration of React components in your project.
Installation
npm i --save-dev @jsenv/plugin-reactUsage
import { startDevServer } from "@jsenv/core";
import { jsenvPluginReact } from "@jsenv/plugin-react";
await startDevServer({
plugins: [jsenvPluginReact()],
});import { build } from "@jsenv/core";
import { jsenvPluginReact } from "@jsenv/plugin-react";
await build({
plugins: [jsenvPluginReact()],
});The CommonJs plugin enables compatibility with CommonJS modules, ensuring your project can work with libraries or code not yet using ES modules.
Example
- require("./file.js");
- module.exports.answer = 42;
- console.log(process.env.NODE_ENV);
+ import "./file.js";
+ export const answer = 42;
+ console.log("development"); // would be "production" after buildInstallation:
npm i --save-dev @jsenv/plugin-commonjsUsage
import { startDevServer } from "@jsenv/core";
import { jsenvPluginCommonJs } from "@jsenv/plugin-commonjs";
await startDevServer({
plugins: [
jsenvPluginCommonJs({
include: {
"./main.js": true,
},
}),
],
});Usually it's a package (a node module) that is written in commonjs format.
In that case configure include like this:
jsenvPluginCommonJs({
include: {
"file:///**/node_modules/react/": true,
},
});The asJsClassic plugin allows to load files written as ES modules using a classic script tag. YES YOU CAN!
Example
The following HTML file uses a script to load a js file:
<!doctype html>
<html>
<body>
<script src="./main.js?as_js_classic"></script>
</body>
</html>This plugin applies on js files loaded with ?as_js_classic query parameter. It could transforms theorical main.js file content as follow:
- import { foo } from "./foo.js";
- console.log(import.meta.url);
- console.log(foo);
+ const foo = 42;
+ console.log(document.currentScript.src);
+ console.log(foo);Installation
npm i --save-dev @jsenv/plugin-as-js-classicUsage
import { startDevServer } from "@jsenv/core";
import { jsenvPluginAsJsClassic } from "@jsenv/plugin-as-js-classic";
await startDevServer({
plugins: [jsenvPluginAsJsClassic()],
});import { build } from "@jsenv/core";
import { jsenvPluginAsJsClassic } from "@jsenv/plugin-as-js-classic";
await build({
plugins: [jsenvPluginAsJsClassic()],
});The Preact plugin facilitates easy integration with Preact projects, offering a lightweight alternative to React.
Installation
npm i --save-dev @jsenv/plugin-preactUsage
import { startDevServer } from "@jsenv/core";
import { jsenvPluginPreact } from "@jsenv/plugin-preact";
await startDevServer({
plugins: [jsenvPluginPreact()],
});import { build } from "@jsenv/core";
import { jsenvPluginPreact } from "@jsenv/plugin-preact";
await build({
plugins: [jsenvPluginPreact()],
});Development plugins provide tools and features to improve your development experience.
The Explorer plugin provides a user interface for browsing your project’s files during development.
Example
Installation
npm i --save-dev @jsenv/plugin-explorerUsage
import { startDevServer } from "@jsenv/core";
import { jsenvPluginExplorer } from "@jsenv/plugin-explorer";
await startDevServer({
plugins: [jsenvPluginExplorer()],
});Your main HTML file can be opened by visiting the exact url, like http://localhost:3456/index.html:
It's possible to keep http://localhost:3456 equivalent to http://localhost:3456/index.html by configuring a pathname where explorer should be served:
jsenvPluginExplorer({
pathname: "/explore",
});And it's possible to configure the group of files as follow:
jsenvPluginExplorer({
pathname: "/explore",
groups: {
"main files": {
"./**/*.html": true,
"./**/*.test.html": false,
},
"spec files": {
"./**/*.test.html": true,
},
},
});The page now displays "main files" and "spec files":
The Toolbar plugin adds an interactive toolbar to your application during development. Allow to temporarily disable autoreload on change for example.
Installation
npm i --save-dev @jsenv/plugin-toolbarUsage
import { startDevServer } from "@jsenv/core";
import { jsenvPluginToolbar } from "@jsenv/plugin-toolbar";
await startDevServer({
plugins: [jsenvPluginToolbar()],
});By default the toolbar is hidden, there is a discrete way to open it at the bottom right of the page.
When hovering this area, a small strip is displayed
It can be clicked to open the toolbar
The toolbar is composed as follows:
| Component | Description |
|---|---|
| Index button | Link to the explorer/index page |
| Execution indicator | Displays state of this HTML page execution |
| Server indicator | Displays state of connection with jsenv dev server |
| Settings button | Button to open toolbar settings |
| Close button | Button to close the toolbar |
Plugins are the key to unlocking jsenv’s full potential. Whether you need compatibility with a specific framework or advanced project-level capabilities, plugins ensure jsenv adapts seamlessly to your needs. Explore the available plugins and experiment with their configurations to customize your workflow.
| < F) Features | G) Plugins | > H) Going further |