feat: DevTools correctly ommitted at production (#3148)

 - `InContextTools` and `ContextUi` now need to be imported from `@tolgee/web/tools`

e2e/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2017",
     "lib": ["es5", "dom", "es2020"],
     "types": ["cypress", "cypress-xpath/src"],
     "checkJs": false,

packages/core/package.json

@@ -61,5 +61,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "sideEffects": false
 }

packages/format-icu/package.json

@@ -62,5 +62,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "sideEffects": false
 }

packages/i18next/src/__integration/withTolgee.test.ts

@@ -3,7 +3,7 @@ jest.autoMockOff();
 import '@testing-library/jest-dom';
 import { mockCoreFetch } from '@tolgee/testing/fetchMock';
 import i18n from 'i18next';
-import { DevTools, Tolgee } from '@tolgee/web';
+import { Tolgee, DevTools } from '@tolgee/web';
 import { withTolgee, I18nextPlugin } from '..';
 
 const API_URL = 'http://localhost';

packages/i18next/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2017",
     "moduleResolution": "node",
     "module": "esnext",
     "sourceMap": true,

packages/ngx/projects/ngx-tolgee/tsconfig.lib.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "declarationMap": true,
-    "target": "es2015",
+    "target": "es2017",
     "declaration": true,
     "inlineSources": true,
     "types": [],

packages/ngx/tsconfig.json

@@ -10,7 +10,7 @@
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2017",
     "typeRoots": [
       "node_modules/@types"
     ],

packages/react/package.json

@@ -74,5 +74,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "sideEffects": false
 }

packages/react/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2017",
     "module": "esnext",
     "declaration": true,
     "outDir": "./lib",

packages/svelte/package.json

@@ -52,5 +52,6 @@
   "publishConfig": {
     "directory": "./package",
     "access": "public"
-  }
+  },
+  "sideEffects": false
 }

packages/vue/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2017",
     "module": "esnext",
     "rootDir": "src",
     "sourceMap": true,

packages/web/package.json

@@ -2,11 +2,35 @@
   "name": "@tolgee/web",
   "version": "5.0.1",
   "description": "Tolgee for web",
-  "main": "./dist/tolgee-web.main.cjs.js",
-  "module": "./dist/tolgee-web.main.esm.js",
-  "types": "./types/index.d.ts",
-  "svelte": "./dist/tolgee-web.main.esm.js",
   "declaration": true,
+  "main": "./dist/tolgee-web.universal.cjs.js",
+  "module": "./dist/tolgee-web.universal.esm.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "production": {
+        "require": "./dist/tolgee-web.production.cjs.js",
+        "import": "./dist/tolgee-web.production.esm.js",
+        "svelte": "./dist/tolgee-web.production.esm.js"
+      },
+      "development": {
+        "require": "./dist/tolgee-web.development.cjs.js",
+        "import": "./dist/tolgee-web.development.esm.js",
+        "svelte": "./dist/tolgee-web.development.esm.js"
+      },
+      "require": "./dist/tolgee-web.universal.cjs.js",
+      "import": "./dist/tolgee-web.universal.esm.js",
+      "svelte": "./dist/tolgee-web.universal.esm.js",
+      "types": "./types/index.d.ts"
+    },
+    "./tools": {
+      "require": "./dist/tolgee-in-context-tools.cjs.js",
+      "import": "./dist/tolgee-in-context-tools.esm.js",
+      "svelte": "./dist/tolgee-in-context-tools.esm.js",
+      "types": "./types/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "directories": {
     "lib": "lib",
     "test": "test"
@@ -15,7 +39,7 @@
     "build": "rollup -c rollup.config.js && tsc --project tsconfig.prod.json",
     "clean": "rm -rf build build-e2e dist dist-e2e lib",
     "test": "jest --config ./jest.config.js --collect-coverage",
-    "develop": "concurrently \"rollup -c rollup.dev.js -w\" \"tsc --watch --preserveWatchOutput --project tsconfig.prod.json\" ",
+    "develop": "concurrently \"rollup -c rollup.config.js -w\" \"tsc --watch --preserveWatchOutput --project tsconfig.prod.json\" ",
     "schema": "openapi-typescript http://localhost:8202/v3/api-docs/Accessible%20with%20API%20key --output ./src/ui/client/apiSchema.generated.ts"
   },
   "author": "Tolgee",
