feat(esm): remove esm directory in package build

Because we copy all content from /esm to one level back, it contains almost only duplications. This redundancy we remove with this merge.

packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/module-formats.md

@@ -22,11 +22,11 @@ The `@dnb/eufemia` uses **ESM** as the default module format. This allows us to
 ```js
 // Imports only the code needed for the button
 import { Button } from '@dnb/eufemia'
-import { Button } from '@dnb/eufemia/esm'
+import { Button } from '@dnb/eufemia/es'
 
-// Imports only the code needed for the icon
+// Imports only the code needed for icons
 import { question } from '@dnb/eufemia/icons'
-import { question } from '@dnb/eufemia/esm/icons'
+import { question } from '@dnb/eufemia/es/icons'
 ```
 
 ## CommonJS (CJS)

packages/dnb-eufemia/package.json

@@ -31,18 +31,18 @@
     "prebuild:figma:ci": "yarn figma",
     "postbuild:figma:ci": "yarn test:update && yarn test:screenshots:update && babel-node ./scripts/figma/tasks/commitChanges",
     "build:pack": "yarn build && yarn publish:prepare && cd ./build && yarn pack",
+    "build:packages": "./scripts/postbuild/build-packages.sh",
     "build:prebuild": "babel-node ./scripts/prebuild/runPrepub.js",
     "build:resources": "babel-node ./scripts/prebuild/resources/makeResourcesPackage.js",
     "build:types": "./scripts/prebuild/generate-types.sh",
     "build:types:definitions": "yarn tsc --project tsconfig.definitions.json",
     "build:types:dev": "nodemon --exec 'babel-node ./scripts/prebuild/generateTypes.js' --ext js --watch './src/**/*' --watch './scripts/**/*'",
     "build:types:esm": "yarn tsc --project tsconfig.definitions.json --declarationDir ./build/esm --rootDir src",
-    "build:umd": "./scripts/postbuild/babel-umd.sh",
     "precommit": "yarn lint-staged",
     "dev:icons": "nodemon --exec 'babel-node ./scripts/tools/convertIcons' --ignore '/icons/**' --ignore '*.json'",
+    "dev:packages": "nodemon --exec 'yarn build:packages && yarn build:copy' --ext js,html,json,css,scss --watch './src/**/*' --ignore './umd/*'",
     "dev:resources": "nodemon --exec 'babel-node ./scripts/prebuild/resources/makeResourcesPackage.js' --ext js,html,json,css,scss --watch './build/style/**/*' --watch './scripts/**/*' --ignore '*.json'",
     "dev:tasks": "nodemon --exec 'babel-node ./scripts/prebuild/dev.js' --watch 'rollup.config.js' --ext js,html,json,css,scss --watch './src/components/**/*' --watch './src/style/**/*' --watch './scripts/**/*' --ignore '*.json'",
-    "dev:umd": "nodemon --exec 'yarn build:umd && yarn build:copy' --ext js,html,json,css,scss --watch './src/**/*' --ignore './umd/*'",
     "figma": "babel-node ./scripts/figma/updateAll",
     "figma:dev:commit": "nodemon --exec 'babel-node ./scripts/figma/tasks/commitChanges'",
     "figma:dev:icons": "nodemon --exec 'babel-node ./scripts/figma/updateIcons' --ignore '*.svg' --ignore '*.json'",

packages/dnb-eufemia/rollup.config.js

@@ -40,6 +40,14 @@ export default !/^(release|beta|alpha)$/.test(currentBranch)
           excludes,
         }
       ),
