#html-scoped-component-importer
This is a simple tool to let you create and dynamically import scoped components. All you need is a html element with the data-component attribute and it will be imported and initialized.
Index
Installation
yarn
yarn add html-scoped-component-importernpm
npm install --save html-scoped-component-importerUsage
webpack config
module.exports = {
...
resolve: {
alias: {
COMPONENTS: path.resolve(__dirname, '{your components folder}'),
}
}
...
}main.js
import { ComponentDispatcher } from 'html-scoped-component-importer';
const compDispatcher = new ComponentDispatcher();
compDispatcher.createAsyncComponents();ExampleComponent.js
export default class ExampleComponent {
constructor(element) {
super(element);
element.innerHTML = element.dataset.component;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script async="async" defer="defer" src="main.js"></script>
</head>
<body>
<div data-component="ExampleComponent"></div>
</body>