@gringow/gringow-react 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +9 -14
  2. package/dist/change-language.mjs +3 -1
  3. package/dist/g.mjs +8 -3
  4. package/dist/gid.d.mts +3 -0
  5. package/dist/gid.mjs +10 -0
  6. package/dist/gringow.d.mts +9 -0
  7. package/dist/gringow.mjs +24 -0
  8. package/dist/index.d.mts +2 -0
  9. package/dist/index.mjs +37 -7
  10. package/package.json +3 -3
package/README.md CHANGED
@@ -30,7 +30,7 @@ yarn add @gringow/gringow @gringow/gringow-react
30
30
  ### Requirements
31
31
 
32
32
  - **React 19+**
33
- - **A Gringow cache file** (generated by [@gringow/cli](https://www.npmjs.com/package/@gringow/gringow-cli) or [@gringow/gringow-vite](https://www.npmjs.com/package/@gringow/gringow-vite))
33
+ - **A Gringow cache file** (generated by [@gringow/gringow-cli](https://www.npmjs.com/package/@gringow/gringow-cli) or [@gringow/gringow-vite](https://www.npmjs.com/package/@gringow/gringow-vite))
34
34
 
35
35
  ## Quick Start
36
36
 
@@ -38,7 +38,6 @@ yarn add @gringow/gringow @gringow/gringow-react
38
38
 
39
39
  ```tsx
40
40
  // app-bootstrap.tsx (client-only)
41
- import '@gringow/gringow-react/browser'
42
41
  import { GringowStore } from '@gringow/gringow-react/store'
43
42
 
44
43
  // Configure store
@@ -115,7 +114,6 @@ function UserProfile({ user }: { user: { name: string; role: string } }) {
115
114
  // main.tsx
116
115
  import React from 'react'
117
116
  import ReactDOM from 'react-dom/client'
118
- import '@gringow/gringow-react/browser'
119
117
  import { GringowStore } from '@gringow/gringow-react/store'
120
118
  import App from './App'
121
119
 
@@ -166,7 +164,7 @@ export default function App() {
166
164
  // vite.config.ts
167
165
  import { defineConfig } from 'vite'
168
166
  import react from '@vitejs/plugin-react'
169
- import { GringowVitePlugin } from '@gringow/gringow-vite'
167
+ import GringowVitePlugin from '@gringow/gringow-vite'
170
168
 
171
169
  export default defineConfig({
172
170
  plugins: [
@@ -222,7 +220,7 @@ GringowStore.cache: GringowCache | null
222
220
  await GringowStore.fetchCache(): Promise<void>
223
221
 
224
222
  // Get translation for specific cache ID
225
- GringowStore.getCacheItem(cacheId: string): string | null
223
+ await GringowStore.getCacheItem(cacheId: string): Promise<string | null>
226
224
 
227
225
  // Manually set cache
228
226
  GringowStore.setCache(cache: GringowCache): void
@@ -232,8 +230,8 @@ GringowStore.setCache(cache: GringowCache): void
232
230
 
233
231
  `cacheUrl` resolution order:
234
232
  1. `GringowStore.cacheUrl` (programmatic)
235
- 2. `<meta name="gringow-cache-url" content="/path">`
236
- 3. `<html data-gringow-cache-url="/path">`
233
+ 2. `<html data-gringow-cache-url="/path">`
234
+ 3. `<meta name="gringow-cache-url" content="/path">`
237
235
 
238
236
  ### changeLanguage()
239
237
 
@@ -258,7 +256,7 @@ Custom event for language changes.
258
256
  class LanguageChangeEvent extends CustomEvent<{ lang: string }>
259
257
 
260
258
  // Constants
261
- LanguageChangeEvent.EVENT_NAME: 'gringow:language-change'
259
+ LanguageChangeEvent.EVENT_NAME: 'language-change'
262
260
 
263
261
  // Factory method
264
262
  LanguageChangeEvent.create(lang: string): LanguageChangeEvent
@@ -309,13 +307,10 @@ The `<g-gringow>` element only translates on the client after cache loads.
309
307
 
310
308
  ```typescript
311
309
  // Main export
312
- import { g, changeLanguage, LanguageChangeEvent } from '@gringow/gringow-react'
310
+ import { g, gid, Gringow, changeLanguage, LanguageChangeEvent } from '@gringow/gringow-react'
313
311
 
314
312
  // Store export
315
313
  import { GringowStore } from '@gringow/gringow-react/store'
316
-
317
- // Browser initialization (import once)
318
- import '@gringow/gringow-react/browser'
319
314
  ```
320
315
 
321
316
  ## Development
@@ -333,7 +328,7 @@ pnpm run watch
333
328
 
334
329
  ## Best Practices
335
330
 
336
- 1. **Import browser module once** - Do it in your app's entry point
331
+ 1. **Initialize store once** - Configure `cacheUrl`/`language` early in your app entry point
337
332
  2. **Fetch cache early** - Call `GringowStore.fetchCache()` before rendering
338
333
  3. **Use Vite plugin** - Automatically extracts translations during build
339
334
  4. **Keep fallbacks** - Original strings serve as loading state
@@ -344,7 +339,7 @@ pnpm run watch
344
339
  - **[@gringow/gringow](https://www.npmjs.com/package/@gringow/gringow)** - Core translation library
345
340
  - **[@gringow/gringow-shadow](https://www.npmjs.com/package/@gringow/gringow-shadow)** - Web Component layer (this package depends on it)
346
341
  - **[@gringow/gringow-vite](https://www.npmjs.com/package/@gringow/gringow-vite)** - Vite plugin for build-time extraction
347
- - **[@gringow/cli](https://www.npmjs.com/package/@gringow/gringow-cli)** - CLI for translation management
342
+ - **[@gringow/gringow-cli](https://www.npmjs.com/package/@gringow/gringow-cli)** - CLI for translation management
348
343
  - **[@gringow/gringow-nextjs](https://www.npmjs.com/package/@gringow/gringow-nextjs)** - Next.js plugin (experimental)
349
344
 
350
345
  ## Resources
package/dist/change-language.mjs CHANGED
@@ -4,7 +4,9 @@ import { LanguageChangeEvent } from '@gringow/gringow-shadow/event';
4
4
 
5
5
  // src/change-language.ts
6
6
  function changeLanguage(lang) {
7
- window.dispatchEvent(LanguageChangeEvent.create(lang));
7
+ if (typeof window !== "undefined") {
8
+ window.dispatchEvent(LanguageChangeEvent.create(lang));
9
+ }
8
10
  }
9
11
 
10
12
  export { changeLanguage };
package/dist/g.mjs CHANGED
@@ -1,5 +1,4 @@
1
1
  import { flatTemplateString, createCacheId } from '@gringow/gringow/browser';
2
- import React from 'react';
3
2
  import { GringowStore } from '@gringow/gringow-shadow/store';
4
3
  import { jsx } from 'react/jsx-runtime';
5
4
 
@@ -13,10 +12,16 @@ import(
13
12
  moduleName(isServer)
14
13
  );
15
14
  function g(strings, ...replacements) {
16
- const reactId = React.useId();
17
15
  const flatten = flatTemplateString(strings, replacements);
18
16
  const cacheId = createCacheId(flatten);
19
- return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten, children: !GringowStore.cache || isServer ? flatten : null }, reactId);
17
+ const reactId = cacheId;
18
+ if (!isServer) {
19
+ return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten, children: !GringowStore.cache ? flatten : null }, reactId);
20
+ } else {
21
+ return GringowStore.getCacheItem(cacheId).then((cache) => {
22
+ return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten, children: GringowStore.cache ? cache : flatten ?? null }, reactId);
23
+ });
24
+ }
20
25
  }
21
26
 
22
27
  export { g };
package/dist/gid.d.mts ADDED
@@ -0,0 +1,3 @@
1
+ declare function gid(strings: TemplateStringsArray, ...replacements: Array<unknown>): string;
2
+
3
+ export { gid };
package/dist/gid.mjs ADDED
@@ -0,0 +1,10 @@
1
+ import { flatTemplateString, createCacheId } from '@gringow/gringow/browser';
2
+
3
+ // src/gid.ts
4
+ function gid(strings, ...replacements) {
5
+ const flatten = flatTemplateString(strings, replacements);
6
+ const cacheId = createCacheId(flatten);
7
+ return cacheId;
8
+ }
9
+
10
+ export { gid };
package/dist/gringow.d.mts ADDED
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+
3
+ type GringowComponentProps = {
4
+ cacheId: string;
5
+ flatten?: string;
6
+ };
7
+ declare function Gringow({ cacheId, flatten }: GringowComponentProps): React.ReactNode;
8
+
9
+ export { Gringow };
package/dist/gringow.mjs ADDED
@@ -0,0 +1,24 @@
1
+ import { GringowStore } from '@gringow/gringow-shadow/store';
2
+ import { jsx } from 'react/jsx-runtime';
3
+
4
+ // src/store.ts
5
+ var isServer = typeof window === "undefined";
6
+ function moduleName(isServer2) {
7
+ return !isServer2 ? "./browser.mjs" : ".";
8
+ }
9
+ import(
10
+ /* @vite-ignore */
11
+ moduleName(isServer)
12
+ );
13
+ function Gringow({ cacheId, flatten }) {
14
+ const reactId = cacheId;
15
+ if (!isServer) {
16
+ return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten || cacheId, children: !GringowStore.cache ? "" : null }, reactId);
17
+ } else {
18
+ return GringowStore.getCacheItem(cacheId).then((cache) => {
19
+ return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten || cacheId, children: GringowStore.cache ? cache : "" }, reactId);
20
+ });
21
+ }
22
+ }
23
+
24
+ export { Gringow };
package/dist/index.d.mts CHANGED
@@ -1,3 +1,5 @@
1
1
  export { changeLanguage } from './change-language.mjs';
2
2
  export { g } from './g.mjs';
3
+ export { gid } from './gid.mjs';
4
+ export { Gringow } from './gringow.mjs';
3
5
  import 'react';
package/dist/index.mjs CHANGED
@@ -1,6 +1,5 @@
1
1
  import { LanguageChangeEvent } from '@gringow/gringow-shadow/event';
2
2
  import { flatTemplateString, createCacheId } from '@gringow/gringow/browser';
3
- import React from 'react';
4
3
  import { GringowStore } from '@gringow/gringow-shadow/store';
5
4
  import { jsx } from 'react/jsx-runtime';
6
5
 
@@ -8,21 +7,52 @@ import { jsx } from 'react/jsx-runtime';
8
7
 
9
8
  // src/change-language.ts
10
9
  function changeLanguage(lang) {
11
- window.dispatchEvent(LanguageChangeEvent.create(lang));
10
+ if (typeof window !== "undefined") {
11
+ window.dispatchEvent(LanguageChangeEvent.create(lang));
12
+ }
12
13
  }
13
14
  var isServer = typeof window === "undefined";
14
- function moduleName(isServer2) {
15
- return !isServer2 ? "./browser.mjs" : ".";
15
+ function moduleName(isServer3) {
16
+ return !isServer3 ? "./browser.mjs" : ".";
16
17
  }
17
18
  import(
18
19
  /* @vite-ignore */
19
20
  moduleName(isServer)
20
21
  );
21
22
  function g(strings, ...replacements) {
22
- const reactId = React.useId();
23
23
  const flatten = flatTemplateString(strings, replacements);
24
24
  const cacheId = createCacheId(flatten);
25
- return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten, children: !GringowStore.cache || isServer ? flatten : null }, reactId);
25
+ const reactId = cacheId;
26
+ if (!isServer) {
27
+ return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten, children: !GringowStore.cache ? flatten : null }, reactId);
28
+ } else {
29
+ return GringowStore.getCacheItem(cacheId).then((cache) => {
30
+ return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten, children: GringowStore.cache ? cache : flatten ?? null }, reactId);
31
+ });
32
+ }
33
+ }
34
+ function gid(strings, ...replacements) {
35
+ const flatten = flatTemplateString(strings, replacements);
36
+ const cacheId = createCacheId(flatten);
37
+ return cacheId;
38
+ }
39
+ var isServer2 = typeof window === "undefined";
40
+ function moduleName2(isServer3) {
41
+ return !isServer3 ? "./browser.mjs" : ".";
42
+ }
43
+ import(
44
+ /* @vite-ignore */
45
+ moduleName2(isServer2)
46
+ );
47
+ function Gringow({ cacheId, flatten }) {
48
+ const reactId = cacheId;
49
+ if (!isServer2) {
50
+ return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten || cacheId, children: !GringowStore.cache ? "" : null }, reactId);
51
+ } else {
52
+ return GringowStore.getCacheItem(cacheId).then((cache) => {
53
+ return /* @__PURE__ */ jsx("g-gringow", { id: reactId, "data-cache-id": cacheId, "data-flatten": flatten || cacheId, children: GringowStore.cache ? cache : "" }, reactId);
54
+ });
55
+ }
26
56
  }
27
57
 
28
- export { changeLanguage, g };
58
+ export { Gringow, changeLanguage, g, gid };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gringow/gringow-react",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "React bindings for Gringow AI-powered translation tool",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -35,8 +35,8 @@
35
35
  "@types/react": "^19.2.7",
36
36
  "react": "19.1.0",
37
37
  "react-dom": "19.1.0",
38
- "@gringow/gringow": "0.2.0",
39
- "@gringow/gringow-shadow": "0.2.0"
38
+ "@gringow/gringow": "0.2.1",
39
+ "@gringow/gringow-shadow": "0.2.1"
40
40
  },
41
41
  "scripts": {
42
42
  "build": "rm -rf ./dist/* ./tsconfig.tsbuildinfo && tsup",