prehtml-loader

    3.0.1 • Public • Published

    PRE-HTML Loader

    Easily creates static HTML pages at build time using templates, components, interpolations, and/or preprocessings.
    No JS required and nothing new to learn ;)

    Install

    npm i -D prehtml-loader

    Documentation is obsolete (2021/07/13), please wait new documentation

    Examples

    Websites using prehtml-loader:

    See the directory /examples for some more advanced usage examples.

    Basic usage

    Step 1: declare your website structure

    // ./src/main.js
    module.exports = {
    
    	pages_input_dir: './src/', // optionnal
    	pages_output_dir: './dist/pages/', // optionnal
    	pages: {
    		home: { __src: 'home', __args: { name: 'Denis Migdal' } },
    		error_404: { __src: 'error', __args: { code: 404 } },
    		error_403: { __src: 'error', __args: { code: 403 } },
    		demos: { // this is a directory
    			demo_1: {__src: 'demos/demo_1'},
    			demo_2: {__src: 'demos/demo_2'}
    		}
    	}
    
    };
    

    Tip: You can even dynamically generate your website structure from your project.

    Step 2: tell webpack to build your pages

    // ./webpack.config.js
    let website = require('./src/main.js');
    
    let {build_website} = require('prehtml-loader/webpack_helper.js');
    
    let html_config = (dst_path, src) => { // write here how you want HTML files to be build.
    
    	return {
    		module: {
    			rules: [{
    				enforce: 'post',
    				test: /\.html$/,
    				use: {
    					loader: 'file-loader',
    					options: {
    						outputPath: './../', // required
    						name: dst_path
    					}
    				}
    			},{
    				test: /\.html$/,
    				use: ['prehtml-loader'],
    			}
    		]},
    		entry: { 
    			main: src
    		},
    		output: {
    			path: path.resolve(__dirname, 'out'),
    			publicPath: '',
    			filename: `${dst_path}.junk`,
    			//clean: true
    		}
    	};
    };
    
    let js_config = (dst_path, src) => {  // write here how you want JS files to be build.
    
    	return {
    		module: {},
    		entry: {
    			main: src
    		},
    		output: {
    			path: path.resolve(__dirname),
    			publicPath: '',
    			filename: dst_path,
    			//clean: true
    		}
    	};
    };
    
    module.exports = build_website(website, html_config, js_config);
    

    Step 3: Write an HTML file !

    // ./src/error/index.html
    You got an error !
    
    Error {{code}} // contents inside {{}} are evaluated.
    
    {{let message = ''; if(error == 403) message = 'Forbidden !'; message}} // prints 'Forbidden !' if the code is 403.
    
    <div class='message'></div>
    

    Components

    Step 1: Create a component

    // ./src/component/index.html
    <div>Hello ! I am {{name}}</div>
    

    Step 2: includes your component

    // ./src/home/index.html
    <component template='../component' name='{{name}}'></component> // use '' to surround the value.
    

    With templates ;)

    Step 1: Write your template

    <html>
    	<head>
    		<title>{{title}}</title>
    	</head>
    	<header>My header</header>
    	<component template='{{page}}' __args='{{args}}'></component> // includes the page content
    	// __args enables to set all arguments at once.
    	// {{__args}} can also be used, it contains all arguments given to the page.
    	<footer>My footer</footer>
    </html>
    

    Step 2: Add your template to your website

    // ./src/main.js
    module.exports = {
    
    	templates_input_dir: `${__dirname}/`, // __dirname required
    	templates: {
    		__default:{ // the default template
    			__src: 'template',
    			__args: {
    				title: 'Error'
    			}
    		},
    		template2:{ // another template (optionnal)
    			__src: 'template',
    			__args: {
    				title: 'Home'
    			}
    		}
    	},
    
    	pages_input_dir: './src/', // optionnal
    	pages_output_dir: './dist/pages/', // optionnal
    	pages: {
    		home: { __src: 'home', __args: { name: 'Denis Migdal' }, __template: 'template2' }, // use the template2 for this page.
    		error_404: { __src: 'error', __args: { code: 404 } }, // use the default template
    		error_403: { __src: 'error', __args: { code: 403 }, __template_args: {title: 'Error 403'} }, // use the default template and override its arguments
    		demos: { // this is a directory
    			demo_1: {__src: 'demos/demo_1', _template: 'none'}, // don't use a template for this page
    			demo_2: {__src: 'demos/demo_2', __template: 'none',} // don't use a template for this page
    		}
    	}
    
    };
    

    Pre-processings

    Just put a JS file named as the html file you which to preprocess.

    // ./src/error/index.html.js
    
    module.exports = {
    
    	prerender: function($, options) { // use it to modify the current html file before the components has been included.
    
    		let message = '';
    		if( options.code == 404 )
    			message = 'not found';
    
    		$('.message').text( message ); // JQuery interface.
    	}
    
    	render: function($, options) { // use it to modify the current html file after the components has been included.
    		// ...
    	}
    };
    

    Using it with html-loader

    rules: [{
    	enforce: 'post',
    	test: /\.html$/,
    	use: {
    		loader: 'file-loader',
    		options: {
    			outputPath: './../', // required
    			name: dst_path
    		}
    	}
    },{
    	test: /\.html$/,
    	// put your html-loader configuration here.
    	// note: you may need to use extract-loader after html-loader.
    },{
    	test: /\.html$/,
    	use: ['prehtml-loader'],
    }]
    

    Install

    npm i prehtml-loader

    DownloadsWeekly Downloads

    7

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    48.3 kB

    Total Files

    51

    Last publish

    Collaborators

    • migdal