@implicitcast/web-component-wrapper NPM

Web Component Wrapper

Wrapper utility encapsulates react application in a web component.

Installation

npm install --save @implicitcast/web-component-wrapper @webcomponents/webcomponentsjs @craco/craco

Add Boilerplate files

Create file 'craco.config.js' at root path with content

const {
  reactWrapperWebpackConfigure,
} = require("@implicitcast/web-component-wrapper");
module.exports = {
  webpack: {
    configure: reactWrapperWebpackConfigure,
  },
};

Create a file with path 'src/index.webcomponent.tsx'

import "@webcomponents/webcomponentsjs/custom-elements-es5-adapter";
import "@webcomponents/webcomponentsjs/webcomponents-loader";
import { reactWebComponentWrapper } from "@implicitcast/web-component-wrapper";
import App from "./App";
reactWebComponentWrapper(App, "web-component-test"); // Second parameter names the webComponent

Edit 'public/index.html' file

<html>
  .....
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <web-component-test></web-component-test>
    <!-- Add webComponent tag -->
  </body>
</html>

Update 'package.json' file

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "start:webcomp": "craco start webComponentEntry:src/index.webcomponent.tsx useWebComponent:true",
    "build:webcomp": "craco start webComponentEntry:src/index.webcomponent.tsx useWebComponent:true"
  }
}