From 9450f59d8fd816cf74c124039244052a381b56f1 Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 08:41:33 +0200 Subject: [PATCH 01/13] Moved Internationalization class in it's own file --- src/index.ts | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/src/index.ts b/src/index.ts index e19895a..c47d7a1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,21 +1,3 @@ -class Internationalization { - supportedLanguages: T[] - fallbackLanguage: T +import ClientInternationalization from './ClientInternationalization' - constructor(supportedLanguages: T[], fallbackLanguage: T) { - this.supportedLanguages = supportedLanguages - this.fallbackLanguage = fallbackLanguage - } - - detectBrowserLanguage(): T { - const browserLanguage = - (navigator.languages && navigator.languages[0]) || navigator.language - - return ( - this.supportedLanguages.find((lang) => lang === browserLanguage) || - this.fallbackLanguage - ) - } -} - -export { Internationalization as default } +export { ClientInternationalization } From 08d3e29543c2a7f59d594484e0868444435de4c1 Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 08:42:56 +0200 Subject: [PATCH 02/13] Added utilities functions for handling cookies and DOM verification --- src/utilities.ts | 49 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 src/utilities.ts diff --git a/src/utilities.ts b/src/utilities.ts new file mode 100644 index 0000000..7edf024 --- /dev/null +++ b/src/utilities.ts @@ -0,0 +1,49 @@ +/** + * Regex based filter to get cookie values + * This includes the = + * + * @param name { string } - Filter keyword + */ +const getCookiePattern = (name: string): RegExp => RegExp(name + '=.[^;]*') + +/** + * Get cookie from document (Local DOM) + * + * @param name { string } - Cookie name + */ +function getCookieFromDocument(name: string): string | undefined { + const pattern = getCookiePattern(name) + const matched = document.cookie.match(pattern) + + if (!matched) { + return undefined + } + + const cookie = matched[0].split('=') + return decodeURIComponent(cookie[1]) +} + +/** + * Set new cookie + * + * @param name { string } - Cookie name + * @param value { string } - Cookie value + */ +function setCookie(name: string, value: string): void { + document.cookie = name + '=' + value + ';path=/' +} + +/** + * Check if the DOM is available + * if this function returns false, it means that the page is not rendered by the client. + * However, it might be pre-rendered for example on a server. + */ +function canUseDOM(): boolean { + return !!( + typeof window != 'undefined' && + window.document && + window.document.createElement + ) +} + +export { getCookieFromDocument, setCookie, canUseDOM } From 03d31baa03df1c8ae04fa24f831a67dd0e1ce612 Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 08:43:27 +0200 Subject: [PATCH 03/13] Add client side Internationalization class. --- src/ClientInternationalization.ts | 102 ++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 src/ClientInternationalization.ts diff --git a/src/ClientInternationalization.ts b/src/ClientInternationalization.ts new file mode 100644 index 0000000..f1c9adf --- /dev/null +++ b/src/ClientInternationalization.ts @@ -0,0 +1,102 @@ +import { getCookieFromDocument, canUseDOM, setCookie } from './utilities' + +class ClientInternationalization { + private readonly cookieName: string + + supportedLanguages: Array + fallbackLanguage: T + + /** + * ClientInternationalization utility package for working with languages + * + * Please note! All methods in this class will only run on the client side + * + * @param supportedLanguages { Array } - List of all supported languages + * @param fallbackLanguage { string } - Fallback language if no language matches + * @param cookieName { string } - Optional: Set a preferred cookie name + */ + constructor( + supportedLanguages: Array, + fallbackLanguage: T, + cookieName?: string + ) { + this.supportedLanguages = supportedLanguages + this.fallbackLanguage = fallbackLanguage + this.cookieName = typeof cookieName === 'string' ? cookieName : 'language' + } + + /** + * Detect the browser language of the client + * If no language was found or if none of the + * supported language matches a fallback language will be returned + * + * @return {string} - Detected language + */ + detectBrowserLanguage(): T { + // Check if the DOM is presented. + // If the DOM isn't accessible the website may be rendered on a server + if (canUseDOM()) { + // Get browser language + const browserLanguage = + (navigator.languages && navigator.languages[0]) || navigator.language + + return ( + this.supportedLanguages.find((lang) => lang === browserLanguage) || + this.fallbackLanguage + ) + } + + // Return fallback language if no DOM was found + return this.fallbackLanguage + } + + /** + * Save a language to a cookie + * If the set language isn't in the list of supported languages + * the fallback fallback language is returned + * + * @param language { string } - Language to set + */ + saveSetLanguage(language: string): void { + if (canUseDOM()) { + const cookieLanguage = + this.supportedLanguages.find((lang) => lang === language) || + this.fallbackLanguage + + setCookie(this.cookieName, cookieLanguage) + } + } + + /** + * Get the current language + * This method will first check if a language cookie is present. + * If no cookie was found the method will get the language form the browser + * + * If no language was found, this method simply calls the detectBrowserLanguage method + * + * @return { string } - Found language or fallback language + */ + detectLanguage(): T { + // Check for DOM + if (canUseDOM()) { + // Try to get language form cookie + const language = getCookieFromDocument(this.cookieName) + + // If cookie is undefined get the language form the browser + if (language == undefined) { + return this.detectBrowserLanguage() + } + + // Return found language or fallback language + return ( + this.supportedLanguages.find((lang) => lang === language) || + this.fallbackLanguage + ) + } + + // Return fallback language is DOM is null + return this.fallbackLanguage + } +} + +export default ClientInternationalization From ba1d1fdd03d8c4a8fc5f3a367c313a6e5d662356 Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 10:44:42 +0200 Subject: [PATCH 04/13] Changed cookie name form private to protected --- src/ClientInternationalization.ts | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/ClientInternationalization.ts b/src/ClientInternationalization.ts index f1c9adf..1c27f0c 100644 --- a/src/ClientInternationalization.ts +++ b/src/ClientInternationalization.ts @@ -1,7 +1,7 @@ import { getCookieFromDocument, canUseDOM, setCookie } from './utilities' class ClientInternationalization { - private readonly cookieName: string + protected readonly cookieName: string supportedLanguages: Array fallbackLanguage: T @@ -22,6 +22,7 @@ class ClientInternationalization { ) { this.supportedLanguages = supportedLanguages this.fallbackLanguage = fallbackLanguage + this.cookieName = typeof cookieName === 'string' ? cookieName : 'language' } @@ -53,11 +54,11 @@ class ClientInternationalization { /** * Save a language to a cookie * If the set language isn't in the list of supported languages - * the fallback fallback language is returned + * the fallback language will be returned * * @param language { string } - Language to set */ - saveSetLanguage(language: string): void { + saveLanguage(language: string): void { if (canUseDOM()) { const cookieLanguage = this.supportedLanguages.find((lang) => lang === language) || @@ -67,13 +68,27 @@ class ClientInternationalization { } } + /** + * Save a language to a cookie + * This method will not check if the language you want to set is supported + * Please note! If you have changed the cookie name, you must change it here as well + * + * @param language { string } - Language to set + * @param cookieName { string } - Optional: Cookie name + */ + static setLanguage(language: string, cookieName?: string): void { + if (canUseDOM()) { + cookieName = typeof cookieName === 'string' ? cookieName : 'language' + + setCookie(cookieName, language) + } + } + /** * Get the current language * This method will first check if a language cookie is present. * If no cookie was found the method will get the language form the browser * - * If no language was found, this method simply calls the detectBrowserLanguage method - * * @return { string } - Found language or fallback language */ detectLanguage(): T { From a3957dbb8f36286055ae85090c306e625a2f7c66 Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 10:45:01 +0200 Subject: [PATCH 05/13] Add ServerInternationalization class to index.ts --- src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index c47d7a1..3c101fc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ import ClientInternationalization from './ClientInternationalization' +import ServerInternationalization from './ServerInternationalization' -export { ClientInternationalization } +export { ClientInternationalization, ServerInternationalization } From 1e3e39856697de90a4445bd2d644e89ccbfc8e7b Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 10:45:34 +0200 Subject: [PATCH 06/13] Add typescript types for node js as dev dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index a7747b2..e76c610 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ }, "homepage": "https://github.com/aboutbits/internationalization#readme", "devDependencies": { + "@types/node": "^14.11.5", "@types/jest": "^26.0.9", "@typescript-eslint/eslint-plugin": "^3.8.0", "@typescript-eslint/parser": "^3.8.0", From d23de20da981014950440730f4ef13bbbefcabdc Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 10:46:37 +0200 Subject: [PATCH 07/13] Add utility function for reading cookies form request objects --- src/utilities.ts | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/utilities.ts b/src/utilities.ts index 7edf024..e2ab5ca 100644 --- a/src/utilities.ts +++ b/src/utilities.ts @@ -4,6 +4,8 @@ * * @param name { string } - Filter keyword */ +import { IncomingMessage } from 'http' + const getCookiePattern = (name: string): RegExp => RegExp(name + '=.[^;]*') /** @@ -23,6 +25,23 @@ function getCookieFromDocument(name: string): string | undefined { return decodeURIComponent(cookie[1]) } +function getCookieFromRequest( + name: string, + request: IncomingMessage +): string | undefined { + if (request.headers && request.headers.cookie) { + const pattern = getCookiePattern(name) + const matched = request.headers.cookie.match(pattern) + + if (!matched) { + return undefined + } + + const cookie = matched[0].split('=') + return decodeURIComponent(cookie[1]) + } +} + /** * Set new cookie * @@ -46,4 +65,4 @@ function canUseDOM(): boolean { ) } -export { getCookieFromDocument, setCookie, canUseDOM } +export { getCookieFromDocument, getCookieFromRequest, setCookie, canUseDOM } From 9cca1fb76e4c146226b10108b99d10ff3078e2a0 Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 10:47:57 +0200 Subject: [PATCH 08/13] Add ServerInternationalization class for handling languages on the server side --- src/ServerInternationalization.ts | 72 +++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/ServerInternationalization.ts diff --git a/src/ServerInternationalization.ts b/src/ServerInternationalization.ts new file mode 100644 index 0000000..2ec16c1 --- /dev/null +++ b/src/ServerInternationalization.ts @@ -0,0 +1,72 @@ +import { IncomingMessage } from 'http' +import { getCookieFromRequest } from './utilities' +import ClientInternationalization from './ClientInternationalization' + +class ServerInternationalization< + T extends string +> extends ClientInternationalization { + /** + * ServerInternationalization utility package for working with languages + * + * + * @param supportedLanguages { Array } - List of all supported languages + * @param fallbackLanguage { string } - Fallback language if no language matches + * @param cookieName { string } - Optional: Set a preferred cookie name + */ + constructor( + supportedLanguages: Array, + fallbackLanguage: T, + cookieName: string + ) { + super(supportedLanguages, fallbackLanguage, cookieName) + } + + /** + * Get the current language + * This method will first check if a language cookie is present. + * If no cookie was found the method will get the language form the browser + * + * @return { string } - Found language or fallback language + */ + detectLanguage(request?: IncomingMessage): T { + // Check if request is not undefined + if (request) { + // Try to get language form cookie + const cookieFromRequest = getCookieFromRequest(this.cookieName, request) + + if (cookieFromRequest) { + return cookieFromRequest as T + } + + // Get accept language from request header + const acceptLanguage = request.headers['accept-language'] + + if (acceptLanguage) { + // Extract the locale string and the priority from header string + const requestedLocales = acceptLanguage.split(',').map((part) => { + const [locale, priority] = part.trim().split(';q=') + + return { locale, priority: parseInt(priority) } + }) + + // Get the potential locale from requested locales array + const potentialLocale = requestedLocales + .sort((a, b) => b.priority - a.priority) + .find( + ({ locale }) => + locale !== '*' && + this.supportedLanguages.some((lang) => locale === lang) + ) + + // Check if the potential locale is not undefined else return the fallback language + return (potentialLocale + ? potentialLocale.locale + : this.fallbackLanguage) as T + } + } + + return this.detectBrowserLanguage() + } +} + +export default ServerInternationalization From ba3e102f5ba35d7d3ed50aad24418419fc63a1c9 Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 11:24:40 +0200 Subject: [PATCH 09/13] Fixed typo in ClientInternationalization.ts --- src/ClientInternationalization.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ClientInternationalization.ts b/src/ClientInternationalization.ts index 1c27f0c..1efcc39 100644 --- a/src/ClientInternationalization.ts +++ b/src/ClientInternationalization.ts @@ -58,7 +58,7 @@ class ClientInternationalization { * * @param language { string } - Language to set */ - saveLanguage(language: string): void { + setLanguage(language: string): void { if (canUseDOM()) { const cookieLanguage = this.supportedLanguages.find((lang) => lang === language) || From 4be01a2e548f669577cc4d07dca0a326aca6afac Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 12:29:18 +0200 Subject: [PATCH 10/13] Merged ClientInternationalization.ts and ServerInternationalization.ts into one single class --- src/ClientInternationalization.ts | 117 ------------------------------ src/ServerInternationalization.ts | 72 ------------------ 2 files changed, 189 deletions(-) delete mode 100644 src/ClientInternationalization.ts delete mode 100644 src/ServerInternationalization.ts diff --git a/src/ClientInternationalization.ts b/src/ClientInternationalization.ts deleted file mode 100644 index 1efcc39..0000000 --- a/src/ClientInternationalization.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { getCookieFromDocument, canUseDOM, setCookie } from './utilities' - -class ClientInternationalization { - protected readonly cookieName: string - - supportedLanguages: Array - fallbackLanguage: T - - /** - * ClientInternationalization utility package for working with languages - * - * Please note! All methods in this class will only run on the client side - * - * @param supportedLanguages { Array } - List of all supported languages - * @param fallbackLanguage { string } - Fallback language if no language matches - * @param cookieName { string } - Optional: Set a preferred cookie name - */ - constructor( - supportedLanguages: Array, - fallbackLanguage: T, - cookieName?: string - ) { - this.supportedLanguages = supportedLanguages - this.fallbackLanguage = fallbackLanguage - - this.cookieName = typeof cookieName === 'string' ? cookieName : 'language' - } - - /** - * Detect the browser language of the client - * If no language was found or if none of the - * supported language matches a fallback language will be returned - * - * @return {string} - Detected language - */ - detectBrowserLanguage(): T { - // Check if the DOM is presented. - // If the DOM isn't accessible the website may be rendered on a server - if (canUseDOM()) { - // Get browser language - const browserLanguage = - (navigator.languages && navigator.languages[0]) || navigator.language - - return ( - this.supportedLanguages.find((lang) => lang === browserLanguage) || - this.fallbackLanguage - ) - } - - // Return fallback language if no DOM was found - return this.fallbackLanguage - } - - /** - * Save a language to a cookie - * If the set language isn't in the list of supported languages - * the fallback language will be returned - * - * @param language { string } - Language to set - */ - setLanguage(language: string): void { - if (canUseDOM()) { - const cookieLanguage = - this.supportedLanguages.find((lang) => lang === language) || - this.fallbackLanguage - - setCookie(this.cookieName, cookieLanguage) - } - } - - /** - * Save a language to a cookie - * This method will not check if the language you want to set is supported - * Please note! If you have changed the cookie name, you must change it here as well - * - * @param language { string } - Language to set - * @param cookieName { string } - Optional: Cookie name - */ - static setLanguage(language: string, cookieName?: string): void { - if (canUseDOM()) { - cookieName = typeof cookieName === 'string' ? cookieName : 'language' - - setCookie(cookieName, language) - } - } - - /** - * Get the current language - * This method will first check if a language cookie is present. - * If no cookie was found the method will get the language form the browser - * - * @return { string } - Found language or fallback language - */ - detectLanguage(): T { - // Check for DOM - if (canUseDOM()) { - // Try to get language form cookie - const language = getCookieFromDocument(this.cookieName) - - // If cookie is undefined get the language form the browser - if (language == undefined) { - return this.detectBrowserLanguage() - } - - // Return found language or fallback language - return ( - this.supportedLanguages.find((lang) => lang === language) || - this.fallbackLanguage - ) - } - - // Return fallback language is DOM is null - return this.fallbackLanguage - } -} - -export default ClientInternationalization diff --git a/src/ServerInternationalization.ts b/src/ServerInternationalization.ts deleted file mode 100644 index 2ec16c1..0000000 --- a/src/ServerInternationalization.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { IncomingMessage } from 'http' -import { getCookieFromRequest } from './utilities' -import ClientInternationalization from './ClientInternationalization' - -class ServerInternationalization< - T extends string -> extends ClientInternationalization { - /** - * ServerInternationalization utility package for working with languages - * - * - * @param supportedLanguages { Array } - List of all supported languages - * @param fallbackLanguage { string } - Fallback language if no language matches - * @param cookieName { string } - Optional: Set a preferred cookie name - */ - constructor( - supportedLanguages: Array, - fallbackLanguage: T, - cookieName: string - ) { - super(supportedLanguages, fallbackLanguage, cookieName) - } - - /** - * Get the current language - * This method will first check if a language cookie is present. - * If no cookie was found the method will get the language form the browser - * - * @return { string } - Found language or fallback language - */ - detectLanguage(request?: IncomingMessage): T { - // Check if request is not undefined - if (request) { - // Try to get language form cookie - const cookieFromRequest = getCookieFromRequest(this.cookieName, request) - - if (cookieFromRequest) { - return cookieFromRequest as T - } - - // Get accept language from request header - const acceptLanguage = request.headers['accept-language'] - - if (acceptLanguage) { - // Extract the locale string and the priority from header string - const requestedLocales = acceptLanguage.split(',').map((part) => { - const [locale, priority] = part.trim().split(';q=') - - return { locale, priority: parseInt(priority) } - }) - - // Get the potential locale from requested locales array - const potentialLocale = requestedLocales - .sort((a, b) => b.priority - a.priority) - .find( - ({ locale }) => - locale !== '*' && - this.supportedLanguages.some((lang) => locale === lang) - ) - - // Check if the potential locale is not undefined else return the fallback language - return (potentialLocale - ? potentialLocale.locale - : this.fallbackLanguage) as T - } - } - - return this.detectBrowserLanguage() - } -} - -export default ServerInternationalization From 76a906b81792067b7e9f000b69abb6f3455514fc Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 12:30:15 +0200 Subject: [PATCH 11/13] Add new Internationalization class in index file --- src/index.ts | 161 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 158 insertions(+), 3 deletions(-) diff --git a/src/index.ts b/src/index.ts index 3c101fc..70f5d23 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,159 @@ -import ClientInternationalization from './ClientInternationalization' -import ServerInternationalization from './ServerInternationalization' +import { IncomingMessage } from 'http' +import { + getCookieFromDocument, + canUseDOM, + setCookie, + getCookieFromRequest, +} from './utilities' -export { ClientInternationalization, ServerInternationalization } +class Internationalization { + private readonly cookieName: string + + supportedLanguages: Array + fallbackLanguage: T + + /** + * ClientInternationalization utility package for working with languages + * + * @param supportedLanguages { Array } - List of all supported languages + * @param fallbackLanguage { string } - Fallback language if no language matches + * @param cookieName { string } - Optional: Set a preferred cookie name + */ + constructor( + supportedLanguages: Array, + fallbackLanguage: T, + cookieName?: string + ) { + this.supportedLanguages = supportedLanguages + this.fallbackLanguage = fallbackLanguage + + this.cookieName = typeof cookieName === 'string' ? cookieName : 'language' + } + + /** + * Detect the browser language of the client + * If no language was found or if none of the + * supported language matches a fallback language will be returned + * + * @return {string} - Detected language + */ + detectBrowserLanguage(): T { + // Check if the DOM is presented. + // If the DOM isn't accessible the website may be rendered on a server + if (canUseDOM()) { + // Get browser language + const browserLanguage = + (navigator.languages && navigator.languages[0]) || navigator.language + + return ( + this.supportedLanguages.find((lang) => lang === browserLanguage) || + this.fallbackLanguage + ) + } + + // Return fallback language if no DOM was found + return this.fallbackLanguage + } + + /** + * Save a language to a cookie + * If the set language isn't in the list of supported languages + * the fallback language will be returned + * + * @param language { string } - Language to set + */ + setLanguage(language: string): void { + if (canUseDOM()) { + const cookieLanguage = + this.supportedLanguages.find((lang) => lang === language) || + this.fallbackLanguage + + setCookie(this.cookieName, cookieLanguage) + } + } + + /** + * Save a language to a cookie + * This method will not check if the language you want to set is supported + * Please note! If you have changed the cookie name, you must change it here as well + * + * @param language { string } - Language to set + * @param cookieName { string } - Optional: Cookie name + */ + static setLanguage(language: string, cookieName?: string): void { + if (canUseDOM()) { + cookieName = typeof cookieName === 'string' ? cookieName : 'language' + + setCookie(cookieName, language) + } + } + + /** + * Get the current language + * This method will first check if a language cookie is present. + * If no cookie was found the method will get the language form the browser + * + * For handling cookies on the server side pass the request object + * + * @param request { IncomingMessage } - Optional: Request object for accessing cookies over request headers + * @return { string } - Found language or fallback language + */ + detectLanguage(request?: IncomingMessage): T { + // Check if request is not undefined + if (request) { + // Try to get language form cookie + const cookieFromRequest = getCookieFromRequest(this.cookieName, request) + + if (cookieFromRequest) { + return cookieFromRequest as T + } + + // Get accept language from request header + const acceptLanguage = request.headers['accept-language'] + + if (acceptLanguage) { + // Extract the locale string and the priority from header string + const requestedLocales = acceptLanguage.split(',').map((part) => { + const [locale, priority] = part.trim().split(';q=') + + return { locale, priority: parseInt(priority) } + }) + + // Get the potential locale from requested locales array + const potentialLocale = requestedLocales + .sort((a, b) => b.priority - a.priority) + .find( + ({ locale }) => + locale !== '*' && + this.supportedLanguages.some((lang) => locale === lang) + ) + + // Check if the potential locale is not undefined else return the fallback language + return (potentialLocale + ? potentialLocale.locale + : this.fallbackLanguage) as T + } + } + + // Check for DOM + if (canUseDOM()) { + // Try to get language form cookie + const language = getCookieFromDocument(this.cookieName) + + // If cookie is undefined get the language form the browser + if (language == undefined) { + return this.detectBrowserLanguage() + } + + // Return found language or fallback language + return ( + this.supportedLanguages.find((lang) => lang === language) || + this.fallbackLanguage + ) + } + + return this.fallbackLanguage + } +} + +export default Internationalization From 0eacc1c4cfd2cead82f3ca6b59ff68ab8eda34c8 Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 12:30:35 +0200 Subject: [PATCH 12/13] Updated description and example in readme.md --- readme.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index c01f81a..80227a6 100644 --- a/readme.md +++ b/readme.md @@ -3,7 +3,8 @@ Internationalization [![npm version](https://badge.fury.io/js/%40aboutbits%2Finternationalization.svg)](https://badge.fury.io/js/%40aboutbits%2Finternationalization) -This package includes utilities for working with different languages in the browser. +This package includes utilities for working with different languages in the browser. +This package works for client side rendered applications as well as for server side rendered applications. ## Table of content @@ -22,15 +23,26 @@ npm install @aboutbits/internationalization Second, you can setup the tool with all supported languages and the fallback language and then detect the given browser language. ```js -import Internationalization from '@aboutbits/internationalization' +import { Internationalization } from '@aboutbits/internationalization' let supportedLanguages = ['en', 'de', 'it'] let fallbackLanguage = 'en' let i18n = new Internationalization(supportedLanguages, fallbackLanguage) -let language = i18n.detectBrowserLanguage() +// Fetches the language only from the user's browser +let browserLanguage = i18n.detectBrowserLanguage() +// First check the cookies to see if a language is set. If not it will look in the browser. +// You can also pass a requiest obejct with which the language can be recognized already during the server side rendering +let language = i18n.detectLanguage() + +// Sets a cookie with the specified language. +// There exists also a static version of this method. +// Ex. Internationalization.setLanguage("de") +i18n.setLanguage("de") + +console.log(browserLanguage) console.log(language) ``` From 80f1dba47233fb89e3dcba381c717ec1254cecc9 Mon Sep 17 00:00:00 2001 From: Simon Planinschek Date: Wed, 7 Oct 2020 15:33:47 +0200 Subject: [PATCH 13/13] Removed static method setLanguage --- src/index.ts | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/index.ts b/src/index.ts index 70f5d23..5d6a693 100644 --- a/src/index.ts +++ b/src/index.ts @@ -72,22 +72,6 @@ class Internationalization { } } - /** - * Save a language to a cookie - * This method will not check if the language you want to set is supported - * Please note! If you have changed the cookie name, you must change it here as well - * - * @param language { string } - Language to set - * @param cookieName { string } - Optional: Cookie name - */ - static setLanguage(language: string, cookieName?: string): void { - if (canUseDOM()) { - cookieName = typeof cookieName === 'string' ? cookieName : 'language' - - setCookie(cookieName, language) - } - } - /** * Get the current language * This method will first check if a language cookie is present.