@@ -25,6 +49,7 @@
     "lib/**/*",
     "dist/**/*",
     "src/**/*",
+    "tools/**/*",
     "index.js"
   ],
   "dependencies": {
@@ -71,10 +96,6 @@
     "type": "git",
     "url": "git+https://github.com/tolgee/tolgee-js.git"
   },
-  "exports": {
-    "require": "./dist/tolgee-web.main.cjs.js",
-    "import": "./dist/tolgee-web.main.esm.js"
-  },
   "keywords": [
     "localization",
     "languages",
@@ -89,5 +110,6 @@
   "gitHead": "d4f5dccf1f3b0017942d862f7be7e9efe093ef08",
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "sideEffects": false
 }

packages/web/rollup.common.js

@@ -8,10 +8,12 @@ import { visualizer } from 'rollup-plugin-visualizer';
 import replace from '@rollup/plugin-replace';
 
 export const commonConfig = {
-  input: 'src/index.ts',
   watch: {
     clearScreen: false,
   },
+  treeshake: {
+    moduleSideEffects: false,
+  },
 };
 
 export const commonPlugins = [
@@ -36,91 +38,45 @@ export const commonPlugins = [
     ),
     preventAssignment: true,
   }),
-];
-
-const replaceEnv = (value, modulesOnly) =>
   replace({
-    'process.env.NODE_ENV': JSON.stringify(value),
-    include: modulesOnly
-      ? ['node_modules/**', '../../node_modules/**']
-      : undefined,
+    'process.env.NODE_ENV': JSON.stringify('production'),
+    include: ['node_modules/**', '../../node_modules/**'],
     preventAssignment: true,
-  });
+  }),
+];
 
-const buildMin = ({ input, name, plugins = [], umdName, esmExt = 'mjs' }) => ({
-  ...commonConfig,
-  input,
-  output: [
-    {
-      file: `dist/tolgee-${name}.cjs.min.js`,
-      format: 'cjs',
-      sourcemap: true,
-    },
+/**
+ *
+ * @param {string} name
+ * @param {string} format
+ * @param {string} ext
+ */
+const packageOutput = (name, format, ext) => {
+  return [
     {
-      file: `dist/tolgee-${name}.esm.min.${esmExt}`,
-      format: 'esm',
+      name: `@tolgee/${name}`,
+      file: `dist/tolgee-${name}.${format}.${ext}`,
+      format,
       sourcemap: true,
     },
     {
-      name: `@tolgee/${umdName || name}`,
-      file: `dist/tolgee-${name}.umd.min.js`,
-      format: 'umd',
+      name: `@tolgee/${name}`,
+      file: `dist/tolgee-${name}.${format}.min.${ext}`,
+      format,
       sourcemap: true,
+      plugins: [terser()],
     },
-  ],
-  plugins: [...plugins, terser(), ...commonPlugins],
-});
+  ];
+};
 
