@terrafirmagreg-team/mdx 0.0.0-stage → 1.2.0

package/src/lib/mdx/directive-utils.ts

@@ -0,0 +1,118 @@
+import type {
+  DirectiveNode,
+  JsxAttribute,
+  JsxAttributeValue,
+  MdastNode,
+} from '../../types/mdx';
+
+export type {
+  DirectiveNode,
+  JsxAttribute,
+  JsxAttributeValue,
+  JsxElement,
+  MdastNode,
+} from '../../types/mdx';
+
+import { visit, SKIP, CONTINUE } from 'unist-util-visit';
+
+export function walkContainers(
+  tree: MdastNode,
+  fn: (node: DirectiveNode) => boolean | void,
+): void {
+  visit(tree as never, 'containerDirective', (node) =>
+    fn(node as DirectiveNode) === false ? SKIP : CONTINUE,
+  );
+}
+
+const DIRECTIVE_TYPES = [
+  'containerDirective',
+  'leafDirective',
+  'textDirective',
+];
+
+export function walkDirectives(
+  tree: MdastNode,
+  fn: (node: DirectiveNode) => boolean | void,
+): void {
+  visit(tree as never, DIRECTIVE_TYPES, (node) =>
+    fn(node as DirectiveNode) === false ? SKIP : CONTINUE,
+  );
+}
+
+export function toJsxAttributes(node: DirectiveNode): JsxAttribute[] {
+  return Object.entries(node.attributes ?? {}).map(([name, value]) => ({
+    type: 'mdxJsxAttribute',
+    name,
+    value: value == null || value === '' ? jsxExpression(estreeBoolean(true)) : value,
+  }));
+}
+
+function labelText(node: MdastNode): string {
+  const t = node.type;
+  const v = (node as { value?: unknown }).value;
+  if (typeof v === 'string') return v;
+  if (t === 'textDirective' || t === 'leafDirective') {
+    const d = node as DirectiveNode;
+    const inner = (d.children ?? []).map(labelText).join('');
+    const attrs = Object.entries(d.attributes ?? {})
+      .map(([k, v]) => (v == null ? k : v === true ? k : `${k}="${v}"`))
+      .join(' ');
+    const prefix = t === 'leafDirective' ? '::' : ':';
+    return `${prefix}${d.name ?? ''}${inner ? `[${inner}]` : ''}${attrs ? `{${attrs}}` : ''}`;
+  }
+  return (node.children ?? []).map(labelText).join('');
+}
+
+export function extractDirectiveLabel(node: DirectiveNode): string {
+  for (const child of node.children ?? []) {
+    if (child.type === 'paragraph' && child.data?.directiveLabel) {
+      return (child.children ?? []).map(labelText).join('');
+    }
+  }
+  return '';
+}
+
+export function extractLeafLabel(node: MdastNode): string {
+  return (node.children ?? []).map(labelText).join('');
+}
+
+export function contentChildren(node: DirectiveNode): MdastNode[] {
+  return (node.children ?? []).filter(
+    (child) =>
+      !(child.type === 'paragraph' && child.data?.directiveLabel),
+  );
+}
+
+export function jsxAttr(name: string, value: string | boolean): JsxAttribute {
+  return { type: 'mdxJsxAttribute', name, value };
+}
+
+export function jsxExpression(expression: unknown): JsxAttributeValue {
+  return {
+    type: 'mdxJsxAttributeValueExpression',
+    value: '',
+    data: {
+      estree: {
+        type: 'Program',
+        body: [{ type: 'ExpressionStatement', expression }],
+        sourceType: 'script',
+      },
+    },
+  };
+}
+
+export function estreeString(value: string): unknown {
+  return { type: 'Literal', value, raw: JSON.stringify(value) };
+}
+
+export function estreeStringArray(labels: string[]): unknown {
+  return {
+    type: 'ArrayExpression',
+    elements: labels.map(estreeString),
+  };
+}
+
+export function estreeBoolean(value: boolean): unknown {
+  return { type: 'Literal', value, raw: String(value) };
+}
+

package/src/lib/mdx/directives.ts

