@furystack/shades 11.0.19 → 11.0.21

package/README.md

@@ -1,43 +1,42 @@
 # @furystack/shades
 
-Shades is a UI Library for FuryStack with that uses type-safe JSX component, unidirectional data binding and the same DI/IOC, logging and utility libraries as the FuryStack Backend Services.
+Shades is a UI library for FuryStack that uses type-safe JSX components, unidirectional data binding, and the same DI/IoC, logging, and utility libraries as FuryStack backend services.
 
 ## Usage
 
 You can check the [@furystack/boilerplate](https://github.com/furystack/boilerplate) repository for a working example.
 
-### A Shade (component)
+### A Shade (Component)
 
 A shade (component) can be constructed from the following properties:
 
-- `ts render:(options: RenderOptions)=>JSX.Element` - A required method that will be executed on each and every render.
-- `initialState` - A default state that can be updated during the component lifecycle
-- `shadowDomName` can be specified - that will be the custom element's name in the DOM
-- `ts constructed: (options: RenderOptions)=>void` is an optional callback that will be executed after component construction. It can return a cleanup method (e.g. free up resources, dispose value observers, etc...)
-- `ts onAttach: (options: RenderOptions)=>void` is executed when the component is attached to the DOM
-- `ts onDetach: (options: RenderOptions)=>void` is executed when the component is detached from the DOM
+- `render:(options: RenderOptions)=>JSX.Element` – A required method that will be executed on each render.
+- `initialState` – A default state that can be updated during the component lifecycle.
+- `shadowDomName` – Can be specified as the custom element's name in the DOM.
+- `constructed: (options: RenderOptions)=>void` – Optional callback executed after component construction. It can return a cleanup method (e.g., free up resources, dispose value observers, etc.).
+- `onAttach: (options: RenderOptions)=>void` – Executed when the component is attached to the DOM.
+- `onDetach: (options: RenderOptions)=>void` – Executed when the component is detached from the DOM.
 
-### Render options
+### Render Options
 
-The lifecycle methods will get the following options from a parameter:
+The lifecycle methods receive the following options as a parameter:
 
-- props - The current readonly **props** object for the element. As props are passed from the parent, it is read only
-- getState() - method that will return the current state. State object is also read only and immutable and can be updated with a corresponding method only.
-- updateState(newState: TState, skipRender?: boolean) - Updates (patches) the component state. An optional flag can indicate that this state change shouldn't trigger a re-render (e.g. form input fields change, etc...)
-- injector - An injector instance. It can be retrieved from the closest parent or can be specified on the _state_ or _props_
-- children - The children element(s) of the component
-- element - A reference to the current component's custom element (root)
-- logger - A specified _logger_ instance with a pre-defined _scope_
+- `props` – The current readonly props object for the element. As props are passed from the parent, it is read-only.
+- `getState()` – Returns the current state. The state object is also read-only and immutable and can be updated only with a corresponding method.
+- `updateState(newState: TState, skipRender?: boolean)` – Updates (patches) the component state. An optional flag can indicate that this state change shouldn't trigger a re-render (e.g., form input fields change, etc.).
+- `injector` – An injector instance. It can be retrieved from the closest parent or specified on the state or props.
+- `children` – The children element(s) of the component.
+- `element` – A reference to the current component's custom element (root).
+- `logger` – A specified logger instance with a pre-defined scope.
 
-### Bundled goodies
+### Bundled Goodies
 
-The **@furystack/shades** package contains a router component, a router-link component, a location-service and a lazy-load component.
+The **@furystack/shades** package contains a router component, a router-link component, a location service, and a lazy-load component.
 
-## Core concepts
+## Core Concepts
 
-- Shade is close to the DOM and the natives. You are encouraged to use native browser methods while you can
-- You can use small independent services for state tracking with the _injector_
-- ~~Use observable values. Subscribe in the `constructed()` method and dispose them on the callback that it returns.~~
-- You can use resources (valueobservers) that will be disposed automatically when your component will be removed from DOM.
-- Re-render **can** be skipped on state update. E.g. Why should you break a whole form with a re-render? Why should you update a complete _grid_ if only on item's one field has been changed?
-- Nothing is true, everything is permitted 🗡
+- Shade is close to the DOM and the natives. You are encouraged to use native browser methods when possible.
+- You can use small independent services for state tracking with the injector.
+- You can use resources (value observers) that will be disposed automatically when your component is removed from the DOM.
+- Re-rendering can be skipped on state update. For example, why re-render a whole form if only one field has changed?
+- Nothing is true, everything is permitted. 🗡️

package/esm/components/route-link.spec.js

@@ -1,12 +1,12 @@
-import { TextEncoder, TextDecoder } from 'util';
+import { TextDecoder, TextEncoder } from 'util';
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;
 import { Injector } from '@furystack/inject';
-import { RouteLink } from './route-link.js';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { LocationService } from '../services/location-service.js';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { initializeShadeRoot } from '../initialize.js';
+import { LocationService } from '../services/location-service.js';
 import { createComponent } from '../shade-component.js';
+import { RouteLink } from './route-link.js';
 describe('RouteLink', () => {
     beforeEach(() => {
         document.body.innerHTML = '<div id="root"></div>';
@@ -24,7 +24,7 @@ describe('RouteLink', () => {
             rootElement,
             jsxElement: (createComponent(RouteLink, { id: "route", href: "/subroute" }, "Link")),
         });
-        expect(document.body.innerHTML).toBe('<div id="root"><a is="route-link" id="route" href="/subroute" style="text-decoration: inherit;">Link</a></div>');
+        expect(document.body.innerHTML).toMatchInlineSnapshot(`"<div id="root"><a is="route-link" id="route" href="/subroute" style="color: inherit; text-decoration: inherit;">Link</a></div>"`);
         expect(onRouteChange).not.toBeCalled();
         document.getElementById('route')?.click();
         expect(onRouteChange).toBeCalledTimes(1);

package/esm/components/route-link.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"route-link.spec.js","sourceRoot":"","sources":["../../src/components/route-link.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAE/C,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA;AAChC,MAAM,CAAC,WAAW,GAAG,WAAkB,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IACF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAA;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;QAErE,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QAE7B,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;QAEpF,mBAAmB,CAAC;YAClB,QAAQ;YACR,WAAW;YACX,UAAU,EAAE,CACV,gBAAC,SAAS,IAAC,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,WAAW,WAE1B,CACb;SACF,CAAC,CAAA;QACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAClC,gHAAgH,CACjH,CAAA;QACD,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA;QACtC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;QACzC,MAAM,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"route-link.spec.js","sourceRoot":"","sources":["../../src/components/route-link.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAE/C,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA;AAChC,MAAM,CAAC,WAAW,GAAG,WAAkB,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,UAAU,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,uBAAuB,CAAA;IACnD,CAAC,CAAC,CAAA;IACF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAA;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAmB,CAAA;QAErE,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QAE7B,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,qBAAqB,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;QAEpF,mBAAmB,CAAC;YAClB,QAAQ;YACR,WAAW;YACX,UAAU,EAAE,CACV,gBAAC,SAAS,IAAC,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,WAAW,WAE1B,CACb;SACF,CAAC,CAAA;QACF,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,qBAAqB,CACnD,kIAAkI,CACnI,CAAA;QACD,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA;QACtC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;QACzC,MAAM,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades",
-  "version": "11.0.19",
+  "version": "11.0.21",
   "description": "Google Authentication Provider for FuryStack",
   "type": "module",
   "scripts": {
@@ -38,15 +38,15 @@
   "homepage": "https://github.com/furystack/furystack",
   "devDependencies": {
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.15.17",
+    "@types/node": "^24.0.1",
     "jsdom": "^26.1.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.3"
+    "vitest": "^3.2.3"
   },
   "dependencies": {
-    "@furystack/inject": "^12.0.15",
-    "@furystack/rest": "^8.0.18",
-    "@furystack/utils": "^8.0.14",
+    "@furystack/inject": "^12.0.17",
+    "@furystack/rest": "^8.0.20",
+    "@furystack/utils": "^8.0.16",
     "path-to-regexp": "^8.2.0",
     "semaphore-async-await": "^1.5.1"
   },

package/src/components/route-link.spec.tsx

@@ -1,14 +1,14 @@
-import { TextEncoder, TextDecoder } from 'util'
+import { TextDecoder, TextEncoder } from 'util'
 
 global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder as any
 
 import { Injector } from '@furystack/inject'
-import { RouteLink } from './route-link.js'
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { LocationService } from '../services/location-service.js'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { initializeShadeRoot } from '../initialize.js'
+import { LocationService } from '../services/location-service.js'
 import { createComponent } from '../shade-component.js'
+import { RouteLink } from './route-link.js'
 
 describe('RouteLink', () => {
   beforeEach(() => {
@@ -35,8 +35,8 @@ describe('RouteLink', () => {
         </RouteLink>
       ),
     })
-    expect(document.body.innerHTML).toBe(
-      '<div id="root"><a is="route-link" id="route" href="/subroute" style="text-decoration: inherit;">Link</a></div>',
+    expect(document.body.innerHTML).toMatchInlineSnapshot(
+      `"<div id="root"><a is="route-link" id="route" href="/subroute" style="color: inherit; text-decoration: inherit;">Link</a></div>"`,
     )
     expect(onRouteChange).not.toBeCalled()
     document.getElementById('route')?.click()