html-scoped-component-importer

1.2.0 • Public • Published

Build Status

#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-importer

npm

npm install --save html-scoped-component-importer

Usage

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>

Readme

Keywords

none

Package Sidebar

Install

npm i html-scoped-component-importer

Weekly Downloads

72

Version

1.2.0

License

MIT

Unpacked Size

409 kB

Total Files

23

Last publish

Collaborators

  • felice.c