Skip to content
This repository was archived by the owner on Oct 1, 2024. It is now read-only.

Commit b9aa7ed

Browse files
ntollntoll
committed
Revise toJS->nodeToJS, toDOM->jsToNode and remove JSON serialization (now happens in the messaging layer). Revise tests.
1 parent fe2a259 commit b9aa7ed

File tree

2 files changed

+117
-140
lines changed

2 files changed

+117
-140
lines changed

‎polyplug.js

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const polyplug = function() {
4040
Serialization functions for PolyPlug.
4141
**************************************************************************/
4242

43-
function toJS(node) {
43+
function nodeToJS(node) {
4444
/*
4545
Takes a node in the DOM and recursively converts it and its children
4646
into a JSON encodable JavaScript object.
@@ -88,7 +88,7 @@ const polyplug = function() {
8888
// since their content is supposed to be defined via their "value".
8989
if (obj.tagName !== 'textarea' && childNodes && childNodes.length > 0) {
9090
for (let i=0; i<childNodes.length; i++) {
91-
const child = toJS(childNodes[i]);
91+
const child = nodeToJS(childNodes[i]);
9292
if (!(child.nodeValue && child.nodeValue.trim() === "")) {
9393
childNodesJS.push(child);
9494
}
@@ -98,14 +98,7 @@ const polyplug = function() {
9898
return obj;
9999
}
100100

101-
function toJSON(node) {
102-
/*
103-
Takes a node in the DOM and serialises it into JSON.
104-
*/
105-
return JSON.stringify(toJS(node));
106-
}
107-
108-
function toNode(obj) {
101+
function jsToNode(obj) {
109102
/*
110103
Takes a JavaScript object and returns the equivalent HTML node.
111104
@@ -160,20 +153,12 @@ const polyplug = function() {
160153
// since their content is supposed to be defined via their "value".)
161154
if (obj.tagName !== 'textarea' && obj.childNodes && obj.childNodes.length > 0) {
162155
for (const childNode of obj.childNodes) {
163-
node.appendChild(toNode(childNode));
156+
node.appendChild(jsToNode(childNode));
164157
}
165158
}
166159
return node;
167160
}
168161

169-
function toDOM(jsonString) {
170-
/*
171-
Takes a JSON string and returns an equivalent HTML node to merge into
172-
the DOM.
173-
*/
174-
return toNode(JSON.parse(jsonString));
175-
}
176-
177162
/**************************************************************************
178163
DOM mutation functions for PolyPlug.
179164
**************************************************************************/
@@ -365,7 +350,7 @@ const polyplug = function() {
365350
element.addEventListener(eventType, function(e) {
366351
const detail = JSON.stringify({
367352
type: e.type,
368-
target: toJS(e.target),
353+
target: nodeToJS(e.target),
369354
listener: listener
370355
});
371356
const send = new CustomEvent("polyplugSend", {detail: detail});
@@ -430,7 +415,7 @@ const polyplug = function() {
430415
if (elements.length === 1) {
431416
// Update the single valid match to
432417
const oldElement = elements[0];
433-
const newElement = toNode(msg.target)
418+
const newElement = jsToNode(msg.target)
434419
mutate(oldElement, newElement);
435420
}
436421
}
@@ -515,8 +500,8 @@ const polyplug = function() {
515500
}
516501

517502
return {
518-
toJSON: toJSON,
519-
toDOM: toDOM,
503+
nodeToJS: nodeToJS,
504+
jsToNode: jsToNode,
520505
mutate: mutate,
521506
getElements: getElements,
522507
registerEvent: registerEvent,

‎spec/polyplugSpec.js

Lines changed: 109 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe("When working with PolyPlug,", function() {
77
plug = polyplug();
88
});
99

10-
describe("when serializing to or from the DOM,", function() {
10+
describe("when serializing to or from JS/HTML nodes,", function() {
1111

1212
beforeEach(function() {
1313
// A fragment of HTML containing various generic elements we'll use to
@@ -30,150 +30,143 @@ describe("When working with PolyPlug,", function() {
3030
<li>b</li>
3131
<li>c</li>
3232
</ul>`;
33-
jsonString = `{
34-
"nodeType": 1,
35-
"tagName": "div",
36-
"attributes": {
37-
"id": "test-node",
38-
"style": "font-weight: bold;",
39-
"custom-attribute": ""
40-
},
41-
"childNodes": [
42-
{
33+
jsRepresentation = {
4334
"nodeType": 1,
44-
"tagName": "p",
45-
"childNodes": [
46-
{
47-
"nodeType": 3,
48-
"nodeName": "#text",
49-
"nodeValue": "Textual content.",
50-
"childNodes": []
51-
}
52-
]
53-
},
54-
{
55-
"nodeType": 8,
56-
"nodeName": "#comment",
57-
"nodeValue": " A comment ",
58-
"childNodes": []
59-
},
60-
{
61-
"nodeType": 1,
62-
"tagName": "form",
35+
"tagName": "div",
36+
"attributes": {
37+
"id": "test-node",
38+
"style": "font-weight: bold;",
39+
"custom-attribute": ""
40+
},
6341
"childNodes": [
6442
{
6543
"nodeType": 1,
66-
"tagName": "label",
67-
"attributes": {
68-
"for": "testInput"
69-
},
44+
"tagName": "p",
7045
"childNodes": [
7146
{
7247
"nodeType": 3,
7348
"nodeName": "#text",
74-
"nodeValue": "Test Input",
49+
"nodeValue": "Textual content.",
7550
"childNodes": []
7651
}
7752
]
7853
},
7954
{
80-
"nodeType": 1,
81-
"tagName": "input",
82-
"attributes": {
83-
"type": "text",
84-
"name": "testInput",
85-
"value": "test"
86-
},
87-
"childNodes": []
88-
},
89-
{
90-
"nodeType": 1,
91-
"tagName": "textarea",
92-
"value": "Some free text content...",
55+
"nodeType": 8,
56+
"nodeName": "#comment",
57+
"nodeValue": " A comment ",
9358
"childNodes": []
9459
},
9560
{
9661
"nodeType": 1,
97-
"tagName": "input",
98-
"attributes": {
99-
"type": "submit",
100-
"value": "Submit"
101-
},
102-
"childNodes": []
103-
}
104-
]
105-
},
106-
{
107-
"nodeType": 1,
108-
"tagName": "ul",
109-
"attributes": {
110-
"id": "list"
111-
},
112-
"childNodes": [
113-
{
114-
"nodeType": 1,
115-
"tagName": "li",
62+
"tagName": "form",
11663
"childNodes": [
11764
{
118-
"nodeType": 3,
119-
"nodeName": "#text",
120-
"nodeValue": "a",
65+
"nodeType": 1,
66+
"tagName": "label",
67+
"attributes": {
68+
"for": "testInput"
69+
},
70+
"childNodes": [
71+
{
72+
"nodeType": 3,
73+
"nodeName": "#text",
74+
"nodeValue": "Test Input",
75+
"childNodes": []
76+
}
77+
]
78+
},
79+
{
80+
"nodeType": 1,
81+
"tagName": "input",
82+
"attributes": {
83+
"type": "text",
84+
"name": "testInput",
85+
"value": "test"
86+
},
12187
"childNodes": []
122-
}
123-
]
124-
},
125-
{
126-
"nodeType": 1,
127-
"tagName": "li",
128-
"childNodes": [
88+
},
12989
{
130-
"nodeType": 3,
131-
"nodeName": "#text",
132-
"nodeValue": "b",
90+
"nodeType": 1,
91+
"tagName": "textarea",
92+
"value": "Some free text content...",
93+
"childNodes": []
94+
},
95+
{
96+
"nodeType": 1,
97+
"tagName": "input",
98+
"attributes": {
99+
"type": "submit",
100+
"value": "Submit"
101+
},
133102
"childNodes": []
134103
}
135104
]
136105
},
137106
{
138107
"nodeType": 1,
139-
"tagName": "li",
108+
"tagName": "ul",
109+
"attributes": {
110+
"id": "list"
111+
},
140112
"childNodes": [
141113
{
142-
"nodeType": 3,
143-
"nodeName": "#text",
144-
"nodeValue": "c",
145-
"childNodes": []
114+
"nodeType": 1,
115+
"tagName": "li",
116+
"childNodes": [
117+
{
118+
"nodeType": 3,
119+
"nodeName": "#text",
120+
"nodeValue": "a",
121+
"childNodes": []
122+
}
123+
]
124+
},
125+
{
126+
"nodeType": 1,
127+
"tagName": "li",
128+
"childNodes": [
129+
{
130+
"nodeType": 3,
131+
"nodeName": "#text",
132+
"nodeValue": "b",
133+
"childNodes": []
134+
}
135+
]
136+
},
137+
{
138+
"nodeType": 1,
139+
"tagName": "li",
140+
"childNodes": [
141+
{
142+
"nodeType": 3,
143+
"nodeName": "#text",
144+
"nodeValue": "c",
145+
"childNodes": []
146+
}
147+
]
146148
}
147149
]
148150
}
149151
]
150-
}
151-
]
152-
}`;
152+
};
153153
});
154154

155-
describe("the toJSON function,", function() {
156-
it("takes an HTML node and returns an accurate string of JSON", function() {
157-
const result = plug.toJSON(node);
158-
// Ensure we get a string...
159-
expect(result).toBeInstanceOf(String);
160-
// that is valid JSON...
161-
const fromJSON = JSON.parse(result);
162-
// of the expected shape.
163-
const expectedObject = JSON.parse(jsonString);
164-
expect(fromJSON).toEqual(expectedObject);
155+
describe("the nodeToJSON function,", function() {
156+
it("takes an HTML node and returns a (JSON serializable) JS object", function() {
157+
const result = plug.nodeToJS(node);
158+
// is JS that's serializable to JSON...
159+
const jsonResult = JSON.stringify(result);
160+
// and of the expected shape.
161+
expect(result).toEqual(jsRepresentation);
165162
});
166163
});
167164

168-
describe("the toDOM function,", function() {
169-
it("takes a JSON string and returns the expected DOM fragment", function() {
170-
const domResult = plug.toDOM(jsonString);
171-
// Because the JSON serialization removes extraneous things like
172-
// newlines (so the node object and domResult won't be the same), just
173-
// re-serialize to JSON to check they're the same.
174-
const jsonResult = plug.toJSON(domResult);
175-
const expectedObject = plug.toJSON(node);
176-
expect(jsonResult).toEqual(expectedObject);
165+
describe("the jsToNode function,", function() {
166+
it("takes a JS object and returns the expected DOM fragment", function() {
167+
const domResult = plug.jsToNode(jsRepresentation);
168+
const jsonResult = plug.nodeToJS(domResult);
169+
expect(jsonResult).toEqual(jsRepresentation);
177170
});
178171
});
179172
});
@@ -229,21 +222,21 @@ describe("When working with PolyPlug,", function() {
229222
});
230223

231224
it("the oldNode is mutated to the newNode", function() {
232-
const expectedJSON = plug.toJSON(newNode);
233-
// The JSON serialization for both old and new are different.
234-
expect(plug.toJSON(oldNode)).not.toEqual(expectedJSON);
225+
const expectedJS = plug.nodeToJS(newNode);
226+
// The JS serialization for both old and new are different.
227+
expect(plug.nodeToJS(oldNode)).not.toEqual(expectedJS);
235228
// Mutate.
236229
const is_changed = plug.mutate(oldNode, newNode);
237230
// Confirmation the oldNode has changed.
238231
expect(is_changed).toEqual(true);
239232
// The JSON serialization for both old and new are now the same.
240-
expect(plug.toJSON(oldNode)).toEqual(expectedJSON);
233+
expect(plug.nodeToJS(oldNode)).toEqual(expectedJS);
241234
});
242235

243236
it("the oldNode isn't changed if newNode is the same", function() {
244-
const expectedJSON = plug.toJSON(oldNode);
245-
const nodeA = plug.toDOM(expectedJSON);
246-
const nodeB = plug.toDOM(expectedJSON);
237+
const expectedJS = plug.nodeToJS(oldNode);
238+
const nodeA = plug.jsToNode(expectedJS);
239+
const nodeB = plug.jsToNode(expectedJS);
247240
// Mutate
248241
const is_changed = plug.mutate(nodeA, nodeB);
249242
// No change.
@@ -347,9 +340,8 @@ describe("When working with PolyPlug,", function() {
347340
plug.receiveMessage(msg);
348341
// The DOM has been updated as expected.
349342
const updatedDIV = plug.getElements({id: "testMutate"})[0];
350-
const actual = plug.toJSON(updatedDIV);
351-
const expected = JSON.stringify(target);
352-
expect(actual).toEqual(expected);
343+
const actual = plug.nodeToJS(updatedDIV);
344+
expect(actual).toEqual(target);
353345
});
354346
it("the registerEvent message registers an event", function(done) {
355347
const msg = JSON.stringify({

0 commit comments

Comments
 (0)