{"_id":"@aaashur/eleventy-plugin-create-element","_rev":"1-f6c69f33dfe0788ddcc199681308e728","name":"@aaashur/eleventy-plugin-create-element","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@aaashur/eleventy-plugin-create-element","version":"0.1.0","description":"An Eleventy paired shortcode for building HTML elements, with support for dynamic tag names and attributes","main":".eleventy.js","scripts":{"lint":"eslint '.eleventy.js' 'src/**/*.js' 'test/**/*.js'","test":"mocha ./test"},"repository":{"type":"git","url":"git+https://github.com/ashur/eleventy-plugin-create-element.git"},"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin"],"author":{"name":"Ashur Cabrera","url":"https://ashur.cab/rera"},"license":"ISC","bugs":{"url":"https://github.com/ashur/eleventy-plugin-create-element/issues"},"homepage":"https://github.com/ashur/eleventy-plugin-create-element#readme","devDependencies":{"@11ty/eleventy":"^2.0.0","chai":"^4.3.7","eslint":"^8.35.0","eslint-plugin-sort-requires":"^2.1.0","mocha":"^10.2.0"},"eslintIgnore":["!.*"],"dependencies":{"@aaashur/eleventy-plugin-classnames":"^0.1.0","@aaashur/eleventy-plugin-create-element":"^0.1.0"},"gitHead":"2e1268befdb34c41d616a36688fb71269cd3cd9a","_id":"@aaashur/eleventy-plugin-create-element@0.1.0","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-AoCEapylQvDR+lLnMRoQ0BLcGxlDyLSVA9Ya2ZRumOXRLN1d4KXb/SVGZWF4UR2pTgTd1al5XBqa9ciEGdnOsw==","shasum":"567b4e31efca2c5445eb826e32fcb620bc233388","tarball":"https://registry.npmjs.org/@aaashur/eleventy-plugin-create-element/-/eleventy-plugin-create-element-0.1.0.tgz","fileCount":8,"unpackedSize":10970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBdfwsdUVJrDmsJzku46Jua/E8GtJVk968dHJ2u9y5W9AiEAlUb9k+GD+KNAtKI+vxI6hzLOim7P/fb6gj4/c+IHT/c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/uJmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ6Q/9F0TDyJPwxys1zlo5/qz4SQxBR2zsIn6d3MH299bEmI98FCcd\r\ngFc6AZUz+zxRhlS0Fmd9C5mu6jT18hnM362lQ5yMLYcAozuI3K+1TvN6KKCb\r\nLvr5YiQxEdrDmW3K0/d0KwPt774nco4xOMBksqfcHiZd8gzYuPZCpKiBqAAT\r\n+a9BhEMtpT3YoMV3+/JEMnizQSvH77MOy2Qc729amRdVxf1pl6vXlkpkLWmG\r\n8QWDE6qnp4S2kdVKUiD7qfIsjb61CDbec4txX3CsX1pxsN7r4isnDNljKdLF\r\nivtzcbI7p4HVVXIvL4cK+pyHgM7x0v5EWyZ2iOvIlh434PEV+qV5SQpW5BbL\r\n/DFSPjqFSSjQ5L1ZbPFA9vyuwBNDMULCf3js+eDYMOy+Xo/bX426g++exSvb\r\n/4JfrenfNL7FCxw2cIDaHYWfUfIY6NqjJlJeP316L8itY3RKUtliJ501g62s\r\n8dDymSE408mUzquTjkD5bUbk6mbdFCGD95T1aB8VXXsyBZePLFpPAvkIj/A/\r\nqsaZbY+muWyKB4FJ69a5Tl+8aRFzVtyqdGKG0nOI+mhiBOQaslRezBED2Cv5\r\nzua2vvmpNh00+J2JmtEEd+Njfas7CSY6Yjnh+xwCm7jny9lyjh84ySTPc5XT\r\nslxSpxiht3CYMIr9ck/I/4jzLuzxj7lxJuE=\r\n=8bV5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aaashur","email":"hello@ashur.cab"},"directories":{},"maintainers":[{"name":"aaashur","email":"hello@ashur.cab"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eleventy-plugin-create-element_0.1.0_1677648486274_0.5628197030121427"},"_hasShrinkwrap":false},"0.1.1":{"name":"@aaashur/eleventy-plugin-create-element","version":"0.1.1","description":"An Eleventy paired shortcode for building HTML elements, with support for dynamic tag names and attributes","main":".eleventy.js","scripts":{"lint":"eslint '.eleventy.js' 'src/**/*.js' 'test/**/*.js'","test":"mocha ./test"},"repository":{"type":"git","url":"git+https://github.com/ashur/eleventy-plugin-create-element.git"},"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin"],"author":{"name":"Ashur Cabrera","url":"https://ashur.cab/rera"},"license":"ISC","bugs":{"url":"https://github.com/ashur/eleventy-plugin-create-element/issues"},"homepage":"https://github.com/ashur/eleventy-plugin-create-element#readme","devDependencies":{"@11ty/eleventy":"^2.0.0","chai":"^4.3.7","eslint":"^8.35.0","eslint-plugin-sort-requires":"^2.1.0","mocha":"^10.2.0"},"eslintIgnore":["!.*"],"dependencies":{"@aaashur/eleventy-plugin-classnames":"^0.1.0","@aaashur/eleventy-plugin-styles":"^0.1.0"},"gitHead":"aca2bf8f12fc5356c261e22541b3b5ba25910948","_id":"@aaashur/eleventy-plugin-create-element@0.1.1","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-aj2U2DoB5OJBSG7K8JEiB2MJuYIvh17LuBQa86fjOhXUkifz6WgTIRAf2C2FI+lNA8VHuTpULN+m5fiI76MyDA==","shasum":"d1a1b1d71c9ef793770dd01bd175a93f13bfacb6","tarball":"https://registry.npmjs.org/@aaashur/eleventy-plugin-create-element/-/eleventy-plugin-create-element-0.1.1.tgz","fileCount":8,"unpackedSize":11239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESzlNfw/paHG/mjTdKVvfsybFGJJ4lKkuIoBoTb98vxAiEA2xld/39cD55yADKgE0a1QJA9odbVd3NY26b6LnQhx+Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEjd7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWgA//QjxyY0mxR7QOnFEPvS0u0dywVfoa6aTlh9HohP7F6of6Tofp\r\nB3Dc+hCyTyjUXqh75IZo9WASyfEcwmIem+8b1W3T9i4BSHcbPD4utmjvCjed\r\n6z3WUNzHkzyDBBf/ieFO7LbuM2Sa+aqnB0Lclvt+yoU4HGGb/ZldyDgjgyp5\r\nNAxhXoj2+1sDRcCQFEXUjLxw/7w1vevHa7+FtNE9K74E+w1vq2DL5/rBGllR\r\nEUrcha55WpQ7qWTptWI8CUotT5A7WOpeiMQapg50tO3OJA/vS6265ZA86sXN\r\nUje7dq6mMZDN5FfFRvHWOu5tua9ycFLqEO3FVKEjPfvZ8/zyOxDLnEmhsHVi\r\nMekhRsnBSsOi3adchLLHh+ekXbLVeNHONQgOJ/ixNBPZ2Qaf8KvHtoNbkyCt\r\n0WnixqcD2l+yupF4AFkU+QdCx1/Wy3FzIxcWIG5Gsq4gAcAPP2WZm1o/GeiR\r\nRyc5WRPqAEwXnU+Q+CpsPu1sy5OM4+UbS+57z30v3b3yP68Nk9MKmv6llCA+\r\nD+KZ8iFuePrXqWAyzSG2oQJEYhINIuIieYMOAuB3yYShMh003zbpJ9CHcsAF\r\nedgQzY9ANiF2fvFcXn0Z63lBDiJQwTE/XUVSZoSzqU1PJU2UgFAhpLR/ytjM\r\nkIEoF7KPzHnF/Ff1mvkEiYYA3waZz54GMJo=\r\n=221l\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aaashur","email":"hello@ashur.cab"},"directories":{},"maintainers":[{"name":"aaashur","email":"hello@ashur.cab"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eleventy-plugin-create-element_0.1.1_1678915451691_0.9574281232176458"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-01T05:28:06.154Z","0.1.0":"2023-03-01T05:28:06.414Z","modified":"2023-03-15T21:24:12.014Z","0.1.1":"2023-03-15T21:24:11.859Z"},"maintainers":[{"name":"aaashur","email":"hello@ashur.cab"}],"description":"An Eleventy paired shortcode for building HTML elements, with support for dynamic tag names and attributes","homepage":"https://github.com/ashur/eleventy-plugin-create-element#readme","keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin"],"repository":{"type":"git","url":"git+https://github.com/ashur/eleventy-plugin-create-element.git"},"author":{"name":"Ashur Cabrera","url":"https://ashur.cab/rera"},"bugs":{"url":"https://github.com/ashur/eleventy-plugin-create-element/issues"},"license":"ISC","readme":"# eleventy-plugin-create-element\n\nAn [Eleventy](https://11ty.dev/) paired shortcode for building HTML elements, with support for dynamic tag names and attributes.\n\n> Inspired by `React.createElement()`\n\n## Setup\n\nRun the following command at the root of your Eleventy project\n\n```shell\nnpm install @aaashur/eleventy-plugin-create-element\n```\n\nthen include it in your `.eleventy.js` config file:\n\n```javascript\nconst createElement = require(\"@aaashur/eleventy-plugin-create-element\");\n\nmodule.exports = (eleventyConfig) => {\n    eleventyConfig.addPlugin(createElement);\n};\n```\n\n## Usage\n\n```njk\n{% createElement <name>, [<attributes>] %}\n    <innerHTML>\n{% endcreateElement %}\n```\n\nAttributes with `null` or `undefined` values are omitted:\n\n```njk\n{% createElement \"article\", {\n    class: \"card\",\n    href: undefined,\n    \"data-example\": null,\n    \"aria-hidden\": false\n} %}\n    <p>Hello, world.</p>\n{% endcreateElement %}\n```\n\n```html\n<article class=\"card\" aria-hidden=\"false\">\n    <p>Hello, world.</p>\n</article>\n```\n\n---\n\nIf `attributes` contains a `class` property whose value is an array, [`classnames`](https://www.npmjs.com/package/@aaashur/eleventy-plugin-classnames) will be used automatically to return a space-delimited string containing only truthy, non-duplicate values:\n\n```njk\n{% createElement \"div\", {\n    class: [\n        \"block\",\n        \"block__element\",\n        \"block__element--modifier\" if false,\n        \"block\"\n    ]\n} %}\n    <p>Hello, world.</p>\n{% endcreateElement %}\n```\n\n```html\n<div class=\"block block__element\">\n    <p>Hello, world.</p>\n</div>\n```\n\n---\n\nIf `attributes` contains a `style` property whose value is an object, [`styles`](https://www.npmjs.com/package/@aaashur/eleventy-plugin-styles) will be used automatically to return a semicolon-delimited string containing only truthy values:\n\n```njk\n{% createElement \"div\", {\n    style: {\n        \"--custom-property\": \"10px\",\n        \"--false-property\": false,\n        \"--null-property\": null,\n        \"--undefined-property\": undefined,\n        \"background-color\": \"red\"\n    }\n} %}\n    <p>Hello, world.</p>\n{% endcreateElement %}\n```\n\n```html\n<div style=\"--custom-property: 10px; background-color: red\"></div>\n    <p>Hello, world.</p>\n</div>\n```\n\n---\n\n[Empty elements](https://developer.mozilla.org/en-US/docs/Glossary/empty_element) will build self-closing tags automatically:\n\n```njk\n{% createElement \"input\", { type: \"button\" } %}\n    <p>innerHTML is ignored when building empty elements</p>\n{% endcreateElement %}\n```\n\n```html\n<input type=\"button\">\n```\n\n---\n\nIf `name` is undefined, `createElement` will return `innerHTML` only:\n\n```njk\n{% createElement \"a\" if link, { href: link } -%}\n    <p>Hello, world</p>\n{%- endcreateElement %}\n```\n\n```html\n<p>Hello, world</p>\n```\n","readmeFilename":"README.md"}