@morlay/dsh-client-ui-primitives 0.0.2-alpha.0

package/src/client/styling/styling.ts

@@ -0,0 +1,137 @@
+import type { CSSProps } from "./css.ts";
+import { Token } from "./token.ts";
+import { isNull, isPlainObject, isUndefined, toMerged } from "./toolkit.ts";
+
+enum RuleType {
+  global,
+  keyframes,
+  scoped,
+  scopedClass,
+}
+
+interface Sheet {
+  id: string;
+  contents: string[];
+  selector: string | undefined;
+}
+
+export class Styling {
+  static create(): Styling {
+    return new Styling();
+  }
+
+  static toRule(sheet: Sheet): string {
+    return sheet.selector === undefined
+      ? sheet.contents.join("")
+      : `${sheet.selector} {${sheet.contents.join("")} }`;
+  }
+
+  #token = new Token();
+  #sheets = new Map<string, Sheet>();
+  #injected = new Set<string>();
+
+  props = (...styles: (CSSProps | false | null | undefined)[]): Record<string, string> => {
+    const merged = mergeStyles(styles);
+    if (Object.keys(merged).length === 0) return {};
+    const sheet = this.#sheet(RuleType.scoped, this.#rules(merged));
+    return sheet === undefined ? {} : { [`data-css-${sheet.id}`]: "" };
+  };
+
+  keyframes = (frames: Record<string, CSSProps> = {}): string => {
+    const sheet = this.#sheet(RuleType.keyframes, this.#rules(frames as unknown as CSSProps));
+    return sheet?.id ?? "anim-none";
+  };
+
+  injectGlobals = (styles: Record<string, CSSProps> = {}): void => {
+    for (const [name, style] of Object.entries(styles)) {
+      this.#sheet(RuleType.global, this.#rules(style), name);
+    }
+  };
+
+  className = (...styles: (CSSProps | false | null | undefined)[]): string => {
+    const merged = mergeStyles(styles);
+    if (Object.keys(merged).length === 0) return "";
+    const sheet = this.#sheet(RuleType.scopedClass, this.#rules(merged));
+    return sheet === undefined ? "" : `cls-${sheet.id}`;
+  };
+
+  sheets = (): string[] => [...this.#sheets.values()].map((sheet) => Styling.toRule(sheet));
+
+  #sheet(type: RuleType, rules: Generator<string>, selector?: string): Sheet | undefined {
+    let hash = 0;
+    const contents: string[] = [];
+    for (const rule of rules) {
+      contents.push(rule);
+      hash = incrementalHash(rule, hash);
+    }
+    if (selector !== undefined) hash = incrementalHash(selector, hash);
+    if (hash === 0) return undefined;
+
+    let id = selector ?? "";
+    if (type === RuleType.scoped) id = `s${hash.toString(36)}`;
+    if (type === RuleType.scopedClass) id = `c${hash.toString(36)}`;
+    if (type === RuleType.global) id = `g${hash.toString(36)}`;
+    if (type === RuleType.keyframes) id = `a${hash.toString(36)}`;
+
+    let resolvedSelector = selector;
+    if (resolvedSelector === undefined) {
+      if (type === RuleType.keyframes) resolvedSelector = `@keyframes ${id}`;
+      if (type === RuleType.scoped) resolvedSelector = `[data-css-${id}]`;
+      if (type === RuleType.scopedClass) resolvedSelector = `.cls-${id}`;
+    }
+
+    const sheet: Sheet = { id, contents, selector: resolvedSelector };
+    const existing = this.#sheets.get(id);
+    if (existing !== undefined && existing.contents.join("") === contents.join("")) return existing;
+    this.#sheets.set(id, sheet);
+    this.#inject(sheet);
+    return sheet;
+  }
+
+  #inject(sheet: Sheet): void {
+    if (this.#injected.has(sheet.id)) return;
+    this.#injected.add(sheet.id);
+    if (typeof document === "undefined") return;
+    const element = document.createElement("style");
+    element.setAttribute("data-css", sheet.id);
+    element.textContent = Styling.toRule(sheet);
+    document.head.appendChild(element);
+  }
+
+  *#rules(styles: CSSProps): Generator<string> {
+    const nested = new Map<string, CSSProps>();
+
+    for (const [key, value] of Object.entries(styles)) {
+      if (isNull(value) || isUndefined(value)) continue;
+      if (isPlainObject(value)) {
+        nested.set(key, value as unknown as CSSProps);
+        continue;
+      }
+      yield ` ${this.#token.prop(key)}: ${this.#token.normalize(value)};`;
+    }
+
+    for (const [key, value] of nested.entries()) {
+      yield ` ${key} {`;
+      yield* this.#rules(value);
+      yield " }";
+    }
+  }
+}
+
+function mergeStyles(styles: readonly (CSSProps | false | null | undefined)[]): CSSProps {
+  return styles.reduce<CSSProps>(
+    (accumulated, style) => (style ? (toMerged(accumulated, style) as CSSProps) : accumulated),
+    {},
+  );
+}
+
+function incrementalHash(value: string, previous = 0): number {
+  let hash = previous;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(index);
+    hash &= 0x7fffffff;
+  }
+  return hash;
+}
+
+export const styling = Styling.create();

