composize

A set of composable & declarative DSLs.

Packages

Package	Intro	Version
@composize/dom	DSL for DOM
@composize/excel	DSL for ExcelJS

  ☝️ Click the links above to view the README for each package.

APIs

For the full API definition, please visit https://composize.github.io/composize.

Examples

@composize/dom

import { fragment, element, text, style, listener } from '@composize/dom';

const node = fragment(() => {
  style({
    '.card': {
      border: '1px solid #ccc',
      padding: '16px',
      marginBottom: '12px',
    }
  });

  function Card(title: string, content: string) {
    element('div', { class: 'card' }, () => {
      element('h2', { class: 'card-title' }, title);
      element('p', content);
    });
  }

  for (let index = 0; index < 3; index++) {
    Card('Card title', 'This is a simple card.');
  }

  element('button', { style: { backgroundColor: 'blue' } }, () => {
    text('Click me');
    listener('click', () => {
      console.log('Button clicked!');
    });
  });
});
Copy

@composize/excel

import { cell, row, workbook } from '@composize/excel';
// +--------+--------+--------+
// |                 | title2 |
// |      title1     +--------+
// |                 | title3 |
// +--------+--------+--------+
// | value1 |                 |
// +--------+      value2     +
// | value3 |                 |
// +--------+-----------------+
const book = workbook(() => {
  row(() => {
    cell('title1', { rowSpan: 2, colSpan: 2 });
    cell('title2');
  });
  row(() => {
    cell('title3');
  });
  row(() => {
    cell('value1');
    cell('value2', { rowSpan: 2, colSpan: 2 });
  })
  row(() => {
    cell('value3');
  })
});

book.xlsx.writeFile('./sheet.xlsx');
Copy

Changelog

Learn about the latest improvements.

Special thanks

Thanks to JetBrains for supporting us free open source licenses.

License

MIT