Range formatter

jdeniau · jdeniau · commit 8d547b91803f · 2025-05-19T23:32:23.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,34 @@
+# CHANGELOG
+
+## 2.1.0
+
+- Range formatter [#2](https://github.com/immutable-js/immutable-devtools/pull/2) by [@jdeniau](https://github.com/jdeniau)
+
+## 2.0.1
+
+Fix browser extension not working on Firefox.
+
+## 2.0.0
+
+No change in this version, but use the same version as the browser extension.
+
+## 1.1.0
+
+### Added
+
+- Compatibility with firefox [#2](https://github.com/jdeniau/immutable-object-formatter-extension/pull/2) by [@jdeniau](https://github.com/jdeniau)
+- Add tests for v5 version [#3](https://github.com/jdeniau/immutable-object-formatter-extension/pull/3) by [@jdeniau](https://github.com/jdeniau)
+
+### Changed
+
+- upgrade immutable-devtools to v0.3.0 [#1](https://github.com/jdeniau/immutable-object-formatter-extension/pull/1) by [@jdeniau](https://github.com/jdeniau)
+
+## v0.3.0
+
+- [BREAKING] Release this package as ESM instead of CommonJS. Drop support for NodeJS < 18.
+
+## v0.2.0
+
+- Release under `@jdeniau/immutable-devtools` name.
+- Add dark mode support https://github.com/jdeniau/immutable-devtools/commit/cee668d10a551d9bec6c3a960e36f8230a07ba16
+- Fix issue with the string `"null"` https://github.com/jdeniau/immutable-devtools/commit/e6262f02074ce64fb024314d66929eeec8d12b8b
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ The library currently has formatters for:
 - [x] `Set` & `OrderedSet`
 - [x] `Stack`
 - [x] `Record`
-- [ ] `Range` (let me know if you use this :-), add :+1: to [#21](https://github.com/andrewdavey/immutable-devtools/issues/21))
+- [x] `Range`
 - [ ] `Repeat` (if you wish this, add :+1: to [#22](https://github.com/andrewdavey/immutable-devtools/issues/22))
 - [ ] `Seq` — I do not have an idea how to display it. If you know, [write it down into #23](https://github.com/andrewdavey/immutable-devtools/issues/23)
 
diff --git a/packages/devtools/CHANGELOG.md b/packages/devtools/CHANGELOG.md
diff --git a/packages/devtools/index.html b/packages/devtools/index.html
@@ -1,10 +1,10 @@
 <html>
   <head>
     <title>Immutable DevTools Demo</title>
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.6/immutable.min.js"></script> -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/5.0.3/immutable.js"></script>
-    <script src="dist/index.js"></script>
-    <script id="demoScript">
+    <script id="demoScript" type="module">
+      import installDevTools from './dist/index.js';
+      
       var MyRecord = Immutable.Record({
         value: 'original',
         value2: 'original2',
@@ -71,6 +71,8 @@
       console.log('Nested Records', nestedRecords)
 
       console.log("Null string", Immutable.List.of("hello", "null", null, 'undefined', undefined));
+      
+      console.log("Range", Immutable.Range(0, 10, 2));
     </script>
   </head>
   <body>
diff --git a/packages/devtools/src/createFormatters.js b/packages/devtools/src/createFormatters.js
@@ -212,13 +212,36 @@ export default function createFormatter(Immutable) {
     }
   };
 
+  const RangeFormatter = {
+    header(o) {
+      if (!Immutable.isSeq(o))
+        return null;
+
+      // there is no proper way to check if the object is a Range for now
+      if (
+        typeof o._start === 'undefined' || 
+        typeof o._end === 'undefined' || 
+        typeof o._step === 'undefined' || 
+        typeof o.toString !== 'function' 
+      ) {
+        return null
+      }
+
+      const out = o.toString().replace(/^Range /, '');
+
+      return ['span', ['span', immutableNameStyle, 'Range'], ['span', out]];
+    },
+    hasBody: () => false,
+  };
+
   return {
     RecordFormatter,
     OrderedMapFormatter,
     OrderedSetFormatter,
     ListFormatter,
     MapFormatter,
     SetFormatter,
-    StackFormatter
+    StackFormatter,
+    RangeFormatter
   }
 }
diff --git a/packages/devtools/src/index.js b/packages/devtools/src/index.js
@@ -26,6 +26,7 @@ function install(Immutable) {
     MapFormatter,
     SetFormatter,
     StackFormatter,
+    RangeFormatter,
   } = createFormatters(Immutable);
 
   gw.devtoolsFormatters.push(
@@ -35,7 +36,8 @@ function install(Immutable) {
     ListFormatter,
     MapFormatter,
     SetFormatter,
-    StackFormatter
+    StackFormatter,
+    RangeFormatter
   );
 
   installed = true;
diff --git a/packages/extension/CHANGELOG.md b/packages/extension/CHANGELOG.md
diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@jdeniau/immutable-devtools": "^0.3.0",
+    "@jdeniau/immutable-devtools": "workspace:^",
     "immutable": "^5.1.2"
   },
   "devDependencies": {
diff --git a/packages/extension/test-page/test-v5.js b/packages/extension/test-page/test-v5.js
@@ -15,30 +15,33 @@ function runTests(){
     var f = Foo()
     console.log("Expand this and check child renders as a Map", f)
 
-    window.record = new ABRecord();
-    window.record2 = new ABRecord({a: 2});
-    console.log(window.record);
-    console.log(window.record2);
+    const record = new ABRecord();
+    const record2 = new ABRecord({a: 2});
+    console.log(record);
+    console.log(record2);
 
-    window.orderedMap = Immutable.OrderedMap({key: "value"});
-    window.orderedMap2 = Immutable.OrderedMap([["key", "value"], ["key2", "value2"]]);
-    console.log(window.orderedMap);
-    console.log(window.orderedMap2);
+    const orderedMap = Immutable.OrderedMap({key: "value"});
+    const orderedMap2 = Immutable.OrderedMap([["key", "value"], ["key2", "value2"]]);
+    console.log(orderedMap);
+    console.log(orderedMap2);
 
-    window.orderedSet = Immutable.OrderedSet(["hello", "aaa"]);
-    console.log(window.orderedSet);
+    const orderedSet = Immutable.OrderedSet(["hello", "aaa"]);
+    console.log(orderedSet);
 
-    window.list = Immutable.List(["hello", "world"]);
-    console.log(window.list)
+    const list = Immutable.List(["hello", "world"]);
+    console.log(list)
 
-    window.map = Immutable.Map({hello: "world"})
-    console.log(window.map)
+    const map = Immutable.Map({hello: "world"})
+    console.log(map)
 
-    window.set = Immutable.Set(["hello", "aaa"])
-    console.log(window.set)
+    const set = Immutable.Set(["hello", "aaa"])
+    console.log(set)
 
-    window.stack = Immutable.Stack(["hello", "aaa"])
-    console.log(window.stack)
+    const stack = Immutable.Stack(["hello", "aaa"])
+    console.log(stack)
+
+    const range = Immutable.Range(0, 10, 2);
+    console.log(range);
 
     console.log("shoudln't cause error", Immutable.Record.prototype)
 
diff --git a/yarn.lock b/yarn.lock
@@ -1097,7 +1097,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.27.1"
     "@babel/preset-env": "npm:^7.27.2"
-    "@jdeniau/immutable-devtools": "npm:^0.3.0"
+    "@jdeniau/immutable-devtools": "workspace:^"
     "@rollup/plugin-babel": "npm:^6.0.4"
     "@rollup/plugin-node-resolve": "npm:^16.0.1"
     immutable: "npm:^5.1.2"
@@ -1142,13 +1142,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jdeniau/immutable-devtools@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "@jdeniau/immutable-devtools@npm:0.3.0"
-  checksum: 10c0/00ff6d165f8cef60ff1f976b722f47bd27e871e852de8473ad3f7b4b4be5919fb10379e80cb9f42df3dcc6875553b376d385a7b861aaffaa24a7bc1366312d36
-  languageName: node
-  linkType: hard
-
 "@jdeniau/immutable-devtools@workspace:^, @jdeniau/immutable-devtools@workspace:packages/devtools":
   version: 0.0.0-use.local
   resolution: "@jdeniau/immutable-devtools@workspace:packages/devtools"
