chore(js): Exporting an esm bundle of the ECL js and logos - FRONT-47…

…01 (#3751)

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     ECL: 'writable',
   },
   env: {
+    es2020: true,
     node: true,
     browser: true,
   },

.size-limit.json

@@ -32,13 +32,27 @@
     "gzip": false,
     "brotli": false
   },
+  {
+    "path": "dist/packages/ec/scripts/ecl-esm-ec.js",
+    "limit": "250 KB",
+    "webpack": false,
+    "gzip": false,
+    "brotli": false
+  },
   {
     "path": "dist/packages/eu/scripts/ecl-eu.js",
     "limit": "250 KB",
     "webpack": false,
     "gzip": false,
     "brotli": false
   },
+  {
+    "path": "dist/packages/eu/scripts/ecl-esm-eu.js",
+    "limit": "250 KB",
+    "webpack": false,
+    "gzip": false,
+    "brotli": false
+  },
   {
     "path": "dist/packages/ec/styles/ecl-ec-print.css",
     "limit": "210 KB",

package.json

@@ -120,7 +120,8 @@
       "serve-static": ">=1.16.0",
       "path-to-regexp": "0.1.12",
       "inquirer": "12.2.0",
-      "nanoid": "3.3.8"
+      "nanoid": "3.3.8",
+      "esbuild": "0.24.2"
     }
   },
   "engines": {

src/components/select/select.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-return-assign */
 import { queryOne } from '@ecl/dom-utils';
-import getSystem from '@ecl/builder/utils/getSystem';
+import * as getSystem from '@ecl/builder/utils/getSystem';
 import EventManager from '@ecl/event-manager';
 import iconSvgAllCheck from '@ecl/resources-icons/dist/svg/all/check.svg';
 import iconSvgAllCornerArrow from '@ecl/resources-icons/dist/svg/all/corner-arrow.svg';

src/components/table/table.js

@@ -1,5 +1,5 @@
 import { queryAll, queryOne } from '@ecl/dom-utils';
-import getSystem from '@ecl/builder/utils/getSystem';
+import * as getSystem from '@ecl/builder/utils/getSystem';
 import iconSvgAllArrow from '@ecl/resources-icons/dist/svg/all/solid-arrow.svg';
 
 const system = getSystem();

src/playground/ec/.storybook/preview-head.html

@@ -65,7 +65,7 @@
     );
   }
 </script>
-<script type="text/javascript" src="./scripts/ecl-ec.js"></script>
+<script type="module" src="./scripts/ecl-esm-ec.js"></script>
 <script>
   // https://github.com/storybookjs/storybook/issues/6113#issuecomment-473965255
   function runOnPageChange() {

src/playground/eu/.storybook/preview-head.html

@@ -64,7 +64,7 @@
     );
   }
 </script>
