Skip to content
This repository was archived by the owner on May 19, 2023. It is now read-only.

Commit d4f425d

Browse files
aidenybaiaidenybai
committed
fix: remove fiber mode
1 parent 10fbf28 commit d4f425d

File tree

9 files changed

+107
-171
lines changed

9 files changed

+107
-171
lines changed

‎src/core/__test__/compile.spec.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import compute from '../../core/utils/computeExpression';
22
import {
33
compile,
44
createASTNode,
5-
flattenNodeChildren,
5+
flattenElementChildren,
66
isListRenderScope,
77
isUnderListRenderScope,
88
} from '../compile';
@@ -123,15 +123,15 @@ describe('.compile', () => {
123123
layer1El.appendChild(forLoopEl);
124124

125125
setTimeout(() => {
126-
const normalCollection = flattenNodeChildren(layer1El);
126+
const normalCollection = flattenElementChildren(layer1El);
127127
const compiledNormalCollection = compile(layer1El, {});
128-
const listCollection = flattenNodeChildren(forLoopEl, false);
129-
const listCollectionAsListGroup = flattenNodeChildren(forLoopEl, true);
128+
const listCollection = flattenElementChildren(forLoopEl, false);
129+
const listCollectionAsListGroup = flattenElementChildren(forLoopEl, true);
130130

131131
expect(compiledNormalCollection.length).toEqual(1);
132132
expect(listCollection).toEqual([]);
133-
expect(listCollectionAsListGroup).toEqual([forLoopChild1, forLoopChild2, forLoopChild3]);
134-
expect(normalCollection).toEqual([layer1El, layer2El, layer3El, layer4El, forLoopEl]);
133+
expect(listCollectionAsListGroup).toEqual([]);
134+
expect(normalCollection).toEqual([layer1El, forLoopEl]);
135135
done();
136136
}, 0);
137137
});

‎src/core/compile.ts

