@yak/solid 0.2.0 → 0.3.0

package/runtime/styled.ts

@@ -43,7 +43,7 @@ import type {
   StaticStyleProcessor,
   StyleObject,
 } from "./publicStyledApi.js";
-import { $PROXY, createMemo } from "solid-js";
+import { $PROXY, createMemo, merge, omit } from "solid-js";
 // the helpers solid's compiled jsx calls; this file hand-writes what the compiler would emit for a tag
 import {
   ChildProperties,
@@ -339,8 +339,8 @@ const combineProps = (props: Props, newProps: Props | null | undefined): Props =
   // descriptors, not values: a spread would run every author getter here,
   // and a children getter renders (twice, and with the wrong hydration keys)
   const descriptors = {
-    ...Object.getOwnPropertyDescriptors(props),
-    ...Object.getOwnPropertyDescriptors(newProps),
+    ...rehomedDescriptors(props),
+    ...rehomedDescriptors(newProps),
   };
   // an equal class counts as nothing: own attrs get the combined props and
   // may hand the same class back, merging it again would duplicate it
@@ -363,6 +363,35 @@ const valueDescriptor = (value: unknown): PropertyDescriptor => ({
   writable: true,
 });
 
+/**
+ * a getter is only defined for a read through its own object: solid's
+ * compiled props getters (2.0.0-rc.10, `hoistProps`) reach their captured
+ * values through `this`, so a descriptor moved to another object reads
+ * nothing. re-homing keeps the laziness (nothing is read here) and reads
+ * the source when the target is read; a data descriptor passes as it is
+ */
+const rehome = (
+  source: object,
+  key: PropertyKey,
+  descriptor: PropertyDescriptor,
+): PropertyDescriptor =>
+  descriptor.get || descriptor.set
+    ? {
+        get: () => (source as any)[key],
+        set: descriptor.set && ((value: unknown) => ((source as any)[key] = value)),
+        enumerable: descriptor.enumerable,
+        configurable: true,
+      }
+    : descriptor;
+
+const rehomedDescriptors = (source: object): PropertyDescriptorMap => {
+  const descriptors = Object.getOwnPropertyDescriptors(source) as PropertyDescriptorMap;
+  for (const key of Reflect.ownKeys(descriptors)) {
+    descriptors[key as string] = rehome(source, key, descriptors[key as string]);
+  }
+  return descriptors;
+};
+
 const hasGetter = (object: object): boolean => {
   for (const key of Object.getOwnPropertyNames(object)) {
     if (!("value" in Object.getOwnPropertyDescriptor(object, key)!)) return true;
@@ -754,140 +783,102 @@ const createElementRenderer = (tag: string, attrString: string): TargetRenderer
 };
 
 const bindElement = (el: Element, props: Props, meta: RenderMeta): Element => {
-  const bound = targetProps(props, meta);
-  // a proxy can add children later, so it keeps the child binding
-  const skipChildren = !($PROXY in bound) && !("children" in bound);
-  // no untrack here: a component body runs untracked
-  spread(el, bound, skipChildren);
+  // no untrack anywhere below: a component body runs untracked
+  if (!meta.attrsAddKeys && !($PROXY in props)) {
+    // a fixed key set read by one spread: copying the few descriptors is
+    // cheaper than a view. measured on the client with omit() + the source
+    // list instead: +12–15% hydrate and mount on dynamic-prop tags (an
+    // omit view, spread()'s source walk and their garbage, per element)
+    const bound = copyProps(props, meta);
+    spread(el, bound, !("children" in bound));
+  } else {
+    // attrs or a reactive spread can add keys — children too — so the target
+    // reads views. the sources as an array, like a compiled <tag {...a} {...b}>:
+    // spread() reads a function source inline, no memo and no hydration id.
+    // that matters here: the server writer for a tag builds none of this, so
+    // an owner created only on the client would shift every later element's id
+    spread(el, targetSources(props, meta), false);
+  }
   // replay events once the element's bindings are ready
   runHydrationEvents();
   return el;
 };
 
-/**
- * the props the target sees: author props, attrs output, computed class and style
- * $-props and the provider theme are hidden. solid's omit() takes fixed key
- * names and $-props are open-ended, so the filter is hand-written
- *
- * plain copy when the keys can't change, proxy when attrs or a reactive
- * spread can add keys and downstream omit() has to notice
- * the copy stays unmarked on purpose, a $PROXY mark makes omit()/merge()
- * wrap it again and every read gets slower
- */
-const targetProps = (props: Props, meta: RenderMeta): Record<PropertyKey, unknown> => {
-  if (!meta.attrsAddKeys && !($PROXY in props)) return copyProps(props, meta);
-  return proxyProps(props, meta);
-};
+/** the props a component target receives: the sources as one merge() view */
+const targetProps = (props: Props, meta: RenderMeta): Props =>
+  merge(...targetSources(props, meta)) as Props;
 
 /**
- * copies descriptors without reading them: a getter like icon={<Icon />}
- * renders a child and takes hydration keys, the target reads it in its own
- * order. moving the getter is safe, solid's compiled getters do not depend on `this`
+ * the client tag path when the keys cannot change: the computed class/style
+ * getters, then the author's props copied in without reading them — a
+ * getter like icon={<Icon />} renders a child and takes hydration keys, so it
+ * is re-homed (see `rehome`) and read by the spread in its own order
  */
-const copyProps = (props: Props, meta: RenderMeta): Record<PropertyKey, unknown> => {
-  const { compute, classOf } = meta;
-  const out: Record<PropertyKey, unknown> = {};
-  // string keys only, like solid's omit(): a symbol never reaches the target
+const copyProps = (props: Props, meta: RenderMeta): Props => {
+  const out = clientExtras(props, meta);
+  // string keys only, like solid's omit(): a symbol never reaches the target.
+  // skip drops class (and style with a memo), the keys the extras own
   for (const key of Object.getOwnPropertyNames(props)) {
     if (meta.skip(key)) continue;
     const descriptor = Reflect.getOwnPropertyDescriptor(props, key)!;
-    if ("value" in descriptor && descriptor.enumerable) {
-      out[key] = descriptor.value;
-    } else {
-      Object.defineProperty(out, key, descriptor);
-    }
-  }
-  if (isServer) {
-    // the values are final on the server: plain values take the value path
-    // in solid's omit() and merge() instead of a getter per read
-    if (compute) {
-      const computed = compute();
-      out.class = computed.class;
-      if (computed.style !== undefined) out.style = computed.style;
-    } else out.class = classOf(props);
-    return out;
-  }
-  const classFn = compute ? () => compute().class : () => classOf(props);
-  const styleFn = styleGetter(compute);
-  Object.defineProperty(out, "class", {
-    get: classFn,
-    enumerable: true,
-    configurable: true,
-  });
-  if (styleFn) {
-    Object.defineProperty(out, "style", { get: styleFn, enumerable: true, configurable: true });
+    if ("value" in descriptor && descriptor.enumerable) out[key] = descriptor.value;
+    else Object.defineProperty(out, key, rehome(props, key, descriptor));
   }
   return out;
 };
 
 /**
- * the style accessor a component target receives, or none
- * on the server the value is final, and a target that spreads its props
- * into ssrElement would write style="" for an undefined one; on the client
- * the accessor stays so the memo can set a style later
+ * what the target sees, as the sources solid's own primitives take: omit()
+ * with the skip predicate over the author's props ($-props, theme, and the
+ * keys attrs bake), the attrs the memo produced as a function source when
+ * they can add keys, and the computed class/style last. views, not a copy:
+ * a getter like icon={<Icon />} renders a child and takes hydration keys,
+ * so it is read by the target in its own order, once. on the server the
+ * values are final and go in as data properties; on the client as getters
+ * over the memo
  */
-const styleGetter = (
-  compute: (() => ComputedStyles) | undefined,
-): (() => StyleObject | undefined) | undefined => {
-  if (!compute) return undefined;
-  if (isServer && compute().style === undefined) return undefined;
-  return () => compute().style;
+const targetSources = (props: Props, meta: RenderMeta): [Props, TargetAttrs, Props] => {
+  const { skip, compute, classOf } = meta;
+  const rest = omit(props, skip as (key: string | symbol) => boolean);
+  let extras: Props;
+  if (isServer) {
+    extras = {};
+    if (compute) {
+      const computed = compute();
+      extras.class = computed.class;
+      if (computed.style !== undefined) extras.style = computed.style;
+    } else extras.class = classOf(props);
+  } else extras = clientExtras(props, meta);
+  if (!meta.attrsAddKeys) return [rest, undefined, extras];
+  // meta.attrsAddKeys, not the destructured copy: the read narrows meta.compute
+  const attrsSource = () => {
+    const attrs = meta.compute().attrs;
+    return attrs ? omit(attrs, skip as (key: string | symbol) => boolean) : undefined;
+  };
+  return [rest, attrsSource, extras];
 };
 
+/** the attrs source, or none when attrs cannot add keys (baked, or no attrs) */
+type TargetAttrs = (() => Props | undefined) | undefined;
+
 /**
- * attrs and reactive spreads can add or remove keys; the $PROXY mark keeps
- * downstream omit() calls reactive
+ * client only: the computed class and style as getters over the memo. object
+ * literals, two shapes: a getter defined on a literal takes V8's boilerplate
+ * path
  */
-const proxyProps = (props: Props, meta: RenderMeta): Record<PropertyKey, unknown> => {
-  // trap closures per element on purpose, not shared with viewTraps: solid's
-  // for-in hits two traps per key, so a backing object would add an
-  // indirection to each
-  const { skip, compute, classOf } = meta;
-  // meta.attrsAddKeys, not the destructured copy: the read narrows meta.compute
-  const attrsProps = () => (meta.attrsAddKeys ? meta.compute().attrs : undefined);
-  const classFn = compute ? () => compute().class : () => classOf(props);
-  const styleFn = styleGetter(compute);
-  const contributed = (key: PropertyKey) =>
-    key === "class" ? classFn : key === "style" ? styleFn : undefined;
-  const fromAttrs = (key: PropertyKey) => {
-    const attrs = attrsProps();
-    return attrs && key in attrs ? attrs : undefined;
-  };
-  return new Proxy(props, {
-    get(target, key, receiver) {
-      // the receiver, like solid's own props proxies: solid's spread walks
-      // a proxy's keys through its traps only when props[$PROXY] === props
-      if (key === $PROXY) return receiver;
-      const getter = contributed(key);
-      if (getter) return getter();
-      if (skip(key)) return undefined;
-      const attrs = fromAttrs(key);
-      return attrs ? attrs[key] : Reflect.get(target, key);
-    },
-    has(target, key) {
-      if (key === $PROXY) return true;
-      if (contributed(key)) return true;
-      if (skip(key)) return false;
-      return Reflect.has(target, key) || fromAttrs(key) !== undefined;
-    },
-    ownKeys(target) {
-      const keys = new Set<string | symbol>();
-      for (const key of Reflect.ownKeys(target)) if (!skip(key)) keys.add(key);
-      for (const key of Object.keys(attrsProps() ?? {})) if (!skip(key)) keys.add(key);
-      // class and style are always own keys, listed after the author keys and attrs
-      keys.add("class");
-      if (styleFn) keys.add("style");
-      return [...keys];
-    },
-    getOwnPropertyDescriptor(target, key) {
-      const getter = contributed(key);
-      if (getter) return { enumerable: true, configurable: true, get: getter };
-      if (skip(key)) return undefined;
-      const attrs = fromAttrs(key);
-      if (attrs) {
-        return { enumerable: true, configurable: true, get: () => attrsProps()?.[key] };
+const clientExtras = (props: Props, { compute, classOf }: RenderMeta): Props =>
+  compute
+    ? {
+        get class() {
+          // compute().class is accessed lazily and includes props.class in its results
+          return compute().class;
+        },
+        get style() {
+          return compute().style;
+        },
       }
-      return Reflect.getOwnPropertyDescriptor(target, key);
-    },
-  });
-};
+    : {
+        get class() {
+          return classOf(props);
+        },
+      };