-const buildDev = ({ input, name, plugins = [], umdName, esmExt = 'mjs' }) => ({
+export const buildPackage = ({ input, name }) => ({
   ...commonConfig,
   input,
   output: [
-    {
-      file: `dist/tolgee-${name}.cjs.js`,
-      format: 'cjs',
-      sourcemap: true,
-    },
-    {
-      file: `dist/tolgee-${name}.esm.${esmExt}`,
-      format: 'esm',
-      sourcemap: true,
-    },
-    {
-      name: `@tolgee/${umdName || name}`,
-      file: `dist/tolgee-${name}.umd.js`,
-      format: 'umd',
-      sourcemap: true,
-    },
+    ...packageOutput(name, 'cjs', 'js'),
+    ...packageOutput(name, 'esm', 'js'),
+    ...packageOutput(name, 'esm', 'mjs'),
+    ...packageOutput(name, 'umd', 'js'),
   ],
-  plugins: [...plugins, ...commonPlugins],
+  plugins: commonPlugins,
 });
-/**
- * Template for rollup configuration for production minified build
- * @param {string} input Input file name
- * @param {string} name Name of the package
- */
-export const buildVanilla = (input, name) => [
-  buildDev({
-    input,
-    name,
-    plugins: [replaceEnv('production', true), replaceEnv('development')],
-  }),
-  buildMin({ input, name, plugins: [replaceEnv('production')] }),
-];
-
-export const buildMain = () => [
-  buildDev({
-    input: 'src/index.ts',
-    name: 'web.main',
-    plugins: [replaceEnv('production', true)],
-    umdName: 'web',
-    esmExt: 'js',
-  }),
-  buildMin({
-    input: 'src/index.ts',
-    name: 'web.main',
-    plugins: [replaceEnv('production', true)],
-    umdName: 'web',
-    esmExt: 'js',
-  }),
-];

packages/web/rollup.config.js

@@ -1,16 +1,22 @@
-import { buildMain, buildVanilla } from './rollup.common';
+import { buildPackage } from './rollup.common';
 
 export default [
-  ...buildMain(),
-  // separately built modules intended for vanilla usage
-  ...buildVanilla('src/index.ts', 'web'),
-  ...buildVanilla('src/InContextTools.ts', 'in-context-tools'),
-  ...buildVanilla('src/ObserverPlugin.ts', 'observer-plugin'),
-  ...buildVanilla('src/Tolgee.ts', 'tolgee'),
-  ...buildVanilla('src/LanguageStorage.ts', 'language-storage'),
-  ...buildVanilla('src/LanguageDetector.ts', 'language-detector'),
-  ...buildVanilla('src/BackendFetch.ts', 'backend-fetch'),
-  ...buildVanilla('src/BackendFetch.ts', 'backend-fetch'),
-  ...buildVanilla('src/LanguageDetector.ts', 'language-detector'),
-  ...buildVanilla('src/LanguageStorage.ts', 'language-storage'),
+  buildPackage({
+    input: 'src/entry-development.ts',
+    name: 'web.development',
+  }),
+  buildPackage({
+    input: 'src/entry-production.ts',
+    name: 'web.production',
+  }),
+  buildPackage({
+    input: 'src/entry-universal.ts',
+    name: 'web.universal',
+  }),
+
+  // in-context tools
+  buildPackage({
+    input: 'src/entry-tools.ts',
+    name: 'in-context-tools',
+  }),
 ];

packages/web/src/__test__/browser.extension.test.ts

@@ -62,7 +62,9 @@ describe('compatibility with browser extension', () => {
     const fileContent = await fs.readFile(
       path.join(__dirname, `../../dist/${IN_CONTEXT_FILE}`)
     );
-    expect(fileContent.toString().includes(IN_CONTEXT_UMD_NAME)).toBeTruthy();
+    expect(
+      fileContent.toString().includes(`"${IN_CONTEXT_UMD_NAME}"`)
+    ).toBeTruthy();
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const module = await import(`../../dist/${IN_CONTEXT_FILE}`);
     expect(typeof module[IN_CONTEXT_EXPORT_NAME]).toEqual('function');

packages/web/src/entry-development.ts

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+export * from './entry-production';
+import { InContextTools } from './InContextTools';
+
+export const DevTools = InContextTools;

packages/web/src/index.ts → packages/web/src/entry-production.ts

@@ -1,6 +1,6 @@
-export * from './ContextUi';
-export * from './DevTools';
-export * from './InContextTools';
+import { TolgeeInstance } from '@tolgee/core';
+
+export const DevTools = () => (tolgee: TolgeeInstance) => tolgee;
 export * from './typedIndex';
 export {
   PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY,

packages/web/src/entry-tools.ts

@@ -0,0 +1,2 @@
+export { InContextTools } from './InContextTools';
+export { ContextUi } from './ContextUi';

packages/web/src/entry-universal.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+export * from './entry-production';
+import { TolgeeInstance } from '@tolgee/core';
+
+export const DevTools =
+  process.env.NODE_ENV === 'production'
+    ? () => (tolgee: TolgeeInstance) => tolgee
+    : require('../dist/tolgee-in-context-tools.umd').InContextTools;