initial implementation

keithamus · Elliott Marquez · keithamus · commit d2e2b7fd9348 · 2022-12-05T17:39:53.000Z
Co-authored-by: Elliott Marquez &lt;emarquez@google.com&gt;
diff --git a/examples/index.html b/examples/index.html
@@ -5,11 +5,12 @@
     <title>custom-element demo</title>
   </head>
   <body>
-    <custom-element></custom-element>
+    <hacker-typer src="https://raw.githubusercontent.com/facebook/react/main/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js">
+    </hacker-typer>
 
     <script type="module">
       // import 'https://unpkg.com/@github/custom-element-boilerplate@latest/dist/custom-element.js'
-      import '../src/custom-element.ts'
+      import '../src/hacker-typer-element.ts'
     </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
-  "name": "@github/custom-element-element",
+  "name": "@github/hacker-typer-element",
   "version": "0.0.1",
   "description": "Boilerplate for creating a custom element.",
-  "main": "dist/custom-element.js",
-  "module": "dist/custom-element.js",
+  "main": "dist/hacker-typer-element.js",
+  "module": "dist/hacker-typer-element.js",
   "type": "module",
-  "types": "dist/custom-elements.d.ts",
+  "types": "dist/hacker-typer-elements.d.ts",
   "license": "MIT",
-  "repository": "github/custom-element-boilerplate",
+  "repository": "hacker-typer-element",
   "files": [
     "dist"
   ],
diff --git a/src/custom-element.ts b/src/custom-element.ts
diff --git a/src/hacker-typer-element.ts b/src/hacker-typer-element.ts
@@ -0,0 +1,83 @@
+const html = String.raw
+/**
+ * An example Custom Element. This documentation ends up in the
+ * README so describe how this elements works here.
+ *
+ * You can event add examples on the element is used with Markdown.
+ *
+ * ```
+ * <hacker-typer></hacker-typer>
+ * ```
+ */
+class HackerTyperElement extends HTMLElement {
+  #renderRoot!: ShadowRoot
+  #position = 0
+  #content = ''
+
+  get src() {
+    return this.getAttribute('src')
+  }
+
+  set src(value: string) {
+    this.setAttribute('src', value)
+  }
+
+  get templateEl() {
+    return this.querySelector('template')
+  }
+
+  get displayAreaEl() {
+    return this.#renderRoot.querySelector('code')
+  }
+
+  async connectedCallback(): void {
+    await this.load()
+
+    this.#renderRoot = this.attachShadow({mode: 'open'})
+    this.#renderRoot.innerHTML = html`
+    <style>
+    :host {
+      height: 100vw;
+      display: block;
+      background: black;
+      color: limegreen;
+    }
+    </style>
+    <pre><code></code></pre>`
+
+    this.ownerDocument.addEventListener('keypress', this)
+  }
+
+  handleEvent() {
+    if (this.#content.length <= this.#position) {
+      this.restart()
+    }
+    const char = this.#content.slice(this.#position, this.#position + 10)
+    const node = this.ownerDocument.createTextNode(char)
+    this.displayAreaEl?.append(node)
+    this.#position += 10
+  }
+
+  async load() {
+    const res = await fetch(this.src)
+    const text = await res.text()
+    this.#content = text
+  }
+
+  restart() {
+    this.#position = 0
+  }
+}
+
+declare global {
+  interface Window {
+    HackerTyperElement: typeof HackerTyperElement
+  }
+}
+
+export default HackerTyperElement
+
+if (!window.customElements.get('hacker-typer')) {
+  window.HackerTyperElement = HackerTyperElement
+  window.customElements.define('hacker-typer', HackerTyperElement)
+}
diff --git a/test/test.ts b/test/test.ts
@@ -1,26 +1,26 @@
 import {assert, fixture, html} from '@open-wc/testing'
-import '../src/custom-element'
+import '../src/hacker-typer'
 
-describe('custom-element', function () {
+describe('hacker-typer', function () {
   describe('element creation', function () {
     it('creates from document.createElement', function () {
-      const el = document.createElement('custom-element')
-      assert.equal('CUSTOM-ELEMENT', el.nodeName)
+      const el = document.createElement('hacker-typer')
+      assert.equal('HACKER-TYPER', el.nodeName)
     })
 
     it('creates from constructor', function () {
       const el = new window.CustomElementElement()
-      assert.equal('CUSTOM-ELEMENT', el.nodeName)
+      assert.equal('HACKER-TYPER', el.nodeName)
     })
   })
 
   describe('after tree insertion', function () {
     beforeEach(async function () {
-      await fixture(html` <custom-element></custom-element>`)
+      await fixture(html` <hacker-typer></hacker-typer>`)
     })
 
     it('initiates', function () {
-      const ce = document.querySelector('custom-element')
+      const ce = document.querySelector('hacker-typer')
       assert.equal(ce?.textContent, ':wave:')
     })
   })
