glotstack 0.0.11 → 0.0.14

package/src/index.tsx

@@ -1,518 +0,0 @@
-import * as React from 'react'
-import { merge } from './util/object'
-
-export type LocaleRegion = string
-
-
-export interface TranslationLeaf {
-  value: string
-  context?: string
-}
-
-export interface Translations {
-  [key: string]: Translations | TranslationLeaf
-}
-
-interface TranslateOptsBase {
-  locale?: LocaleRegion
-  assigns?: Record<string, React.ReactNode>
-}
-
-export type TranslateFn = {
-  (key: string, opts: TranslateOptsBase & { asString: true }): string
-  (
-    key: string,
-    opts?: TranslateOptsBase & { asString?: false },
-  ): React.ReactNode
-}
-
-
-export interface ContextType {
-  translations: Record<string, Translations>
-  locale: string | null
-  loadTranslations: (locale: LocaleRegion) => Promise<Translations>
-  setLocale: (locale: LocaleRegion) => void
-  importMethod: (locale: LocaleRegion) => Promise<Translations>
-  t: TranslateFn
-}
-
-export const GlotstackContext = React.createContext<ContextType>({
-  translations: {},
-  loadTranslations: () => { throw new Error('no import method set') },
-  setLocale: (_locale: LocaleRegion) => { throw new Error('import method not set') },
-  locale: null,
-  importMethod: (_locale: LocaleRegion) => { throw new Error('import method not set') },
-  t: () => { throw new Error('import method not set') },
-})
-
-interface GlotstackProviderProps {
-  children: React.ReactNode
-  initialTranslations?: Record<string, Translations>
-  initialLocale?: LocaleRegion
-  onTranslationLoaded?: (locale: LocaleRegion, translations: Translations) => void
-  onLocaleChange?: (locale: LocaleRegion) => void
-  importMethod: ContextType['importMethod']
-  ssr?: boolean
-}
-
-export enum LogLevel {
-  DEBUG = 0,
-  LOG = 1,
-  INFO = 2,
-  WARNING = 3,
-  ERROR = 4,
-}
-
-const LogName = {
-  [LogLevel.DEBUG]: 'debug',
-  [LogLevel.LOG]: 'log',
-  [LogLevel.INFO]: 'info',
-  [LogLevel.WARNING]: 'warning',
-  [LogLevel.ERROR]: 'error',
-} as const
-
-const LogLevelToFunc: Record<LogLevel, (...args: Parameters<typeof console.info>) => void> = {
-  [LogLevel.DEBUG]: console.debug,
-  [LogLevel.INFO]: console.info,
-  [LogLevel.LOG]: console.log,
-  [LogLevel.WARNING]: console.warn,
-  [LogLevel.ERROR]: console.error,
-} as const
-
-let logLevel: LogLevel = LogLevel.DEBUG
-
-export const setLogLevel = (level: LogLevel) => {
-  logLevel = level
-}
-
-const makeLoggingFunction = (level: LogLevel) => (...args: Parameters<typeof console.info>) => {
-  const func = LogLevelToFunc[level]
-  if (level < logLevel) {
-    return
-  }
-  return func(`[${LogName[level]}][glotstack.ai]`, ...args)
-}
-
-const logger = {
-  debug: makeLoggingFunction(LogLevel.DEBUG),
-  info: makeLoggingFunction(LogLevel.INFO),
-  warn: makeLoggingFunction(LogLevel.WARNING),
-  error: makeLoggingFunction(LogLevel.ERROR),
-
-}
-
-export const access = (key: string, locale: LocaleRegion, translations: Translations) => {
-  if (translations == null) {
-    return key
-  }
-  const access = [...key.split('.')] as [LocaleRegion, ...string[]]
-  const localeTranslations = translations?.[locale]
-
-  if (localeTranslations == null) {
-    return key
-  }
-
-  const value = access.reduce((acc: Translations[string], key) => {
-    // @ts-expect-error expected
-    return acc?.[key]
-  }, localeTranslations)
-
-  return (value?.value ?? key) as string
-}
-
-
-function isAsStringTrue(
-  opts: (TranslateOptsBase & { asString?: boolean }) | undefined,
-): opts is TranslateOptsBase & { asString: true } {
-  return opts?.asString === true
-}
-
-function translate(
-  key: string,
-  opts: {
-    locale?: LocaleRegion
-    assigns?: Record<string, React.ReactNode>
-    asString?: boolean
-    glotstack: ReturnType<typeof useGlotstack>
-    globalLocale: LocaleRegion
-    translations: Record<LocaleRegion, Translations>
-    localeRef: React.MutableRefObject<LocaleRegion>
-    accessedRef: React.MutableRefObject<Record<string, Record<string, string>>>
-    extractionsRef: React.MutableRefObject<
-      Record<
-        string,
-        Record<string, ParsedSimplePlaceholder[] | undefined> | undefined
-      >
-    >
-    outputRef: React.MutableRefObject<
-      Record<string, Record<string, React.ReactNode | undefined> | undefined>
-    >
-  },
-): string | React.ReactNode {
-  const {
-    glotstack,
-    globalLocale,
-    translations,
-    localeRef,
-    accessedRef,
-    extractionsRef,
-    outputRef,
-  } = opts
-  const locale = opts?.locale ?? globalLocale
-  localeRef.current = locale
-  glotstack.loadTranslations(localeRef.current)
-
-  let string = ''
-  if (translations != null) {
-    string = access(key, locale, translations ?? {})
-  }
-
-  if (string === key) return key
-
-  if (outputRef.current == null) {
-    outputRef.current = {}
-  }
-
-  if (!outputRef.current[locale]) {
-    outputRef.current[locale] = {}
-  }
-
-  if (!accessedRef.current[locale]) {
-    accessedRef.current[locale] = {}
-  }
-
-  if (
-    outputRef.current[locale]?.[key] != null &&
-    string === accessedRef.current[locale]?.[key]
-  ) {
-    return outputRef.current[locale]![key]
-  }
-
-  accessedRef.current[locale] ??= {}
-  accessedRef.current[locale][key] = string
-
-  extractionsRef.current[locale] ??= {}
-  if (!extractionsRef.current[locale]![key]) {
-    const newExtractions = extractSimplePlaceholders(string)
-    extractionsRef.current[locale]![key]! = newExtractions
-  }
-
-  if (outputRef.current[locale] == null) {
-    outputRef.current[locale] = {}
-  }
-
-  if (outputRef.current[locale]![key] == null) {
-    const output = renderPlaceholdersToNodes(
-      string,
-      extractionsRef.current[locale]![key]!,
-      opts?.assigns ?? {},
-    )
-    outputRef.current[locale]![key] = output
-  }
-
-  let output = outputRef.current[locale]![key]
-
-  if (isAsStringTrue(opts)) {
-    // Convert any possible value to string safely
-    output = Array.isArray(output)
-      ? output.join('')
-      : typeof output === 'string'
-        ? output
-        : String(output ?? '')
-
-    if (outputRef.current != null) {
-      outputRef.current[locale]![key] = output
-    }
-  }
-  return output as React.ReactNode
-}
-
-function createTranslate(
-  glotstack: ReturnType<typeof useGlotstack>,
-  globalLocale: LocaleRegion,
-  translations: Record<LocaleRegion, Translations>,
-  localeRef: React.MutableRefObject<LocaleRegion>,
-  accessedRef: React.MutableRefObject<Record<string, Record<string, string>>>,
-  extractionsRef: React.MutableRefObject<
-    Record<
-      string,
-      Record<string, ParsedSimplePlaceholder[] | undefined> | undefined
-    >
-  >,
-  outputRef: React.MutableRefObject<
-    Record<string, Record<string, React.ReactNode | undefined> | undefined>
-  >,
-): TranslateFn {
-  function t(
-    key: string,
-    opts?: {
-      locale?: LocaleRegion
-      assigns?: Record<string, React.ReactNode>
-      asString: true
-    },
-  ): string
-  function t(
-    key: string,
-    opts?: {
-      locale?: LocaleRegion
-      assigns?: Record<string, React.ReactNode>
-      asString?: false
-    },
-  ): React.ReactNode
-  function t(
-    key: string,
-    opts?: {
-      locale?: LocaleRegion
-      assigns?: Record<string, React.ReactNode>
-      asString?: boolean
-    },
-  ) {
-    return translate(
-      key,
-      merge<Parameters<typeof translate>[1]>(
-        {
-          glotstack,
-          globalLocale,
-          translations,
-          localeRef,
-          accessedRef,
-          extractionsRef,
-          outputRef,
-        },
-        opts ?? {},
-      ),
-    )
-  }
-
-  return t
-}
-
-// export const useReduxGlotstack = () => {
-//   const glotstack = useGlotstack()
-//   const globalLocale = useSelector(selectLocale)
-//   const localeRef = React.useRef(globalLocale)
-//   localeRef.current = globalLocale
-
-//   const translations = useSelector(selectTranslations)
-
-//   React.useEffect(() => {
-//     glotstack.loadTranslations(localeRef.current)
-//   }, [localeRef.current])
-
-//   const accessedRef = React.useRef<Record<string, Record<string, string>>>({})
-//   const extractionsRef = React.useRef<
-//     Record<string, Record<string, ParsedSimplePlaceholder[]>>
-//   >({})
-//   const outputRef = React.useRef<
-//     Record<string, Record<string, React.ReactNode>>
-//   >({})
-
-//   const t: TranslateFn = React.useMemo(() => {
-//     return createTranslate(
-//       glotstack,
-//       globalLocale,
-//       translations ?? {},
-//       localeRef,
-//       accessedRef,
-//       extractionsRef,
-//       outputRef,
-//     )
-//   }, [globalLocale, translations])
-
-//   return { t }
-// }
-
-export const GlotstackProvider = ({ children, initialLocale, initialTranslations, onLocaleChange, onTranslationLoaded, importMethod }: GlotstackProviderProps) => {
-  if (initialLocale == null) {
-    throw new Error('initialLocale must be set')
-  }
-  const [locale, setLocale] = React.useState<LocaleRegion>(initialLocale)
-  const translationsRef = React.useRef<Record<string, Translations> | null>(initialTranslations || null)
-  const accessedRef = React.useRef<Record<string, Record<string, string>>>({})
-  const outputRef = React.useRef<Record<string, Record<string, React.ReactNode>>>({})
-  const extractionsRef = React.useRef<Record<string, Record<string, ParsedSimplePlaceholder[]>>>({})
-  const loadingRef = React.useRef<Record<string, Promise<Translations>>>({})
-  const localeRef = React.useRef<string>('en-US')
-
-  const loadTranslations = React.useCallback(async (locale: string, opts?: { force?: boolean }) => {
-    // TODO: if translations are loaded only reload if some condition is
-    try {
-      if (loadingRef.current?.[locale] != null && opts?.force != true) {
-        logger.debug('Waiting for translations already loading', locale)
-        return (await loadingRef.current?.[locale])
-      }
-      if (translationsRef.current?.[locale] != null && opts?.force != true) {
-        logger.debug('Skipping load for translations', locale, translationsRef.current?.[locale], translationsRef.current)
-        return translationsRef.current?.[locale]
-      }
-      if (loadingRef.current != null) {
-        logger.debug('Loading translations', locale, merge({}, translationsRef.current ?? {}))
-        loadingRef.current[locale] = importMethod(locale)
-      }
-      const result = await loadingRef.current[locale]
-
-      if (result == null) {
-        throw new Error(`Failed to load translation ${locale} ${JSON.stringify(result)}`)
-      }
-      if (translationsRef.current) {
-        translationsRef.current[locale] = result
-      }
-      onTranslationLoaded?.(locale, result)
-      return result
-    } catch (err) {
-      logger.error('Unable to import translations', err)
-      throw err
-    }
-  }, [importMethod, onTranslationLoaded])
-
-  React.useEffect(() => {
-    const run = async () => {
-      onLocaleChange?.(locale)
-      await loadTranslations(locale)
-    }
-    React.startTransition(() => {
-      run()
-    })
-  }, [locale])
-
-  const context = React.useMemo(() => {
-    const context: ContextType = {
-      setLocale,
-      translations: translationsRef.current ?? {},
-      locale,
-      importMethod,
-      loadTranslations,
-      t: () => '',
-    }
-    localeRef.current = locale
-
-    const t = createTranslate(
-      context,
-      context.locale ?? 'en-US',
-      context.translations ?? {},
-      localeRef,
-      accessedRef,
-      extractionsRef,
-      outputRef,
-    )
-
-    context.t = t
-    return context
-
-  }, [locale, importMethod, loadTranslations])
-
-  return <GlotstackContext.Provider value={context}>
-    {children}
-  </GlotstackContext.Provider>
-}
-
-export const useGlotstack = () => {
-  return React.useContext(GlotstackContext)
-}
-
-export const useTranslations = (_options?: Record<never, never>) => {
-  const context = React.useContext(GlotstackContext)
-  return context
-}
-
-
-export type ParsedSimplePlaceholder = {
-  key: string
-  options: string[]
-  raw: string
-  index: number
-  kind: 'doubleCurly' | 'component'
-}
-
-const curlyRegex = /(?<!\\)({{\s*([a-zA-Z0-9_]+)\s*(?:,\s*([^{}]*?))?\s*}})/g
-const componentRegex = /<([A-Z][a-zA-Z0-9]*)>([\s\S]*?)<\/\1>/g
-
-export function extractSimplePlaceholders(input: string): ParsedSimplePlaceholder[] {
-  const results: ParsedSimplePlaceholder[] = []
-
-  for (const match of input.matchAll(curlyRegex)) {
-    const raw = match[1]
-    const key = match[2]
-    const rawOptions = match[3]
-    const index = match.index ?? -1
-
-    const options = rawOptions
-      ? rawOptions.split(',').map(opt => opt.trim()).filter(Boolean)
-      : []
-
-    results.push({ key, options, raw, index, kind: 'doubleCurly' })
-  }
-
-  for (const match of input.matchAll(componentRegex)) {
-    const raw = match[0]
-    const key = match[1]
-    const index = match.index ?? -1
-
-    results.push({ key, options: [], raw, index, kind: 'component' })
-  }
-
-  return results.sort((a, b) => a.index - b.index)
-}
-
-type Renderer = (props: { children: React.ReactNode }) => React.ReactNode
-
-export function renderPlaceholdersToNodes(
-  input: string,
-  placeholders: ParsedSimplePlaceholder[],
-  assigns: Record<string, React.ReactNode | Renderer>
-): React.ReactNode[] {
-  const nodes: React.ReactNode[] = []
-  let cursor = 0
-
-  for (const { index, raw, key, kind } of placeholders) {
-    if (cursor < index) {
-      nodes.push(input.slice(cursor, index))
-    }
-    let value: React.ReactNode = raw
-
-    if (kind === 'component') {
-      const Render = assigns[key]
-      const inner = raw.replace(new RegExp(`^<${key}>`), '').replace(new RegExp(`</${key}>$`), '')
-
-      if (React.isValidElement(Render)) {
-        value = React.cloneElement(Render, {}, inner)
-      } else if (typeof Render === 'function') {
-        value = <Render>{inner}</Render>
-      } else {
-        logger.warn(`Invalid assign substitution for:\n\n  ${raw}\n\nDid you remember to pass assigns?\n`,
-          `
-t('key', { assigns: {
-  ${key}: <something />  // children will be copied via React.cloneElement
-}})\n\nor\n
-t('key', { assigns: {
-  ${key}: MyComponent  // component will be rendered with <Component/>
-}})\n
-`
-        )
-      }
-    } else if (kind === 'doubleCurly') {
-      const Render = assigns[key]
-      value = typeof Render !== 'function' ? Render : raw ?? raw
-    }
-    nodes.push(value)
-    cursor = index + raw.length
-  }
-
-  if (cursor < input.length) {
-    nodes.push(input.slice(cursor))
-  }
-
-  // Unescape \{{...}} to {{...}}, and wrap ReactNodes
-  return nodes.map((node, i) =>
-    typeof node === 'string'
-      ? node.replace(/\\({{[^{}]+}})/g, '$1')
-      : <React.Fragment key={i}>{node}</React.Fragment>
-  )
-}
-
-
-
-export function useRenderPlaceholdersToNodes(...args: Parameters<typeof renderPlaceholdersToNodes>) {
-  const nodes = React.useMemo(() => renderPlaceholdersToNodes(...args), [...args])
-  return nodes
-}

