Update all dependencies to latest major

.eslintrc.js → .eslintrc.cjs

@@ -5,6 +5,13 @@ module.exports = {
         node: true,
         mocha: true,
     },
+    settings: {
+        'import/resolver': {
+            node: {
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            },
+        },
+    },
     extends: [
         'airbnb-base',
     ],
@@ -29,6 +36,14 @@ module.exports = {
         'no-unused-expressions': 'off',
         'chai-friendly/no-unused-expressions': 'error',
         'arrow-body-style': 'off',
+        'import/extensions': [
+            'error',
+            'always',
+            {
+                ts: 'never',
+                tsx: 'never',
+            },
+        ],
     },
     overrides: [
         {
@@ -46,17 +61,10 @@ module.exports = {
             ],
             rules: {
                 'import/order': 'off',
+
+                'import/no-unresolved': 'off',
+
                 'import/prefer-default-export': 'off',
-                'import/extensions': [
-                    'error',
-                    'always',
-                    {
-                        ts: 'never',
-                        tsx: 'never',
-                        js: 'never',
-                        jsx: 'never',
-                    },
-                ],
             },
         },
         {

.mocharc.integration.json

@@ -2,5 +2,9 @@
     "extension": ["js", "ts"],
     "spec": "packages/**/integration.test.ts",
     "require": "ts-node/register",
-    "file": ["test--registers.integration.ts"]
+    "file": ["test--registers.integration.ts"],
+    "node-option": [
+        "experimental-specifier-resolution=node",
+        "loader=ts-node/esm"
+    ]
 }

.mocharc.json

@@ -3,5 +3,9 @@
     "spec": "packages/**/*.test.ts",
     "require": "ts-node/register",
     "file": ["test--registers.ts", "test--packages.ts"],
-    "ignore": ["**/integration.test.ts"]
+    "ignore": ["**/integration.test.ts"],
+    "node-option": [
+        "loader=ts-node/esm",
+        "loader=testdouble"
+    ]
 }

.vscode/settings.json

@@ -3,5 +3,8 @@
     "eslint.lintTask.enable": true,
     "eslint.validate": ["typescript", "typescriptreact"],
     "eslint.lintTask.options": ". --ignore-pattern=node_modules --ignore-pattern=/output --ignore-pattern=dist --ext .js,.ts",
-    "editor.rulers": [140],
+    "editor.rulers": [
+        140
+    ],
+    "javascript.preferences.importModuleSpecifierEnding": "js",
 }

README.md

