@gringow/gringow-shadow 0.0.4 → 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 (6) hide show
  1. package/README.md +9 -23
  2. package/dist/gringow-component.mjs +2 -1
  3. package/dist/gringow-store.d.mts +1 -1
  4. package/dist/gringow-store.mjs +12 -9
  5. package/dist/index.mjs +14 -10
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -10,7 +10,7 @@ Lightweight Web Component layer for Gringow translations. Provides the `<g-gring
10
10
  - đŸŽ¯ **Custom Element** - `<g-gringow>` for declarative translations
11
11
  - 🗂ī¸ **Translation Store** - Singleton cache manager with language awareness
12
12
  - 📡 **Language Events** - Type-safe language change broadcasting
13
- - đŸĒļ **Zero Dependencies** - Pure Web Components API
13
+ - đŸĒļ **Lightweight Runtime** - Pure Web Components API usage
14
14
  - ⚡ **Framework Agnostic** - Works with vanilla JS, React, Vue, etc.
15
15
  - 🔄 **Smart Caching** - Memoized cache fetching and lookup
16
16
 
@@ -83,19 +83,6 @@ Declarative translation component that reads from the cache and updates on langu
83
83
 
84
84
  - **`data-cache-id`** (required) - Cache ID from `gringow.json` (e.g., `grw_abc123`)
85
85
  - **`data-flatten`** (required) - Original flattened string used as fallback
86
- - **`data-replacements`** (optional) - JSON array for interpolation (e.g., `'["Alice", 5]'`)
87
-
88
- #### Example with Replacements
89
-
90
- ```html
91
- <!-- Cache entry: "Hello {0}, you have {1} messages" -->
92
- <g-gringow
93
- data-cache-id="grw_msg456"
94
- data-flatten="Hello {name}, you have {count} messages"
95
- data-replacements='["Alice", 5]'>
96
- </g-gringow>
97
- <!-- Renders: "Hello Alice, you have 5 messages" -->
98
- ```
99
86
 
100
87
  ### GringowStore (Singleton)
101
88
 
@@ -121,7 +108,7 @@ GringowStore.cache: GringowCache | null
121
108
  await GringowStore.fetchCache(): Promise<void>
122
109
 
123
110
  // Get translated string for active language
124
- GringowStore.getCacheItem(cacheId: string): string | null
111
+ await GringowStore.getCacheItem(cacheId: string): Promise<string | null>
125
112
 
126
113
  // Manual cache setter
127
114
  GringowStore.setCache(cache: GringowCache): void
@@ -132,8 +119,8 @@ GringowStore.setCache(cache: GringowCache): void
132
119
  The store resolves `cacheUrl` in this order:
133
120
 
134
121
  1. `GringowStore.cacheUrl` (programmatic)
135
- 2. `<meta name="gringow-cache-url" content="/path/to/cache.json">`
136
- 3. `<html data-gringow-cache-url="/path/to/cache.json">`
122
+ 2. `<html data-gringow-cache-url="/path/to/cache.json">`
123
+ 3. `<meta name="gringow-cache-url" content="/path/to/cache.json">`
137
124
 
138
125
  ### LanguageChangeEvent
139
126
 
@@ -154,12 +141,12 @@ addEventListener(LanguageChangeEvent.EVENT_NAME, (event) => {
154
141
 
155
142
  #### Constants
156
143
 
157
- - **`LanguageChangeEvent.EVENT_NAME`** - `'gringow:language-change'`
144
+ - **`LanguageChangeEvent.EVENT_NAME`** - `'language-change'`
158
145
  - **`LanguageChangeEvent.create(lang: string)`** - Factory method for events
159
146
 
160
147
  ## Advanced Examples
161
148
 
162
- ### Dynamic Content with Interpolation
149
+ ### Dynamic Content
163
150
 
164
151
  ```html
165
152
  <script type="module">