package/src/util/findConfig.ts

@@ -1,97 +0,0 @@
-import { existsSync } from 'fs'
-import { readFile } from 'fs/promises'
-import * as path from 'path'
-import { loadYaml } from './yaml'
-
-
-function dropKeys<T>(input: T | string, keysToDrop: string[]): T {
-  const obj = typeof input === 'string' ? JSON.parse(input) : structuredClone(input)
-
-  for (const path of keysToDrop) {
-    const segments = path.split('.')
-    let target: any = obj
-
-    for (let i = 0; i < segments.length - 1; i++) {
-      const key = segments[i]
-      const next = isNaN(Number(key)) ? key : Number(key)
-
-      if (target[next] === undefined) {
-        target = undefined
-        break
-      }
-      target = target[next]
-    }
-
-    if (target !== undefined) {
-      const finalKey = segments[segments.length - 1]
-      const final = isNaN(Number(finalKey)) ? finalKey : Number(finalKey)
-      delete target[final]
-    }
-  }
-
-  return obj
-}
-
-
-export interface GlotstackConfig {
-  outputDir?: string
-  sourcePath: string
-  sourceLocale: string
-  outputLocales: string[]
-  apiOrigin?: string
-  apiKey: string
-  projectId?: string
-}
-
-/**
- * Recursively looks for `.glotstack.json` from the current directory up to the root.
- * @param startDir The directory to start the search from. Defaults to process.cwd().
- * @returns The absolute path to the file if found, or null if not found.
- */
-export async function findGlotstackConfig(startDir: string = process.cwd()): Promise<GlotstackConfig | null> {
-  let currentDir = path.resolve(startDir)
-  let configPath = null
-
-  while (true) {
-    const jsonCandidate = path.join(currentDir, '.glotstack.json')
-    const yamlCandidate = path.join(currentDir, '.glotstack.yaml')
-    const jsonExists = existsSync(jsonCandidate)
-    const yamlExists = existsSync(yamlCandidate)
-    if (jsonExists && yamlExists) {
-      console.error('Both .glotstack.json and .glotstack.yaml exist, please delete one\n\n  json: ', jsonCandidate, '\n  yaml: ', yamlCandidate)
-      throw new Error('Two config formats cannot be used at the same time')
-
-    } else if (jsonExists) {
-      configPath = jsonCandidate
-    } else if (yamlExists) {
-      configPath = yamlCandidate
-    }
-
-    const parentDir = path.dirname(currentDir)
-    if (parentDir === currentDir) {
-      break // Reached root
-    }
-    currentDir = parentDir
-  }
-
-  let config: GlotstackConfig
-
-  if (configPath != null) {
-    console.info('Loading config file at ', configPath)
-    try {
-      const content = await readFile(configPath)
-      const text = content.toString()
-      if (path.parse(configPath).ext === '.yaml') {
-        config = loadYaml(text) as GlotstackConfig
-      } else {
-        config = JSON.parse(text)
-      }
-      console.info('Loaded config file', configPath, dropKeys(config, ["apiKey"]))
-      return config
-    } catch (err) {
-      console.warn('Could not load config', configPath)
-    }
-  }
-  console.warn('Could not find any .glotstack config files')
-  return null
-}

