fix(lib): Generate a module version of the library to be used as import in a devlopment source

Author: jacques-lebourgeois

package-lock.json

@@ -8,7 +8,8 @@
   "files": [
     "./dist/**/*"
   ],
-  "main": "./dist/ods-charts.js",
+  "type": "module",
+  "main": "./dist/ods-charts-module.js",
   "types": "./dist/ods-charts.d.js",
   "scripts": {
     "build": "webpack",
@@ -29,5 +30,8 @@
     "typescript": "^5.3.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "@types/echarts": "^4.9.22"
   }
 }

package.json

@@ -61,7 +61,6 @@ class LineChartComponent extends Component {
     });
 
     console.log('>>', ODSCharts);
-    console.log('>>', ODSCharts.theme);
     console.log(lineChartODSTheme);
 
     echarts.registerTheme(lineChartODSTheme.name, lineChartODSTheme.theme);

test/angular-tour-of-heroes/package-lock.json

@@ -56,7 +56,6 @@ onMounted(() => {
   })
 
   console.log('>>', ODSCharts)
-  console.log('>>', ODSCharts.theme)
   console.log(lineChartODSTheme)
 
   echarts.registerTheme(lineChartODSTheme.name, lineChartODSTheme.theme)

test/react/package-lock.json

@@ -26,7 +26,7 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs" /* Specify what module code is generated. */,
+    "module": "ESNext" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
@@ -40,7 +40,7 @@
     // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-    "resolveJsonModule": true /* Enable importing .json files. */,
+    // "resolveJsonModule": true /* Enable importing .json files. */,
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
@@ -107,7 +107,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "exclude": [
-	  "./test/"
-  ]
+  "exclude": ["./test/"]
 }

test/react/src/LineChartComponent.js

@@ -1,17 +1,15 @@
-const path = require('path');
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-module.exports = {
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const defaultConfig = {
   mode: 'development',
   devtool: 'inline-source-map',
   entry: {
     main: './index.ts',
   },
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    filename: 'ods-charts.js',
-    libraryTarget: 'umd',
-    library: 'ODSCharts',
-  },
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
   },
@@ -24,3 +22,30 @@ module.exports = {
     ],
   },
 };
+
+export default [
+  {
+    ...defaultConfig,
+    output: {
+      path: path.resolve(__dirname, './dist'),
+      filename: 'ods-charts.js',
+      library: {
+        type: 'umd',
+        name: 'ODSCharts',
+      },
+    },
+  },
+  {
+    ...defaultConfig,
+    output: {
+      path: path.resolve(__dirname, './dist'),
+      filename: 'ods-charts-module.js',
+      library: {
+        type: 'module',
+      },
+    },
+    experiments: {
+      outputModule: true,
+    },
+  },
+];