@airalogy/aimd-renderer 2.4.1 → 2.5.0

package/dist/vue/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Vue rendering exports
+ */
+export { type AimdComponentRenderer, type AimdRendererContext, type AssetResolver, createAssetRenderer, createCodeBlockRenderer, createComponentRenderer, createEmbeddedRenderer, createMermaidRenderer, createStepCardRenderer, type ElementRenderer, hastToVue, renderToVNodes, type AimdStepCardRendererOptions, type ShikiHighlighter, type VueRendererOptions, } from './vue-renderer';
+export { renderToVue, createRenderer, defaultRenderer, } from '../common/processor';
+export { createAimdRendererMessages, DEFAULT_AIMD_RENDERER_LOCALE, resolveAimdRendererLocale, } from '../locales';
+export type { RenderContext, RenderMode, ProcessorOptions, } from '@airalogy/aimd-core/types';
+export type { AimdAssignerVisibility, AimdRendererOptions, RenderResult } from '../common/processor';
+export type { AimdRendererI18nOptions, AimdRendererLocale, AimdRendererMessages, AimdRendererMessagesInput, } from '../locales';
+//# sourceMappingURL=index.d.ts.map

package/dist/vue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,KAAK,eAAe,EACpB,SAAS,EACT,cAAc,EACd,KAAK,2BAA2B,EAChC,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAA;AAEvB,OAAO,EACL,WAAW,EACX,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EACL,0BAA0B,EAC1B,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,aAAa,EACb,UAAU,EACV,gBAAgB,GACjB,MAAM,2BAA2B,CAAA;AAElC,YAAY,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACpG,YAAY,EACV,uBAAuB,EACvB,kBAAkB,EAClB,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,YAAY,CAAA"}

package/dist/vue/vue-renderer.d.ts

