|
1 | | -# PostHTML-include |
2 | | -[](http://badge.fury.io/js/posthtml-include) |
| 1 | +[![NPM][npm]][npm-url] |
| 2 | +[![Deps][deps]][deps-url] |
| 3 | +[![Tests][travis]][travis-url] |
| 4 | +[![Coverage][cover]][cover-url] |
3 | 5 |
|
4 | | -## Usage |
| 6 | +<div align="center"> |
| 7 | + <img width="220" height="150" title="PostHTML" src="http://posthtml.github.io/posthtml/logo.svg"> |
| 8 | + <h1>Include Plugin</h1> |
| 9 | +</div> |
| 10 | + |
| 11 | +<h2 align="center">Install</h2> |
| 12 | + |
| 13 | +```bash |
| 14 | +npm i -D posthtml-include |
| 15 | +``` |
| 16 | + |
| 17 | +<h2 align="center">Usage</h2> |
| 18 | + |
| 19 | +```js |
| 20 | +const { readFileSync } = require('fs') |
| 21 | + |
| 22 | +const posthtml = require('posthtml') |
| 23 | +const include = require('include') |
| 24 | + |
| 25 | +const html = readFileSync('index.html') |
| 26 | + |
| 27 | +posthtml([ include({ encoding: 'utf8' }) ]) |
| 28 | + .process(html) |
| 29 | + .then((result) => console.log(result.html)) |
| 30 | +``` |
| 31 | + |
| 32 | +### Options |
| 33 | + |
| 34 | +__root__: Root folder path for include. Default `./` |
| 35 | + |
| 36 | +__encoding__: Default `utf-8` |
| 37 | + |
| 38 | +__addDependencyTo__: An object with addDependency() method, taking file path as an argument. Called whenever a file is included. Default `null`. You can use it for hot-reloading in webpack(posthtml-loader) like this: |
| 39 | + |
| 40 | +```js |
| 41 | +posthtml: (webpack) => { |
| 42 | + return [ |
| 43 | + require('posthtml-include')({ addDependencyTo: webpack }) |
| 44 | + ] |
| 45 | +} |
| 46 | +``` |
| 47 | + |
| 48 | +<h2 align="center">Usage</h2> |
5 | 49 |
|
6 | 50 | __index.html__ |
| 51 | + |
7 | 52 | ```html |
8 | 53 | <html> |
9 | 54 | <head> |
10 | 55 | <title>index.html</title> |
11 | 56 | </head> |
12 | 57 | <body> |
13 | | - <include src="component/button/button.html"></include> |
| 58 | + <include src="components/button.html"></include> |
14 | 59 | </body> |
15 | 60 | </html> |
16 | 61 | ``` |
17 | 62 |
|
18 | | -__component/button/button.html__ |
| 63 | +__components/button.html__ |
19 | 64 | ```html |
20 | 65 | <button class="button"><div class="button__text">Button</div></button> |
21 | 66 | ``` |
22 | 67 |
|
23 | | -```javascript |
24 | | -var posthtml = require('posthtml'), |
25 | | - html = require('fs').readFileSync('index.html').toString(); |
| 68 | +```js |
| 69 | +const { readFileSync } = require('fs') |
26 | 70 |
|
27 | | -posthtml() |
28 | | - .use(require('posthtml-include')({ encoding: 'utf-8' })) |
| 71 | +const posthtml = require('posthtml') |
| 72 | +const include = require('include') |
| 73 | + |
| 74 | +const html = readFileSync('index.html') |
| 75 | + |
| 76 | +posthtml([ include({ encoding: 'utf8' }) ]) |
29 | 77 | .process(html) |
30 | | - .then(function(result) { |
31 | | - console.log(result.html); |
32 | | - //<html> |
33 | | - //<head> |
34 | | - // <title>index.html</title> |
35 | | - //</head> |
36 | | - //<body> |
37 | | - // <button class="button"><div class="button__text">Text</div></button> |
38 | | - //</body> |
39 | | - //</html> |
40 | | - }) |
| 78 | + .then((result) => console.log(result.html)) |
41 | 79 | ``` |
42 | 80 |
|
43 | | -## Options |
| 81 | +```html |
| 82 | +<html> |
| 83 | +<head> |
| 84 | + <title>index.html</title> |
| 85 | +</head> |
| 86 | +<body> |
| 87 | + <button class="button"> |
| 88 | + <div class="button__text">Text</div> |
| 89 | + </button> |
| 90 | +</body> |
| 91 | +</html> |
| 92 | +``` |
44 | 93 |
|
45 | | -__root__: Root folder path for include. Default `./` |
| 94 | +<h2 align="center">LICENSE</h2> |
46 | 95 |
|
47 | | -__encoding__: Default `utf-8` |
| 96 | +> MIT License (MIT) |
48 | 97 |
|
49 | | -__addDependencyTo__: An object with addDependency() method, taking file path as an argument. Called whenever a file is included. Default `null`. You can use it for hot-reloading in webpack posthtml-loader like this: |
| 98 | +> Copyright (c) PostHTML Ivan Voischev |
50 | 99 |
|
51 | | -```javascript |
52 | | -posthtml: function(webpack) { |
53 | | - return [ |
54 | | - require('posthtml-include')({ addDependencyTo: webpack }) |
55 | | - ] |
56 | | -} |
57 | | -``` |
| 100 | +> Permission is hereby granted, free of charge, to any person obtaining a copy |
| 101 | +of this software and associated documentation files (the "Software"), to deal |
| 102 | +in the Software without restriction, including without limitation the rights |
| 103 | +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 104 | +copies of the Software, and to permit persons to whom the Software is |
| 105 | +furnished to do so, subject to the following conditions: |
| 106 | + |
| 107 | +> The above copyright notice and this permission notice shall be included in all |
| 108 | +copies or substantial portions of the Software. |
| 109 | + |
| 110 | +> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 111 | +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 112 | +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 113 | +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 114 | +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 115 | +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
| 116 | +SOFTWARE. |
| 117 | + |
| 118 | +[npm]: https://img.shields.io/npm/v/posthtml-include.svg |
| 119 | +[npm-url]: https://npmjs.com/package/posthtml-include |
| 120 | + |
| 121 | +[deps]: https://david-dm.org/posthtml/posthtml-include.svg |
| 122 | +[deps-url]: https://david-dm.org/posthtml/posthtml-include |
| 123 | + |
| 124 | +[style]: https://img.shields.io/badge/code%20style-standard-yellow.svg |
| 125 | +[style-url]: http://standardjs.com/ |
| 126 | + |
| 127 | +[travis]: http://img.shields.io/travis/posthtml/posthtml-include.svg |
| 128 | +[travis-url]: https://travis-ci.org/posthtml/posthtml-include |
| 129 | + |
| 130 | +[cover]: https://coveralls.io/repos/github/posthtml/posthtml-include/badge.svg?branch=master |
| 131 | +[cover-url]: https://coveralls.io/github/posthtml/posthtml-include?branch=master |
0 commit comments