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

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

  7}
  8
  9const html = (strings, ...props) => {
  10  const elements = parse(strings, ...props);
  11  if(elements.length === 0) {
  12    throw 'No DOM element was returned!';
  13  }
  14  if(elements.length > 1) {
  15    console.warn('Only one DOM element can be returned!');
  16  }
  17  return elements[0];
  18}
  19
  20const parse = (strings, ...props) => {
  21  const [html, refs] = compose(strings, props);
  22  let dom;
  23  try {
  

  27    console.error(error);
  28    throw 'Invalid DOM structure!';
  29  }
  19  const node = dom.body.childNodes[0] ?? dom.head.childNodes[0];
  20  const elements = render(node, refs);
  21  if(elements.length === 0) {
  22    throw 'No DOM element was returned!';
  23  }
  24  if(elements.length > 1) {
  25    console.warn('Only one DOM element can be returned!');
  26  }
  27  return elements[0];
  30  const nodes = [...dom.head.childNodes, ...dom.body.childNodes];
  31  return nodes.map((node) => render(node, refs));
  32}
  33
  34/**
  

  41 * @return {any[]} The joined HTML string and the properties mapped to there references.
  42 */
  43const compose = (strings, props) => {
  44  if(strings === undefined) {
  45    // handles dyn function without body
  46    return ['', {}];
  47  }
  48  const refs = {};
  49  let string = '';
  50  for(let i = 0; i < strings.length; i++) {
  51    string += strings[i];
  52    if(props[i] !== undefined) {
  45      const uid = `$tlx-${count++}`;
  53      const uid = `$seg-${count++}`;
  54      refs[uid] = props[i];
  55      string += uid ?? '';
  56    }
  

  66 * @return {any[]} The string populate with the passed properties
  67 */
  68const feed = (string, refs) => {
  61  const expr = /\$tlx-\d+/g;
  69  const expr = /\$seg-\d+/g;
  70  let values = [];
  71  let match = null;
  72  let last = 0;
  

  85  return values;
  86}
  87
  88const dyn = (element, props) => {
  89  return (strings, ...childProps) => {
  90    return create(element, props, ...parse(strings, ...childProps));
  91  };
  92}
  93
  94const render = (node, refs) => {
  95  if(node.nodeType === Node.TEXT_NODE) {
  96    return feed(node.textContent, refs);
  

  152const css = defCss({html, compose, feed});
  153const style = defStyle({html, compose, feed});
  154
  141export { figure, html, css, style };
  155export { figure, html, dyn, css, style };
  

• mods.js [new file] [old file]

  1export const defCss = ({html, compose, feed}) => {
  2  return (parts, ...props) => {
  3    const [css, refs] = compose(parts, props);
  2  return (strings, ...props) => {
  3    const [css, refs] = compose(strings, props);
  4    return html`
  5      <style type="text/css">
  6        ${feed(css, refs).join('')}
  

  10}
  11
  12export const defStyle = ({compose, feed}) => {
  13  return (parts, ...props) => {
  14    const [css, refs] = compose(parts, props);
  13  return (strings, ...props) => {
  14    const [css, refs] = compose(strings, props);
  15    const styles = {};
  16    for(const item of css.split(';')) {
  17      if(item.trim().length === 0) {