@@ -172,11 +159,10 @@ addEventListener(LanguageChangeEvent.EVENT_NAME, (event) => {
172
159
  GringowComponent.defaults = { store: GringowStore }
173
160
  customElements.define('g-gringow', GringowComponent)
174
161
 
175
- // Dynamically create element with replacements
162
+ // Dynamically create element
176
163
  const element = document.createElement('g-gringow')
177
164
  element.setAttribute('data-cache-id', 'grw_welcome')
178
- element.setAttribute('data-flatten', 'Welcome back, {name}!')
179
- element.setAttribute('data-replacements', JSON.stringify(['Alice']))
165
+ element.setAttribute('data-flatten', 'Welcome back, Alice!')
180
166
  document.body.appendChild(element)
181
167
  </script>
182
168
  ```
@@ -282,7 +268,7 @@ Built on Web Components standards:
282
268
  - **[@gringow/gringow](https://www.npmjs.com/package/@gringow/gringow)** - Core translation library
283
269
  - **[@gringow/gringow-react](https://www.npmjs.com/package/@gringow/gringow-react)** - React integration (built on this package)
284
270
  - **[@gringow/gringow-vite](https://www.npmjs.com/package/@gringow/gringow-vite)** - Vite plugin
285
- - **[@gringow/cli](https://www.npmjs.com/package/@gringow/gringow-cli)** - CLI tool
271
+ - **[@gringow/gringow-cli](https://www.npmjs.com/package/@gringow/gringow-cli)** - CLI tool
286
272
  - **[@gringow/gringow-nextjs](https://www.npmjs.com/package/@gringow/gringow-nextjs)** - Next.js plugin (experimental)
287
273
 
288
274
  ## Resources
package/dist/gringow-component.mjs CHANGED
@@ -70,7 +70,8 @@ var GringowComponent = class _GringowComponent extends HTMLElement {
70
70
  }
71
71
  async render() {
72
72
  if (!this.#shadowRoot || !this.#store || !this.#cacheId) return;
73
- const nextContent = await this.#store?.getCacheItem(this.#cacheId) ?? this.#flatten;
73
+ const cachedContent = await this.#store?.getCacheItem(this.#cacheId);
74
+ const nextContent = cachedContent ?? this.#flatten;
74
75
  if (!nextContent) {
75
76
  throw new Error(`No content found for cache ID "${this.#cacheId}" and language "${this.#store.language}"`);
76
77
  }
package/dist/gringow-store.d.mts CHANGED
@@ -3,7 +3,7 @@ import { GringowCache } from '@gringow/gringow';
3
3
  declare class GringowStoreSingleton {
4
4
  #private;
5
5
  private static instance;
6
- static getInstance(): GringowStoreSingleton;
6
+ static getInstance(): Promise<GringowStoreSingleton>;
7
7
  get cacheUrl(): string | null;
8
8
  set cacheUrl(value: string);
9
9
  get cache(): GringowCache | null;
package/dist/gringow-store.mjs CHANGED
@@ -1,17 +1,20 @@
1
1
  // src/gringow-store.ts
2
2
  var GringowStoreSingleton = class _GringowStoreSingleton {
3
- static instance = new _GringowStoreSingleton();
3
+ static instance = null;
4
4
  #language = null;
5
5
  #cache = null;
6
6
  #cacheUrl = null;
7
- static getInstance() {
7
+ static async getInstance() {
8
8
  if (!_GringowStoreSingleton.instance) {
9
- _GringowStoreSingleton.instance = new _GringowStoreSingleton();
9
+ _GringowStoreSingleton.instance = (async () => {
10
+ const instance = new _GringowStoreSingleton();
11
+ return Promise.resolve(instance);
12
+ })();
10
13
  }
11
14
  return _GringowStoreSingleton.instance;
12
15
  }
13
16
  get cacheUrl() {
14
- return this.#cacheUrl ?? globalThis?.document?.head?.querySelector('meta[name="gringow-cache-url"]')?.getAttribute("content") ?? globalThis?.document?.documentElement?.getAttribute("data-gringow-cache-url");
17
+ return this.#cacheUrl ?? globalThis?.document?.documentElement?.getAttribute("data-gringow-cache-url") ?? globalThis?.document?.head?.querySelector('meta[name="gringow-cache-url"]')?.getAttribute("content") ?? null;
15
18
  }
16
19
  set cacheUrl(value) {
17
20
  if (typeof value !== "string" || value.trim().length <= 0) return;
@@ -28,18 +31,18 @@ var GringowStoreSingleton = class _GringowStoreSingleton {
28
31
  this.#language = value;
29
32
  }
30
33
  get language() {
31
- return this.#language ?? globalThis?.document?.head?.querySelector('meta[name="gringow-default-language"]')?.getAttribute("content") ?? globalThis?.document?.documentElement?.getAttribute("lang");
34
+ return this.#language ?? globalThis?.document?.documentElement?.getAttribute("lang") ?? globalThis?.document?.head?.querySelector('meta[name="gringow-current-language"]')?.getAttribute("content") ?? null;
32
35
  }
33
36
  constructor() {
34
37
  }
35
38
  async fetchCache() {
36
39
  if (!this.cacheUrl) {
37
- throw new Error("Cache URL is not set");
40
+ return this.cache ?? {};
38
41
  }
39
42
  if (!this.language) {
40
- throw new Error("Language is not set");
43
+ return this.cache ?? {};
41
44
  }
42
- if (!this.cache) {
45
+ if (!this.cache && this.cacheUrl && this.language) {
43
46
  try {
44
47
  const urlString = this.cacheUrl ?? "";
45
48
  const url = new URL(urlString);
@@ -61,6 +64,6 @@ var GringowStoreSingleton = class _GringowStoreSingleton {
61
64
  return cacheItem.translation?.[this.language ?? ""] ?? cacheItem.original ?? null;
62
65
  }
63
66
  };
64
- var GringowStore = GringowStoreSingleton.getInstance();
67
+ var GringowStore = await GringowStoreSingleton.getInstance();
65
68
 
66
69
  export { GringowStore };
package/dist/index.mjs CHANGED
@@ -70,7 +70,8 @@ var GringowComponent = class _GringowComponent extends HTMLElement {
70
70
  }
71
71
  async render() {
72
72
  if (!this.#shadowRoot || !this.#store || !this.#cacheId) return;
73
- const nextContent = await this.#store?.getCacheItem(this.#cacheId) ?? this.#flatten;
73
+ const cachedContent = await this.#store?.getCacheItem(this.#cacheId);
74
+ const nextContent = cachedContent ?? this.#flatten;
74
75
  if (!nextContent) {
75
76
  throw new Error(`No content found for cache ID "${this.#cacheId}" and language "${this.#store.language}"`);
76
77
  }
@@ -83,18 +84,21 @@ var GringowDefaultLanguage = "es-ES";
83
84
 
84
85
  // src/gringow-store.ts
85
86
  var GringowStoreSingleton = class _GringowStoreSingleton {
86
- static instance = new _GringowStoreSingleton();
87
+ static instance = null;
87
88
  #language = null;
88
89
  #cache = null;
89
90
  #cacheUrl = null;
90
- static getInstance() {
91
+ static async getInstance() {
91
92
  if (!_GringowStoreSingleton.instance) {
92
- _GringowStoreSingleton.instance = new _GringowStoreSingleton();
93
+ _GringowStoreSingleton.instance = (async () => {
94
+ const instance = new _GringowStoreSingleton();
95
+ return Promise.resolve(instance);
96
+ })();
93
97
  }
94
98
  return _GringowStoreSingleton.instance;
95
99
  }
96
100
  get cacheUrl() {
97
- return this.#cacheUrl ?? globalThis?.document?.head?.querySelector('meta[name="gringow-cache-url"]')?.getAttribute("content") ?? globalThis?.document?.documentElement?.getAttribute("data-gringow-cache-url");
101
+ return this.#cacheUrl ?? globalThis?.document?.documentElement?.getAttribute("data-gringow-cache-url") ?? globalThis?.document?.head?.querySelector('meta[name="gringow-cache-url"]')?.getAttribute("content") ?? null;
98
102
  }
99
103
  set cacheUrl(value) {
100
104
  if (typeof value !== "string" || value.trim().length <= 0) return;
@@ -111,18 +115,18 @@ var GringowStoreSingleton = class _GringowStoreSingleton {
111
115
  this.#language = value;
112
116
  }
113
117
  get language() {
114
- return this.#language ?? globalThis?.document?.head?.querySelector('meta[name="gringow-default-language"]')?.getAttribute("content") ?? globalThis?.document?.documentElement?.getAttribute("lang");
118
+ return this.#language ?? globalThis?.document?.documentElement?.getAttribute("lang") ?? globalThis?.document?.head?.querySelector('meta[name="gringow-current-language"]')?.getAttribute("content") ?? null;
115
119
  }
116
120
  constructor() {
117
121
  }
118
122
  async fetchCache() {
119
123
  if (!this.cacheUrl) {
120
- throw new Error("Cache URL is not set");
124
+ return this.cache ?? {};
121
125
  }
122
126
  if (!this.language) {
123
- throw new Error("Language is not set");
127
+ return this.cache ?? {};
124
128
  }
125
- if (!this.cache) {
129
+ if (!this.cache && this.cacheUrl && this.language) {
126
130
  try {
127
131
  const urlString = this.cacheUrl ?? "";
128
132
  const url = new URL(urlString);
@@ -144,6 +148,6 @@ var GringowStoreSingleton = class _GringowStoreSingleton {
144
148
  return cacheItem.translation?.[this.language ?? ""] ?? cacheItem.original ?? null;
145
149
  }
146
150
  };
147
- var GringowStore = GringowStoreSingleton.getInstance();
151
+ var GringowStore = await GringowStoreSingleton.getInstance();
148
152
 
149
153
  export { GringowComponent, GringowDefaultLanguage, GringowStore, LanguageChangeEvent };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gringow/gringow-shadow",
3
- "version": "0.0.4",
3
+ "version": "0.2.1",
4
4
  "description": "A HTML class for Gringow AI-powered translation tool",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -53,7 +53,7 @@
53
53
  "dependencies": {
54
54
  "globby": "14.1.0",
55
55
  "vite": "7.0.0",
56
- "@gringow/gringow": "0.1.4"
56
+ "@gringow/gringow": "0.2.1"
57
57
  },
58
58
  "devDependencies": {
59
59
  "@types/node": "22.15.0",