so://phie

figure

The vanilla alternative for writing JSX-based React applications
git clone git://soophie.de/figure

• log
• tree
• refs
• README
• LICENSE

branch:main tag:v1.2.1 tag:23.07 tag:23.09 tag:v1.0.0

• .gitignore [new file] [old file]

  1*.js
  

• lib.js [new file]

  1// @ts-check
  2
  3/**
  4 * @typedef {Object} ReactElement
  5 * @typedef {function(Props=): ReactElement} ReactFunction
  6 * @typedef {function(ReactFunction | string, Props?=, ...Object): ReactElement} ReactCreateFunction
  7 *
  8 * @typedef {TemplateStringsArray} Slices
  9 * @typedef {any} Value
  10 * @typedef {{[key: string]: any}} Refs
  11 * @typedef {any} Props
  12 * @typedef {{[key: string]: ReactFunction | Dict}} Dict
  13 * @typedef {{ dict: DictFunction, dyn: DynFunction }} Figure
  14 *
  15 * @typedef {function(Dict=): HTMLFunction} DictFunction
  16 * @typedef {function(Slices, ...Value): ReactElement[]} HTMLFunction
  17 * @typedef {ReactCreateFunction} DynFunction
  18 */
  19
  20/**
  21 * Initializes the figure framework.
  22 *
  23 * @param {ReactCreateFunction} create The React createElement function
  24 * @returns {Figure} The util functions collected in an object
  25 */
  26export default function figure(create) {
  27
  28  // the parser for interpreting HTML
  29  const parser = new DOMParser();
  30  // the counter for creating unique references
  31  let count = 0;
  32
  33  /**
  34   * Returns the a function for rendering HTML.
  35   *
  36   * @param {Dict} [dict] The dictionary for resolving React components
  37   * @returns {HTMLFunction} The function for rendering HTML
  38   */
  39  function dict(dict) {
  40
  41    /**
  42     * Converts the template literal HTML syntax into React elements.
  43     *
  44     * @param {Slices} slices The template literal slices
  45     * @param {...Value} values The template literal values
  46     * @returns {ReactElement[]} The converted HTML as React elements
  47     */
  48    function html(slices, ...values) {
  49      const [html, refs] = compose(slices, values);
  50      try {
  51        const dom = parser.parseFromString(html, 'text/html');
  52        // collect all nodes from head and body
  53        const nodes = [...dom.head.childNodes, ...dom.body.childNodes];
  54        return nodes.map((node) => render(node, refs, dict ?? {}));
  55      }
  56      catch (error) {
  57        console.error(error);
  58        throw 'Invalid DOM structure!';
  59      }
  60    }
  61
  62    return html;
  63  }
  64  
  65  /**
  66   * Joins the template literal slices together and replaces the values with references.
  67   * The values are being mapped to there corresponding references and with the populated
  68   * HTML string returned.
  69   *
  70   * @param {Slices} slices The template literal slices
  71   * @param {Value[]} values The template literal values
  72   * @returns {[string, Refs]} The joined HTML string and the values mapped to there references
  73   */
  74  function compose(slices, values) {
  75    if (slices == null) {
  76      // handle dyn function without body
  77      return ['', {}];
  78    }
  79    const refs = /** @type {Refs} */ ({});
  80    let slice = '';
  81    for (let i = 0; i < slices.length; i++) {
  82      slice += slices[i];
  83      if (values[i] != null) {
  84        // create unique reference
  85        const uid = `$fig-${count++}`;
  86        refs[uid] = values[i];
  87        slice += uid ?? '';
  88      }
  89    }
  90    return [slice.trim(), refs];
  91  }
  92
  93  /**
  94   * Injects the values into the corresponding reference locations of the string.
  95   *
  96   * @param {string} slice The string containing references
  97   * @param {Refs} refs The values mapped to there references
  98   * @returns {ReactElement[]} The string populated with the passed values
  99   */
  100  function feed(slice, refs) {
  101    const expr = /\$fig-\d+/g;
  102    const elements = /** @type {ReactElement[]} */ ([]);
  103    let match = null;
  104    let last = 0;
  105    while ((match = expr.exec(slice)) !== null) {
  106      const index = match.index;
  107      const uid = match[0];
  108      const before = slice.substring(last, index);
  109      // ignore empty strings
  110      if (before.length > 0) {
  111        elements.push(before);
  112      }
  113      const value = refs[uid];
  114      // ignore empty values
  115      if (value) {
  116        elements.push(value);
  117      }
  118      last = index + uid.length;
  119    }
  120    const after = slice.substring(last);
  121    // ignore empty strings
  122    if (after.length > 0) {
  123      elements.push(after);
  124    }
  125    return elements;
  126  }
  127
  128  /**
  129   * Converts a HTML node into a React element.
  130   *
  131   * @param {Node} node The HTML node
  132   * @param {Refs} refs The values mapped to there references
  133   * @param {Dict} dict The dictionary for resolving React components
  134   * @returns {ReactElement[]} The converted HTML node as React element
  135   */
  136  function render(node, refs, dict) {
  137    if (node.nodeType === Node.TEXT_NODE) {
  138      const text = /** @type {Text} */ (node);
  139      if (text.textContent == null) {
  140        // ignore empty text nodes
  141        return [];
  142      }
  143      return feed(text.textContent, refs);
  144    }
  145    if (node.nodeType === Node.COMMENT_NODE) {
  146      // ignore comments
  147      return [];
  148    }
  149    const element = /** @type {HTMLElement} */ (node);
  150    const tag = element.tagName.toLowerCase();
  151    const props = /** @type {Props} */ ({});
  152    // iterate over each attribute and add it to the props
  153    for (const attribute of element.attributes) {
  154      const key = attribute.name;
  155      const slice = attribute.textContent;
  156      if (slice == null) {
  157        // ignore empty attribute values
  158        continue;
  159      }
  160      const values = feed(slice, refs);
  161      const value = values.length == 1 ? values[0] : values;
  162      let attr = key;
  163      const match = /^(\w+):(\w+)$/.exec(attr);
  164      if (match) {
  165        // camel case attribute name
  166        const [, pre, name] = match;
  167        attr = `${pre}${name.substring(0, 1).toUpperCase()}${name.substring(1)}`;
  168      }
  169      props[attr] = value instanceof Array ? value.join('') : value;
  170    }
  171    const children = /** @type {ReactElement[]} */ ([]);
  172    // recursively render all child nodes
  173    (node.childNodes ?? []).forEach((child) => children.push(...render(child, refs, dict)));
  174    const domains = tag.split(':');
  175    let component = /** @type {ReactFunction | null} */ (null);
  176    let layer = /** @type {Dict | ReactFunction | null} */ (dict);
  177    // look up tag name in dictionary
  178    for (const domain of domains) {
  179      if (layer && typeof layer === 'object' && layer[domain]) {
  180        // traverse sublayer
  181        layer = /** @type {Dict} */ (layer[domain]);
  182        continue;
  183      }
  184      // domain is not in layer
  185      layer = null;
  186      break;
  187    }
  188    if (layer) {
  189      // found component for tag
  190      component = /** @type {ReactFunction} */ (layer);
  191    }
  192    // use React component or tag name
  193    return [create(component ?? tag, props, ...children)];
  194  }
  195
  196  return { dict, dyn: create };
  197}
  

