Merge pull request #33 from MatAtBread/v0.14.1

V0.14.1
MatAtBread · Jun 18, 2024 · cfac59f · cfac59f
2 parents 1581146 + 93b3167
commit cfac59f
Show file tree

Hide file tree

Showing 20 changed files with 100 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -67,14 +67,14 @@ The /esm directory contains unbundled ESM files with inline sourcemaps and TypeS
 
 ### ES6 import
 ```
-  import * as AIUI from 'https://www.unpkg.com/@matatbread/ai-ui/dist/ai-ui.mjs'; // or .min.mjs
+  import * as AIUI from 'https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/dist/ai-ui.mjs'; // or .min.mjs
   // You can, of course, just import the members you need...
-  import { tag } from 'https://www.unpkg.com/@matatbread/ai-ui/dist/ai-ui.mjs'; // or .min.mjs
+  import { tag } from 'https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/dist/ai-ui.mjs'; // or .min.mjs
 ```
 
 ### HTML `<script>` tag
 ```
-  <script src="https://www.unpkg.com/@matatbread/ai-ui/dist/ai-ui.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/dist/ai-ui.js"></script>
   <!-- defines global AIUI -->
   <script>
     const { tag } = AIUI;

diff --git a/chrome-extension/devtools.html b/chrome-extension/devtools.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
@@ -11,6 +12,6 @@
     </head>
     <body>
         AI-UI-X
-        <script src="devtools.js" type="text/javascript"></script>
+        <script src="devtools.mjs" type="module"></script>
     </body>
 </html>
diff --git a/chrome-extension/devtools.mjs b/chrome-extension/devtools.mjs
@@ -0,0 +1,12 @@
+import { getEltInfo } from "./getEltInfo.mjs";
+
+chrome.devtools.panels.elements.createSidebarPane(
+  'AI-UI',
+  (sidebar) => {
+    const updateElementProperties = () => { 
+      sidebar.setExpression('(' + getEltInfo.toString() + ')()');
+    };
+    updateElementProperties();
+    chrome.devtools.panels.elements.onSelectionChanged.addListener(updateElementProperties);
+  }
+);
diff --git a/chrome-extension/devtools.js → chrome-extension/getEltInfo.mjs b/chrome-extension/devtools.js → chrome-extension/getEltInfo.mjs
@@ -1,5 +1,4 @@
-
-const getEltInfo = () => {
+export const getEltInfo = () => {
   function codify(n) {
     function attrName(s) {
       if (s === 'class')
@@ -16,13 +15,13 @@ const getEltInfo = () => {
     const markup = (function codify(n, nest = 0, noPad = false) {
       const pad = noPad ? '' : '\n' + ' '.repeat(nest * 2 + 6);
       const nodeName = n.nodeName.toLowerCase();
-//      if (nodeName === 'script') return 'script()'+pad;
+      //      if (nodeName === 'script') return 'script()'+pad;
       if (nodeName === '#text') {
         if (n.textContent?.match(/^\s+$/))
           return null;
-        if (n.textContent.includes('\n') || n.textContent.includes('\t') || n.textContent.includes('"')  || n.textContent.includes('`') || n.textContent.includes("\""))
-          return "`" + n.textContent + "`"// + pad.slice(0, -4);
-        return "'" + n.textContent + "'"// + pad.slice(0, -4);
+        if (n.textContent.includes('\n') || n.textContent.includes('\t') || n.textContent.includes('"') || n.textContent.includes('`') || n.textContent.includes("\""))
+          return "`" + n.textContent + "`"; // + pad.slice(0, -4);
+        return "'" + n.textContent + "'"; // + pad.slice(0, -4);
       }
       if (nodeName === '#comment')
         return "/*" + n.nodeValue + "*/";
