Upgrade babel, add importAttributesKeyword parameter

package.json

@@ -33,20 +33,20 @@
  },
  "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",
  "@types/node": "20.8.6",
- "@vue/compiler-sfc": "^3.2.41",
+ "@vue/compiler-sfc": "3.2.41",
  "jest": "26.6.3",
  "prettier": "2.8",
  "ts-jest": "26.5.3",

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";