• lib.ts [old file]

  1import {
  2  Dict,
  3  Figure,
  4  Props,
  5  ReactElement,
  6  HtmlFunction,
  7  ReactFunction,
  8  CreateFunction,
  9  Refs,
  10  Slices,
  11  Values,
  12} from './types.ts';
  13
  14/**
  15 * Initializes the figure utility.
  16 * @param {CreateFunction} create - The React createElement function.
  17 * @return {Figure} The util functions collected in an object.
  18 */
  19export default function figure(create: CreateFunction): Figure {
  20
  21  // the parser for interpreting HTML
  22  const parser = new DOMParser();
  23  // the counter for creating unique references
  24  let count = 0;
  25
  26  /**
  27   * Returns the a function for rendering HTML.
  28   * @param {Dict} dict - The dictionary for resolving React components.
  29   * @return {Function} The function for rendering HTML.
  30   */
  31  function dict(dict?: Dict): HtmlFunction {
  32
  33    /**
  34     * Converts the template literal HTML syntax into React elements.
  35     * @param {Slices} slices - The template literal slices
  36     * @param {Values} values - The template literal values
  37     * @return {ReactElement[]} The converted HTML as React elements.
  38     */
  39    function html(slices: Slices, ...values: Values): ReactElement[] {
  40      const [html, refs] = compose(slices, values);
  41      try {
  42        const dom = parser.parseFromString(html, 'text/html');
  43        // collect all nodes from head and body
  44        const nodes = [...dom.head.childNodes, ...dom.body.childNodes];
  45        return nodes.map((node) => render(node, refs, dict ?? {}));
  46      }
  47      catch (error) {
  48        console.error(error);
  49        throw 'Invalid DOM structure!';
  50      }
  51    }
  52
  53    return html;
  54  }
  55
  56  /**
  57   * Joins the template literal slices together and replaces the values with references.
  58   * The values are being mapped to there corresponding references and with the populated
  59   * HTML string returned.
  60   *
  61   * @param {Slices} slices - The template literal slices
  62   * @param {Values} values - The template literal values
  63   * @return {[string, Refs]} The joined HTML string and the values mapped to there references.
  64   */
  65  function compose(slices: Slices, values: Values): [string, Refs] {
  66    if (slices == null) {
  67      // handle dyn function without body
  68      return ['', {}];
  69    }
  70    const refs: Refs = {};
  71    let slice = '';
  72    for (let i = 0; i < slices.length; i++) {
  73      slice += slices[i];
  74      if (values[i] != null) {
  75        // create unique reference
  76        const uid = `$fig-${count++}`;
  77        refs[uid] = values[i];
  78        slice += uid ?? '';
  79      }
  80    }
  81    return [slice.trim(), refs];
  82  }
  83
  84  /**
  85   * Injects the values into the corresponding reference locations of the string.
  86   *
  87   * @param {string} slice - The string containing references
  88   * @param {Refs} refs - The values mapped to there references
  89   * @return {ReactElement[]} The string populated with the passed values
  90   */
  91  function feed(slice: string, refs: Refs): ReactElement[] {
  92    const expr = /\$fig-\d+/g;
  93    const elements: ReactElement[] = [];
  94    let match: RegExpExecArray | null = null;
  95    let last = 0;
  96    while ((match = expr.exec(slice)) !== null) {
  97      const index = match.index;
  98      const uid = match[0];
  99      const before = slice.substring(last, index);
  100      // ignore empty strings
  101      if (before.length > 0) {
  102        elements.push(before);
  103      }
  104      const value = refs[uid];
  105      // ignore empty values
  106      if (value) {
  107        elements.push(value);
  108      }
  109      last = index + uid.length;
  110    }
  111    const after = slice.substring(last);
  112    // ignore empty strings
  113    if (after.length > 0) {
  114      elements.push(after);
  115    }
  116    return elements;
  117  }
  118
  119  /**
  120   * Converts a HTML node into a React element.
  121   *
  122   * @param {Node} node - The HTML node
  123   * @param {Refs} refs - The values mapped to there references
  124   * @return {ReactElement[]} The converted HTML node as React element
  125   */
  126  function render(node: Node, refs: Refs, dict: Dict): ReactElement[] {
  127    if (node.nodeType === Node.TEXT_NODE) {
  128      const text = node as Text;
  129      if (text.textContent == null) {
  130        // ignore empty text nodes
  131        return [];
  132      }
  133      return feed(text.textContent, refs);
  134    }
  135    if (node.nodeType === Node.COMMENT_NODE) {
  136      // ignore comments
  137      return [];
  138    }
  139    const element = node as HTMLElement;
  140    const tag = element.tagName.toLowerCase();
  141    const props: Props = {};
  142    // iterate over each attribute and add it to the props
  143    for (const attribute of element.attributes) {
  144      const key = attribute.name;
  145      const slice = attribute.textContent;
  146      if (slice == null) {
  147        // ignore empty attribute values
  148        continue;
  149      }
  150      const values = feed(slice, refs);
  151      const value = values.length == 1 ? values[0] : values;
  152      let attr = key;
  153      const match = /^(\w+):(\w+)$/.exec(attr);
  154      if (match) {
  155        // camel case attribute name
  156        const [, pre, name] = match;
  157        attr = `${pre}${name.substring(0, 1).toUpperCase()}${name.substring(1)}`;
  158      }
  159      props[attr] = value instanceof Array ? value.join('') : value;
  160    }
  161    const children: ReactElement[] = [];
  162    // recursively render all child nodes
  163    (node.childNodes ?? []).forEach((child) => children.push(...render(child, refs, dict)));
  164    const domain = tag.split(':');
  165    // look up tag name in dictionary
  166    // deno-lint-ignore no-explicit-any
  167    const component: ReactFunction | null = domain.reduce((dict: any, level) => {
  168      return dict && dict[level] ? dict[level] : null;
  169    }, dict);
  170    // use React component or tag name
  171    return [create(component ?? tag, props, ...children)];
  172  }
  173
  174  return { dict, dyn: create };
  175}
  

• types.ts [old file]

  1export type ReactElement = unknown;
  2export type ReactFunction = (props: unknown) => ReactElement;
  3export type CreateFunction = (element: ReactFunction | string, props?: Props, ...children: ReactElement[]) => ReactElement;
  4export type HtmlFunction = (slices: Slices, ...values: Values) => ReactElement[];
  5export type Figure = { dict: (dict?: Dict) => HtmlFunction, dyn: CreateFunction };
  6export type Refs = Record<string, unknown>;
  7export type Props = Record<string, unknown>;
  8export type Slices = TemplateStringsArray;
  9export type Values = unknown[];
  10
  11export interface Dict {
  12  [key: string]: ReactFunction | Dict;
  13}