# regierung

> Govern your website's JavaScript

Latest version **2.0.0** (published 2020-01-23) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install regierung
pnpm add regierung
yarn add regierung
bun add regierung
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-01-23 |
| First published | 2019-10-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Arturo Castillo Delgado |
| Maintainers | acstll |
| Keywords | modules, front-end, webpack, parcel |

## Links

- npm: https://www.npmjs.com/package/regierung
- Repository: https://github.com/acstll/regierung
- Homepage: https://github.com/acstll/regierung#readme
- Issues: https://github.com/acstll/regierung/issues
- npm.io page: https://npm.io/package/regierung

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2020-01-23
- 1.0.0 — 2019-10-17

## README

# Regierung

![npm](https://img.shields.io/npm/v/regierung)

> ~~Organize~~ Govern your website's JavaScript

This package is a bare-bones implementation of the awesome [Conditioner](https://github.com/rikschennink/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.

## Install

With [npm](https://github.com/npm/cli) do:

```bash
npm i regierung
```

If you're using [Yarn](https://yarnpkg.com/lang/en/), you know what to do.

## Usage

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:

```js
function ToUppercase (element) {
  let oldValue = element.textContent

  element.textContent = oldValue.toUpperCase()

  return () => {
    element.textContent = oldValue
  }
}
```

In your HTML:

```html
<p data-module="ToUppercase">
  Alles wird besser, aber nichts wird gut.
</p>
```

Then when your website loads, you can do:

```js
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…

### Code splitting

Regierung truly shines when used together with a modern module bundler like [Webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/) or [Rollup](https://rollupjs.org/guide/en/).

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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import):

```js
import { run } from 'regierung'

run({
  getModule: name => import(`./modules/${name}.js`).then(x => x.default)
})
```

The module from earlier:

```js
// ./modules/upper.js
export default function (element) {
  let oldValue = element.textContent

  element.textContent = oldValue.toUpperCase()

  return () => {
    element.textContent = oldValue
  }
}
```

The HTML:

```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`).

### Media queries

You can have your modules run based on a media query, via the `data-module-media` attribute:

```html
<p data-module="upper" data-module-media="(min-width: 60em)">
  Alles wird besser, aber nichts wird gut.
</p>
```

This uses the [`matchMedia` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia), so it will react to the browser window resizing.

## Contributing

PRs accepted.

## License

Apache 2.0

---
_Source: https://npm.io/package/regierung · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._