tutuca 0.11.0 → 0.11.2

package/dist/tutuca-components.js

@@ -23,13 +23,13 @@ var JsonBoolean = component({
       return `${base} ${this.value ? "text-success" : "text-warning"}`;
     }
   },
-  view: html`<span :class="$cssClass" @text="$text"></span>`,
   views: {
     // Decoy: cssClass() builds these at runtime, so they never appear as
     // literals the margaui scanner can find. Never rendered — registering
     // the view is enough for compileClassesToStyleText to emit their CSS.
     _margauiClasses: html`<p class="text-success text-warning"></p>`
-  }
+  },
+  view: html`<span :class="$cssClass" @text="$text"></span>`
 });
 var JsonNumber = component({
   name: "JsonNumber",
@@ -212,8 +212,8 @@ function makeValueInspector({ name, fromData }) {
   return component({
     name,
     fields: { value: null },
-    methods: valueWrapperMethods,
     statics: { fromData },
+    methods: valueWrapperMethods,
     view: valueWrapperView
   });
 }
@@ -389,17 +389,6 @@ var JsSetItem = component2({
 var JsMap = component2({
   name: "JsMap",
   fields: compositeFields,
-  methods: {
-    ...compositeMethods,
-    typeText() {
-      return "Map";
-    },
-    countText() {
-      return `(${this.items.length})`;
-    }
-  },
-  receive: compositeReceive,
-  alter: compositeAlter,
   statics: {
     fromData(map, recurse) {
       const items = [];
@@ -409,15 +398,10 @@ var JsMap = component2({
       return this.make({ items });
     }
   },
-  view: compositeView
-});
-var JsSet = component2({
-  name: "JsSet",
-  fields: compositeFields,
   methods: {
     ...compositeMethods,
     typeText() {
-      return "Set";
+      return "Map";
     },
     countText() {
       return `(${this.items.length})`;
@@ -425,28 +409,33 @@ var JsSet = component2({
   },
   receive: compositeReceive,
   alter: compositeAlter,
+  view: compositeView
+});
+var JsSet = component2({
+  name: "JsSet",
+  fields: compositeFields,
   statics: {
     fromData(set, recurse) {
       const items = [...set].map((v) => JsSetItem.make({ child: recurse(v) }));
       return this.make({ items });
     }
   },
-  view: compositeView
-});
-var JsClassInstance = component2({
-  name: "JsClassInstance",
-  fields: { ...compositeFields, className: "Object" },
   methods: {
     ...compositeMethods,
     typeText() {
-      return this.className;
+      return "Set";
     },
     countText() {
-      return `{${this.items.length}}`;
+      return `(${this.items.length})`;
     }
   },
   receive: compositeReceive,
   alter: compositeAlter,
+  view: compositeView
+});
+var JsClassInstance = component2({
+  name: "JsClassInstance",
+  fields: { ...compositeFields, className: "Object" },
   statics: {
     fromData(obj, recurse) {
       const className = obj.constructor?.name || "Object";
@@ -460,6 +449,17 @@ var JsClassInstance = component2({
       return this.make({ className, items });
     }
   },
+  methods: {
+    ...compositeMethods,
+    typeText() {
+      return this.className;
+    },
+    countText() {
+      return `{${this.items.length}}`;
+    }
+  },
+  receive: compositeReceive,
+  alter: compositeAlter,
   view: compositeView
 });
 function classifyJsExtra(data, recurse) {
@@ -482,11 +482,11 @@ function classifyJsExtra(data, recurse) {
       errorName: data.name ?? "Error",
       message: data.message ?? ""
     });
-  if (data instanceof Map) return JsMap.Class.fromData(data, recurse);
-  if (data instanceof Set) return JsSet.Class.fromData(data, recurse);
+  if (data instanceof Map) return JsMap.fromData(data, recurse);
+  if (data instanceof Set) return JsSet.fromData(data, recurse);
   const proto = Object.getPrototypeOf(data);
   if (proto !== Object.prototype && proto !== null) {
-    return JsClassInstance.Class.fromData(data, recurse);
+    return JsClassInstance.fromData(data, recurse);
   }
   return null;
 }
@@ -655,7 +655,7 @@ function collectBadges(schema) {
 function valueBranch(label, value) {
   return SchemaBranch.make({
     label,
-    child: JsonViewer.Class.fromData(value),
+    child: JsonViewer.fromData(value),
     labelClass: "text-info"
   });
 }
@@ -735,6 +735,13 @@ var SchemaBranch = component3({
       return `font-mono text-sm ${this.labelClass}`;
     }
   },
+  views: {
+    // Decoy: labelClass colours are chosen in JS, so they never appear as
+    // literals for the margaui scanner.
+    _margauiClasses: html3`<p
+      class="text-accent text-secondary text-info text-error"
+    ></p>`
+  },
   // `contents` so the label cell and value cell land directly in the parent's
   // grid, aligning values across rows.
   view: html3`<div class="contents">
@@ -743,25 +750,11 @@ var SchemaBranch = component3({
       <span class="text-base-content/30">:</span>
     </span>
     <x render=".child"></x>
-  </div>`,
-  views: {
-    // Decoy: labelClass colours are chosen in JS, so they never appear as
-    // literals for the margaui scanner.
-    _margauiClasses: html3`<p
-      class="text-accent text-secondary text-info text-error"
-    ></p>`
-  }
+  </div>`
 });
 var SchemaScalar = component3({
   name: "SchemaScalar",
   fields: schemaNodeFields,
-  methods: schemaNodeMethods({
-    countText() {
-      return "";
-    }
-  }),
-  receive: compositeReceive,
-  alter: compositeAlter,
   statics: {
     fromData(schema, recurse) {
       return this.make({
@@ -772,18 +765,18 @@ var SchemaScalar = component3({
       });
     }
   },
-  view: makeSchemaView("text-success")
-});
-var SchemaObject = component3({
-  name: "SchemaObject",
-  fields: schemaNodeFields,
   methods: schemaNodeMethods({
     countText() {
-      return this.items.length > 0 ? `{${this.items.length}}` : "";
+      return "";
     }
   }),
   receive: compositeReceive,
   alter: compositeAlter,
+  view: makeSchemaView("text-success")
+});
+var SchemaObject = component3({
+  name: "SchemaObject",
+  fields: schemaNodeFields,
   statics: {
     fromData(schema, recurse) {
       const required = Array.isArray(schema.required) ? schema.required : [];
@@ -837,18 +830,18 @@ var SchemaObject = component3({
       });
     }
   },
-  view: makeSchemaView("text-primary")
-});
-var SchemaArray = component3({
-  name: "SchemaArray",
-  fields: schemaNodeFields,
   methods: schemaNodeMethods({
     countText() {
-      return this.items.length > 0 ? `[${this.items.length}]` : "";
+      return this.items.length > 0 ? `{${this.items.length}}` : "";
     }
   }),
   receive: compositeReceive,
   alter: compositeAlter,
+  view: makeSchemaView("text-primary")
+});
+var SchemaArray = component3({
+  name: "SchemaArray",
+  fields: schemaNodeFields,
   statics: {
     fromData(schema, recurse) {
       const items = [];
@@ -884,22 +877,22 @@ var SchemaArray = component3({
       });
     }
   },
-  view: makeSchemaView("text-primary")
-});
-var SchemaEnum = component3({
-  name: "SchemaEnum",
-  fields: schemaNodeFields,
   methods: schemaNodeMethods({
     countText() {
-      return this.items.length > 0 ? `(${this.items.length})` : "";
+      return this.items.length > 0 ? `[${this.items.length}]` : "";
     }
   }),
   receive: compositeReceive,
   alter: compositeAlter,
+  view: makeSchemaView("text-primary")
+});
+var SchemaEnum = component3({
+  name: "SchemaEnum",
+  fields: schemaNodeFields,
   statics: {
     fromData(schema, recurse) {
       const members = Array.isArray(schema.enum) ? schema.enum : [];
-      const items = members.map((v) => JsonViewer.Class.fromData(v));
+      const items = members.map((v) => JsonViewer.fromData(v));
       items.push(...collectExtras(schema, recurse, "enum"));
       return this.make({
         typeLabel: "enum",
@@ -909,6 +902,13 @@ var SchemaEnum = component3({
       });
     }
   },
+  methods: schemaNodeMethods({
+    countText() {
+      return this.items.length > 0 ? `(${this.items.length})` : "";
+    }
+  }),
+  receive: compositeReceive,
+  alter: compositeAlter,
   // list layout: each enum member is a single value rendered one per line.
   view: makeSchemaView("text-info", LIST_BODY)
 });
@@ -917,7 +917,7 @@ var SchemaConst = component3({
   fields: { value: null },
   statics: {
     fromData(schema) {
-      return this.make({ value: JsonViewer.Class.fromData(schema.const) });
+      return this.make({ value: JsonViewer.fromData(schema.const) });
     }
   },
   view: html3`<span
@@ -931,13 +931,6 @@ var SchemaConst = component3({
 var SchemaCombinator = component3({
   name: "SchemaCombinator",
   fields: schemaNodeFields,
-  methods: schemaNodeMethods({
-    countText() {
-      return this.items.length > 0 ? `(${this.items.length})` : "";
-    }
-  }),
-  receive: compositeReceive,
-  alter: compositeAlter,
   statics: {
     fromData(schema, recurse) {
       const items = [];
@@ -957,6 +950,13 @@ var SchemaCombinator = component3({
       });
     }
   },
+  methods: schemaNodeMethods({
+    countText() {
+      return this.items.length > 0 ? `(${this.items.length})` : "";
+    }
+  }),
+  receive: compositeReceive,
+  alter: compositeAlter,
   // list layout: members are full schema nodes listed one per line, no keys.
   view: makeSchemaView("text-accent", LIST_BODY)
 });
@@ -1053,12 +1053,12 @@ var SchemaBoolean = component3({
       return `${base} ${this.value ? "text-success" : "text-error"}`;
     }
   },
-  view: html3`<span :class="$cssClass" @text="$text"></span>`,
   views: {
     // Decoy: cssClass() builds these at runtime, so they never appear as
     // literals the margaui scanner can find.
     _margauiClasses: html3`<p class="text-success text-error"></p>`
-  }
+  },
+  view: html3`<span :class="$cssClass" @text="$text"></span>`
 });
 var SchemaRef = component3({
   name: "SchemaRef",
@@ -1075,21 +1075,21 @@ var SchemaViewer = component3({
     rawSchema: null,
     showRaw: false
   },
-  methods: {
-    ...valueWrapperMethods,
-    toggleLabel() {
-      return this.showRaw ? "high-level view" : "raw schema";
-    }
-  },
   statics: {
     fromData(schema) {
       return this.make({
         value: dispatch2(schema),
-        raw: JsonViewer.Class.fromData(schema),
+        raw: JsonViewer.fromData(schema),
         rawSchema: schema
       });
     }
   },
+  methods: {
+    ...valueWrapperMethods,
+    toggleLabel() {
+      return this.showRaw ? "high-level view" : "raw schema";
+    }
+  },
   receive: {
     toggleShowRaw(draft) {
       draft.showRaw = !draft.showRaw;
@@ -1118,18 +1118,18 @@ function hasArrayKeywords(schema) {
 }
 function classifySchema(schema, recurse = classifySchema) {
   if (schema === true || schema === false) return SchemaBoolean.make({ value: schema });
-  if (schema === null || typeof schema !== "object") return JsonViewer.Class.fromData(schema);
+  if (schema === null || typeof schema !== "object") return JsonViewer.fromData(schema);
   if (typeof schema.$ref === "string") return SchemaRef.make({ target: schema.$ref });
-  if (hasObjectKeywords(schema)) return SchemaObject.Class.fromData(schema, recurse);
-  if (hasArrayKeywords(schema)) return SchemaArray.Class.fromData(schema, recurse);
-  if (Array.isArray(schema.enum)) return SchemaEnum.Class.fromData(schema, recurse);
-  if ("const" in schema) return SchemaConst.Class.fromData(schema, recurse);
+  if (hasObjectKeywords(schema)) return SchemaObject.fromData(schema, recurse);
+  if (hasArrayKeywords(schema)) return SchemaArray.fromData(schema, recurse);
+  if (Array.isArray(schema.enum)) return SchemaEnum.fromData(schema, recurse);
+  if ("const" in schema) return SchemaConst.fromData(schema, recurse);
   if (schema.allOf || schema.anyOf || schema.oneOf)
-    return SchemaCombinator.Class.fromData(schema, recurse);
-  if (schema.not !== void 0) return SchemaNot.Class.fromData(schema, recurse);
+    return SchemaCombinator.fromData(schema, recurse);
+  if (schema.not !== void 0) return SchemaNot.fromData(schema, recurse);
   if (schema.if !== void 0 || schema.then !== void 0 || schema.else !== void 0)
-    return SchemaConditional.Class.fromData(schema, recurse);
-  return SchemaScalar.Class.fromData(schema, recurse);
+    return SchemaConditional.fromData(schema, recurse);
+  return SchemaScalar.fromData(schema, recurse);
 }
 var dispatch2 = chain(classifySchema);
 function getComponents3() {
@@ -1160,7 +1160,7 @@ import { component as component7, html as html7 } from "tutuca";
 // src/components/tutuca/component-inspector.js
 import { component as component4, html as html4 } from "tutuca";
 function introspectComponent(comp) {
-  const { fields, methods } = comp.Class.getMetaClass();
+  const { fields, methods } = comp;
   return {
     name: comp.name,
     id: comp.id,
@@ -1269,20 +1269,6 @@ var CompSection = component4({
 var ComponentInspector = component4({
   name: "ComponentInspector",
   fields: { compName: "", compId: 0, sections: [] },
-  methods: {
-    idText() {
-      return `#${this.compId}`;
-    }
-  },
-  intent: {
-    toggleAllSections(draft, state) {
-      for (const section of draft.sections) section.isExpanded = state;
-    },
-    toggleAllViews(draft, state) {
-      const section = draft.sections.find((candidate) => candidate.label === "Views");
-      if (section) for (const view of section.items) view.isExpanded = state;
-    }
-  },
   statics: {
     fromData(comp) {
       const d = introspectComponent(comp);
@@ -1299,7 +1285,7 @@ var ComponentInspector = component4({
           (f) => CompField.make({
             name: f.name,
             typeName: f.type,
-            child: DataInspector.Class.fromData(f.defaultValue)
+            child: DataInspector.fromData(f.defaultValue)
           })
         ),
         true
@@ -1316,6 +1302,20 @@ var ComponentInspector = component4({
       return this.make({ compName: d.name, compId: d.id, sections });
     }
   },
+  methods: {
+    idText() {
+      return `#${this.compId}`;
+    }
+  },
+  intent: {
+    toggleAllSections(draft, state) {
+      for (const section of draft.sections) section.isExpanded = state;
+    },
+    toggleAllViews(draft, state) {
+      const section = draft.sections.find((candidate) => candidate.label === "Views");
+      if (section) for (const view of section.items) view.isExpanded = state;
+    }
+  },
   view: html4`<div class="font-mono text-sm leading-tight flex flex-col gap-1">
     <div class="inline-flex items-center gap-2">
       <span class="font-semibold" @text=".compName"></span>
@@ -1459,7 +1459,7 @@ function buildFinding(f) {
     level: f.level ?? "",
     message: lintMessage(f.id, info),
     suggestion: suggestionText(f.suggestion),
-    detail: DataInspector.Class.fromData({ id: f.id, info, context: ctx })
+    detail: DataInspector.fromData({ id: f.id, info, context: ctx })
   });
 }
 var LintComponent = component5({
@@ -1493,26 +1493,6 @@ var LintReport = component5({
     clean: true,
     components: []
   },
-  methods: {
-    errText() {
-      return `${this.errors} error${this.errors === 1 ? "" : "s"}`;
-    },
-    warnText() {
-      return `${this.warnings} warning${this.warnings === 1 ? "" : "s"}`;
-    },
-    hintText() {
-      return `${this.hints} hint${this.hints === 1 ? "" : "s"}`;
-    },
-    hasErrors() {
-      return this.errors > 0;
-    },
-    hasWarnings() {
-      return this.warnings > 0;
-    },
-    hasHints() {
-      return this.hints > 0;
-    }
-  },
   statics: {
     fromData(report, { title = "Lint", path = "" } = {}) {
       const comps = report?.components ?? [];
@@ -1551,6 +1531,26 @@ var LintReport = component5({
       });
     }
   },
+  methods: {
+    errText() {
+      return `${this.errors} error${this.errors === 1 ? "" : "s"}`;
+    },
+    warnText() {
+      return `${this.warnings} warning${this.warnings === 1 ? "" : "s"}`;
+    },
+    hintText() {
+      return `${this.hints} hint${this.hints === 1 ? "" : "s"}`;
+    },
+    hasErrors() {
+      return this.errors > 0;
+    },
+    hasWarnings() {
+      return this.warnings > 0;
+    },
+    hasHints() {
+      return this.hints > 0;
+    }
+  },
   // Decoy so the runtime-absent soft tally colours are emitted.
   views: {
     _palette: html5`<span
@@ -1736,7 +1736,7 @@ function buildResultNode(node) {
     status,
     durationMs: node.durationMs ?? 0,
     message: err?.message ?? "",
-    detail: hasDiff ? DataInspector.Class.fromData({ expected: err.expected, actual: err.actual }) : null
+    detail: hasDiff ? DataInspector.fromData({ expected: err.expected, actual: err.actual }) : null
   });
   return {
     comp,
@@ -1756,29 +1756,6 @@ var TestReport = component6({
     hasCounts: false,
     suites: []
   },
-  methods: {
-    passText() {
-      return `✓ ${this.pass}`;
-    },
-    failText() {
-      return `✗ ${this.fail}`;
-    },
-    skipText() {
-      return `○ ${this.skip}`;
-    },
-    hasFailures() {
-      return this.hasCounts && this.fail > 0;
-    },
-    hasSkips() {
-      return this.hasCounts && this.skip > 0;
-    }
-  },
-  intent: {
-    // ctrl/cmd-click on any suite expands/collapses the whole tree at once.
-    toggleAll(draft, state) {
-      for (const suite of draft.suites) setSuiteTreeExpanded(suite, state);
-    }
-  },
   statics: {
     fromTests(source, { title = "Tests", path = "" } = {}) {
       const suites = Array.isArray(source) ? source : source?.suites ?? [];
@@ -1803,6 +1780,29 @@ var TestReport = component6({
       });
     }
   },
+  methods: {
+    passText() {
+      return `✓ ${this.pass}`;
+    },
+    failText() {
+      return `✗ ${this.fail}`;
+    },
+    skipText() {
+      return `○ ${this.skip}`;
+    },
+    hasFailures() {
+      return this.hasCounts && this.fail > 0;
+    },
+    hasSkips() {
+      return this.hasCounts && this.skip > 0;
+    }
+  },
+  intent: {
+    // ctrl/cmd-click on any suite expands/collapses the whole tree at once.
+    toggleAll(draft, state) {
+      for (const suite of draft.suites) setSuiteTreeExpanded(suite, state);
+    }
+  },
   view: html6`<div class="font-mono text-sm leading-tight flex flex-col gap-1">
     <div class="flex items-center gap-2 flex-wrap">
       <span class="font-semibold" @text=".title"></span>
@@ -1839,45 +1839,45 @@ var fieldsView = makeCompositeView({
 var InstanceFields = component7({
   name: "InstanceFields",
   fields: { ...compositeFields, typeName: "" },
-  methods: {
-    ...compositeMethods,
-    typeText() {
-      return this.typeName;
-    },
-    countText() {
-      return `{${this.items.length}}`;
-    }
-  },
-  receive: compositeReceive,
-  alter: compositeAlter,
   statics: {
     fromData(instance, comp) {
       const d = introspectComponent(comp);
       const items = d.fields.map(
         (f) => JsonProperty.make({
           key: f.name,
-          child: DataInspector.Class.fromData(instance[f.name])
+          child: DataInspector.fromData(instance[f.name])
         })
       );
       return this.make({ typeName: d.name, items, isExpanded: true });
     }
   },
+  methods: {
+    ...compositeMethods,
+    typeText() {
+      return this.typeName;
+    },
+    countText() {
+      return `{${this.items.length}}`;
+    }
+  },
+  receive: compositeReceive,
+  alter: compositeAlter,
   view: fieldsView
 });
 var InstanceInspector = makeValueInspector({
   name: "InstanceInspector",
   fromData(instance, comp) {
-    const value = comp && isComponentInstance(instance) ? InstanceFields.Class.fromData(instance, comp) : DataInspector.Class.fromData(instance);
+    const value = comp && isComponentInstance(instance) ? InstanceFields.fromData(instance, comp) : DataInspector.fromData(instance);
     return this.make({ value });
   }
 });
 function asTestView(tests) {
   if (tests == null) return null;
-  return isComponentInstance(tests) ? tests : TestReport.Class.fromResults(tests);
+  return isComponentInstance(tests) ? tests : TestReport.fromResults(tests);
 }
 function asLintView(lint) {
   if (lint == null) return null;
-  return isComponentInstance(lint) ? lint : LintReport.Class.fromData(lint);
+  return isComponentInstance(lint) ? lint : LintReport.fromData(lint);
 }
 var InstanceExplorer = component7({
   name: "InstanceExplorer",
@@ -1896,8 +1896,8 @@ var InstanceExplorer = component7({
       const testView = asTestView(tests);
       const lintView = asLintView(lint);
       return this.make({
-        instanceView: InstanceInspector.Class.fromData(instance, comp),
-        componentView: comp ? ComponentInspector.Class.fromData(comp) : null,
+        instanceView: InstanceInspector.fromData(instance, comp),
+        componentView: comp ? ComponentInspector.fromData(comp) : null,
         testView,
         lintView,
         hasComponent: !!comp,
@@ -2007,7 +2007,7 @@ var ActivityEntry = component8({
   >
     <div class="flex items-center gap-2 flex-wrap">
       <span
-        title="How this was dispatched: receive (send), bubble, response, input, or request"
+        title="How this was dispatched: receive (send) or intent"
         class="badge badge-sm badge-neutral"
         @text=".kind"
       ></span>
@@ -2075,7 +2075,7 @@ function pathKeysLabel(pathKeys) {
 function makeInspect(app) {
   return (value) => {
     const comp = isComponentInstance(value) ? app.comps.getCompFor(value) : null;
-    return InstanceInspector.Class.fromData(value, comp);
+    return InstanceInspector.fromData(value, comp);
   };
 }
 function recordToEntry(record, { inspect, pathLabel = pathKeysLabel } = {}) {
@@ -2103,7 +2103,7 @@ function getComponents8() {
 async function buildInspectorViews(value, scope, { getTests = null, components = [], dev = null, name } = {}) {
   const comp = isComponentInstance(value) ? scope.getCompFor(value) : null;
   const out = {
-    instanceView: InstanceInspector.Class.fromData(value, scope.getCompFor(value)),
+    instanceView: InstanceInspector.fromData(value, scope.getCompFor(value)),
     componentView: null,
     lintView: null,
     testView: null,
@@ -2113,11 +2113,11 @@ async function buildInspectorViews(value, scope, { getTests = null, components =
     hasTest: false
   };
   if (comp) {
-    out.componentView = ComponentInspector.Class.fromData(comp);
+    out.componentView = ComponentInspector.fromData(comp);
     out.hasComponent = true;
     if (dev) {
       const findings = dev.shadowCheckComponent(comp);
-      out.lintView = LintReport.Class.fromData({
+      out.lintView = LintReport.fromData({
         components: [{ componentName: comp.name, findings }]
       });
       out.hasLint = true;
@@ -2128,7 +2128,7 @@ async function buildInspectorViews(value, scope, { getTests = null, components =
           expect: dev.expect,
           name: name === void 0 ? comp.name : name
         });
-        out.testView = TestReport.Class.fromResults(report);
+        out.testView = TestReport.fromResults(report);
         out.hasTest = true;
       }
     }