Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/serg-io/infuse-loader

Webpack loader for parsing and importing infuse.host templates.
https://github.com/serg-io/infuse-loader

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

Last synced: 13 days ago
JSON representation

Webpack loader for parsing and importing infuse.host templates.

Awesome Lists containing this project

README 

        
infuse-loader

=============



This library can be used with [webpack](https://webpack.js.org/) to parse and import HTML templates

to be used with [infuse.host](https://infuse.host/).



## Usage ##



To be able to use infuse-loader in your webpack project you must first install it:



```bash

npm install --save-dev infuse-loader

```



Then, you need to modify your webpack configuration file to use infuse-loader for HTML files:



```javascript

const path = require('path');



module.exports = {

	context: __dirname,

	devServer: {

		contentBase: [path.resolve(__dirname, 'dist')]

	},

	entry: './src/index.js',

	mode: 'development',

	module: {

		rules: [{

			test: /\.html$/,

			use: [{ loader: 'infuse-loader' }]

		}],

	},

	output: {

		filename: 'bundle.js',

		path: path.resolve(__dirname, 'dist')

	}

};

```



## Example ##



Lets say you want to define a custom element to use as a page header. You would write the HTML file

with template for the custom element. We'll call this file _header.html_.



```html



	
${ host.pageTitle }



```



Then, you simply import that template into an ES module where you define the custom element:



```javascript

// Import template and Infuse.Host.

import headerTemplate from './header.html';

import * as Infuse from 'path/to/infuse.host/src/infuse.js';



// Extend `Infuse.Host` to define a class for the new custom element.

class CustomHeader extends Infuse.Host {

	// `Infuse.Host` uses `this.template` to obtain the parsed template to clone/infuse.

	get template() {

		return headerTemplate;

	}



	// This is the property used in the template.

	get pageTitle() {

		return 'Page Title';

	}

}



// Define the custom element using the `CustomHeader` class.

window.customElements.define('custom-header', CustomHeader);

```



Whenever the `` element is used on the page (after this module has been loaded by

the browser), `Infuse.Host` will clone and infuse the template and add the resulting fragment to

the custom element, which will result in:



```html



	
Page Title



```



The first template in an HTML file is used as the default value in the import statement. In the

previous example, the HTML file contained only one template, which was imported as `headerTemplate`.



When using HTML files with multiple template elements (including nested templates), you can use the

template ID to access different templates in an import statement. By default, infuse.host uses the

`data-tid` as the name of the template ID attribute. This attribute is added to the template element

(if it doesn't have it already) when a template is parsed. You can add this attribute to your

templates to uniquely identify them. You can use the default attribute name (`data-tid`) or you can

use a different attribute name by setting the `templateId` [configuration

option](https://infuse.host/#configuration-options) in your webpack config file:



```javascript

module.exports = {

	/* Other webpack configuration options. */

	module: {

		rules: [{

			test: /\.html$/,

			use: [{

				loader: 'infuse-loader',

				// infuse.host configuration options

				options: {

					templateId: 'id'

				}

			}]

		}]

	},

	/* Other webpack configuration options. */

};

```



You can then optionally add the `id` attribute to your templates. For instance:



```html



	

		

			

				Index

				ISBN

				Title

				Author

			

		

		

			

				

					${ index }

					${ book.isbn }

					${ book.title }

					${ book.author }

				

			

		

	



	
${ host.pageTitle }



```



The first template element is still used as the default value in the import statement, but you can

access other templates using their `id`, for instance:



```javascript

import firstTemplate, { rowTemplate, headerTemplate } from './template.html';

```



## Configuration Options ##



All the configuration options that you can pass to infuse-loader, in your webpack config file, are

listed in the [infuse.host](https://infuse.host/#configuration-options) web site.