evanchen
/
prime-react-webcomponent
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: evanchen:2b778a74e7a1b3d431f091ee0b346d531f51c0b7
Branches Tags
evanchen:master
..
compare: evanchen:master
Branches Tags
evanchen:master

3 Commits
2b778a74e7 ... master

Author SHA1 Message Date
Evan Chen 6b63b9f8c6 update 2022-07-18 11:10:42 +08:00
Evan Chen f1698b4cb2 update 2022-07-15 23:04:59 +08:00
Evan Chen cc27b07ce6 example ready 2022-07-15 14:35:33 +08:00
3 changed files with 42 additions and 19 deletions
Show Stats Expand all files Collapse all files

6
index.html
View File

@ -9,11 +9,11 @@
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<title>React App</title> <title>React App</title>
<link rel="stylesheet" href="dist/index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <body>
<wc-test></wc-test> <wc-test id='test' name='Evan'></wc-test>
</body> </body>
<script src="dist/index.js"></script> <script src="index.js" type="module"></script>
</html> </html>

49
index.js
View File

@ -4,35 +4,58 @@ import ReactDOM from 'react-dom/client';
import logo from './logo.svg'; import logo from './logo.svg';
const WcTestApp = () => { const WcTestApp = (props) => {
const [ctr,incr] = useState(0) const [ctr,incr] = useState(0)
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <header className="App-header">
<img src={logo} className="App-logo" alt="logo" /> <img src={logo} className="App-logo" alt="logo" />
<p> <p>Hello! {props.name}.</p>
Edit <code>src/App.js</code> and save to reload.
</p>
<Button label={`clicked ${ctr} times`} icon="pi pi-check" onClick={()=>{incr(ctr+1)}}/> <Button label={`clicked ${ctr} times`} icon="pi pi-check" onClick={()=>{incr(ctr+1)}}/>
</header> </header>
</div> </div>
); );
} }
WcTestApp.defaultProps = {
name: 'World'
};
// a wrapper class for react component
class WcTest extends HTMLElement { class WcTest extends HTMLElement {
connectedCallback() { root;
const mountPoint = this;
// to get attributes from outside constructor(){
// const name = this.getAttribute('name'); super()
let mountPoint = this;
// ShadowRoot (global styles will not apply, but safer with a complete isolation layer) // ShadowRoot (global styles will not apply, but safer with a complete isolation layer)
// this.attachShadow({ mode: 'open' }).appendChild(mountPoint); // mountPoint = this.attachShadow({ mode: 'open' });
const root = ReactDOM.createRoot(mountPoint); this.root = ReactDOM.createRoot(mountPoint);
this.render()
// render
root.render(<WcTestApp />);
} }
// declare attributes we want to keep track of
static get observedAttributes() {
return ['name', 'onclick'];
}
// connectedCallback() {
// }
render(){
const name = this.hasAttribute('name')
? this.getAttribute('name')
: undefined;
this.root.render(<WcTestApp name={name} />);
}
attributeChangedCallback(){
this.render()
}
} }
customElements.define('wc-test', WcTest); customElements.define('wc-test', WcTest);

6
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "wc-test", "name": "prime-react-webcomponent",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
@ -10,8 +10,8 @@
"react-dom": "^18.2.0" "react-dom": "^18.2.0"
}, },
"scripts": { "scripts": {
"start": "yarn parcel index.js index.css", "start": "yarn parcel index.html",
"build": "yarn parcel build index.js index.css" "build": "(rm -rf dist||true) && yarn parcel build index.html"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [