@operato/i18n 8.0.0-beta.0 → 8.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/i18n

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/i18n",
   "description": "Webcomponent i18n following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -90,5 +90,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/src/config.ts

@@ -1,44 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Backend } from './http-backend'
-import LngDetector from 'i18next-browser-languagedetector'
-import _i18next from 'i18next'
-
-const subdomain = location.pathname.match(/\/domain\/([^\/]+)/)?.[1]
-
-_i18next
-  .use(LngDetector)
-  .use(Backend)
-  .init({
-    fallbackLng: 'en',
-    debug: true,
-    ns: ['translations'],
-    defaultNS: 'translations',
-    keySeparator: false,
-    interpolation: {
-      prefix: '{',
-      suffix: '}'
-    },
-    load: 'languageOnly',
-    backend: {
-      loadPath: subdomain ? `/domain/${subdomain}/{ns}/{lng}.json` : `/{ns}/{lng}.json`
-    },
-    detection: {
-      // order and from where user language should be detected
-      order: ['cookie'],
-
-      // keys or params to lookup language from
-      lookupCookie: 'i18next',
-
-      // cache user language on
-      caches: ['cookie'],
-      excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)
-
-      // optional set cookie options, reference:[MDN Set-Cookie docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie)
-      cookieOptions: { path: '/', sameSite: 'strict' }
-    }
-  })
-
-export const i18next = _i18next

package/src/http-backend/index.ts

@@ -1,167 +0,0 @@
-// migrated from https://github.com/i18next/i18next-http-backend
-// due to import module problem
-
-import { ModuleType } from 'i18next'
-import { makePromise } from './utils.js'
-import { request } from './request.js'
-
-const getDefaults = () => {
-  return {
-    loadPath: '/locales/{{lng}}/{{ns}}.json',
-    addPath: '/locales/add/{{lng}}/{{ns}}',
-    allowMultiLoading: false,
-    parse: (data: any) => JSON.parse(data),
-    stringify: JSON.stringify,
-    parsePayload: (namespace: any, key: string, fallbackValue: any) => ({ [key]: fallbackValue || '' }),
-    request,
-    reloadInterval: typeof window !== 'undefined' ? false : 60 * 60 * 1000,
-    customHeaders: {},
-    queryStringParams: {},
-    crossDomain: false, // used for XmlHttpRequest
-    withCredentials: false, // used for XmlHttpRequest
-    overrideMimeType: false, // used for XmlHttpRequest
-    requestOptions: {
-      // used for fetch
-      mode: 'cors',
-      credentials: 'same-origin',
-      cache: 'default'
-    }
-  }
-}
-
-export class Backend {
-  static type: ModuleType = 'backend'
-
-  services: any
-  options: any
-  allOptions: any
-  type: string
-
-  constructor(services: any, options: any = {}, allOptions: any = {}) {
-    this.services = services
-    this.options = options
-    this.allOptions = allOptions
-    this.type = 'backend'
-    this.init(services, options, allOptions)
-  }
-
-  init(services: any, options: any = {}, allOptions: any = {}) {
-    this.services = services
-    this.options = {
-      ...getDefaults(),
-      ...this.options,
-      ...options
-    }
-    this.allOptions = allOptions
-    if (this.services && this.options.reloadInterval) {
-      setInterval(() => this.reload(), this.options.reloadInterval)
-    }
-  }
-
-  readMulti(languages: any, namespaces: any, callback: any) {
-    this._readAny(languages, languages, namespaces, namespaces, callback)
-  }
-
-  read(language: any, namespace: any, callback: any) {
-    this._readAny([language], language, [namespace], namespace, callback)
-  }
-
-  _readAny(languages: any, loadUrlLanguages: any, namespaces: any, loadUrlNamespaces: any, callback: any) {
-    let loadPath = this.options.loadPath
-    if (typeof this.options.loadPath === 'function') {
-      loadPath = this.options.loadPath(languages, namespaces)
-    }
-
-    loadPath = makePromise(loadPath)
-
-    loadPath.then((resolvedLoadPath: any) => {
-      const url = this.services.interpolator.interpolate(resolvedLoadPath, {
-        lng: languages.join('+'),
-        ns: namespaces.join('+')
-      })
-      this.loadUrl(url, callback, loadUrlLanguages, loadUrlNamespaces)
-    })
-  }
-
-  loadUrl(url: string, callback: any, languages: any, namespaces: any) {
-    this.options.request(this.options, url, undefined, (err: any, res: any) => {
-      if (res && ((res.status >= 500 && res.status < 600) || !res.status))
-        return callback('failed loading ' + url + '; status code: ' + res.status, true /* retry */)
-      if (res && res.status >= 400 && res.status < 500)
-        return callback('failed loading ' + url + '; status code: ' + res.status, false /* no retry */)
-      if (!res && err && err.message && err.message.indexOf('Failed to fetch') > -1)
-        return callback('failed loading ' + url + ': ' + err.message, true /* retry */)
-      if (err) return callback(err, false)
-
-      let ret, parseErr
-      try {
-        if (typeof res.data === 'string') {
-          ret = this.options.parse(res.data, languages, namespaces)
-        } else {
-          // fallback, which omits calling the parse function
-          ret = res.data
-        }
-      } catch (e) {
-        parseErr = 'failed parsing ' + url + ' to json'
-      }
-      if (parseErr) return callback(parseErr, false)
-      callback(null, ret)
-    })
-  }
-
-  create(languages: any, namespace: any, key: any, fallbackValue: any, callback: any) {
-    // If there is a falsey addPath, then abort -- this has been disabled.
-    if (!this.options.addPath) return
-    if (typeof languages === 'string') languages = [languages]
-    const payload = this.options.parsePayload(namespace, key, fallbackValue)
-    let finished = 0
-    const dataArray: any = []
-    const resArray: any = []
-    languages.forEach((lng: any) => {
-      let addPath = this.options.addPath
-      if (typeof this.options.addPath === 'function') {
-        addPath = this.options.addPath(lng, namespace)
-      }
-      const url = this.services.interpolator.interpolate(addPath, { lng: lng, ns: namespace })
-
-      this.options.request(this.options, url, payload, (data: any, res: any) => {
-        // TODO: if res.status === 4xx do log
-        finished += 1
-        dataArray.push(data)
-        resArray.push(res)
-        if (finished === languages.length) {
-          if (callback) callback(dataArray, resArray)
-        }
-      })
-    })
-  }
-
-  reload() {
-    const { backendConnector, languageUtils, logger } = this.services
-    const currentLanguage = backendConnector.language
-    if (currentLanguage && currentLanguage.toLowerCase() === 'cimode') return // avoid loading resources for cimode
-
-    const toLoad: any = []
-    const append = (lng: any) => {
-      const lngs = languageUtils.toResolveHierarchy(lng)
-      lngs.forEach((l: any) => {
-        if (toLoad.indexOf(l) < 0) toLoad.push(l)
-      })
-    }
-
-    append(currentLanguage)
-
-    if (this.allOptions.preload) this.allOptions.preload.forEach((l: any) => append(l))
-
-    toLoad.forEach((lng: any) => {
-      this.allOptions.ns.forEach((ns: any) => {
-        backendConnector.read(lng, ns, 'read', null, null, (err: any, data: any) => {
-          if (err) logger.warn(`loading namespace ${ns} for language ${lng} failed`, err)
-          if (!err && data) logger.log(`loaded namespace ${ns} for language ${lng}`, data)
-
-          backendConnector.loaded(`${lng}|${ns}`, err, data)
-        })
-      })
-    })
-  }
-}

