@yak/solid 0.1.0 → 0.2.0

package/runtime/styled.ts

@@ -1,42 +1,161 @@
-import { css, CSSInterpolation, Classes, yakComponentSymbol } from "./cssLiteral.js";
+// the compiler extracts the css at build time; this file only builds class
+// and style per element, prints the tag on the server and binds it on the
+// client. the map, for a reader who lands in the middle:
+//
+// styled() flattens a chain of styled components and picks one of two
+// component shapes at definition. static: the class is fixed, there is no
+// attrs function and the css block writes no style values at render time,
+// so no memo and no theme read. dynamic: one memo per element resolves
+// attrs, class and style.
+//
+// both hand the target a RenderMeta and a props view. on the server
+// serializeElement (the writer) prints a tag, on the client bindElement
+// spreads onto a cloned template, a component target gets targetProps
+// (a copy or a proxy).
+//
+// the one rule every path keeps: a prop getter may render a child and take
+// hydration keys of its own, so the element takes its key first and reads
+// each getter once, in the target's order.
+//
+// words: author = the app code that writes the css block, renders the
+// component and passes props; target = the tag or component under the
+// styled layer; attrs = the .attrs() values, an object or a function of
+// props; baked = object attrs printed into the tag at definition; view = a
+// proxy over props that adds the theme or attrs; collector = the Classes
+// instance a css block adds its names to; atom = a class name the author
+// passes into a css block via atoms("..."), author text that needs
+// escaping; reactive spread = a {...props} in jsx, which solid compiles to
+// a proxy marked with $PROXY; hole = a slot in a server template that
+// ssr() fills, possibly async; hydration key = the id the server prints on
+// an element so the client can claim the same node
+import { css, Classes, yakComponentSymbol } from "./cssLiteral.js";
 import type {
   AnyComponent,
   Attrs,
   AttrsMerged,
   Styled,
   YakComponent,
-  AttrsFunction,
   StyledFn,
   HtmlTags,
   Substitute,
   StyledLiteral,
-  RuntimeStyleProcessor,
+  CompiledStyleProcessor,
+  StaticStyleProcessor,
   StyleObject,
 } from "./publicStyledApi.js";
-import { createMemo, merge } from "solid-js";
-import { createComponent, Dynamic, type JSX } from "@solidjs/web";
-import { normalizeClass } from "./internals/mergeClasses.js";
-// the following import is not relative but the package-level "@yak/solid/context"
-// export: it keeps a single context instance shared between the bundled runtime
-// and user code (and lets the vite plugin alias the user's theme context)
+import { $PROXY, createMemo } from "solid-js";
+// the helpers solid's compiled jsx calls; this file hand-writes what the compiler would emit for a tag
+import {
+  ChildProperties,
+  createComponent,
+  DOMWithState,
+  escape,
+  getNextElement,
+  insert,
+  isServer,
+  MathMLElements,
+  runHydrationEvents,
+  spread,
+  ssr,
+  ssrClassName,
+  ssrHydrationKey,
+  ssrStyle,
+  SVGElements,
+  template,
+  type JSX,
+} from "@solidjs/web";
+import { mergeClasses, normalizeClass } from "./internals/mergeClasses.js";
+// the runtime and the app share one theme context; vite can alias this export
 import { useTheme } from "@yak/solid/context";
 import type { YakTheme } from "./context/index.js";
 import type { Accessor } from "solid-js";
 
-//
-// The `styled()` API without `styled.` syntax
-//
-// The API design is inspired by styled-components:
-// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/constructors/styled.tsx
-// https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/StyledComponent.ts
-//
+/** the props a styled component receives from its author; theme is an accessor (the provider's or the author's) */
+type Props = {
+  class?: string;
+  style?: StyleObject | string;
+  theme?: Accessor<YakTheme>;
+} & Record<PropertyKey, unknown>;
+
+/**
+ * the compiled css block: adds its class names to the collector and, when
+ * $dynamic, style values for the props; the css itself is extracted at build time
+ */
+type StyleProcessor = CompiledStyleProcessor<unknown>;
+
+type RuntimeAttrsFn = (props: Props) => Props;
+
+/** the .attrs() values: an object, or a function of the author's props */
+type RuntimeAttrs = Props | RuntimeAttrsFn;
+
+type ComputedStyles = {
+  class: string | undefined;
+  /** true when the class holds generated names only, nothing from the author or attrs; the writer prints it unescaped then */
+  generatedClass: boolean;
+  style: StyleObject | undefined;
+  attrs: Props | undefined;
+};
+
+/**
+ * the information to build class and style for one render
+ * kept outside of the component props so solid never copies or filters
+ * it when it walks the props object
+ */
+type RenderMeta = StaticMeta | DynamicMeta;
+
+/** static component (fixed class, no attrs function, no style values at render time): one meta per component, the class comes from classOf */
+type StaticMeta = {
+  /** keys the target must never see; the rule is `skip` in yakStyled */
+  skip: (key: PropertyKey) => boolean;
+  compute: undefined;
+  classOf: (props: Props) => string | undefined;
+  attrsAddKeys: false;
+  /** the static class when every name in it is generated, so the writer prints it unescaped; undefined when an atom put author text in it */
+  unescapedClass: string | undefined;
+};
+
 /**
- * Renders `props.component` (a tag name or component) with the remaining
- * props. Loosely typed on purpose: the runtime passes lazily-merged Proxy
- * props that no concrete component type can describe.
+ * dynamic component: one memo (run once on the server) holds class,
+ * style and attrs, one meta per element. the two meta literals (in
+ * createStaticComponent and createDynamicComponent) keep the same keys in
+ * the same order so every meta read sees one shape
  */
