html-fns - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

index.js

@@ -1,35 +0,62 @@
-import _ from 'lodash'
-
 ///////////////////////////////////////////////////////////////////////////////
-// PRIVATE
+// MAIN
 ///////////////////////////////////////////////////////////////////////////////
 
-const escapeHtml = (html) => {
-	// Late we cn use https://github.com/component/escape-html
-	return _.escape(html)
+const noop = (strings, ...expressions) => {
+	let result = strings[0]
+	for (let i = 1, l = strings.length; i < l; i++) {
+		result += expressions[i - 1]
+		result += strings[i]
+	}
+	return result
 }
 
+export default noop
+export const html = noop
+export const css = noop
+
 ///////////////////////////////////////////////////////////////////////////////
-// TAG TEMPLATES
+// ESCAPE HTML
 ///////////////////////////////////////////////////////////////////////////////
 
+const matchHtmlRegExp = /["'&<>]/
+
+const htmlEscapes = {
+	'"': '&quot;',
+	'&': '&amp;',
+	"'": '&#39;',
+	'<': '&lt;',
+	'>': '&gt;',
+}
+
 /**
- * Tagged Template literal
- * 
- * Automatically calls function and concat arrays in expressions.
- * 
- * @returns {string}
+ * Escape special characters in the given string of text.
+ *
+ * @param {string} string - The string to escape for inserting into HTML
+ * @return {string}
  */
-export const html = (strings, ...vars) => {
-	return strings.reduce((accumulator, part, i) => {
-		let variable = vars[i - 1]
+function escapeHtmlFunc(string) {
+	const str = '' + string
+	const match = matchHtmlRegExp.exec(str)
 
-		if (Array.isArray(variable)) {
-			variable = variable.join(' ')
-		} else if (typeof variable === 'function') {
-			variable = variable()
+	if (!match) {
+		return str
+	}
+
+	let html = ''
+	let lastIndex = 0
+	let index
+
+	for (index = match.index; index < str.length; index++) {
+		const escape = htmlEscapes[str[index]]
+		if (escape) {
+			if (lastIndex !== index) {
+				html += str.substring(lastIndex, index)
+			}
+			html += escape
+			lastIndex = index + 1
 		}
+	}
 
-		return accumulator + variable + part
-	})
+	return lastIndex !== index ? html + str.substring(lastIndex, index) : html
 }
@@ -39,20 +66,78 @@
  * Escape html. Can be used as 'Tagged Template literal' or 'Function'
- * 
+ *
  * @returns {string}
  */
 export const safeHtml = (strings, ...vars) => {
-	if (!strings) {
-		return ''
+	// In tagged templates, the first argument is an array and it has the ".raw" property.
+	if (Array.isArray(strings.raw)) {
+		const escapedVars = vars.map(escapeHtmlFunc)
+		return html(strings, ...escapedVars)
 	}
+	// If it's not an array, then it's a string.
+	return escapeHtmlFunc(strings)
+}
 
-	// Позвояет вызывать как обычную функцию
-	if (typeof strings === 'string' || _.isNumber(strings)) {
-		return escapeHtml(strings)
+export const escapeHtml = escapeHtmlFunc
+
+///////////////////////////////////////////////////////////////////////////////
+// ITERATION & CONDITIONAL
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Convinient tteratation through Array or Object (values)
+ *
+ * @param {array|object|number} collection
+ * @param {function} callback
+ *
+ * @returns {string}
+ */
+export const $each = (collection, callback) => {
+	let iterable
+
+	if (typeof collection === 'number') {
+		iterable = Array.from({ length: collection }, (_, i) => i)
+	} else if (Array.isArray(collection)) {
+		iterable = collection
+	} else if (typeof collection === 'object' && collection !== null) {
+		iterable = Object.entries(collection)
+	} else {
+		return '' // Return empty string for invalid inputs
 	}
 
-	// В tagged templates первый аргумент массив и он имеет свойства ".raw".
-	if (Array.isArray(strings.raw)) {
-		const escapedVars = vars.map(escapeHtml)
-		return html(strings, ...escapedVars)
+	return iterable.reduce((html, item, index) => {
+		const [value, key] = Array.isArray(collection) ? [item, index] : item
+		const returnedFromCallback = callback(value, key)
+		return returnedFromCallback ? html + returnedFromCallback : html
+	}, '')
+}
+
+/**
+ * Don't render result if condition falsy or empty or throws an error.
+ *
+ * @param {*} condition
+ * @param {function} result
+ *
+ * @returns {*}
+ */
+export const $if = (condition, result) => {
+	let evaluatedCondition = condition
+
+	if (typeof condition === 'function') {
+		try {
+			evaluatedCondition = condition()
+		} catch {
+			return ''
+		}
 	}
+
+	if (
+		evaluatedCondition === false ||
+		evaluatedCondition == null ||
+		evaluatedCondition === '' ||
+		(typeof evaluatedCondition === 'object' && Object.keys(evaluatedCondition).length === 0)
+	) {
+		return ''
+	}
+
+	return result(evaluatedCondition)
 }
@@ -66,3 +151,3 @@
  * Create HTML tag
- * 
+ *
  * @param {string} tag
@@ -104,5 +189,5 @@ * @param {string|object} attributesOrClass
  * Remove comments from HTML string.
- * 
+ *
  * @param {string} str
- * 
+ *
  * @returns {string}
@@ -113,49 +198,1 @@ */
 }
-
-/**
- * Convinient tteratation through Array or Object (values)
- *
- * @param {array|object|number} collection
- * @param {function} calllback
- * 
- * @returns {string}
- */
-export const $each = (collection, calllback) => {
-	const iterable = typeof collection === 'number' ? _.range(collection) : collection
-
-	let html = ''
-
-	_.forEach(iterable, (value, key) => {
-		const returnedFromCallback = calllback(value, key)
-		if (returnedFromCallback) {
-			html += returnedFromCallback
-		}
-	})
-	return html
-}
-
-/**
- * Don't render result if condition falsy or empty or throws an error.
- *
- * @param {*} condition
- * @param {function} result
- * 
- * @returns {*}
- */
-export const $if = (condition, result) => {
-	if (typeof condition === 'function') {
-		try {
-			condition = condition()
-		} catch (error) {
-			return ''
-		}
-	}
-
-	if (_.isObject(condition) && _.isEmpty(condition)) {
-		return ''
-	}
-	if (!condition) {
-		return ''
-	}
-	return result(condition)
-}

package.json

 {
   "name": "html-fns",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Set of convinient pure functions to generate HTML on server-side  via tagged template literals.",
@@ -26,5 +26,3 @@ "main": "index.js",
   "license": "MIT",
-  "dependencies": {
-    "lodash": "^4.17.15"
-  }
+  "dependencies": {}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9965

increased by11.35%

Dependency count

0

decreased by-100%

Lines of code

165

increased by24.06%

Dependency changes

• - Removedlodash@^4.17.15

• - Removedlodash@4.17.21(transitive)