esupgrade 2025.0.2 → 2025.1.0

package/README.md

@@ -73,7 +73,7 @@ For more information about Baseline browser support, visit [web.dev/baseline][ba
 
 ### Widely available
 
-#### `var` → `let`/`const`
+#### `var` → [const][mdn-const] & [let][mdn-let]
 
 ```diff
 -var x = 1;
@@ -84,7 +84,7 @@ For more information about Baseline browser support, visit [web.dev/baseline][ba
 +y = 3;
 ```
 
-#### String concatenation → Template literals
+#### String concatenation → [Template literals][mdn-template-literals]
 
 ```diff
 -const greeting = 'Hello ' + name + '!';
@@ -93,7 +93,7 @@ For more information about Baseline browser support, visit [web.dev/baseline][ba
 +const message = `You have ${count} items`;
 ```
 
-#### `Array.from().forEach()` → `for...of` loops
+#### `Array.from().forEach()` → [`for...of` loops][mdn-for-of]
 
 ```diff
 -Array.from(items).forEach(item => {
@@ -104,7 +104,21 @@ For more information about Baseline browser support, visit [web.dev/baseline][ba
 +}
 ```
 
-#### `Object.assign({}, ...)` → Object spread
+#### `Array.from()` → [Array spread [...]][mdn-spread]
+
+```diff
+-const doubled = Array.from(numbers).map(n => n * 2);
+-const filtered = Array.from(items).filter(x => x > 5);
+-const arr = Array.from(iterable);
++const doubled = [...numbers].map(n => n * 2);
++const filtered = [...items].filter(x => x > 5);
++const arr = [...iterable];
+```
+
+> [!NOTE]
+> `Array.from()` with a mapping function or thisArg is not converted.
+
+#### `Object.assign({}, ...)` → [Object spread {...}][mdn-spread]
 
 ```diff
 -const obj = Object.assign({}, obj1, obj2);
@@ -113,7 +127,7 @@ For more information about Baseline browser support, visit [web.dev/baseline][ba
 +const copy = { ...original };
 ```
 
-#### `.concat()` → Array spread
+#### `.concat()` → [Array spread [...]][mdn-spread]
 
 ```diff
 -const combined = arr1.concat(arr2, arr3);
@@ -122,7 +136,7 @@ For more information about Baseline browser support, visit [web.dev/baseline][ba
 +const withItem = [...array, item];
 ```
 
-#### Function expressions → Arrow functions
+#### Function expressions → [Arrow functions][mdn-arrow-functions]
 
 ```diff
 -const fn = function(x) { return x * 2; };
@@ -145,7 +159,7 @@ For more information about Baseline browser support, visit [web.dev/baseline][ba
 > [!CAUTION]
 > These transformations are mainly to harden code for future releases and should be used with caution.
 
-#### `new Promise((resolve) => { ... })` → `Promise.try(() => { ... })`
+#### `new Promise((resolve) => { ... })` → [Promise.try][mdn-promise-try]
 
 ```diff
 -new Promise((resolve) => {
@@ -158,4 +172,11 @@ For more information about Baseline browser support, visit [web.dev/baseline][ba
 ```
 
 [baseline]: https://web.dev/baseline/
+[mdn-arrow-functions]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+[mdn-const]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+[mdn-for-of]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
+[mdn-let]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
+[mdn-promise-try]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/try
+[mdn-spread]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+[mdn-template-literals]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
 [pre-commit]: https://pre-commit.com/

package/images/logo-dark.svg

@@ -1,10 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="640" height="320" font-family="Segoe UI, system-ui, sans-serif" viewBox="0 0 1280 640">
   <circle cx="260" cy="320" r="200" fill="#f7df1e"/>
   <path fill="none" stroke="#191919" stroke-width="48" d="m167 409 95-95 95 95m-190 -95 95-95 95 95m415 50"/>
-  <text x="241" y="148" fill="#c9d1d9" font-size="92" font-weight="bold" transform="matrix(1.6 0 0 1.6 120 120)">
+  <text x="241" y="148" fill="#c9d1d9" font-size="90" font-weight="bold" transform="matrix(1.6 0 0 1.6 120 120)">
     esupgrade
   </text>
-  <text x="241" y="192" fill="#c9d1d9" font-size="28" font-style="italic" transform="matrix(1.6 0 0 1.6 120 120)">
+  <text x="241" y="192" fill="#c9d1d9" font-size="27" font-style="italic" transform="matrix(1.6 0 0 1.6 120 120)">
     Auto-upgrade your JavaScript syntax
   </text>
 </svg>

package/images/logo-light.svg

@@ -1,10 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="640" height="320" font-family="Segoe UI, system-ui, sans-serif" viewBox="0 0 1280 640">
   <circle cx="260" cy="320" r="200" fill="#f7df1e"/>
   <path fill="none" stroke="#191919" stroke-width="48" d="m167 409 95-95 95 95m-190 -95 95-95 95 95m415 50"/>
-  <text x="241" y="148" font-size="92" font-weight="bold" transform="matrix(1.6 0 0 1.6 120 120)">
+  <text x="241" y="148" font-size="90" font-weight="bold" transform="matrix(1.6 0 0 1.6 120 120)">
     esupgrade
   </text>
-  <text x="241" y="192" font-size="28" font-style="italic" transform="matrix(1.6 0 0 1.6 120 120)">
+  <text x="241" y="192" font-size="27" font-style="italic" transform="matrix(1.6 0 0 1.6 120 120)">
     Auto-upgrade your JavaScript syntax
   </text>
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esupgrade",
-  "version": "2025.0.2",
+  "version": "2025.1.0",
   "description": "Auto-upgrade your JavaScript syntax",
   "type": "module",
   "main": "src/index.js",

package/src/newlyAvailable.js

@@ -1,5 +1,6 @@
 /**
  * Transform new Promise((resolve, reject) => { resolve(fn()) }) to Promise.try(fn)
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/try
  */
 export function promiseTry(j, root) {
   let modified = false

package/src/widelyAvailable.js

@@ -1,5 +1,7 @@
 /**
  * Transform var to const
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
  */
 export function varToConst(j, root) {
   let modified = false
@@ -21,6 +23,7 @@ export function varToConst(j, root) {
 
 /**
  * Transform string concatenation to template literals
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
  */
 export function concatToTemplateLiteral(j, root) {
   let modified = false
@@ -94,6 +97,7 @@ export function concatToTemplateLiteral(j, root) {
 
 /**
  * Transform Object.assign({}, ...) to object spread
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
  */
 export function objectAssignToSpread(j, root) {
   let modified = false
@@ -128,6 +132,7 @@ export function objectAssignToSpread(j, root) {
 
 /**
  * Transform Array.from().forEach() to for...of
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
  */
 export function arrayFromForEachToForOf(j, root) {
   let modified = false
@@ -215,6 +220,7 @@ export function arrayFromForEachToForOf(j, root) {
 
 /**
  * Transform for...of Object.keys() loops to for...in
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
  */
 export function forOfKeysToForIn(j, root) {
   let modified = false
@@ -263,3 +269,69 @@ export function forOfKeysToForIn(j, root) {
 
   return { modified, changes }
 }
+
+/**
+ * Transform Array.from(obj) to [...obj] spread syntax
+ * This handles cases like Array.from(obj).map(), .filter(), .some(), etc.
+ * that are not covered by the forEach transformer
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+ */
+export function arrayFromToSpread(j, root) {
+  let modified = false
+  const changes = []
+
+  root
+    .find(j.CallExpression)
+    .filter((path) => {
+      const node = path.node
+
+      // Check if this is Array.from() call
+      if (
+        !j.MemberExpression.check(node.callee) ||
+        !j.Identifier.check(node.callee.object) ||
+        node.callee.object.name !== "Array" ||
+        !j.Identifier.check(node.callee.property) ||
+        node.callee.property.name !== "from"
+      ) {
+        return false
+      }
+
+      // Must have exactly one argument (the iterable)
+      // If there's a second argument (mapping function), we should not transform
+      if (node.arguments.length !== 1) {
+        return false
+      }
+
+      // Don't transform if this is Array.from().forEach()
+      // as that's handled by arrayFromForEachToForOf
+      const parent = path.parent.node
+      if (
+        j.MemberExpression.check(parent) &&
+        j.Identifier.check(parent.property) &&
+        parent.property.name === "forEach"
+      ) {
+        return false
+      }
+
+      return true
+    })
+    .forEach((path) => {
+      const node = path.node
+      const iterable = node.arguments[0]
+
+      // Create array with spread element
+      const spreadArray = j.arrayExpression([j.spreadElement(iterable)])
+
+      j(path).replaceWith(spreadArray)
+
+      modified = true
+      if (node.loc) {
+        changes.push({
+          type: "arrayFromToSpread",
+          line: node.loc.start.line,
+        })
+      }
+    })
+
+  return { modified, changes }
+}

package/tests/widelyAvailable.test.js

@@ -231,6 +231,143 @@ for (const key of Object.keys(obj)) {
       assert.match(result.code, /for \(const \[a, b\] of items\)/)
     })
   })
+
+  describe("Array.from() to spread", () => {
+    test("Array.from().map() to [...].map()", () => {
+      const input = `const doubled = Array.from(numbers).map(n => n * 2);`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /\[\.\.\.numbers\]\.map/)
+      assert.doesNotMatch(result.code, /Array\.from/)
+    })
+
+    test("Array.from().filter() to [...].filter()", () => {
+      const input = `const filtered = Array.from(items).filter(x => x > 5);`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /\[\.\.\.items\]\.filter/)
+    })
+
+    test("Array.from().some() to [...].some()", () => {
+      const input = `const hasValue = Array.from(collection).some(item => item.active);`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /\[\.\.\.collection\]\.some/)
+    })
+
+    test("Array.from().every() to [...].every()", () => {
+      const input = `const allValid = Array.from(items).every(x => x.valid);`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /\[\.\.\.items\]\.every/)
+    })
+
+    test("Array.from().find() to [...].find()", () => {
+      const input = `const found = Array.from(elements).find(el => el.id === 'target');`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /\[\.\.\.elements\]\.find/)
+    })
+
+    test("Array.from().reduce() to [...].reduce()", () => {
+      const input = `const sum = Array.from(values).reduce((a, b) => a + b, 0);`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /\[\.\.\.values\]\.reduce/)
+    })
+
+    test("Array.from() standalone to [...]", () => {
+      const input = `const arr = Array.from(iterable);`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /const arr = \[\.\.\.iterable\]/)
+    })
+
+    test("Array.from() with property access", () => {
+      const input = `const length = Array.from(items).length;`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /\[\.\.\.items\]\.length/)
+    })
+
+    test("Array.from().forEach() should NOT be transformed (handled by other transformer)", () => {
+      const input = `Array.from(items).forEach(item => console.log(item));`
+
+      const result = transform(input)
+
+      // Should be transformed by arrayFromForEachToForOf, not arrayFromToSpread
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /for \(const item of items\)/)
+      assert.doesNotMatch(result.code, /\[\.\.\./)
+    })
+
+    test("Array.from() with mapping function should NOT be transformed", () => {
+      const input = `const doubled = Array.from(numbers, n => n * 2);`
+
+      const result = transform(input)
+
+      // Should not transform because there's a mapping function
+      assert.strictEqual(result.modified, false)
+      assert.match(result.code, /Array\.from\(numbers, n => n \* 2\)/)
+    })
+
+    test("Array.from() with thisArg should NOT be transformed", () => {
+      const input = `const result = Array.from(items, function(x) { return x * this.multiplier; }, context);`
+
+      const result = transform(input)
+
+      // Should not transform because there are 3 arguments
+      assert.strictEqual(result.modified, false)
+      assert.match(result.code, /Array\.from/)
+    })
+
+    test("Array.from() chained methods", () => {
+      const input = `const result = Array.from(set).map(x => x * 2).filter(x => x > 10);`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /\[\.\.\.set\]\.map/)
+    })
+
+    test("Array.from() with complex iterable", () => {
+      const input = `const arr = Array.from(document.querySelectorAll('.item'));`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.match(result.code, /\[\.\.\.document\.querySelectorAll\('\.item'\)\]/)
+    })
+
+    test("Array.from() tracks line numbers", () => {
+      const input = `// Line 1
+const result = Array.from(items).map(x => x * 2);`
+
+      const result = transform(input)
+
+      assert.strictEqual(result.modified, true)
+      assert.strictEqual(result.changes.length, 1)
+      assert.strictEqual(result.changes[0].type, "arrayFromToSpread")
+      assert.strictEqual(result.changes[0].line, 2)
+    })
+  })
+
   describe("const and let", () => {
     test("var to const when not reassigned", () => {
       const input = `