tungsten 0.7.0 → 0.7.2

package/dist/testing/contentToString.js

@@ -0,0 +1,105 @@
+import { ContentNodeIsArray, ContentNodeIsElement, ContentNodeIsFragment, ContentNodeIsLiteral, IsContentNode } from '../ContentNode.js';
+import { $fragment, $key, $props, $type } from '../contentNodeSymbols.js';
+import { componentTypeIdentityKey } from '../hmr/componentIdentity.js';
+import { display } from './display.js';
+import { $passedChildren } from './resolveContent.js';
+const indent = '    ';
+const width = 100;
+/**
+ * The tree as JSX. A component host() resolved has its output under it, marked ⤵, and the children
+ * it was passed as a prop; one unresolved holds its passed children, as written.
+ */
+export function contentToString(content, options = {}) {
+  const lines = contentLines(content, '', options);
+  if (lines.length > 0) return lines.join('\n');
+  // a tree that renders nothing says what it was: null and false are different returns
+  return ContentNodeIsFragment(content) ? '<></>' : `{${display(content)}}`;
+}
+// adjacent text is one line, as the page shows it: JSX splits `Hi, {name}.` into three
+function contentLines(content, at, options) {
+  const lines = [];
+  let text;
+  for (const node of rendered(content, options)) {
+    if (ContentNodeIsLiteral(node)) text = (text ?? '') + String(node);else {
+      if (text !== undefined) lines.push(at + textLine(text));
+      text = undefined;
+      lines.push(...elementLines(node, at, options));
+    }
+  }
+  if (text !== undefined) lines.push(at + textLine(text));
+  return lines;
+}
+// quoted where spaces at an edge, or no text at all, would not show
+const textLine = text => text !== '' && text === text.trim() ? text : `{${display(text)}}`;
+// arrays flattened, and fragments unless asked for, as neither renders anything of its own;
+// null, undefined and booleans render nothing
+function rendered(content, options) {
+  if (ContentNodeIsArray(content)) return content.flatMap(each => rendered(each, options));
+  if (ContentNodeIsFragment(content) && options.fragments !== true) {
+    return rendered(content[$props].children, options);
+  }
+  return ContentNodeIsLiteral(content) || ContentNodeIsElement(content) ? [content] : [];
+}
+function elementLines(node, at, options) {
+  const type = node[$type];
+  if (type === $fragment) {
+    const body = contentLines(node[$props].children, at + indent, options);
+    return body.length === 0 ? [`${at}<></>`] : [`${at}<>`, ...body, `${at}</>`];
+  }
+  const name = typeof type === 'string' ? type : componentTypeIdentityKey(type);
+  const {
+    children,
+    ...props
+  } = node[$props];
+  const key = node[$key];
+  const attributes = [...(key === undefined || key === null ? [] : [attribute('key', key)]), ...Object.entries(props).map(([prop, value]) => attribute(prop, value))];
+  const resolved = $passedChildren in node;
+  const passed = resolved && IsContentNode(node[$passedChildren]) ? node[$passedChildren] : null;
+  const passedNodes = rendered(passed, options);
+  const passedLines = passedNodes.every(each => ContentNodeIsLiteral(each)) ? [] // none, or text, which is a prop like any other
+  : options.children === true ? elementsLines(passed, at + indent, options) : [];
+  if (passedNodes.length > 0 && passedLines.length === 0) {
+    attributes.push(options.children === true ? attribute('children', passedNodes.join('')) : 'children={...}');
+  }
+  const body = contentLines(children, at + indent, options);
+  const opened = end => passedLines.length === 0 ? tag(`<${name}`, attributes, end, at) : [...tag(`<${name}`, attributes, ' children={', at), ...passedLines, `${at}}${end}`];
+  if (body.length === 0) return opened(' />');
+  const close = `</${name}>`;
+  if (resolved) return [...opened('> ⤵'), ...body, at + close];
+  const text = rendered(children, options).every(each => ContentNodeIsLiteral(each));
+  const open = opened('>');
+  const inline = `${open.at(-1) ?? ''}${body[0]?.trim() ?? ''}${close}`;
+  if (text && body.length === 1 && inline.length <= width) return [...open.slice(0, -1), inline];
+  return [...open, ...body, at + close];
+}
+// passed children as one JSX expression: an element, or a fragment round several
+function elementsLines(content, at, options) {
+  const [only, ...more] = rendered(content, options);
+  if (only !== undefined && more.length === 0 && !ContentNodeIsLiteral(only)) {
+    return elementLines(only, at, options);
+  }
+  return [`${at}<>`, ...contentLines(content, at + indent, options), `${at}</>`];
+}
+// an opening tag, its attributes wrapped to the width, each line after the first indented
+function tag(start, attributes, end, at) {
+  const lines = [];
+  let line = at + start;
+  let empty = true; // nothing yet on this line to break after
+  attributes.forEach((each, i) => {
+    const after = i === attributes.length - 1 ? end : '';
+    if (!empty && `${line} ${each}${after}`.length > width) {
+      lines.push(line);
+      line = at + indent + each;
+    } else line += ` ${each}`;
+    empty = false;
+  });
+  return [...lines, line + end];
+}
+function attribute(name, value) {
+  if (typeof value === 'string') return `${name}=${display(value)}`;
+  // ƒ and the name, not source: an inline arrow takes its prop's name, a bound one 'bound x'
+  if (typeof value === 'function') {
+    return `${name}={ƒ${value.name === '' ? '' : ` ${value.name}`}}`;
+  }
+  return `${name}={${display(value)}}`;
+}

