feat: rewrite rootage core (#510)

docs/app/docs/design/foundation/design-token/[id]/page.tsx

@@ -1,12 +1,8 @@
-import { getRootage } from "@/components/get-rootage";
+import { getRootage, stringifyValueLit } from "@/components/rootage";
 import { TokenLink } from "@/components/token-link";
 import { TypeIndicator } from "@/components/type-indicator";
 import { IconArrowRightLine } from "@daangn/react-monochrome-icon";
-import {
-  resolveReferences,
-  resolveToken,
-  stringifyValueExpression,
-} from "@seed-design/rootage-core";
+import { resolveReferences, resolveToken } from "@seed-design/rootage-core";
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page";
 import type { Metadata } from "next";
 import Link from "next/link";
@@ -51,7 +47,7 @@ export default async function Page({
           ))}
           <div className="flex items-center space-x-2 px-3 py-2 bg-fd-background rounded-md border border-fd-border">
             <TypeIndicator value={value} />
-            <div>{stringifyValueExpression(value)}</div>
+            <div>{stringifyValueLit(value)}</div>
           </div>
         </div>
         <h2>References</h2>

docs/components/component-spec-block.tsx

@@ -1,16 +1,7 @@
 import { Fragment } from "react";
 import { ComponentVariantTable } from "./component-variant-table";