@@ -0,0 +1,261 @@
+import {
+  contentChildren,
+  extractDirectiveLabel,
+  extractLeafLabel,
+  jsxAttr,
+  jsxExpression,
+  toJsxAttributes,
+  walkDirectives,
+  type DirectiveNode,
+  type MdastNode,
+} from './directive-utils.ts';
+import { gradientImage } from '@terrafirmagreg-team/ui/lib/mdx/gradient';
+import { createRequire } from 'node:module';
+import { join, relative } from 'node:path';
+
+const require = createRequire(join(process.cwd(), '_'));
+
+function resolvePkgPath(spec: string) {
+  const resolved = require.resolve(`@terrafirmagreg-team/${spec}`);
+  return relative(process.cwd(), resolved).replaceAll('\\', '/');
+}
+
+export function remarkDirectives() {
+  return (tree: MdastNode, file?: { value?: unknown }) => {
+    walkDirectives(tree, (node) => {
+      const { type, name } = node;
+      if (
+        name === 'math' &&
+        (type === 'textDirective' ||
+          type === 'leafDirective' ||
+          type === 'containerDirective')
+      ) {
+        const block = type !== 'textDirective';
+        const tex =
+          type === 'containerDirective'
+            ? containerBody(node, file)
+            : extractLeafLabel(node).trim();
+        Object.assign(node, mathNode(tex, block));
+        return false;
+      }
+      if (type === 'textDirective' && name === 'gradient') {
+        Object.assign(node, {
+          type: 'mdxJsxTextElement',
+          name: 'span',
+          attributes: [
+            styleAttr(gradientStyle(node)),
+            { type: 'mdxJsxAttribute', name: 'data-md', value: 'gradient' },
+          ],
+        });
+        return;
+      }
+      if (
+        name === 'glow' &&
+        (type === 'textDirective' ||
+          type === 'leafDirective' ||
+          type === 'containerDirective')
+      ) {
+        Object.assign(node, {
+          type:
+            type === 'textDirective'
+              ? 'mdxJsxTextElement'
+              : 'mdxJsxFlowElement',
+          name: 'span',
+          attributes: [
+            styleAttr(glowStyle(node)),
+            { type: 'mdxJsxAttribute', name: 'data-md', value: 'glow' },
+          ],
+        });
+        return type === 'containerDirective' ? undefined : false;
+      }
+      if (type === 'textDirective' && name === 'icon') {
+        Object.assign(node, {
+          type: 'mdxJsxTextElement',
+          name: 'Icon',
+          attributes: [jsxAttr('name', extractLeafLabel(node).trim())],
+          children: [],
+        });
+        return;
+      }
+      if (
+        name === 'card' &&
+        (type === 'leafDirective' || type === 'containerDirective')
+      ) {
+        const title =
+          type === 'leafDirective'
+            ? extractLeafLabel(node)
+            : extractDirectiveLabel(node);
+        Object.assign(node, {
+          type: 'mdxJsxFlowElement',
+          name: 'Card',
+          attributes: [
+            jsxAttr('title', title.trim()),
+            ...toJsxAttributes(node),
+          ],
+          children:
+            type === 'containerDirective' ? contentChildren(node) : [],
+        });
+        return false;
+      }
+      if (type === 'containerDirective' && name === 'cards') {
+        Object.assign(node, {
+          type: 'mdxJsxFlowElement',
+          name: 'Cards',
+          attributes: toJsxAttributes(node),
+          children: contentChildren(node),
+        });
+        return;
+      }
+      if (type === 'leafDirective' && name === 'type-table') {
+        const attrs = node.attributes;
+        if (typeof attrs?.path === 'string' && attrs.path.startsWith('pkg:'))
+          attrs.path = resolvePkgPath(attrs.path.slice(4));
+        Object.assign(node, {
+          type: 'mdxJsxFlowElement',
+          name: 'auto-type-table',
+          attributes: toJsxAttributes(node),
+          children: [],
+        });
+        return false;
+      }
+      if (type === 'leafDirective' && name === 'recipe') {
+        Object.assign(node, {
+          type: 'mdxJsxFlowElement',
+          name: 'Recipe',
+          attributes: [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'id',
+              value: extractLeafLabel(node).trim(),
+            },
+            ...toJsxAttributes(node),
+          ],
+          children: [],
+        });
+        return false;
+      }
+      return undefined;
+    });
+  };
+}
+
+function mathNode(tex: string, block: boolean): MdastNode {
+  const code = {
+    type: 'element',
+    tagName: 'code',
+    properties: { className: ['language-math', 'math-display'] },
+    children: [{ type: 'text', value: tex }],
+  };
+  return block
+    ? ({
+        type: 'math',
+        value: tex,
+        data: { hName: 'pre', hChildren: [code] },
+      } as unknown as MdastNode)
+    : ({
+        type: 'inlineMath',
+        value: tex,
+        data: {
+          hName: 'code',
+          hProperties: { className: ['language-math', 'math-inline'] },
+          hChildren: [{ type: 'text', value: tex }],
+        },
+      } as unknown as MdastNode);
+}
+
+function containerBody(
+  node: DirectiveNode,
+  file?: { value?: unknown },
+): string {
+  const source = typeof file?.value === 'string' ? file.value : '';
+  const pos = node.position as
+    | { start?: { offset?: number }; end?: { offset?: number } }
+    | undefined;
+  const start = pos?.start?.offset;
+  const end = pos?.end?.offset;
+  if (typeof start !== 'number' || typeof end !== 'number' || !source)
+    return '';
+  const lines = source.slice(start, end).split('\n');
+  return lines
+    .slice(1, lines[lines.length - 1]?.trim() === ':::' ? -1 : undefined)
+    .join('\n')
+    .trim();
+}
+
+function estreeObject(entries: [string, string][]): unknown {
+  return {
+    type: 'ObjectExpression',
+    properties: entries.map(([key, value]) => ({
+      type: 'Property',
+      key: { type: 'Literal', value: key },
+      value: { type: 'Literal', value, raw: JSON.stringify(value) },
+      kind: 'init',
+      computed: false,
+      shorthand: false,
+    })),
+  };
+}
+
+function styleAttr(entries: [string, string][]) {
+  return {
+    type: 'mdxJsxAttribute' as const,
+    name: 'style',
+    value: jsxExpression(estreeObject(entries)),
+  };
+}
+
+function attr(node: DirectiveNode, name: string) {
+  const value = node.attributes?.[name];
+  return typeof value === 'string' && value ? value : undefined;
+}
+
+function hasFlag(node: DirectiveNode, name: string) {
+  return node.attributes?.[name] !== undefined;
+}
+
+function gradientStyle(node: DirectiveNode): [string, string][] {
+  return [
+    ['backgroundImage', gradientImage(attrObject(node))],
+    ['WebkitBackgroundClip', 'text'],
+    ['backgroundClip', 'text'],
+    ['WebkitTextFillColor', 'transparent'],
+    ['color', 'transparent'],
+  ];
+}
+
+function glowStyle(node: DirectiveNode): [string, string][] {
+  const from = attr(node, 'from') ?? '#fa18cf';
+  const to = attr(node, 'to') ?? '#ff7967';
+  const gradient = gradientImage(attrObject(node));
+  const boxBg = `radial-gradient(color-mix(in srgb, ${from} 18%, transparent), color-mix(in srgb, ${to} 8%, transparent))`;
+  const style: [string, string][] = [
+    ['display', 'block'],
+    ['borderRadius', '20px'],
+    ['border', '1px solid transparent'],
+    ['padding', '0.625rem 1rem'],
+    ['marginBottom', '1.5rem'],
+    ['textAlign', 'center'],
+    ['backgroundImage', hasFlag(node, 'gradient') ? `${gradient}, ${boxBg}` : boxBg],
+    ['boxShadow', `0 10px 20px color-mix(in srgb, ${from} 25%, transparent)`],
+  ];
+  if (hasFlag(node, 'gradient')) {
+    style.push(
+      ['WebkitBackgroundClip', 'text, border-box'],
+      ['backgroundClip', 'text, border-box'],
+      ['WebkitTextFillColor', 'transparent'],
+      ['color', 'transparent'],
+    );
+  }
+  if (hasFlag(node, 'fade')) style.push(['borderImage', `${gradient} 1`]);
+  return style;
+}
+
+function attrObject(node: DirectiveNode) {
+  return {
+    from: attr(node, 'from'),
+    to: attr(node, 'to'),
+    dir: attr(node, 'dir'),
+    image: attr(node, 'image'),
+  };
+}
+

