feat: improve web package and migrate to vite (#3322)

e2e/cypress/e2e/next-internal/tags.cy.ts

@@ -44,6 +44,7 @@ context('Tags editing', () => {
 
     cy.wait('@getTags');
 
+    cy.wait(100);
     getDevUi().findDcy('tag-autocomplete-option').contains('test-tag').click();
 
     getDevUi().contains('Update').click();

e2e/package.json

@@ -24,6 +24,6 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "eslint": "^8.47.0"
+    "eslint": "^8.57.0"
   }
 }

package.json

@@ -51,8 +51,8 @@
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "commander": "^9.4.1",
-    "eslint": "8.22.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-svelte3": "4.0.0",
     "eslint-plugin-vue": "^9.2.0",
     "glob": "8.0.3",
@@ -61,8 +61,8 @@
     "lerna": "^5.3.0",
     "npm-cli-login": "^1.0.0",
     "nunjucks": "3.2.3",
-    "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "2.7.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "3.2.2",
     "semantic-release": "^21.0.6",
     "ts-node": "^10.9.1",
     "turbo": "1.10.12",

packages/core/package.json

@@ -49,6 +49,7 @@
   ],
   "devDependencies": {
     "@rollup/plugin-node-resolve": "13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-typescript": "8.3.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/jest": "^27.0.2",

packages/core/rollup.config.js

@@ -3,6 +3,7 @@ import { terser } from 'rollup-plugin-terser';
 import sizes from 'rollup-plugin-bundle-size';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import { visualizer } from 'rollup-plugin-visualizer';
+import replace from '@rollup/plugin-replace';
 
 export default {
   input: 'src/index.ts',
@@ -67,5 +68,10 @@ export default {
     nodeResolve(),
     sizes(),
     visualizer(),
+    replace({
+      'process.env.TOLGEE_UI_VERSION':
+        JSON.stringify(process.env.TOLGEE_UI_VERSION) || 'undefined',
+      preventAssignment: true,
+    }),
   ],
 };

packages/core/src/Controller/Controller.ts

@@ -207,6 +207,7 @@ export function Controller({ options }: StateServiceProps) {
     changeTranslation: changeTranslation,
     getTranslationNs: getTranslationNs,
     getDefaultAndFallbackNs: getDefaultAndFallbackNs,
+    findPositions: pluginService.findPositions,
     async changeLanguage(language: string) {
       if (
         state.getPendingLanguage() === language &&

packages/core/src/Controller/Plugins/Plugins.ts

@@ -57,7 +57,7 @@ export function Plugins(
     languageStorage: undefined as LanguageStorageMiddleware | undefined,
   };
 
-  const onClick: TranslationOnClick = async ({ keysAndDefaults, event }) => {
+  const onClick: TranslationOnClick = async ({ keysAndDefaults, target }) => {
     const withNs: UiKeyOption[] = keysAndDefaults.map(
       ({ key, ns, defaultValue }) => {
         return {
@@ -72,7 +72,7 @@ export function Plugins(
         };
       }
     );
-    instances.ui?.handleElementClick(withNs, event);
+    instances.ui?.handleElementClick(withNs, target);
   };
 
   const findPositions: FindPositionsInterface = (key, ns) => {
@@ -185,7 +185,7 @@ export function Plugins(
 
   const self = Object.freeze({
     addPlugin,
-
+    findPositions: findPositions,
     run() {
       const { apiKey, apiUrl, projectId, observerOptions } =
         getInitialOptions();

packages/core/src/TolgeeCore.ts

@@ -171,6 +171,11 @@ function createTolgee(options: TolgeeOptions) {
      */
     highlight: controller.highlight,
 
+    /**
+     * Find positions of keys in the DOM.
+     */
+    findPositions: controller.findPositions,
+
     /**
      * @return current Tolgee options.
      */

packages/core/src/types/errors.ts

@@ -22,14 +22,20 @@ export class RecordFetchError extends Error {
 
 export class LanguageDetectorError extends Error {
   public name = 'LanguageDetectorError' as const;
-  constructor(message: string, public cause: any) {
+  constructor(
+    message: string,
+    public cause: any
+  ) {
     super(message);
   }
 }
 
 export class LanguageStorageError extends Error {
   public name = 'LanguageStorageError' as const;
-  constructor(message: string, public cause: any) {
+  constructor(
+    message: string,
+    public cause: any
+  ) {
     super(message);
   }
 }

packages/core/src/types/general.ts

@@ -27,7 +27,7 @@ export type TranslateOptions = {
 
 export type TranslateProps<
   T = DefaultParamType,
-  K extends string = TranslationKey
+  K extends string = TranslationKey,
 > = {
   key: K;
   defaultValue?: string;
@@ -47,7 +47,7 @@ export type CombinedOptions<T> = TranslateOptions & {
 export type TFnType<
   T = DefaultParamType,
   R = string,
-  K extends string = TranslationKey
+  K extends string = TranslationKey,
 > = {
   (key: K, defaultValue?: string, options?: CombinedOptions<T>): R;
   (key: K, options?: CombinedOptions<T>): R;

packages/core/src/types/plugin.ts

@@ -129,7 +129,7 @@ export type FormatterMiddleware = {
 
 export type TranslationOnClick = (data: {
   keysAndDefaults: KeyAndParams[];
-  event: any;
+  target: HTMLElement;
 }) => void;
 
 export type Highlighter = {
@@ -172,7 +172,10 @@ export type UiKeyOption = {
 export type UiMiddleware = (props: UiProps) => UiInterface;
 
 export interface UiInterface {
-  handleElementClick(keysAndDefaults: UiKeyOption[], event: any): Promise<void>;
+  handleElementClick(
+    keysAndDefaults: UiKeyOption[],
+    target: HTMLElement
+  ): Promise<void>;
 }
 
 export type PluginTools = Readonly<{

packages/svelte/package.json

@@ -45,15 +45,15 @@
     "@types/jest": "^28.1.7",
     "@typescript-eslint/eslint-plugin": "^5.34.0",
     "@typescript-eslint/parser": "^5.34.0",
-    "eslint": "^8.22.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "28.1.2",
     "jest-fetch-mock": "^3.0.3",
     "nodemon": "^2.0.19",
-    "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.7.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
     "svelte": "^3.55.1",
     "svelte-check": "^3.0.3",
     "svelte-jester": "^2.3.2",

packages/web/.gitignore

@@ -1,25 +1,27 @@
-.DS_Store
-node_modules
-/dist
-/lib
-/coverage
-stats.html
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+lib
+coverage
+
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

packages/web/index.cjs

@@ -0,0 +1,4 @@
+module.exports =
+  process.env.NODE_ENV === 'production'
+    ? require('./dist/tolgee-web.production.umd.cjs')
+    : require('./dist/tolgee-web.development.umd.cjs');

packages/web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/app/main.tsx"></script>
+  </body>
+</html>