-import { getRootage } from "./get-rootage";
-
-function stringifyVariantKey(key: Record<string, string>) {
-  const entries = Object.entries(key);
-
-  if (entries.length === 0) {
-    return "base";
-  }
-
-  return entries.map(([key, value]) => `${key}=${value}`).join(", ");
-}
+import { getRootage } from "./rootage";
+import { stringifyVariants } from "./rootage";
 
 interface ComponentSpecTableProps {
   id: string;
@@ -24,12 +15,12 @@ export async function ComponentSpecBlock(props: ComponentSpecTableProps) {
     return <div>Component spec {props.id} not found</div>;
   }
 
-  return componentSpec.data.map((variant) => {
-    const variantKey = stringifyVariantKey(variant.key);
+  return componentSpec.body.map((variantDecl) => {
+    const variantKey = stringifyVariants(variantDecl.variants);
     return (
       <Fragment key={variantKey}>
         <h3>{variantKey}</h3>
-        <ComponentVariantTable rootage={rootage} variant={variant} />
+        <ComponentVariantTable rootage={rootage} variant={variantDecl} />
       </Fragment>
     );
   });

docs/components/component-variant-table.tsx

@@ -1,19 +1,13 @@
 "use client";
 
-import {
-  ComponentSpecExpression,
-  resolveToken,
-  RootageCtx,
-  stringifyTokenExpression,
-  stringifyValueExpression,
-  ValueExpression,
-} from "@seed-design/rootage-core";
+import { AST, resolveToken, RootageCtx } from "@seed-design/rootage-core";
 import { useMemo, useState } from "react";
 import { TokenCell } from "./token-cell";
+import { stringifyStates, stringifyTokenLit, stringifyValueLit } from "./rootage";
 
 interface ComponentVariantTableProps {
   rootage: RootageCtx;
-  variant: ComponentSpecExpression[number];
+  variant: AST.VariantDeclaration;
 }
 
 interface TableItem {
@@ -22,7 +16,7 @@ interface TableItem {
   slotKey: string;
   propertyKey: string;
   values: string[];
-  resolvedValue: ValueExpression;
+  resolvedValue: AST.ValueLit;
 }
 
 export function ComponentVariantTable(props: ComponentVariantTableProps) {
@@ -34,28 +28,24 @@ export function ComponentVariantTable(props: ComponentVariantTableProps) {
   const { rootage, variant } = props;
   const tableItems: TableItem[] = useMemo(
     () =>
-      variant.state.flatMap((state) => {
-        const stateKey = state.key.join(", ");
-        return state.slot.flatMap((slot) => {
-          const slotKey = slot.key;
-          return slot.property.map((property) => {
-            const propertyKey = property.key;
+      variant.body.flatMap((stateDecl) => {
+        const stateKey = stringifyStates(stateDecl.states);
+        return stateDecl.body.flatMap((slotDecl) => {
+          const slotKey = slotDecl.slot;
+          return slotDecl.body.map((propertyDecl) => {
+            const propertyKey = propertyDecl.property;
 
-            if (property.value.type === "token") {
-              const { path, value } = resolveToken(
-                rootage,
-                stringifyTokenExpression(property.value),
-                {
-                  global: "default",
-                  color: "theme-light",
-                },
-              );
+            if (propertyDecl.value.kind === "TokenLit") {
+              const { path, value } = resolveToken(rootage, stringifyTokenLit(propertyDecl.value), {
+                global: "default",
+                color: "theme-light",
+              });
               return {
                 id: `${stateKey}/${slotKey}/${propertyKey}`,
                 stateKey,
                 slotKey,
                 propertyKey,
-                values: [...path, stringifyValueExpression(value)],
+                values: [...path, stringifyValueLit(value)],
                 resolvedValue: value,
               };
             }
@@ -65,8 +55,8 @@ export function ComponentVariantTable(props: ComponentVariantTableProps) {
               stateKey,
               slotKey,
               propertyKey,
-              values: [stringifyValueExpression(property.value)],
-              resolvedValue: property.value,
+              values: [stringifyValueLit(propertyDecl.value)],
+              resolvedValue: propertyDecl.value,
             };
           });
         });

docs/components/rootage.ts

@@ -0,0 +1,40 @@
+import { AST, buildContext, css, Document, parse } from "@seed-design/rootage-core";
+
+export function stringifyVariants(variants: AST.VariantExpression[]) {
+  if (variants.length === 0) {
+    return "base";
+  }
+
+  return variants.map(({ name, value }) => `${name}=${value}`).join(", ");
+}
+
+export function stringifyStates(states: AST.StateExpression[]) {
+  return states.map(({ value }) => value).join(", ");
+}
+
+export function stringifyTokenLit(token: AST.TokenLit): Document.TokenRef {
+  return `$${[...token.group, token.key].join(".")}`;
+}
+
+export function stringifyValueLit(lit: AST.ValueLit): string {
+  switch (lit.kind) {
+    case "DimensionLit":
+      return lit.unit === "rem"
+        ? `${css.stringifyValueLit(lit)} (${lit.value}rem)`
+        : css.stringifyValueLit(lit);
+    default:
+      return css.stringifyValueLit(lit);
+  }
+}
+
+export const getRootage = async () => {
+  const index: { resources: { path: string }[] } = await import(
+    "@/public/rootage-next/index.json"
+  ).then((module) => {
+    return module.default;
+  });
+  const models: Document.Model[] = await Promise.all(
+    index.resources.map((resource) => import(`@/public/rootage-next${resource.path}`)),
+  );
+  return buildContext(parse(models));
+};

docs/components/token-cell.tsx

@@ -1,5 +1,5 @@
 import IconArrowDownLine from "@daangn/react-monochrome-icon/IconArrowDownLine";
-import type { ValueExpression } from "@seed-design/rootage-core";
+import type { AST } from "@seed-design/rootage-core";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { Fragment } from "react";
 import { TokenLink } from "./token-link";
@@ -8,7 +8,7 @@ import { TypeIndicator } from "./type-indicator";
 export interface TokenCellProps {
   isExpanded: boolean;
   values: string[];
-  resolvedValue: ValueExpression;
+  resolvedValue: AST.ValueLit;
 }
 
 export function TokenCell(props: TokenCellProps) {

docs/components/token-mapping-table.tsx

@@ -1,16 +1,11 @@
-import {
-  resolveToken,
-  stringifyValueExpression,
-  type TokenRef,
-  type ValueExpression,
-} from "@seed-design/rootage-core";
-import { getRootage } from "@/components/get-rootage";
+import { resolveToken, type AST, type Document } from "@seed-design/rootage-core";
+import { getRootage, stringifyValueLit } from "@/components/rootage";
 import { ExpandableTokenCell } from "@/components/expandable-token-cell";
 import { Fragment } from "react";
 
 interface TokenMapping {
   previousTokenId: string;
-  newTokenIds: TokenRef[];
+  newTokenIds: Document.TokenRef[];
   note?: string;
 }
 
@@ -23,7 +18,7 @@ export interface TokenMappingItem {
   newTokens: {
     id: TokenMapping["newTokenIds"][number];
     values: string[];
-    resolvedValue: ValueExpression;
+    resolvedValue: AST.ValueLit;
   }[];
   note?: TokenMapping["note"];
 }
@@ -41,7 +36,7 @@ export async function TokenMappingTable({ mappings }: TokenMappingTableProps) {
 
       return {
         id: newId,
-        values: [...path, stringifyValueExpression(value)],
+        values: [...path, stringifyValueLit(value)],
         resolvedValue: value,
       };
     }),

docs/components/token-reference.tsx

@@ -1,5 +1,6 @@
-import { resolveToken, stringifyValueExpression } from "@seed-design/rootage-core";
-import { getRootage } from "./get-rootage";
+import { resolveToken } from "@seed-design/rootage-core";
+import { getRootage } from "./rootage";
+import { stringifyValueLit } from "./rootage";
 import { TokenTable, TokenTableItem } from "./token-table";
 
 interface TokenReferenceProps {
@@ -19,7 +20,7 @@ export async function TokenReference(props: TokenReferenceProps) {
       });
       return {
         id: tokenId,
-        values: [...path.slice(1), stringifyValueExpression(value)],
+        values: [...path.slice(1), stringifyValueLit(value)],
         resolvedValue: value,
       };
     });

docs/components/token-table.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { ValueExpression } from "@seed-design/rootage-core";
+import { AST } from "@seed-design/rootage-core";
 import { useState } from "react";
 import { TokenCell } from "./token-cell";
 import { TokenLink } from "./token-link";
 
 export interface TokenTableItem {
   id: string;
   values: string[];
-  resolvedValue: ValueExpression;
+  resolvedValue: AST.ValueLit;
 }
 
 export interface TokenTableProps {

docs/components/type-indicator.tsx

@@ -1,4 +1,4 @@
-import { ValueExpression } from "@seed-design/rootage-core";
+import { AST } from "@seed-design/rootage-core";
 import {
   HourglassIcon,
   LayersIcon,
@@ -8,54 +8,54 @@ import {
   SplineIcon,
 } from "lucide-react";
 
-export function TypeIndicator(props: { value: ValueExpression }) {
+export function TypeIndicator(props: { value: AST.ValueLit }) {
   const { value } = props;
 
-  if (value.type === "color") {
+  if (value.kind === "ColorHexLit") {
     return <div className="w-4 h-4 rounded-full border" style={{ backgroundColor: value.value }} />;
   }
 
-  if (value.type === "dimension") {
+  if (value.kind === "DimensionLit") {
     return (
       <div>
         <RulerIcon className="w-4 h-4" />
       </div>
     );
   }
 
-  if (value.type === "duration") {
+  if (value.kind === "DurationLit") {
     return (
       <div>
         <HourglassIcon className="w-4 h-4" />
       </div>
     );
   }
 
-  if (value.type === "number") {
+  if (value.kind === "NumberLit") {
     return (
       <div>
         <SigmaIcon className="w-4 h-4" />
       </div>
     );
   }
 
-  if (value.type === "shadow") {
+  if (value.kind === "ShadowLit") {
     return (
       <div>
         <LayersIcon className="w-4 h-4" />
       </div>
     );
   }
 
-  if (value.type === "cubicBezier") {
+  if (value.kind === "CubicBezierLit") {
     return (
       <div>
         <SplineIcon className="w-4 h-4" />
       </div>
     );
   }
 
-  if (value.type === "gradient") {
+  if (value.kind === "GradientLit") {
     return (
       <div>
         <PaintbrushIcon className="w-4 h-4" />

docs/components/typography-mapping-table.tsx

@@ -1,10 +1,9 @@
-import { type ComponentSpecData } from "@seed-design/rootage-core";
-import { getRootage } from "@/components/get-rootage";
+import { getRootage } from "@/components/rootage";
 import { Fragment } from "react";
 
 interface TypographyMapping {
   previousTokenId: string;
-  newTextStyleIds: (keyof ComponentSpecData)[];
+  newTextStyleIds: string[];
   note?: string;
 }
 
@@ -22,8 +21,8 @@ export async function TypographyMappingTable({ mappings }: TypographyMappingTabl
   const tableItems: TypographyMapping[] = mappings.map((item) => ({
     previousTokenId: item.previousTokenId,
     newTextStyleIds: item.newTextStyleIds.map((id) => {
-      const typography = rootage.componentSpecEntities.typography.data.find(
-        ({ key }) => "textStyle" in key && key.textStyle === id,
+      const typography = rootage.componentSpecEntities.typography.body.find(({ variants }) =>
+        variants.some((variant) => variant.name === "textStyle" && variant.value === id),
       );
 
       if (!typography) {

docs/package.json

@@ -14,7 +14,7 @@
     "generate:all": "yarn generate:registry && yarn generate:example && yarn generate:rootage",
     "generate:registry": "vite-node scripts/generate-registry.ts",
     "generate:example": "vite-node scripts/generate-example.ts",
-    "generate:rootage": "rootage json public/rootage/",
+    "generate:rootage": "rootage json-legacy public/rootage/ && rootage json public/rootage-next",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },