Fixed version information when installed from npm

.eslintrc.production.yml

@@ -1,8 +1,14 @@
 overrides:
   - files:
     - '__tests__/**/*.js'
+    - '__tests__/**/*.mjs'
     - '*.spec.js'
+    - '*.spec.mjs'
     - '*.test.js'
+    - '*.test.mjs'
+
+    env:
+      jest: true
 
     rules:
       no-restricted-globals: off

CHANGELOG.md

@@ -240,6 +240,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Fixed long citation identifiers break activity layout, in PR [#5507](https://github.com/microsoft/BotFramework-WebChat/pull/5507), by [@OEvgeny](https://github.com/OEvgeny)
 - Updated file-based import with `.js` extension and removed the file extension from build config, by [@compulim](https://github.com/compulim), in PR [#5516](https://github.com/microsoft/BotFramework-WebChat/pull/5516)
 - Fixed [#5518](https://github.com/microsoft/BotFramework-WebChat/issues/5518). Minimal bundled build should work properly, in PR [#5507](https://github.com/microsoft/BotFramework-WebChat/pull/5507), by [@compulim](https://github.com/compulim)
+- Fixed [#5520](https://github.com/microsoft/BotFramework-WebChat/issues/5520). Version information should be injected when installed via npm, in PR [#5521](https://github.com/microsoft/BotFramework-WebChat/pull/5521), by [@compulim](https://github.com/compulim)
 
 # Removed
 

__tests__/html/fluentTheme/simple.html

@@ -48,7 +48,7 @@
         );
 
         expect(buildInfo).toHaveProperty('build-tool', 'tsup');
-        expect(buildInfo).toHaveProperty('module-format', 'esmodules');
+        expect(buildInfo).toHaveProperty('module-format', 'global');
         expect(buildInfo.version).toMatch(/^\d+\.\d+\.\d+($|-)/u);
 
         expect(window.WebChat.FluentThemeProvider).toBeTruthy();

__tests__/html2/basic/bundle/es5.html

@@ -47,6 +47,13 @@
         expect(metaMap.has('botframework-webchat:core:version')).toBe(true);
         expect(metaMap.has('botframework-webchat:core')).toBe(true);
         expect(metaMap.has('botframework-webchat:ui:version')).toBe(true);
+
+        expect(
+          metaMap
+            .get('botframework-webchat:bundle')
+            .split(';')
+            .map(value => value.trim())
+        ).toEqual(expect.arrayContaining(['variant=full-es5', 'build-tool=tsup', 'module-format=global']));
       });
     </script>
   </body>

__tests__/html2/basic/bundle/full.html

@@ -47,6 +47,13 @@
         expect(metaMap.has('botframework-webchat:core:version')).toBe(true);
         expect(metaMap.has('botframework-webchat:core')).toBe(true);
         expect(metaMap.has('botframework-webchat:ui:version')).toBe(true);
+
+        expect(
+          metaMap
+            .get('botframework-webchat:bundle')
+            .split(';')
+            .map(value => value.trim())
+        ).toEqual(expect.arrayContaining(['variant=full', 'build-tool=tsup', 'module-format=global']));
       });
     </script>
   </body>

__tests__/html2/basic/bundle/minimal.html

@@ -47,6 +47,13 @@
         expect(metaMap.has('botframework-webchat:core:version')).toBe(true);
         expect(metaMap.has('botframework-webchat:core')).toBe(true);
         expect(metaMap.has('botframework-webchat:ui:version')).toBe(true);
+
+        expect(
+          metaMap
+            .get('botframework-webchat:bundle')
+            .split(';')
+            .map(value => value.trim())
+        ).toEqual(expect.arrayContaining(['variant=minimal', 'build-tool=tsup', 'module-format=global']));
       });
     </script>
   </body>

__tests__/html2/preact/fluentTheme/simple.html

@@ -54,7 +54,7 @@
         );
 
         expect(buildInfo).toHaveProperty('build-tool', 'tsup');
-        expect(buildInfo).toHaveProperty('module-format', 'esmodules');
+        expect(buildInfo).toHaveProperty('module-format', 'global');
         expect(buildInfo.version).toMatch(/^\d+\.\d+\.\d+($|-)/u);
 
         expect(window.WebChat.FluentThemeProvider).toBeTruthy();

jest.legacy.config.js

@@ -47,7 +47,7 @@ module.exports = {
     npm_package_version: '0.0.0-0.jest'
   },
   moduleDirectories: ['node_modules', 'packages'],
