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

• README.md [new file] [old file]

  6```javascript
  7import figure from '...';
  8
  9const { html, dyn } = figure({ createElement });
  9// initialize figure
  10const { dist } = figure({ createElement });
  11
  11const global = createContext({});
  12// add your components to a bundle
  13const ElementBundle = {
  14  button: Button,
  15};
  16
  13function App() {
  14  const [name, setName] = useState('world');
  17// add your bundles to the dictionary
  18const html = dist({
  19  el: ElementBundle,
  20});
  21
  16  const context = {};
  22function App() {
  23  return html`
  24    <main>
  25      <el:button
  26        type="primary"
  27        on:click=${() => console.log('It works!')}
  28      >
  29        <span>Click me</span>
  30      </el:button>
  31    </main>
  32  `;
  33}
  34
  35function Button() {
  36  return html`
  19    ${dyn(global.Provider, { value: context }), html`
  20      <h1>Hello ${name}!</h1>
  21      <p>Some description text.</p>
  22    `}
  37    <button
  38      on:click=${props?.onClick}
  39      class="btn btn--${props?.type}"
  40    >
  41      ${props?.children}
  42    </button>
  43  `;
  44}
  45
  

• lib.ts [new file] [old file]

  1import { Options, Props, ReactElement, ReactFunction, Refs, Slices, Values } from './types.ts';
  1import { Options, Props, ReactElement, ReactFunction, Refs, Slices, Values, Dict } from './types.ts';
  2
  3export default function figure({ createElement }: Options) {
  4
  

  8  let count = 0;
  9
  10  /**
  11   * Converts the template literal HTML syntax into React elements.
  12   * @param {Slices} slices - The template literal slices
  13   * @param {Values} values - The template literal values
  14   * @return {ReactElement[]} The converted HTML as React elements.
  11   * Returns the a function for rendering HTML.
  12   * @param {Dict} dict - The dictionary for resolving React components.
  13   * @return {Function} The function for rendering HTML.
  14   */
  16  function html(slices: Slices, ...values: Values): ReactElement[] {
  17    const [html, refs] = compose(slices, values);
  18    let dom;
  19    try {
  20      dom = parser.parseFromString(html, 'text/html');
  21    }
  22    catch (error) {
  23      console.error(error);
  24      throw 'Invalid DOM structure!';
  15  function dict(dict?: Dict): (slices: Slices, ...values: Values) => ReactElement[] {
  16
  17    /**
  18     * Converts the template literal HTML syntax into React elements.
  19     * @param {Slices} slices - The template literal slices
  20     * @param {Values} values - The template literal values
  21     * @return {ReactElement[]} The converted HTML as React elements.
  22     */
  23    function html(slices: Slices, ...values: Values): ReactElement[] {
  24      const [html, refs] = compose(slices, values);
  25      let dom;
  26      try {
  27        dom = parser.parseFromString(html, 'text/html');
  28      }
  29      catch (error) {
  30        console.error(error);
  31        throw 'Invalid DOM structure!';
  32      }
  33      // collect all nodes from head and body
  34      const nodes = [...dom.head.childNodes, ...dom.body.childNodes];
  35      return nodes.map((node) => render(node, refs, dict ?? {}));
  36    }
  26    // collect all nodes from head and body
  27    const nodes = [...dom.head.childNodes, ...dom.body.childNodes];
  28    return nodes.map((node) => render(node, refs));
  37
  38    return html;
  39  }
  40
  41  /**
  

  99   * @param {Refs} refs - The values mapped to there references
  100   * @return {ReactElement[]} The converted HTML node as React element
  101   */
  92  function render(node: Node, refs: Refs): ReactElement[] {
  102  function render(node: Node, refs: Refs, dict: Dict): ReactElement[] {
  103    if (node.nodeType === Node.TEXT_NODE) {
  104      const text = node as Text;
  105      if (text.textContent == null) {
  

  113      return [];
  114    }
  115    const element = node as HTMLElement;
  106    const tag = element.tagName;
  116    const tag = element.tagName.toLowerCase();
  117    const props: Props = {};
  118    // iterate over each attribute and add it to the props
  119    for (const attribute of element.attributes) {
  

  167    }
  168    const children: ReactElement[] = [];
  169    // recursively render all child nodes
  160    (node.childNodes ?? []).forEach((child) => children.push(...render(child, refs)));
  161    return [createElement(tag, props, ...children)];
  162  }
  163
  164  /**
  165   * Creates a dynamic component with its own state.
  166   * Should be used if the component is statefull (contains hooks).
  167   *
  168   * @param {ReactFunction} element - The string containing references
  169   * @param {Props} props - The component properties
  170   * @param {ReactElement[]} children - The child elements
  171   * @return {ReactElement} The created React component
  172   */
  173  function dyn(element: ReactFunction, props?: Props, children?: ReactElement[]): ReactElement {
  174    return createElement(element, props, children);
  170    (node.childNodes ?? []).forEach((child) => children.push(...render(child, refs, dict)));
  171    const domain = tag.split(':');
  172    // look up tag name in dictionary
  173    // deno-lint-ignore no-explicit-any
  174    const component: ReactFunction | undefined = domain.reduce((dict: any, level) => {
  175      return dict?.[level];
  176    }, dict);
  177    // use React component or tag name
  178    return [createElement(component ?? tag, props, ...children)];
  179  }
  180
  177  return { html, dyn };
  181  return { dict };
  182}
  

• types.ts [new file] [old file]

  1export type ReactElement = unknown;
  2export type ReactFunction = unknown;
  3export type CreateElement = (element: ReactFunction, props?: Props, ...children: ReactElement[]) => ReactElement;
  2export type ReactFunction = (props: unknown) => ReactElement;
  3export type CreateElement = (element: ReactFunction | string, props?: Props, ...children: ReactElement[]) => ReactElement;
  4
  5export type Options = { createElement: CreateElement };
  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}