@@ -275,7 +275,7 @@ Take a look at [.figmaexportrc.example.ts](/.figmaexportrc.example.ts) for more
 
 Node.js is now supporting [ECMAScript modules (ESM)](https://nodejs.org/api/esm.html).
 
-If your package.json contains the `"type": "module"` field then you'll need to rename your `.figmaexportrc.js` configuration file:
+If your package.json contains the `  "type": "module"` field then you'll need to rename your `.figmaexportrc.js` configuration file:
 
 ```diff
 -  .figmaexportrc.js

package.json

@@ -2,18 +2,17 @@
   "name": "figma-export",
   "private": true,
   "license": "MIT",
+  "type": "module",
   "description": "Export tool for Figma",
-  "workspaces": {
-    "packages": [
-      "packages/*"
-    ]
-  },
+  "workspaces": [
+    "packages/*"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/marcomontalbano/figma-export"
   },
   "scripts": {
-    "debug": "yarn build && ts-node ./packages/cli/bin/run use-config .figmaexportrc.ts",
+    "debug": "yarn build && node ./packages/cli/bin/run.js use-config",
     "preinstall": "node -e \"if(process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"",
     "postinstall": "husky install",
     "clean": "rm -rf node_modules/ output/ */*/node_modules */*/output */*/dist */*/tsconfig.tsbuildinfo",
@@ -51,14 +50,14 @@
     "@types/sinon-chai": "~3.2.12",
     "@typescript-eslint/eslint-plugin": "~7.0.1",
     "@typescript-eslint/parser": "~7.0.1",
-    "chai": "~4.4.1",
+    "chai": "~5.1.0",
     "chai-as-promised": "^7.1.1",
     "chai-things": "~0.2.0",
     "eslint": "~8.56.0",
     "eslint-config-airbnb": "~19.0.4",
     "eslint-plugin-chai-friendly": "~0.7.4",
     "eslint-plugin-import": "~2.29.1",
-    "husky": "^9.0.10",
+    "husky": "^9.0.11",
     "lerna": "^8.1.2",
     "lerna-changelog": "~2.2.0",
     "lint-staged": "~15.2.2",
@@ -69,6 +68,7 @@
     "nyc": "~15.1.0",
     "sinon": "~17.0.1",
     "sinon-chai": "~3.7.0",
+    "testdouble": "^3.20.1",
     "ts-node": "~10.9.2",
     "typescript": "~5.3.3"
   },

packages/cli/bin/run.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import '../dist/run.js';

packages/cli/package.json

@@ -4,13 +4,13 @@
   "version": "4.8.0-alpha.4",
   "author": "Marco Montalbano",
   "bin": {
-    "figma-export": "./bin/run"
+    "figma-export": "./bin/run.js"
   },
   "bugs": "https://github.com/marcomontalbano/figma-export/issues",
   "dependencies": {
     "@figma-export/core": "^4.8.0-alpha.4",
     "@figma-export/types": "^4.8.0-alpha.4",
-    "ora": "~5.4.1",
+    "ora": "^7.0.0",
     "sade": "~1.8.1"
   },
   "engines": {
@@ -32,6 +32,7 @@
     "figma cli"
   ],
   "license": "MIT",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/marcomontalbano/figma-exporter.git",

packages/cli/src/commands/components.ts

@@ -4,7 +4,7 @@ import { Sade } from 'sade';
 import * as figmaExport from '@figma-export/core';
 import * as FigmaExport from '@figma-export/types';
 
-import { asArray, asUndefinableArray, requirePackages } from '../utils';
+import { asArray, asUndefinableArray, requirePackages } from '../utils.js';
 
 export const addComponents = (prog: Sade, spinner: Ora) => prog
     .command('components <fileId>')
@@ -23,7 +23,7 @@ export const addComponents = (prog: Sade, spinner: Ora) => prog
     .example('components fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-components-as-svg -t COMPONENT -t INSTANCE -o dist')
     .example('components fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-components-as-svg -o dist -i 54:22 -i 138:52')
     .action(
-        (fileId, {
+        async (fileId, {
             fileVersion,
             concurrency,
             retries,
@@ -51,8 +51,8 @@ export const addComponents = (prog: Sade, spinner: Ora) => prog
                 ids,
                 onlyFromPages: page,
                 includeTypes: types,
-                transformers: requirePackages<FigmaExport.StringTransformer>(transformer),
-                outputters: requirePackages<FigmaExport.ComponentOutputter>(outputter, { output }),
+                transformers: await requirePackages<FigmaExport.StringTransformer>(transformer),
+                outputters: await requirePackages<FigmaExport.ComponentOutputter>(outputter, { output }),
 
                 // eslint-disable-next-line no-param-reassign
                 log: (message: string) => { spinner.text = message; },

packages/cli/src/commands/styles.ts

@@ -4,7 +4,7 @@ import { Sade } from 'sade';
 import * as figmaExport from '@figma-export/core';
 import * as FigmaExport from '@figma-export/types';
 
-import { asArray, requirePackages } from '../utils';
+import { asArray, requirePackages } from '../utils.js';
 
 export const addStyles = (prog: Sade, spinner: Ora) => prog
     .command('styles <fileId>')
@@ -17,7 +17,7 @@ export const addStyles = (prog: Sade, spinner: Ora) => prog
                          https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history`)
     .example('styles fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-styles-as-css')
     .action(
-        (fileId, {
+        async (fileId, {
             fileVersion,
             output,
             ...opts
@@ -36,7 +36,7 @@ export const addStyles = (prog: Sade, spinner: Ora) => prog
                 token: process.env.FIGMA_TOKEN || '',
                 ids,
                 onlyFromPages: page,
-                outputters: requirePackages<FigmaExport.StyleOutputter>(outputter, { output }),
+                outputters: await requirePackages<FigmaExport.StyleOutputter>(outputter, { output }),
 
                 // eslint-disable-next-line no-param-reassign
                 log: (message: string) => { spinner.text = message; },

packages/cli/src/commands/use-config.ts

@@ -19,48 +19,51 @@ export const addUseConfig = (prog: Sade, spinner: Ora) => prog
     .example('use-config')
     .example('use-config ./figmaexportrc.production.js')
     .action(
-        (configFile = '.figmaexportrc.js') => {
+        async (configFile = '.figmaexportrc.js') => {
             const configPath = path.resolve(configFile);
 
-            // eslint-disable-next-line import/no-dynamic-require, global-require
-            const { commands = [] } = (fs.existsSync(configPath) ? require(configPath) : {}) as FigmaExportRC;
+            if (!fs.existsSync(configPath)) {
+                throw new Error(`Cannot find the configuration file at '${configPath}'`);
+            }
 
-            const baseCommandOptions: BaseCommandOptions = {
-                token: process.env.FIGMA_TOKEN || '',
+            import(configPath).then((m) => m.default as FigmaExportRC).then((({ commands }) => {
+                const baseCommandOptions: BaseCommandOptions = {
+                    token: process.env.FIGMA_TOKEN || '',
 
-                // eslint-disable-next-line no-param-reassign
-                log: (message: string) => { spinner.text = message; },
-            };
+                    // eslint-disable-next-line no-param-reassign
+                    log: (message: string) => { spinner.text = message; },
+                };
 
-            const commandPromises = commands.map((command) => {
-                switch (command[0]) {
-                    case 'components':
-                        return async () => {
-                            await figmaExport.components({ ...baseCommandOptions, ...command[1] });
-                            spinner.succeed().start();
-                        };
-                    case 'styles':
-                        return async () => {
-                            await figmaExport.styles({ ...baseCommandOptions, ...command[1] });
-                            spinner.succeed().start();
-                        };
-                    default:
-                        throw new Error(`Command ${command[0]} is not found.`);
-                }
-            });
+                const commandPromises = commands.map((command) => {
+                    switch (command[0]) {
+                        case 'components':
+                            return async () => {
+                                await figmaExport.components({ ...baseCommandOptions, ...command[1] });
+                                spinner.succeed().start();
+                            };
+                        case 'styles':
+                            return async () => {
+                                await figmaExport.styles({ ...baseCommandOptions, ...command[1] });
+                                spinner.succeed().start();
+                            };
+                        default:
+                            throw new Error(`Command ${command[0]} is not found.`);
+                    }
+                });
 
-            spinner.start();
+                spinner.start();
 
-            commandPromises.reduce(
-                (actualPromise, nextPromise) => actualPromise.finally(nextPromise),
-                Promise.resolve() as unknown as ReturnType<ComponentsCommand> | ReturnType<StylesCommand>,
-            ).then(() => {
-                spinner.succeed('done');
-            }).catch((error: Error) => {
-                spinner.fail();
+                commandPromises.reduce(
+                    (actualPromise, nextPromise) => actualPromise.finally(nextPromise),
+                    Promise.resolve() as unknown as ReturnType<ComponentsCommand> | ReturnType<StylesCommand>,
+                ).then(() => {
+                    spinner.succeed('done');
+                }).catch((error: Error) => {
+                    spinner.fail();
 
-                // eslint-disable-next-line no-console
-                console.error(error);
-            });
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                });
+            }));
         },
     );

packages/cli/src/run.ts

@@ -1,11 +1,14 @@
 import sade from 'sade';
 import ora from 'ora';
 
-import { addComponents } from './commands/components';
-import { addStyles } from './commands/styles';
-import { addUseConfig } from './commands/use-config';
+import { addComponents } from './commands/components.js';
+import { addStyles } from './commands/styles.js';
+import { addUseConfig } from './commands/use-config.js';
+
+import Module from 'node:module';
+
+const require = Module.createRequire(import.meta.url);
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const pkg = require('../package.json');
 
 const prog = sade('figma-export');

packages/cli/src/utils.requirePackages.mock.js

@@ -1,4 +1,4 @@
 // eslint-disable-next-line func-names
-module.exports = function (options) {
+export default function (options) {
     return options;
-};
+}

packages/cli/src/utils.test.ts

@@ -1,12 +1,12 @@
 import { expect } from 'chai';
-import { asArray, requirePackages } from './utils';
+import { asArray, requirePackages } from './utils.js';
 
 describe('Utils', () => {
     describe('requirePackages', () => {
-        it('should require a package given a relative path', () => {
-            expect(requirePackages([])).to.deep.equal([]);
+        it('should require a package given a relative path', async () => {
+            expect(await requirePackages([])).to.deep.equal([]);
 
-            expect(requirePackages(['./utils.requirePackages.mock.js'], { param: 1 })).to.deep.equal([{ param: 1 }]);
+            expect(await requirePackages(['./utils.requirePackages.mock.js'], { param: 1 })).to.deep.equal([{ param: 1 }]);
         });
     });
 

packages/cli/src/utils.ts

@@ -7,13 +7,16 @@ const resolveNameOrPath = (nameOrPath: string): string => {
 };
 
 // eslint-disable-next-line @typescript-eslint/ban-types
-export const requirePackages = <T extends Function>(packages: string[], baseOptions = {}): T[] => {
-    return packages.map((pkg) => {
-        const pkgNameOrPath = resolveNameOrPath(pkg);
+export const requirePackages = async <T extends Function>(packages: string[], baseOptions = {}): Promise<T[]> => {
+    return Promise.all(
+        packages.map(async (_pkg) => {
+            const pkgNameOrPath = resolveNameOrPath(_pkg);
 
-        // eslint-disable-next-line import/no-dynamic-require, global-require, @typescript-eslint/no-var-requires
-        return require(pkgNameOrPath)(baseOptions);
-    });
+            const pkg = await import(pkgNameOrPath).then((p) => p.default);
+
+            return pkg(baseOptions);
+        }),
+    );
 };
 
 export function asUndefinableArray<T>(entry: T | T[] | undefined): T[] | undefined {

packages/core/package.json

@@ -19,15 +19,16 @@
         "components"
     ],
     "license": "MIT",
+    "type": "module",
     "publishConfig": {
         "access": "public"
     },
     "dependencies": {
         "@figma-export/types": "^4.8.0-alpha.4",
         "axios": "^1.6.7",
         "figma-js": "~1.16.0",
-        "p-limit": "^3.1.0",
-        "p-retry": "^4.6.2"
+        "p-limit": "^4.0.0",
+        "p-retry": "^5.1.2"
     },
     "resolutions": {
         "axios": "^1.6.7"