Merge pull request #17 from yoriiis/esm

Migrate to ESM

.github/workflows/lint.yml

@@ -14,4 +14,5 @@ jobs:
   lint:
     uses: yoriiis/actions/.github/workflows/lint.yml@main
     with:
-      stylelint-status: false
+      stylelint-status: false
+      eslint-config: 'config/.eslintrc.cjs'

README.md

@@ -32,9 +32,9 @@ npm install svg-chunk-webpack-plugin --save-dev
 yarn add svg-chunk-webpack-plugin --dev
 ```
 
-## Environment
-
-`svg-chunk-webpack-plugin` was built for Node.js `>=16.20.0` and Webpack `>=5.10.3`.
+> **Warning** `svg-chunk-webpack-plugin@5` is ESM only.
+>
+> **Note** Minimum supported `Node.js` version is `16.20.0` and Webpack `>=5.10.3`.
 
 ## Example
 
@@ -51,9 +51,9 @@ First, let's add the loader and the plugin to the Webpack configuration.
 **webpack.config.js**
 
 ```javascript
-const SvgChunkWebpackPlugin = require('svg-chunk-webpack-plugin');
+import SvgChunkWebpackPlugin from 'svg-chunk-webpack-plugin';
 
-module.exports = {
+export default {
   module: {
     rules: [
       {
@@ -117,7 +117,7 @@ Tells the loader whether to load the custom [SVGO configuration](https://github.
 **webpack.config.js**
 
 ```js
-module.exports = {
+export default {
   module: {
     rules: [
       {
@@ -139,7 +139,7 @@ SVGO have a default preset to optimize SVG files. See [how to configure svgo](ht
 **svgo.config.js**
 
 ```js
-module.exports = {
+export default {
   multipass: true,
   plugins: [
     {
@@ -179,7 +179,7 @@ Tells the plugin whether to personalize the default sprite filename. The placeho
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   plugins: [
     new SvgChunkWebpackPlugin({
       filename: '[name].svg'
@@ -205,7 +205,7 @@ SVG sprites are built using the `svgstore` package. Update the parameters accord
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   plugins: [
     new SvgChunkWebpackPlugin({
       svgstoreConfig: {
@@ -236,7 +236,7 @@ Tells the plugin whether to generate the `sprites-manifest.json`. The JSON file
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   plugins: [
     new SvgChunkWebpackPlugin({
       generateSpritesManifest: true
@@ -260,7 +260,7 @@ Tells the plugin whether to generate the `sprites-preview.html`. The HTML previe
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   plugins: [
     new SvgChunkWebpackPlugin({
       generateSpritesPreview: true
@@ -286,7 +286,7 @@ The `[contenthash]` placeholder will add a unique hash based on the content of t
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   plugins: [
     new SvgChunkWebpackPlugin({
       filename: '[name].[contenthash].svg'
@@ -302,7 +302,7 @@ The `[fullhash]` placeholder will add a unique hash generated for every build. W
 **webpack.config.js**
 
 ```javascript
-module.exports = {
+export default {
   plugins: [
     new SvgChunkWebpackPlugin({
       filename: '[name].[fullhash].svg'

config/jest.config.js

@@ -1,14 +1,23 @@
-module.exports = {
+export default {
 	moduleFileExtensions: ['js', 'ts'],
 	modulePaths: ['<rootDir>/src'],
 	resetModules: true,
 	rootDir: '../',
 	transform: {
-		'\\.(js|ts)$': 'ts-jest'
+		'\\.(js|ts)$': [
+			'ts-jest',
+			{
+				diagnostics: {
+					// Disable error reporting with import assertions
+					ignoreCodes: ['TS1343', 'TS2821']
+				}
+			}
+		]
 	},
 	moduleNameMapper: {
 		'^@src(.*)$': '<rootDir>/src$1'
 	},
+	resolver: 'jest-ts-webcompat-resolver', // Used to fix .js resolution in .ts files
 	testMatch: ['<rootDir>/tests/*.test.js'],
 	verbose: true,
 	resetMocks: true

example/src/js/home.js

@@ -1,4 +1,4 @@
 import '../svgs/gradient.svg';
 import '../svgs/video.svg';
 
-import './component';
+import './component.js';

example/svgo.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	multipass: true,
 	plugins: [
 		{

example/webpack.config.js

@@ -1,9 +1,13 @@
-const path = require('path');
-const TerserJSPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const SvgChunkWebpackPlugin = require('../lib/index.js');
+import path from 'path';
+import { fileURLToPath } from 'url';
+import TerserJSPlugin from 'terser-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import SvgChunkWebpackPlugin from '../lib/index.js';
 
-module.exports = (env, argv) => {
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default (env, argv) => {
 	const isProduction = argv.mode === 'production';
 
 	return {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svg-chunk-webpack-plugin",
-	"version": "4.0.2",
+	"version": "5.0.0",
 	"description": "Generate SVG sprites according to entrypoint dependencies. Each page only imports its own svgs, wrapped as a sprite and optimized by svgo",
 	"keywords": [
 		"svg",
@@ -24,7 +24,8 @@
 	},
 	"license": "MIT",
 	"author": "Joris DANIEL",
-	"main": "./lib/index.js",
+	"type": "module",
+	"exports": "./lib/index.js",
 	"types": "./types/index.d.ts",
 	"files": [
 		"lib",
@@ -33,7 +34,6 @@
 	"scripts": {
 		"build": "rm -rf ./types ./lib && tsc",
 		"build:example": "rm -rf ./example/dist/ && webpack --config=./example/webpack.config.js --mode=production",
-		"coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls",
 		"dev": "tsc --watch",
 		"dev:unit": "jest --config ./config/jest.config.js --verbose --coverage --watch",
 		"inspect:example": "rm -rf ./example/dist/ && node --inspect node_modules/webpack/bin/webpack.js --config=./example/webpack.config.js --mode=development",
@@ -42,7 +42,7 @@
 		"test": "npm run test:unit",
 		"test:unit": "jest --config ./config/jest.config.js --verbose --coverage"
 	},
-	"prettier": "./config/prettier.config.js",
+	"prettier": "./config/prettier.config.cjs",
 	"dependencies": {
 		"extend": "^3.0.2",
 		"schema-utils": "^4.0.1",
@@ -60,6 +60,7 @@
 		"css-loader": "^6.7.3",
 		"css-minimizer-webpack-plugin": "^5.0.0",
 		"jest": "^29.5.0",
+		"jest-ts-webcompat-resolver": "^1.0.0",
 		"mini-css-extract-plugin": "^2.7.5",
 		"terser-webpack-plugin": "^5.3.7",
 		"ts-jest": "^29.1.0",
@@ -68,7 +69,7 @@
 		"webpack-cli": "^5.0.1"
 	},
 	"peerDependencies": {
-		"webpack": ">= 5.10.3"
+		"webpack": ">= 5.80.0"
 	},
 	"engines": {
 		"node": ">=16.20.0"

src/index.ts

@@ -3,10 +3,10 @@ import path from 'path';
 import { validate } from 'schema-utils';
 import svgstore from 'svgstore';
 import extend from 'extend';
-import templatePreview from './preview';
-import unTypedSchemaOptions from './schemas/plugin-options.json';
+import templatePreview from './preview.js';
+import unTypedSchemaOptions from './schemas/plugin-options.json' assert { type: 'json' };
 import type { Compiler, Compilation, NormalModule, Chunk, Module, sources } from 'webpack';
-import { Schema } from 'schema-utils/declarations/validate';
+import { Schema } from 'schema-utils/declarations/validate.js';
 import {
 	Svgs,
 	SpriteManifest,
@@ -15,9 +15,9 @@ import {
 	SvgsData,
 	PluginOptions,
 	SvgstoreConfig
-} from './types';
+} from './types.js';
+import { PACKAGE_NAME, esmResolve } from './utils.js';
 
-const PACKAGE_NAME = require('../package.json').name;
 const schemaOptions = unTypedSchemaOptions as Schema;
 
 /**
@@ -408,6 +408,6 @@ class SvgChunkWebpackPlugin {
 }
 
 // @ts-ignore
-SvgChunkWebpackPlugin.loader = require.resolve('./loader');
+SvgChunkWebpackPlugin.loader = esmResolve('./loader.js');
 
-export = SvgChunkWebpackPlugin;
+export default SvgChunkWebpackPlugin;

src/loader.ts

@@ -1,18 +1,21 @@
 import { optimize, loadConfig } from 'svgo';
 import { validate } from 'schema-utils';
-import unTypedSchemaOptions from './schemas/loader-options.json';
-import { Schema } from 'schema-utils/declarations/validate';
-import { LoaderThis, LoaderOptions } from './types';
+import unTypedSchemaOptions from './schemas/loader-options.json' assert { type: 'json' };
+import { Schema } from 'schema-utils/declarations/validate.js';
+import { LoaderThis, LoaderOptions } from './types.js';
+import { PACKAGE_NAME } from './utils.js';
 
-const PACKAGE_NAME = require('../package.json').name;
 const schemaOptions = unTypedSchemaOptions as Schema;
 
 /**
  * Loader for SVG files
  * Content are not edited, just stringified
  * The plugin create sprites
  */
-export = async function SvgChunkWebpackLoader(this: LoaderThis, content: string): Promise<string> {
+export default async function SvgChunkWebpackLoader(
+	this: LoaderThis,
+	content: string
+): Promise<string> {
 	const options: LoaderOptions = this.getOptions() || {};
 
 	validate(schemaOptions, options, {
@@ -62,4 +65,4 @@ export = async function SvgChunkWebpackLoader(this: LoaderThis, content: string)
 	} catch (error) {
 		return callback(error);
 	}
-};
+}

src/preview.ts

@@ -1,6 +1,6 @@
-import { Sprite } from './types';
+import { Sprite } from './types.js';
 
-export = function templatePreview(sprites: Sprite[]): string {
+export default function templatePreview(sprites: Sprite[]): string {
 	/* prettier-ignore */
 	return `<!DOCTYPE html>
 				<html lang="en">
@@ -71,4 +71,4 @@ export = function templatePreview(sprites: Sprite[]): string {
 						`).join('')}
 					</body>
 				</html>`;
-};
+}

src/utils.ts

@@ -0,0 +1,7 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+export const PACKAGE_NAME = 'svg-chunk-webpack-plugin' as const;
+
+export const esmResolve = (filePath: string) =>
+	path.resolve(path.dirname(fileURLToPath(import.meta.url)), filePath);

tests/index.test.js

@@ -6,6 +6,10 @@ import schemaOptions from '@src/schemas/plugin-options.json';
 
 jest.mock('@src/preview');
 jest.mock('schema-utils');
+jest.mock('@src/utils', () => ({
+	PACKAGE_NAME: 'svg-chunk-webpack-plugin',
+	esmResolve: jest.fn()
+}));
 jest.mock('webpack', () => {
 	return {
 		Compilation: {

tests/loader.test.js

@@ -5,9 +5,13 @@ import svgoConfig from '../example/svgo.config';
 import { optimize, loadConfig } from 'svgo';
 import { validate } from 'schema-utils';
 import schemaOptions from '@src/schemas/loader-options.json';
-const PACKAGE_NAME = require('../package.json').name;
+import { PACKAGE_NAME } from '@src/utils';
 
 jest.mock('schema-utils');
+jest.mock('@src/utils', () => ({
+	PACKAGE_NAME: 'svg-chunk-webpack-plugin',
+	esmResolve: jest.fn()
+}));
 jest.mock('svgo', () => {
 	const originalModule = jest.requireActual('svgo');
 	return {

tsconfig.json

@@ -1,8 +1,8 @@
 {
 	"compilerOptions": {
 		"strict": true,
-		"module": "commonjs",
-		"moduleResolution": "node",
+		"module": "nodenext",
+		"moduleResolution": "node16",
 		"target": "esnext",
 		"lib": ["ESNext"],
 		"outDir": "./lib",