# @epiijs/html5

> A web app shell definition.

Latest version **1.0.0** (published 2021-02-20) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @epiijs/html5
pnpm add @epiijs/html5
yarn add @epiijs/html5
bun add @epiijs/html5
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-02-20 |
| First published | 2019-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 1 |
| Unpacked size | 19.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | sartrey |
| Keywords | epii, html5 |

## Links

- npm: https://www.npmjs.com/package/@epiijs/html5
- Repository: https://github.com/epiijs/epii-html5
- Homepage: https://github.com/epiijs/epii-html5#readme
- Issues: https://github.com/epiijs/epii-html5/issues
- npm.io page: https://npm.io/package/@epiijs/html5

## Dependencies (1)

- [mime](https://npm.io/package/mime.md) ^2.5.2

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-02-20
- 0.5.5 — 2021-01-18
- 0.5.3 — 2020-09-20
- 0.5.2 — 2020-05-03
- 0.5.1 — 2020-04-01
- 0.5.0 — 2020-04-01
- 0.4.0 — 2019-05-22

## README

# epii-html5

[![Build Status](https://travis-ci.org/epiijs/epii-html5.svg?branch=master)](https://travis-ci.org/epiijs/epii-html5)
[![Coverage Status](https://coveralls.io/repos/github/epiijs/epii-html5/badge.svg?branch=master)](https://coveralls.io/github/epiijs/epii-html5?branch=master)

A modern web app uses scripts to carry user interfaces instead of static HTML, however, scripts still should be run in app shell such as `index.html`. App shell contains a bit of DOM container and references of scripts and styles. `epii-html5` is a web app shell definition.

## Features

A web app shell can be defined by a simple `ViewMeta` JSON-like model.
Also JS can be written in definition and will be run in server.
A `ViewMeta` object can inherit from a base `ViewMeta` object.

### example for ViewMeta

```js
{
  // template name
  name: 'modern',

  // inherited template name
  base: 'simple',

  // html: 'index.html',
  // custom everything manually
  // head & body will be ignored

  // head part of app shell
  head: {
    // document metas
    metas: [
      // name
      { name: 'creator', content: 'epii' },
      // http-equiv
      { http: 'expires', content: '1 Jan 2017' },
    ],

    // document title
    title: 'my web app',

    // document icon
    icon: 'logo.jpeg',

    // document styles, String | String[]
    styles: [
      // simple URI
      'style-01.css',

      // inline content from local file
      { src: 'style-02.css', inline: true },

      // inline content directly
      { raw: 'p { color: red; }' }
    ],

    // document scripts, String | String[]
    scripts: [
      // simple URI
      'script-01.js',

      // inline content from local file
      { src: 'script-02.js', inline: true },

      // inline content directly
      { raw: 'alert(1);' }
    ]
  },

  // body part of app shell
  body: {
    // app DOM container
    // simple URI or HTML content
    holder: { raw: '<div id="app"></div>' },

    // document scripts, String | String[]
    scripts: [],

    // web app launch script
    // e.g. ReactDOM.render
    launch: 'launch.js'
  }
};
```

## Usage

### install as dependency
```sh
npm install --save @epiijs/html5@latest
```

### use API to output HTML5
```js
const HTML5 = require('@epiijs/html5');

// get default local file loader
const loader = new HTML5.FileLoader();

// create view meta
const view = new HTML5.ViewMeta();


// mount state & inline resource
// window.epii = { state: { hello: 'world' } };
await view.mount([loader], { hello: 'world' });

// render view to HTML5
const html = HTML5.renderToString(meta);
```

### use API to output HTML with layout
```js
const HTML5 = require('@epiijs/html5');

// create meta pack
const viewPack = new HTML5.ViewPack('/');

// load layout meta
const layout = viewPack.loadViewMeta({
  name: 'simple',
  head: {
    title: 'simple',
    styles: ['reset.css', 'theme.css'],
    icon: 'logo.ico'
  },
  body: {
    launch: { src: 'launch.js', inline: true }
  }
});

// load view meta, auto inherit layout
const meta = viewPack.loadViewMeta({
  base: 'simple',
  head: {
    styles: 'index.css'
  },
  body: {
    scripts: 'index.js'
  }
});

// render view to HTML5
const html = HTML5.renderToString(meta);
```

### custom loader
```js
class CustomLoader extends HTML5.Loader {
  constructor(options) {
    super(options);
    // parse your own loader query
  }

  match(asset) {
    // filter assets
    return true;
  }

  async mount(asset) {
    // mount asset as you wish
    if (asset.mounted) return;
    return fetch(asset.src)
      .then(response => response.text())
      .then((text) => {
        asset.raw = text;
        asset.mounted = true;
      });
  }
}

// use loader for view pack
viewPack.useLoader(CustomLoader, { ...options });

// mount meta with view pack loaders
viewMeta.mount(viewPack.loaders, {});
```

## Benchmark

The following table shows elapsed time for rendering app shell to string 1e5 times.

(2021/02/20, MacBook Pro 2019)

|name|time|
|-|-|
|epii-html5 @ 1.0.0|96ms|
|handlebars @ 4.7.7|1600ms|
|react @ 17.0.1|4474ms|

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