auto-register elements

demo/[tests] distance-field.html

@@ -31,8 +31,6 @@
       import { DistanceField } from '../src/distance-field.ts';
       import { FolkShape } from '../src/folk-shape.ts';
 
-      FolkShape.define();
-
       const d = document.querySelector('distance-field');
 
       const geometries = [];

demo/[tests] many-shapes.html

@@ -24,8 +24,6 @@
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
 
-      FolkShape.define();
-
       const geometries = [];
 
       const now = performance.now();

demo/animated-shapes-on-a-canvas.html

@@ -66,8 +66,6 @@
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
 
-      FolkShape.define();
-
       const geos = document.querySelectorAll('folk-shape');
 
       geos.forEach((el, i) => (el.style.viewTransitionName = `g${i}`));

demo/audio-beats-with-event-propagators.html

@@ -64,11 +64,6 @@
       import { FolkLLM } from '../src/folk-llm.ts';
       import { FolkMetronome } from '../src/folk-metronome.ts';
       import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
-
-      FolkShape.define();
-      FolkLLM.define();
-      FolkMetronome.define();
-      FolkEventPropagator.define();
     </script>
   </body>
 </html>

demo/canvasify-a-html-document.html

@@ -102,8 +102,6 @@
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
 
-      FolkShape.define();
-
       function copyStyles(from, to) {
         const styles = getComputedStyle(from);
         for (const name of styles) {

demo/cross-iframe-xanadu-links.html

@@ -64,8 +64,6 @@
 
     <script type="module">
       import { FolkXanadu } from '../src/folk-xanadu.ts';
-
-      FolkXanadu.define();
     </script>
   </body>
 </html>

demo/distance-field-visualization.html

@@ -44,9 +44,6 @@
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
       import { DistanceField } from '../src/distance-field.ts';
-
-      FolkShape.define();
-      DistanceField.define();
     </script>
   </body>
 </html>

demo/embeddable-llm-with-propagators.html

@@ -121,11 +121,6 @@
       import { FolkLLM } from '../src/folk-llm.ts';
       import { FolkTimer } from '../src/folk-timer.ts';
       import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
-
-      FolkShape.define();
-      FolkLLM.define();
-      FolkTimer.define();
-      FolkEventPropagator.define();
     </script>
   </body>
 </html>

demo/event-propagators.html

@@ -54,9 +54,6 @@ rotation: from.x"
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
       import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
-
-      FolkShape.define();
-      FolkEventPropagator.define();
     </script>
   </body>
 </html>

demo/folk-interface-for-qr-codes.html

@@ -82,9 +82,6 @@
       import { FolkShape } from '../src/folk-shape.ts';
       import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
 
-      FolkShape.define();
-      FolkEventPropagator.define();
-
       const ropeMode = document.querySelector('input[type="checkbox"]');
 
       ropeMode.addEventListener('input', () => {

demo/html-ink.html

@@ -24,9 +24,6 @@
       import { FolkShape } from '../src/folk-shape.ts';
       import { FolkInk } from '../src/folk-ink.ts';
 
-      FolkShape.define();
-      FolkInk.define();
-
       const drawButton = document.querySelector('button');
 
       async function draw(e) {

demo/html-spreadsheet.html

@@ -125,9 +125,6 @@
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
-
-      FolkShape.define();
-      FolkSpreadsheet.define();
     </script>
   </body>
 </html>

demo/propagator-toolbar.html

@@ -55,10 +55,6 @@
       import { FolkShape } from '../src/folk-shape.ts';
       import { DistanceField } from '../src/distance-field.ts';
       import { FolkToolbar } from '../src/folk-toolbar.ts';
-
-      FolkShape.define();
-      DistanceField.define();
-      FolkToolbar.define();
     </script>
   </body>
 </html>

demo/proximity-based-communication-and-event-propagators.html

@@ -134,14 +134,6 @@
           }
         },
       });
-
-      FolkShape.define();
-      FolkMap.define();
-      FolkCluster.define();
-      FolkProximity.define();
-      FolkWeather.define();
-      GeoWiki.define();
-      FolkEventPropagator.define();
     </script>
   </body>
 </html>

demo/proximity-based-communication.html

@@ -119,13 +119,6 @@
           }
         },
       });
-
-      FolkShape.define();
-      FolkMap.define();
-      FolkCluster.define();
-      FolkProximity.define();
-      FolkWeather.define();
-      GeoWiki.define();
     </script>
   </body>
 </html>

demo/proximity-based-music.html

@@ -64,15 +64,6 @@
       import { RecordPlayer } from './src/record-player.ts';
       import { collisionDetection } from '../src/common/collision.ts';
 
-      FolkShape.define();
-      RecordPlayer.define();
-
-      /**
-        sips -c 326 276 --cropOffset 1 1 *.png --out pngs/
-        ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov
-        ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm
-       */
-
       let proximityDistance = 150;
       const proximitySet = new Set();
       const recordPlayerGeometry = document.querySelector('folk-shape:has(record-player)');

demo/semantic-zoom-in-a-canvas.html

