@gringow/gringow-react 0.0.4 → 0.0.5

package/dist/gringow-component.d.mts

@@ -0,0 +1,17 @@
+declare class GringowComponent extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    private cacheId;
+    private cache;
+    private flatten;
+    private message;
+    private gringowElement;
+    private _lang;
+    get lang(): string;
+    set lang(value: string);
+    constructor();
+    private languageChangedListener;
+    private updateMessage;
+    private initializeShadowRoot;
+}
+
+export { GringowComponent };

package/dist/gringow-component.mjs

@@ -0,0 +1,124 @@
+import { GRINGOW_IO_URL } from '@gringow/gringow/browser';
+
+// src/gringow-event.ts
+var LanguageChangeEvent = class _LanguageChangeEvent extends CustomEvent {
+  static EVENT_NAME = "language-change";
+  constructor(detail) {
+    super(_LanguageChangeEvent.EVENT_NAME, {
+      detail: {
+        lang: detail.lang ?? "en-US",
+        timestamp: detail.timestamp || Date.now()
+      },
+      bubbles: true,
+      cancelable: true
+    });
+  }
+  static create(lang) {
+    return new _LanguageChangeEvent({ lang });
+  }
+};
+var GringowStoreSingleton = class _GringowStoreSingleton {
+  static instance = null;
+  #cache = null;
+  #cacheUrl;
+  #gringowIoToken;
+  #defaultLanguage;
+  constructor() {
+  }
+  static getInstance() {
+    if (!_GringowStoreSingleton.instance) {
+      _GringowStoreSingleton.instance = new _GringowStoreSingleton();
+    }
+    return _GringowStoreSingleton.instance;
+  }
+  set defaultLanguage(value) {
+    this.#defaultLanguage = value ?? "en-US";
+  }
+  get defaultLanguage() {
+    return this.#defaultLanguage;
+  }
+  set cacheUrl(value) {
+    this.#cacheUrl = value;
+    this.fetchCache();
+  }
+  get cacheUrl() {
+    if (!this.#cacheUrl) {
+      throw new Error("Cache URL is not set");
+    }
+    return this.#cacheUrl;
+  }
+  set gringowIoToken(value) {
+    this.#gringowIoToken = value;
+    this.#cacheUrl = `${GRINGOW_IO_URL}?token=${this.#gringowIoToken}`;
+    this.fetchCache();
+  }
+  get gringowIoToken() {
+    return this.#gringowIoToken;
+  }
+  get cache() {
+    return this.#cache;
+  }
+  set cache(value) {
+    this.#cache = value;
+  }
+  async fetchCache(force = false) {
+    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;
+  }
+};
+var GringowStore = GringowStoreSingleton.getInstance();
+
+// src/gringow-component.ts
+var GringowComponent = class extends HTMLElement {
+  shadowRoot;
+  cacheId;
+  cache;
+  flatten;
+  message;
+  gringowElement;
+  _lang = GringowStore.defaultLanguage;
+  get lang() {
+    return this._lang;
+  }
+  set lang(value) {
+    this._lang = value ?? GringowStore.defaultLanguage;
+    this.updateMessage(this._lang);
+  }
+  constructor() {
+    super();
+    this.initializeShadowRoot();
+    window.addEventListener(LanguageChangeEvent.EVENT_NAME, this.languageChangedListener.bind(this));
+  }
+  languageChangedListener(event) {
+    if (this.lang !== event.detail.lang) {
+      this.lang = event.detail.lang;
+    }
+    this.updateMessage(event.detail.lang);
+  }
+  updateMessage(lang) {
+    this.gringowElement = this.shadowRoot.host;
+    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>`;
+  }
+  initializeShadowRoot() {
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    this.updateMessage(this.lang);
+  }
+};
+
+export { GringowComponent };

package/dist/gringow-event.d.mts

@@ -0,0 +1,11 @@
+interface LanguageChangeEventDetail {
+    lang: string;
+    timestamp?: number;
+}
+declare class LanguageChangeEvent extends CustomEvent<LanguageChangeEventDetail> {
+    static readonly EVENT_NAME = "language-change";
+    constructor(detail: LanguageChangeEventDetail);
+    static create(lang: string): LanguageChangeEvent;
+}
+
+export { LanguageChangeEvent, type LanguageChangeEventDetail };

package/dist/gringow-event.mjs

@@ -0,0 +1,19 @@
+// src/gringow-event.ts
+var LanguageChangeEvent = class _LanguageChangeEvent extends CustomEvent {
+  static EVENT_NAME = "language-change";
+  constructor(detail) {
+    super(_LanguageChangeEvent.EVENT_NAME, {
+      detail: {
+        lang: detail.lang ?? "en-US",
+        timestamp: detail.timestamp || Date.now()
+      },
+      bubbles: true,
+      cancelable: true
+    });
+  }
+  static create(lang) {
+    return new _LanguageChangeEvent({ lang });
+  }
+};
+
+export { LanguageChangeEvent };

package/dist/gringow-store.d.mts

@@ -0,0 +1,20 @@
+import { GringowCache } from '@gringow/gringow';
+
+declare class GringowStoreSingleton {
+    #private;
+    private static instance;
+    private constructor();
+    static getInstance(): GringowStoreSingleton;
+    set defaultLanguage(value: string);
+    get defaultLanguage(): string;
+    set cacheUrl(value: string);
+    get cacheUrl(): string;
+    set gringowIoToken(value: string);
+    get gringowIoToken(): string;
+    get cache(): GringowCache;
+    set cache(value: GringowCache);
+    fetchCache(force?: boolean): Promise<GringowCache>;
+}
+declare const GringowStore: GringowStoreSingleton;
+
+export { GringowStore };

package/dist/gringow-store.mjs

@@ -0,0 +1,68 @@
+import { GRINGOW_IO_URL } from '@gringow/gringow/browser';
+
+// src/gringow-store.ts
+var GringowStoreSingleton = class _GringowStoreSingleton {
+  static instance = null;
+  #cache = null;
+  #cacheUrl;
+  #gringowIoToken;
+  #defaultLanguage;
+  constructor() {
+  }
+  static getInstance() {
+    if (!_GringowStoreSingleton.instance) {
+      _GringowStoreSingleton.instance = new _GringowStoreSingleton();
+    }
+    return _GringowStoreSingleton.instance;
+  }
+  set defaultLanguage(value) {
+    this.#defaultLanguage = value ?? "en-US";
+  }
+  get defaultLanguage() {
+    return this.#defaultLanguage;
+  }
+  set cacheUrl(value) {
+    this.#cacheUrl = value;
+    this.fetchCache();
+  }
+  get cacheUrl() {
+    if (!this.#cacheUrl) {
+      throw new Error("Cache URL is not set");
+    }
+    return this.#cacheUrl;
+  }
+  set gringowIoToken(value) {
+    this.#gringowIoToken = value;
+    this.#cacheUrl = `${GRINGOW_IO_URL}?token=${this.#gringowIoToken}`;
+    this.fetchCache();
+  }
+  get gringowIoToken() {
+    return this.#gringowIoToken;
+  }
+  get cache() {
+    return this.#cache;
+  }
+  set cache(value) {
+    this.#cache = value;
+  }
+  async fetchCache(force = false) {
+    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;
+  }
+};
+var GringowStore = GringowStoreSingleton.getInstance();
+
+export { GringowStore };

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import React from 'react';
+export { GringowComponent } from './gringow-component.mjs';
+export { LanguageChangeEvent, LanguageChangeEventDetail } from './gringow-event.mjs';
+export { GringowStore } from './gringow-store.mjs';
+import '@gringow/gringow';
+
+declare function g(strings: TemplateStringsArray, ...values: Array<unknown>): React.ReactNode;
+
+declare const gringowReact: {};
+
+export { gringowReact as default, g };

package/dist/index.mjs

@@ -0,0 +1,161 @@
+import { GRINGOW_IO_URL, flatTemplateString, createCacheId } from '@gringow/gringow/browser';
+import React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/g.tsx
+
+// src/gringow-event.ts
+var LanguageChangeEvent = class _LanguageChangeEvent extends CustomEvent {
+  static EVENT_NAME = "language-change";
+  constructor(detail) {
+    super(_LanguageChangeEvent.EVENT_NAME, {
+      detail: {
+        lang: detail.lang ?? "en-US",
+        timestamp: detail.timestamp || Date.now()
+      },
+      bubbles: true,
+      cancelable: true
+    });
+  }
+  static create(lang) {
+    return new _LanguageChangeEvent({ lang });
+  }
+};
+var GringowStoreSingleton = class _GringowStoreSingleton {
+  static instance = null;
+  #cache = null;
+  #cacheUrl;
+  #gringowIoToken;
+  #defaultLanguage;
+  constructor() {
+  }
+  static getInstance() {
+    if (!_GringowStoreSingleton.instance) {
+      _GringowStoreSingleton.instance = new _GringowStoreSingleton();
+    }
+    return _GringowStoreSingleton.instance;
+  }
+  set defaultLanguage(value) {
+    this.#defaultLanguage = value ?? "en-US";
+  }
+  get defaultLanguage() {
+    return this.#defaultLanguage;
+  }
+  set cacheUrl(value) {
+    this.#cacheUrl = value;
+    this.fetchCache();
+  }
+  get cacheUrl() {
+    if (!this.#cacheUrl) {
+      throw new Error("Cache URL is not set");
+    }
+    return this.#cacheUrl;
+  }
+  set gringowIoToken(value) {
+    this.#gringowIoToken = value;
+    this.#cacheUrl = `${GRINGOW_IO_URL}?token=${this.#gringowIoToken}`;
+    this.fetchCache();
+  }
+  get gringowIoToken() {
+    return this.#gringowIoToken;
+  }
+  get cache() {
+    return this.#cache;
+  }
+  set cache(value) {
+    this.#cache = value;
+  }
+  async fetchCache(force = false) {
+    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;
+  }
+};
+var GringowStore = GringowStoreSingleton.getInstance();
+
+// src/gringow-component.ts
+var GringowComponent = class extends HTMLElement {
+  shadowRoot;
+  cacheId;
+  cache;
+  flatten;
+  message;
+  gringowElement;
+  _lang = GringowStore.defaultLanguage;
+  get lang() {
+    return this._lang;
+  }
+  set lang(value) {
+    this._lang = value ?? GringowStore.defaultLanguage;
+    this.updateMessage(this._lang);
+  }
+  constructor() {
+    super();
+    this.initializeShadowRoot();
+    window.addEventListener(LanguageChangeEvent.EVENT_NAME, this.languageChangedListener.bind(this));
+  }
+  languageChangedListener(event) {
+    if (this.lang !== event.detail.lang) {
+      this.lang = event.detail.lang;
+    }
+    this.updateMessage(event.detail.lang);
+  }
+  updateMessage(lang) {
+    this.gringowElement = this.shadowRoot.host;
+    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>`;
+  }
+  initializeShadowRoot() {
+    this.shadowRoot = this.attachShadow({ mode: "open" });
+    this.updateMessage(this.lang);
+  }
+};
+var ELEMENT_NAME = "g-gringow";
+function g(strings, ...values) {
+  const [elementShow, setElementShow] = React.useState(false);
+  const [cache, setCache] = React.useState();
+  const ref = React.useRef(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 /* @__PURE__ */ jsx(React.Suspense, { fallback: flatten, children: Boolean(cache) && /* @__PURE__ */ jsx("g-gringow", { ref, id: cacheId, children: /* @__PURE__ */ jsx("g-outlet", { slot: cacheId, children: flatten }) }) });
+}
+
+// src/index.ts
+var gringowReact = {};
+var index_default = gringowReact;
+
+export { GringowComponent, GringowStore, LanguageChangeEvent, index_default as default, g };

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@gringow/gringow-react",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React bindings for Gringow AI-powered translation tool",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.mjs",

package/src/g.tsx

@@ -1,51 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

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

package/tsconfig.json

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

package/tsup.config.ts

@@ -1,21 +0,0 @@
-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',
-})