feat: add testing & bench, fix issue #2, refactor

BREAKING CHANGE: default export has been removed in favor of named export

BREAKING CHANGE: right-most arguments were not originally given precedence in all cases. This has been fixed.

Author: alexsasharegan

.editorconfig

@@ -0,0 +1,14 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+indent_size = 2
+max_line_length = 180

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 .*
 !.gitignore
+!.editorconfig
+coverage/

src/index.test.ts renamed to __test__/array-merge.test.ts

@@ -1,5 +1,5 @@
 import { VNodeData, VNodeDirective } from "vue"
-import { mergeData } from "./index"
+import { mergeData } from "../src/index"
 
 it("should execute array merge on class, style, directive properties", () => {
 	let vd1: VNodeData = {
@@ -13,8 +13,8 @@ it("should execute array merge on class, style, directive properties", () => {
 
 	let actual = mergeData(vd1, vd2)
 	let expected = {
-		class: ["a", { b: true, c: false }, "d", { e: true, f: false }],
-		style: ["display:block;", { color: "red", fontSize: "16px" }, "position:absolute;"],
+		class: ["d", { e: true, f: false }, "a", { b: true, c: false }],
+		style: ["position:absolute;", "display:block;", { color: "red", fontSize: "16px" }],
 	}
 
 	// Check values recursively
@@ -27,3 +27,14 @@ it("should execute array merge on class, style, directive properties", () => {
 	expect(actual.style).not.toBe(vd1.style)
 	expect(actual.style).not.toBe(vd2.style)
 })
+
+it("should init types to array", () => {
+	let test = mergeData({ class: "string" })
+	expect(Array.isArray(test.class)).toBe(true)
+
+	test = mergeData({ class: { string: true } })
+	expect(Array.isArray(test.class)).toBe(true)
+
+	test = mergeData({ class: ["string"] })
+	expect(Array.isArray(test.class)).toBe(true)
+})

__test__/handler-merge.test.ts

@@ -0,0 +1,64 @@
+import { VNodeData, VNodeDirective } from "vue"
+import { mergeData } from "../src/index"
+
+it("should not mutate original object (issue #2)", () => {
+	let def1 = { on: { click() {} } }
+	let def2 = { on: { click() {} } }
+
+	let onclick1 = def1.on.click
+	let onclick2 = def2.on.click
+
+	let data = mergeData({}, def1, def2)
+
+	expect(def1.on).not.toBe(data.on)
+	expect(def2.on).not.toBe(data.on)
+
+	expect(def1.on.click).toBe(onclick1)
+	expect(def2.on.click).toBe(onclick2)
+
+	expect(data.on.click).toContain(onclick1)
+	expect(data.on.click).toContain(onclick2)
+})
+
+it("should set single handlers and concat multi", () => {
+	let h1 = console.log
+	let h2 = console.info
+	let h3 = console.error
+	let actual: VNodeData
+
+	actual = mergeData({ class: ["btn", "text-center"] }, { on: { mouseup: h1 } })
+	expect(actual).toMatchObject({ on: { mouseup: h1 } })
+	expect(Array.isArray(actual.on.mouseup)).toBe(false)
+
+	actual = mergeData({ nativeOn: { mouseup: h1 } }, { class: ["btn", "text-center"] })
+	expect(actual).toMatchObject({ nativeOn: { mouseup: h1 } })
+	expect(Array.isArray(actual.nativeOn.mouseup)).toBe(false)
+
+	actual = mergeData({ on: { mouseup: h1 } }, { on: { mouseup: h2 } }, { on: { mouseup: h3 } })
+	expect(Array.isArray(actual.on.mouseup)).toBe(true)
+	expect(actual.on.mouseup).toContain(h1)
+	expect(actual.on.mouseup).toContain(h2)
+	expect(actual.on.mouseup).toContain(h3)
+})
+
+it("should call the right-most argument first", () => {
+	let first = 0
+	let factory = n => () => {
+		if (!first) {
+			first = n
+		}
+	}
+
+	let actual = mergeData(
+		{ on: { click: factory(1) } },
+		{ on: { click: factory(2) } },
+		{ on: { click: factory(3) } },
+		{ on: { click: factory(4) } }
+	)
+
+	expect(Array.isArray(actual.on.click)).toBe(true)
+	for (const fn of actual.on.click) {
+		fn()
+	}
+	expect(first).toBe(4)
+})

__test__/kitchen-sink.test.ts

@@ -0,0 +1,70 @@
+import { VNodeData, VNodeDirective } from "vue"
+import { mergeData } from "../src/index"
+
+it("should handle multiple arguments", () => {
+	// Pre-define functions so they compare equal
+	function click() {}
+	function mouseup() {}
+
+	let expected: VNodeData = {
+		staticClass: "btn ml-auto",
+		class: [{ "text-center": true }, "btn-block", { "btn-primary": true }],
+		on: {
+			click: [click, click],
+			mouseup: [mouseup, mouseup],
+		},
+	}
+
+	let actual = mergeData(
+		{ staticClass: "ml-auto" },
+		{ staticClass: "btn", class: { "btn-primary": true } },
+		{ class: ["btn-block"] },
+		{ on: { click, mouseup } },
+		{ on: { click, mouseup } },
+		{ class: { "text-center": true } }
+	)
+
+	expect(actual).toEqual(expected)
+})
+
+it("should work like in the example", () => {
+	let onClick1 = e => alert("💥")
+	let onClick2 = e => alert("👍")
+
+	let componentData: VNodeData = {
+		staticClass: "fn-component", // concatenates all static classes
+		class: {
+			active: true,
+			"special-class": false,
+		},
+		attrs: {
+			id: "my-functional-component",
+		},
+		on: {
+			click: onClick1,
+		},
+	}
+	// <my-btn variant="primary" type="submit" id="form-submit-btn" @click="onClick">Submit</my-btn>
+	let templateData: VNodeData = {
+		attrs: {
+			id: "form-submit-btn",
+			type: "submit",
+		},
+		on: { click: onClick2 },
+	}
+
+	expect(mergeData(templateData, componentData)).toEqual({
+		staticClass: "fn-component",
+		class: expect.arrayContaining([
+			{
+				active: true,
+				"special-class": false,
+			},
+		]),
+		attrs: {
+			id: "my-functional-component",
+			type: "submit",
+		},
+		on: { click: expect.arrayContaining([onClick1, onClick2]) },
+	})
+})

__test__/reassign.test.ts

@@ -0,0 +1,13 @@
+import { VNodeData, VNodeDirective } from "vue"
+import { mergeData } from "../src/index"
+
+it("should reassign primitives", () => {
+	let override: VNodeData = { ref: "winning" }
+	let vd1: VNodeData = { ref: "ref1" }
+	let vd2: VNodeData = { ref: "ref2" }
+	let vd3: VNodeData = { ref: "ref3" }
+	let vd4: VNodeData = { ref: "ref4" }
+
+	let actual = mergeData(vd1, vd2, vd3, vd4, override)
+	expect(actual.ref).toBe("winning")
+})

__test__/string-concat.test.ts

@@ -0,0 +1,15 @@
+import { VNodeData, VNodeDirective } from "vue"
+import { mergeData } from "../src/index"
+
+it("should concatenate strings", () => {
+	let test: VNodeData[] = [
+		{ staticClass: "" },
+		{ staticClass: "class-1" },
+		{ staticClass: "class-2" },
+		{ staticClass: "" },
+		{ staticClass: "class-3" },
+	]
+	let actual = mergeData(...test)
+
+	expect(actual.staticClass).toBe("class-3 class-2 class-1")
+})

benchmark/index.js

@@ -0,0 +1,36 @@
+const { mergeData } = require("../dist/lib.common")
+const { Suite } = require("benchmark")
+
+let mergeSuite = new Suite("mergeData", {
+	onCycle(e) {
+		console.log(e.target.toString())
+	},
+})
+
+let tests = []
+
+tests.push(function basic() {
+	mergeData(
+		{
+			staticClass: "btn",
+			class: { "btn-primary": true },
+		},
+		{ class: ["btn-block"] }
+	)
+})
+
+tests.push(function multi() {
+	mergeData(
+		{ staticClass: "btn", class: { "btn-primary": true } },
+		{ class: ["btn-block"] },
+		{ on: { click() {}, mouseup() {} } },
+		{ on: { click() {}, mouseup() {} } },
+		{ class: { "text-center": true } }
+	)
+})
+
+for (const fn of tests) {
+	mergeSuite.add(fn.name, fn)
+}
+
+mergeSuite.run()

dist/index.d.ts

@@ -1,3 +1,3 @@
 import { VNodeData } from "vue";
 declare function mergeData(...vNodeData: VNodeData[]): VNodeData;
-export default mergeData;
+export { mergeData };