-  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  moduleFileExtensions: ['js', 'jsx', 'mjs', 'ts', 'tsx'],
   rootDir: './',
   setupFilesAfterEnv: [
     '<rootDir>/__tests__/setup/setupDotEnv.js',
@@ -76,14 +76,14 @@ module.exports = {
   ],
   transform: {
     '[\\/]__tests__[\\/]html[\\/]': '<rootDir>/babel-passthru-transformer.js',
-    '\\.[jt]sx?$': '<rootDir>/babel-jest-config.js'
+    '\\.m?[jt]sx?$': '<rootDir>/babel-jest-config.js'
   },
   transformIgnorePatterns: [
     // jest-environment-jsdom import packages as browser.
     // Packages, such as "uuid", export itself for browser as ES5 + ESM.
     // Since jest@28 cannot consume ESM yet, we need to transpile these packages.
     `/node_modules/(?!(${TRANSFORM_IGNORE_PACKAGES.join('|')})/)`,
-    '/packages/(?:test/)?\\w+/(?:lib/|dist/|\\w+\\.js)',
+    '/packages/(?:test/)?\\w+/(?:lib/|dist/.+?\\.js$|\\w+\\.js)',
     ...defaults.transformIgnorePatterns.filter(pattern => pattern !== '/node_modules/')
   ]
 };

packages/api/src/__tests__/addMetaTag.spec.js

@@ -0,0 +1,8 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+test('CommonJS should export matching buildInfo', () => {
+  const { buildInfo } = jest.requireActual('../../dist/botframework-webchat-api.js');
+
+  expect(buildInfo).toHaveProperty('buildTool', 'tsup');
+  expect(buildInfo).toHaveProperty('moduleFormat', 'commonjs');
+});

packages/api/src/__tests__/addMetaTag.spec.mjs

@@ -0,0 +1,8 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+test('ESModules should export matching buildInfo', () => {
+  const { buildInfo } = jest.requireActual('../../dist/botframework-webchat-api.mjs');
+
+  expect(buildInfo).toHaveProperty('buildTool', 'tsup');
+  expect(buildInfo).toHaveProperty('moduleFormat', 'esmodules');
+});

packages/api/tsup.config.ts

@@ -13,11 +13,13 @@ const config: typeof baseConfig = {
 export default defineConfig([
   {
     ...config,
+    env: { ...config.env, module_format: 'esmodules' },
     format: 'esm',
     noExternal: ['globalize']
   },
   {
     ...config,
+    env: { ...config.env, module_format: 'commonjs' },
     format: 'cjs',
     target: [...config.target, 'es2019']
   }

packages/base/tsup.config.ts

@@ -12,10 +12,12 @@ const config: typeof baseConfig = {
 export default defineConfig([
   {
     ...config,
+    env: { ...config.env, module_format: 'esmodules' },
     format: 'esm'
   },
   {
     ...config,
+    env: { ...config.env, module_format: 'commonjs' },
     format: 'cjs',
     target: [...config.target, 'es2019']
   }

packages/bundle/src/__tests__/addMetaTag/full-es5.spec.js

@@ -0,0 +1,32 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+describe('importing full (ES5) bundle', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {
+      // Intentionally left blank.
+    });
+
+    // "adaptivecards" is trying to load "swiper", which is ESM only, mocking it
+    jest.mock('swiper', () => ({}));
+    jest.requireActual('../../../dist/botframework-webchat.es5.js');
+  });
+
+  test('should have injected <meta> tag', () => {
+    const metaMap = new Map(
+      Array.from(document.querySelectorAll('meta'))
+        .filter(({ name }) => name.startsWith('botframework-webchat'))
+        .map(({ content, name }) => [name, content])
+    );
+
+    expect(metaMap.has('botframework-webchat:bundle')).toBe(true);
+
+    expect(
+      metaMap
+        .get('botframework-webchat:bundle')
+        .split(';')
+        .map(value => value.trim())
+    ).toEqual(expect.arrayContaining(['build-tool=tsup', 'module-format=commonjs']));
+
+    expect(metaMap.get('botframework-webchat:bundle:variant')).toBe('full-es5');
+  });
+});

packages/bundle/src/__tests__/addMetaTag/full-es5.spec.mjs

@@ -0,0 +1,32 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+describe('importing full (ES5) bundle', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {
+      // Intentionally left blank.
+    });
+
+    // "adaptivecards" is trying to load "swiper", which is ESM only, mocking it
+    jest.mock('swiper', () => ({}));
+    jest.requireActual('../../../dist/botframework-webchat.es5.mjs');
+  });
+
+  test('should have injected <meta> tag', () => {
+    const metaMap = new Map(
+      Array.from(document.querySelectorAll('meta'))
+        .filter(({ name }) => name.startsWith('botframework-webchat'))
+        .map(({ content, name }) => [name, content])
+    );
+
+    expect(metaMap.has('botframework-webchat:bundle')).toBe(true);
+
+    expect(
+      metaMap
+        .get('botframework-webchat:bundle')
+        .split(';')
+        .map(value => value.trim())
+    ).toEqual(expect.arrayContaining(['build-tool=tsup', 'module-format=esmodules']));
+
+    expect(metaMap.get('botframework-webchat:bundle:variant')).toBe('full-es5');
+  });
+});

