diff --git a/README.md b/README.md index 75707d4..0e89810 100644 --- a/README.md +++ b/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"}) ``` diff --git a/dist/docrel.js b/dist/docrel.js index c994a7b..6a5d9c1 100644 --- a/dist/docrel.js +++ b/dist/docrel.js @@ -74,4 +74,48 @@ function appendChildren(node) { children.forEach(function (child) { return node.appendChild(child); }); -} \ No newline at end of file +} + +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]; \ No newline at end of file diff --git a/package.json b/package.json index 65c78dd..de8fdf9 100644 --- a/package.json +++ b/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": { diff --git a/src/docrel.js b/src/docrel.js index fcc379b..6570242 100644 --- a/src/docrel.js +++ b/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] diff --git a/test/docrel.spec.js b/test/docrel.spec.js index fd18924..0e4b21c 100644 --- a/test/docrel.spec.js +++ b/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") })