@gringow/gringow-react 0.0.1

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@gringow/gringow-react",
+  "version": "0.0.1",
+  "description": "React bindings for Gringow AI-powered translation tool",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "author": "Renato Gaspar <rntgspr@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "tsup": "8.5.0",
+    "typescript": "5.8.3"
+  },
+  "dependencies": {
+    "@gringow/gringow": "0.0.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
+  },
+  "scripts": {
+    "build": "rm -rf ./dist/* ./tsconfig.tsbuildinfo && tsup",
+    "watch": "pnpm run build && tsup --watch --config ../tsup.config.ts",
+    "__postinstall": "pnpm run build",
+    "test": "echo \"Warning: no test specified\" && exit 0"
+  }
+}

package/src/g.tsx

@@ -0,0 +1,51 @@
+import { createCacheId, flatTemplateString } from '@gringow/gringow/browser'
+import React from 'react'
+
+import { GringowComponent } from './gringow-component'
+import { GringowStore } from './gringow-store'
+
+import type { GringowCache } from '@gringow/gringow'
+
+const ELEMENT_NAME = 'g-gringow'
+
+export function g(strings: TemplateStringsArray, ...values: Array<unknown>): React.ReactNode {
+  const [elementShow, setElementShow] = React.useState(false)
+  const [cache, setCache] = React.useState<GringowCache | undefined>()
+  const ref = React.useRef<GringowComponent>(null)
+
+  const flatten = flatTemplateString(strings, values)
+  const cacheId = createCacheId(flatten)
+
+  React.useEffect(() => {
+    React.startTransition(async () => {
+      await GringowStore.fetchCache()
+      setCache(GringowStore.cache)
+    })
+  }, [])
+
+  React.useEffect(() => {
+    if (!window.customElements.get(ELEMENT_NAME)) {
+      window.customElements.define(ELEMENT_NAME, GringowComponent)
+    }
+  })
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.lang = GringowStore.defaultLanguage
+      ref.current.cacheId = cacheId
+      ref.current.cache = cache[cacheId]
+      ref.current.flatten = flatten
+      if (!elementShow) setElementShow(true)
+    }
+  })
+
+  return (
+    <React.Suspense fallback={flatten}>
+      {Boolean(cache) && (
+        <g-gringow ref={ref} id={cacheId}>
+          <g-outlet slot={cacheId}>{flatten}</g-outlet>
+        </g-gringow>
+      )}
+    </React.Suspense>
+  )
+}

package/src/gringow-component.ts

@@ -0,0 +1,58 @@
+import { LanguageChangeEvent } from './gringow-event'
+import { GringowStore } from './gringow-store'
+
+import type { GringowCacheItem } from '@gringow/gringow'
+
+type GringowElement = Element & { cache: GringowCacheItem; cacheId: string }
+
+class GringowComponent extends HTMLElement {
+  public shadowRoot: ShadowRoot
+  private cacheId: string
+  private cache: GringowCacheItem
+  private flatten: string
+  private message: string
+  private gringowElement: GringowElement
+
+  private _lang: string = GringowStore.defaultLanguage
+
+  get lang() {
+    return this._lang
+  }
+
+  set lang(value: string) {
+    this._lang = value ?? GringowStore.defaultLanguage
+    this.updateMessage(this._lang)
+  }
+
+  constructor() {
+    super()
+    this.initializeShadowRoot()
+
+    window.addEventListener(LanguageChangeEvent.EVENT_NAME, this.languageChangedListener.bind(this))
+  }
+
+  private languageChangedListener(event: LanguageChangeEvent) {
+    if (this.lang !== event.detail.lang) {
+      this.lang = event.detail.lang
+    }
+
+    this.updateMessage(event.detail.lang)
+  }
+
+  private updateMessage(lang: string) {
+    this.gringowElement = this.shadowRoot.host as GringowElement
+    this.cacheId = this.gringowElement.cacheId
+    this.cache = this.gringowElement.cache
+
+    this.message = this.cache?.translation?.[lang] ?? this.cache?.original ?? this.flatten
+
+    this.shadowRoot.innerHTML = `<slot>${this.message}</slot>`
+  }
+
+  private initializeShadowRoot() {
+    this.shadowRoot = this.attachShadow({ mode: 'open' })
+    this.updateMessage(this.lang)
+  }
+}
+
+export { GringowComponent }

