common-master-mfe-integration v0.0.22

use-web-component

1.Reason

hook to integrate web component in minutes

we have these web-components:

  - project-master
  - department-master

2.React tutorial

• install

  yarn add common-master-mfe-integration

• define remote main.js,
• tag name: important !, tag name must be right
• bridge: data that need to transfer from host app to remote app
• input types and hook can get from this npm

import { useProjectMaster } from 'common-master-mfe-integration'

const bridge = {
  axios, fetch, routerFn, permissions, ...
}

export default function Page() {
  const [WebComponent] = useProjectMaster('http://localhost:3002/main.js', bridge)
  return <WebComponent title="1" name="2" />
}

3.Issues:

3.1.Missing ES5 class

• you can see this error :

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

• Add this polyfill into head of html to fix:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.3/custom-elements-es5-adapter.js"></script>

• if you use react and hook of this lib: useWebComponent, useProjectMaster, useDepartmentMaster, ... you don't need to add this polyfill manually