@tolgee/svelte 3.6.0 → 4.0.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0](https://github.com/tolgee/tolgee-js/compare/v3.6.0...v4.0.0) (2022-03-10)
+
+
+### Features
+
+* Use invisible wrapping instead of span component ([3848cda](https://github.com/tolgee/tolgee-js/commit/3848cdaf70fe9c76fd56c88d3c7399b87ff0f88b))
+
+
+### BREAKING CHANGES
+
+* default invisible mode, defaultValue
+
+
+
+
+
 # [3.6.0](https://github.com/tolgee/tolgee-js/compare/v3.5.0...v3.6.0) (2022-02-28)
 
 **Note:** Version bump only for package @tolgee/svelte

package/README.md

@@ -67,7 +67,7 @@ To translate texts using Tolgee Svelte integration, you can use `T` component or
 </script>
 
 
-<T keyName="key">This is default</T>
+<T keyName="key" defaultValue="This is default" />
 ```
 
 ### getTranslate function

package/T.svelte

@@ -1,27 +1,33 @@
-<script >import getTolgeeContext from "./getTolgeeContext";
-import { onDestroy } from "svelte";
+<script >import getTolgeeContext from './getTolgeeContext';
+import { onDestroy } from 'svelte';
 export let keyName;
 export let parameters = undefined;
-export let strategy = "ELEMENT_WRAP";
+export let noWrap = false;
+export let defaultValue = undefined;
 if (!keyName) {
-    console.error("Missing keyName prop!");
-    // show the error in the DOM
-    keyName = "Tolgee: Missing key name prop!";
-    strategy = "NO_WRAP";
+    console.error('Missing keyName prop!');
 }
-const translationFnNoWrap = strategy === "NO_WRAP" || strategy === "ELEMENT_WRAP";
 const tolgeeContext = getTolgeeContext();
-let translated = tolgeeContext.tolgee.instant(keyName, parameters, translationFnNoWrap, true);
-let spanWrapperRef;
-const translate = () => tolgeeContext.tolgee
-    .translate(keyName, parameters, translationFnNoWrap, spanWrapperRef?.textContent || undefined)
-    .then((result) => {
-    translated = result;
-})
-    .catch(() => {
-    console.error("Failed to resolve translation for key: ", keyName);
-});
-translate();
+let translated = keyName
+    ? tolgeeContext.tolgee.instant(keyName, parameters, noWrap, true)
+    : '';
+const translate = () => {
+    if (keyName) {
+        tolgeeContext.tolgee
+            .translate({
+            key: keyName,
+            params: parameters,
+            noWrap,
+            defaultValue,
+        })
+            .then((result) => {
+            translated = result;
+        })
+            .catch(() => {
+            console.error('Failed to resolve translation for key: ', keyName);
+        });
+    }
+};
 const onTranslationChangeSubscription = tolgeeContext.tolgee.onTranslationChange.subscribe((changeData) => {
     if (changeData.key === keyName) {
         translate();
@@ -30,33 +36,13 @@ const onTranslationChangeSubscription = tolgeeContext.tolgee.onTranslationChange
 const onLangChangeSubscription = tolgeeContext.tolgee.onLangChange.subscribe(() => {
     translate();
 });
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined') {
     onDestroy(() => {
         onTranslationChangeSubscription.unsubscribe();
         onLangChangeSubscription.unsubscribe();
     });
 }
-$: (spanWrapperRef && spanWrapperRef.textContent) && translate();
+$: translate();
 </script>
 
-{#if strategy === 'ELEMENT_WRAP'}
-  <span data-tolgee-key-only={keyName} bind:this={spanWrapperRef}>
-    {#if !translated}
-      {#if $$slots.default}
-        <slot />
-      {:else}
-        {keyName}
-      {/if}
-    {:else}
-      {translated}
-    {/if}
-  </span>
-{:else if !translated}
-  {#if $$slots.default}
-    <slot />
-  {:else}
-    {keyName}
-  {/if}
-{:else}
-  {translated}
-{/if}
+{translated}

package/T.svelte.d.ts

@@ -3,14 +3,13 @@ declare const __propDef: {
     props: {
         keyName: string;
         parameters?: Record<string, any> | undefined;
-        strategy?: "ELEMENT_WRAP" | "TEXT_WRAP" | "NO_WRAP";
+        noWrap?: boolean;
+        defaultValue?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export declare type TProps = typeof __propDef.props;
 export declare type TEvents = typeof __propDef.events;

package/TolgeeProvider.svelte

@@ -1,7 +1,10 @@
 <script >import { onDestroy, onMount, setContext } from 'svelte';
 import { IcuFormatter, Tolgee, TolgeeConfig } from '@tolgee/core';
 export let config;
-const tolgee = Tolgee.use(IcuFormatter).init(config || new TolgeeConfig());
+const tolgee = Tolgee.use(IcuFormatter).init({
+    wrapperMode: 'invisible',
+    ...(config || new TolgeeConfig()),
+});
 let tolgeeRunPromise;
 setContext('tolgeeContext', {
     tolgee,

package/getTranslate.js

@@ -58,11 +58,32 @@ const getTranslate = () => {
     // return new translate method when something is changed
     return derived(
     // when updateStore changes, translate function gets changed as well
-    updateStore, () => (propsOrKey, parameters, noWrap, defaultValue) => {
-        if (typeof propsOrKey === 'string') {
-            return translate(propsOrKey, parameters, noWrap, defaultValue);
+    updateStore, () => (keyOrProps, ...params) => {
+        let parameters = undefined;
+        let noWrap = undefined;
+        let defaultValue = undefined;
+        // allow user to pass object of params and make the code cleaner
+        const key = typeof keyOrProps === 'object' ? keyOrProps.key : keyOrProps;
+        if (typeof keyOrProps === 'object') {
+            parameters = keyOrProps.parameters;
+            noWrap = keyOrProps.noWrap;
+            defaultValue = keyOrProps.defaultValue;
         }
-        return translate(propsOrKey.key, propsOrKey.parameters, propsOrKey.noWrap, propsOrKey.defaultValue);
+        else {
+            params.forEach((param) => {
+                switch (typeof param) {
+                    case 'object':
+                        parameters = param;
+                        break;
+                    case 'boolean':
+                        noWrap = param;
+                        break;
+                    case 'string':
+                        defaultValue = param;
+                }
+            });
+        }
+        return translate(key, parameters, noWrap, defaultValue);
     });
 };
 export default getTranslate;

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@tolgee/svelte",
-  "version": "3.6.0",
+  "version": "4.0.0",
   "dependencies": {
-    "@tolgee/core": "^3.6.0"
+    "jest-fetch-mock": "^3.0.3"
   },
   "devDependencies": {
     "@sveltejs/kit": "next",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/svelte": "3.0.3",
+    "@tolgee/core": "^4.0.0",
     "@types/jest": "27.4.1",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
+    "@typescript-eslint/parser": "^5.14.0",
     "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^3.4.1",
     "jest": "27.5.1",
     "nodemon": "^2.0.15",
@@ -25,7 +26,7 @@
     "svelte2tsx": "0.5.5",
     "ts-jest": "27.1.3",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.2"
   },
   "type": "module",
   "publishConfig": {

package/types.d.ts

@@ -1,14 +1,15 @@
+import type { TranslationParams } from '@tolgee/core';
 import type { Readable } from 'svelte/store';
-export declare type TranslationParameters = {
-    [key: string]: string;
-};
 export declare type GetTranslateResultFnProps = {
     key: string;
-    parameters?: TranslationParameters;
+    parameters?: TranslationParams;
     noWrap?: boolean;
     defaultValue?: string;
 };
 export declare type GetTranslateType = () => Readable<{
     (props: GetTranslateResultFnProps): string;
-    (key: string, parameters?: TranslationParameters, noWrap?: boolean, defaultValue?: string): string;
+    (key: string, defaultValue?: string, noWrap?: boolean): string;
+    (key: string, defaultValue?: string, parameters?: TranslationParams): string;
+    (key: string, parameters?: TranslationParams, defaultValue?: string): string;
+    (key: string, parameters?: TranslationParams, noWrap?: boolean, defaultValue?: string): string;
 }>;