Fix ESM build for package (#36)

<!--

Thank you for submitting a pull request!

Here's a checklist you might find useful.
[ ] There is an associated issue that is labelled
  'Bug' or 'help wanted' or is in the Community milestone
[ ] Code is up-to-date with the `main` branch
[ ] You've successfully run `npm test` locally
[ ] There are new or updated tests validating the change

-->

Fix ESM build with webpack: create JS and CSS bundles.

.github/workflows/tests.yml

@@ -16,8 +16,12 @@ jobs:
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
-
-      - name: Run Tests
+      - name: Install dependencies
         run: |
           npm ci
+      - name: Build
+        run: |
+          APIKEY=${{ secrets.APIKEY }} npm run build
+      - name: Run Tests
+        run: |
           APIKEY=${{ secrets.APIKEY }} npm test

README.md

@@ -16,16 +16,20 @@ The package is located in the `dist` folder:
 - `dist/esm` es6 modules for direct connection in your project
 - `dist/index.js` Mappable JS Module
 
-Recommended use `@mappable-world/mappable-default-ui-theme` as usual npm package:
+Recommended use `@mappable-world/mappable-default-ui-theme` as usual npm package.
+
+### Usage with npm
+
+Install `@mappable-world/mappable-default-ui-theme` package from npm:
 
 ```sh
 npm install @mappable-world/mappable-default-ui-theme
 ```
 
-and dynamic import
+The JS API is loaded dynamically, so the package must be used after the main JS API has loaded:
 
 ```js
-await mappable.ready;
+await mappable.ready; // waiting for the main JS API to load.
 
 // ...
 
@@ -36,6 +40,13 @@ const {MMapDefaultMarker} = await import('@mappable-world/mappable-default-ui-th
 map.addChild(new MMapDefaultMarker(props));
 ```
 
+You also need to import css styles into your project:
+
+```css
+/* index.css */
+@import '@mappable-world/mappable-default-ui-theme/dist/esm/index.css';
+```
+
 ### Usage without npm
 
 You can use CDN with module loading handler in JS API on your page.

package.json

@@ -3,14 +3,14 @@
     "name": "@mappable-world/mappable-default-ui-theme",
     "description": "Mappable Maps JS API 3.0 example @mappable-world/mappable-default-ui-theme",
     "types": "./dist/types/index.d.ts",
-    "main": "./dist/esm/index.js",
+    "main": "./dist/esm/index.mjs",
     "scripts": {
         "test": "jest",
         "lint": "eslint ./",
         "build": "npm run build:prod && npm run build:esm",
         "build:dev": "webpack --mode=development",
         "build:prod": "webpack --mode=production --node-env=production",
-        "build:esm": "rm -rf ./dist/esm && tsc --project tsconfig.build.json --target es2018 --module es2022 --outDir dist/esm",
+        "build:esm": "ESM_BUILD=true webpack --mode=production --node-env=production",
         "examples": "mappable-cli example --input=example --output=dist/example --readmeFile=example/README.md --templateFile=example/index.html",
         "watch": "webpack --watch",
         "start": "webpack serve",
@@ -46,6 +46,7 @@
         "jest": "29.6.1",
         "jsdom": "22.1.0",
         "lodash": "^4.17.21",
+        "mini-css-extract-plugin": "^2.9.1",
         "nanospinner": "^1.1.0",
         "postcss": "^8.4.39",
         "postcss-loader": "^8.1.1",

webpack.config.js

@@ -1,3 +1,45 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+const ESM_BUILD = process.env.ESM_BUILD === 'true';
+
 module.exports = (args, env, dir = process.cwd()) => {
-    return require('@mappable-world/mappable-cli/webpack.config')(args, env, dir);
-}
+    const coreWebpackModule = require('@mappable-world/mappable-cli/webpack.config')(args, env, dir);
+
+    if (!ESM_BUILD) {
+        return coreWebpackModule;
+    }
+
+    return {
+        ...coreWebpackModule,
+        experiments: {outputModule: true},
+        entry: {index: {import: './src/index.ts', library: {type: 'module'}}},
+        output: {...coreWebpackModule.output, path: path.resolve(dir, 'dist/esm')},
+        plugins: [new MiniCssExtractPlugin()],
+        module: {
+            rules: [
+                {
+                    test: /\.(ts|tsx)$/i,
+                    loader: 'ts-loader',
+                    options: {
+                        compilerOptions: {declaration: true, declarationDir: 'dist/types'},
+                        onlyCompileBundledFiles: true
+                    },
+                    exclude: ['/node_modules/']
+                },
+                {
+                    test: /\.css$/i,
+                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
+                },
+                {
+                    test: /\.(eot|ttf|woff|woff2|png|jpg|gif)$/i,
+                    type: 'asset'
+                },
+                {
+                    test: /\.(svg|frag|vert)$/i,
+                    oneOf: [{resourceQuery: /inline/, type: 'asset/inline'}, {type: 'asset/source'}]
+                }
+            ]
+        }
+    };
+};