Export common HTML tag helpers

README.md

@@ -26,8 +26,7 @@ el.appendChild(button)
 Using `docrel`:
 
 ```js
-import {create} from "docrel"
-const [div, input, button] = create("div", "input", "button")
+import {div, input, button} from "docrel"
 
 let el = div({class: "wrapper"}, [
   input({attrs: {type: "text"}}),
@@ -74,6 +73,13 @@ Using the `create` function builder (uses `createElement` underneat):
 import {create} from "docrel"
 const [div] = create("div")
 
+let divOne = div({class: "div-a"})
+let divTwo = div({class: "div-b"})
+```
+Or just importing the html elements directly:
+```js
+import {div} from "docrel"
+
 let divOne = div({class: "div-a"})
 let divTwo = div({class: "div-b"})
 ```

dist/docrel.js

@@ -74,4 +74,48 @@ function appendChildren(node) {
   children.forEach(function (child) {
     return node.appendChild(child);
   });
-}
+}
+
+var a = exports.a = create("a")[0];
+var article = exports.article = create("article")[0];
+var aside = exports.aside = create("aside")[0];
+var b = exports.b = create("b")[0];
+var br = exports.br = create("br")[0];
+var button = exports.button = create("button")[0];
+var div = exports.div = create("div")[0];
+var footer = exports.footer = create("footer")[0];
+var form = exports.form = create("form")[0];
+var h1 = exports.h1 = create("h1")[0];
+var h2 = exports.h2 = create("h2")[0];
+var h3 = exports.h3 = create("h3")[0];
+var h4 = exports.h4 = create("h4")[0];
+var h5 = exports.h5 = create("h5")[0];
+var h6 = exports.h6 = create("h6")[0];
+var header = exports.header = create("header")[0];
+var hr = exports.hr = create("hr")[0];
+var i = exports.i = create("i")[0];
+var img = exports.img = create("img")[0];
+var input = exports.input = create("input")[0];
+var label = exports.label = create("label")[0];
+var li = exports.li = create("li")[0];
+var link = exports.link = create("link")[0];
+var main = exports.main = create("main")[0];
+var meta = exports.meta = create("meta")[0];
+var nav = exports.nav = create("nav")[0];
+var option = exports.option = create("option")[0];
+var script = exports.script = create("script")[0];
+var section = exports.section = create("section")[0];
+var select = exports.select = create("select")[0];
+var span = exports.span = create("span")[0];
+var style = exports.style = create("style")[0];
+var sub = exports.sub = create("sub")[0];
+var sup = exports.sup = create("sup")[0];
+var svg = exports.svg = create("svg")[0];
+var table = exports.table = create("table")[0];
+var tbody = exports.tbody = create("tbody")[0];
+var td = exports.td = create("td")[0];
+var textarea = exports.textarea = create("textarea")[0];
+var th = exports.th = create("th")[0];
+var tr = exports.tr = create("tr")[0];
+var ul = exports.ul = create("ul")[0];
+var video = exports.video = create("video")[0];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docrel",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Slightly better document.createElement",
   "main": "dist/docrel.js",
   "scripts": {

src/docrel.js

@@ -43,3 +43,47 @@ export function setEventListeners(el, events = {}) {
 export function appendChildren(node, children = []) {
   children.forEach(child => node.appendChild(child))
 }
+
+export let a = create("a")[0]
+export let article = create("article")[0]
+export let aside = create("aside")[0]
+export let b = create("b")[0]
+export let br = create("br")[0]
+export let button = create("button")[0]
+export let div = create("div")[0]
+export let footer = create("footer")[0]
+export let form = create("form")[0]
+export let h1 = create("h1")[0]
+export let h2 = create("h2")[0]
+export let h3 = create("h3")[0]
+export let h4 = create("h4")[0]
+export let h5 = create("h5")[0]
+export let h6 = create("h6")[0]
+export let header = create("header")[0]
+export let hr = create("hr")[0]
+export let i = create("i")[0]
+export let img = create("img")[0]
+export let input = create("input")[0]
+export let label = create("label")[0]
+export let li = create("li")[0]
+export let link = create("link")[0]
+export let main = create("main")[0]
+export let meta = create("meta")[0]
+export let nav = create("nav")[0]
+export let option = create("option")[0]
+export let script = create("script")[0]
+export let section = create("section")[0]
+export let select = create("select")[0]
+export let span = create("span")[0]
+export let style = create("style")[0]
+export let sub = create("sub")[0]
+export let sup = create("sup")[0]
+export let svg = create("svg")[0]
+export let table = create("table")[0]
+export let tbody = create("tbody")[0]
+export let td = create("td")[0]
+export let textarea = create("textarea")[0]
+export let th = create("th")[0]
+export let tr = create("tr")[0]
+export let ul = create("ul")[0]
+export let video = create("video")[0]

test/docrel.spec.js

@@ -4,7 +4,8 @@ let {
   setAttributes,
   setClassList,
   setEventListeners,
-  appendChildren
+  appendChildren,
+  div
 } = require("../dist/docrel.js")
 
 describe("docrel", () => {
@@ -17,7 +18,20 @@ describe("docrel", () => {
     })
 
     it("calls createElement", () => {
-      const [div] = create("div")
+      const [span] = create("span")
+      span()
+      expect(global.document.createElement).toHaveBeenCalledWith("span")
+    })
+  })
+
+  describe("tag helpers", () => {
+    beforeEach(() => {
+      global.document = {
+        createElement: jasmine.createSpy().and.returnValue({})
+      }
+    })
+
+    it("calls createElement", () => {
       div()
       expect(global.document.createElement).toHaveBeenCalledWith("div")
     })