# inline-source

> Inline all flagged js, css, image source files

Latest version **8.0.3** (published 2023-11-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install inline-source
pnpm add inline-source
yarn add inline-source
bun add inline-source
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 8.0.3 |
| Published | 2023-11-17 |
| First published | 2013-04-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.0.0 |
| Dependencies | 5 |
| Unpacked size | 45.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 200 |
| Author | Alexander Pope |
| Maintainers | popeindustries |
| Keywords | inline, html, js, css, svg |

## Links

- npm: https://www.npmjs.com/package/inline-source
- Repository: https://github.com/popeindustries/inline-source
- Homepage: https://github.com/popeindustries/inline-source#readme
- Issues: https://github.com/popeindustries/inline-source/issues
- npm.io page: https://npm.io/package/inline-source

## Dependencies (5)

- [csso](https://npm.io/package/csso.md) ^5.0.5
- [svgo](https://npm.io/package/svgo.md) ^3.0.0
- [terser](https://npm.io/package/terser.md) ^5.24.0
- [node-fetch](https://npm.io/package/node-fetch.md) ^3.3.2
- [htmlparser2](https://npm.io/package/htmlparser2.md) ^9.0.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 8.0.3 (latest) — 2023-11-17
- 8.0.2 — 2022-09-26
- 8.0.1 — 2022-09-22
- 8.0.0 — 2022-09-15
- 7.2.0 — 2020-02-27
- 7.1.0 — 2019-08-12
- 7.0.0 — 2019-08-01
- 6.2.0 — 2019-06-11
- 6.1.10 — 2019-05-08
- 6.1.9 — 2019-01-23
- 6.1.8 — 2018-08-21
- 6.1.7 — 2018-08-17
- 6.1.6 — 2018-08-08
- 6.1.5 — 2018-05-15
- 6.1.4 — 2018-03-27
- … 53 more at https://npm.io/package/inline-source/versions

## README

[![NPM Version](https://img.shields.io/npm/v/inline-source.svg?style=flat)](https://npmjs.org/package/inline-source)
[![Build Status](https://img.shields.io/github/workflow/status/popeindustries/inline-source/test/master)](https://github.com/popeindustries/inline-source/actions)
[![Downloads](https://img.shields.io/npm/dm/inline-source.svg?style=flat)](https://npmjs.org/package/inline-source)

# inline-source

Inline and compress tags that contain the `inline` attribute. Supports `<script>`, `<link>`, and `<img>` (including `*.svg` sources) tags by default, and is easily extensible to handle others.

> You can use [inline-source-cli](https://github.com/developit/inline-source-cli) to run `inline-source` from the command line or NPM Scripts.

## Usage

**`inlineSource(htmlpath: string, [options: Options]): Promise<string>`**: parse `htmlpath` content for tags containing an `inline` attribute, and replace with (optionally compressed) file contents.

`htmlpath` can be either a filepath _or_ a string of html content.

Available `options` include:

- `attribute`: attribute used to parse sources (all tags will be parsed if set to `false`. Default `'inline'`)
- `compress`: enable/disable compression of inlined content (default `true`)
- `fs`: specify `fs` implementation (default is Node core `'fs'`)
- `handlers`: specify custom handlers (default `[]`) [see [custom handlers](#custom-handlers)]
- `preHandlers`: specify custom pre handlers (default `[]`) [see [custom pre handlers](#custom-pre-handlers)]
- `ignore`: disable inlining based on `tag`, `type`, and/or `format` (default `[]`)
- `pretty`: maintain leading whitespace when `options.compress` is `false` (default `false`)
- `rootpath`: directory path used for resolving inlineable paths (default `process.cwd()`)
- `saveRemote`: enable/disable saving a local copy of remote sources (default `true`)
- `svgAsImage`: convert `<img inline src="*.svg" />` to `<img>` and not `<svg>` (default `false`)
- `swallowErrors`: enable/disable suppression of errors (default `false`)

```bash
$ npm install inline-source
```

```html
<!-- located at project/src/html/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <!-- inline project/www/css/inlineStyle.css as <style> -->
    <link inline href="css/inlineStyle.css" />
    <!-- inline project/src/js/inlineScript.js as <script> -->
    <script inline src="../src/js/inlineScript.js"></script>
    <!-- inline remote file as <script> -->
    <script inline src="http://js/inlineScript.js"></script>
    <!-- inline project/www/images/inlineImage.png as base64 <img> -->
    <img inline src="images/inlineImage.png" />
    <!-- inline project/www/images/inlineImage.svg as <svg> -->
    <img inline src="images/inlineImage.svg" />
  </head>
</html>
```

```javascript
import { inlineSource } from 'inline-source';
import fs from 'node:fs';
import path from 'node:path';

const htmlpath = path.resolve('project/src/html/index.html');

inlineSource(htmlpath, {
  compress: true,
  rootpath: path.resolve('www'),
  // Skip all css types and png formats
  ignore: ['css', 'png'],
})
  .then((html) => {
    // Do something with html
  })
  .catch((err) => {
    // Handle error
  });
```

...or preferably using `async/await`:

```javascript
import { inlineSource } from 'inline-source';
import fs from 'node:fs';
import path from 'node:path';

const htmlpath = path.resolve('project/src/html/index.html');

try {
  const html = await inlineSource(htmlpath, {
    compress: true,
    rootpath: path.resolve('www'),
    // Skip all css types and png formats
    ignore: ['css', 'png'],
  });
  // Do something with html
} catch (err) {
  // Handle error
}
```

### Custom Handlers

Custom handlers are simple middleware-type functions that enable you to provide new, or override existing, inlining behaviour. All handlers have the following signature: `(source: Source, context: Context) => Promise<void> | void`

- `source`: the current source object to act upon

  - `attributes`: the parsed tag attributes object
  - `compress`: the compress flag (may be overriden at the tag level via [props](#props))
  - `content`: the processed `fileContent` string
  - `extension`: the file extension
  - `fileContent`: the loaded file content string
  - `filepath`: the fully qualified path string
  - `format`: the format string (`jpg`, `gif`, `svg+xml`, etc)
  - `match`: the matched html tag string, including closing tag if appropriate
  - `props`: the parsed namespaced attributes object (see [props](#props))
  - `replace`: the tag wrapped `content` string to replace `match`
  - `tag`: the tag string (`script`, `link`, etc)
  - `type`: the content type based on `type` mime-type attribute, or `tag` (`js` for `application/javascript`, `css` for `text/css`, etc)

- `context`: the global context object storing all configuration options (`attribute`, `compress`, `ignore`, `pretty`, `rootpath`, `swallowErrors`, `svgAsImage`), in addtion to:

  - `html`: the html file's content string
  - `htmlpath`: the html file's path string
  - `sources`: the array of `source` objects

Custom handlers are inserted before the defaults, enabling overriding of default behaviour:

```js
export function handler(source, context) {
  if (source.fileContent && !source.content && source.type == 'js') {
    source.content = "Hey! I'm overriding the file's content!";
  }
}
```

In general, default file content processing will be skipped if `source.content` is already set, and default wrapping of processed content will be skipped if `source.replace` is already set.

### Custom Pre Handlers

Custom pre handlers are the same as custom handlers only they run before loading the file. All handlers have the following signature: `(source: Source, context: Context) => Promise<void> | void`

With custom Pre handlers you can make changes to the file name

```js
export function prehandler(source, context) {
  const { version } = getVersionFromSomewhere();
  source.filepath = source.filepath.replace('.js', `_${version}.js`);
}
```

### Props

Source `props` are a subset of `attributes` that are namespaced with the current global `attribute` ('inline' by default), and allow declaratively passing data or settings to handlers:

```html
<script
  inline
  inline-foo="foo"
  inline-compress="false"
  src="../src/js/inlineScript.js"
></script>
```

```js
export function handler(source, context) {
  if (source.fileContent && !source.content && source.type == 'js') {
    // The `inline-compress` attribute automatically overrides the global flag
    if (!source.compress) {
      // do something
    }
    if (source.props.foo == 'foo') {
      // foo content
    }
  }
}
```

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