{"id":21342684,"url":"https://github.com/serg-io/infuse-loader","last_synced_at":"2026-05-07T10:37:40.987Z","repository":{"id":57273802,"uuid":"134593517","full_name":"serg-io/infuse-loader","owner":"serg-io","description":"Webpack loader for parsing and importing infuse.host templates.","archived":false,"fork":false,"pushed_at":"2019-02-15T23:54:05.000Z","size":270,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-06T22:19:47.650Z","etag":null,"topics":["custom-elements","data-binding","dom","framework","front-end","frontend","html","html-template","infuse","pwd","spa","template","template-engine","web-application","web-apps","web-components","webpack"],"latest_commit_sha":null,"homepage":"https://infuse.host/","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/serg-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-23T15:56:37.000Z","updated_at":"2019-02-15T23:54:02.000Z","dependencies_parsed_at":"2022-09-18T05:01:01.790Z","dependency_job_id":null,"html_url":"https://github.com/serg-io/infuse-loader","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/serg-io/infuse-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serg-io%2Finfuse-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serg-io%2Finfuse-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serg-io%2Finfuse-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serg-io%2Finfuse-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serg-io","download_url":"https://codeload.github.com/serg-io/infuse-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serg-io%2Finfuse-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268400709,"owners_count":24244445,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["custom-elements","data-binding","dom","framework","front-end","frontend","html","html-template","infuse","pwd","spa","template","template-engine","web-application","web-apps","web-components","webpack"],"created_at":"2024-11-22T01:09:38.601Z","updated_at":"2026-05-07T10:37:40.939Z","avatar_url":"https://github.com/serg-io.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"infuse-loader\n=============\n\nThis library can be used with [webpack](https://webpack.js.org/) to parse and import HTML templates\nto be used with [infuse.host](https://infuse.host/).\n\n## Usage ##\n\nTo be able to use infuse-loader in your webpack project you must first install it:\n\n```bash\nnpm install --save-dev infuse-loader\n```\n\nThen, you need to modify your webpack configuration file to use infuse-loader for HTML files:\n\n```javascript\nconst path = require('path');\n\nmodule.exports = {\n\tcontext: __dirname,\n\tdevServer: {\n\t\tcontentBase: [path.resolve(__dirname, 'dist')]\n\t},\n\tentry: './src/index.js',\n\tmode: 'development',\n\tmodule: {\n\t\trules: [{\n\t\t\ttest: /\\.html$/,\n\t\t\tuse: [{ loader: 'infuse-loader' }]\n\t\t}],\n\t},\n\toutput: {\n\t\tfilename: 'bundle.js',\n\t\tpath: path.resolve(__dirname, 'dist')\n\t}\n};\n```\n\n## Example ##\n\nLets say you want to define a custom element to use as a page header. You would write the HTML file\nwith template for the custom element. We'll call this file _header.html_.\n\n```html\n\u003ctemplate\u003e\n\t\u003ch1\u003e${ host.pageTitle }\u003c/p\u003e\n\u003c/template\u003e\n```\n\nThen, you simply import that template into an ES module where you define the custom element:\n\n```javascript\n// Import template and Infuse.Host.\nimport headerTemplate from './header.html';\nimport * as Infuse from 'path/to/infuse.host/src/infuse.js';\n\n// Extend `Infuse.Host` to define a class for the new custom element.\nclass CustomHeader extends Infuse.Host {\n\t// `Infuse.Host` uses `this.template` to obtain the parsed template to clone/infuse.\n\tget template() {\n\t\treturn headerTemplate;\n\t}\n\n\t// This is the property used in the template.\n\tget pageTitle() {\n\t\treturn 'Page Title';\n\t}\n}\n\n// Define the custom element using the `CustomHeader` class.\nwindow.customElements.define('custom-header', CustomHeader);\n```\n\nWhenever the `\u003ccustom-header\u003e` element is used on the page (after this module has been loaded by\nthe browser), `Infuse.Host` will clone and infuse the template and add the resulting fragment to\nthe custom element, which will result in:\n\n```html\n\u003ccustom-header\u003e\n\t\u003ch1\u003ePage Title\u003c/h1\u003e\n\u003c/custom-header\u003e\n```\n\nThe first template in an HTML file is used as the default value in the import statement. In the\nprevious example, the HTML file contained only one template, which was imported as `headerTemplate`.\n\nWhen using HTML files with multiple template elements (including nested templates), you can use the\ntemplate ID to access different templates in an import statement. By default, infuse.host uses the\n`data-tid` as the name of the template ID attribute. This attribute is added to the template element\n(if it doesn't have it already) when a template is parsed. You can add this attribute to your\ntemplates to uniquely identify them. You can use the default attribute name (`data-tid`) or you can\nuse a different attribute name by setting the `templateId` [configuration\noption](https://infuse.host/#configuration-options) in your webpack config file:\n\n```javascript\nmodule.exports = {\n\t/* Other webpack configuration options. */\n\tmodule: {\n\t\trules: [{\n\t\t\ttest: /\\.html$/,\n\t\t\tuse: [{\n\t\t\t\tloader: 'infuse-loader',\n\t\t\t\t// infuse.host configuration options\n\t\t\t\toptions: {\n\t\t\t\t\ttemplateId: 'id'\n\t\t\t\t}\n\t\t\t}]\n\t\t}]\n\t},\n\t/* Other webpack configuration options. */\n};\n```\n\nYou can then optionally add the `id` attribute to your templates. For instance:\n\n```html\n\u003ctemplate\u003e\n\t\u003ctable\u003e\n\t\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003cth\u003eIndex\u003c/th\u003e\n\t\t\t\t\u003cth\u003eISBN\u003c/th\u003e\n\t\t\t\t\u003cth\u003eTitle\u003c/th\u003e\n\t\t\t\t\u003cth\u003eAuthor\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctemplate id=\"rowTemplate\" for=\"book, index\" each=\"${ host.getBooksArray() }\"\u003e\n\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e${ index }\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e${ book.isbn }\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e${ book.title }\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e${ book.author }\u003c/td\u003e\n\t\t\t\t\u003c/tr\u003e\n\t\t\t\u003c/template\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\u003c/template\u003e\n\u003ctemplate id=\"headerTemplate\"\u003e\n\t\u003ch1\u003e${ host.pageTitle }\u003c/p\u003e\n\u003c/template\u003e\n```\n\nThe first template element is still used as the default value in the import statement, but you can\naccess other templates using their `id`, for instance:\n\n```javascript\nimport firstTemplate, { rowTemplate, headerTemplate } from './template.html';\n```\n\n## Configuration Options ##\n\nAll the configuration options that you can pass to infuse-loader, in your webpack config file, are\nlisted in the [infuse.host](https://infuse.host/#configuration-options) web site.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserg-io%2Finfuse-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserg-io%2Finfuse-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserg-io%2Finfuse-loader/lists"}