-const renderDynamic = (props: Record<PropertyKey, unknown>): JSX.Element =>
-  createComponent(Dynamic as (props: Record<PropertyKey, unknown>) => JSX.Element, props);
+type DynamicMeta = {
+  skip: (key: PropertyKey) => boolean;
+  compute: () => ComputedStyles;
+  classOf: undefined;
+  /**
+   * an attrs function may add keys at render time, so the target gets a
+   * proxy, not a copy. decided at definition: the memo's current attrs say
+   * nothing about later runs
+   */
+  attrsAddKeys: boolean;
+  unescapedClass: undefined;
+};
+
+/** what a styled component built on another yak component inherits from it */
+type ComponentMetadata = readonly [
+  attrs: RuntimeAttrs | undefined,
+  styles: StyleProcessor,
+  target: AnyComponent<any> | string,
+];
+
+/** renders one element of the flattened target: props are the author's raw props, meta says how to build class and style */
+type TargetRenderer = (props: Props, meta: RenderMeta) => JSX.Element;
+
+/** the loosely typed form of Styled that yakStyled implements; the public overloads live in publicStyledApi */
+export type StyledInternal = <
+  T extends object,
+  TAttrsIn extends object = {},
+  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,
+>(
+  Component: AnyComponent<T> | YakComponent<T> | HtmlTags | string,
+  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,
+) => StyledLiteral<Substitute<T, TAttrsIn>>;
+
+/** solid's server regex (not exported); its VoidElements set lacks keygen and menuitem */
+const VOID_ELEMENTS =
+  /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
 
 const styledFactory: StyledFn = (Component) =>
   Object.assign(yakStyled(Component), {
@@ -44,188 +163,426 @@ const styledFactory: StyledFn = (Component) =>
   });
 
 /**
- * The `styled` method works perfectly on all of your own or any third-party component,
- * as long as they attach the passed `class` prop to a DOM element.
- *
- * @usage
- *
- * ```tsx
- * const StyledLink = styled(Link)`
- *  color: #BF4F74;
- *  font-weight: bold;
- * `;
- * ```
+ * style a tag or a component that forwards its class prop. styled.div is
+ * compiled to styled("div"); the untransformed export in mocks/styled.ts
+ * adds the tag properties with a proxy
  */
 export const styled = styledFactory as Styled;
 