package/src/lib/mdx/game-export.ts

@@ -0,0 +1,110 @@
+import {
+  contentChildren,
+  extractDirectiveLabel,
+  extractLeafLabel,
+  estreeBoolean,
+  estreeString,
+  jsxAttr,
+  jsxExpression,
+  walkDirectives,
+  type DirectiveNode,
+  type JsxAttribute,
+  type MdastNode,
+} from './directive-utils.ts';
+
+const COMPONENTS: Record<string, string> = {
+  item: 'ItemEntry',
+  block: 'BlockEntry',
+  fluid: 'FluidEntry',
+  entity: 'EntityEntry',
+  tag: 'TagEntry',
+  quest: 'QuestEntry',
+  guide: 'GuideEntry',
+  multiblock: 'Multiblock',
+  image: 'DocsImage',
+  story: 'Story',
+};
+
+const LEAF_KEY: Record<string, string> = {
+  image: 'src',
+  story: 'name',
+};
+
+const LABEL_ATTR: Record<string, string> = {
+  image: 'alt',
+};
+
+function pageDataset(file: { path?: string }): string | undefined {
+  return file.path
+    ?.replaceAll('\\', '/')
+    .match(/content\/docs\/([^/]+)\/[^/]+\//)?.[1];
+}
+
+export function remarkGameExport() {
+  return (tree: MdastNode, file: { path?: string }) => {
+    const pack = pageDataset(file);
+    walkDirectives(tree, (directive) => {
+      const name = directive.name ?? '';
+      const component = COMPONENTS[name];
+      if (!component) return;
+      if (
+        directive.type !== 'leafDirective' &&
+        directive.type !== 'containerDirective'
+      )
+        return;
+
+      const attrs = toAttributes(directive);
+      if (
+        name === 'image' &&
+        pack &&
+        directive.attributes?.pack == null &&
+        directive.attributes?.defaultPack == null
+      ) {
+        attrs.push(jsxAttr('defaultPack', pack));
+      }
+      const isLeaf = directive.type === 'leafDirective';
+      const label = (
+        isLeaf
+          ? extractLeafLabel(directive)
+          : extractDirectiveLabel(directive)
+      ).trim();
+      const labelAttr = isLeaf
+        ? (LEAF_KEY[name] ?? 'id')
+        : (LABEL_ATTR[name] ?? 'label');
+      if (label && labelAttr) attrs.unshift(jsxAttr(labelAttr, label));
+
+      let children = isLeaf ? [] : contentChildren(directive);
+      if (name === 'multiblock' && !isLeaf) {
+        const code = directive.children?.find(
+          (child) => child.type === 'code',
+        ) as { value?: string } | undefined;
+        if (code?.value) {
+          attrs.unshift(jsxAttr('spec', code.value));
+          children = [];
+        }
+      }
+
+      Object.assign(directive, {
+        type: 'mdxJsxFlowElement',
+        name: component,
+        attributes: attrs,
+        children,
+      });
+      return false;
+    });
+  };
+}
+
+function toAttributes(directive: DirectiveNode): JsxAttribute[] {
+  return Object.entries(directive.attributes ?? {}).map(([name, value]) => ({
+    type: 'mdxJsxAttribute' as const,
+    name,
+    value:
+      value == null || value === ''
+        ? jsxExpression(estreeBoolean(true))
+        : typeof value === 'string'
+          ? value
+          : jsxExpression(estreeString(String(value))),
+  }));
+}
+

package/src/lib/mdx/html-style.ts

@@ -0,0 +1,136 @@
+import type { MdastNode } from './directive-utils.ts';
+
+type NodeWithValue = MdastNode & { value: string };
+type NodeWithChildren = MdastNode & { children: MdastNode[] };
+
+function objectToCss(body: string): string | undefined {
+  const entries: string[] = [];
+  const re = /(\w+)\s*:\s*['"]([^'"]*)['"]/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(body)) !== null) entries.push(`${m[1]}: ${m[2]}`);
+  return entries.length ? entries.join('; ') : undefined;
+}
+
+const JSX_ATTR = /(\w[\w-]*)=\{\{([\s\S]*?)\}\}/g;
+
+function rewriteAttrs(html: string): string {
+  return html.replace(JSX_ATTR, (all, attr: string, body: string) => {
+    if (attr !== 'style') return all;
+    const css = objectToCss(body);
+    return css ? `style="${css}"` : all;
+  });
+}
+
+const OPEN_TAG = /<([a-zA-Z][\w-]*)((?:[^>"']|"[^"]*"|'[^']*'|\{\{[\s\S]*?\}\})*?)>/;
+
+function stylesFromTag(tag: string): string | undefined {
+  const m = /style=\{\{([\s\S]*?)\}\}/.exec(tag);
+  return m ? objectToCss(m[1]!) : undefined;
+}
+
+function elementNode(
+  tag: string,
+  hName: string,
+  children: MdastNode[],
+): MdastNode {
+  const style = stylesFromTag(tag);
+  return {
+    type: 'emphasis',
+    children,
+    data: {
+      hName,
+      ...(style ? { hProperties: { style } } : {}),
+    },
+  } as MdastNode;
+}
+
+function textNode(value: string): MdastNode {
+  return { type: 'text', value } as MdastNode;
+}
+
+export function remarkHtmlStyle() {
+  return (tree: MdastNode) => {
+    const visitChildren = (parent: NodeWithChildren) => {
+      const kids = parent.children;
+      for (let i = 0; i < kids.length; i++) {
+        const child = kids[i]!;
+        if (child.type === 'html' && typeof child.value === 'string') {
+          (child as NodeWithValue).value = rewriteAttrs(child.value);
+        } else if (
+          child.type === 'text' &&
+          typeof child.value === 'string' &&
+          child.value.includes('={{')
+        ) {
+          if (fuseJsxStyleTags(kids, i)) i--;
+        } else if (child.children) {
+          visitChildren(child as NodeWithChildren);
+        }
+      }
+    };
+    visitChildren(tree as NodeWithChildren);
+  };
+}
+
+function fuseJsxStyleTags(kids: MdastNode[], i: number): boolean {
+  const text = kids[i] as NodeWithValue;
+  let open: RegExpExecArray | null;
+  const re = new RegExp(OPEN_TAG.source, 'g');
+  do {
+    open = re.exec(text.value);
+  } while (open && !open[2]?.includes('={{'));
+  if (!open) return false;
+
+  const [openTag, tagName] = open;
+  const prefix = text.value.slice(0, open.index);
+  const rest = text.value.slice(open.index + openTag.length);
+
+  const closeSelf = new RegExp(`</${tagName}\\s*>`).exec(rest);
+  if (closeSelf) {
+    const end = closeSelf.index + closeSelf[0].length;
+    kids.splice(
+      i,
+      1,
+      ...compact([
+        prefix ? textNode(prefix) : undefined,
+        elementNode(openTag, tagName, [textNode(rest.slice(0, closeSelf.index))]),
+        rest.slice(end) ? textNode(rest.slice(end)) : undefined,
+      ]),
+    );
+    return true;
+  }
+
+  for (let j = i + 1; j < kids.length; j++) {
+    const sib = kids[j]!;
+    if (
+      sib.type === 'html' &&
+      typeof sib.value === 'string' &&
+      new RegExp(`^</${tagName}\\s*>$`).test(sib.value.trim())
+    ) {
+      const inner = rest ? [textNode(rest)] : [];
+      kids.splice(
+        i,
+        j - i + 1,
+        ...compact([
+          prefix ? textNode(prefix) : undefined,
+          elementNode(openTag, tagName, [...inner, ...kids.slice(i + 1, j)]),
+        ]),
+      );
+      return true;
+    }
+  }
+
+  kids.splice(
+    i,
+    1,
+    ...compact([
+      prefix ? textNode(prefix) : undefined,
+      elementNode(openTag, tagName, rest ? [textNode(rest)] : []),
+    ]),
+  );
+  return true;
+}
+
+function compact(nodes: (MdastNode | undefined)[]): MdastNode[] {
+  return nodes.filter((n): n is MdastNode => n !== undefined);
+}
+