package/src/client/styling/token.ts

@@ -0,0 +1,275 @@
+import type { CSSProps, CSSValue } from "./css.ts";
+import {
+  isFunction,
+  isNull,
+  isPlainObject,
+  isString,
+  isUndefined,
+  mapKeys,
+  toMerged,
+} from "./toolkit.ts";
+
+const cssVarSymbol = Symbol("cssVar");
+const tokensSymbol = Symbol("tokens");
+const tokenInstSymbol = Symbol("tokenInst");
+
+export interface CSSVarRef {
+  (): Iterable<string>;
+  toString(): string;
+  [Symbol.toPrimitive](hint: string): string;
+}
+
+export type TokenVars<T> = (T extends string | true
+  ? CSSVarRef
+  : { readonly [K in keyof T]: TokenVars<T[K]> }) &
+  CSSVarRef;
+
+export type Tokens = Record<string, unknown>;
+
+const SELF = "$";
+
+function tokenVars<T extends Tokens>(token: Token, tokens: T, path: string[]): TokenVars<T> {
+  const reserved = new Set(["constructor", "toJSON", "__proto__"]);
+
+  return new Proxy(() => {}, {
+    apply() {
+      return Token.fallbackVar(token.cssVar(path));
+    },
+    get(_target, property) {
+      if (
+        property === Symbol.toPrimitive ||
+        property === Symbol.toStringTag ||
+        property === "toString"
+      ) {
+        return () => `var(${token.cssVar(path)})`;
+      }
+      if (property === "valueOf") return () => Token.fallbackVar(token.cssVar(path));
+      if (property === tokenInstSymbol) return token;
+      if (property === tokensSymbol) return tokens;
+      if (property === cssVarSymbol) return token.cssVar(path);
+      if (!isString(property) || reserved.has(property)) return undefined;
+      const next = (tokens as Record<string, unknown>)[property];
+      if (isUndefined(next)) return undefined;
+      return tokenVars(token, next as Tokens, [...path, property]);
+    },
+  }) as unknown as TokenVars<T>;
+}
+
+export class Token {
+  static vars<T extends Tokens>(tokens: T, options: { prefix?: string } = {}): TokenVars<T> {
+    return tokenVars<T>(new Token(options.prefix ?? ""), tokens, []);
+  }
+
+  static extendsVars<T extends Tokens, E extends Tokens>(
+    vars: TokenVars<T>,
+    extra: E,
+  ): TokenVars<T & E> {
+    const tokens = (vars as unknown as Record<symbol, unknown>)[tokensSymbol] ?? {};
+    return Token.vars(toMerged(tokens, extra) as T & E);
+  }
+
+  static assignVars<T extends Tokens>(
+    vars: TokenVars<T>,
+    overwrites?: Partial<T>,
+  ): Record<`--${string}`, CSSValue> {
+    const tokens = (overwrites ??
+      (vars as unknown as Record<symbol, unknown>)[tokensSymbol] ??
+      {}) as T;
+    const token =
+      ((vars as unknown as Record<symbol, unknown>)[tokenInstSymbol] as Token | undefined) ??
+      new Token("");
+
+    const result: Record<string, CSSValue> = {};
+    for (const [name, value] of flattenTokens(token, tokens, []))
+      result[name] = token.normalize(value);
+    return result as Record<`--${string}`, CSSValue>;
+  }
+
+  static variants(variants: Record<string, CSSProps>): Record<string, CSSProps> {
+    return mapKeys(variants, (key) => `&[data-variant="${key}"]`) as Record<string, CSSProps>;
+  }
+
+  static val<T extends string | number = string>(
+    strings: TemplateStringsArray,
+    ...values: CSSValue<T>[]
+  ): () => Iterable<T> {
+    return function* (): Iterable<T> {
+      for (let index = 0; index < strings.length; index += 1) {
+        const literal = strings[index];
+        if (literal) yield literal as T;
+        if (index >= values.length) continue;
+        const value = values[index];
+        yield* isFunction(value) ? value() : [value as T];
+      }
+    };
+  }
+
+  static calc<T extends string | number = string>(
+    strings: TemplateStringsArray,
+    ...values: CSSValue<T>[]
+  ): () => Iterable<T> {
+    return combinator("calc(", ")", strings, values);
+  }
+
+  static min<T extends string | number = string>(
+    strings: TemplateStringsArray,
+    ...values: CSSValue<T>[]
+  ): () => Iterable<T> {
+    return combinator("min(", ")", strings, values);
+  }
+
+  static max<T extends string | number = string>(
+    strings: TemplateStringsArray,
+    ...values: CSSValue<T>[]
+  ): () => Iterable<T> {
+    return combinator("max(", ")", strings, values);
+  }
+
+  static url<T extends string | number = string>(
+    strings: TemplateStringsArray,
+    ...values: CSSValue<T>[]
+  ): () => Iterable<T> {
+    return combinator("url(", ")", strings, values);
+  }
+
+  static colorMix<T extends string | number = string>(
+    strings: TemplateStringsArray,
+    ...values: CSSValue<T>[]
+  ): () => Iterable<T> {
+    return combinator("color-mix(", ")", strings, values);
+  }
+
+  static colorScale(
+    color: CSSValue<string>,
+    options: {
+      alpha?: CSSValue<number>;
+      lightness?: CSSValue<number>;
+      saturation?: CSSValue<number>;
+      whiteness?: CSSValue<number>;
+      blackness?: CSSValue<number>;
+    } = {},
+  ): CSSValue<string> {
+    const channel = (
+      name: string,
+      amount: CSSValue<number>,
+      max: number,
+    ): (() => Iterable<string>) =>
+      Token.calc<string>`${name as unknown as string} + (${String(max)} - ${name as unknown as string}) * max(${amount as unknown as CSSValue<string>}, 0) + ${name as unknown as string} * min(${amount as unknown as CSSValue<string>}, 0)`;
+    const mix = (
+      from: CSSValue<string>,
+      to: CSSValue<string>,
+      amount: CSSValue<number>,
+    ): (() => Iterable<string>) =>
+      Token.colorMix<string>`in srgb, ${from}, ${to} ${Token.calc<string>`${amount as unknown as CSSValue<string>} * 100%`}`;
+
+    let result: CSSValue<string> = color;
+    if (
+      !isUndefined(options.alpha) ||
+      !isUndefined(options.lightness) ||
+      !isUndefined(options.saturation)
+    ) {
+      result = Token.val<string>`hsl(from ${result} h ${
+        isUndefined(options.saturation)
+          ? ("s" as unknown as CSSValue<string>)
+          : channel("s", options.saturation, 100)
+      } ${isUndefined(options.lightness) ? ("l" as unknown as CSSValue<string>) : channel("l", options.lightness, 100)} / ${
+        isUndefined(options.alpha)
+          ? ("alpha" as unknown as CSSValue<string>)
+          : channel("alpha", options.alpha, 1)
+      })`;
+    }
+    if (!isUndefined(options.whiteness)) result = mix(result, "white", options.whiteness);
+    if (!isUndefined(options.blackness)) result = mix(result, "black", options.blackness);
+    return result;
+  }
+
+  static fallbackVar<T extends string | number = string>(
+    value: CSSValue<T>,
+    ...fallbacks: CSSValue<T>[]
+  ): CSSValue<T> {
+    return Object.assign(
+      function* (): Iterable<T> {
+        yield "var(" as T;
+        for (const [index, item] of [value, ...fallbacks].entries()) {
+          if (index > 0) yield ", " as T;
+          yield* asIterable(item);
+        }
+        yield ")" as T;
+      },
+      { [cssVarSymbol]: value },
+    );
+  }
+
+  static collect<T extends string | number>(value: Iterable<T> | (() => Iterable<T>)): string {
+    const iterable = isFunction(value) ? value() : value;
+    let result = "";
+    for (const item of iterable) result += `${item}`;
+    return result;
+  }
+
+  constructor(public readonly prefix: string = "") {}
+
+  prop = (key: string): string => (key.startsWith("--") ? key : kebabCase(key));
+
+  normalize = (input: unknown): string => {
+    const value = isFunction(input) ? input() : input;
+    if (typeof value === "number") return `${value}`;
+    if (typeof value === "string") return value;
+    if (isUndefined(value) || isNull(value)) return "";
+
+    if (isFunction(value)) return Token.collect(value as () => Iterable<string | number>);
+    if (isPlainObject(value) && Symbol.iterator in value)
+      return Token.collect(value as Iterable<string | number>);
+    return "";
+  };
+
+  cssVar = (paths: readonly string[]): string =>
+    `--${[this.prefix, ...paths].filter(Boolean).join("-")}`;
+}
+
+function combinator<T extends string | number>(
+  open: string,
+  close: string,
+  strings: TemplateStringsArray,
+  values: CSSValue<T>[],
+): () => Iterable<T> {
+  return function* (): Iterable<T> {
+    yield open as T;
+    yield* Token.val<T>(strings, ...values)();
+    yield close as T;
+  };
+}
+
+function* asIterable<T extends string | number>(value: CSSValue<T>): Iterable<T> {
+  const resolved: unknown = isFunction(value) ? (value as () => unknown)() : value;
+
+  const variable = (resolved as Record<symbol, unknown> | undefined)?.[cssVarSymbol];
+  if (!isUndefined(variable)) {
+    yield variable as T;
+    return;
+  }
+  if (typeof resolved === "object" && resolved !== null && Symbol.iterator in resolved) {
+    yield* resolved as Iterable<T>;
+    return;
+  }
+  yield resolved as T;
+}
+
+function* flattenTokens(
+  token: Token,
+  value: Tokens,
+  parents: string[],
+): Generator<[string, unknown]> {
+  for (const [property, child] of Object.entries(value)) {
+    if (property === SELF) continue;
+    if (isPlainObject(child)) {
+      yield* flattenTokens(token, child, [...parents, property]);
+      continue;
+    }
+    yield [token.cssVar([...parents, property]), child];
+  }
+}
+
+function kebabCase(value: string): string {
+  return value.replace(/([A-Z])/g, "-$1").toLowerCase();
+}

package/src/client/styling/toolkit.ts

@@ -0,0 +1,37 @@
+export function isUndefined(value: unknown): value is undefined {
+  return value === undefined;
+}
+
+export function isNull(value: unknown): value is null {
+  return value === null;
+}
+
+export function isString(value: unknown): value is string {
+  return typeof value === "string";
+}
+
+export function isFunction(value: unknown): value is (...args: never[]) => unknown {
+  return typeof value === "function";
+}
+
+export function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function toMerged<T>(target: T, source: unknown): T {
+  if (!isPlainObject(target) || !isPlainObject(source)) return source as T;
+  const result: Record<string, unknown> = { ...target };
+  for (const [key, value] of Object.entries(source)) {
+    result[key] = key in result ? toMerged(result[key], value) : value;
+  }
+  return result as T;
+}
+
+export function mapKeys<T, K extends string>(
+  source: Record<string, T>,
+  map: (key: string, value: T) => K,
+): Record<K, T> {
+  const result = {} as Record<K, T>;
+  for (const [key, value] of Object.entries(source)) result[map(key, value)] = value;
+  return result;
+}