@quietui/squeak 1.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.0.0
+
+- [breaking] Improved translation file format so args are named instead of order-based
+
+## 1.1.0
+
+- Added support for SSR environments
+
 ## 1.0.0
 
 - Initial fork

package/README.md

@@ -2,7 +2,7 @@
 
 Squeak is a tiny, zero-dependency library that provides a [Reactive Controller](https://lit.dev/docs/composition/controllers/) for localizing terms, dates, and numbers, and currency across one or more custom elements in a component library. It _does not_ aim to replicate a full-blown localization tool. For that, you should use something like [i18next](https://www.i18next.com/). 
 
-Reactive Controllers are supported by Lit out of the box, but they're designed to be generic so other libraries can elect to support them either natively or through an adapter. If you're favorite custom element authoring library doesn't support Reactive Controllers yet, consider asking the maintainers to add support for them!
+Reactive Controllers are supported by Lit out of the box, but they're designed to be generic so other libraries can elect to support them either natively or through an adapter. If your favorite custom element authoring library doesn't support Reactive Controllers yet, consider asking the maintainers to add support for them!
 
 ## Overview
 
@@ -175,9 +175,9 @@ async function changeLanguage(lang) {
 You can use Squeak with any library that supports [Lit's Reactive Controller pattern](https://lit.dev/docs/composition/controllers/). In Lit, a localized custom element will look something like this.
 
 ```ts
-import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { Localize } from '@quietui/squeak/dist/lit.js';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Localize } from '@quietui/squeak/dist/index.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {

package/cspell.json

@@ -0,0 +1,18 @@
+// cSpell Settings
+{
+  // Version of the setting file.  Always 0.2
+  "version": "0.2",
+  // language - current active spelling language
+  "language": "en,lorem",
+  // words - list of words to be always considered correct
+  "words": [
+    "claviska",
+    "Español",
+    "LaViska",
+    "quietui"
+  ],
+  // flagWords - list of words to be always considered incorrect
+  // This is useful for offensive words and common spelling errors.
+  // For example "hte" should be "the"
+  "flagWords": []
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-export type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
+export type FunctionParams<T> = T extends (params: infer P) => string ? [P] : [];
 export interface Translation {
     $code: string;
     $name: string;

package/dist/index.js

@@ -1,13 +1,18 @@
 const connectedElements = new Set();
-const documentElementObserver = new MutationObserver(update);
 const translations = new Map();
-let documentDirection = document.documentElement.dir || 'ltr';
-let documentLanguage = document.documentElement.lang || navigator.language;
+const isSSR = typeof (document === null || document === void 0 ? void 0 : document.documentElement) === 'undefined';
+let documentDirection = 'ltr';
+let documentLanguage = 'en';
 let defaultTranslation;
-documentElementObserver.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['dir', 'lang']
-});
+if (!isSSR) {
+    const documentElementObserver = new MutationObserver(update);
+    documentDirection = document.documentElement.dir || 'ltr';
+    documentLanguage = document.documentElement.lang || navigator.language;
+    documentElementObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['dir', 'lang']
+    });
+}
 export function registerDefaultTranslation(translation) {
     defaultTranslation = translation;
     update();
@@ -25,6 +30,8 @@ export function registerTranslation(...translation) {
     update();
 }
 export function update() {
+    if (isSSR)
+        return;
     documentDirection = document.documentElement.dir || 'ltr';
     documentLanguage = document.documentElement.lang || navigator.language;
     [...connectedElements.keys()].map((el) => {
@@ -87,7 +94,13 @@ export class Localize {
             return String(key);
         }
         if (typeof term === 'function') {
-            return term(...args);
+            try {
+                return term(args[0]);
+            }
+            catch (_a) {
+                console.warn(`Translation term "${String(key)}" threw an error. Make sure all required parameters are provided.`);
+                return String(key);
+            }
         }
         return term;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quietui/squeak",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "description": "A tiny, zero-dependency library that provides a Reactive Controller for localizing terms, dates, and numbers, and currency across one or more custom elements in a component library.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -9,9 +9,10 @@
   "scripts": {
     "start": "tsc -w",
     "build": "tsc",
-    "clean": "node ./scripts/clean.js",
+    "clean": "rimraf dist",
     "prebuild": "npm run clean",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "check-updates": "npx npm-check-updates --interactive --format group"
   },
   "repository": {
     "type": "git",
@@ -35,6 +36,7 @@
     "del": "^7.1.0",
     "lit": "^3.1.2",
     "prettier": "^3.2.5",
+    "rimraf": "^6.0.1",
     "typescript": "^5.3.3"
   }
 }

package/src/index.ts

@@ -1,6 +1,6 @@
 import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
 
-export type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
+export type FunctionParams<T> = T extends (params: infer P) => string ? [P] : [];
 
 export interface Translation {
   $code: string; // e.g. en, en-GB
@@ -14,17 +14,24 @@ export interface ExistsOptions {
 }
 
 const connectedElements = new Set<HTMLElement>();
-const documentElementObserver = new MutationObserver(update);
 const translations: Map<string, Translation> = new Map();
-let documentDirection = document.documentElement.dir || 'ltr';
-let documentLanguage = document.documentElement.lang || navigator.language;
+const isSSR = typeof document?.documentElement === 'undefined';
+let documentDirection = 'ltr'; // SSR default
+let documentLanguage = 'en'; // SSR default
 let defaultTranslation: Translation;
 
-// Watch for changes on <html lang>
-documentElementObserver.observe(document.documentElement, {
-  attributes: true,
-  attributeFilter: ['dir', 'lang']
-});
+// Don't run this block in an SSR environment
+if (!isSSR) {
+  const documentElementObserver = new MutationObserver(update);
+  documentDirection = document.documentElement.dir || 'ltr';
+  documentLanguage = document.documentElement.lang || navigator.language;
+
+  // Watch for changes on <html lang>
+  documentElementObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['dir', 'lang']
+  });
+}
 
 /** Registers the default (fallback) translation. */
 export function registerDefaultTranslation(translation: Translation) {
@@ -50,6 +57,8 @@ export function registerTranslation(...translation: Translation[]) {
 
 /** Updates all localized elements that are currently connected */
 export function update() {
+  if (isSSR) return;
+
   documentDirection = document.documentElement.dir || 'ltr';
   documentLanguage = document.documentElement.lang || navigator.language;
 
@@ -161,7 +170,12 @@ export class Localize<UserTranslation extends Translation> implements ReactiveCo
     }
 
     if (typeof term === 'function') {
-      return term(...args) as string;
+      try {
+        return term(args[0]) as string;
+      } catch {
+        console.warn(`Translation term "${String(key)}" threw an error. Make sure all required parameters are provided.`);
+        return String(key);
+      }
     }
 
     return term;

package/scripts/clean.js

@@ -1,3 +0,0 @@
-import { deleteSync } from 'del';
-
-deleteSync('./dist');