OrganizeGovern your website's JavaScript
This package is a bare-bones implementation of the awesome Conditioner library. It solves the same problem but with less features and less complexity.
If you're building a plain-old website, this is for you. If you're building a client-side app and using a framework, you can happily move on.
It's less than 1 Kb minified and gzipped.
With npm do:
npm i regierung
If you're using Yarn, you know what to do.
Regierung is glue for 3 things: your HTML, your JavaScript code and your bundler.
JavaScript should be organized in modules. Modules are functions that take a DOM element, and can optionally return another function for cleaning up.
You have a module:
function ToUppercase (element) {
let oldValue = element.textContent
element.textContent = oldValue.toUpperCase()
return () => {
element.textContent = oldValue
}
}
In your HTML:
<p data-module="ToUppercase">
Alles wird besser, aber nichts wird gut.
</p>
Then when your website loads, you can do:
import { run } from 'regierung'
run()
And you get:
ALLES WIRD BESSER, ABER NICHTS WIRD GUT.
Without any configuration, Regierung expects all modules to be globally available, that is attached to window
. But you're probably doing better…
Regierung truly shines when used together with a modern module bundler like Webpack, Parcel or Rollup.
This way you can have your modules organized in files, and they will be loaded only when needed.
You need to tell Regierung how to find your modules, using dynamic import
:
import { run } from 'regierung'
run({
getModule: name => import(`./modules/${name}.js`).then(x => x.default)
})
The module from earlier:
// ./modules/upper.js
export default function (element) {
let oldValue = element.textContent
element.textContent = oldValue.toUpperCase()
return () => {
element.textContent = oldValue
}
}
The HTML:
<p data-module="upper">
Alles wird besser, aber nichts wird gut.
</p>
Notice you give it the name of the file in the data-module
attribute (upper
), and you specify the path to it in the getModule
callback (./modules/${name}.js
).
You can have your modules run based on a media query, via the data-module-media
attribute:
<p data-module="upper" data-module-media="(min-width: 60em)">
Alles wird besser, aber nichts wird gut.
</p>
This uses the matchMedia
API, so it will react to the browser window resizing.
PRs accepted.
Apache 2.0