+      makeRollupConfig(
+        './src/esm/dnb-ui-lib.js',
+        'build/esm/dnb-ui-lib.min.mjs',
+        {
+          format: 'esm',
+          excludes,
+        }
+      ),
     ]
   : [
       makeRollupConfig(

packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js

@@ -8,23 +8,30 @@ import fs from 'fs-extra'
 import path from 'path'
 import packpath from 'packpath'
 
-const buildStages = ['es', 'esm', 'cjs']
+const makeStagePathException = (stage) => (stage === '/esm' ? '' : stage)
 
 describe('type definitions', () => {
+  const buildStages = ['/es', '/esm', '/cjs']
+
   it.each(buildStages)('has d.ts index file on stage %s', (stage) => {
-    const file = path.resolve(packpath.self(), `build/${stage}/index.d.ts`)
+    stage = makeStagePathException(stage)
+
+    const file = path.resolve(packpath.self(), `build${stage}/index.d.ts`)
     const exists = fs.existsSync(file)
+
     expect(exists).toBe(true)
   })
 
   it.each(buildStages)(
     'has correct Input type definitions on stage %s',
     (stage) => {
+      stage = makeStagePathException(stage)
+
       expect(
         fs.existsSync(
           path.resolve(
             packpath.self(),
-            `build/${stage}/components/Input.d.ts`
+            `build${stage}/components/Input.d.ts`
           )
         )
       ).toBe(true)
@@ -34,22 +41,22 @@ describe('type definitions', () => {
         fs.readFileSync(
           path.resolve(
             packpath.self(),
-            `build/${stage}/components/input/Input.d.ts`
+            `build${stage}/components/input/Input.d.ts`
           ),
           'utf-8'
         )
       ).toMatch(/export interface/g)
 
       // Test the output of js files
-      const dtsInput = path.resolve(
+      const file = path.resolve(
         packpath.self(),
-        `build/${stage}/components/input/Input.d.ts`
+        `build${stage}/components/input/Input.d.ts`
       )
 
-      expect(fs.existsSync(dtsInput)).toBe(true)
+      expect(fs.existsSync(file)).toBe(true)
 
-      const contentInput = fs.readFileSync(dtsInput, 'utf-8')
-      expect(contentInput).toContain(
+      const content = fs.readFileSync(file, 'utf-8')
+      expect(content).toContain(
         'export interface InputProps extends React.HTMLProps<HTMLElement>'
       )
     }
@@ -58,41 +65,37 @@ describe('type definitions', () => {
   it.each(buildStages)(
     'has correct Breadcrumb type definitions on stage %s',
     (stage) => {
+      stage = makeStagePathException(stage)
+
       // Test the output of tsx files
-      const tsxBreadcrumb = path.resolve(
+      const tsxFile = path.resolve(
         packpath.self(),
-        `build/${stage}/components/breadcrumb/Breadcrumb.tsx`
+        `build${stage}/components/breadcrumb/Breadcrumb.tsx`
       )
-      const dtsBreadcrumb = path.resolve(
+      const dtsFile = path.resolve(
         packpath.self(),
-        `build/${stage}/components/breadcrumb/Breadcrumb.d.ts`
+        `build${stage}/components/breadcrumb/Breadcrumb.d.ts`
       )
 
-      expect(fs.existsSync(tsxBreadcrumb)).toBe(false)
-      expect(fs.existsSync(dtsBreadcrumb)).toBe(true)
+      expect(fs.existsSync(tsxFile)).toBe(false)
+      expect(fs.existsSync(dtsFile)).toBe(true)
 
-      const contentBreadcrumb = fs.readFileSync(dtsBreadcrumb, 'utf-8')
-      expect(contentBreadcrumb).toContain(
-        'export interface BreadcrumbProps'
-      )
+      const content = fs.readFileSync(dtsFile, 'utf-8')
+      expect(content).toContain('export interface BreadcrumbProps')
     }
   )
 })
 
 describe('babel build', () => {
-  it.each(buildStages)('has correctly compiled on stage "%s"', (stage) => {
-    expect(
-      fs.existsSync(
-        path.resolve(packpath.self(), `build/${stage}/components/Input.js`)
-      )
-    ).toBe(true)
+  const buildStages = ['/es', '/esm', '/cjs']
 
+  it.each(buildStages)('has correctly compiled on stage "%s"', (stage) => {
     switch (stage) {
-      case 'cjs':
+      case '/cjs':
         {
           {
             const content = fs.readFileSync(
-              path.resolve(packpath.self(), `build/${stage}/index.js`),
+              path.resolve(packpath.self(), `build${stage}/index.js`),
               'utf-8'
             )
             expect(content).toContain(
@@ -103,15 +106,12 @@ describe('babel build', () => {
             // Has extra cjs package
             expect(
               fs.existsSync(
-                path.resolve(
-                  packpath.self(),
-                  `build/${stage}/package.json`
-                )
+                path.resolve(packpath.self(), `build${stage}/package.json`)
               )
             ).toBe(true)
 
             const packageJson = fs.readJsonSync(
-              path.resolve(packpath.self(), `build/${stage}/package.json`)
+              path.resolve(packpath.self(), `build${stage}/package.json`)
             )
 
             expect(packageJson.type).toBe('commonjs')
@@ -121,7 +121,7 @@ describe('babel build', () => {
             const content = fs.readFileSync(
               path.resolve(
                 packpath.self(),
-                `build/${stage}/components/input/Input.js`
+                `build${stage}/components/input/Input.js`
               ),
               'utf-8'
             )
@@ -133,7 +133,7 @@ describe('babel build', () => {
             const content = fs.readFileSync(
               path.resolve(
                 packpath.self(),
-                `build/${stage}/components/breadcrumb/Breadcrumb.js`
+                `build${stage}/components/breadcrumb/Breadcrumb.js`
               ),
               'utf-8'
             )
@@ -143,11 +143,13 @@ describe('babel build', () => {
         }
         break
 
-      case 'esm':
+      case '/esm':
         {
+          stage = makeStagePathException(stage)
+
           {
             const content = fs.readFileSync(
-              path.resolve(packpath.self(), `build/${stage}/index.js`),
+              path.resolve(packpath.self(), `build${stage}/index.js`),
               'utf-8'
             )
             expect(content).toContain('export default {};')
@@ -157,7 +159,7 @@ describe('babel build', () => {
             const content = fs.readFileSync(
               path.resolve(
                 packpath.self(),
-                `build/${stage}/components/input/Input.js`
+                `build${stage}/components/input/Input.js`
               ),
               'utf-8'
             )
@@ -172,7 +174,7 @@ describe('babel build', () => {
             const content = fs.readFileSync(
               path.resolve(
                 packpath.self(),
-                `build/${stage}/components/breadcrumb/Breadcrumb.js`
+                `build${stage}/components/breadcrumb/Breadcrumb.js`
               ),
               'utf-8'
             )
@@ -185,11 +187,11 @@ describe('babel build', () => {
         }
         break
 
-      case 'es':
+      case '/es':
         {
           {
             const content = fs.readFileSync(
-              path.resolve(packpath.self(), `build/${stage}/index.js`),
+              path.resolve(packpath.self(), `build${stage}/index.js`),
               'utf-8'
             )
             expect(content).toContain('export default {};')
@@ -199,7 +201,7 @@ describe('babel build', () => {
             const content = fs.readFileSync(
               path.resolve(
                 packpath.self(),
-                `build/${stage}/components/input/Input.js`
+                `build${stage}/components/input/Input.js`
               ),
               'utf-8'
             )
@@ -214,7 +216,7 @@ describe('babel build', () => {
             const content = fs.readFileSync(
               path.resolve(
                 packpath.self(),
-                `build/${stage}/components/breadcrumb/Breadcrumb.js`
+                `build${stage}/components/breadcrumb/Breadcrumb.js`
               ),
               'utf-8'
             )
@@ -227,5 +229,55 @@ describe('babel build', () => {
         }
         break
     }
+
+    stage = makeStagePathException(stage)
+
+    expect(
+      fs.existsSync(
+        path.resolve(packpath.self(), `build${stage}/components/Input.js`)
+      )
+    ).toBe(true)
+  })
+})
+
+describe('rollup build', () => {
+  const buildStages = ['/esm', '/umd']
+
+  it.each(buildStages)('has created a package on stage "%s"', (stage) => {
+    switch (stage) {
+      case '/esm':
+        {
+          {
+            const content = fs.readFileSync(
+              path.resolve(
+                packpath.self(),
+                `build${stage}/dnb-ui-lib.min.mjs`
+              ),
+              'utf-8'
+            )
+            expect(content).toContain(`import*as `)
+            expect(content).toContain(` from"react-dom";`)
+            expect(content).toContain(` from"../icons/primary_icons.js";`)
+          }
+        }
+        break
+
+      case '/umd':
+        {
+          {
+            const content = fs.readFileSync(
+              path.resolve(
+                packpath.self(),
+                `build${stage}/dnb-ui-lib.min.js`
+              ),
+              'utf-8'
+            )
+            expect(content).toContain(
+              'require("react"),require("react-dom")'
+            )
+          }
+        }
+        break
+    }
   })
 })

packages/dnb-eufemia/scripts/postbuild/babel-umd.sh → packages/dnb-eufemia/scripts/postbuild/build-packages.sh

@@ -2,11 +2,11 @@
 
 set -e # Exit immediately if a command exits with a non-zero status.
 
-echo 'Building umd bundles ...'
+echo 'Building umd and esm (mjs) bundles ...'
 
 cross-env \
 NODE_ENV=production \
 BABEL_ENV=umd \
 rollup -c ./rollup.config.js
 
-echo 'Building umd bundles done!'
+echo 'Building umd and esm (mjs) bundles done!'

packages/dnb-eufemia/scripts/postbuild/postbuild.sh

@@ -5,13 +5,14 @@ set -e # Exit immediately if a command exits with a non-zero status.
 echo 'Postbuild started ...'
 
 yarn build:types
+yarn prettier:other
 yarn build:cjs
 yarn build:es
 yarn build:esm
-yarn build:umd
-echo 'Can be enabled in future if needed -> yarn build:resources'
+# yarn build:resources # Can be enabled in future if needed
 yarn build:copy
-yarn prettier:other
+rm -rf build/esm
+yarn build:packages
 
 echo 'Testing the postbuild ...'