@@ -0,0 +1,138 @@
+import type { Element, Root as HastRoot, RootContent } from "hast";
+import type { Component, VNode, VNodeChild } from "vue";
+import type { AimdNode, RenderContext } from "@airalogy/aimd-core/types";
+import type { AimdRendererI18nOptions, AimdRendererLocale, AimdRendererMessages } from "../locales";
+/**
+ * Extended Element data type
+ */
+export interface AimdElementData {
+    aimd?: AimdNode;
+}
+/**
+ * AIMD component renderer function type
+ * Can return VNode directly or a Promise for async rendering
+ */
+export type AimdComponentRenderer = (node: AimdNode, ctx: AimdRendererContext, children?: VNodeChild[]) => VNode | Promise<VNode> | null;
+/**
+ * Element renderer function type
+ */
+export type ElementRenderer = (node: Element, children: VNodeChild[], ctx: AimdRendererContext) => VNode | null;
+export interface AimdRendererContext extends RenderContext {
+    locale: AimdRendererLocale;
+    messages: AimdRendererMessages;
+}
+export interface AimdStepCardRendererOptions {
+    showScopeLabel?: boolean;
+    showCheckBadge?: boolean;
+    bodyClassName?: string;
+    className?: string;
+}
+/**
+ * Render options
+ */
+export interface VueRendererOptions {
+    /**
+     * Built-in renderer locale
+     */
+    locale?: AimdRendererI18nOptions["locale"];
+    /**
+     * Optional overrides for built-in renderer copy
+     */
+    messages?: AimdRendererI18nOptions["messages"];
+    /**
+     * Render mode shorthand (used when context is not provided)
+     */
+    mode?: RenderContext["mode"];
+    /**
+     * Quiz preview visibility shorthand (used when context is not provided)
+     */
+    quizPreview?: RenderContext["quizPreview"];
+    /**
+     * Render context
+     */
+    context?: RenderContext & Partial<Pick<AimdRendererContext, "locale" | "messages">>;
+    /**
+     * Custom AIMD component renderers
+     * Override default renderers or add new ones
+     */
+    aimdRenderers?: Record<string, AimdComponentRenderer>;
+    /**
+     * Custom HTML element renderers
+     * Render specific HTML tags with custom components
+     */
+    elementRenderers?: Record<string, ElementRenderer>;
+    /**
+     * Component map for rendering Vue components by tag name
+     * e.g., { 'step-renderer': StepRendererComponent }
+     */
+    componentMap?: Record<string, Component>;
+}
+/**
+ * Figure context for tracking figure numbers and references
+ */
+export interface FigureContext {
+    /** Map from fig ID to sequence number */
+    figureNumbers: Map<string, number>;
+    /** Current figure sequence counter */
+    sequence: number;
+}
+/**
+ * Convert HAST node to Vue VNode
+ */
+export declare function hastToVue(node: HastRoot | RootContent, options?: VueRendererOptions, figCtx?: FigureContext): VNodeChild;
+/**
+ * Convert HAST tree to Vue VNode array
+ */
+export declare function renderToVNodes(tree: HastRoot, options?: VueRendererOptions): VNode[];
+/**
+ * Create a custom AIMD renderer that wraps a Vue component
+ */
+export declare function createComponentRenderer(component: Component, propsMapper?: (node: AimdNode, ctx: AimdRendererContext) => Record<string, unknown>): AimdComponentRenderer;
+export declare function createStepCardRenderer(options?: AimdStepCardRendererOptions): AimdComponentRenderer;
+/**
+ * Shiki highlighter type (compatible with @shikijs/core)
+ */
+export interface ShikiHighlighter {
+    codeToHtml: (code: string, options: {
+        lang: string;
+        theme: string;
+    }) => string;
+    codeToTokensWithThemes?: (code: string, options: {
+        lang: string;
+        themes: Record<string, string>;
+    }) => Array<Array<{
+        content: string;
+        variants: Record<string, {
+            color: string;
+        }>;
+    }>>;
+}
+/**
+ * Create code block element renderer with Shiki support
+ * @param highlighter - Shiki highlighter instance (can be reactive ref)
+ * @param defaultTheme - Default theme to use
+ */
+export declare function createCodeBlockRenderer(highlighter: ShikiHighlighter | null | (() => ShikiHighlighter | null), defaultTheme?: string): ElementRenderer;
+/**
+ * Create Mermaid diagram element renderer
+ * @param MermaidComponent - Vue component to render Mermaid diagrams
+ */
+export declare function createMermaidRenderer(MermaidComponent: Component): ElementRenderer;
+/**
+ * Asset resolver function type
+ */
+export type AssetResolver = (id: string) => Promise<{
+    url: string;
+} | null>;
+/**
+ * Create image element renderer with asset resolution
+ * @param AssetComponent - Vue component to render assets (optional)
+ * @param getAsset - Function to resolve asset ID to URL
+ */
+export declare function createAssetRenderer(getAsset?: AssetResolver, AssetComponent?: Component): ElementRenderer;
+/**
+ * Create iframe/video element renderer for embedded content
+ * @param EmbeddedComponent - Vue component to render embedded content
+ */
+export declare function createEmbeddedRenderer(EmbeddedComponent: Component): ElementRenderer;
+//# sourceMappingURL=vue-renderer.d.ts.map

package/dist/vue/vue-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-renderer.d.ts","sourceRoot":"","sources":["../../src/vue/vue-renderer.ts"],"names":[],"mappings":"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"}

package/dist/vue.js

