feat(helper components): Add support for using functions as HTML elem…

…ents

readme.md

@@ -113,6 +113,31 @@ function listItem(n: number) {
 </ul>
 ```
 
+#### Using a helper template like an element
+
+Want a helper component? Create a function that implements CustomElementHandler and you can call it like an HTML element. 
+
+```typescript
+import {Attributes, CustomElementHandler} from "typed-html"
+
+function Button(attributes: Attributes | undefined, contents: string[]) {
+ return <div><button type="button" class="original-class" {...attributes}>{contents}</button></div>;
+}
+// Or 
+const Button: CustomElementHandler = (attributes, contents) => <div><button type="button" class="original-class" {...attributes}>{contents}</button></div>;
+}
+
+console.log(<Button style="color:#f00">Button Text</Button>);
+```
+
+Prints: 
+
+```html
+<div>
+ <button type="button" class="original-class" style="color:#f00">Button Text</button>
+</div>
+```
+
 ## Supported HTML
 
 All HTML elements and attributes are supported, except for the [svg](https://www.w3.org/TR/SVG/).

src/elements.tsx

@@ -4,6 +4,16 @@
 
 import * as os from 'os';
 
+type AttributeValue = number | string | Date | boolean;
+
+export interface CustomElementHandler {
+ (attributes: Attributes | undefined, contents: string[]): string
+}
+
+export interface Attributes {
+ [key: string]: AttributeValue;
+}
+
 const capitalACharCode = 'A'.charCodeAt(0);
 const capitalZCharCode = 'Z'.charCodeAt(0);
 
@@ -12,12 +22,6 @@ const isUpper = (input: string, index: number) => {
  return capitalACharCode <= charCode && capitalZCharCode >= charCode;
 };
 
-type AttributeValue = number | string | Date | boolean;
-
-interface Attributes {
- [key: string]: AttributeValue;
-}
-
 const toKebabCase = (camelCased: string) => {
  let kebabCased = '';
  for (let i = 0; i < camelCased.length; i++) {
@@ -103,11 +107,17 @@ const isVoidElement = (tagName: string) => {
  ].indexOf(tagName) > -1;
 };
 
-export function createElement(name: string, attributes: Attributes | undefined, ...contents: string[]) {
- const tagName = toKebabCase(name);
- if (isVoidElement(tagName) && !contents.length) {
- return `<${tagName}${attributesToString(attributes)}>`;
+export function createElement(name: string | CustomElementHandler,
+ attributes: Attributes | undefined,
+ ...contents: string[]) {
+ if (typeof name === 'function') {
+ return name(attributes, contents);
  } else {
- return `<${tagName}${attributesToString(attributes)}>${contentsToString(contents)}</${tagName}>`;
+ const tagName = toKebabCase(name);
+ if (isVoidElement(tagName) && !contents.length) {
+ return `<${tagName}${attributesToString(attributes)}>`;
+ } else {
+ return `<${tagName}${attributesToString(attributes)}>${contentsToString(contents)}</${tagName}>`;
+ }
  }
 }

test/html-fragments.spec.tsx

@@ -79,4 +79,16 @@ describe('using a number attribute', () => {
 describe('custom elements', () => {
  testEqual('<custom-element a-custom-attr="value" custom-li-attr="li"></custom-element>', () => <customElement ACustomAttr="value" customLIAttr="li"></customElement>);
  testEqual('<div some-data="s"></div>', () => <div some-data="s"></div>);
+});
+
+describe('helper components', () => {
+ const Header: elements.CustomElementHandler = (attributes, contents) => <h1 {...attributes}>{contents}</h1>;
+
+ function Button(attributes: elements.Attributes | undefined, contents: string[]) {
+ return <button type='button' class='original-class' {...attributes}>{contents}</button>;
+ }
+
+ testEqual('<h1 class="title"><span>Header Text</span></h1>', () => <Header class='title'><span>Header Text</span></Header>);
+ testEqual('<button class="override" type="button"></button>', () => <Button class='override'/>);
+ testEqual('<button class="original-class" type="button">Button Text</button>', () => <Button>Button Text</Button>);
 });