@yak/solid 0.0.0 → 0.2.0

package/dist/internal.d.ts

@@ -1,7 +1,6 @@
 import { Accessor } from "solid-js";
 import { JSX } from "@solidjs/web";
 import { YakThemeContext, YakThemeProvider, useTheme } from "@yak/solid/context";
-
 //#region runtime/cssProp.d.ts
 declare module "@solidjs/web" {
   namespace JSX {
@@ -47,7 +46,7 @@ interface StyledFn {
  * @example styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`
  */
 interface YakComponent<T> extends AnyComponent<T> {
-  [yakComponentSymbol]: [unknown, unknown, unknown, unknown];
+  [yakComponentSymbol]: readonly [unknown, unknown, unknown];
 }
 /**
  * Styled component with attrs method for adding default props.
@@ -85,7 +84,7 @@ type AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<TBaseProps &
  * Maps all HTML tag names to their corresponding styled component types with attributes support.
  * Provides typed access to all standard HTML elements through the styled interface.
  */
-type MappedHtmlTags = { [Tag in HtmlTags]: LiteralWithAttrs<JSX.IntrinsicElements[Tag]> };
+type MappedHtmlTags = { [Tag in HtmlTags]: LiteralWithAttrs<JSX.IntrinsicElements[Tag]>; };
 /**
  * The attrs function allows adding additional props to a styled component.
  * Props can be specified as an object or as a function that receives current props.
@@ -110,16 +109,16 @@ type CustomWebComponentTag = `${string}-${string}`;
  * Utility type to efficiently remove properties from an object type.
  * More performant than the built-in Omit type for large object types.
  */
-type FastOmit<T extends object, U extends string | number | symbol> = { [K in keyof T as K extends U ? never : K]: T[K] };
+type FastOmit<T extends object, U extends string | number | symbol> = { [K in keyof T as K extends U ? never : K]: T[K]; };
 /**
- * Set-like collector for class names.
- *
- * Implemented as a string builder in the runtime (a Set<string>
- * split → Set → Array.from → join round-trip dominates render cost);
- * a real Set<string> also satisfies this interface.
+ * Collects the class names of one render. The runtime keeps them in one
+ * space-separated string (Classes in cssLiteral.ts, the only implementation):
+ * add() appends, has() and delete() let a runtime processor take a name back
+ * out. A Set would need a split and a join on every render for the same string.
  */
 type ClassCollector = {
-  add(name: string): void;
+  /** generated is false for an author string such as an atom; the server writer escapes those */
+  add(name: string, generated?: boolean): void;
   has(name: string): boolean;
   delete(name: string): void;
 };
@@ -133,6 +132,14 @@ type ClassCollector = {
 type RuntimeStyleProcessor<T> = ((props: T, classes: ClassCollector, style: StyleObject) => void) & {
   $dynamic?: boolean;
 };
+/** A class-only processor ignores props and needs no style object. */
+type StaticStyleProcessor = ((props: unknown, classes: ClassCollector, style?: StyleObject) => void) & {
+  $dynamic: false;
+};
+/** css() marks its output so styled() can select the static render path. */
+type CompiledStyleProcessor<T> = StaticStyleProcessor | (RuntimeStyleProcessor<T> & {
+  $dynamic: true;
+});
 //#endregion
 //#region runtime/atoms.d.ts
 /**
@@ -178,17 +185,9 @@ declare const keyframes: <T extends (string | number | bigint)[] = never>(styles
 //#endregion
 //#region runtime/styled.d.ts
 /**
- * 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
  */
 declare const styled: Styled;
 //#endregion
@@ -251,24 +250,18 @@ type CSSInterpolation<TProps> = string | number | undefined | null | false | Com
   [yakComponentSymbol]: any;
 } | ((props: TProps) => CSSInterpolation<TProps>);
 /**
- * css() runtime factory of css``
+ * the runtime behind css``. the compiler rewrites every css`` and styled``
+ * call, so what arrives here is never the template the author wrote but its
+ * compiled form: class names, callbacks and css-variable maps (examples in
+ * the loop below). the public typings describe the call before compilation,
+ * which is why this function is internal: mocks/cssLiteral.ts exports the
+ * css the author sees, cast to the public type.
  *
- * /!\ @yak/solid transpiles css`` and styled``
- *
- * This changes the typings of the css`` and styled`` functions.
- * During development the user of @yak/solid wants to work with the
- * typings BEFORE compilation.
- *
- * Therefore this is only an internal function only and it must be cast to any
- * before exported to the user.
- *
- * The internal functioning of css`` is to return a single callback function that runs all functions
- * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classes, and style object as arguments
- * and operate directly on the classes and style objects.
+ * it returns one processor, (props, classes, style) => void, that runs every
+ * compiled piece: class names go into the collector, css values into the
+ * style object
  */
-declare function css<TProps>(styles: TemplateStringsArray, ...values: CSSInterpolation<NoInfer<TProps> & {
-  theme: Accessor<YakTheme>;
-}>[]): ComponentStyles<TProps>;
+declare function css<TProps>(...args: Array<any>): CompiledStyleProcessor<TProps>;
 //#endregion
 //#region runtime/internals/unitPostFix.d.ts
 /**
@@ -293,29 +286,22 @@ declare function css<TProps>(styles: TemplateStringsArray, ...values: CSSInterpo
  *   width: unitPostFix({ $width }) => $width, "px")
  * });
  */
-declare const unitPostFix: (arg: unknown, unit: string) => string | ((props: any) => string | /*elided*/any | undefined) | undefined;
+declare const unitPostFix: (arg: unknown, unit: string) => string | ((props: any) => string | /*elided*/ any | undefined) | undefined;
 //#endregion
 //#region runtime/internals/mergeCssProp.d.ts
+type Source = Record<PropertyKey, unknown>;
 /**
- * This is an internal helper function to merge relevant props of a native element with a css prop.
- * It's automatically added when using the `css` prop in a JSX element.
- * e.g.:
+ * Merges the relevant props of a native element with a css prop. The
+ * compiler adds it for the `css` prop:
  * ```tsx
- * <p
- *  class="foo"
- *  css={css`
- *   color: green;
- * `}
- * {...{ style: { padding: "30px" }}}
- * />
+ * <button class="a" {...props} style={s} css={css`color: green;`} />
+ * ```
+ * compiles to
+ * ```tsx
+ * <button {...__yak_mergeCssProp(css("yak1"), { class: "a" }, props, { style: s })} />
+ * ```
  */
-declare const mergeCssProp: (relevantProps: {
-  class?: string;
-  style?: Record<string, string>;
-} & Record<string, unknown>, cssProp: RuntimeStyleProcessor<unknown> | false | null | undefined) => Record<string, unknown> & {
-  class?: string;
-  style?: Record<string, string>;
-};
+declare const mergeCssProp: (cssProp: RuntimeStyleProcessor<unknown> | false | null | undefined, ...sources: (Source | null | undefined)[]) => Source;
 //#endregion
 //#region runtime/internals/mergeClasses.d.ts
 /**
@@ -331,6 +317,7 @@ declare const mergeCssProp: (relevantProps: {
  * ```tsx
  * <div class={__yak_mergeClassNames("yX", active() && "active")} />
  * ```
+ * combineProps in styled.ts uses it for two attrs layers' classes as well.
  */
 declare const mergeClasses: (yakClass: string, userClass: unknown) => string | undefined;
 //#endregion