-<script type="text/javascript" src="./scripts/ecl-eu.js"></script>
+<script type="module" src="./scripts/ecl-esm-eu.js"></script>
 <script>
   // https://github.com/storybookjs/storybook/issues/6113#issuecomment-473965255
   function runOnPageChange() {

src/presets/ec/ecl-builder.config.js

@@ -23,6 +23,17 @@ module.exports = {
       entry: path.resolve(__dirname, 'src/ec.js'),
       dest: path.resolve(outputFolder, 'scripts/ecl-ec.js'),
       options: {
+        format: 'iife',
+        banner,
+        moduleName: 'ECL',
+        sourceMap: isProd ? false : 'inline',
+      },
+    },
+    {
+      entry: path.resolve(__dirname, 'src/ec-esm.js'),
+      dest: path.resolve(outputFolder, 'scripts/ecl-esm-ec.js'),
+      options: {
+        format: 'es',
         banner,
         moduleName: 'ECL',
         sourceMap: isProd ? false : 'inline',

src/presets/ec/package.json

@@ -5,6 +5,7 @@
   "version": "5.0.0-alpha.1",
   "description": "ECL EC preset",
   "main": "dist/scripts/ecl-ec.js",
+  "module": "dist/scripts/ecl-esm-ec.js",
   "style": "dist/styles/ecl-ec.css",
   "publishConfig": {
     "access": "public"

src/presets/ec/src/ec-esm.js

@@ -0,0 +1,70 @@
+import '@ecl/dom-utils/polyfills';
+
+import Accordion from '@ecl/accordion';
+import autoInit from '@ecl/dom-utils/autoinit';
+import Banner from '@ecl/banner';
+import Carousel from '@ecl/carousel';
+import CategoryFilter from '@ecl/category-filter';
+import Datepicker from '@ecl/datepicker';
+import Breadcrumb from '@ecl/breadcrumb';
+import ContentBlock from '@ecl/content-block';
+import DescriptionList from '@ecl/description-list';
+import Expandable from '@ecl/expandable';
+import FileDownload from '@ecl/file';
+import FileUpload from '@ecl/file-upload';
+import Gallery from '@ecl/gallery';
+import Indicator from '@ecl/indicator';
+import InpageNavigation from '@ecl/inpage-navigation';
+import MediaContainer from '@ecl/media-container';
+import MegaMenu from '@ecl/mega-menu';
+import Menu from '@ecl/menu';
+import Modal from '@ecl/modal';
+import NewsTicker from '@ecl/news-ticker';
+import Notification from '@ecl/notification';
+import Popover from '@ecl/popover';
+import Range from '@ecl/range';
+import Select from '@ecl/select';
+import SiteHeader from '@ecl/site-header';
+import Table from '@ecl/table';
+import Tabs from '@ecl/tabs';
+import Timeline from '@ecl/timeline';
+
+const ECL = {
+  autoInit,
+  Accordion,
+  Banner,
+  Carousel,
+  CategoryFilter,
+  Datepicker,
+  Breadcrumb,
+  ContentBlock,
+  DescriptionList,
+  Expandable,
+  FileDownload,
+  FileUpload,
+  Gallery,
+  Indicator,
+  InpageNavigation,
+  MediaContainer,
+  MegaMenu,
+  Menu,
+  Modal,
+  NewsTicker,
+  Notification,
+  Popover,
+  Range,
+  Select,
+  SiteHeader,
+  Tabs,
+  Table,
+  Timeline,
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { ECL };
+
+if (typeof globalThis !== 'undefined') {
+  globalThis.ECL = ECL;
+} else if (typeof window !== 'undefined') {
+  window.ECL = ECL;
+}

src/presets/eu/ecl-builder.config.js

@@ -28,6 +28,16 @@ module.exports = {
         sourceMap: isProd ? false : 'inline',
       },
     },
+    {
+      entry: path.resolve(__dirname, 'src/eu-esm.js'),
+      dest: path.resolve(outputFolder, 'scripts/ecl-esm-eu.js'),
+      options: {
+        format: 'es',
+        banner,
+        moduleName: 'ECL',
+        sourceMap: isProd ? false : 'inline',
+      },
+    },
   ],
   styles: [
     {

src/presets/eu/package.json

@@ -5,6 +5,7 @@
   "version": "5.0.0-alpha.1",
   "description": "ECL EU preset",
   "main": "dist/scripts/ecl-eu.js",
+  "module": "dist/scripts/ecl-esm-eu.js",
   "style": "dist/styles/ecl-eu.css",
   "publishConfig": {
     "access": "public"

src/presets/eu/src/eu-esm.js

@@ -0,0 +1,70 @@
+import '@ecl/dom-utils/polyfills';
+
+import Accordion from '@ecl/accordion';
+import autoInit from '@ecl/dom-utils/autoinit';
+import Banner from '@ecl/banner';
+import Carousel from '@ecl/carousel';
+import CategoryFilter from '@ecl/category-filter';
+import Datepicker from '@ecl/datepicker';
+import Breadcrumb from '@ecl/breadcrumb';
+import ContentBlock from '@ecl/content-block';
+import DescriptionList from '@ecl/description-list';
+import Expandable from '@ecl/expandable';
+import FileDownload from '@ecl/file';
+import FileUpload from '@ecl/file-upload';
+import Gallery from '@ecl/gallery';
+import Indicator from '@ecl/indicator';
+import InpageNavigation from '@ecl/inpage-navigation';
+import MediaContainer from '@ecl/media-container';
+import MegaMenu from '@ecl/mega-menu';
+import Menu from '@ecl/menu';
+import Modal from '@ecl/modal';
+import NewsTicker from '@ecl/news-ticker';
+import Notification from '@ecl/notification';
+import Popover from '@ecl/popover';
+import Range from '@ecl/range';
+import Select from '@ecl/select';
+import SiteHeader from '@ecl/site-header';
+import Table from '@ecl/table';
+import Tabs from '@ecl/tabs';
+import Timeline from '@ecl/timeline';
+
+const ECL = {
+  autoInit,
+  Accordion,
+  Banner,
+  Carousel,
+  CategoryFilter,
+  Datepicker,
+  Breadcrumb,
+  ContentBlock,
+  DescriptionList,
+  Expandable,
+  FileDownload,
+  FileUpload,
+  Gallery,
+  Indicator,
+  InpageNavigation,
+  MediaContainer,
+  MegaMenu,
+  Menu,
+  Modal,
+  NewsTicker,
+  Notification,
+  Popover,
+  Range,
+  Select,
+  SiteHeader,
+  Tabs,
+  Table,
+  Timeline,
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { ECL };
+
+if (typeof globalThis !== 'undefined') {
+  globalThis.ECL = ECL;
+} else if (typeof window !== 'undefined') {
+  window.ECL = ECL;
+}

src/resources/logo-ec/package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "dist:clean": "rimraf dist",
     "dist:copy": "ncp src dist",
+    "dist:script": "node scripts/esm-export.js",
     "dist": "run-s dist:*",
     "prepublish": "npm run dist"
   },

src/resources/logo-ec/scripts/esm-export.js

@@ -0,0 +1,42 @@
+const fs = require('fs');
+const path = require('path');
+
+const positiveSourceDir = path.resolve(__dirname, '../src/positive');
+const negativeSourceDir = path.resolve(__dirname, '../src/negative');
+const positiveOutputDir = path.resolve(__dirname, '../dist/positive');
+const negativeOutputDir = path.resolve(__dirname, '../dist/negative');
+
+if (!fs.existsSync(positiveOutputDir)) {
+  fs.mkdirSync(positiveOutputDir, { recursive: true });
+}
+if (!fs.existsSync(negativeOutputDir)) {
+  fs.mkdirSync(negativeOutputDir, { recursive: true });
+}
+
+const toCamelCase = (str) =>
+  str
+    .replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
+    .replace(/[^a-zA-Z0-9]/g, '');
+
+const generateSvgExports = (sourceDir, outputDir) => {
+  const files = fs
+    .readdirSync(sourceDir)
+    .filter((file) => file.endsWith('.svg'));
+
+  const svgExports = files.map((file) => {
+    const name = path.basename(file, '.svg');
+    const sanitizedName = toCamelCase(name);
+    const svgContent = fs
+      .readFileSync(path.join(sourceDir, file), 'utf-8')
+      .replace(/`/g, '\\`')
+      .trim();
+
+    return `export const ${sanitizedName} = \`${svgContent}\`;`;
+  });
+
+  const outputFile = path.resolve(outputDir, 'esm-export.js');
+  fs.writeFileSync(outputFile, svgExports.join('\n\n'));
+};
+
+generateSvgExports(positiveSourceDir, positiveOutputDir);
+generateSvgExports(negativeSourceDir, negativeOutputDir);

src/resources/logo-eu/package.json

@@ -11,6 +11,7 @@
     "dist:clean": "rimraf dist",
     "dist:copy": "ncp src dist",
     "dist": "run-s dist:*",
+    "dist:script": "node scripts/esm-export.js",
     "prepublish": "npm run dist"
   },
   "dependencies": {