feat: DevTools correctly ommitted at production

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,8 @@ 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 } from '@tolgee/web';
+import { InContextTools } from '@tolgee/web/tools';
 import { withTolgee, I18nextPlugin } from '..';
 
 const API_URL = 'http://localhost';
@@ -15,7 +16,7 @@ describe('withTolgee', () => {
   let i18next: typeof i18n;
   beforeEach(async () => {
     fetch.enableMocks();
-    const tolgee = Tolgee().use(DevTools()).use(I18nextPlugin()).init({
+    const tolgee = Tolgee().use(InContextTools()).use(I18nextPlugin()).init({
       apiKey: API_KEY,
       apiUrl: API_URL,
     });

packages/react/package.json

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

packages/svelte/package.json

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

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"
@@ -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,74 @@ 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('productionuction'),
+    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' }) => ({
+const buildPackage = ({ input, name, plugins = [], umdName }) => ({
   ...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],
 });
-/**
- * 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)],
+  buildPackage({
+    input: 'src/entrypoints/development.ts',
+    name: 'web.development',
     umdName: 'web',
-    esmExt: 'js',
   }),
-  buildMin({
-    input: 'src/index.ts',
-    name: 'web.main',
-    plugins: [replaceEnv('production', true)],
+
+  buildPackage({
+    input: 'src/entrypoints/production.ts',
+    name: 'web.production',
     umdName: 'web',
-    esmExt: 'js',
+  }),
+
+  buildPackage({
+    input: 'src/entrypoints/universal.ts',
+    name: 'web.universal',
+    umdName: 'web',
+  }),
+
+  // dev tools
+
+  buildPackage({
+    input: 'src/entrypoints/tools.ts',
+    name: 'in-context-tools',
+    umdName: 'tools',
   }),
 ];

packages/web/rollup.config.js

@@ -1,16 +1,3 @@
-import { buildMain, buildVanilla } from './rollup.common';
+import { buildMain } 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'),
-];
+export default [...buildMain()];

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/entrypoints/development.ts

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

packages/web/src/entrypoints/production.ts

@@ -0,0 +1,8 @@
+import { TolgeeInstance } from '@tolgee/core';
+
+export const DevTools = () => (tolgee: TolgeeInstance) => tolgee;
+export * from '../typedIndex';
+export {
+  PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY,
+  DEVTOOLS_ID,
+} from '../constants';

packages/web/src/entrypoints/tools.ts

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

packages/web/src/entrypoints/universal.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+export * from './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;

packages/web/tools/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../dist/tolgee-in-context-tools.cjs.js",
+  "module": "../dist/tolgee-in-context-tools.cjs.js",
+  "types": "../types/tools.d.ts"
+}

packages/web/tsconfig.prod.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig",
-  "include": ["src/index.ts"]
+  "exclude": ["src/__test__"]
 }

packages/web/types/index.d.ts

@@ -1,10 +1,6 @@
-import type { TolgeePlugin, DevCredentials } from '@tolgee/core';
+import type { TolgeePlugin } from '@tolgee/core';
 import type { InContextOptions } from '../lib/types';
 
-export declare const ContextUi: () => TolgeePlugin;
-export declare const InContextTools: (
-  options?: InContextOptions
-) => TolgeePlugin;
-export declare const DevTools: typeof InContextTools;
+export declare const DevTools: (options?: InContextOptions) => TolgeePlugin;
 
 export * from '../lib/typedIndex';

packages/web/types/tools.d.ts

@@ -0,0 +1,7 @@
+import type { TolgeePlugin } from '@tolgee/core';
+import type { InContextOptions } from '../lib/types';
+
+export declare const ContextUi: () => TolgeePlugin;
+export declare const InContextTools: (
+  options?: InContextOptions
+) => TolgeePlugin;