package/src/http-backend/request.ts

@@ -1,53 +0,0 @@
-const addQueryString = (url: string, params: any) => {
-  if (params && typeof params === 'object') {
-    let queryString = ''
-    // Must encode data
-    for (const paramName in params) {
-      queryString += '&' + encodeURIComponent(paramName) + '=' + encodeURIComponent(params[paramName])
-    }
-    if (!queryString) return url
-    url = url + (url.indexOf('?') !== -1 ? '&' : '?') + queryString.slice(1)
-  }
-
-  return url
-}
-
-// fetch api stuff
-const requestWithFetch = (options: any, url: any, payload: any, callback: (status: any, obj?: any) => void) => {
-  if (options.queryStringParams) {
-    url = addQueryString(url, options.queryStringParams)
-  }
-  const headers = typeof options.customHeaders === 'function' ? options.customHeaders() : options.customHeaders
-
-  if (payload) headers['Content-Type'] = 'application/json'
-  fetch(url, {
-    ...(typeof options.requestOptions === 'function' ? options.requestOptions(payload) : options.requestOptions),
-    method: payload ? 'POST' : 'GET',
-    body: payload ? options.stringify(payload) : undefined,
-    headers
-  })
-    .then(response => {
-      if (!response.ok) return callback(response.statusText || 'Error', { status: response.status })
-      response
-        .text()
-        .then(data => {
-          callback(null, { status: response.status, data })
-        })
-        .catch(callback)
-    })
-    .catch(callback)
-}
-
-export const request = (
-  options: any,
-  url: any,
-  payload: any,
-  callback: (status: string, obj: { status: number }) => void
-) => {
-  if (typeof payload === 'function') {
-    callback = payload
-    payload = undefined
-  }
-
-  return requestWithFetch(options, url, payload, callback || (() => {}))
-}

