Semantic-Org · jlukic · Nov 22, 2024 · Nov 20, 2024 · Nov 20, 2024 · Nov 22, 2024
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -4,8 +4,19 @@ This is a pre-release version and APIs will change quickly. Before `1.0` release
 
 Please note after `1.0` Semver will be followed using normal protocols.
 
+# Version 0.1.7
+
+### Features
+* Added `ready` to Query and `on('ready')` as aliases for `domcontentloaded`.
+* You can now specify full templates as settings, not just template names. i.e. `settings = { rowTemplate = new Template() };`
+
+### Fixes
+* Calling `defineComponent` multiple times on client will no longer produce error (useful when multiple components need to req another one to be defined)
+* Renderer now probably gcs subtrees using weakref
+* Components now support custom classes as settings
+
 # Version 0.1.6
-* You can now specify full templates as settings, not just template names
+* Fixed some issues related to data staleness in AST subtrees like {#each}
 
 # Version 0.1.5
 * Add `openLink` to utils

diff --git a/dev/button.html b/dev/button.html
@@ -6,28 +6,28 @@
   <title>Button</title>
   <link rel="stylesheet" href="./index.css">
   <link rel="stylesheet" href="./ui/semantic-ui.css">
-  <link rel="stylesheet" href="./ui/theme/base.css">
-  <script src="./ui/ui/semantic-ui.js" type="module"></script>
+  <link rel="stylesheet" href="./theme/base.css">
+  <script src="./ui/semantic-ui.js" type="module"></script>
   <script>
-new EventSource('/esbuild').addEventListener('change', e => {
-  /* Rebuilds page after JS changes */
-  const { added, removed, updated } = JSON.parse(e.data);
-  if(!added.length && !removed.length && updated.length === 1) {
-    for(const link of document.getElementsByTagName('link')) {
-      const url = new URL(link.href);
-
-      if(url.host === location.host && url.pathname === updated[0]) {
-        const next = link.cloneNode();
-        next.href = updated[0] + '?' + Math.random().toString(36).slice(2);
-        next.onload = () => link.remove();
-        link.parentNode.insertBefore(next, link.nextSibling);
-        return;
+    new EventSource('/esbuild').addEventListener('change', e => {
+      /* Rebuilds page after JS changes */
+      const { added, removed, updated } = JSON.parse(e.data);
+      if(!added.length && !removed.length && updated.length === 1) {
+        for(const link of document.getElementsByTagName('link')) {
+          const url = new URL(link.href);
+
+          if(url.host === location.host && url.pathname === updated[0]) {
+            const next = link.cloneNode();
+            next.href = updated[0] + '?' + Math.random().toString(36).slice(2);
+            next.onload = () => link.remove();
+            link.parentNode.insertBefore(next, link.nextSibling);
+            return;
+          }
+        }
       }
-    }
-  }
-  location.reload();
-});
-</script>
+      location.reload();
+    });
+  </script>
 </head>
 <body>
   <div class="container">

diff --git a/dev/dynamic-table.html b/dev/dynamic-table.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="./reload.js" type="module"></script>
+  <link rel="stylesheet" href="./index.css">
+  <link rel="stylesheet" href="./ui/semantic-ui.css">
+  <link rel="stylesheet" href="./theme/base.css">
+  <script src="./ui/semantic-ui.js" type="module"></script>
+
+  <title>Test Element</title>
+  <script src="./examples/dynamic-table.js" type="module"></script>
+</head>
+<body>
+  <div class="container">
+    <dynamic-table></dynamic-table>
+    <br><br>
+    <ui-button primary class="one">Show Stats</ui-button>
+    <ui-button primary class="two">Show Hobbies</ui-button>
+    <script type="module">
+      import { Row, Row2 } from './examples/dynamic-table.js';
+
+      const table = document.querySelector('dynamic-table');
+      const button1 = document.querySelector('ui-button.one');
+      const button2 = document.querySelector('ui-button.two');
+      table.rows = [
+       { id: 'user1', firstName: 'Tank', lastName: 'Steelbeam', age: '47', gender: 'Male', occupation: 'Construction Safety Inspector', hobby: 'Competitive Origami', coffeeOrder: 'Decaf (secretly afraid of caffeine)' },
+       { id: 'user2', firstName: 'Flo', lastName: 'Watercooler', age: '55', gender: 'Female', occupation: 'Office Manager', hobby: 'Underground Fight Club Referee', coffeeOrder: 'Black, industrial strength' },
+       { id: 'user3', firstName: 'Chip', lastName: 'Windowsill', age: '23', gender: 'Male', occupation: 'Professional Plant Waterer', hobby: 'Extreme Knitting', coffeeOrder: 'Oat milk quadruple shot' },
+       { id: 'user4', firstName: 'Mabel', lastName: 'Clockwise', age: '84', gender: 'Female', occupation: 'Retired Time Zone Coordinator', hobby: 'Street Racing', coffeeOrder: 'Earl Grey with a shot of espresso' },
+       { id: 'user5', firstName: 'Buck', lastName: 'Pencilsworth', age: '42', gender: 'Male', occupation: 'Pencil Sharpness Consultant', hobby: 'Underwater Basket Weaving', coffeeOrder: 'Whatever was left in the pot' },
+       { id: 'user6', firstName: 'Dot', lastName: 'Keyboarder', age: '29', gender: 'Female', occupation: 'Keyboard Sound Effects Artist', hobby: 'Silent Disco DJ', coffeeOrder: 'Changes order daily to keep baristas on their toes' },
+       { id: 'user7', firstName: 'Rod', lastName: 'Sockdrawer', age: '58', gender: 'Male', occupation: 'Sock Matching Specialist', hobby: 'Competitive Staring Contests', coffeeOrder: 'Hot water, holds own tea bag' },
+       { id: 'user8', firstName: 'Pearl', lastName: 'Teacup', age: '61', gender: 'Female', occupation: 'Fortune Cookie Writer', hobby: 'Extreme Couponing', coffeeOrder: 'Strictly tea, judges coffee drinkers silently' },
+       { id: 'user9', firstName: 'Buzz', lastName: 'Lampshade', age: '36', gender: 'Male', occupation: 'Professional Lightbulb Moment Creator', hobby: 'Cloud Shape Categorization', coffeeOrder: 'Energy drinks only, banned from Starbucks' },
+       { id: 'user10', firstName: 'Dotty', lastName: 'Paperclips', age: '72', gender: 'Female', occupation: 'Paper Clip Chain World Record Holder', hobby: 'Competitive Power Walking', coffeeOrder: 'Irish coffee, hold the coffee' },
+       { id: 'user11', firstName: 'Biff', lastName: 'Strongarm', age: '39', gender: 'Male', occupation: 'Professional High-Fiver', hobby: 'Butterfly Wrestling', coffeeOrder: 'Protein shake with espresso shots' },
+       { id: 'user12', firstName: 'Pip', lastName: 'Kettlewood', age: '19', gender: 'Female', occupation: 'Apprentice Toast Inspector', hobby: 'Professional Blanket Fort Architect', coffeeOrder: 'Whatever has the most sugar' },
+       { id: 'user13', firstName: 'Chuck', lastName: 'Cheesewheel', age: '44', gender: 'Male', occupation: 'Cheese Wheel Racing Coach', hobby: 'Extreme Ironing', coffeeOrder: 'Lactose-free (ironic for a Cheesewheel)' },
+       { id: 'user14', firstName: 'Penny', lastName: 'Deskchair', age: '31', gender: 'Female', occupation: 'Chair Spinning Olympics Trainer', hobby: 'Competitive Cat Herding', coffeeOrder: 'Cold brew IV drip' },
+       { id: 'user15', firstName: 'Duke', lastName: 'Coffeebean', age: '38', gender: 'Male', occupation: 'Coffee Bean Counter', hobby: 'Professional Napping', coffeeOrder: 'Actually only drinks hot chocolate' }
+      ];
+
+      button1.addEventListener('click', () => {
+        table.rowTemplate = Row;
+        table.headers = ['ID', 'Name', 'Age', 'Gender' ];
+      });
+      button2.addEventListener('click', () => {
+        table.rowTemplate = Row2;
+        table.headers = ['Name', 'Occupation', 'Hobby' ];
+      });
+    </script>
+  </div>
+</body>
diff --git a/dev/index.html b/dev/index.html
@@ -32,6 +32,7 @@
 <body>
   <div class="container">
     <a href="/todo.html">Todo List</a>
+    <a href="/dynamic-table.html">Dynamic Table</a>
     <a href="/test-element.html">Test Element</a>
     <a href="/test-ui.html">Test UI</a>
     <a href="/button.html">Button</a>

diff --git a/dev/theme/base.css b/dev/theme/base.css
diff --git a/dev/theme/base.css.map b/dev/theme/base.css.map
diff --git a/docs/public/images/api-banner-image.png b/docs/public/images/api-banner-image.png
diff --git a/docs/src/components/Test/component.css b/docs/src/components/Test/component.css
@@ -1,8 +1,11 @@
-.source {
-  color: var(--standard-60);
-  margin-right: var(--compact-spacing);
+table {
+  border-collapse: collapse;
+  width: 100%;
 }
-.counter {
-  font-weight: bold;
-  color: var(--primary-text-color);
+th {
+  font-weight: var(--bold);
+  color: var(--white);
+}
+th {
+  padding: 5px 8px;
 }
diff --git a/docs/src/components/Test/component.html b/docs/src/components/Test/component.html
@@ -1,35 +1,27 @@
-<h3>Reactive Sources</h3>
-<ul>
-  <li>
-    <span class="source">Setting</span>
-    <span class="counter">{counter1}</span>
-  </li>
-  <li>
-    <span class="source">State</span>
-    <span class="counter">{counter2}</span>
-  </li>
-  <li>
-    <span class="source">Reactive Prop</span>
-    <span class="counter">{counter3}</span>
-  </li>
-</ul>
+<h2>Hello World</h2>
+{#each header in headers}
+  {header}
+{/each}
+{stringify rowTemplate}
+{log headers}
+<div class="wrapper">
+  {#each row in rows}
+    <div>
+      {log rowTemplate}
+      {> template
+        name=rowTemplate
+        data=row
+      }
+    </div>
+  {/each}
+</div>
+<h2>Second</h2>
+{> template
+  name=rowTemplate
+  data={ firstName: 'johnny', lastName: 'fingers', age: 22}
+}
+<h3>Third</h3>
 
-<h3>Non-Reactive Sources</h3>
-<ul>
-  <li>
-    <span class="source">Prop</span>
-    <span class="counter">{counter4}</span>
-  </li>
-  <li>
-    <span class="source">Prop in Function</span>
-    <span class="counter">{counter5}</span>
-  </li>
-  <li>
-    <span class="source">$ in Function</span>
-    <span class="counter">{counter6}</span>
-  </li>
-  <li>
-    <span class="source">Setting Untouched</span>
-    <span class="counter">{counter7}</span>
-  </li>
-</ul>
+{#each row in rows}
+  {stringify row}
+{/each}