# 11ty-fast-dev

> 11ty-fast-dev

Latest version **0.1.1** (published 2020-12-11) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install 11ty-fast-dev
pnpm add 11ty-fast-dev
yarn add 11ty-fast-dev
bun add 11ty-fast-dev
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2020-12-11 |
| First published | 2020-12-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Sam Thorogood |
| Maintainers | samthor |

## Links

- npm: https://www.npmjs.com/package/11ty-fast-dev
- Repository: https://github.com/samthor/11ty-fast-dev
- Homepage: https://github.com/samthor/11ty-fast-dev#readme
- Issues: https://github.com/samthor/11ty-fast-dev/issues
- npm.io page: https://npm.io/package/11ty-fast-dev

## Dependencies (1)

- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.1

## Recent versions

- 0.1.1 (latest) — 2020-12-11
- 0.1.0 — 2020-12-11

## README

This makes 11ty more efficient when used behind a dev server, making it only compiles your pages when you actually want to see them.

This relies on you running your own dev server.
(This could be built into `eleventy --serve`, I don't know.)

⚠️ This is a crazy idea and perhaps not intended for production use just yet.
You're welcome!

## Usage

Your .eleventy.js should be updated like this:

**TODO(samthor): This should be flagged or only run in `--watch` mode.**

```js
const eleventyFastDev = require('11ty-fast-dev/patch');

module.exports = eleventyConfig => {
  // We can't set up 11ty-fast-dev here, but instead need to do it later in
  // 11ty's lifecycle. Its calculation of collections is a great place, as this
  // is before any files are written.
  // TODO(samthor): We only want to do this when flagged or in watch mode and
  // so on.
  const config = eleventyFastDev.buildConfig(eleventyConfig);
  eleventyConfig.addCollection('_11ty-fast-dev', config);

  // ... the rest of your config
};
```

Add this handler to your web server (this uses Express):

```js
const {buildEleventyFastDevHandler} = require('11ty-fast-dev/handler');

const staticPaths = ['dist'];  // 11ty writes here by default
const eleventyFastDevHandler = buildEleventyFastDevHandler(staticPaths);

// Insert this _before_ your static handlers, so old dist files don't "win".
app.use(eleventyFastDevHandler);
```

Profit!

## Implementation

The eleventy side does two things:

* monkeypatches `TemplateWriter._writeTemplate` so that instead of writing a template, we store this ability into a closure
* opens a web server on "localhost:9999", and when the right page is requested, renders the file

On the server side, it's a pretty basic handler which then goes out and asks "localhost:9999" for the right page.

## Downsides

This will, as stated, only execute your templates and run transforms when you request a file.
If you have side effects in these places, then this won't work for you.
(This is generally considered a bad idea _anyway_).

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