package/src/gringow-event.ts

@@ -0,0 +1,23 @@
+export interface LanguageChangeEventDetail {
+  lang: string
+  timestamp?: number
+}
+
+export class LanguageChangeEvent extends CustomEvent<LanguageChangeEventDetail> {
+  static readonly EVENT_NAME = 'language-change'
+
+  constructor(detail: LanguageChangeEventDetail) {
+    super(LanguageChangeEvent.EVENT_NAME, {
+      detail: {
+        lang: detail.lang ?? 'en-US',
+        timestamp: detail.timestamp || Date.now(),
+      },
+      bubbles: true,
+      cancelable: true,
+    })
+  }
+
+  static create(lang: string): LanguageChangeEvent {
+    return new LanguageChangeEvent({ lang })
+  }
+}

package/src/gringow-store.ts

@@ -0,0 +1,83 @@
+import { GRINGOW_IO_URL } from '@gringow/gringow/browser'
+
+import type { GringowCache } from '@gringow/gringow'
+
+class GringowStoreSingleton {
+  private static instance: GringowStoreSingleton | null = null
+  #cache: GringowCache | null = null
+  #cacheUrl: string
+  #gringowIoToken: string
+  #defaultLanguage: string
+
+  private constructor() {}
+
+  public static getInstance(): GringowStoreSingleton {
+    if (!GringowStoreSingleton.instance) {
+      GringowStoreSingleton.instance = new GringowStoreSingleton()
+    }
+    return GringowStoreSingleton.instance
+  }
+
+  public set defaultLanguage(value: string) {
+    this.#defaultLanguage = value ?? 'en-US'
+  }
+
+  public get defaultLanguage() {
+    return this.#defaultLanguage
+  }
+
+  public set cacheUrl(value: string) {
+    this.#cacheUrl = value
+    this.fetchCache()
+  }
+
+  public get cacheUrl() {
+    if (!this.#cacheUrl) {
+      throw new Error('Cache URL is not set')
+    }
+
+    return this.#cacheUrl
+  }
+
+  public set gringowIoToken(value: string) {
+    this.#gringowIoToken = value
+    this.#cacheUrl = `${GRINGOW_IO_URL}?token=${this.#gringowIoToken}`
+    this.fetchCache()
+  }
+
+  public get gringowIoToken() {
+    return this.#gringowIoToken
+  }
+
+  public get cache() {
+    return this.#cache
+  }
+
+  public set cache(value: GringowCache) {
+    this.#cache = value
+  }
+
+  public async fetchCache(force: boolean = false): Promise<GringowCache> {
+    if (!this.#cacheUrl) {
+      throw new Error('Cache URL is not set')
+    }
+
+    if (!this.cache || force) {
+      try {
+        const response = await fetch(this.#cacheUrl)
+        if (!response.ok) {
+          throw new Error('Failed to fetch gringow cache')
+        }
+
+        this.cache = await response.json()
+      } catch (error) {
+        throw new Error('Failed to fetch gringow cache', { cause: error })
+      }
+    }
+
+    return this.cache
+  }
+}
+
+const GringowStore = GringowStoreSingleton.getInstance()
+export { GringowStore }

package/src/index.ts

@@ -0,0 +1,8 @@
+const gringowReact = {}
+
+export default gringowReact
+
+export * from './g'
+export * from './gringow-component'
+export * from './gringow-event'
+export * from './gringow-store'

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "jsx": "react-jsx",
+    "outDir": "./dist"
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/**/*.ts'],
+  // format: ["cjs", "esm"],
+  format: ['esm'],
+  dts: true,
+  splitting: false,
+  sourcemap: false,
+  clean: true,
+  treeshake: 'safest',
+  minify: false,
+  outDir: 'dist',
+  target: 'esnext',
+  outExtension({ format }) {
+    return {
+      js: format === 'cjs' ? '.js' : '.mjs',
+    }
+  },
+  onSuccess: 'tsc-alias --verbose',
+})