Revamped options utility (#154)

* Enhancements and deprecations for options hash Features * Added ability to override default options via linkify.options.defaults * Options that take functions with value and type arguments can now be specified as objects, where each key is the target type. For example: ``` 'github.com is #rad, please email nick@example.com'.linkify({ formatHref: { email: (mailto) => `${mailto}?subject=Hello`, hashtag: (hashtag) => `https://twitter.com/hashtag/${hashtag.substr(1)}` } }); ``` Bug fixes * Allow disabling linkClass (by using default options) - Fixes #144 Deprecations * Deprecated `linkClass` option. Use `className` instead * Deprecated `linkAttributes` option. Use `attributes` instead. * The `linkified` default class name for links will no longer be provided in a future release Breaking Changes * Fully removed deprecated `newLine` option * Unit tests for linkify options utilities Including improvements and fixes for QUnit tests * Additional refactorings and updates to get IE to work Note to self: IE8 is the devil
Hypercontext · Aug 16, 2016 · 2185b8a · 2185b8a
1 parent d659054
commit 2185b8a
Show file tree

Hide file tree

Showing 17 changed files with 382 additions and 239 deletions.
diff --git a/README.md b/README.md
@@ -144,7 +144,7 @@ require(['linkify-element'], function (linkifyElement) {
 
   // Linkify the #sidebar element
   linkifyElement(document.getElementById('sidebar'), {
-    linkClass: 'my-link'
+    className: 'my-link'
   });
 
   // Linkify all paragraph tags

diff --git a/src/linkify-element.js b/src/linkify-element.js
@@ -3,8 +3,10 @@
 */
 
 import * as linkify from './linkify';
-let tokenize = linkify.tokenize;
-let options = linkify.options;
+
+const {tokenize, options} = linkify;
+const {Options} = options;
+
 let TEXT_TOKEN = linkify.parser.TOKENS.TEXT;
 
 const HTML_NODE = 1, TXT_NODE = 3;
@@ -33,41 +35,41 @@ function replaceChildWithChildren(parent, oldChild, newChildren) {
 function tokensToNodes(tokens, opts, doc) {
 	let result = [];
 
-	for (let i = 0; i < tokens.length; i++) {
-		let token = tokens[i];
-
+	for (const token of tokens) {
 		if (token.type === 'nl' && opts.nl2br) {
 			result.push(doc.createElement('br'));
 			continue;
-		} else if (
-			!token.isLink ||
-			!options.resolve(opts.validate, token.toString(), token.type)
-		) {
+		} else if (!token.isLink || !opts.check(token)) {
 			result.push(doc.createTextNode(token.toString()));
 			continue;
 		}
 
-		let href = token.toHref(opts.defaultProtocol);
-		let formatted = options.resolve(opts.format, token.toString(), token.type);
-		let formattedHref = options.resolve(opts.formatHref, href, token.type);
-		let attributesHash = options.resolve(opts.attributes, href, token.type);
-		let tagName = options.resolve(opts.tagName, href, token.type);
-		let linkClass = options.resolve(opts.linkClass, href, token.type);
-		let target = options.resolve(opts.target, href, token.type);
-		let events = options.resolve(opts.events, href, token.type);
+		let {
+			formatted,
+			formattedHref,
+			tagName,
+			className,
+			target,
+			events,
+			attributes,
+		} = opts.resolve(token);
 
 		// Build the link
 		let link = doc.createElement(tagName);
 		link.setAttribute('href', formattedHref);
-		link.setAttribute('class', linkClass);
+
+		if (className) {
+			link.setAttribute('class', className);
+		}
+
 		if (target) {
 			link.setAttribute('target', target);
 		}
 
 		// Build up additional attributes
-		if (attributesHash) {
-			for (var attr in attributesHash) {
-				link.setAttribute(attr, attributesHash[attr]);
+		if (attributes) {
+			for (var attr in attributes) {
+				link.setAttribute(attr, attributes[attr]);
 			}
 		}
 
@@ -153,12 +155,12 @@ function linkifyElement(element, opts, doc = false) {
 		);
 	}
 
-	opts = options.normalize(opts);
+	opts = new Options(opts);
 	return linkifyElementHelper(element, opts, doc);
 }
 
 // Maintain reference to the recursive helper to cache option-normalization
 linkifyElement.helper = linkifyElementHelper;
-linkifyElement.normalize = options.normalize;
+linkifyElement.normalize = (opts) => new Options(opts);
 
 export default linkifyElement;
diff --git a/src/linkify-html.js b/src/linkify-html.js
@@ -1,7 +1,9 @@
 import HTML5Tokenizer from './simple-html-tokenizer';
 import * as linkify from './linkify';
 
-const options = linkify.options;
+const {options} = linkify;
+const {Options} = options;
+
 const StartTag = 'StartTag';
 const EndTag = 'EndTag';
 const Chars = 'Chars';
@@ -17,7 +19,7 @@ export default function linkifyHtml(str, opts={}) {
 	let linkified = [];
 	var i;
 
-	opts = linkify.options.normalize(opts);
+	opts = new Options(opts);
 
 	// Linkify the tokens given by the parser
 	for (i = 0; i < tokens.length; i++) {
@@ -86,8 +88,6 @@ function linkifyChars(str, opts) {
 
 	for (var i = 0; i < tokens.length; i++) {
 		let token = tokens[i];
-		let validated = token.isLink
-			&& linkify.options.resolve(opts.validate, token.toString(), token.type);
 
 		if (token.type === 'nl' && opts.nl2br) {
 			result.push({
@@ -97,38 +97,43 @@ function linkifyChars(str, opts) {
 				selfClosing: true
 			});
 			continue;
-		} else if (!token.isLink || !validated) {
+		} else if (!token.isLink || !opts.check(token)) {
 			result.push({type: Chars, chars: token.toString()});
 			continue;
 		}
 
-		let href			= token.toHref(opts.defaultProtocol);
-		let formatted		= linkify.options.resolve(opts.format, token.toString(), token.type);
-		let formattedHref	= linkify.options.resolve(opts.formatHref, href, token.type);
-		let attributesHash	= linkify.options.resolve(opts.attributes, href, token.type);
-		let tagName			= linkify.options.resolve(opts.tagName, href, token.type);
-		let linkClass		= linkify.options.resolve(opts.linkClass, href, token.type);
-		let target			= linkify.options.resolve(opts.target, href, token.type);
+		let {
+			href,
+			formatted,
+			formattedHref,
+			tagName,
+			className,
+			target,
+			attributes
+		} = opts.resolve(token);
 
 		// Build up attributes
-		let attributes = [
+		let attributeArray = [
 			['href', formattedHref],
-			['class', linkClass]
 		];
 
+		if (className) {
+			attributeArray.push(['class', className]);
+		}
+
 		if (target) {
-			attributes.push(['target', target]);
+			attributeArray.push(['target', target]);
 		}
 
-		for (var attr in attributesHash) {
-			attributes.push([attr, attributesHash[attr]]);
+		for (var attr in attributes) {
+			attributeArray.push([attr, attributes[attr]]);
 		}
 
 		// Add the required tokens
 		result.push({
 			type: StartTag,
 			tagName: tagName,
-			attributes: attributes,
+			attributes: attributeArray,
 			selfClosing: false
 		});
 		result.push({type: Chars, chars: formatted});

diff --git a/src/linkify-jquery.js b/src/linkify-jquery.js
@@ -39,18 +39,17 @@ export default function apply($, doc = false) {
 			let target = data.linkify;
 			let nl2br = data.linkifyNlbr;
 			let options = {
-				linkAttributes:		data.linkifyAttributes,
-				defaultProtocol: 	data.linkifyDefaultProtocol,
-				events: 			data.linkifyEvents,
-				format:				data.linkifyFormat,
-				formatHref:			data.linkifyFormatHref,
-				newLine:			data.linkifyNewline, // deprecated
-				nl2br:				!!nl2br && nl2br !== 0 && nl2br !== 'false',
-				tagName:			data.linkifyTagname,
-				target:				data.linkifyTarget,
-				linkClass:			data.linkifyLinkclass,
-				validate:			data.linkifyValidate,
-				ignoreTags:			data.linkifyIgnoreTags
+				attributes: data.linkifyAttributes,
+				defaultProtocol: data.linkifyDefaultProtocol,
+				events: data.linkifyEvents,
+				format: data.linkifyFormat,
+				formatHref: data.linkifyFormatHref,
+				nl2br: !!nl2br && nl2br !== 0 && nl2br !== 'false',
+				tagName: data.linkifyTagname,
+				target: data.linkifyTarget,
+				className: data.linkifyClassName || data.linkifyLinkclass, // linkClass is deprecated
+				validate: data.linkifyValidate,
+				ignoreTags: data.linkifyIgnoreTags
 			};
 			let $target = target === 'this' ? $this : $this.find(target);
 			$target.linkify(options);

diff --git a/src/linkify-react.js b/src/linkify-react.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import * as linkify from './linkify';
 
-let options = linkify.options;
+const {options} = linkify;
+const {Options} = options;
 
 // Given a string, converts to an array of valid React components
 // (which may include strings)
@@ -11,43 +12,47 @@ function stringToElements(str, opts) {
 	let elements = [];
 	var linkId = 0;
 
-	for (const token of tokens) {
+	for (var i  = 0; i < tokens.length; i++) {
+		let token = tokens[i];
+
 		if (token.type === 'nl' && opts.nl2br) {
 			elements.push(React.createElement('br', {key: `linkified-${++linkId}`}));
 			continue;
-		} else if (
-			!token.isLink ||
-			!options.resolve(opts.validate, token.toString(), token.type)
-		) {
+		} else if (!token.isLink || !opts.check(token)) {
 			// Regular text
 			elements.push(token.toString());
 			continue;
 		}
 
-		let href = token.toHref(opts.defaultProtocol);
-		let formatted = options.resolve(opts.format, token.toString(), token.type);
-		let formattedHref = options.resolve(opts.formatHref, href, token.type);
-		let attributesHash = options.resolve(opts.attributes, href, token.type);
-		let tagName = options.resolve(opts.tagName, href, token.type);
-		let linkClass = options.resolve(opts.linkClass, href, token.type);
-		let target = options.resolve(opts.target, href, token.type);
-		let events = options.resolve(opts.events, href, token.type);
+		let {
+			href,
+			formatted,
+			formattedHref,
+			tagName,
+			className,
+			target,
+			attributes,
+			events
+		} = opts.resolve(token);
 
 		let props = {
 			key: `linkified-${++linkId}`,
-			href: href,
-			className: linkClass,
+			href: formattedHref,
 		};
 
+		if (className) {
+			props.className = className;
+		}
+
 		if (target) {
 			props.target = target;
 		}
 
 		// Build up additional attributes
 		// Support for events via attributes hash
-		if (attributesHash) {
-			for (var attr in attributesHash) {
-				props[attr] = attributesHash[attr];
+		if (attributes) {
+			for (var attr in attributes) {
+				props[attr] = attributes[attr];
 			}
 		}
 
@@ -103,8 +108,8 @@ var Linkify = React.createClass({
 			}
 		}
 
-		var opts = options.normalize(this.props.options);
-		var tagName = this.props.tagName || 'span';
+		let opts = new Options(this.props.options);
+		let tagName = this.props.tagName || 'span';
 		let element = React.createElement(tagName, newProps);
 
 		return linkifyReactElement(element, opts, 0);