Before we can use Flux, we need to load it into the browser as an ES module.

¶Install from npm

Add the package to the project:

npm install github:phpgt/Flux

If we want a specific release, we can pin the tag:

npm install "github:phpgt/Flux#v1.2.3"

¶Import Flux in JavaScript

In most projects, we will import Flux from the main browser entry point:

import "@phpgt/flux";

The package exports src/main.es6, which creates a new Flux() instance immediately. As soon as the script runs, Flux scans the page for any elements with data-flux.

¶Import Flux directly in HTML

If we are not bundling JavaScript, we can serve the built file directly from node_modules/@phpgt/flux/dist/flux.js:

<script type="module" src="/flux.js" defer></script>

¶Turn on debug mode when developing Flux itself

There is no runtime configuration object for normal usage, but there is a debug export that enables internal logging:

// Add this FluxDebug line above your usual import to enable debug mode.
import { FluxDebug } from "@phpgt/flux";
import "@phpgt/flux";

With that import in place, Flux logs extra detail to the console while it initialises and reattaches behaviour.

[!INFO] Flux inserts a <style id="flux-style"> tag when it starts, for minimal hiding/showing of controlled elements. In the browser tests, that is used as the signal that initialisation has completed.

---

Now that the script is loaded, let’s build your first Flux form.