jsx2tag - npm Package Compare versions

Comparing version 0.1.4 to 0.2.0

cjs/index.js

		@@ -55,2 +55,3 @@ 'use strict';
		};
		exports.defaultAttribute = defaultAttribute;

		@@ -68,2 +69,4 @@ /**
		* @property {function} [attribute=defaultAttribute] - a `callback(name, value)` to return a `{name, value}` literal.
		* @property {function} [keyed=()=>tag] - a `callback(entry, props)` to return a keyed version of the `tag`.
		* If `null` or `undefined` is returned, the attribute is skipped all along.
		* @property {Map<string,string[]>} [cache=new Map()] - a cache for already known/parsed templates.
		@@ -83,2 +86,3 @@ * @property {boolean} [xml=false] - treat nodes as XML with self-closing tags.
		attribute = defaultAttribute,
		keyed = () => tag,
		cache = new Map,
		@@ -89,2 +93,3 @@ xml = false
		const component = typeof entry === 'function';
		let isKeyed = false;

		@@ -113,6 +118,12 @@ // handle fragments as tag array
		for (const key in attributes) {
		const {name, value} = attribute(key, attributes[key]);
		template[i] += ` ${name}="`;
		args.push(value);
		i = template.push('"') - 1;
		if (key === 'key')
		isKeyed = !isKeyed;
		else {
		const attr = attribute(key, attributes[key]);
		if (attr != null) {
		template[i] += ` ${attr.name}="`;
		args.push(attr.value);
		i = template.push('"') - 1;
		}
		}
		}
		@@ -157,4 +168,4 @@

		return tag.apply(this, args);
		return (isKeyed ? keyed(entry, attributes) : tag).apply(this, args);
		};
		exports.createPragma = createPragma;

esm/index.js

		@@ -38,3 +38,3 @@ /! (c) Andrea Giammarchi - ISC /
		*/
		const defaultAttribute = (name, value) => {
		export const defaultAttribute = (name, value) => {
		switch (typeof value) {
		@@ -66,2 +66,4 @@ case 'string':
		* @property {function} [attribute=defaultAttribute] - a `callback(name, value)` to return a `{name, value}` literal.
		* @property {function} [keyed=()=>tag] - a `callback(entry, props)` to return a keyed version of the `tag`.
		* If `null` or `undefined` is returned, the attribute is skipped all along.
		* @property {Map<string,string[]>} [cache=new Map()] - a cache for already known/parsed templates.
		@@ -81,2 +83,3 @@ * @property {boolean} [xml=false] - treat nodes as XML with self-closing tags.
		attribute = defaultAttribute,
		keyed = () => tag,
		cache = new Map,
		@@ -87,2 +90,3 @@ xml = false
		const component = typeof entry === 'function';
		let isKeyed = false;

		@@ -111,6 +115,12 @@ // handle fragments as tag array
		for (const key in attributes) {
		const {name, value} = attribute(key, attributes[key]);
		template[i] += ` ${name}="`;
		args.push(value);
		i = template.push('"') - 1;
		if (key === 'key')
		isKeyed = !isKeyed;
		else {
		const attr = attribute(key, attributes[key]);
		if (attr != null) {
		template[i] += ` ${attr.name}="`;
		args.push(attr.value);
		i = template.push('"') - 1;
		}
		}
		}
		@@ -155,3 +165,3 @@

		return tag.apply(this, args);
		return (isKeyed ? keyed(entry, attributes) : tag).apply(this, args);
		};

index.d.ts

		@@ -0,3 +1,4 @@
		export function defaultAttribute(name: string, value: any): attr;
		export function bind(value: any): Bound;
		export function createPragma(tag: Function, { attribute, cache, xml }?: config): Function;
		export function createPragma(tag: Function, { attribute, keyed, cache, xml }?: config): Function;
		/**
		@@ -25,2 +26,7 @@ * - a DOM attribute facade with a `name` and a `value`.
		/**
		* - a `callback(entry, props)` to return a keyed version of the `tag`.
		* If `null` or `undefined` is returned, the attribute is skipped all along.
		*/
		keyed?: Function;
		/**
		* - a cache for already known/parsed templates.
		@@ -27,0 +33,0 @@ */

package.json

		{
		"name": "jsx2tag",
		"version": "0.1.4",
		"version": "0.2.0",
		"description": "Enable JSX for Template Literal Tags based projects",
		@@ -11,3 +11,3 @@ "main": "./cjs/index.js",
		"coveralls": "c8 report --reporter=text-lcov \| coveralls",
		"test": "cd test; npx babel index.jsx -d ./ && c8 node index.js && rm -rf ../coverage && mv coverage ../",
		"test": "cd test; npx babel index.jsx -d ./ && c8 node index.js > /dev/null && rm -rf ../coverage && mv coverage ../ && cd .. && c8 report --reporter=text",
		"types": "tsc --declaration --allowJs --emitDeclarationOnly --outDir ./ esm/index.js"
		@@ -14,0 +14,0 @@ },

README.md

		@@ -29,4 +29,3 @@ # JSX2TAG
		```js
		/** @jsx h */
		/** @jsxFrag h */
		/** @jsx h //* @jsxFrag h */

		@@ -77,7 +76,29 @@ // your template literal library of choice

		Each library might have its own way, but the gist of this feature, whenever available, is that the `key` property is all we're after:
		The `config` object accepts a `keyed(entry, props)` callback that can return a keyed version of the component.

		```js
		/** @jsx h //* @jsxFrag h */
		import {createPragma} from '//unpkg.com/jsx2tag?module';
		import {render, html} from '//unpkg.com/uhtml?module';

		// used as weakMap key for global keyed references
		const refs = {};
		const h = createPragma(html, {
		// invoked when a key={value} is found in the node
		// to render regular elements (or µbe classes)
		keyed(tagName, {key}) {
		const ref = refs[tagName] \|\| (refs[tagName] = {});
		return html.for(ref, key);
		}
		});

		render(document.body, <div key={'unique-id'} />);

		```

		Alternatively, each library might have its own way, but the gist of this feature, whenever available, is that the `key` property is all we're after:

		```js
		/** @jsx h //* @jsxFrag h */

		import {createPragma} from '//unpkg.com/jsx2tag?module';
		@@ -93,4 +114,6 @@ import {render, html} from '//unpkg.com/uhtml?module';

		Conditional keyed components are also possible: here another uhtml example:
		Conditional keyed components are also possible.

		Here another uhtml example:

		```js
		@@ -97,0 +120,0 @@ /** @jsx h //* @jsxFrag h */

New alerts