[optimize] simplify Example Code with Function & Class components

src/index.tsx

@@ -1,11 +1,14 @@
 import { auto } from 'browser-unhandled-rejection';
 import { DOMRenderer } from 'dom-renderer';
+import { configure } from 'mobx';
 import { documentReady, serviceWorkerUpdate } from 'web-utility';
 
 import { HomePage } from './page/Home';
 
 auto();
 
+configure({ enforceActions: 'never' });
+
 self.addEventListener('unhandledrejection', ({ reason }) => {
     const { message } = reason as Error;
 

src/page/Clock.tsx

@@ -1,25 +1,25 @@
-import { component, mixin, watch, createCell } from 'web-cell';
-
-@component({
-    tagName: 'cell-clock'
-})
-export class CellClock extends mixin() {
-    @watch
-    time = new Date();
-
-    private timer: number;
-
-    connectedCallback() {
-        this.timer = self.setInterval(() => (this.time = new Date()), 1000);
-    }
-
-    disconnectedCallback() {
-        clearInterval(this.timer);
-    }
-
-    render() {
-        const { time } = this;
-
-        return <div>{time.toLocaleString()}</div>;
-    }
-}
+import { observable } from 'mobx';
+import { component, observer } from 'web-cell';
+
+@component({ tagName: 'cell-clock' })
+@observer
+export class CellClock extends HTMLElement {
+    @observable
+    accessor time = new Date();
+
+    private timer: number;
+
+    connectedCallback() {
+        this.timer = self.setInterval(() => (this.time = new Date()), 1000);
+    }
+
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+
+    render() {
+        const { time } = this;
+
+        return <time dateTime={time.toJSON()}>{time.toLocaleString()}</time>;
+    }
+}

src/page/Hello.tsx

@@ -1,5 +1,3 @@
-import { createCell } from 'web-cell';
-
-export function Hello({ name = 'World' }) {
-    return <h1>Hello, {name}!</h1>;
-}
+export function Hello({ name = 'World' }) {
+    return <h1>Hello, {name}!</h1>;
+}

src/page/Home.tsx

@@ -1,38 +1,21 @@
-import { configure, observable } from 'mobx';
-import { component, observer } from 'web-cell';
+import { CellClock } from './Clock';
+import { Hello } from './Hello';
 
-configure({ enforceActions: 'never' });
-
-@component({ tagName: 'home-page' })
-@observer
-export class HomePage extends HTMLElement {
-    @observable
-    accessor time = '';
-
-    connectedCallback() {
-        setInterval(() => (this.time = new Date().toLocaleString()), 1000);
-    }
-
-    render() {
-        const { time } = this;
-
-        return (
-            <>
-                <h1>Hello Vanilla!</h1>
-                <div>
-                    We use the same configuration as Parcel to bundle this
-                    sandbox, you can find more info about Parcel
-                    <a
-                        href="https://parceljs.org"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        here
-                    </a>
-                    .
-                </div>
-                <time>{time}</time>
-            </>
-        );
-    }
-}
+export const HomePage = () => (
+    <>
+        <Hello name="WebCell" />
+        <div>
+            We use the same configuration as Parcel to bundle this sandbox, you
+            can find more info about Parcel{' '}
+            <a
+                href="https://parceljs.org"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                here
+            </a>
+            .
+        </div>
+        <CellClock />
+    </>
+);