@@ -48,7 +47,7 @@ const getEltInfo = () => {
         rootNode = nodeName;
         if (n.childNodes.length)
           return '[' + pad +
-            [...n.childNodes].map(n => codify(n, nest + 1)).filter(s => s != null).join("," + pad)/*.slice(0, -4)*/ + ']';
+            [...n.childNodes].map(n => codify(n, nest + 1)).filter(s => s != null).join("," + pad) /*.slice(0, -4)*/ + ']';
         return undefined;
       }
       if (!hasAttrs && n.childNodes.length === 0)
@@ -61,11 +60,11 @@ const getEltInfo = () => {
         (nest < 20
           ? [...n.childNodes].map(n => codify(n, nest + 1)).filter(s => s != null).join("," + pad)
           : '...') +
-        pad.slice(0,-2)+')';
+        pad.slice(0, -2) + ')';
     })(n);
     return `import { tag } from '@matatbread/ai-ui';
 const { ${Object.keys(nodeNames)} } = tag();
-const _ = ${rootNode}.extended({
+export default ${rootNode}.extended({
   ${rootAttrs ? `override: ${rootAttrs},` : ''}
   ${markup ? `constructed() {
     return ${markup}
@@ -74,55 +73,70 @@ const _ = ${rootNode}.extended({
     `;
   }
 
-  function noProto(o) {
-    return typeof o === 'object' && o
-      ? Object.create(null,
-        Object.fromEntries(Object.entries(o).map(([k, v]) => [
-          (v && v[Symbol.asyncIterator]) ? k + ' 💥' : k,
-          {
-            value: typeof v === 'function' ? v : v?.valueOf?.(),
-            enumerable: true
-          }
-        ]))
-      )
-      : o;
+  function noProto(o, deep) {
+    function unbox(v) {
+      if (v === null || v === undefined || !(v.valueOf)) return v;
+      return v.valueOf();
+    }
+    try {
+      return typeof o === 'object' && o && !Array.isArray(o)
+        ? Object.create(null,
+          Object.fromEntries(Object.entries(o).map(([k, v]) => [
+            (v && v[Symbol.asyncIterator]) ? k + ' 💥' : k,
+            {
+              value: typeof v === 'function' ? v : deep ? noProto(unbox(v), deep) : unbox(v),
+              enumerable: Object.getOwnPropertyDescriptor(o, k).enumerable
+            }
+          ]))
+        )
+        : o;
+    } catch (ex) {
+      return o;
+    }
   }
+
   function explainConstructor(c) {
     const props = {
       [c.name]: {
         enumerable: true,
         value: c.definition
-          ? Object.assign(noProto(c.definition), {
+          ? Object.assign(noProto(c.definition, true), {
             ['super ' + c.super.name]: c.super
               ? explainConstructor(c.super)[c.super.name]
-              : noProto(c.super)
+              : noProto(c.super, true)
           })
           : Object.getPrototypeOf($0)
       }
-    }
+    };
     return Object.create(null, props);
   }
   const props = explainConstructor($0.constructor);
+
+  function showProperties(o) {
+    const d = noProto(o);
+    let c = o.constructor;
+    while (c) {
+      if (c.definition) {
+        if (c.definition.override)
+          Object.defineProperties(d, Object.fromEntries(Object.entries(Object.getOwnPropertyDescriptors(c.definition.override)).filter(([name, pd]) => !(name in o)).map(([name, pd]) => [name, ((pd.enumerable = false), pd)])));
+        if (c.definition.declare)
+          Object.defineProperties(d, Object.fromEntries(Object.entries(Object.getOwnPropertyDescriptors(c.definition.declare)).filter(([name, pd]) => !(name in o)).map(([name, pd]) => [name, ((pd.enumerable = false), pd)])));
+      }
+      c = c.super;
+    }
+    // \u00AD is a hack to place this at the end of the properties, as dev tools draws in code-point order, and it's non-visible
+    return Object.defineProperty(d, '\u00ADPrototype properties', { value: Object.getPrototypeOf(o) });
+  }
+
   Object.defineProperties(props, {
     'AI-UI Code Snippet': {
       value: codify($0)
     },
 
     'Element properties': {
-      // TODO: Find a way to see what attrs aren't the same as the proto values?
-      // Object.getPrototypeOf($0)[Symbol.toStringTag]
-      value: Object.defineProperty(noProto($0), 'Prototype properties', { value: Object.getPrototypeOf($0) })
+      value: showProperties($0)
     }
   });
 
   return props;
-}
-
-chrome.devtools.panels.elements.createSidebarPane(
-  'AI-UI',
-  (sidebar) => {
-    const updateElementProperties = () => sidebar.setExpression('(' + getEltInfo.toString() + ')()');
-    updateElementProperties();
-    chrome.devtools.panels.elements.onSelectionChanged.addListener(updateElementProperties);
-  }
-);
+};
diff --git a/guide/examples/ts/htm.ts b/guide/examples/ts/htm.ts
@@ -1,5 +1,5 @@
-//import htm from 'https://unpkg.com/htm@3.1.1/src/index.mjs';
-import htm from 'https://unpkg.com/htm/mini/index.mjs';
+//import htm from 'https://cdn.jsdelivr.net/npm/htm@3.1.1/src/index.mjs';
+import htm from 'https://cdn.jsdelivr.net/npm/htm/mini/index.mjs';
 import { tag, Iterators } from '../../../module/esm/ai-ui.js';
 Iterators.augmentGlobalAsyncGenerators();
 

diff --git a/guide/examples/ts/weather.htm.ts b/guide/examples/ts/weather.htm.ts
@@ -1,4 +1,4 @@
-import htm from 'https://unpkg.com/htm/dist/htm.module.js';
+import htm from 'https://cdn.jsdelivr.net/npm/htm/dist/htm.module.js';
 import { ChildTags, tag } from '../../../module/esm/ai-ui.js';
 
 const { input, div, img, createElement } = tag();;

diff --git a/guide/iterators.md b/guide/iterators.md
@@ -22,7 +22,7 @@ The first is easiest to use. If you use this method, you only need to do so once
 
 ```typescript
 // Augments the global prototype and declares global types
-import 'https://www.unpkg.com/@matatbread/ai-ui/esm/augment-iterators.js';
+import 'https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/esm/augment-iterators.js';
 
 async function *count(limit) {
   for (let i=0; i<limit; i++)
@@ -42,7 +42,7 @@ The final two require that you import the functions that add the helpers:
 
 ```javascript
 /* ES6 Import */
-import { Iterators } from 'https://www.unpkg.com/@matatbread/ai-ui/esm/ai-ui.js';
+import { Iterators } from 'https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/esm/ai-ui.js';
 const { iterableHelpers, generatorHelpers } = Iterators;
 ```
 
@@ -54,7 +54,7 @@ const { iterableHelpers, generatorHelpers } = Iterators;
 
 
 ```html
-<script src="https://www.unpkg.com/@matatbread/ai-ui/dist/ai-ui.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/dist/ai-ui.min.js"></script>
 <script>
   /* Static script */
   const { iterableHelpers, generatorHelpers } = AIUI.Iterators;

diff --git a/guide/tsx.md b/guide/tsx.md
@@ -30,8 +30,8 @@ HTM is a fabulously small library, however becuase the return of the HTML tagged
 To use HTM, check out the [README](https://www.npmjs.com/package/htm), and use the following code to initialise it with AI-UI:
 
 ```javascript
-import htm from 'https://unpkg.com/htm/mini/index.mjs';
-import { tag } from 'https://unpkg.com/@matatbread/ai-ui/esm/ai-ui.js';
+import htm from 'https://cdn.jsdelivr.net/npm/htm/mini/index.mjs';
+import { tag } from 'https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/esm/ai-ui.js';
 const { div, createElement } = tag() ; // You can of course also destructure any AI-UI base tag functions at the same time
 const html = htm.bind(createElement); // Bind tag().createElement to `htm` as per the README
 

diff --git a/guide/your-first-web-page.md b/guide/your-first-web-page.md
@@ -4,7 +4,7 @@ Here's an example of a very simple web page, with the content generated by AI-UI
 
 ```html
 <head>
-  <script src="https://unpkg.com/@matatbread/ai-ui/dist/ai-ui.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/dist/ai-ui.js"></script>
 </head>
 
 <body>
@@ -13,7 +13,7 @@ Here's an example of a very simple web page, with the content generated by AI-UI
   /* Specify what base tags you reference in your UI */
   const { h2, div } = AIUI.tag();
 
-  /* Define a _new_ tag type, called `App`, based on the standard "<div>" tag, 
+  /* Define a _new_ tag type, called `App`, based on the standard "<div>" tag,
     that is composed of an h2 and div elements. It will generate markup like:
 
   <div>
@@ -50,7 +50,7 @@ Here's an example of a very simple web page, with the content generated by AI-UI
 
 So far, so what? Another way of declaring HTML? Not exactly ground-breaking.
 
-The `AIUI.tag()` API returns a collection of functions that create a standard DOM node of the specified name. These are just normal DOM nodes, created via [document.createElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement), and therefore have all the features and behaviours of standard DOM nodes. 
+The `AIUI.tag()` API returns a collection of functions that create a standard DOM node of the specified name. These are just normal DOM nodes, created via [document.createElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement), and therefore have all the features and behaviours of standard DOM nodes.
 
 Like the `div(....)` method (and all tag functions returned by `AIUI.tag()`), the new `App(...)` function optionally accepts an object specifying its attributes as the first arguemnt, and an optional list of children and returns a standard DOM node.
 
@@ -59,8 +59,8 @@ In these docs, you'll see these kinds of functions (returned by `AIUI.tag()` or
 ### The general function signature of a tag creation function is:
 ```typescript
 TagFunctionName(
-  attributes?: AttributesOfThisTag, 
-  ...children:(string | number | boolean | Node | Element | NodeList | undefined | HTMLCollection 
+  attributes?: AttributesOfThisTag,
+  ...children:(string | number | boolean | Node | Element | NodeList | undefined | HTMLCollection
   /* Or an array or iterable of any combination of the former */)[]
   ): Element
 ```
@@ -125,7 +125,7 @@ In the following sections, we'll add:
   Making the standard W3C DOM API dynamic using Promises and async generators.
 
 * [TSX](./tsx.md) _coming soon_
-  
+
 ____
 
 | < Prev | ^ |  Next > |

diff --git a/module/README.md b/module/README.md
@@ -67,14 +67,14 @@ The /esm directory contains unbundled ESM files with inline sourcemaps and TypeS
 
 ### ES6 import
 ```
-  import * as AIUI from 'https://www.unpkg.com/@matatbread/ai-ui/dist/ai-ui.mjs'; // or .min.mjs
+  import * as AIUI from 'https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/dist/ai-ui.mjs'; // or .min.mjs
   // You can, of course, just import the members you need...
-  import { tag } from 'https://www.unpkg.com/@matatbread/ai-ui/dist/ai-ui.mjs'; // or .min.mjs
+  import { tag } from 'https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/dist/ai-ui.mjs'; // or .min.mjs
 ```
 
 ### HTML `<script>` tag
 ```
-  <script src="https://www.unpkg.com/@matatbread/ai-ui/dist/ai-ui.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@matatbread/ai-ui/dist/ai-ui.js"></script>
   <!-- defines global AIUI -->
   <script>
     const { tag } = AIUI;

diff --git a/module/dist/ai-ui.cjs b/module/dist/ai-ui.cjs
diff --git a/module/dist/ai-ui.js b/module/dist/ai-ui.js