From f85ca99e1d888b1d0c9d92e062f5437c7a60f7d5 Mon Sep 17 00:00:00 2001 From: Jeremy Karlsson Date: Wed, 5 Jan 2022 11:31:21 +0100 Subject: [PATCH] Fixaloo --- Makefile | 2 +- docs/function-component-update-advanced.html | 77 -------------------- docs/function-component-update.html | 68 ++++++++++------- docs/webact.js | 8 +- src/functionComponent.js | 39 +++++----- 5 files changed, 62 insertions(+), 132 deletions(-) delete mode 100644 docs/function-component-update-advanced.html diff --git a/Makefile b/Makefile index 2d3791b..7404420 100644 --- a/Makefile +++ b/Makefile @@ -11,6 +11,6 @@ release: cd pkg && npm publish git push --follow-tags -test: +test: build cp pkg/index.js docs/webact.js http-server docs -p 1444 diff --git a/docs/function-component-update-advanced.html b/docs/function-component-update-advanced.html deleted file mode 100644 index 44c1401..0000000 --- a/docs/function-component-update-advanced.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - Function component w/ advanced prop updates - Webact - - -

Function component w/ prop updates

- 
-  
-  import { registerFunctionComponent } from './webact.js';
-
-  async function NiceButton (({ value }) {
-    const { html, css, $, postRender } = this;
-
-    html`
-      <button></button>
-    `;
-
-    css`
-      button {
-        background-color: blue;
-        color: white;
-        padding: 1rem;
-        border: 1px solid yellow;
-        border-radius: 4px;
-      }
-    `;
-
-    postRender(() => {
-      $('button').textContent = value;
-    });
-  }
-
-  registerFunctionComponent(NiceButton, {
-    observedAttributes: ['value']
-  });
-  
-
- - - - - - diff --git a/docs/function-component-update.html b/docs/function-component-update.html index f6497f8..3b5a71d 100644 --- a/docs/function-component-update.html +++ b/docs/function-component-update.html @@ -7,39 +7,48 @@

Function component w/ prop updates

   
-  import { registerFunctionComponent } from './webact.js';
+    import { registerFunctionComponent } from './webact.js';
 
-  async function NiceButton (({ value }) {
-    const { html, css } = this;
+    async function NiceButton (initialProps) {
+      const { html, css, propsChanged, postRender, $ } = this;
 
-    html`
-      <button>
-        ${value}
-      </button>
-    `;
+      html`
+        <button>
+          <slot></slot>
+        </button>
+      `;
 
-    css`
-      button {
-        background-color: blue;
-        color: white;
-        padding: 1rem;
-        border: 1px solid yellow;
-        border-radius: 4px;
-      }
-    `;
-  }
+      css`
+        button {
+          background-color: blue;
+          color: white;
+          padding: 1rem;
+          border: 1px solid yellow;
+          border-radius: 4px;
+        }
+      `;
 
-  registerFunctionComponent(NiceButton, {
-    observedAttributes: ['value']
-  });
+      const updateContent = ({ value }) => {
+        // This will be the unnamed <slot>.
+        host.textContent = value;
+      };
+
+      postRender(() => updateContent(initialProps));
+      propsChanged(updateContent);
+    }
+
+    registerFunctionComponent(NiceButton, {
+      observedAttributes: ['value']
+    });
- +