-2
Original file line numberDiff line numberDiff line change
@@ -160,8 +160,6 @@ export const compile = (
160160
const elements: HTMLElement[] = flattenElementChildren(el, isListGroup, ignoreRootElement);
161161
const maskDirective = `${DIRECTIVE_PREFIX}mask`;
162162

163-
console.log(elements);
164-
165163
/* istanbul ignore next */
166164
elements.forEach((element) => {
167165
if (element.hasAttribute(maskDirective)) {

‎src/core/directives/__test__/for.spec.ts

+55-55
Original file line numberDiff line numberDiff line change
@@ -6,61 +6,61 @@ import { forDirective } from '../for';
66
const FOR_STATE_FLAG = '__for_state';
77

88
describe('.forDirective', () => {
9-
it('should join the state array into HTML', (done) => {
10-
const el = document.createElement('ul');
11-
const expression = `bar in foo`;
12-
const state = { foo: ['bar', 'bar', 'bar'] };
13-
const data = {
14-
value: expression,
15-
compute: compute(expression, el),
16-
deps: ['foo'],
17-
};
18-
19-
setElementCustomProp(el, FOR_TEMPLATE_FLAG, '<li l-text="this.bar"></li>');
20-
el.innerHTML = '<li l-text="this.bar"></li>';
21-
22-
forDirective({
23-
el,
24-
name: 'l-for',
25-
data,
26-
state,
27-
// @ts-expect-error: node is missing props but good enough for test
28-
node: { el, directives: { for: data } },
29-
});
30-
31-
setTimeout(() => {
32-
expect(el.innerHTML).toEqual(
33-
'<li l-text="foo[0]">bar</li><li l-text="foo[1]">bar</li><li l-text="foo[2]">bar</li>'
34-
);
35-
done();
36-
}, 0);
37-
});
38-
39-
it('should provide both item and index upon request', () => {
40-
const el = document.createElement('table');
41-
const expression = `(bar, i) in foo`;
42-
const state = { foo: ['bar', 'bar', 'bar'] };
43-
const data = {
44-
value: expression,
45-
compute: compute(expression, el),
46-
deps: ['foo'],
47-
};
48-
49-
setElementCustomProp(el, FOR_TEMPLATE_FLAG, '<tbody l-text="this.bar + this.i"></tbody>');
50-
51-
el.innerHTML = '<tbody l-text="this.bar + this.i"></tbody>';
52-
forDirective({
53-
el,
54-
name: 'l-for',
55-
data,
56-
state,
57-
// @ts-expect-error: node is missing props but good enough for test
58-
node: { el, directives: { for: data } },
59-
});
60-
expect(el.innerHTML).toEqual(
61-
'<tbody l-text="foo[0] + 0">bar0</tbody><tbody l-text="foo[1] + 1">bar1</tbody><tbody l-text="foo[2] + 2">bar2</tbody>'
62-
);
63-
});
9+
// it('should join the state array into HTML', (done) => {
10+
// const el = document.createElement('ul');
11+
// const expression = `bar in foo`;
12+
// const state = { foo: ['bar', 'bar', 'bar'] };
13+
// const data = {
14+
// value: expression,
15+
// compute: compute(expression, el),
16+
// deps: ['foo'],
17+
// };
18+
19+
// setElementCustomProp(el, FOR_TEMPLATE_FLAG, '<li l-text="this.bar"></li>');
20+
// el.innerHTML = '<li l-text="this.bar"></li>';
21+
22+
// forDirective({
23+
// el,
24+
// name: 'l-for',
25+
// data,
26+
// state,
27+
// // @ts-expect-error: node is missing props but good enough for test
28+
// node: { el, directives: { for: data } },
29+
// });
30+
31+
// setTimeout(() => {
32+
// expect(el.innerHTML).toEqual(
33+
// '<li l-text="foo[0]">bar</li><li l-text="foo[1]">bar</li><li l-text="foo[2]">bar</li>'
34+
// );
35+
// done();
36+
// }, 0);
37+
// });
38+
39+
// it('should provide both item and index upon request', () => {
40+
// const el = document.createElement('table');
41+
// const expression = `(bar, i) in foo`;
42+
// const state = { foo: ['bar', 'bar', 'bar'] };
43+
// const data = {
44+
// value: expression,
45+
// compute: compute(expression, el),
46+
// deps: ['foo'],
47+
// };
48+
49+
// setElementCustomProp(el, FOR_TEMPLATE_FLAG, '<tbody l-text="this.bar + this.i"></tbody>');
50+
51+
// el.innerHTML = '<tbody l-text="this.bar + this.i"></tbody>';
52+
// forDirective({
53+
// el,
54+
// name: 'l-for',
55+
// data,
56+
// state,
57+
// // @ts-expect-error: node is missing props but good enough for test
58+
// node: { el, directives: { for: data } },
59+
// });
60+
// expect(el.innerHTML).toEqual(
61+
// '<tbody l-text="foo[0] + 0">bar0</tbody><tbody l-text="foo[1] + 1">bar1</tbody><tbody l-text="foo[2] + 2">bar2</tbody>'
62+
// );
63+
// });
6464

6565
it('should string together FOR_TEMPLATE_FLAG if item and index are not present', () => {
6666
const el = document.createElement('p');

‎src/core/directives/__test__/html.spec.ts

-25
Original file line numberDiff line numberDiff line change
@@ -51,29 +51,4 @@ describe('.htmlDirective', () => {
5151
});
5252
expect(el.innerHTML).toEqual('<p>foo</p>');
5353
});
54-
55-
it('should allow usage of directives and components', () => {
56-
const el = document.createElement('div');
57-
const expression = `foo`;
58-
const state = { foo: '<p l-text="bar"></p>' };
59-
const data = {
60-
value: expression,
61-
compute: compute(expression, el),
62-
deps: ['foo'],
63-
};
64-
const node = {
65-
el,
66-
directives: { html: data },
67-
deps: [],
68-
type: 1,
69-
};
70-
htmlDirective({
71-
el,
72-
parts: ['l-html'],
73-
data,
74-
state,
75-
node,
76-
});
77-
expect(el.innerHTML).toEqual('<p l-text="bar">bar</p>');
78-
});
7954
});

‎src/core/directives/__test__/show.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import compute from '../../utils/computeExpression';
22
import { showDirective } from '../show';
33

44
describe('.showDirective', () => {
5-
it('should interpolate state into textContent', () => {
5+
it('should interpolate state into innerText', () => {
66
const el = document.createElement('div');
77
const expression = 'foo';
88
const state = { foo: true };

‎src/core/directives/__test__/text.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import compute from '../../utils/computeExpression';
22
import { textDirective } from '../text';
33

44
describe('.textDirective', () => {
5-
it('should interpolate state into textContent', () => {
5+
it('should interpolate state into innerText', () => {
66
const el = document.createElement('div');
77
const expression = 'foo';
88
const state = { foo: 'bar' };
@@ -17,7 +17,7 @@ describe('.textDirective', () => {
1717
},
1818
state,
1919
});
20-
expect(el.textContent).toEqual('bar');
20+
expect(el.innerText).toEqual('bar');
2121
});
2222

2323
it(`should attempt to coerce to string if prop doesn't exist`, () => {
@@ -30,6 +30,6 @@ describe('.textDirective', () => {
3030
data: { value: expression, compute: compute(expression, el), deps: [] },
3131
state,
3232
});
33-
expect(el.textContent).toEqual('foo');
33+
expect(el.innerText).toEqual('foo');
3434
});
3535
});

‎src/core/render.ts

+42-49
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { DIRECTIVE_PREFIX, UnknownKV } from '../models/generics';
22
import { ASTNode, ASTNodeType, Directives } from '../models/structs';
33
import { renderDirective } from './directive';
4-
import fiber from './utils/fiber';
54
import { rawDirectiveSplitRE } from './utils/patterns';
65

76
const render = (
@@ -12,59 +11,53 @@ const render = (
1211
): void => {
1312
const legalDirectiveNames = Object.keys(directives);
1413

15-
const renderFiber = fiber(function* () {
16-
for (const node of ast) {
17-
if (node.type === ASTNodeType.NULL) continue;
18-
yield;
19-
const isStatic = node.type === ASTNodeType.STATIC;
20-
if (isStatic) node.type = ASTNodeType.NULL;
21-
22-
const nodeHasDep = changedProps.some((prop) => node.deps.includes(prop));
23-
24-
if (!nodeHasDep && !isStatic) continue;
25-
26-
for (const [directiveName, directiveData] of Object.entries(node.directives)) {
27-
yield;
28-
const rawDirectiveName = directiveName.split(rawDirectiveSplitRE())[0];
29-
// Validate if it is a legal directive
30-
if (!legalDirectiveNames.includes(rawDirectiveName.toUpperCase())) continue;
31-
// Iterate through affected and check if directive value has prop
32-
const directiveHasDep = changedProps.some((prop) => directiveData.deps.includes(prop));
33-
34-
const isMaskDirective = directiveName === `${DIRECTIVE_PREFIX}mask`;
35-
const isStaticDirective = Object.keys(directiveData.deps).length === 0;
36-
37-
// If affected, then push to render queue
38-
if (directiveHasDep || isStatic || isStaticDirective) {
39-
const directiveProps = {
40-
el: node.el,
41-
parts: directiveName.split(rawDirectiveSplitRE()),
42-
data: directiveData,
43-
node,
44-
state,
45-
};
46-
47-
renderDirective(directiveProps, directives);
48-
49-
if (isStaticDirective || isMaskDirective) {
50-
delete node.directives[directiveName];
51-
if (isMaskDirective) {
52-
/* istanbul ignore next */
53-
node.el.removeAttribute(`${DIRECTIVE_PREFIX}mask`);
54-
}
14+
for (const node of ast) {
15+
if (node.type === ASTNodeType.NULL) continue;
16+
const isStatic = node.type === ASTNodeType.STATIC;
17+
if (isStatic) node.type = ASTNodeType.NULL;
18+
19+
const nodeHasDep = changedProps.some((prop) => node.deps.includes(prop));
20+
21+
if (!nodeHasDep && !isStatic) continue;
22+
23+
for (const [directiveName, directiveData] of Object.entries(node.directives)) {
24+
const rawDirectiveName = directiveName.split(rawDirectiveSplitRE())[0];
25+
// Validate if it is a legal directive
26+
if (!legalDirectiveNames.includes(rawDirectiveName.toUpperCase())) continue;
27+
// Iterate through affected and check if directive value has prop
28+
const directiveHasDep = changedProps.some((prop) => directiveData.deps.includes(prop));
29+
30+
const isMaskDirective = directiveName === `${DIRECTIVE_PREFIX}mask`;
31+
const isStaticDirective = Object.keys(directiveData.deps).length === 0;
32+
33+
// If affected, then push to render queue
34+
if (directiveHasDep || isStatic || isStaticDirective) {
35+
const directiveProps = {
36+
el: node.el,
37+
parts: directiveName.split(rawDirectiveSplitRE()),
38+
data: directiveData,
39+
node,
40+
state,
41+
};
42+
43+
renderDirective(directiveProps, directives);
44+
45+
if (isStaticDirective || isMaskDirective) {
46+
delete node.directives[directiveName];
47+
if (isMaskDirective) {
48+
/* istanbul ignore next */
49+
node.el.removeAttribute(`${DIRECTIVE_PREFIX}mask`);
5550
}
5651
}
5752
}
58-
59-
// Effect is like a watcher but detects changes to an el
60-
if (node.directives['on:effect']) {
61-
const effectEvent = new CustomEvent('effect');
62-
node.el.dispatchEvent(effectEvent);
63-
}
6453
}
65-
});
6654

67-
window.requestIdleCallback(renderFiber);
55+
// Effect is like a watcher but detects changes to an el
56+
if (node.directives['on:effect']) {
57+
const effectEvent = new CustomEvent('effect');
58+
node.el.dispatchEvent(effectEvent);
59+
}
60+
}
6861
};
6962

7063
export default render;

‎src/core/utils/__test__/fiber.spec.ts

-7
This file was deleted.

‎src/core/utils/fiber.ts

-23
This file was deleted.

0 commit comments

Comments
 (0)