akanjs 0.0.1 → 2.0.0-beta.1

package/ui/fontCss.ts

@@ -0,0 +1,86 @@
+import {
+  getFontFaces,
+  getFontFallbackName,
+  getFontVariableName,
+  isFontOptimizationEnabled,
+  isFontPreloadEnabled,
+  type ReactFont,
+  type ReactFontDeclaration,
+  type ReactFontFace,
+} from "akanjs/client";
+
+export interface FontPreload {
+  href: string;
+  type: string;
+}
+
+export class FontCss {
+  static getPreloads(fonts: ReactFont[]): FontPreload[] {
+    const seen = new Set<string>();
+    const preloads: FontPreload[] = [];
+    for (const font of fonts) {
+      if (!isFontOptimizationEnabled(font) || !isFontPreloadEnabled(font)) continue;
+      for (const face of getFontFaces(font)) {
+        if (seen.has(face.optimizedSrc)) continue;
+        seen.add(face.optimizedSrc);
+        preloads.push({ href: face.optimizedSrc, type: "font/woff2" });
+      }
+    }
+    return preloads;
+  }
+
+  static getRuntimeCss(fonts: ReactFont[]) {
+    const css = fonts.flatMap((font) => {
+      if (isFontOptimizationEnabled(font)) return [];
+      return [
+        ...getFontFaces(font).map((face) => FontCss.#buildFontFaceRule(face, face.src)),
+        FontCss.#buildRootVariableRule(font),
+      ];
+    });
+    return css.join("\n");
+  }
+
+  static getStyleId(fonts: ReactFont[]) {
+    const key = fonts
+      .map(
+        (font) =>
+          `${font.name}:${getFontFaces(font)
+            .map((face) => `${face.src}:${face.weight}:${face.style}`)
+            .join(",")}`,
+      )
+      .join("|");
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < key.length; i++) {
+      hash ^= key.charCodeAt(i);
+      hash = Math.imul(hash, 0x01000193);
+    }
+    return `akan-fonts-${(hash >>> 0).toString(36)}`;
+  }
+
+  static #buildFontFaceRule(face: ReactFontFace, src: string) {
+    const declarations = [
+      ["font-family", FontCss.#quote(face.font.name)],
+      ["src", `url(${FontCss.#quote(src)})`],
+      ["font-weight", String(face.weight)],
+      ["font-style", face.style],
+      ["font-display", face.font.display ?? "swap"],
+      ...FontCss.#toDeclarationEntries(face.font.declarations),
+      ...FontCss.#toDeclarationEntries(face.path.declarations),
+    ];
+    return `@font-face {\n${declarations.map(([prop, value]) => `  ${prop}: ${value};`).join("\n")}\n}`;
+  }
+
+  static #buildRootVariableRule(font: ReactFont) {
+    return `:root { ${getFontVariableName(font)}: ${FontCss.#quote(font.name)}, ${FontCss.#quote(
+      getFontFallbackName(font),
+    )}; }`;
+  }
+
+  static #toDeclarationEntries(declarations: ReactFontDeclaration[] = []) {
+    return declarations.map((declaration) => [declaration.prop, declaration.value] as const);
+  }
+
+  static #quote(value: string) {
+    return JSON.stringify(value);
+  }
+}

package/ui/index.ts

@@ -0,0 +1,44 @@
+export { animated } from "./animated";
+export { BottomSheet, type BottomSheetRef } from "./BottomSheet";
+export { Button } from "./Button";
+export { ClientSide } from "./ClientSide";
+export { Clipboard } from "./Clipboard";
+export { Constant } from "./Constant";
+export { Copy } from "./Copy";
+export { CsrImage } from "./CsrImage";
+export { Data } from "./Data";
+export { DatePicker } from "./DatePicker";
+export { Dialog } from "./Dialog";
+export { DragAction } from "./DragAction";
+export { DraggableList } from "./DraggableList";
+export { Dropdown } from "./Dropdown";
+export { Empty } from "./Empty";
+export { Field } from "./Field";
+export { FontFace } from "./FontFace";
+export { Image } from "./Image";
+export { InfiniteScroll } from "./InfiniteScroll";
+export { Input } from "./Input";
+export { KeyboardAvoiding } from "./KeyboardAvoiding";
+export { Layout } from "./Layout";
+export { Link } from "./Link";
+export { Load } from "./Load";
+export { Loading } from "./Loading";
+export { Menu } from "./Menu";
+export { Modal } from "./Modal";
+export { Model } from "./Model";
+export { More } from "./More";
+export { ObjectId } from "./ObjectId";
+export { Pagination } from "./Pagination";
+export { Popconfirm } from "./Popconfirm";
+export { Portal } from "./Portal";
+export { Radio } from "./Radio";
+export { RecentTime } from "./RecentTime";
+export { Refresh } from "./Refresh";
+export { ScreenNavigator } from "./ScreenNavigator";
+export { Select } from "./Select";
+export { Signal } from "./Signal";
+export { System, type WebAppManifest } from "./System";
+export { Tab } from "./Tab";
+export { Table } from "./Table";
+export { ToggleSelect } from "./ToggleSelect";
+export { Unauthorized } from "./Unauthorized";