package/src/util/object.ts

@@ -1,47 +0,0 @@
-export function isObject(val: any): val is Record<string, any> {
-  return typeof val === 'object' && val !== null && !Array.isArray(val);
-}
-
-function _merge(target: any, source: any): any {
-  if (!isObject(target) || !isObject(source)) return target;
-
-  for (const key of Object.keys(source)) {
-    const srcVal = source[key];
-    const tgtVal = target[key];
-
-    if (Array.isArray(srcVal) && Array.isArray(tgtVal)) {
-      target[key] = tgtVal.concat(srcVal);
-    } else if (isObject(srcVal) && isObject(tgtVal)) {
-      _merge(tgtVal, srcVal);
-    } else {
-      target[key] = srcVal;
-    }
-  }
-
-  return target;
-}
-
-export function  merge<T extends object>(target: T, ...sources: Partial<T>[]): T {
-  return sources.reduce((previous, current) => _merge(previous, current), target) as T
-}
-
-export function isEqual(a: any, b: any): boolean {
-  if (a === b) return true;
-
-  if (typeof a !== typeof b || a == null || b == null) return false;
-
-  if (Array.isArray(a)) {
-    if (!Array.isArray(b) || a.length !== b.length) return false;
-    return a.every((val, i) => isEqual(val, b[i]));
-  }
-
-  if (typeof a === 'object') {
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) return false;
-
-    return aKeys.every(key => b.hasOwnProperty(key) && isEqual(a[key], b[key]));
-  }
-
-  return false;
-}

package/src/util/yaml.ts

@@ -1,11 +0,0 @@
-import yaml from 'js-yaml';
-
-
-export function loadYaml(yamlString: string) {
-  try {
-    return yaml.load(yamlString);
-  } catch (e) {
-    console.error('Error converting yaml to JSON', e)
-    throw new Error('Could not convert yaml to JSON')
-  }
-}

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "exclude": ["node_modules", "dist"],
-  "include": ["./src"],
-  "files": ["./types/global.d.ts"],
-  "compilerOptions": {
-    "outDir": "dist",
-    "target": "ES6",
-    "module": "CommonJS",
-    "declaration": true,
-    "strict": true,
-    "jsx": "react-jsx",
-    "sourceMap": true,
-    "baseUrl": ".",
-    "paths": {
-    },
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "strictNullChecks": true
-  }
-}

package/types/global.d.ts

@@ -1,7 +0,0 @@
-declare module '*.png'
-declare module '*.svg'
-declare module '*.jpeg'
-declare module '*.jpg'
-declare module '*.webp'
-declare module '*.lottie'
-declare module '*.json'