package/dist/testing/display.d.ts

@@ -0,0 +1,2 @@
+export declare function display(value: unknown, depth?: number): string;
+//# sourceMappingURL=display.d.ts.map

package/dist/testing/display.js

@@ -0,0 +1,37 @@
+import { ContentNodeIsElement, IsContentNode } from '../ContentNode.js';
+import { $fragment, $type } from '../contentNodeSymbols.js';
+import { componentTypeIdentityKey } from '../hmr/componentIdentity.js';
+const displayed = 5; // entries shown of an array or object
+const displayDepth = 2;
+// a value as a failure message shows it; arrays and objects shortened by length and depth
+export function display(value, depth = 0) {
+  if (typeof value === 'string') return `'${value}'`;
+  if (typeof value === 'function') {
+    return value.name === '' ? '[function]' : `[function ${value.name}]`;
+  }
+  if (typeof value !== 'object' || value === null) {
+    return String(value); // a number, boolean, bigint, symbol, null or undefined
+  }
+  if (value instanceof Date) {
+    return isNaN(value.getTime()) ? 'Date(invalid)' : `Date(${value.toISOString()})`;
+  }
+  // an element held as a value, as in a prop: by tag or name, as its symbol keys hide it as data
+  if ($type in value && IsContentNode(value) && ContentNodeIsElement(value)) {
+    const type = value[$type];
+    if (type === $fragment) return '<>';
+    return `<${typeof type === 'string' ? type : componentTypeIdentityKey(type)}>`;
+  }
+  const shown = entries => depth >= displayDepth ? '…' : entries.slice(0, displayed).join(', ') + (entries.length > displayed ? ', …' : '');
+  if (Array.isArray(value)) {
+    return value.length === 0 ? '[]' : `[${shown(value.map(each => display(each, depth + 1)))}]`;
+  }
+  if (value instanceof Set) {
+    return `Set { ${shown([...value].map(each => display(each, depth + 1)))} }`;
+  }
+  if (value instanceof Map) {
+    const pairs = [...value].map(([key, each]) => `${display(key, depth + 1)} => ${display(each, depth + 1)}`);
+    return `Map { ${shown(pairs)} }`;
+  }
+  const entries = Object.entries(value).map(([key, each]) => `${key}: ${display(each, depth + 1)}`);
+  return entries.length === 0 ? '{}' : `{ ${shown(entries)} }`;
+}

package/dist/testing/ensure.d.ts

@@ -1,6 +1,7 @@
 import type { ContentNode } from '../ContentNode.js';
