{"id":21540954,"url":"https://github.com/reshape/include","last_synced_at":"2025-07-30T21:05:37.985Z","repository":{"id":57354532,"uuid":"65311155","full_name":"reshape/include","owner":"reshape","description":"plugin that adds the ability to include html from other files","archived":false,"fork":false,"pushed_at":"2019-02-05T12:40:56.000Z","size":458,"stargazers_count":13,"open_issues_count":10,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T05:26:47.943Z","etag":null,"topics":["html","import","include","plugin","reshape"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reshape.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-09T16:35:01.000Z","updated_at":"2018-03-27T07:13:13.000Z","dependencies_parsed_at":"2022-09-12T04:01:19.424Z","dependency_job_id":null,"html_url":"https://github.com/reshape/include","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reshape%2Finclude","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reshape%2Finclude/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reshape%2Finclude/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reshape%2Finclude/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reshape","download_url":"https://codeload.github.com/reshape/include/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744333,"owners_count":20988783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","import","include","plugin","reshape"],"created_at":"2024-11-24T05:00:37.661Z","updated_at":"2025-04-10T04:11:08.395Z","avatar_url":"https://github.com/reshape.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reshape Include\n\n[![npm](https://img.shields.io/npm/v/reshape-include.svg?style=flat-square)](https://npmjs.com/package/reshape-include)\n[![tests](https://img.shields.io/travis/reshape/include.svg?style=flat-square)](https://travis-ci.org/reshape/include?branch=master)\n[![dependencies](https://img.shields.io/david/reshape/include.svg?style=flat-square)](https://david-dm.org/reshape/include)\n[![coverage](https://img.shields.io/coveralls/reshape/include.svg?style=flat-square)](https://coveralls.io/r/reshape/include?branch=master)\n\nInclude other HTML files (\"partials\") into your HTML.\n\n### Install\n\n```sh\nnpm i reshape-include --save\n```\n\n### Usage\n\nGiven the following input files:\n\n```html\n\u003c!-- index.html --\u003e\n\u003cp\u003eHere's my partial:\u003c/p\u003e\n\u003cinclude src='_partial.html'\u003e\u003c/include\u003e\n\u003cp\u003eafter the partial\u003c/p\u003e\n```\n\n```html\n\u003c!-- _partial.html --\u003e\n\u003cstrong\u003ehello from the partial!\u003c/strong\u003e\n```\n\nProcess them with reshape:\n\n```js\nconst {readFileSync} = require('fs')\nconst reshape = require('reshape')\nconst include = require('reshape-include')\n\nconst html = readFileSync('index.html')\n\nreshape({ plugins: include() })\n  .process(html)\n  .then((result) =\u003e console.log(result.output()))\n```\n\nOutput:\n\n```html\n\u003cp\u003eHere's my partial:\u003c/p\u003e\n\u003cstrong\u003ehello from the partial!\u003c/strong\u003e\n\u003cp\u003eafter the partial\u003c/p\u003e\n```\n\n### Utilizing Different Parsers\n\nSometimes, you might want to import a `html` file into a `sgr` file. Or maybe a `svg`. In these cases and any other where you are seeking to mix two files that are processed by different parsers, you can utilize the  `parserRules` config value. Example shown below:\n\n```js\nconst htmlParser = require('reshape-parser')\nconst sugarml = require('sugarml')\nconst include = require('reshape-include')\n\nreshape({\n  plugins: [\n    include({\n      parserRules: [\n        { test: /\\.sgr$/, parser: sugarml }\n        { test: /\\.html$/, parser: htmlParser }\n      ]\n    })\n  ]\n})\n```\n\nNote that anything not matched by a `parserRules` test will be parsed by whatever parser is being used by reshape from its primary config. So in the example above, the `html` test is unnecessary -- since reshape's default parser is `reshape-parser`, it will already use this for any file not matching `.sgr`.\n\nNote that *any* parser can be used here in theory, but it must output a valid [Reshape AST](https://github.com/reshape/reshape#reshape-ast). Feel free to make use of the [reshape AST validator](https://github.com/reshape/plugin-util#validatetreetree) if you want in the process.\n\n### Options\n\nAll options are optional, none are required.\n\n| Name | Description | Default |\n| ---- | ----------- | ------- |\n| **root** | Root path to resolve the include from | the file's path. |\n| **alias**| Object with alias mappings, each key is your reference and the corresponding value is the relative path to your file. { button: './views/button.html } | |\n| **parserRules**| Array of objects that can include the `test` (regex) and `parser` (fn) keys. See readme for further details | |\n\n#### `root`\n\nSetting `root` to a static value can be useful for managing nested templates. If you attempt to use relative paths in the `src` for your includes it won't always work. If you set `root` to the root folder containing your templates, then you can include any file in any other file using a (partial) full path - partial meaning relative to `root`.\n\n### Reporting Dependencies\n\nThis plugin will report its dependencies in the standard format as dictated by [reshape-loader](https://github.com/reshape/loader) if you pass `dependencies: []` as an option to reshape when it runs. Dependencies will be available on the output object under the `dependencies` key. For example:\n\n```js\nconst reshape = require('reshape')\nconst include = require('reshape-include')\n\nreshape({ plugins: [include()], dependencies: []})\n  .process(someHtml)\n  .then((res) =\u003e {\n    console.log(res.dependencies)\n    console.log(res.output())\n  })\n```\n\nIf you are using this with webpack, reshape-loader takes care of the dependency reporting and you don't have to do anything 😁\n\n### License\n\n- Licensed under [MIT](LICENSE.md)\n- See our [contributing guide](contributing.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freshape%2Finclude","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freshape%2Finclude","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freshape%2Finclude/lists"}