@esportsplus/template 0.19.0 → 0.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/build/html/index.d.ts +1 -1
  2. package/build/html/index.js +9 -25
  3. package/build/html/parser.js +3 -12
  4. package/build/types.d.ts +1 -5
  5. package/package.json +1 -1
  6. package/src/attributes.ts +3 -0
  7. package/src/html/index.ts +39 -29
  8. package/src/html/parser.ts +17 -14
  9. package/src/types.ts +7 -5
package/build/html/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactiveArray } from '@esportsplus/reactivity';
2
2
  import { RenderableReactive, RenderableValue } from '../types.js';
3
3
  declare const html: {
4
- (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]): DocumentFragment;
4
+ (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]): Node;
5
5
  reactive<T>(array: ReactiveArray<T[]>, template: RenderableReactive["template"]): RenderableReactive;
6
6
  };
7
7
  export default html;
package/build/html/index.js CHANGED
@@ -2,37 +2,21 @@ import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '../constants.js';
2
2
  import { cloneNode } from '../utilities/node.js';
3
3
  import parser from './parser.js';
4
4
  const html = (literals, ...values) => {
5
- let { fragment, slots } = parser.parse(literals);
6
- fragment = cloneNode.call(fragment, true);
5
+ let { fragment, slots } = parser.parse(literals), clone = cloneNode.call(fragment, true);
7
6
  if (slots !== null) {
8
- let node, nodePath, parent, parentPath;
9
- for (let i = 0, n = slots.length; i < n; i++) {
10
- let { fn, path, slot } = slots[i], pp = path.parent, pr = path.relative;
11
- if (pp !== parentPath) {
12
- if (pp === nodePath) {
13
- parent = node;
14
- parentPath = nodePath;
15
- nodePath = undefined;
16
- }
17
- else {
18
- parent = fragment;
19
- parentPath = pp;
20
- for (let i = 0, n = pp.length; i < n; i++) {
21
- parent = pp[i].call(parent);
22
- }
23
- }
24
- }
25
- if (pr !== nodePath) {
26
- node = parent;
27
- nodePath = path.absolute;
28
- for (let i = 0, n = pr.length; i < n; i++) {
29
- node = pr[i].call(node);
7
+ let node, nodePath;
8
+ for (let i = slots.length - 1; i >= 0; i--) {
9
+ let { fn, path, slot } = slots[i];
10
+ if (nodePath !== path) {
11
+ node = clone;
12
+ for (let i = 0, n = path.length; i < n; i++) {
13
+ node = path[i].call(node);
30
14
  }
31
15
  }
32
16
  fn(node, values[slot]);
33
17
  }
34
18
  }
35
- return fragment;
19
+ return clone;
36
20
  };
37
21
  html.reactive = (array, template) => {
38
22
  return {
package/build/html/parser.js CHANGED
@@ -27,15 +27,11 @@ function build(literals) {
27
27
  ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
28
28
  : methods(parent.children, [], firstChild, nextSibling);
29
29
  if (attr) {
30
- let i = attr.indexOf(SLOT_MARKER), p = {
31
- absolute: path,
32
- parent: parent.path,
33
- relative: path.slice(parent.path.length)
34
- };
30
+ let i = attr.indexOf(SLOT_MARKER);
35
31
  while (i !== -1) {
36
32
  slots.push({
37
33
  fn: spread,
38
- path: p,
34
+ path,
39
35
  slot
40
36
  });
41
37
  buffer += parsed[slot++];
@@ -52,15 +48,10 @@ function build(literals) {
52
48
  parent.elements++;
53
49
  }
54
50
  else if (type === NODE_SLOT) {
55
- let relative = methods(parent.children, [], firstChild, nextSibling);
56
51
  buffer += parsed[slot] + SLOT_HTML;
57
52
  slots.push({
58
53
  fn: s,
59
- path: {
60
- absolute: [...parent.path, ...relative],
61
- parent: parent.path,
62
- relative
63
- },
54
+ path: methods(parent.children, parent.path, firstChild, nextSibling),
64
55
  slot: slot++
65
56
  });
66
57
  }
package/build/types.d.ts CHANGED
@@ -38,11 +38,7 @@ type Template = {
38
38
  literals: TemplateStringsArray;
39
39
  slots: {
40
40
  fn: typeof attributes.spread | typeof slot;
41
- path: {
42
- absolute: typeof firstChild[];
43
- parent: typeof firstChild[];
44
- relative: typeof firstChild[];
45
- };
41
+ path: typeof firstChild[];
46
42
  slot: number;
47
43
  }[] | null;
48
44
  };
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "private": false,
15
15
  "type": "module",
16
16
  "types": "./build/index.d.ts",
17
- "version": "0.19.0",
17
+ "version": "0.19.1",
18
18
  "scripts": {
19
19
  "build": "tsc && tsc-alias",
20
20
  "-": "-"
package/src/attributes.ts CHANGED
@@ -8,6 +8,9 @@ import q from '@esportsplus/queue';
8
8
  import event from './event';
9
9
 
10
10
 
11
+ // TODO: Refactor
12
+
13
+
11
14
  const EFFECT = Symbol();
12
15
 
13
16
  const STORE = Symbol();
package/src/html/index.ts CHANGED
@@ -5,42 +5,52 @@ import { cloneNode } from '~/utilities/node';
5
5
  import parser from './parser';
6
6
 
7
7
 
8
- const html = (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]): DocumentFragment => {
9
- let { fragment, slots } = parser.parse(literals);
10
-
11
- fragment = cloneNode.call(fragment, true) as DocumentFragment;
8
+ const html = (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]) => {
9
+ let { fragment, slots } = parser.parse(literals),
10
+ clone = cloneNode.call(fragment, true);
12
11
 
13
12
  if (slots !== null) {
14
- let node, nodePath, parent, parentPath;
13
+ let node, nodePath; // , parent, parentPath;
15
14
 
16
- for (let i = 0, n = slots.length; i < n; i++) {
17
- let { fn, path, slot } = slots[i],
18
- pp = path.parent,
19
- pr = path.relative;
15
+ // TODO: when a new slot is added it breaks pathfinding for the next slot
16
+ // for (let i = 0, n = slots.length; i < n; i++) {
17
+ for (let i = slots.length - 1; i >= 0; i--) {
18
+ let { fn, path, slot } = slots[i];
20
19
 
21
- if (pp !== parentPath) {
22
- if (pp === nodePath) {
23
- parent = node;
24
- parentPath = nodePath;
20
+ // pp = path.parent,
21
+ // pr = path.relative;
25
22
 
26
- nodePath = undefined;
27
- }
28
- else {
29
- parent = fragment;
30
- parentPath = pp;
23
+ // if (pp !== parentPath) {
24
+ // if (pp === nodePath) {
25
+ // parent = node;
26
+ // parentPath = nodePath;
31
27
 
32
- for (let i = 0, n = pp.length; i < n; i++) {
33
- parent = pp[i].call(parent);
34
- }
35
- }
36
- }
28
+ // nodePath = undefined;
29
+ // }
30
+ // else {
31
+ // parent = clone;
32
+ // parentPath = pp;
33
+
34
+ // for (let i = 0, n = pp.length; i < n; i++) {
35
+ // parent = pp[i].call(parent);
36
+ // }
37
+ // }
38
+ // }
39
+
40
+ // if (pr !== nodePath) {
41
+ // node = parent;
42
+ // nodePath = path.absolute;
43
+
44
+ // for (let i = 0, n = pr.length; i < n; i++) {
45
+ // node = pr[i].call(node);
46
+ // }
47
+ // }
37
48
 
38
- if (pr !== nodePath) {
39
- node = parent;
40
- nodePath = path.absolute;
49
+ if (nodePath !== path) {
50
+ node = clone;
41
51
 
42
- for (let i = 0, n = pr.length; i < n; i++) {
43
- node = pr[i].call(node);
52
+ for (let i = 0, n = path.length; i < n; i++) {
53
+ node = path[i].call(node);
44
54
  }
45
55
  }
46
56
 
@@ -49,7 +59,7 @@ const html = (literals: TemplateStringsArray, ...values: (RenderableValue | Rend
49
59
  }
50
60
  }
51
61
 
52
- return fragment;
62
+ return clone;
53
63
  };
54
64
 
55
65
  html.reactive = <T>(array: ReactiveArray<T[]>, template: RenderableReactive['template']): RenderableReactive => {
package/src/html/parser.ts CHANGED
@@ -29,7 +29,7 @@ function build(literals: TemplateStringsArray) {
29
29
  levels = [{
30
30
  children: 0,
31
31
  elements: 0,
32
- path: [] as NonNullable<Template['slots']>[number]['path']['parent']
32
+ path: [] as NonNullable<Template['slots']>[number]['path']
33
33
  }],
34
34
  parsed = html.split(SLOT_MARKER),
35
35
  slot = 0,
@@ -51,17 +51,18 @@ function build(literals: TemplateStringsArray) {
51
51
  : methods(parent.children, [], firstChild, nextSibling);
52
52
 
53
53
  if (attr) {
54
- let i = attr.indexOf(SLOT_MARKER),
55
- p = {
56
- absolute: path,
57
- parent: parent.path,
58
- relative: path.slice(parent.path.length)
59
- };
54
+ let i = attr.indexOf(SLOT_MARKER);
55
+ // @see ./index.ts comments
56
+ // p = {
57
+ // absolute: path,
58
+ // parent: parent.path,
59
+ // relative: path.slice(parent.path.length)
60
+ // };
60
61
 
61
62
  while (i !== -1) {
62
63
  slots.push({
63
64
  fn: spread,
64
- path: p,
65
+ path,
65
66
  slot
66
67
  });
67
68
 
@@ -81,16 +82,18 @@ function build(literals: TemplateStringsArray) {
81
82
  parent.elements++;
82
83
  }
83
84
  else if (type === NODE_SLOT) {
84
- let relative = methods(parent.children, [], firstChild, nextSibling);
85
+ // @see ./index.ts comments
86
+ // let relative = methods(parent.children, [], firstChild, nextSibling);
85
87
 
86
88
  buffer += parsed[slot] + SLOT_HTML;
87
89
  slots.push({
88
90
  fn: s,
89
- path: {
90
- absolute: [...parent.path, ...relative],
91
- parent: parent.path,
92
- relative
93
- },
91
+ path: methods(parent.children, parent.path, firstChild, nextSibling),
92
+ // path: {
93
+ // absolute: [...parent.path, ...relative],
94
+ // parent: parent.path,
95
+ // relative
96
+ // },
94
97
  slot: slot++
95
98
  });
96
99
  }
package/src/types.ts CHANGED
@@ -57,11 +57,13 @@ type Template = {
57
57
  literals: TemplateStringsArray;
58
58
  slots: {
59
59
  fn: typeof attributes.spread | typeof slot;
60
- path: {
61
- absolute: typeof firstChild[],
62
- parent: typeof firstChild[],
63
- relative: typeof firstChild[]
64
- };
60
+ // @see ./html/index.ts comments
61
+ path: typeof firstChild[];
62
+ // path: {
63
+ // absolute: typeof firstChild[],
64
+ // parent: typeof firstChild[],
65
+ // relative: typeof firstChild[]
66
+ // };
65
67
  slot: number;
66
68
  }[] | null;
67
69
  };