❤
npm
Sign UpSign In

microfront

0.1.0 • Public • Published

microfront

A JavaScript library for building "micro frontends".

How to use

<div id="app"></div>
<script src="dist/microfront.umd.js"></script>
<script>
  microfront.create(
    '<div>This is app1</div>',
    document.getElementById('app')
  );
</script> 

You can also use es6

import { create } from 'microfront'

api

create(html: stirng, dom: HTMLElement)

Create a "micro app" which will load html and js just like an iframe but is not a real iframe,and return an object with the following methods:

"html" can contain script, style, link and other html tags

create(
  `
    <!doctype html>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="http://cdn/index.css" />
      </head>
      <body>
        <div>app</div>
      </body>
      <script src="http://cdn/index.js"></script>
      <script>
        console.log('app');
      </script>
    </head>
  `, dom);

  • unmount() Unmount the app

  • on(name: string, cb: any)

    Built in two events: "mount" and "unmount" mount: when all html scripts are loaded unmount: when calling the app's unmount method

app.on('mount', () => {
  // mount
}).on('unmount', () => {
  // unmount
});

  • emit(name: string, value: any)

    Emit event

app.on('custom', () => {})
app.emit('custom');

  • effectPromiseFunction(fn: any)

    Let the function returns promise be processed according to the app state, if the app has been unmounted, the promise will be rejected.

var customFetch = effectPromiseFunction(window.fetch);
 
customFetch(url)
  .then(response => response.text())
  .then(text => console.log(text))

  • effectCallbackFunction(fn: any)

    Let the callback function be processed according to the app state, if the app has been unmounted, the callback method will not be called.

var customSetTimeout = effectCallbackFunction(window.setTimeout);
 
customSetTimeout(() => {
  console.log('app');
}, 1000);

Development

$ yarn
$ yarn dev
$ open http://localhost:5000/examples/example1/

Readme

Keywords

none

Package Sidebar

Install

npm i microfront

Repository

github.com/microfrontjs/microfront

Homepage

github.com/microfrontjs/microfront#readme

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

19.1 kB

Total Files

10

Last publish

Collaborators

  • zinkey
Try on RunKit
Report malware