packages/bundle/src/__tests__/addMetaTag/full.spec.js

@@ -0,0 +1,32 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+describe('importing full bundle', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {
+      // Intentionally left blank.
+    });
+
+    // "adaptivecards" is trying to load "swiper", which is ESM only, mocking it
+    jest.mock('swiper', () => ({}));
+    jest.requireActual('../../../dist/botframework-webchat.js');
+  });
+
+  test('should have injected <meta> tag', () => {
+    const metaMap = new Map(
+      Array.from(document.querySelectorAll('meta'))
+        .filter(({ name }) => name.startsWith('botframework-webchat'))
+        .map(({ content, name }) => [name, content])
+    );
+
+    expect(metaMap.has('botframework-webchat:bundle')).toBe(true);
+
+    expect(
+      metaMap
+        .get('botframework-webchat:bundle')
+        .split(';')
+        .map(value => value.trim())
+    ).toEqual(expect.arrayContaining(['build-tool=tsup', 'module-format=commonjs']));
+
+    expect(metaMap.get('botframework-webchat:bundle:variant')).toBe('full');
+  });
+});

packages/bundle/src/__tests__/addMetaTag/full.spec.mjs

@@ -0,0 +1,32 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+describe('importing full bundle', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {
+      // Intentionally left blank.
+    });
+
+    // "adaptivecards" is trying to load "swiper", which is ESM only, mocking it
+    jest.mock('swiper', () => ({}));
+    jest.requireActual('../../../dist/botframework-webchat.mjs');
+  });
+
+  test('should have injected <meta> tag', () => {
+    const metaMap = new Map(
+      Array.from(document.querySelectorAll('meta'))
+        .filter(({ name }) => name.startsWith('botframework-webchat'))
+        .map(({ content, name }) => [name, content])
+    );
+
+    expect(metaMap.has('botframework-webchat:bundle')).toBe(true);
+
+    expect(
+      metaMap
+        .get('botframework-webchat:bundle')
+        .split(';')
+        .map(value => value.trim())
+    ).toEqual(expect.arrayContaining(['build-tool=tsup', 'module-format=esmodules']));
+
+    expect(metaMap.get('botframework-webchat:bundle:variant')).toBe('full');
+  });
+});

packages/bundle/src/__tests__/addMetaTag/minimal.spec.js

@@ -0,0 +1,26 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+describe('importing minimal bundle', () => {
+  beforeEach(() => {
+    jest.requireActual('../../../dist/botframework-webchat.minimal.js');
+  });
+
+  test('should have injected <meta> tag', () => {
+    const metaMap = new Map(
+      Array.from(document.querySelectorAll('meta'))
+        .filter(({ name }) => name.startsWith('botframework-webchat'))
+        .map(({ content, name }) => [name, content])
+    );
+
+    expect(metaMap.has('botframework-webchat:bundle')).toBe(true);
+
+    expect(
+      metaMap
+        .get('botframework-webchat:bundle')
+        .split(';')
+        .map(value => value.trim())
+    ).toEqual(expect.arrayContaining(['build-tool=tsup', 'module-format=commonjs']));
+
+    expect(metaMap.get('botframework-webchat:bundle:variant')).toBe('minimal');
+  });
+});

packages/bundle/src/__tests__/addMetaTag/minimal.spec.mjs

@@ -0,0 +1,26 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+describe('importing minimal bundle', () => {
+  beforeEach(() => {
+    jest.requireActual('../../../dist/botframework-webchat.minimal.mjs');
+  });
+
+  test('should have injected <meta> tag', () => {
+    const metaMap = new Map(
+      Array.from(document.querySelectorAll('meta'))
+        .filter(({ name }) => name.startsWith('botframework-webchat'))
+        .map(({ content, name }) => [name, content])
+    );
+
+    expect(metaMap.has('botframework-webchat:bundle')).toBe(true);
+
+    expect(
+      metaMap
+        .get('botframework-webchat:bundle')
+        .split(';')
+        .map(value => value.trim())
+    ).toEqual(expect.arrayContaining(['build-tool=tsup', 'module-format=esmodules']));
+
+    expect(metaMap.get('botframework-webchat:bundle:variant')).toBe('minimal');
+  });
+});