-type PropsWithClassAndStyle = {
-  class?: string;
-  style?: StyleObject | string;
-  theme?: Accessor<YakTheme>;
-} & Record<string, unknown>;
-
 const yakStyled: StyledInternal = (Component, attrs) => {
-  // Probe with a property read, not the `in` operator: in dev, solid-refresh
-  // wraps registered components in a Proxy that forwards `get` to the live
-  // implementation but has no `has` trap, so `in` would miss the symbol and
-  // silently skip chain flattening (breaking attrs override order).
+  // solid-refresh forwards reads to the live component, but does not forward `in` checks
   const isYakComponent =
     typeof Component === "function" &&
     (Component as Partial<YakComponent<unknown>>)[yakComponentSymbol] !== undefined;
 
-  // if the component that is wrapped is a yak component, we can extract the attrs function
-  // and the dynamic style function to merge it with the current attrs function (or dynamic
-  // style function) so that the sequence of the attrs functions is preserved
-  const [, parentAttrsFn, parentRuntimeStylesFn, parentTarget] = isYakComponent
-    ? ((Component as YakComponent<unknown>)[yakComponentSymbol] as unknown as [
-        YakComponent<unknown>,
-        ExtractAttrsFunction<typeof attrs>,
-        RuntimeStyleProcessor<unknown>,
-        AnyComponent<any> | string,
-      ])
+  // the public tuple type hides the shape, one cast at the read
+  const [parentAttrs, parentRuntimeStylesFn, parentTarget] = isYakComponent
+    ? ((Component as YakComponent<unknown>)[yakComponentSymbol] as ComponentMetadata)
     : [];
 
-  // the ultimate render target of the whole styled(styled(...)) chain:
-  // attrs and style processors are already merged at construction time, so
-  // a chain of N levels renders the target directly in ONE component instead
-  // of re-entering every parent wrapper per element
-  const targetComponent = (isYakComponent ? parentTarget : Component) as AnyComponent<any> | string;
+  // the chain renders its final target once, with all attrs and style processors combined
+  const targetComponent = parentTarget ?? Component;
 
-  const mergedAttrsFn = buildRuntimeAttrsProcessor(attrs, parentAttrsFn);
+  const mergedAttrs = composeAttrs(attrs as RuntimeAttrs | undefined, parentAttrs);
 
   return (styles, ...values) => {
-    // combine all interpolated logic into a single function
-    // e.g. styled.button`color: ${props => props.color}; margin: ${props => props.margin};`
-    const runtimeStylesFn = css(
-      styles,
-      ...(values as CSSInterpolation<unknown>[]),
-    ) as RuntimeStyleProcessor<unknown>;
-    const runtimeStyleProcessor = buildRuntimeStylesProcessor(
-      runtimeStylesFn,
-      parentRuntimeStylesFn,
-    );
+    // the interpolations of the style block, e.g.
+    //   styled.button`color: ${props => props.color}; margin: ${props => props.margin};`
+    // arrive compiled: styles and values hold class names, style callbacks
+    // and css-variable maps, no css text
+    const runtimeStylesFn = css(styles, ...values);
+    const runtimeStyleProcessor = composeStyles(runtimeStylesFn, parentRuntimeStylesFn);
 
-    // decided once per styled component: tag names render through Dynamic
-    // (which needs a `component` prop), component targets are called
-    // directly so a user prop named `component` reaches them (Dynamic
-    // would consume it). `targetProps` is merged BEFORE filterDomProps -
-    // the filter proxy must stay the outermost layer (see filterDomProps)
     const isTag = typeof targetComponent === "string";
-    const targetProps = isTag ? { component: targetComponent } : {};
-    const renderTarget = isTag
-      ? renderDynamic
-      : (finalProps: Record<PropertyKey, unknown>) =>
-          createComponent(
-            targetComponent as (props: Record<PropertyKey, unknown>) => JSX.Element,
-            finalProps,
-          );
-
-    // fast path for fully static components (no attrs, no dynamic styles;
-    // the most common case): contribute the chain's class names through a
-    // single reactive `class` getter and strip $-props; skips theme lookup,
-    // memo creation and style handling entirely
-    const Yak: AnyComponent<PropsWithClassAndStyle> =
-      !mergedAttrsFn && !runtimeStyleProcessor.$dynamic
-        ? (props) =>
-            renderTarget(
-              filterDomProps(
-                merge(props, targetProps, {
-                  // reading props.class inside the getter keeps the class
-                  // binding reactive without re-creating the element
-                  get class(): string | undefined {
-                    const classes = new Classes(normalizeClass(props.class));
-                    runtimeStyleProcessor(props, classes, undefined as unknown as StyleObject);
-                    return classes.value || undefined;
-                  },
-                }),
-              ),
-            )
-        : (props) => {
-            // the component body runs ONCE in Solid: all per-update work
-            // lives in memos/getters so only the affected DOM bindings update
-
-            // attrs functions and dynamic style functions receive the theme;
-            // fully static components take the fast path above and never
-            // subscribe to the theme context
-            const theme = useTheme();
-
-            // getter-preserving merge: compiled prop functions like
-            // `({ $bottom }) => ...` destructure this proxy INSIDE the memo
-            // below, so every read is tracked at its use-site
-            const propsWithTheme = merge({ theme }, props) as PropsWithClassAndStyle & {
-              theme: Accessor<YakTheme>;
-            };
-
-            // The first component which is not wrapped in a yak component executes all attrs
-            // functions starting from the innermost yak component to the outermost (itself)
-            const attrsProps = mergedAttrsFn
-              ? createMemo(() => mergedAttrsFn(propsWithTheme as any) as PropsWithClassAndStyle)
-              : undefined;
-
-            // input for the style processor: props + theme + attrs output
-            const styleInput = attrsProps ? merge(propsWithTheme, attrsProps) : propsWithTheme;
-
-            // execute all functions inside the style literal
-            // e.g. styled.button`color: ${props => props.color};`
-            // only reads inside this memo re-run it; the element itself is
-            // never re-created, only its class/style bindings update
-            const computed = createMemo(() => {
-              const attrsResult = attrsProps?.();
-              const classes = new Classes(normalizeClass(props.class));
-              const attrsClass = normalizeClass(attrsResult?.class);
-              if (attrsClass) {
-                classes.add(attrsClass);
-              }
-              // static processors never write style values, so the incoming
-              // style object can be passed through without a defensive copy
-              const style =
-                runtimeStyleProcessor.$dynamic || attrsResult?.style
-                  ? { ...unwrapStyle(props.style), ...unwrapStyle(attrsResult?.style) }
-                  : unwrapStyle(props.style);
-              runtimeStyleProcessor(styleInput, classes, style as StyleObject);
-              return {
-                class: classes.value || undefined,
-                style: style && Object.keys(style).length > 0 ? style : undefined,
-              };
-            });
-
-            const merged = merge(props, attrsProps ?? {}, {
-              get class(): string | undefined {
-                return computed().class;
-              },
-              get style(): StyleObject | undefined {
-                return computed().style;
-              },
-            });
-
-            // keep the theme prop only if an attrs function intentionally
-            // replaced it; the context theme itself never reaches the target
-            const allowTheme = () => {
-              const attrsResult = attrsProps?.();
-              return !!attrsResult && "theme" in attrsResult && attrsResult.theme !== theme;
-            };
-
-            // render the chain's target directly; parent wrappers contribute
-            // only their (already merged) attrs and style processors
-            return renderTarget(filterDomProps(merge(merged, targetProps), allowTheme));
-          };
-
-    return Object.assign(Yak, {
-      [yakComponentSymbol]: [Yak, mergedAttrsFn, runtimeStyleProcessor, targetComponent] as [
-        unknown,
-        unknown,
-        unknown,
-        unknown,
-      ],
+    // object attrs with plain attribute values bake into the tag's opening
+    // string and template; the component stays static. baked keys reach the
+    // dom only through that string: skip drops them from the target
+    const baked =
+      isTag &&
+      mergedAttrs &&
+      typeof mergedAttrs !== "function" &&
+      bakeable(targetComponent, mergedAttrs)
+        ? mergedAttrs
+        : undefined;
+    const attrString = baked ? bakeAttributes(baked) : "";
+    const renderTarget = createTargetRenderer(targetComponent, attrString);
+    // static: attrs are none or baked, and the css block writes no style values
+    const isStatic = (!mergedAttrs || !!baked) && !runtimeStyleProcessor.$dynamic;
+    // the target never sees $-props, the provider theme, or the author class
+    // (yak hands it the combined one); a dynamic component merges style in its
+    // memo, so the author's style key is dropped here and handed over combined.
+    // no symbol passes: solid's merge() flattens any object that answers its
+    // private $SOURCES key, which would hand a target's mergeProps() the
+    // unfiltered originals; solid's own omit() blocks that key the same way
+    const skip = (key: PropertyKey) =>
+      typeof key !== "string" ||
+      key.charCodeAt(0) === 36 /* $ */ ||
+      key === "class" ||
+      key === "theme" ||
+      (!isStatic && key === "style") ||
+      // a baked attr wins over the author's prop of the same name, even when its value is null
+      (baked !== undefined && Object.hasOwn(baked, key));
+    // baked attrs still run inside a dynamic component's memo: style callbacks
+    // read them through withAttrs
+    const attrsFn =
+      typeof mergedAttrs === "function" ? mergedAttrs : mergedAttrs && (() => mergedAttrs);
+    const Yak = isStatic
+      ? createStaticComponent(
+          isTag ? targetComponent : undefined,
+          renderTarget,
+          runtimeStyleProcessor,
+          skip,
+          attrString,
+        )
+      : createDynamicComponent(renderTarget, attrsFn, runtimeStyleProcessor, skip, !!baked);
+
+    const metadata: ComponentMetadata = [mergedAttrs, runtimeStyleProcessor, targetComponent];
+    return Object.assign(Yak, { [yakComponentSymbol]: metadata });
+  };
+};
+
+/**
+ * object attrs bake when every entry is a plain attribute with a primitive
+ * value. rejected keys are the union of what skip drops, what attribute()
+ * treats specially, and what solid sets as a dom property (DOMWithState:
+ * value, checked, ...), which a template would turn into a markup
+ * attribute. enumerable value keys only, so the three walks (here,
+ * bakeAttributes, skip) see the same keys; a getter blocks baking and runs
+ * at render time
+ */
+const bakeable = (tag: string, attrs: Props): boolean => {
+  const stateful = DOMWithState[tag.toUpperCase()];
+  return Object.getOwnPropertyNames(attrs).every((key) => {
+    const descriptor = Object.getOwnPropertyDescriptor(attrs, key)!;
+    if (!descriptor.enumerable || !("value" in descriptor)) return false;
+    const type = typeof descriptor.value;
+    return (
+      (type === "string" || type === "number" || type === "boolean" || descriptor.value == null) &&
+      // the name goes into the template and the opening string unescaped; anything
+      // else (a computed key with markup in it) takes the writer, whose attribute() escapes names
+      ATTRIBUTE_NAME.test(key) &&
+      key.charCodeAt(0) !== 36 &&
+      key !== "class" &&
+      key !== "style" &&
+      key !== "theme" &&
+      key !== "ref" &&
+      !ChildProperties.has(key) &&
+      !key.startsWith("on") &&
+      !key.startsWith("prop:") &&
+      !(stateful && key in stateful)
+    );
+  });
+};
+
+/**
+ * the attribute string of baked attrs, built once at definition. the value
+ * rules follow attribute(), which prints one prop on the server; the escaping
+ * is local because the client build's escape is an empty stub, and the names
+ * passed the ATTRIBUTE_NAME check. `<` stays unescaped, harmless in a quoted value
+ */
+const bakeAttributes = (attrs: Props): string => {
+  let result = "";
+  for (const key of Object.keys(attrs)) {
+    const value = attrs[key];
+    if (value == null || value === false) continue;
+    result +=
+      value === true || value === "" ? ` ${key}` : ` ${key}="${escapeAttribute(String(value))}"`;
+  }
+  return result;
+};
+
+const escapeAttribute = (value: string) => value.replaceAll("&", "&amp;").replaceAll('"', "&quot;");
+
+/** an attribute name that needs no escaping in markup */
+const ATTRIBUTE_NAME = /^[A-Za-z_:][\w:.-]*$/;
+
+/** parent attrs first, then own attrs read and override that result */
+const composeAttrs = (attrs?: RuntimeAttrs, parent?: RuntimeAttrs): RuntimeAttrs | undefined => {
+  if (!attrs) return parent;
+  if (!parent) return attrs;
+  // two objects without getters combine once here and stay an object; a
+  // getter must run per render, inside the memo
+  if (
+    typeof attrs !== "function" &&
+    typeof parent !== "function" &&
+    !hasGetter(attrs) &&
+    !hasGetter(parent)
+  ) {
+    return combineProps(parent, attrs);
+  }
+  const own = typeof attrs === "function" ? attrs : () => attrs;
+  const parentFn = typeof parent === "function" ? parent : () => parent;
+  return (props) => {
+    const parentProps = parentFn(props);
+    return combineProps(parentProps, own(combineProps(props, parentProps)));
+  };
+};
+
+/** parent styles before own styles, with one collector and one style object */
+const composeStyles = (own: StyleProcessor, parent?: StyleProcessor): StyleProcessor => {
+  if (!parent) return own;
+  return Object.assign(
+    (props: unknown, classes: Parameters<StyleProcessor>[1], style: StyleObject) => {
+      parent(props, classes, style);
+      own(props, classes, style);
+    },
+    { $dynamic: own.$dynamic || parent.$dynamic },
+  ) as StyleProcessor;
+};
+
+/**
+ * attrs override props; class and style values combine, e.g.
+ *   { class: "a", foo: 1 } and { class: "b", bar: 2 }  ->  { class: "a b", foo: 1, bar: 2 }
+ */
+const combineProps = (props: Props, newProps: Props | null | undefined): Props => {
+  if (!newProps) return 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),
+  };
+  // 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
+  if (newProps.class && props.class !== newProps.class) {
+    descriptors.class = valueDescriptor(mergeClasses(normalizeClass(props.class), newProps.class));
+  }
+  if (newProps.style && props.style !== newProps.style) {
+    descriptors.style = valueDescriptor({
+      ...unwrapStyle(props.style),
+      ...unwrapStyle(newProps.style),
     });
+  }
+  return Object.defineProperties({}, descriptors) as Props;
+};
+
+const valueDescriptor = (value: unknown): PropertyDescriptor => ({
+  value,
+  enumerable: true,
+  configurable: true,
+  writable: true,
+});
+
+const hasGetter = (object: object): boolean => {
+  for (const key of Object.getOwnPropertyNames(object)) {
+    if (!("value" in Object.getOwnPropertyDescriptor(object, key)!)) return true;
+  }
+  return false;
+};
+
+/** static: no theme, no memo; one class per component, a children-only fast path for a tag */
+const createStaticComponent = (
+  tag: string | undefined,
+  renderTarget: TargetRenderer,
+  processor: StaticStyleProcessor,
+  skip: (key: PropertyKey) => boolean,
+  attrString: string,
+): AnyComponent<Props> => {
+  const collected = new Classes();
+  // a static processor ignores its props argument, it only adds class names
+  processor(undefined, collected);
+  const staticClass = collected.value || undefined;
+  const classOf = (props: Props): string | undefined => {
+    const userClass = normalizeClass(props.class);
+    if (!userClass) return staticClass;
+    // the collector skips generated names the author's class already holds,
+    // and an atom may remove one
+    const classes = new Classes(userClass);
+    processor(props, classes);
+    return classes.value || undefined;
+  };
+  const renderChildrenOnly =
+    tag && !VOID_ELEMENTS.test(tag)
+      ? createChildrenOnlyRenderer(tag, staticClass, attrString)
+      : undefined;
+  const meta: RenderMeta = {
+    skip,
+    compute: undefined,
+    classOf,
+    attrsAddKeys: false,
+    unescapedClass: collected.generated ? staticClass : undefined,
   };
+  return (props) => {
+    // no props or only children: no skip walk, no props copy, no spread.
+    // a reactive spread can add props later and needs the full client binding;
+    // on the server props are read once so the proxy check does not matter
+    if (renderChildrenOnly && (isServer || !($PROXY in props))) {
+      const keys = Object.keys(props);
+      if (!keys.length || (keys.length === 1 && keys[0] === "children")) {
+        return renderChildrenOnly(props, keys.length !== 0);
+      }
+    }
+    return renderTarget(props, meta);
+  };
+};
+
+/** tag and class cached per component; only the children need a binding or serialization */
+const createChildrenOnlyRenderer = (
+  tag: string,
+  className: string | undefined,
+  attrString: string,
+): ((props: Props, hasChildren: boolean) => JSX.Element) => {
+  if (isServer) {
+    const head = `<${tag}${attrString}`;
+    const open = `${className ? ` class="${ssrClassName(className)}"` : ""}>`;
+    const closing = `</${tag}>`;
+    const parts = [head, open, closing];
+    // as in childContent: script and style content is not escaped
+    const raw = tag === "script" || tag === "style";
+    return (props, hasChildren): { t: string } => {
+      // key first: the child getter may render
+      const hk = ssrHydrationKey();
+      const children = hasChildren ? (raw ? props.children : escape(props.children)) : undefined;
+      // text joins in place; anything else goes through ssr() like a compiled
+      // template's hole, which handles async children and text separators
+      const text = plainContent(children);
+      if (text !== undefined) return { t: `${head}${hk}${open}${text}${closing}` };
+      return ssr(parts, hk, children);
+    };
+  }
+  const create = createElementTemplate(tag, attrString, className);
+  return (props, hasChildren) => {
+    const el = getNextElement(create);
+    if (hasChildren) {
+      // static text arrives as a plain value, not a getter: one insert, no effect.
+      // a getter is dynamic and keeps the binding
+      const descriptor = Object.getOwnPropertyDescriptor(props, "children");
+      if (descriptor && "value" in descriptor) insert(el, descriptor.value);
+      else insert(el, () => props.children);
+    }
+    runHydrationEvents();
+    return el;
+  };
+};
+
+/** dynamic: the provider theme plus one memo per element for attrs, class and style */
+const createDynamicComponent =
+  (
+    renderTarget: TargetRenderer,
+    attrsFn: RuntimeAttrsFn | undefined,
+    processor: StyleProcessor,
+    skip: (key: PropertyKey) => boolean,
+    baked: boolean,
+  ): AnyComponent<Props> =>
+  (props) => {
+    const theme = useTheme();
+    // style callbacks see an explicit theme prop before the provider theme
+    const propsWithTheme = withTheme(props, theme);
+    // one memo per element runs the attrs function and every interpolation
+    // of the style block, e.g. styled.button`color: ${props => props.color}`.
+    // only reads inside it re-run it; the element is never re-created.
+    // attrs and styles share the memo on purpose:
+    // a style-only prop change also reruns attrs, still cheaper than
+    // two memos per element
+    const compute = () => computeStyles(props, propsWithTheme, attrsFn, processor);
+    // the server has no updates, so a run-once closure replaces the memo:
+    // solid's server createMemo still builds an owner and a node per element.
+    // on the client the memo is transparent: it claims no hydration key
+    const computed = isServer ? once(compute) : createMemo(compute, { transparent: true });
+    // theme reaches the target only when attrs set their own; the provider
+    // accessor must not land on the dom element. identity, not `in`: an attrs
+    // function that spreads its input hands the provider accessor back
+    const allowTheme =
+      attrsFn &&
+      (() => {
+        const attrs = computed().attrs;
+        return !!attrs && "theme" in attrs && attrs.theme !== theme;
+      });
+    return renderTarget(props, {
+      skip: allowTheme ? (key) => (key === "theme" ? !allowTheme() : skip(key)) : skip,
+      compute: computed,
+      classOf: undefined,
+      // baked attrs sit in the template and cannot add keys, the copy path serves them
+      attrsAddKeys: !!attrsFn && !baked,
+      unescapedClass: undefined,
+    });
+  };
+
+/** resolve attrs, then run the styles against that props view */
+const computeStyles = (
+  props: Props,
+  propsWithTheme: Props,
+  attrsFn: RuntimeAttrsFn | undefined,
+  processor: StyleProcessor,
+): ComputedStyles => {
+  const attrs = attrsFn?.(propsWithTheme);
+  const authorClass = normalizeClass(props.class);
+  const classes = new Classes(authorClass);
+  const attrsClass = normalizeClass(attrs?.class);
+  if (attrsClass) classes.add(attrsClass);
+  // a static processor writes no style values, so the author's style object
+  // passes through without a copy
+  const style =
+    processor.$dynamic || attrs?.style
+      ? { ...unwrapStyle(props.style), ...unwrapStyle(attrs?.style) }
+      : unwrapStyle(props.style);
+  processor(
+    attrs ? withAttrs(propsWithTheme, attrs) : propsWithTheme,
+    classes,
+    style as StyleObject,
+  );
+  return {
+    class: classes.value || undefined,
+    generatedClass: !authorClass && !attrsClass && classes.generated,
+    style: style && hasKeys(style) ? style : undefined,
+    attrs,
+  };
+};
+
+/**
+ * backing object of a props view: the author's props, a provider theme to
+ * fill in when props has none, and attrs whose values win over props.
+ * one shared handler serves both views, so a view costs one proxy and one
+ * small object per element and no trap closures
+ */
+type View = { props: Props; theme?: Accessor<YakTheme>; attrs?: Props };
+
+const viewTraps: ProxyHandler<View> = {
+  get: ({ props, theme, attrs }, key) => {
+    if (key === "theme" && theme && !("theme" in props)) return theme;
+    if (attrs && key in attrs) return Reflect.get(attrs, key);
+    return Reflect.get(props, key);
+  },
+  // no props check for theme here: when props has one, Reflect.has says so anyway
+  has: ({ props, theme, attrs }, key) =>
+    (key === "theme" && !!theme) || (!!attrs && key in attrs) || Reflect.has(props, key),
+  ownKeys: ({ props, theme, attrs }) => {
+    const keys = new Set(Reflect.ownKeys(props));
+    if (attrs) for (const key of Reflect.ownKeys(attrs)) keys.add(key);
+    if (theme) keys.add("theme");
+    return [...keys];
+  },
+  getOwnPropertyDescriptor: ({ props, theme, attrs }, key) => {
+    if (key === "theme" && theme && !("theme" in props)) {
+      return { value: theme, enumerable: true, configurable: true };
+    }
+    const descriptor = Reflect.getOwnPropertyDescriptor(attrs && key in attrs ? attrs : props, key);
+    // a prop the view adds must report configurable, the backing object has no such key
+    return descriptor && { ...descriptor, configurable: true };
+  },
 };
 
 /**
- * Normalize a Solid style prop to an object the style processor can extend.
- * Solid allows string styles on elements; they are converted here so CSS custom
- * properties from dynamic values can be merged in (prefer object styles).
+ * the provider theme when props has none. a props proxy (a reactive spread)
+ * can gain or lose its theme key later, so it always gets the view; a plain
+ * object with a theme is used as is
  */