@@ -1,4 +1,4 @@
-import { D as a, c as d, f as s, g as n, h as t, i as o, j as R, k as c, l as m, m as A, n as E, o as l, q as i, e as C } from "./processor-Cv8E7QsA.js";
+import { D as a, c as d, f as s, g as n, h as t, i as o, j as R, k as c, l as m, m as A, n as E, o as l, q as i, e as C } from "./processor-B2mByErv.js";
 export {
   a as DEFAULT_AIMD_RENDERER_LOCALE,
   d as createAimdRendererMessages,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@airalogy/aimd-renderer",
   "type": "module",
-  "version": "2.4.1",
-  "description": "AIMD rendering engines for HTML and Vue",
+  "version": "2.5.0",
+  "description": "AIMD (Airalogy Markdown) rendering engines for HTML and Vue",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -47,21 +47,13 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "type-check": "tsc --noEmit",
-    "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist",
-    "build": "vite build && pnpm run build:types",
-    "dev": "vite build --watch",
-    "test": "pnpm run build && node --test ./tests/*.test.mjs"
-  },
   "peerDependencies": {
     "vue": "^3.5.17"
   },
   "dependencies": {
-    "@airalogy/aimd-core": "workspace:^",
     "@types/hast": "^3.0.4",
     "hast-util-to-html": "^9.0.5",
-    "katex": "catalog:",
+    "katex": "^0.16.28",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
@@ -71,7 +63,8 @@
     "remark-rehype": "^11.1.2",
     "shiki": "^2.5.0",
     "unified": "^11.0.5",
-    "vfile": "^6.0.3"
+    "vfile": "^6.0.3",
+    "@airalogy/aimd-core": "^2.6.0"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",
@@ -80,5 +73,12 @@
     "vite": "^7.1.3",
     "vite-tsconfig-paths": "^5.1.4",
     "vue": "^3.5.17"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist",
+    "build": "vite build && pnpm run build:types",
+    "dev": "vite build --watch",
+    "test": "pnpm run build && node --test ./tests/*.test.mjs"
   }
-}
+}

package/src/__tests__/renderer.test.ts

