Skip to content

Commit b6a3d48

Browse files
dmjiodmjio
authored
Add Typescript miso/types.ts module (#849)
- Move test module to TypeScript - Add clean, watch-test - Remove 'any', use VTree and builtin tsc DOM types
1 parent 02db0bb commit b6a3d48

File tree

7 files changed

+297
-227
lines changed

7 files changed

+297
-227
lines changed

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@
33
"version": "1.9.0",
44
"description": "miso: A tasty Haskell front-end web framework",
55
"scripts": {
6-
"clean": "rm -v js/miso.js",
6+
"clean": "rm -v js/miso.js || rm -v ts/*.js || rm -v ts/miso/*.js",
77
"lint": "eslint --fix ts/*.ts",
8-
"test": "bun test js/miso.spec.js && bun run lcov",
8+
"test": "bun test ts/miso.spec.ts && bun run lcov",
99
"lcov": "lcov-viewer lcov -o ./coverage ./coverage/lcov.info",
1010
"watch": "tsc ts/miso.ts --watch",
11+
"watch-test": "tsc ts/miso.spec.ts --watch",
1112
"pretty": "prettier --write ts/miso/*.ts ts/*.ts",
1213
"build": "bun build --outfile=js/miso.js ./ts/index.ts --target=browser",
1314
"prod": "bun run build --production"

‎js/miso.spec.js renamed to ‎ts/miso.spec.ts

Lines changed: 41 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
/* imports */
2-
import {
3-
setBodyComponent,
4-
integrityCheck,
5-
version,
6-
diff,
7-
hydrate,
8-
delegate,
9-
undelegate,
10-
callFocus,
11-
callBlur,
12-
eventJSON,
13-
} from '../ts/miso';
2+
import { diff } from './miso/dom';
3+
import { delegate, undelegate, eventJSON } from './miso/event';
4+
import { hydrate, integrityCheck } from './miso/iso';
5+
import { version, callFocus, callBlur, setBodyComponent } from './miso/util';
6+
import { VTree } from './miso/types';
147

158
import {
169
test,
@@ -34,7 +27,7 @@ afterEach(() => {
3427
});
3528

3629
/* smart constructors */
37-
function vcomp(mount, unmount, props, css, children, ref, oc, od, bd, key) {
30+
function vcomp(mount, unmount, props, css, children, ref, oc, od, bd, key) : VTree {
3831
return {
3932
type: 'vcomp',
4033
tag: 'div',
@@ -53,7 +46,7 @@ function vcomp(mount, unmount, props, css, children, ref, oc, od, bd, key) {
5346
};
5447
}
5548

56-
function vnode(tag, children, props, css, ns, ref, oc, od, bd, key) {
49+
function vnode(tag, children, props, css, ns, ref, oc, od, bd, key) : VTree {
5750
return {
5851
type: 'vnode',
5952
tag: tag,
@@ -69,7 +62,7 @@ function vnode(tag, children, props, css, ns, ref, oc, od, bd, key) {
6962
};
7063
}
7164

72-
function vnodeKeyed(tag, key) {
65+
function vnodeKeyed(tag, key) : VTree {
7366
return {
7467
type: 'vnode',
7568
tag: tag,
@@ -85,7 +78,7 @@ function vnodeKeyed(tag, key) {
8578
};
8679
}
8780

88-
function vnodeKids(tag, kids) {
81+
function vnodeKids(tag, kids) : VTree {
8982
return {
9083
type: 'vnode',
9184
tag: tag,
@@ -100,14 +93,14 @@ function vnodeKids(tag, kids) {
10093
};
10194
}
10295

103-
function vtext(txt) {
96+
function vtext(txt) : VTree {
10497
return {
10598
type: 'vtext',
10699
text: txt,
107100
};
108101
}
109102

110-
function vtextKeyed(txt, key) {
103+
function vtextKeyed(txt, key) : VTree {
111104
return {
112105
type: 'vtext',
113106
text: txt,
@@ -1630,19 +1623,14 @@ describe('js tests', () => {
16301623
// expect(succeeded).toEqual(false);
16311624
// });
16321625

1633-
// // dmj: jsdom catches this, not possible to run
1634-
// // ● Should fail to mount on a text node
1635-
// // HierarchyRequestError: Node can't be inserted in a #text parent.
1636-
// //
1637-
// // test('Should fail to mount on a text node', () => {
1638-
// //
1639-
// // var body = document.body;
1640-
// // var misoTxt = document.createTextNode("foo");
1641-
// // body.appendChild(misoTxt);
1642-
// // var currentNode = vnodeKids('div', [ vnodeKids('div', [ vtext("foo") ]) ]);
1643-
// // var succeeded = hydrate(true, misoTxt, currentNode);
1644-
// // expect(succeeded).toEqual(false);
1645-
// // });
1626+
test('Should fail to mount on a text node', () => {
1627+
var body = document.body;
1628+
var misoTxt = document.createTextNode("foo");
1629+
body.appendChild(misoTxt);
1630+
var currentNode = vnodeKids('div', [ vnodeKids('div', [ vtext("foo") ]) ]);
1631+
var succeeded = hydrate(true, misoTxt, currentNode);
1632+
expect(succeeded).toEqual(false);
1633+
});
16461634

16471635
test('Should not hydrate on an empty page', () => {
16481636
var currentNode = vnodeKids('div', [vnodeKids('div', [vtext('foo')])]);
@@ -1669,7 +1657,7 @@ describe('js tests', () => {
16691657
var result = hydrate(false, body, vtree);
16701658
expect(result).toEqual(true);
16711659
var check = integrityCheck(true, vtree);
1672-
expect(check).toBe(1);
1660+
expect(check).toBe(true);
16731661
});
16741662

16751663
test('Should fail integrity check on bad tag', () => {
@@ -1691,10 +1679,10 @@ describe('js tests', () => {
16911679
var result = hydrate(false, body, vtree);
16921680
expect(result).toEqual(true);
16931681
var check = integrityCheck(true, vtree);
1694-
expect(check).toBe(1);
1682+
expect(check).toBe(true);
16951683
vtree.tag = 'lol';
16961684
check = integrityCheck(true, vtree);
1697-
expect(check).toBe(0);
1685+
expect(check).toBe(false);
16981686
});
16991687

17001688
test('Should fail integrity check on bad tag in hydrate w/ logging enabled', () => {
@@ -1736,10 +1724,10 @@ describe('js tests', () => {
17361724
var result = hydrate(false, body, vtree);
17371725
expect(result).toEqual(true);
17381726
var check = integrityCheck(true, vtree);
1739-
expect(check).toBe(1);
1727+
expect(check).toBe(true);
17401728
vtree.children[0].text = 'oops';
17411729
check = integrityCheck(true, vtree);
1742-
expect(check).toBe(0);
1730+
expect(check).toBe(false);
17431731
});
17441732

17451733
test('Should fail integrity check on differing child lengths', () => {
@@ -1761,7 +1749,7 @@ describe('js tests', () => {
17611749
var result = hydrate(false, body, vtree);
17621750
expect(result).toEqual(true);
17631751
var check = integrityCheck(true, vtree);
1764-
expect(check).toBe(1);
1752+
expect(check).toBe(true);
17651753
vtree.children = [];
17661754
check = integrityCheck(true, vtree);
17671755
expect(check).toBe(false);
@@ -1787,10 +1775,10 @@ describe('js tests', () => {
17871775
var result = hydrate(false, body, vtree);
17881776
expect(result).toEqual(true);
17891777
var check = integrityCheck(true, vtree);
1790-
expect(check).toBe(1);
1778+
expect(check).toBe(true);
17911779
vtree.css['background-color'] = 'green';
17921780
check = integrityCheck(true, vtree);
1793-
expect(check).toBe(0);
1781+
expect(check).toBe(false);
17941782
});
17951783

17961784
test('Should fail integrity check on differing styles, for color', () => {
@@ -1814,10 +1802,10 @@ describe('js tests', () => {
18141802
var result = hydrate(false, body, vtree);
18151803
expect(result).toEqual(true);
18161804
var check = integrityCheck(true, vtree);
1817-
expect(check).toBe(1);
1805+
expect(check).toBe(true);
18181806
vtree.css['color'] = '#dddddd';
18191807
check = integrityCheck(true, vtree);
1820-
expect(check).toBe(0);
1808+
expect(check).toBe(false);
18211809
});
18221810

18231811
test('Should fail integrity check on differing props', () => {
@@ -1841,10 +1829,10 @@ describe('js tests', () => {
18411829
var result = hydrate(false, body, vtree);
18421830
expect(result).toEqual(true);
18431831
var check = integrityCheck(true, vtree);
1844-
expect(check).toBe(1);
1832+
expect(check).toBe(true);
18451833
vtree.props['class'] = 'something-else';
18461834
check = integrityCheck(true, vtree);
1847-
expect(check).toBe(0);
1835+
expect(check).toBe(false);
18481836
});
18491837

18501838
test('Should fail integrity check on differing height / width', () => {
@@ -1870,11 +1858,11 @@ describe('js tests', () => {
18701858
var result = hydrate(false, body, vtree);
18711859
expect(result).toEqual(true);
18721860
var check = integrityCheck(true, vtree);
1873-
expect(check).toBe(1);
1861+
expect(check).toBe(true);
18741862
vtree.props['height'] = '200';
18751863
vtree.props['width'] = '200';
18761864
check = integrityCheck(true, vtree);
1877-
expect(check).toBe(0);
1865+
expect(check).toBe(false);
18781866
});
18791867

18801868
test('Should fail integrity check on random property (title)', () => {
@@ -1897,10 +1885,10 @@ describe('js tests', () => {
18971885
var result = hydrate(false, body, vtree);
18981886
expect(result).toEqual(true);
18991887
var check = integrityCheck(true, vtree);
1900-
expect(check).toBe(1);
1888+
expect(check).toBe(true);
19011889
vtree.props['title'] = 'woz';
19021890
check = integrityCheck(true, vtree);
1903-
expect(check).toBe(0);
1891+
expect(check).toBe(false);
19041892
});
19051893

19061894
test('Should fail integrity check on href', () => {
@@ -1924,10 +1912,10 @@ describe('js tests', () => {
19241912
var result = hydrate(false, body, vtree);
19251913
expect(result).toEqual(true);
19261914
var check = integrityCheck(true, vtree);
1927-
expect(check).toBe(1);
1915+
expect(check).toBe(true);
19281916
vtree.props['href'] = 'notgoogle.com';
19291917
check = integrityCheck(true, vtree);
1930-
expect(check).toBe(0);
1918+
expect(check).toBe(false);
19311919
});
19321920

19331921
test('Should fail integrity check on vtext domRef', () => {
@@ -1951,10 +1939,10 @@ describe('js tests', () => {
19511939
var result = hydrate(false, body, vtree);
19521940
expect(result).toEqual(true);
19531941
var check = integrityCheck(true, vtree);
1954-
expect(check).toBe(1);
1942+
expect(check).toBe(true);
19551943
vtree.children[0].domRef = document.createElement('div');
19561944
check = integrityCheck(true, vtree);
1957-
expect(check).toBe(0);
1945+
expect(check).toBe(false);
19581946
});
19591947

19601948
test('Should fail integrity check on unknown property test', () => {
@@ -1976,7 +1964,7 @@ describe('js tests', () => {
19761964
var result = hydrate(false, body, vtree);
19771965
expect(result).toEqual(true);
19781966
var check = integrityCheck(true, vtree);
1979-
expect(check).toBe(0);
1967+
expect(check).toBe(false);
19801968
});
19811969

19821970
test('Should set body[data-component-id] via setBodyComponent()', () => {
@@ -2080,7 +2068,7 @@ describe('js tests', () => {
20802068
};
20812069
};
20822070

2083-
var vtree = mkVComp('one', [mkVComp('two', [mkVComp('three', [])])]);
2071+
var vtree : VTree = mkVComp('one', [mkVComp('two', [mkVComp('three', [])])]);
20842072
diff(null, vtree, document.body);
20852073
diff(vtree, null, document.body);
20862074
expect(unmounts).toEqual(['one', 'two', 'three']);

‎ts/miso.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import { diff } from './miso/dom';
22
import { delegate, undelegate, eventJSON } from './miso/event';
33
import { hydrate, integrityCheck } from './miso/iso';
44
import { version, callFocus, callBlur, setBodyComponent } from './miso/util';
5+
import { VTree, EventCapture, EventObject, Options } from './miso/types';
56

67
/* top level re-export */
78
export {
9+
/* Functions */
810
diff,
911
hydrate,
1012
version,
@@ -15,4 +17,9 @@ export {
1517
undelegate,
1618
integrityCheck,
1719
setBodyComponent,
20+
/* Types */
21+
VTree,
22+
EventCapture,
23+
EventObject,
24+
Options
1825
};

0 commit comments

Comments
 (0)