@@ -153,9 +153,6 @@
       import { FolkShape } from '../src/folk-shape.ts';
       import { FolkConnection } from '../src/folk-connection.ts';
 
-      FolkShape.define();
-      FolkConnection.define();
-
       document.body.querySelectorAll('folk-shape').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
       document.body.querySelectorAll('folk-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));
       document.body.querySelectorAll('h2').forEach((el, i) => (el.style.viewTransitionName = `h${i}`));

demo/shape-collision-detection.html

@@ -32,8 +32,6 @@
       import { FolkShape } from '../src/folk-shape.ts';
       import { collisionDetection } from '../src/common/collision.ts';
 
-      FolkShape.define();
-
       const geometryElements = document.querySelectorAll('folk-shape');
 
       function handleCollision(e) {

demo/shapes-in-a-canvas.html

@@ -27,8 +27,6 @@
 
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
-
-      FolkShape.define();
     </script>
   </body>
 </html>

demo/space-morph.html

@@ -46,9 +46,6 @@
       import { FolkSpace } from '../src/folk-space.ts';
       import { FolkShape } from '../src/folk-shape.ts';
 
-      FolkSpace.define();
-      FolkShape.define();
-
       const space = document.getElementById('space');
       document.addEventListener('keydown', (event) => {
         if (event.key === 'Enter') {

demo/spreadsheet-graph-projection.html

@@ -170,10 +170,6 @@
       import { FolkConnection } from '../src/folk-connection.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
 
-      FolkShape.define();
-      FolkConnection.define();
-      FolkSpreadsheet.define();
-
       let isProjected = false;
       const button = document.querySelector('button');
 

demo/spreadsheet-map-propagator.html

@@ -171,11 +171,6 @@
       import { FolkEventPropagator } from '../src/folk-event-propagator.ts';
       import { FolkSpreadsheet } from '../src/folk-spreadsheet.ts';
 
-      FolkMap.define();
-      FolkShape.define();
-      FolkSpreadsheet.define();
-      FolkEventPropagator.define();
-
       window.round = (number, digits = 0) => {
         const base = Number('1'.padEnd(digits + 1, '0'));
         return Math.round(number * base) / base;

demo/sticky-html-arrow-between-iframes.html

@@ -46,9 +46,6 @@
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
       import { FolkRope } from '../src/folk-rope.ts';
-
-      FolkShape.define();
-      FolkRope.define();
     </script>
   </body>
 </html>

demo/sticky-html-arrow.html

@@ -37,9 +37,6 @@
       import { FolkShape } from '../src/folk-shape.ts';
       import { FolkConnection } from '../src/folk-connection.ts';
       import '../src/common/iframe-script.ts';
-
-      FolkShape.define();
-      FolkConnection.define();
     </script>
   </body>
 </html>

demo/sticky-html-rope.html

@@ -40,9 +40,6 @@
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
       import { FolkRope } from '../src/folk-rope.ts';
-
-      FolkShape.define();
-      FolkRope.define();
     </script>
   </body>
 </html>

demo/visualizing-set-relations.html

@@ -38,9 +38,6 @@
     <script type="module">
       import { FolkShape } from '../src/folk-shape.ts';
       import { FolkHull } from '../src/folk-hull.ts';
-
-      FolkShape.define();
-      FolkHull.define();
     </script>
   </body>
 </html>

demo/xanadu-link.html

@@ -203,70 +203,6 @@
     <script type="module">
       import { FolkXanadu } from '../src/folk-xanadu.ts';
       import { FolkShape } from '../src/folk-shape.ts';
-
-      FolkShape.define();
-      FolkXanadu.define();
-
-      // class AnimatedXanaduLink extends FolkXanadu {
-      //   sourceAnimation = null;
-      //   targetAnimation = null;
-
-      //   observeSource() {
-      //     super.observeSource();
-
-      //     this.sourceAnimation = this.animate(
-      //       [
-      //         { opacity: 0.3, offset: 0 },
-      //         { opacity: 1, offset: 0.1 },
-      //         { opacity: 1, offset: 0.9 },
-      //         { opacity: 0.3, offset: 1 },
-      //       ],
-      //       {
-      //         timeline: new ViewTimeline({
-      //           subject: this.sourceElement,
-      //         }),
-      //         rangeStart: 'entry 0%',
-      //         rangeEnd: 'exit 100%',
-      //       }
-      //     );
-      //   }
-
-      //   unobserveSource() {
-      //     super.unobserveSource();
-
-      //     this.sourceAnimation?.cancel();
-      //     this.sourceAnimation = null;
-      //   }
-
-      //   observeTarget() {
-      //     super.observeTarget();
-
-      //     this.targetAnimation = this.animate(
-      //       [
-      //         { opacity: 0.3, offset: 0 },
-      //         { opacity: 1, offset: 0.1 },
-      //         { opacity: 1, offset: 0.9 },
-      //         { opacity: 0.3, offset: 1 },
-      //       ],
-      //       {
-      //         timeline: new ViewTimeline({
-      //           subject: this.targetElement,
-      //         }),
-      //         rangeStart: 'entry 0%',
-      //         rangeEnd: 'exit 100%',
-      //       }
-      //     );
-      //   }
-
-      //   unobserveTarget() {
-      //     super.unobserveTarget();
-
-      //     this.targetAnimation?.cancel();
-      //     this.targetAnimation = null;
-      //   }
-      // }
-
-      // AnimatedXanaduLink.define();
     </script>
   </body>
 </html>

src/distance-field.ts

@@ -568,3 +568,7 @@ void main() {
   vec2 seedCoord = gl_FragCoord.xy / u_canvasSize;
   outColor = vec4(seedCoord, v_shapeID, 0.0);  // Seed coords (x, y), shape ID (z), initial distance (a)
 }`;
+
+if (!customElements.get('distance-field')) {
+  DistanceField.define();
+}

src/folk-connection.ts

@@ -85,3 +85,7 @@ export class FolkConnection extends AbstractArrow {
     this.style.backgroundColor = 'black';
   }
 }
+
+if (!customElements.get('folk-connection')) {
+  FolkConnection.define();
+}

src/folk-event-propagator.ts

@@ -237,3 +237,7 @@ function parseAst(functionBody: string) {
   console.log('Properties accessed on to:', Array.from(toProps));
   console.log('Properties accessed on from:', Array.from(fromProps));
 }
+
+if (!customElements.get('folk-event-propagator')) {
+  FolkEventPropagator.define();
+}

src/folk-hull.ts

@@ -110,3 +110,7 @@ export function makeHull(rects: DOMRectReadOnly[]): Point[] {
 
   return upperHull.concat(lowerHull);
 }
+
+if (!customElements.get('folk-hull')) {
+  FolkHull.define();
+}

src/folk-ink.ts

@@ -211,3 +211,7 @@ export class FolkInk extends HTMLElement {
     return d.join(' ');
   }
 }
+
+if (!customElements.get('folk-ink')) {
+  FolkInk.define();
+}

src/folk-llm.ts

@@ -102,3 +102,7 @@ declare global {
     ai: any;
   }
 }
+
+if (!customElements.get('folk-llm')) {
+  FolkLLM.define();
+}

src/folk-map.ts

@@ -94,3 +94,7 @@ export class FolkMap extends HTMLElement {
     }
   };
 }
+
+if (!customElements.get('folk-map')) {
+  FolkMap.define();
+}

src/folk-metronome.ts

@@ -69,3 +69,7 @@ export class FolkMetronome extends HTMLElement {
     this.textContent = this.#beat.toString();
   };
 }
+
+if (!customElements.get('folk-metronome')) {
+  FolkMetronome.define();
+}

src/folk-proximity.ts

@@ -192,3 +192,7 @@ export class FolkProximity extends HTMLElement {
     return null;
   }
 }
+
+if (!customElements.get('folk-proximity')) {
+  FolkProximity.define();
+}

src/folk-rope.ts

@@ -257,3 +257,7 @@ function applyConstraint(p1: RopePoint, p2: RopePoint) {
     p2.pos = Vector.sub(p2.pos, adjustment);
   }
 }
+
+if (!customElements.get('folk-rope')) {
+  FolkRope.define();
+}

src/folk-set.ts

@@ -78,3 +78,7 @@ export class FolkSet extends HTMLElement {
 
   update() {}
 }
+
+if (!customElements.get('folk-set')) {
+  FolkSet.define();
+}

src/folk-shape.ts

@@ -591,3 +591,7 @@ export class FolkShape extends HTMLElement {
     this.#dispatchTransformEvent(new Set(['width', 'height']));
   };
 }
+
+if (!customElements.get('folk-shape')) {
+  FolkShape.define();
+}

src/folk-space.ts

@@ -70,3 +70,7 @@ export class FolkSpace extends HTMLElement {
     space?.classList.toggle('rotate');
   }
 }
+
+if (!customElements.get('folk-space')) {
+  FolkSpace.define();
+}

src/folk-spreadsheet.ts

@@ -513,3 +513,7 @@ export class FolkSpreadSheetCell extends HTMLElement {
     }
   }
 }
+
+if (!customElements.get('folk-cell')) {
+  FolkSpreadSheetCell.define();
+}

src/folk-timer.ts

@@ -39,3 +39,7 @@ export class FolkTimer extends HTMLElement {
     this.textContent = (time / 1000).toFixed(1);
   };
 }
+
+if (!customElements.get('folk-timer')) {
+  FolkTimer.define();
+}

src/folk-toolbar.ts

@@ -128,3 +128,7 @@ export class FolkToolbar extends HTMLElement {
     return element.id;
   }
 }
+
+if (!customElements.get('folk-toolbar')) {
+  FolkToolbar.define();
+}

src/folk-weather.ts

@@ -68,3 +68,7 @@ export class FolkWeather extends HTMLElement {
     `;
   }
 }
+
+if (!customElements.get('folk-weather')) {
+  FolkWeather.define();
+}

src/folk-xanadu.ts

@@ -100,3 +100,7 @@ function computeInlineVertices(rects: DOMRect[]): Point[] {
 
   return vertices;
 }
+
+if (!customElements.get('folk-xanadu')) {
+  FolkXanadu.define();
+}