initial commit

hipertracker · hipertracker · commit 27c3b9566d50 · 2019-12-10T10:53:36.000Z
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+/.cache/
+/.history/
+/.idea/
+/dist/
+/node_modules/
diff --git a/HelloWorld.tsx b/HelloWorld.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {render, unmountComponentAtNode} from 'react-dom';
+
+export default class HelloWorld extends React.Component<any, any> {
+    render() {
+        return <span>Hello {this.props.children}</span>
+    }
+}
+
+class CustomElement extends HTMLElement {
+    mountPoint: any
+    // componentAttributes = {}; // TODO: add example of usage
+    // componentProperties = {}; // TODO: add example of usage
+
+    connectedCallback() {
+        this.update();
+    }
+    disconnectedCallback() {
+        unmountComponentAtNode(this.mountPoint);
+    }
+    update() {
+        if (!this.mountPoint) {
+            this.mountPoint = document.createElement('span');
+            this.attachShadow({mode: 'open'}).appendChild(this.mountPoint);
+        }
+        render(<HelloWorld>{this.innerHTML}</HelloWorld>, this.mountPoint);
+    }
+
+}
+
+customElements.define('hello-world', CustomElement);
diff --git a/index.css b/index.css
@@ -0,0 +1,8 @@
+* {
+    color: blue;
+}
+
+.hello {
+    color: red;
+    background-color: yellow;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+  <div id="root"></div>
+  <link rel="stylesheet" type="text/css" href="./index.css">
+  <script src="./index.tsx"></script>
+</body>
+</html>
+
diff --git a/index.tsx b/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import HelloWorld from './HelloWorld'
+import {render} from 'react-dom';
+
+render(
+    <div>
+        <div>Standard React component: <HelloWorld>React</HelloWorld></div>
+        <div>React wrapped as Webcomponent: <hello-world class="hello">Webcomponent</hello-world></div>
+    </div>,
+    document.getElementById('root'),
+);
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^3.7.3"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "target": "esnext"
+  }
+}
+
