Skip to content

Commit b6dad17

Browse files
jdeniaujdeniau
committed
[devtool] Make demo work
1 parent 7d1a0d5 commit b6dad17

File tree

9 files changed

+160
-110
lines changed

9 files changed

+160
-110
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ See [#16](https://github.com/andrewdavey/immutable-devtools/issues/16) for more
115115
1. Clone the project
116116
1. run `yarn install`
117117
1. run `yarn run build` on each file you change
118-
1. open the `index.html` located in the `packages/devtools` directory and open the console.
118+
1. open the `index.html` located in the `packages/devtools/demo` directory and open the console.
119119

120120
### Browser extension
121121

‎packages/devtools/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
node_modules
22
dist
3+
demo/demo-bundle.js
4+
demo/index.html
35

46
.DS_Store
57

‎packages/devtools/demo/demo.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import * as Immutable from 'immutable';
2+
import installDevTools from '../dist/index.js';
3+
4+
var MyRecord = Immutable.Record(
5+
{
6+
value: 'original',
7+
value2: 'original2',
8+
a: 'A',
9+
b: Immutable.List([1, 2, , null, 5]),
10+
c: Immutable.Map({ key1: { item1: null } }).set({ obj: 'ref' }, 'value'),
11+
set: Immutable.Set(['Beer', 'Water']),
12+
stack: Immutable.Stack(['item0', 'item1']),
13+
},
14+
'MyRecord'
15+
);
16+
console.log("It's hard without Immutable DevTools:", MyRecord());
17+
18+
// Do not forget to install devtools!
19+
installDevTools(Immutable);
20+
console.log('Happy Immutable coding with installDevTools!');
21+
22+
console.log(
23+
'Record',
24+
MyRecord(),
25+
'altered keys are bold in detail and previewed',
26+
MyRecord({ value: 'altered', b: 'record', c: 'preview' })
27+
);
28+
29+
var deep = Immutable.fromJS({
30+
Hello: { very: { deep: ['immutable', 'world'] } },
31+
});
32+
console.log('Deep:', deep);
33+
34+
var orderedMap = Immutable.OrderedMap({
35+
This: 'should',
36+
persist: 'order',
37+
});
38+
var orderedMap2 = orderedMap
39+
.set('of', 'nonsense')
40+
.set('by', 'first')
41+
.set('assignment', 'time')
42+
.set('of', 'keys')
43+
.set('This', 'must');
44+
45+
console.log('OrderedMap', orderedMap, orderedMap2);
46+
47+
var mapWithObjectKey = orderedMap
48+
.set(deep, 'This value has immutable key')
49+
.set(
50+
{ 'plain object keys': 'are possible' },
51+
{ 'object to object': 'mapping is possible' }
52+
)
53+
.set(
54+
{ 'plain object keys': 'are possible' },
55+
{ structure: 'mapping is complicated without Immutable' }
56+
);
57+
console.log('Map with object keys:', mapWithObjectKey.toMap());
58+
59+
console.log("Set.of('Alice', 'Bob')", Immutable.Set.of('Alice', 'Bob'));
60+
console.log(
61+
"OrderedSet.of('Alice', 'Bob')",
62+
Immutable.OrderedSet.of('Alice', 'Bob')
63+
);
64+
65+
var stack = Immutable.Stack()
66+
.push('Stack item 1')
67+
.push(MyRecord())
68+
.push(orderedMap)
69+
.push('Last Item');
70+
console.log('Stack', stack);
71+
72+
var nestedRecords = MyRecord({
73+
value: MyRecord({
74+
value: MyRecord(),
75+
}),
76+
a: MyRecord(),
77+
});
78+
console.log('Nested Records', nestedRecords);
79+
80+
console.log(
81+
'Null string',
82+
Immutable.List.of('hello', 'null', null, 'undefined', undefined)
83+
);
84+
85+
console.log('Range', Immutable.Range(0, 10, 2));

‎packages/devtools/demo/index.base.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<html>
2+
<head>
3+
<title>Immutable DevTools Demo</title>
4+
<script src="./demo-bundle.js"></script>
5+
</head>
6+
<body>
7+
<h1>
8+
<a href="https://github.com/andrewdavey/immutable-devtools#readme"
9+
>Immutable DevTools Demo</a
10+
>
11+
</h1>
12+
13+
<p>
14+
See
15+
<a href="https://github.com/andrewdavey/immutable-devtools#readme"
16+
>README</a
17+
>
18+
on project page
19+
</p>
20+
21+
<p>Open Console (F12) to see result of this code:</p>
22+
<pre id="demoSource">{{demoSource}}</pre>
23+
</body>
24+
</html>

‎packages/devtools/index.html

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎packages/devtools/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"@babel/core": "^7.27.1",
2424
"@babel/preset-env": "^7.27.2",
2525
"@rollup/plugin-babel": "^6.0.4",
26-
"immutable": "^4.0.0-rc.9",
26+
"immutable": "^5.1.2",
2727
"immutable3": "^3.8.1",
2828
"rollup": "^4.40.2"
2929
},