-type Kind = 'text' | 'interruptedText' | ElementKind | 'fragment' | 'className' | 'id' | 'children' | `prop:${string}`;
-type ElementKind = `html:${string}` | `component:${string}`;
+type Kind = 'text' | 'interruptedText' | ElementKind | 'fragment' | 'className' | 'id' | 'children' | `prop:${string}` | 'elements';
+type ElementKind = `html:${string}` | `component:${string}` | SelectKind;
+type SelectKind = `select:${string}`;
 type Test = (seen: unknown) => boolean;
 type Failure = {
     actual: unknown;
@@ -39,51 +40,60 @@ type Props = Record<string, unknown> & {
     children?: ContentNode;
 };
 type WithFn = (props: Props) => boolean;
-type Quantifiers = {
-    readonly no: Ends;
-    readonly none: Ends;
-    readonly one: Ends;
-    readonly two: Ends;
-    readonly three: Ends;
-    readonly count: (num: number) => Ends;
-    readonly a: Ends;
-    readonly an: Ends;
-    readonly some: Ends;
-    readonly all: Ends;
+declare const property: unique symbol;
+type PropertyFact = Fact & {
+    readonly [property]: true;
 };
-type StringEnd = ((text: string) => Fact) & {
-    contains: (substring: string) => Fact;
-    matches: (regex: RegExp) => Fact;
+type Made<Scope extends Fact | undefined, Own extends Fact> = [Scope] extends [Fact] ? Scope : Own;
+type Quantifiers<E> = {
+    readonly no: E;
+    readonly none: E;
+    readonly one: E;
+    readonly two: E;
+    readonly three: E;
+    readonly count: (num: number) => E;
+    readonly a: E;
+    readonly an: E;
+    readonly some: E;
+    readonly all: E;
 };
-type ElementEnd = Fact & {
-    with: ((facts: Fact[] | WithFn) => Fact) & Quantifiers & {
-        children: ((facts: Fact[]) => Fact) & Quantifiers;
+type StringEnd<F extends Fact> = ((text: string) => F) & {
+    contains: (substring: string) => F;
+    matches: (regex: RegExp) => F;
+};
+type ElementEnd<F extends Fact> = F & {
+    with: ((facts: PropertyFact[] | WithFn) => F) & Quantifiers<PropertyEnds<F>> & {
+        children: ((facts: Fact[]) => F) & Quantifiers<Ends<F>>;
     };
 };
-type Ends = {
-    text: StringEnd;
-    textCi: StringEnd;
-    interruptedText: StringEnd;
-    html: (tag: string) => ElementEnd;
-    component: (name: string) => ElementEnd;
-    fragment: () => Fact;
-    className: (className?: string) => Fact;
-    id: (id?: string) => Fact;
-    prop: (prop: string) => Fact & {
-        is: (value: unknown) => Fact;
-        contains: (substring: string) => Fact;
-        matches: (regex: RegExp) => Fact;
-        exact: (value: unknown) => Fact;
-        subset: (shape: unknown) => Fact;
-        duck: (shape: unknown) => Fact;
-        content: () => Fact & {
-            with: ((facts: Fact[]) => Fact) & Quantifiers;
-        };
+type PropEnd<F extends Fact> = F & {
+    is: (value: unknown) => F;
+    contains: (substring: string) => F;
+    matches: (regex: RegExp) => F;
+    exact: (value: unknown) => F;
+    subset: (shape: unknown) => F;
+    duck: (shape: unknown) => F;
+    content: () => F & {
+        with: ((facts: Fact[]) => F) & Quantifiers<Ends<F>>;
     };
 };
-declare const _ensure: typeof ensure & Quantifiers;
+type Ends<Scope extends Fact | undefined = undefined> = {
+    text: StringEnd<Made<Scope, Fact>>;
+    textCi: StringEnd<Made<Scope, Fact>>;
+    interruptedText: StringEnd<Made<Scope, PropertyFact>>;
+    html: (tag: string) => ElementEnd<Made<Scope, Fact>>;
+    component: (name: string) => ElementEnd<Made<Scope, Fact>>;
+    select: (selector: string) => ElementEnd<Made<Scope, Fact>>;
+    fragment: () => Made<Scope, Fact>;
+    className: (className?: string) => Made<Scope, PropertyFact>;
+    id: (id?: string) => Made<Scope, PropertyFact>;
+    prop: (prop: string) => PropEnd<Made<Scope, PropertyFact>>;
+};
+declare const propertyEnds: readonly ["interruptedText", "className", "id", "prop"];
+type PropertyEnds<F extends Fact> = Pick<Ends<F>, typeof propertyEnds[number]>;
+declare const _ensure: typeof ensure & Quantifiers<Ends<undefined>>;
 export { _ensure as ensure };
-export declare const no: Ends, none: Ends, one: Ends, two: Ends, three: Ends, a: Ends, an: Ends, some: Ends, all: Ends, count: (num: number) => Ends;
+export declare const no: Ends<undefined>, none: Ends<undefined>, one: Ends<undefined>, two: Ends<undefined>, three: Ends<undefined>, a: Ends<undefined>, an: Ends<undefined>, some: Ends<undefined>, all: Ends<undefined>, count: (num: number) => Ends<undefined>;
 export declare class EnsureError extends Error {
     actual: unknown;
     expected: unknown;
@@ -93,7 +103,7 @@ export declare class EnsureError extends Error {
     constructor(message: string, actual: unknown, expected: unknown, operator: string, showDiff: boolean);
 }
 declare function ensure(tree: ContentNode, facts: Fact[], options?: EnsureOptions): void;
-export declare const children: ((facts: Fact[]) => Fact) & Quantifiers;
+export declare const children: ((facts: Fact[]) => PropertyFact) & Quantifiers<Ends<PropertyFact>>;
 type BuiltFact = {
     kind: Kind;
     test: Test;
@@ -105,4 +115,5 @@ type BuiltFact = {
     operator: string;
 };
 type Sighting = ['text', string] | [Exclude<Kind, 'text'>, unknown];
+export declare const cssSelectBundle: string;
 //# sourceMappingURL=ensure.d.ts.map