chore(docs): adds explanation on scoped styles

Author: alexsasharegan

.gitignore

@@ -3,4 +3,5 @@ node_modules/
 !.gitignore
 !.editorconfig
 !.travis.yml
+!.prettierrc
 coverage/

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+	"useTabs": false,
+	"proseWrap": "always"
+}

__test__/array-merge.test.ts

@@ -1,40 +1,49 @@
-import { VNodeData, VNodeDirective } from "vue"
-import { mergeData } from "../src/index"
+import { VNodeData, VNodeDirective } from "vue";
+import { mergeData } from "../src/index";
 
 it("should execute array merge on class, style, directive properties", () => {
-	let vd1: VNodeData = {
-		class: ["a", { b: true, c: false }],
-		style: ["display:block;", { color: "red", fontSize: "16px" }],
-	}
-	let vd2: VNodeData = {
-		class: ["d", { e: true, f: false }],
-		style: "position:absolute;",
-	}
+  function inserted(el: any) {
+    el.focus();
+  }
+  let vd1: VNodeData = {
+    class: ["a", { b: true, c: false }],
+    style: ["display:block;", { color: "red", fontSize: "16px" }],
+  };
+  let vd2: VNodeData = {
+    class: ["d", { e: true, f: false }],
+    style: "position:absolute;",
+    directives: [{ focus: { inserted } }],
+  };
 
-	let actual = mergeData(vd1, vd2)
-	let expected = {
-		class: ["d", { e: true, f: false }, "a", { b: true, c: false }],
-		style: ["position:absolute;", "display:block;", { color: "red", fontSize: "16px" }],
-	}
+  let actual = mergeData(vd1, vd2);
+  let expected = {
+    class: ["d", { e: true, f: false }, "a", { b: true, c: false }],
+    style: [
+      "position:absolute;",
+      "display:block;",
+      { color: "red", fontSize: "16px" },
+    ],
+    directives: [{ focus: { inserted } }],
+  };
 
-	// Check values recursively
-	expect(actual).toEqual(expected)
-	// Check that root object refs do not match
-	expect(actual).not.toBe(expected)
-	// Check that level 1 object refs do not match
-	expect(actual.class).not.toBe(vd1.class)
-	expect(actual.class).not.toBe(vd2.class)
-	expect(actual.style).not.toBe(vd1.style)
-	expect(actual.style).not.toBe(vd2.style)
-})
+  // Check values recursively
+  expect(actual).toEqual(expected);
+  // Check that root object refs do not match
+  expect(actual).not.toBe(expected);
+  // Check that level 1 object refs do not match
+  expect(actual.class).not.toBe(vd1.class);
+  expect(actual.class).not.toBe(vd2.class);
+  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)
+  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: true } });
+  expect(Array.isArray(test.class)).toBe(true);
 
-	test = mergeData({ class: ["string"] })
-	expect(Array.isArray(test.class)).toBe(true)
-})
+  test = mergeData({ class: ["string"] });
+  expect(Array.isArray(test.class)).toBe(true);
+});

__test__/handler-merge.test.ts

@@ -1,65 +1,75 @@
-import { VNodeData, VNodeDirective } from "vue"
-import { mergeData } from "../src/index"
+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 def1 = { on: { click() {} } };
+  let def2 = { on: { click() {} } };
 
-	let onclick1 = def1.on.click
-	let onclick2 = def2.on.click
+  let onclick1 = def1.on.click;
+  let onclick2 = def2.on.click;
 
-	let data = mergeData({}, def1, def2)
+  let data = mergeData({}, def1, def2);
 
-	expect(def1.on).not.toBe(data.on)
-	expect(def2.on).not.toBe(data.on)
+  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(def1.on.click).toBe(onclick1);
+  expect(def2.on.click).toBe(onclick2);
 
-	expect(data.on.click).toContain(onclick1)
-	expect(data.on.click).toContain(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
+  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(
+    { 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(
+    { 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)
-})
+  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 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) } }
-	)
+  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)
-	expect(actual).toMatchSnapshot("merge-4")
-})
+  expect(Array.isArray(actual.on.click)).toBe(true);
+  for (const fn of actual.on.click) {
+    fn();
+  }
+  expect(first).toBe(4);
+  expect(actual).toMatchSnapshot("merge-4");
+});

__test__/kitchen-sink.test.ts

@@ -1,70 +1,70 @@
-import { VNodeData, VNodeDirective } from "vue"
-import { mergeData } from "../src/index"
+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() {}
+  // 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 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 } }
-	)
+  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)
-})
+  expect(actual).toEqual(expected);
+});
 
 it("should work like in the example", () => {
-	let onClick1 = e => alert("💥")
-	let onClick2 = e => alert("👍")
+  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 },
-	}
+  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]) },
-	})
-})
+  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__/nullable-objects.test.ts

@@ -1,12 +1,12 @@
-import { VNodeData, VNodeDirective } from "vue"
-import { mergeData } from "../src/index"
+import { VNodeData, VNodeDirective } from "vue";
+import { mergeData } from "../src/index";
 
 it("should handle nested nullable objects as initial state", () => {
-	let testData: VNodeData[] = [{ on: undefined }, { staticClass: "foo" }]
-	let actual: VNodeData
-	let boom = () => (actual = mergeData(...testData))
+  let testData: VNodeData[] = [{ on: undefined }, { staticClass: "foo" }];
+  let actual: VNodeData;
+  let boom = () => (actual = mergeData(...testData));
 
-	expect(boom).not.toThrowError()
-	expect(actual.staticClass).toBe("foo")
-	expect(actual.on).toEqual({})
-})
+  expect(boom).not.toThrowError();
+  expect(actual.staticClass).toBe("foo");
+  expect(actual.on).toEqual({});
+});