chore(js): Exporting an esm bundle of the ECL js, using it in storybo…

…ok - FRONT-4701

.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": "195 KB",

src/implementations/vanilla/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/implementations/vanilla/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

@@ -64,7 +64,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/src/ec-esm.js

@@ -0,0 +1,71 @@
+import '@ecl/dom-utils/polyfills';
+
+import Accordion from '@ecl/vanilla-component-accordion';
+import autoInit from '@ecl/dom-utils/autoinit';
+import Banner from '@ecl/vanilla-component-banner';
+import Carousel from '@ecl/vanilla-component-carousel';
+import CategoryFilter from '@ecl/vanilla-component-category-filter';
+import Datepicker from '@ecl/vanilla-component-datepicker';
+import Breadcrumb from '@ecl/vanilla-component-breadcrumb';
+import ContentBlock from '@ecl/vanilla-component-content-block';
+import DescriptionList from '@ecl/vanilla-component-description-list';
+import Expandable from '@ecl/vanilla-component-expandable';
+import FileDownload from '@ecl/vanilla-component-file';
+import FileUpload from '@ecl/vanilla-component-file-upload';
+import Gallery from '@ecl/vanilla-component-gallery';
+import Indicator from '@ecl/vanilla-component-indicator';
+import InpageNavigation from '@ecl/vanilla-component-inpage-navigation';
+import MediaContainer from '@ecl/vanilla-component-media-container';
+import MegaMenu from '@ecl/vanilla-component-mega-menu';
+import Menu from '@ecl/vanilla-component-menu';
+import Modal from '@ecl/vanilla-component-modal';
+import NewsTicker from '@ecl/vanilla-component-news-ticker';
+import Notification from '@ecl/vanilla-component-notification';
+import Popover from '@ecl/vanilla-component-popover';
+import Range from '@ecl/vanilla-component-range';
+import Select from '@ecl/vanilla-component-select';
+import SiteHeader from '@ecl/vanilla-component-site-header';
+import Table from '@ecl/vanilla-component-table';
+import Tabs from '@ecl/vanilla-component-tabs';
+import Timeline from '@ecl/vanilla-component-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') {
+  // eslint-disable-next-line no-undef
+  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/src/eu-esm.js

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

src/tools/builder/package.json

@@ -33,6 +33,7 @@
     "@rollup/plugin-node-resolve": "15.3.0",
     "rollup-plugin-svg": "2.0.0",
     "@rollup/plugin-terser": "0.4.4",
+    "rollup-plugin-external-globals": "0.13.0",
     "sass": "1.81.0"
   },
   "engines": {

src/tools/builder/scripts/scripts.js

@@ -3,6 +3,7 @@ const rollup = require('rollup');
 const babel = require('@rollup/plugin-babel');
 const replace = require('@rollup/plugin-replace');
 const resolve = require('@rollup/plugin-node-resolve');
+const externalGlobals = require('rollup-plugin-external-globals');
 const commonjs = require('@rollup/plugin-commonjs');
 const terser = require('@rollup/plugin-terser');
 const svg = require('rollup-plugin-svg');
@@ -14,15 +15,17 @@ module.exports = (input, dest, options) => {
     options.uglify === true ||
     (options.uglify !== false && process.env.NODE_ENV === 'production');
 
+  const { external, banner, moduleName, sourceMap, format } = options;
+
   const terserOptions = {};
 
   if (options.banner) {
-    terserOptions.format = { preamble: `/* ${options.banner} */` };
+    terserOptions.format = { preamble: `/* ${banner} */` };
   }
 
   const inputOptions = {
     input,
-    external: options.external || [/@babel\/runtime/],
+    external: external || [],
     plugins: [
       replace({
         'getSystem()': JSON.stringify(getSystem()),
@@ -31,10 +34,8 @@ module.exports = (input, dest, options) => {
         __VERSION__: JSON.stringify(pkg.version),
       }),
       resolve(),
-      commonjs(),
       babel({
-        plugins: ['@babel/plugin-transform-runtime'],
-        babelHelpers: 'runtime',
+        babelHelpers: 'bundled',
         presets: [
           [
             babelPresetEnv,
@@ -46,30 +47,25 @@ module.exports = (input, dest, options) => {
         ],
       }),
       svg(),
-      minifyCode && terser(terserOptions), // Replace uglify with terser
-    ],
+      commonjs(),
+      minifyCode && terser(terserOptions),
+    ].filter(Boolean),
   };
 
   const outputOptions = {
     file: dest,
-    format: 'iife',
-    name: options.name || options.moduleName,
-    sourcemap: options.sourcemap || options.sourceMap,
+    format,
     exports: 'named',
-    globals: options.globals || {
-      // Mapping @babel/runtime helpers to global variable names
-      '@babel/runtime/helpers/objectWithoutPropertiesLoose':
-        '_objectWithoutPropertiesLoose',
-      '@babel/runtime/helpers/extends': '_extends',
-      '@babel/runtime/helpers/asyncToGenerator': '_asyncToGenerator',
-      '@babel/runtime/regenerator': '_regeneratorRuntime',
-      '@babel/runtime/helpers/classPrivateFieldLooseBase':
-        '_classPrivateFieldLooseBase',
-      '@babel/runtime/helpers/classPrivateFieldLooseKey':
-        '_classPrivateFieldLooseKey',
-    },
+    name: moduleName,
+    sourcemap: sourceMap,
+    globals: options.globals,
     footer: `ECL.version = "${pkg.version}";`,
   };
 
+  if (format === 'es') {
+    outputOptions.extend = true;
+    inputOptions.plugins.push(externalGlobals({ ECL: 'ECL' }));
+  }
+
   rollup.rollup(inputOptions).then((bundle) => bundle.write(outputOptions));
 };