@implicitcast/web-component-wrapper
v0.0.5
Published
web component wrapper
Downloads
4
Readme
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"
}
}- run npm command to start app with web-component wrapper
npm run start:webcomp