From b6d8d8f4474cc45c5141d5f037b791f4a85c8ec8 Mon Sep 17 00:00:00 2001 From: John Shaver Date: Mon, 11 Mar 2019 15:34:01 -0700 Subject: [PATCH] first test case met --- index.js | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 11 +++++++++++ test.html | 12 ++++++++++++ test.js | 17 +++++++++++++++++ 4 files changed, 79 insertions(+) create mode 100644 index.js create mode 100644 package.json create mode 100644 test.html create mode 100644 test.js diff --git a/index.js b/index.js new file mode 100644 index 0000000..db3c872 --- /dev/null +++ b/index.js @@ -0,0 +1,39 @@ + +function pureComponentFactory (name, functionalRender) { + class ComponentClass extends HTMLElement { + constructor (...args) { + super(); + this.attachShadow({mode: 'open'}); + console.log("CONSTRUCTOR"); + return; + } + render(args) { + let newDom = functionalRender(args); + console.log("Rendering: ", newDom); + this.shadowRoot.innerHTML= newDom; + } + static get observedAttributes() { + //How do we make this flexible???? + return ['count']; + } + connectedCallback() { + this.render(this.parseAttributes()) + } + attributeChangedCallback() { + this.render(this.parseAttributes()) + } + parseAttributes() { + console.log(this); + let attr = {}; + for(let i = 0; i < this.attributes.length; ++i) { + attr[this.attributes[i].name] = this.getAttribute(this.attributes[i].name); + } + console.log("Parse attributes: ", attr); + return attr; + } + + } + window.customElements.define(name, ComponentClass); + return ComponentClass; +} + diff --git a/package.json b/package.json new file mode 100644 index 0000000..60165a7 --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "name": "web-functional-component", + "version": "1.0.0", + "description": "A wrapper around web-components to allow more functional patterns", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "john@jshaver.net", + "license": "MIT" +} diff --git a/test.html b/test.html new file mode 100644 index 0000000..612dd35 --- /dev/null +++ b/test.html @@ -0,0 +1,12 @@ + + + + + + +
+ + +
+ + diff --git a/test.js b/test.js new file mode 100644 index 0000000..8166420 --- /dev/null +++ b/test.js @@ -0,0 +1,17 @@ + +let count = pureComponentFactory( + "count-ele", + ({count}) => { + console.log("RENDERING COUNT: ", count); + return `
` + } +); + +var buttonPress = function() { + let count = document.querySelector("#count"); + let oldValue = parseInt(count.getAttribute('count')) + let newValue = oldValue + 1; + console.log(`OldValue: ${oldValue} NewValue: ${newValue}`); + count.setAttribute('count', newValue.toString()); +}; +