‎packages/devtools/rollup.config.js

Lines changed: 43 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,48 @@
1+
import fs from 'node:fs';
12
import { babel } from '@rollup/plugin-babel';
3+
import nodeResolve from '@rollup/plugin-node-resolve';
24

3-
const config = {
4-
input: 'src/index.js',
5-
output: {
6-
dir: 'dist',
7-
format: 'es',
5+
// read content of "demo/demo.js"
6+
const demoSourceRaw = fs.readFileSync('demo/demo.js', 'utf-8');
7+
8+
// Custom plugin to inject demoSourceRaw into index.base.html
9+
function injectDemoSource() {
10+
return {
11+
name: 'inject-demo-source',
12+
generateBundle() {
13+
const htmlPath = 'demo/index.base.html';
14+
const outPath = 'demo/index.html';
15+
let html = fs.readFileSync(htmlPath, 'utf-8');
16+
html = html.replace(
17+
'{{demoSource}}',
18+
demoSourceRaw.replace(
19+
/[&<>]/g,
20+
(c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c])
21+
)
22+
);
23+
fs.writeFileSync(outPath, html);
24+
},
25+
};
26+
}
27+
28+
const config = [
29+
{
30+
input: 'src/index.js',
31+
output: {
32+
dir: 'dist',
33+
format: 'es',
34+
},
35+
plugins: [babel({ babelHelpers: 'bundled' })],
36+
},
37+
{
38+
input: 'demo/demo.js',
39+
output: {
40+
file: 'demo/demo-bundle.js',
41+
format: 'es',
42+
name: 'ImmutableDevToolsDemo',
43+
},
44+
plugins: [nodeResolve(), injectDemoSource()],
845
},
9-
plugins: [babel({ babelHelpers: 'bundled' })],
10-
};
46+
];
1147

1248
export default config;

‎packages/devtools/test.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,7 @@ function runTests(Immutable) {
5858

5959
var stack = Immutable.Stack(['hello', 'aaa']);
6060
console.log(stack);
61+
62+
var range = Immutable.Range(0, 10, 2);
63+
console.log(range);
6164
}

‎yarn.lock

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1149,7 +1149,7 @@ __metadata:
11491149
"@babel/core": "npm:^7.27.1"
11501150
"@babel/preset-env": "npm:^7.27.2"
11511151
"@rollup/plugin-babel": "npm:^6.0.4"
1152-
immutable: "npm:^4.0.0-rc.9"
1152+
immutable: "npm:^5.1.2"
11531153
immutable3: "npm:^3.8.1"
11541154
rollup: "npm:^4.40.2"
11551155
languageName: unknown
@@ -1864,13 +1864,6 @@ __metadata:
18641864
languageName: node
18651865
linkType: hard
18661866

1867-
"immutable@npm:^4.0.0-rc.9":
1868-
version: 4.3.7
1869-
resolution: "immutable@npm:4.3.7"
1870-
checksum: 10c0/9b099197081b22f6433003e34929da8ecddbbdc1474cdc8aa3b7669dee4adda349c06143de22def36016d1b6de5322b043eccd7a11db1dad2ca85dad4fff5435
1871-
languageName: node
1872-
linkType: hard
1873-
18741867
"immutable@npm:^5.1.2":
18751868
version: 5.1.2
18761869
resolution: "immutable@npm:5.1.2"

0 commit comments

Comments
 (0)