package/src/http-backend/utils.ts

@@ -1,25 +0,0 @@
-/**
- * Determine whether the given `maybePromise` is a Promise.
- *
- * @param {*} maybePromise
- *
- * @returns {Boolean}
- */
-function isPromise(maybePromise: any) {
-  return !!maybePromise && typeof maybePromise.then === 'function'
-}
-
-/**
- * Convert any value to a Promise than will resolve to this value.
- *
- * @param {*} maybePromise
- *
- * @returns {Promise}
- */
-export function makePromise(maybePromise: any) {
-  if (isPromise(maybePromise)) {
-    return maybePromise
-  }
-
-  return Promise.resolve(maybePromise)
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-export * from './config'
-export * from './localize'
-export * from './ox-i18n'
-export * from './ox-i18n-selector'

package/src/localize.ts

@@ -1,42 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { i18n } from 'i18next'
-import { LitElement } from 'lit'
-
-type Constructor<T = {}> = new (...args: any[]) => T
-
-export const localize =
-  (i18next: i18n) =>
-  <T extends Constructor<LitElement>>(superClass: T) => {
-    class LocalizedElement extends superClass {
-      private declare languageUpdated?: (i18next: i18n) => void
-      private __i18next_callback__?: () => void
-
-      connectedCallback() {
-        var callback = () => {
-          this.languageUpdated && this.languageUpdated(i18next)
-          this.requestUpdate()
-        }
-
-        i18next.on('initialized', callback)
-        i18next.on('languageChanged', callback)
-        i18next.store.on('added', callback)
-
-        this.__i18next_callback__ = callback
-
-        super.connectedCallback()
-      }
-
-      disconnectedCallback() {
-        super.connectedCallback()
-
-        i18next.off('initialized', this.__i18next_callback__)
-        i18next.off('languageChanged', this.__i18next_callback__)
-        i18next.store.off('added', this.__i18next_callback__)
-      }
-    }
-
-    return LocalizedElement as Constructor<LitElement> & T
-  }

package/src/ox-i18n-selector.ts

@@ -1,71 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('ox-i18n-selector')
-export class I18nSelector extends LitElement {
-  static styles = css`
-    * {
-      box-sizing: border-box;
-    }
-    *:focus {
-      outline: none;
-    }
-    select {
-      border: var(--i18n-selector-field-border, var(--input-field-border));
-      border-radius: var(--i18n-selector-field-border-radius, 0);
-      background-color: var(--i18n-selector-field-background-color, var(--md-sys-color-surface));
-      margin: var(--i18n-selector-field-margin, 0);
-      padding: var(--i18n-selector-field-padding, 0);
-      font: var(--i18n-selector-field-font, var(--input-field-font));
-      font-size: var(--i18n-selector-field-font-size, 15px);
-      width: var(--i18n-selector-field-width, 100%);
-      color: var(--i18n-selector-field-color, var(--md-sys-color-on-surface));
-    }
-    select:focus {
-      border: 1px solid var(--focus-background-color);
-    }
-    option {
-      background-color: var(--md-sys-color-on-primary-container, #585858);
-      color: var(--md-sys-color-surface, #fff);
-    }
-
-    ::placeholder {
-      font-size: 0.8rem;
-      text-transform: capitalize;
-    }
-  `
-
-  @property({ type: String, attribute: true }) value: string = ''
-  @property({ type: Array }) languages: { code: string; display: string }[] = []
-
-  render() {
-    const value = this.value
-
-    return html`
-      <select .value=${this.value} @change=${(e: Event) => this.onLocaleChanged((e.target as HTMLSelectElement).value)}>
-        <option value="" ?selected=${!value}></option>
-        ${(this.languages || []).map(
-          ({ code, display }) => html`
-            <option value=${code} ?selected=${value?.startsWith(code.substring(0, 2))}>${display}</option>
-          `
-        )}
-      </select>
-    `
-  }
-
-  async onLocaleChanged(value: string) {
-    if (!value) {
-      return
-    }
-
-    this.value = value
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        composed: true,
-        bubbles: true,
-        detail: value
-      })
-    )
-  }
-}

package/src/ox-i18n.ts

@@ -1,18 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { html, LitElement, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next } from './config'
-import { localize } from './localize'
-
-@customElement('ox-i18n')
-export class OxI18n extends localize(i18next)(LitElement) {
-  @property({ type: String }) msgid!: string
-
-  render() {
-    return html`<span>${i18next.t(this.msgid)}</span>`
-  }
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr')
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development']
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  esbuildTarget: 'auto',
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ]
-
-  // See documentation for all available options
-})

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});