@antv/infographic 0.1.3 → 0.1.4

package/esm/runtime/Infographic.js

@@ -1,40 +1,55 @@
 import { jsx as _jsx } from "@antv/infographic/jsx-runtime";
 import EventEmitter from 'eventemitter3';
-import { cloneDeep } from 'lodash-es';
 import { Editor } from '../editor';
 import { exportToPNGString, exportToSVGString, } from '../exporter';
 import { renderSVG } from '../jsx';
 import { parseOptions, } from '../options';
 import { Renderer } from '../renderer';
+import { parseSyntax } from '../syntax';
 import { getTypes, parseSVG } from '../utils';
 import { DEFAULT_OPTIONS } from './options';
-import { mergeOptions } from './utils';
+import { cloneOptions, isCompleteParsedInfographicOptions, mergeOptions, } from './utils';
 export class Infographic {
     constructor(options) {
         this.rendered = false;
         this.emitter = new EventEmitter();
         this.node = null;
-        this.options = {
-            ...options,
-            data: cloneDeep(options.data),
-            elements: cloneDeep(options.elements || []),
-        };
-        this.parsedOptions = parseOptions(mergeOptions(DEFAULT_OPTIONS, this.options));
+        this.setOptions(options);
     }
     getOptions() {
         return this.options;
     }
+    setOptions(options) {
+        const { options: parsedOptions, errors, warnings, } = parseSyntaxOptions(options);
+        this.options = mergeOptions(this.options || {}, parsedOptions);
+        this.parsedOptions = parseOptions(mergeOptions(DEFAULT_OPTIONS, this.options));
+        if (warnings.length) {
+            this.emitter.emit('warning', warnings);
+        }
+        if (errors.length) {
+            this.emitter.emit('error', errors);
+        }
+    }
     /**
      * Render the infographic into the container
      */
-    render() {
+    render(options) {
+        if (options)
+            this.setOptions(options);
+        const parsedOptions = this.parsedOptions;
+        if (!isCompleteParsedInfographicOptions(parsedOptions)) {
+            this.emitter.emit('error', new Error('Incomplete options'));
+            return;
+        }
         const { container } = this.parsedOptions;
-        const template = this.compose();
-        const renderer = new Renderer(this.parsedOptions, template);
+        const template = this.compose(parsedOptions);
+        const renderer = new Renderer(parsedOptions, template);
         this.node = renderer.render();
-        container.replaceChildren(this.node);
+        container?.replaceChildren(this.node);
+        this.editor?.destroy();
+        this.editor = undefined;
         if (this.options.editable) {
-            this.editor = new Editor(this.emitter, this.node, this.parsedOptions);
+            this.editor = new Editor(this.emitter, this.node, parsedOptions);
         }
         this.rendered = true;
         this.emitter.emit('rendered', { node: this.node, options: this.options });
@@ -42,14 +57,14 @@ export class Infographic {
     /**
      * Compose the SVG template
      */
-    compose() {
-        const { design, data } = this.parsedOptions;
+    compose(parsedOptions) {
+        const { design, data } = parsedOptions;
         const { title, item, items, structure } = design;
         const { component: Structure, props: structureProps } = structure;
         const Title = title.component;
         const Item = item.component;
         const Items = items.map((it) => it.component);
-        const svg = renderSVG(_jsx(Structure, { data: data, Title: Title, Item: Item, Items: Items, options: this.parsedOptions, ...structureProps }));
+        const svg = renderSVG(_jsx(Structure, { data: data, Title: Title, Item: Item, Items: Items, options: parsedOptions, ...structureProps }));
         const template = parseSVG(svg);
         if (!template) {
             throw new Error('Failed to parse SVG template');
@@ -57,7 +72,12 @@ export class Infographic {
         return template;
     }
     getTypes() {
-        const design = this.parsedOptions.design;
+        const parsedOptions = this.parsedOptions;
+        if (!isCompleteParsedInfographicOptions(parsedOptions)) {
+            this.emitter.emit('error', new Error('Incomplete options'));
+            return;
+        }
+        const design = parsedOptions.design;
         const structure = design.structure.composites || [];
         const items = design.items.map((it) => it.composites || []);
         return getTypes({ structure, items });
@@ -92,3 +112,14 @@ export class Infographic {
         this.emitter.removeAllListeners();
     }
 }
+function parseSyntaxOptions(input) {
+    if (typeof input === 'string') {
+        const { options, errors, warnings } = parseSyntax(input);
+        return { options, errors, warnings };
+    }
+    return {
+        options: cloneOptions(input),
+        errors: [],
+        warnings: [],
+    };
+}

package/esm/runtime/utils.d.ts

@@ -1,2 +1,4 @@
-import { InfographicOptions } from '../options/types';
-export declare function mergeOptions(object: Partial<InfographicOptions>, source: Partial<InfographicOptions>): InfographicOptions;
+import type { InfographicOptions, ParsedInfographicOptions } from '../options';
+export declare function mergeOptions(object: Partial<InfographicOptions>, source: Partial<InfographicOptions>): Partial<InfographicOptions>;
+export declare function cloneOptions<T extends Partial<InfographicOptions>>(options: T): T;
+export declare function isCompleteParsedInfographicOptions(options: Partial<ParsedInfographicOptions>): options is ParsedInfographicOptions;

package/esm/runtime/utils.js

@@ -1,18 +1,38 @@
+import { cloneDeep } from 'lodash-es';
+import { isNonNullableParsedDesignsOptions } from '../utils';
 export function mergeOptions(object, source) {
-    return {
+    const base = {
         ...object,
         ...source,
-        design: {
-            ...object.design,
-            ...source.design,
-        },
-        themeConfig: {
-            ...object.themeConfig,
-            ...source.themeConfig,
-        },
-        svg: {
-            ...object.svg,
-            ...source.svg,
-        },
     };
+    if (object.design || source.design) {
+        base.design = { ...object.design, ...source.design };
+    }
+    if (object.themeConfig || source.themeConfig) {
+        base.themeConfig = { ...object.themeConfig, ...source.themeConfig };
+    }
+    if (object.svg || source.svg) {
+        base.svg = { ...object.svg, ...source.svg };
+    }
+    return base;
+}
+export function cloneOptions(options) {
+    const cloned = { ...options };
+    if (cloned.data)
+        cloned.data = cloneDeep(cloned.data);
+    if (cloned.elements)
+        cloned.elements = cloneDeep(cloned.elements);
+    return cloned;
+}
+export function isCompleteParsedInfographicOptions(options) {
+    const { design, data } = options;
+    if (!design)
+        return false;
+    if (!isNonNullableParsedDesignsOptions(design))
+        return false;
+    if (!data)
+        return false;
+    if (!Array.isArray(data.items) || data.items.length < 1)
+        return false;
+    return true;
 }

package/esm/syntax/index.d.ts

@@ -0,0 +1,3 @@
+import type { SyntaxParseResult } from './types';
+export declare function parseSyntax(input: string): SyntaxParseResult;
+export type { SyntaxError, SyntaxNode, SyntaxParseResult } from './types';

package/esm/syntax/index.js

@@ -0,0 +1,101 @@
+import { mapWithSchema } from './mapper';
+import { parseSyntaxToAst } from './parser';
+import { DataSchema, DesignSchema, RootSchema, TemplateSchema, ThemeSchema, } from './schema';
+function resolveTemplate(node, errors) {
+    if (!node)
+        return undefined;
+    const mapped = mapWithSchema(node, TemplateSchema, 'template', errors);
+    if (!mapped)
+        return undefined;
+    if (typeof mapped === 'string')
+        return mapped;
+    if (typeof mapped === 'object' && typeof mapped.type === 'string') {
+        return mapped.type;
+    }
+    return undefined;
+}
+export function parseSyntax(input) {
+    const { ast, errors } = parseSyntaxToAst(input);
+    const warnings = [];
+    const options = {};
+    const mergedEntries = { ...ast.entries };
+    const infographicNode = ast.entries.infographic;
+    let templateFromInfographic;
+    if (infographicNode && infographicNode.kind === 'object') {
+        if (infographicNode.value)
+            templateFromInfographic = infographicNode.value;
+        Object.entries(infographicNode.entries).forEach(([key, value]) => {
+            if (!(key in mergedEntries))
+                mergedEntries[key] = value;
+        });
+    }
+    const allowedRootKeys = new Set([
+        'infographic',
+        'template',
+        'design',
+        'data',
+        'theme',
+        'width',
+        'height',
+    ]);
+    Object.keys(mergedEntries).forEach((key) => {
+        if (!allowedRootKeys.has(key)) {
+            errors.push({
+                path: key,
+                line: mergedEntries[key].line,
+                code: 'unknown_key',
+                message: 'Unknown top-level key.',
+                raw: key,
+            });
+        }
+    });
+    const templateNode = mergedEntries.template;
+    const templateValue = resolveTemplate(templateNode, errors);
+    if (templateValue)
+        options.template = templateValue;
+    if (!options.template && templateFromInfographic) {
+        options.template = templateFromInfographic;
+    }
+    const designNode = mergedEntries.design;
+    if (designNode) {
+        const design = mapWithSchema(designNode, DesignSchema, 'design', errors);
+        if (design)
+            options.design = design;
+    }
+    const dataNode = mergedEntries.data;
+    if (dataNode) {
+        const data = mapWithSchema(dataNode, DataSchema, 'data', errors);
+        if (data)
+            options.data = data;
+    }
+    const themeNode = mergedEntries.theme;
+    if (themeNode) {
+        const theme = mapWithSchema(themeNode, ThemeSchema, 'theme', errors);
+        if (theme && typeof theme === 'object') {
+            const { type, ...rest } = theme;
+            if (typeof type === 'string' && type)
+                options.theme = type;
+            if (Object.keys(rest).length > 0) {
+                options.themeConfig = rest;
+            }
+        }
+    }
+    const widthNode = mergedEntries.width;
+    if (widthNode) {
+        const width = mapWithSchema(widthNode, RootSchema.fields.width, 'width', errors);
+        if (width !== undefined)
+            options.width = width;
+    }
+    const heightNode = mergedEntries.height;
+    if (heightNode) {
+        const height = mapWithSchema(heightNode, RootSchema.fields.height, 'height', errors);
+        if (height !== undefined)
+            options.height = height;
+    }
+    return {
+        options,
+        errors,
+        warnings,
+        ast,
+    };
+}

package/esm/syntax/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { SchemaNode, SyntaxError, SyntaxNode } from './types';
+export declare function mapWithSchema(node: SyntaxNode, schema: SchemaNode, path: string, errors: SyntaxError[]): any;
+export declare function mapUnknownToObject(node: SyntaxNode): any;

package/esm/syntax/mapper.js

@@ -0,0 +1,238 @@
+import { parseInlineKeyValue } from './parser';
+function createValueNode(value, line) {
+    return { kind: 'value', line, value };
+}
+function parseScalar(value) {
+    const trimmed = value.trim();
+    if (trimmed === 'true')
+        return true;
+    if (trimmed === 'false')
+        return false;
+    if (/^-?\d+(\.\d+)?$/.test(trimmed))
+        return parseFloat(trimmed);
+    return trimmed;
+}
+function readScalar(node) {
+    if (node.kind === 'value')
+        return node.value;
+    if (node.kind === 'object')
+        return node.value;
+    return undefined;
+}
+function addError(errors, node, path, code, message, raw) {
+    errors.push({
+        path,
+        line: node.line,
+        code,
+        message,
+        raw,
+    });
+}
+function splitArrayValue(value, split = 'any') {
+    let text = value.trim();
+    if (text.startsWith('[') && text.endsWith(']')) {
+        text = text.slice(1, -1).trim();
+    }
+    if (!text)
+        return [];
+    let parts;
+    if (split === 'comma') {
+        parts = text.split(',');
+    }
+    else if (split === 'space') {
+        parts = text.split(/\s+/);
+    }
+    else {
+        parts = text.split(/[,\s]+/);
+    }
+    return parts.map((part) => part.trim()).filter(Boolean);
+}
+function mapUnknown(node) {
+    if (node.kind === 'array') {
+        return node.items.map((item) => mapUnknown(item));
+    }
+    if (node.kind === 'value')
+        return parseScalar(node.value);
+    const hasEntries = Object.keys(node.entries).length > 0;
+    if (!hasEntries && node.value !== undefined) {
+        return parseScalar(node.value);
+    }
+    const result = {};
+    if (node.value !== undefined) {
+        result.value = parseScalar(node.value);
+    }
+    Object.entries(node.entries).forEach(([key, child]) => {
+        result[key] = mapUnknown(child);
+    });
+    return result;
+}
+function mapUnion(node, schema, path, errors) {
+    let bestValue = undefined;
+    let bestErrors = null;
+    for (const variant of schema.variants) {
+        const variantErrors = [];
+        const value = mapWithSchema(node, variant, path, variantErrors);
+        if (bestErrors === null || variantErrors.length < bestErrors.length) {
+            bestErrors = variantErrors;
+            bestValue = value;
+        }
+    }
+    if (bestErrors)
+        errors.push(...bestErrors);
+    return bestValue;
+}
+export function mapWithSchema(node, schema, path, errors) {
+    switch (schema.kind) {
+        case 'union':
+            return mapUnion(node, schema, path, errors);
+        case 'string': {
+            const value = readScalar(node);
+            if (value === undefined) {
+                addError(errors, node, path, 'schema_mismatch', 'Expected string value.');
+                return undefined;
+            }
+            return value;
+        }
+        case 'number': {
+            const value = readScalar(node);
+            if (value === undefined) {
+                addError(errors, node, path, 'schema_mismatch', 'Expected number value.');
+                return undefined;
+            }
+            const trimmed = value.trim();
+            const match = trimmed.match(/^(-?\d+(\.\d+)?)(?:\s*(#|\/\/).*)?$/);
+            if (!match) {
+                addError(errors, node, path, 'invalid_value', 'Invalid number value.', value);
+                return undefined;
+            }
+            return parseFloat(match[1]);
+        }
+        case 'boolean': {
+            const value = readScalar(node);
+            if (value === undefined) {
+                addError(errors, node, path, 'schema_mismatch', 'Expected boolean value.');
+                return undefined;
+            }
+            if (value !== 'true' && value !== 'false') {
+                addError(errors, node, path, 'invalid_value', 'Invalid boolean value.', value);
+                return undefined;
+            }
+            return value === 'true';
+        }
+        case 'enum': {
+            const value = readScalar(node);
+            if (value === undefined) {
+                addError(errors, node, path, 'schema_mismatch', 'Expected enum value.');
+                return undefined;
+            }
+            if (!schema.values.includes(value)) {
+                addError(errors, node, path, 'invalid_value', 'Invalid enum value.', value);
+                return undefined;
+            }
+            return value;
+        }
+        case 'array': {
+            if (node.kind === 'array') {
+                return node.items
+                    .map((item, index) => mapWithSchema(item, schema.item, `${path}[${index}]`, errors))
+                    .filter((value) => value !== undefined);
+            }
+            if (node.kind === 'object' && Object.keys(node.entries).length > 0) {
+                addError(errors, node, path, 'schema_mismatch', 'Expected array value.');
+                return undefined;
+            }
+            const scalar = readScalar(node);
+            if (scalar === undefined) {
+                addError(errors, node, path, 'schema_mismatch', 'Expected array value.');
+                return undefined;
+            }
+            const trimmed = scalar.trim();
+            if (trimmed.startsWith('[') && !trimmed.endsWith(']')) {
+                return undefined;
+            }
+            const parts = splitArrayValue(scalar, schema.split);
+            return parts
+                .map((part, index) => mapWithSchema(createValueNode(part, node.line), schema.item, `${path}[${index}]`, errors))
+                .filter((value) => value !== undefined);
+        }
+        case 'object': {
+            if (node.kind === 'array') {
+                addError(errors, node, path, 'schema_mismatch', 'Expected object value.');
+                return undefined;
+            }
+            const result = {};
+            if (node.kind === 'value') {
+                if (schema.shorthandKey) {
+                    result[schema.shorthandKey] = node.value;
+                    return result;
+                }
+                const inline = parseInlineKeyValue(node.value);
+                if (inline?.value !== undefined) {
+                    if (schema.fields[inline.key]) {
+                        const value = mapWithSchema(createValueNode(inline.value, node.line), schema.fields[inline.key], `${path}.${inline.key}`, errors);
+                        if (value !== undefined)
+                            result[inline.key] = value;
+                        return result;
+                    }
+                    if (schema.allowUnknown) {
+                        result[inline.key] = parseScalar(inline.value);
+                        return result;
+                    }
+                    addError(errors, node, `${path}.${inline.key}`, 'unknown_key', 'Unknown key in object.', inline.key);
+                    return result;
+                }
+                if (schema.allowUnknown) {
+                    result.value = parseScalar(node.value);
+                    return result;
+                }
+                addError(errors, node, path, 'invalid_value', 'Expected object value.');
+                return undefined;
+            }
+            if (node.value !== undefined) {
+                if (schema.shorthandKey && result[schema.shorthandKey] === undefined) {
+                    result[schema.shorthandKey] = node.value;
+                }
+                else {
+                    const inline = parseInlineKeyValue(node.value);
+                    if (inline?.value !== undefined) {
+                        if (schema.fields[inline.key]) {
+                            const value = mapWithSchema(createValueNode(inline.value, node.line), schema.fields[inline.key], `${path}.${inline.key}`, errors);
+                            if (value !== undefined && result[inline.key] === undefined) {
+                                result[inline.key] = value;
+                            }
+                        }
+                        else if (schema.allowUnknown) {
+                            result[inline.key] = parseScalar(inline.value);
+                        }
+                        else {
+                            addError(errors, node, `${path}.${inline.key}`, 'unknown_key', 'Unknown key in object.', inline.key);
+                        }
+                    }
+                    else if (schema.allowUnknown) {
+                        result.value = parseScalar(node.value);
+                    }
+                }
+            }
+            Object.entries(node.entries).forEach(([key, child]) => {
+                const fieldSchema = schema.fields[key];
+                if (!fieldSchema) {
+                    if (schema.allowUnknown) {
+                        result[key] = mapUnknown(child);
+                        return;
+                    }
+                    addError(errors, child, `${path}.${key}`, 'unknown_key', 'Unknown key in object.', key);
+                    return;
+                }
+                const value = mapWithSchema(child, fieldSchema, `${path}.${key}`, errors);
+                if (value !== undefined)
+                    result[key] = value;
+            });
+            return result;
+        }
+        default:
+            return undefined;
+    }
+}
+export function mapUnknownToObject(node) {
+    return mapUnknown(node);
+}

package/esm/syntax/parser.d.ts

@@ -0,0 +1,14 @@
+import type { ObjectNode, SyntaxError } from './types';
+interface ParseResult {
+    ast: ObjectNode;
+    errors: SyntaxError[];
+}
+export declare function parseSyntaxToAst(input: string): ParseResult;
+export declare function parseInlineKeyValue(value: string): {
+    key: string;
+    value: string;
+} | {
+    key: string;
+    value: undefined;
+} | null;
+export {};

package/esm/syntax/parser.js

@@ -0,0 +1,142 @@
+function isWhitespace(char) {
+    return char === ' ' || char === '\t';
+}
+function getIndentInfo(line) {
+    let indent = 0;
+    let index = 0;
+    while (index < line.length) {
+        const char = line[index];
+        if (char === ' ') {
+            indent += 1;
+            index += 1;
+            continue;
+        }
+        if (char === '\t') {
+            indent += 2;
+            index += 1;
+            continue;
+        }
+        break;
+    }
+    return { indent, content: line.slice(index) };
+}
+function stripComments(content) {
+    return content.trimEnd();
+}
+function parseKeyValue(raw) {
+    const text = raw.trim();
+    if (!text)
+        return null;
+    const match = text.match(/^([^:\s=]+)\s*[:=]\s*(.*)$/);
+    if (match) {
+        return { key: match[1], value: match[2].trim() };
+    }
+    const matchSpace = text.match(/^([^\s]+)\s+(.*)$/);
+    if (matchSpace) {
+        return { key: matchSpace[1], value: matchSpace[2].trim() };
+    }
+    return { key: text, value: undefined };
+}
+function createObjectNode(line, value) {
+    return { kind: 'object', line, value, entries: {} };
+}
+function createArrayNode(line) {
+    return { kind: 'array', line, items: [] };
+}
+export function parseSyntaxToAst(input) {
+    const errors = [];
+    const root = createObjectNode(0);
+    const stack = [
+        { indent: -1, node: root, parent: null, key: null },
+    ];
+    const lines = input.split(/\r?\n/);
+    lines.forEach((line, index) => {
+        const lineNumber = index + 1;
+        if (!line.trim())
+            return;
+        const { indent, content } = getIndentInfo(line);
+        const stripped = stripComments(content);
+        if (!stripped.trim())
+            return;
+        while (stack.length > 1 && indent <= stack[stack.length - 1].indent) {
+            stack.pop();
+        }
+        const parentFrame = stack[stack.length - 1];
+        let parentNode = parentFrame.node;
+        const trimmed = stripped.trim();
+        if (trimmed.startsWith('-') &&
+            (trimmed.length === 1 || isWhitespace(trimmed[1]))) {
+            if (parentNode.kind !== 'array') {
+                if (parentNode.kind === 'object' &&
+                    Object.keys(parentNode.entries).length === 0 &&
+                    parentNode.value === undefined &&
+                    parentFrame.parent &&
+                    parentFrame.key) {
+                    const arrayNode = createArrayNode(parentNode.line);
+                    if (parentFrame.parent.kind === 'object') {
+                        parentFrame.parent.entries[parentFrame.key] = arrayNode;
+                    }
+                    else if (parentFrame.parent.kind === 'array') {
+                        const indexInParent = parentFrame.parent.items.indexOf(parentNode);
+                        if (indexInParent >= 0)
+                            parentFrame.parent.items[indexInParent] = arrayNode;
+                    }
+                    parentFrame.node = arrayNode;
+                    parentNode = arrayNode;
+                }
+                else {
+                    errors.push({
+                        path: '',
+                        line: lineNumber,
+                        code: 'bad_list',
+                        message: 'List item is not under an array container.',
+                        raw: trimmed,
+                    });
+                    return;
+                }
+            }
+            const itemContent = trimmed.slice(1).trim();
+            const itemNode = createObjectNode(lineNumber, itemContent || undefined);
+            parentNode.items.push(itemNode);
+            stack.push({
+                indent,
+                node: itemNode,
+                parent: parentNode,
+            });
+            return;
+        }
+        const parsed = parseKeyValue(trimmed);
+        if (!parsed) {
+            errors.push({
+                path: '',
+                line: lineNumber,
+                code: 'bad_syntax',
+                message: 'Invalid syntax line.',
+                raw: trimmed,
+            });
+            return;
+        }
+        if (parentNode.kind !== 'object') {
+            errors.push({
+                path: '',
+                line: lineNumber,
+                code: 'bad_syntax',
+                message: 'Key-value pair is not under an object container.',
+                raw: trimmed,
+            });
+            return;
+        }
+        const node = createObjectNode(lineNumber, parsed.value);
+        parentNode.entries[parsed.key] = node;
+        stack.push({
+            indent,
+            node,
+            parent: parentNode,
+            key: parsed.key,
+        });
+    });
+    return { ast: root, errors };
+}
+export function parseInlineKeyValue(value) {
+    return parseKeyValue(value);
+}

package/esm/syntax/schema.d.ts

@@ -0,0 +1,6 @@
+import type { ObjectSchema } from './types';
+export declare const ThemeSchema: ObjectSchema;
+export declare const DesignSchema: ObjectSchema;
+export declare const DataSchema: ObjectSchema;
+export declare const TemplateSchema: ObjectSchema;
+export declare const RootSchema: ObjectSchema;