+const withTheme = (props: Props, theme: Accessor<YakTheme>): Props =>
+  (!($PROXY in props) && "theme" in props
+    ? props
+    : new Proxy({ props, theme }, viewTraps)) as Props;
+
+/** style interpolations read attrs over author props, getters only on demand */
+const withAttrs = (props: Props, attrs: Props): Props =>
+  new Proxy({ props, attrs }, viewTraps) as Props;
+
+/** server stand-in for createMemo: run once, no owner and no node */
+const once = <T extends object>(fn: () => T): (() => T) => {
+  let value: T | undefined;
+  return () => (value ??= fn());
+};
+
+/** string styles become objects before css variables are added */
 const unwrapStyle = (style: StyleObject | string | undefined): StyleObject | undefined => {
   if (typeof style !== "string") {
     return style;
@@ -243,151 +600,294 @@ const unwrapStyle = (style: StyleObject | string | undefined): StyleObject | und
   return result as StyleObject;
 };
 
-const isBlockedProp = (key: PropertyKey, allowTheme?: () => boolean): boolean =>
-  typeof key === "string" &&
-  (key.startsWith("$") || (key === "theme" && !(allowTheme && allowTheme())));
+/** no array for a yes/no answer */
+const hasKeys = (object: object): boolean => {
+  for (const _ in object) return true;
+  return false;
+};
+
+/** the target's render path, chosen once per styled component */
+const createTargetRenderer = (
+  target: AnyComponent<any> | string,
+  attrString: string,
+): TargetRenderer => {
+  if (typeof target !== "string") {
+    return (props, meta) => createComponent(target, targetProps(props, meta));
+  }
+  if (isServer) {
+    const head = `<${target}${attrString}`;
+    const closing = VOID_ELEMENTS.test(target) ? undefined : `</${target}>`;
+    return (props, meta) => serializeElement(target, head, closing, props, meta);
+  }
+  return createElementRenderer(target, attrString);
+};
 
 /**
- * Remove all props that start with a $ sign (plus the internal theme) so
- * they reach neither DOM elements nor custom components.
- *
- * Implemented as a lazy Proxy instead of an eager copy: Solid's compiled
- * spread reads props through getters, and copying would read every prop
- * exactly once and freeze its value, killing reactivity.
+ * the server writer: writes the html string by hand instead of using ssrElement.
+ * ssrElement needs a filtered props object with getters to keep the
+ * read order, that costs more than writing directly
  */
-const filterDomProps = <T extends object>(props: T, allowTheme?: () => boolean): T =>
-  new Proxy(props, {
-    get: (target, key) => (isBlockedProp(key, allowTheme) ? undefined : Reflect.get(target, key)),
-    has: (target, key) => !isBlockedProp(key, allowTheme) && Reflect.has(target, key),
-    ownKeys: (target) => Reflect.ownKeys(target).filter((key) => !isBlockedProp(key, allowTheme)),
-    getOwnPropertyDescriptor: (target, key) =>
-      isBlockedProp(key, allowTheme) ? undefined : Reflect.getOwnPropertyDescriptor(target, key),
-  });
-
-// util function to merge class names, as they are concatenated with a space
-const mergeClasses = (a?: string, b?: string) => {
-  if (!a && !b) return undefined;
-  if (!a) return b;
-  if (!b) return a;
-  return a + " " + b;
+const serializeElement = (
+  tag: string,
+  head: string,
+  closing: string | undefined,
+  props: Props,
+  meta: RenderMeta,
+): { t: string } => {
+  // key first: a prop getter may render a child and take keys
+  const hk = ssrHydrationKey();
+  // one memo read for class, style and attrs. branch on meta.compute, not
+  // on computed, so the static writer makes no call here
+  let computed: ComputedStyles | undefined;
+  let className: string | undefined;
+  if (meta.compute) {
+    computed = meta.compute();
+    className = computed.class;
+  } else {
+    className = meta.classOf(props);
+  }
+  const attrs = computed?.attrs;
+  const style = computed?.style;
+  const skip = meta.skip;
+  let result = head + hk;
+  let children: unknown;
+  // a textarea's value is its content, like solid's ssrElement writes it
+  const textarea = tag === "textarea";
+  // author keys first, an attrs value wins; then the keys only attrs has.
+  // two loops on purpose: one loop over both key sets is slower on the
+  // attrs path, it needs a push and a second `in` per key.
+  // only the first child prop is read, and none on a void tag: a child
+  // getter may render and take hydration keys
+  for (const key of Object.keys(props)) {
+    if (skip(key)) continue;
+    const source = attrs && key in attrs ? attrs : props;
+    if (!isChildKey(key, textarea)) result += attribute(key, source[key]);
+    else if (children === undefined && closing) children = childContent(tag, key, source[key]);
+  }
+  if (attrs) {
+    for (const key of Object.keys(attrs)) {
+      if (skip(key) || key in props) continue;
+      if (!isChildKey(key, textarea)) result += attribute(key, attrs[key]);
+      else if (children === undefined && closing) children = childContent(tag, key, attrs[key]);
+    }
+  }
+  // generated class names need no escaping, an author or attrs class does
+  if (className !== undefined) {
+    const generated = computed ? computed.generatedClass : className === meta.unescapedClass;
+    result += ` class="${generated ? className : ssrClassName(className)}"`;
+  }
+  if (style !== undefined) result += ` style="${ssrStyle(style as Record<string, string>)}"`;
+  // a void tag has no children: the finished string is the node, no ssr() call.
+  // the space keeps an unquoted hydration key from swallowing the slash
+  if (!closing) return { t: result + " />" };
+  // text and finished nodes join in place, as solid's own resolver does.
+  // functions, arrays and nodes with pending holes go to ssr(): async wrap,
+  // error boundary routing, and the separator marker between adjacent
+  // text items so the client can claim two text nodes
+  const text = plainContent(children);
+  if (text !== undefined) return { t: result + ">" + text + closing };
+  return ssr([result + ">", closing], children);
 };
 
+/** a prop that becomes the element's content: solid's child properties, and a textarea's value */
+const isChildKey = (key: string, textarea: boolean) =>
+  ChildProperties.has(key) || (textarea && (key === "value" || key === "defaultValue"));
+
 /**
- * merge props and processed props (including class names and styles)
- * e.g.:\
- * `{ class: "a", foo: 1 }` and `{ class: "b", bar: 2 }` \
- * => `{ class: "a b", foo: 1, bar: 2 }`
+ * the string a child resolves to without ssr(), else undefined. a server
+ * node is { t: html, h?: pending async holes }; one with holes needs ssr()
  */
-const combineProps = <
-  T extends {
-    class?: string;
-    style?: StyleObject | string;
-  },
-  TOther extends
-    | {
-        class?: string;
-        style?: StyleObject | string;
-      }
-    | null
-    | undefined,
->(
-  props: T,
-  newProps: TOther,
-) =>
-  newProps
-    ? (props.class === newProps.class || !newProps.class) &&
-      (props.style === newProps.style || !newProps.style)
-      ? // shortcut if no style and class merging is necessary
-        {
-          ...props,
-          ...newProps,
-        }
-      : // merge class names and styles
-        {
-          ...props,
-          ...newProps,
-          class: mergeClasses(props.class, newProps.class),
-          style: { ...unwrapStyle(props.style), ...unwrapStyle(newProps.style) },
-        }
-    : // if no new props are provided, no merging is necessary
-      props;
+const plainContent = (node: unknown): string | undefined => {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node !== "object" || Array.isArray(node)) return undefined;
+  const server = node as { t?: unknown; h?: unknown[] };
+  if (server.h && server.h.length > 0) return undefined;
+  if (typeof server.t === "string") return server.t;
+  return undefined;
+};
 
 /**
- * Merges the attrs function of the current component with the attrs function of the parent component
- * in order to preserve the sequence of the attrs functions.
- * Note: In theory, the parentAttrsFn can have different types for TAttrsIn and TAttrsOut
- * but as this is only used internally, we can ignore and simplify this case
- * @param attrs The attrs object or function of the current component (if any)
- * @param parentAttrsFn The attrs function of the parent/wrapped component (if any)
- * @returns A function that receives the props and returns the transformed props
+ * one server attribute with its leading space, the value rules of solid's
+ * ssrElement; bakeAttributes applies the same rules once at definition
  */
-const buildRuntimeAttrsProcessor = <
-  T,
-  TAttrsIn extends object,
-  TAttrsOut extends AttrsMerged<T, TAttrsIn>,
->(
-  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,
-  parentAttrsFn?: AttrsFunction<T, TAttrsIn, TAttrsOut>,
-): AttrsFunction<T, TAttrsIn, TAttrsOut> | undefined => {
-  const ownAttrsFn = attrs && (typeof attrs === "function" ? attrs : () => attrs);
-
-  if (ownAttrsFn && parentAttrsFn) {
-    return (props) => {
-      const parentProps = parentAttrsFn(props);
-
-      // overwrite and merge the parent props with the props received from the attrs function
-      // after they went through the parent attrs function.
-      //
-      // This makes sure the linearity of the attrs functions is preserved and all attrs function receive
-      // the whole props object calculated from the previous attrs functions
-      return combineProps(
-        parentProps as any,
-        ownAttrsFn(combineProps(props as any, parentProps as any) as any),
-      ) as any;
-    };
+const attribute = (prop: string, value: unknown): string => {
+  if (prop === "style") return ` style="${ssrStyle(value as string)}"`;
+  // class never reaches here, skip drops it; the branch stays, the static
+  // writer is slower without it (jit code placement)
+  if (prop === "class") return ` class="${ssrClassName(value as string)}"`;
+  // refs, event handlers and prop: bindings only exist on the client
+  if (value == undefined || prop === "ref" || prop.startsWith("on") || prop.startsWith("prop:")) {
+    return "";
   }
+  if (typeof value === "boolean") return value ? ` ${escape(prop)}` : "";
+  return value === "" ? ` ${escape(prop)}` : ` ${escape(prop)}="${escape(value, true)}"`;
+};
 
-  return ownAttrsFn || parentAttrsFn;
+/** raw markup stays as is, every other child value is escaped */
+const childContent = (tag: string, prop: string, value: unknown): unknown =>
+  tag === "script" || tag === "style" || prop === "innerHTML" ? value : escape(value);
+
+/** the cached template for a fixed tag; svg and mathml tags parse inside their namespace root */
+const createElementTemplate = (tag: string, attrString: string, className?: string) => {
+  // atoms can put author names into the static class, so the template escapes it
+  const classAttribute = className ? ` class="${escapeAttribute(className)}"` : "";
+  const opening = `<${tag}${attrString}${classAttribute}>`;
+  // flag 2 returns firstChild.firstChild
+  // skips the <svg>/<math> wrapper we add so the child parses in its namespace
+  if (SVGElements.has(tag) && tag !== "svg") return template(`<svg>${opening}`, 2);
+  if (MathMLElements.has(tag) && tag !== "math") return template(`<math>${opening}`, 2);
+  return template(opening);
 };
 
 /**
- * Merges the runtime style function of the current component with the runtime style function of the parent component
- * in order to preserve the sequence of the attrs functions.
- * @param runtimeStylesFn The current runtime styles function
- * @param parentRuntimeStylesFn The parent runtime styles function
- * @returns The merged runtime styles function
+ * bind a fixed client tag without dynamic()'s per-element memo. hydration
+ * claims the server node by key; a fresh mount clones the cached template.
+ * solid's SVGElements set lacks a, script, style and title, so a fresh
+ * mount makes them html elements even inside an <svg>, as solid's own
+ * dynamic() does
  */
-const buildRuntimeStylesProcessor = <T>(
-  runtimeStylesFn: RuntimeStyleProcessor<T>,
-  parentRuntimeStylesFn?: RuntimeStyleProcessor<T>,
-) => {
-  if (runtimeStylesFn && parentRuntimeStylesFn) {
-    const combined: RuntimeStyleProcessor<T> = Object.assign(
-      (props: T, classes: Parameters<RuntimeStyleProcessor<T>>[1], style: StyleObject) => {
-        parentRuntimeStylesFn(props, classes, style);
-        runtimeStylesFn(props, classes, style);
-      },
-      // the chain is dynamic if any level is dynamic
-      { $dynamic: runtimeStylesFn.$dynamic || parentRuntimeStylesFn.$dynamic },
-    );
-    return combined;
+const createElementRenderer = (tag: string, attrString: string): TargetRenderer => {
+  const create = createElementTemplate(tag, attrString);
+  return (props, meta) => bindElement(getNextElement(create), props, meta);
+};
+
+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);
+  // 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);
+};
+
+/**
+ * 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`
+ */
+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
+  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 });
   }
-  return runtimeStylesFn || parentRuntimeStylesFn;
+  return out;
 };
 
 /**
- * Internal function where attrs are passed to be processed
+ * 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
  */
-export type StyledInternal = <
-  T extends object,
-  TAttrsIn extends object = {},
-  TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>,
->(
-  Component: AnyComponent<T> | YakComponent<T> | HtmlTags | string,
-  attrs?: Attrs<T, TAttrsIn, TAttrsOut>,
-) => StyledLiteral<Substitute<T, TAttrsIn>>;
+const styleGetter = (
+  compute: (() => ComputedStyles) | undefined,
+): (() => StyleObject | undefined) | undefined => {
+  if (!compute) return undefined;
+  if (isServer && compute().style === undefined) return undefined;
+  return () => compute().style;
+};
 
 /**
- * Utility type to extract the AttrsFunction from the Attrs type
+ * attrs and reactive spreads can add or remove keys; the $PROXY mark keeps
+ * downstream omit() calls reactive
  */
-export type ExtractAttrsFunction<T> = T extends (p: any) => any ? T : never;
+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] };
+      }
+      return Reflect.getOwnPropertyDescriptor(target, key);
+    },
+  });
+};