Upgrade babel, add importAttributesKeyword parameter

package.json

@@ -33,15 +33,15 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/generator": "7.17.7",
-    "@babel/parser": "^7.20.5",
-    "@babel/traverse": "7.23.2",
-    "@babel/types": "7.17.0",
+    "@babel/generator": "7.24.4",
+    "@babel/parser": "^7.24.4",
+    "@babel/traverse": "7.24.1",
+    "@babel/types": "7.24.0",
     "javascript-natural-sort": "0.7.1",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.24.4",
     "@types/chai": "4.2.15",
     "@types/jest": "26.0.20",
     "@types/lodash": "4.14.168",

src/utils/__tests__/get-code-from-ast.spec.ts

@@ -30,6 +30,7 @@ import a from 'a';
     expect(format(formatted, { parser: 'babel' })).toEqual(
         `// first comment
 // second comment
+
 import a from "a";
 import c from "c";
 import g from "g";

src/utils/extract-ast-nodes.ts

@@ -29,7 +29,7 @@ export function extractASTNodes(ast: ParseResult<File>) {
 
         ImportDeclaration(path: NodePath<ImportDeclaration>) {
             const tsModuleParent = path.findParent((p) =>
-                isTSModuleDeclaration(p),
+                isTSModuleDeclaration(p.node),
             );
             if (!tsModuleParent) {
                 importNodes.push(path.node);

src/utils/get-code-from-ast.ts

@@ -36,19 +36,22 @@ export const getCodeFromAst = (
         directives,
         sourceType: 'module',
         interpreter: interpreter,
-        sourceFile: '',
         leadingComments: [],
         innerComments: [],
         trailingComments: [],
         start: 0,
         end: 0,
         loc: {
-            start: { line: 0, column: 0 },
-            end: { line: 0, column: 0 },
+            filename: '',
+            identifierName: '',
+            start: { line: 0, column: 0, index: 0 },
+            end: { line: 0, column: 0, index: 0 },
         },
     });
 
-    const { code } = generate(newAST);
+    const { code } = generate(newAST, {
+        importAttributesKeyword: 'with',
+    });
 
     return (
         code.replace(

src/utils/get-import-nodes.ts

@@ -12,7 +12,7 @@ export const getImportNodes = (code: string, options?: ParserOptions) => {
     traverse(ast, {
         ImportDeclaration(path: NodePath<ImportDeclaration>) {
             const tsModuleParent = path.findParent((p) =>
-                isTSModuleDeclaration(p),
+                isTSModuleDeclaration(p.node),
             );
             if (!tsModuleParent) {
                 importNodes.push(path.node);

src/utils/is-sort-imports-ignored.ts

@@ -6,6 +6,6 @@ import { getAllCommentsFromNodes } from './get-all-comments-from-nodes';
 export const isSortImportsIgnored = (nodes: Statement[]) =>
     getAllCommentsFromNodes(nodes).some(
         (comment) =>
-            comment.loc.start.line === 1 &&
+            comment.loc?.start.line === 1 &&
             comment.value.includes(sortImportsIgnoredComment),
     );

tests/Babel/__snapshots__/ppsi.spec.js.snap

@@ -20,6 +20,7 @@ function add(a,b) {
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment in this file.
+
 import thirdParty from "third-party";
 import z from "z";
 

tests/Flow/__snapshots__/ppsi.spec.js.snap

@@ -33,7 +33,9 @@ export function givesAFoo3Obj(): AliasFoo3 {
 /**
  * @flow
  */
+
 // I am top level comment in this file.
+
 import thirdParty from "third-party";
 
 import abc from "@core/abc";

tests/ImportsNotSeparated/__snapshots__/ppsi.spec.js.snap

@@ -96,6 +96,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment in this file.
 // I am second line of top level comment in this file.
+
 import React from "react";
 import "./commands";
 
@@ -131,6 +132,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment in this file.
 // I am second line of top level comment in this file.
+
 import thirdParty from "third-party";
 import z from "z";
 import abc from "@core/abc";
@@ -245,6 +247,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 //@ts-ignore
 // I am file top level comments
+
 import a from "a";
 import c from "c";
 // I am stick to third party comment
@@ -323,6 +326,7 @@ import fourLevelRelativePath from "../../../../fourLevelRelativePath";
 import something from "@server/something";
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment
+
 import abc from "@core/abc";
 import otherthing from "@core/otherthing";
 import something from "@server/something";
@@ -378,6 +382,7 @@ import './commands';
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
+
 // Import commands.js using ES2015 syntax:
 import "./commands";
 

tests/ImportsNotSeparatedRest/__snapshots__/ppsi.spec.js.snap

@@ -96,6 +96,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment in this file.
 // I am second line of top level comment in this file.
+
 import React from "react";
 import "./commands";
 
@@ -131,6 +132,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment in this file.
 // I am second line of top level comment in this file.
+
 import abc from "@core/abc";
 import otherthing from "@core/otherthing";
 import qwerty from "@server/qwerty";
@@ -188,6 +190,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 //@ts-ignore
 // I am file top level comments
+
 import otherthing from "@core/otherthing";
 import something from "@server/something";
 import component from "@ui/hello";
@@ -266,6 +269,7 @@ import fourLevelRelativePath from "../../../../fourLevelRelativePath";
 import something from "@server/something";
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment
+
 import abc from "@core/abc";
 import otherthing from "@core/otherthing";
 import something from "@server/something";
@@ -321,6 +325,7 @@ import './commands';
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
+
 // Import commands.js using ES2015 syntax:
 import "./commands";
 

tests/ImportsSeparated/__snapshots__/ppsi.spec.js.snap

@@ -100,6 +100,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment in this file.
 // I am second line of top level comment in this file.
+
 import React from "react";
 
 import "./commands";
@@ -136,6 +137,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment in this file.
 // I am second line of top level comment in this file.
+
 import thirdParty from "third-party";
 import z from "z";
 
@@ -196,6 +198,7 @@ const workletAdd = (a:number,b:number) => {
 "use client";
 
 // comment after directives
+
 import abc from "@core/abc";
 import otherthing from "@core/otherthing";
 
@@ -262,6 +265,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 //@ts-ignore
 // I am file top level comments
+
 import a from "a";
 import c from "c";
 // I am stick to third party comment
@@ -347,6 +351,7 @@ import fourLevelRelativePath from "../../../../fourLevelRelativePath";
 import something from "@server/something";
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment
+
 import abc from "@core/abc";
 import otherthing from "@core/otherthing";
 
@@ -405,6 +410,7 @@ import './commands';
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
+
 // Import commands.js using ES2015 syntax:
 import "./commands";
 

tests/ImportsSeparatedRest/__snapshots__/ppsi.spec.js.snap

@@ -100,6 +100,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment in this file.
 // I am second line of top level comment in this file.
+
 import React from "react";
 
 import "./commands";
@@ -136,6 +137,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment in this file.
 // I am second line of top level comment in this file.
+
 import abc from "@core/abc";
 import otherthing from "@core/otherthing";
 
@@ -197,6 +199,7 @@ function add(a:number,b:number) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 //@ts-ignore
 // I am file top level comments
+
 import otherthing from "@core/otherthing";
 
 import something from "@server/something";
@@ -282,6 +285,7 @@ import fourLevelRelativePath from "../../../../fourLevelRelativePath";
 import something from "@server/something";
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // I am top level comment
+
 import abc from "@core/abc";
 import otherthing from "@core/otherthing";
 
@@ -340,6 +344,7 @@ import './commands';
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
+
 // Import commands.js using ES2015 syntax:
 import "./commands";
 

tests/Vue/__snapshots__/ppsi.spec.js.snap

@@ -28,6 +28,7 @@ function add(a,b) {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <script setup>
 // I am top level comment in this file.
+
 import thirdParty from "third-party";
 import { defineComponent } from "vue";
 import z from "z";
@@ -85,6 +86,7 @@ export default defineComponent({
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <script>
 // I am top level comment in this file.
+
 import thirdParty from "third-party";
 import { defineComponent } from "vue";
 import z from "z";
@@ -165,6 +167,7 @@ export default defineComponent({
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <script lang="ts">
 // I am top level comment in this file.
+
 import thirdParty from "third-party";
 import { defineComponent } from "vue";
 import z from "z";
@@ -222,6 +225,7 @@ export default defineComponent({
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <script lang="tsx">
 // I am top level comment in this file.
+
 import thirdParty from "third-party";
 import { defineComponent } from "vue";
 import z from "z";