@@ -109,8 +109,16 @@ describe('resolveQuizPreviewOptions', () => {
 
 describe('parseAndExtract', () => {
   it('extracts var fields', () => {
-    const fields = parseAndExtract('{{var|temperature: float = 36.5}}')
+    const fields = parseAndExtract('{{var|temperature: float = 36.5, gt = 0}}')
     expect(fields.var).toContain('temperature')
+    expect(fields.var_definitions?.[0]).toMatchObject({
+      id: 'temperature',
+      type: 'float',
+      default: 36.5,
+      kwargs: {
+        gt: 0,
+      },
+    })
   })
 
   it('extracts step fields', () => {
@@ -173,6 +181,26 @@ describe('renderToHtmlSync', () => {
     expect(html).toContain('<td')
   })
 
+  it('renders true/false quiz options and report answers', () => {
+    const { html, fields } = renderToHtmlSync(
+      [
+        '```quiz',
+        'id: q_true_false',
+        'type: true_false',
+        'stem: "The sample stayed cold."',
+        'answer: true',
+        '```',
+      ].join('\n'),
+      { mode: 'report' },
+    )
+
+    expect(fields.quiz[0].type).toBe('true_false')
+    expect(html).toContain('True/false')
+    expect(html).toContain('true. True')
+    expect(html).toContain('false. False')
+    expect(html).toContain('Answer: true')
+  })
+
   it('supports host custom element renderers for AIMD nodes', () => {
     const { html } = renderToHtmlSync(
       "{{step|verify, 2, title='Verify Output', subtitle='Cross-check', check=True, result=True}}\n\nStep body content.",

package/src/common/processor.ts

@@ -531,6 +531,7 @@ let mathStylesLoadPromise: Promise<unknown> | null = null
 
 const EMPTY_EXTRACTED_FIELDS: ExtractedAimdFields = {
   var: [],
+  var_definitions: [],
   var_table: [],
   client_assigner: [],
   quiz: [],
@@ -573,6 +574,7 @@ function createAimdParseInput(content: string) {
 function createEmptyExtractedFields(): ExtractedAimdFields {
   return {
     var: [...EMPTY_EXTRACTED_FIELDS.var],
+    var_definitions: [...(EMPTY_EXTRACTED_FIELDS.var_definitions || [])],
     var_table: [...EMPTY_EXTRACTED_FIELDS.var_table],
     client_assigner: [...EMPTY_EXTRACTED_FIELDS.client_assigner],
     quiz: [...EMPTY_EXTRACTED_FIELDS.quiz],
@@ -1171,7 +1173,7 @@ function createAimdHandler(options: AimdRendererOptions = {}) {
       } as Element)
     }
 
-    if (quizType === "choice" && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
+    if ((quizType === "choice" || quizType === "true_false") && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
       children.push({
         type: "element",
         tagName: "ul",
@@ -1190,7 +1192,7 @@ function createAimdHandler(options: AimdRendererOptions = {}) {
       children.push(...buildScaleBandChildren(quizNode))
     }
 
-    if (quizPreview.showAnswers && quizType === "choice" && quizNode.answer !== undefined) {
+    if (quizPreview.showAnswers && (quizType === "choice" || quizType === "true_false") && quizNode.answer !== undefined) {
       const answerText = Array.isArray(quizNode.answer)
         ? quizNode.answer.join(", ")
         : String(quizNode.answer)

package/src/common/unified-token-renderer.ts

@@ -381,7 +381,7 @@ function createAimdRenderers(options: UnifiedTokenRendererOptions): Record<strin
           previewChildren.push(h("div", { class: "aimd-quiz__description" }, quizNode.description))
         }
 
-        if (quizType === "choice" && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
+        if ((quizType === "choice" || quizType === "true_false") && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
           previewChildren.push(
             h("ul", { class: "aimd-quiz__options" }, quizNode.options.map(opt =>
               h("li", `${opt.key}. ${opt.text}`),
@@ -396,7 +396,7 @@ function createAimdRenderers(options: UnifiedTokenRendererOptions): Record<strin
 
         const quizPreview = getQuizPreview()
 
-        if (quizPreview.showAnswers && quizType === "choice" && quizNode.answer !== undefined) {
+        if (quizPreview.showAnswers && (quizType === "choice" || quizType === "true_false") && quizNode.answer !== undefined) {
           const answerText = Array.isArray(quizNode.answer)
             ? quizNode.answer.join(", ")
             : String(quizNode.answer)

package/src/locales.ts

@@ -26,6 +26,7 @@ export interface AimdRendererMessages {
       choice: string
       singleChoice: string
       multipleChoice: string
+      trueFalse: string
       blank: string
       open: string
       scale: string
@@ -86,6 +87,7 @@ const EN_US_MESSAGES: AimdRendererMessages = {
       choice: "choice",
       singleChoice: "Single choice",
       multipleChoice: "Multiple choice",
+      trueFalse: "True/false",
       blank: "blank",
       open: "open",
       scale: "scale",
@@ -122,6 +124,7 @@ const ZH_CN_MESSAGES: AimdRendererMessages = {
       choice: "选择",
       singleChoice: "单选",
       multipleChoice: "多选",
+      trueFalse: "判断",
       blank: "填空",
       open: "开放",
       scale: "量表",
@@ -246,6 +249,8 @@ export function getAimdRendererQuizTypeLabel(
       return messages.quiz.types.choice
     case "blank":
       return messages.quiz.types.blank
+    case "true_false":
+      return messages.quiz.types.trueFalse
     case "open":
       return messages.quiz.types.open
     case "scale":

package/src/vue/vue-renderer.ts

@@ -298,7 +298,7 @@ const defaultAimdRenderers: Record<string, AimdComponentRenderer> = {
           : null,
       ]
 
-      if (quizType === "choice" && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
+      if ((quizType === "choice" || quizType === "true_false") && Array.isArray(quizNode.options) && quizNode.options.length > 0) {
         previewChildren.push(
           h("ul", { class: "aimd-quiz__options" }, quizNode.options.map(opt =>
             h("li", `${opt.key}. ${opt.text}`),
@@ -313,7 +313,7 @@ const defaultAimdRenderers: Record<string, AimdComponentRenderer> = {
 
       const quizPreview = resolveQuizPreviewOptionsFromContext(ctx)
 
-      if (quizPreview.showAnswers && quizType === "choice" && quizNode.answer !== undefined) {
+      if (quizPreview.showAnswers && (quizType === "choice" || quizType === "true_false") && quizNode.answer !== undefined) {
         const answerText = Array.isArray(quizNode.answer)
           ? quizNode.answer.join(", ")
           : String(quizNode.answer)