@soleil-se/app-util 5.12.2 → 5.13.0

package/CHANGELOG.md

@@ -7,6 +7,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.13.0] - 2026-01-16
+
+- Add comparator functions `localizedCompare` and `localizedCompareBy` to sort strings and objects 
+by a specific property using localized string comparison since String.localeCompare does not
+work properly with nordic characters in Rhino.
+
+## [5.12.3] - 2025-12-03
+
+- Even better type definitions for Svelte render functions.
+
 ## [5.12.2] - 2025-12-03
 
 - Better type definitions for Svelte render functions.

package/client/svelte/5/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="svelte" />
 /**
- * @template {Record<string, unknown>} TProps
+ * @template {import('svelte').Component<any, any>} TComponent
  * @typedef {object} RenderSettings
  * @property {HTMLElement} [target] Target where app should be mounted.
- * @property {TProps} [props] Root component props.
+ * @property {import('svelte').ComponentProps<TComponent>} [props] Root component props.
  * @property {boolean} [hydrate=target.hasChildNodes()] Instructs Svelte to upgrade existing DOM
  * (usually from server-side rendering) rather than creating new elements. By default the app will
  * hydrate when the target has any child nodes.
@@ -12,12 +12,12 @@
  */
 /**
  * Renders a client side Svelte application.
- * @template {Record<string, unknown>} [TProps=Record<string, unknown>]
- * @param {import('svelte').Component<TProps>} App Svelte app root component.
- * @param {RenderSettings<TProps>} [settings={}] Settings object.
+ * @template {import('svelte').Component<any, any>} TComponent
+ * @param {TComponent} App Svelte app root component.
+ * @param {RenderSettings<TComponent>} [settings={}] Settings object.
  */
-export function render<TProps extends Record<string, unknown> = Record<string, unknown>>(App: import("svelte").Component<TProps, any, string>, { target, props, hydrate, intro, }?: RenderSettings<TProps>): void;
-export type RenderSettings<TProps extends Record<string, unknown>> = {
+export function render<TComponent extends import("svelte").Component<any, any, string>>(App: TComponent, { target, props, hydrate, intro, }?: RenderSettings<TComponent>): void;
+export type RenderSettings<TComponent extends import("svelte").Component<any, any, string>> = {
     /**
      * Target where app should be mounted.
      */
@@ -25,7 +25,7 @@ export type RenderSettings<TProps extends Record<string, unknown>> = {
     /**
      * Root component props.
      */
-    props?: TProps;
+    props?: import('svelte').ComponentProps<TComponent>;
     /**
      * Instructs Svelte to upgrade existing DOM
      * (usually from server-side rendering) rather than creating new elements. By default the app will

package/client/svelte/5/index.js

@@ -4,10 +4,10 @@ import { mount as svelteMount, hydrate as svelteHydrate } from 'svelte';
 import { setAppProps } from '../../../common';
 
 /**
- * @template {Record<string, unknown>} TProps
+ * @template {import('svelte').Component<any, any>} TComponent
  * @typedef {object} RenderSettings
  * @property {HTMLElement} [target] Target where app should be mounted.
- * @property {TProps} [props] Root component props.
+ * @property {import('svelte').ComponentProps<TComponent>} [props] Root component props.
  * @property {boolean} [hydrate=target.hasChildNodes()] Instructs Svelte to upgrade existing DOM
  * (usually from server-side rendering) rather than creating new elements. By default the app will
  * hydrate when the target has any child nodes.
@@ -17,9 +17,9 @@ import { setAppProps } from '../../../common';
 
 /**
  * Renders a client side Svelte application.
- * @template {Record<string, unknown>} [TProps=Record<string, unknown>]
- * @param {import('svelte').Component<TProps>} App Svelte app root component.
- * @param {RenderSettings<TProps>} [settings={}] Settings object.
+ * @template {import('svelte').Component<any, any>} TComponent
+ * @param {TComponent} App Svelte app root component.
+ * @param {RenderSettings<TComponent>} [settings={}] Settings object.
  */
 export function render(App, {
   target,

package/common/index.d.ts

@@ -79,3 +79,6 @@ export const isOffline: boolean;
  * @constant {boolean}
  */
 export const isOnline: boolean;
+import { localizedCompare } from "./localized-compare";
+import { localizedCompareBy } from "./localized-compare";
+export { localizedCompare, localizedCompareBy };

package/common/index.js

@@ -3,6 +3,7 @@ import app from '@sitevision/api/common/app';
 
 import { nativeRequire } from '../server';
 import getLegacyRouteUri from './legacy/getRouteUri';
+import { localizedCompare, localizedCompareBy } from './localized-compare';
 
 /**
  * Regex for selecting leading slashes
@@ -150,7 +151,7 @@ export function getRouteUri(route = '', params = undefined) {
  */
 export function getViewUri(route = '', params = undefined) {
   if (!router?.getUrl) {
-    console.warn('[@soleil-api/webapp-util] getViewUri requires router.getUrl support.');
+    console.warn('[@soleil-se/app-util] getViewUri requires router.getUrl support.');
     return undefined;
   }
 
@@ -183,3 +184,5 @@ export function setAppProps(data) {
 export function getAppProps(key) {
   return key ? appProps[key] : appProps;
 }
+
+export { localizedCompare, localizedCompareBy };

package/common/localized-compare/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Compares two strings in a localized manner, taking into account special characters.
+ * The order is defined as: a-z å ä æ ö ø (case-insensitive, with lowercase before uppercase).
+ * Characters not in this set are compared based on their Unicode code points after removing accents.
+ * @param {string} a - The first string to compare.
+ * @param {string} b - The second string to compare.
+ * @returns {number} Negative if a < b, positive if a > b, zero if equal.
+ */
+export function localizedCompare(a: string, b: string): number;
+/**
+ * Creates a comparator function for sorting objects by a specific property or properties.
+ * The property values are compared using localized string comparison.
+ * When given an array of properties, sorts by the first property, then by the second if equal, etc.
+ * @param {string|string[]} prop - The property name(s) to compare by.
+ * @returns {(a: Object, b: Object) => number} A comparator function that accepts two objects and returns their sort order.
+ * @example
+ * arr.sort(localizedCompareBy('title'))
+ * arr.sort(localizedCompareBy(['lastName', 'firstName']))
+ */
+export function localizedCompareBy(prop: string | string[]): (a: any, b: any) => number;

package/common/localized-compare/index.js

@@ -0,0 +1,103 @@
+const charOrder = 'abcdefghijklmnopqrstuvwxyzåäæöø';
+
+function normalizeChar(char) {
+  // Remove accents from unknown characters (é → e, ñ → n)
+  return char.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+
+function getCharInfo(char) {
+  const lowerChar = char.toLowerCase();
+  let index = charOrder.indexOf(lowerChar);
+  let isAccented = false;
+
+  // If not found, try normalized version
+  if (index === -1) {
+    const normalized = normalizeChar(lowerChar);
+    index = charOrder.indexOf(normalized);
+
+    if (index !== -1) {
+      isAccented = true;
+    } else {
+      // Completely unknown character
+      index = charOrder.length + char.charCodeAt(0);
+    }
+  }
+
+  return {
+    baseIndex: index,
+    isAccented,
+    isLower: char === char.toLowerCase() && char !== char.toUpperCase(),
+    accentCode: isAccented ? char.normalize('NFD').charCodeAt(1) || 0 : 0,
+  };
+}
+
+/**
+ * Compares two strings in a localized manner, taking into account special characters.
+ * The order is defined as: a-z å ä æ ö ø (case-insensitive, with lowercase before uppercase).
+ * Characters not in this set are compared based on their Unicode code points after removing accents.
+ * @param {string} a - The first string to compare.
+ * @param {string} b - The second string to compare.
+ * @returns {number} Negative if a < b, positive if a > b, zero if equal.
+ */
+export function localizedCompare(a, b) {
+  // Handle null/undefined
+  if (a == null) return b == null ? 0 : -1;
+  if (b == null) return 1;
+
+  // Ensure strings
+  const strA = String(a);
+  const strB = String(b);
+
+  const minLength = Math.min(strA.length, strB.length);
+
+  for (let i = 0; i < minLength; i += 1) {
+    const infoA = getCharInfo(strA[i]);
+    const infoB = getCharInfo(strB[i]);
+
+    // 1. Compare base character (case and accent insensitive)
+    if (infoA.baseIndex !== infoB.baseIndex) {
+      return infoA.baseIndex - infoB.baseIndex;
+    }
+
+    // 2. Non-accented before accented (e.g., 'e' < 'é')
+    if (infoA.isAccented !== infoB.isAccented) {
+      return infoA.isAccented ? 1 : -1;
+    }
+
+    // 3. If both accented, compare accent types (é vs è)
+    if (infoA.isAccented && infoA.accentCode !== infoB.accentCode) {
+      return infoA.accentCode - infoB.accentCode;
+    }
+
+    // 4. Lowercase before uppercase (e.g., 'e' < 'E')
+    if (infoA.isLower !== infoB.isLower) {
+      return infoA.isLower ? -1 : 1;
+    }
+  }
+
+  return strA.length - strB.length;
+}
+
+/**
+ * Creates a comparator function for sorting objects by a specific property or properties.
+ * The property values are compared using localized string comparison.
+ * When given an array of properties, sorts by the first property, then by the second if equal, etc.
+ * @param {string|string[]} prop - The property name(s) to compare by.
+ * @returns {(a: Object, b: Object) => number} A comparator function that accepts two objects and returns their sort order.
+ * @example
+ * arr.sort(localizedCompareBy('title'))
+ * arr.sort(localizedCompareBy(['lastName', 'firstName']))
+ */
+export function localizedCompareBy(prop) {
+  const props = Array.isArray(prop) ? prop : [prop];
+
+  return (a, b) => {
+    for (let i = 0; i < props.length; i += 1) {
+      const result = localizedCompare(a[props[i]], b[props[i]]);
+      if (result !== 0) {
+        return result;
+      }
+    }
+    return 0;
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "5.12.2",
+  "version": "5.13.0",
   "description": "Utility functions for WebApps, RESTApps and Widgets in Sitevision.",
   "main": "./common/index.js",
   "author": "Soleil AB",
@@ -25,5 +25,5 @@
   "scripts": {
     "create-type-definitions": "node ../../utils/createTypeDefinitions.js ./common/index.js ./client/index.js ./client/svelte/index.js ./client/svelte/3/index.js ./client/svelte/4/index.js ./client/svelte/5/index.js ./server/index.js ./server/svelte/index.js ./server/svelte/3/index.js ./server/svelte/4/index.js ./server/svelte/5/index.js ./server/app-data/index.js ./server/global-app-data/index.js"
   },
-  "gitHead": "090c22c4eee4dc2f68096f8f50cca8015a91acf7"
+  "gitHead": "3c3ef92d604eeed89887a94964edf2146e2a746a"
 }

package/server/svelte/5/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="svelte" />
 /**
  * Returns HTML for a server rendered Svelte app.
- * @template {Record<string, unknown>} [TProps=Record<string, unknown>]
- * @param {import('svelte').Component<TProps>} App Svelte component that is root of app.
- * @param {TProps} props Props passed to root component.
+ * @template {import('svelte').Component<any, any>} TComponent
+ * @param {TComponent} App Svelte component that is root of app.
+ * @param {import('svelte').ComponentProps<TComponent>} props Props passed to root component.
  * @return {string} HTML for the server rendered app.
  */
-export function render<TProps extends Record<string, unknown> = Record<string, unknown>>(App: import("svelte").Component<TProps, any, string>, props: TProps): string;
+export function render<TComponent extends import("svelte").Component<any, any, string>>(App: TComponent, props: import("svelte").ComponentProps<TComponent>): string;

package/server/svelte/5/index.js

@@ -3,9 +3,9 @@ import { appId, setAppProps } from '../../../common';
 
 /**
  * Returns HTML for a server rendered Svelte app.
- * @template {Record<string, unknown>} [TProps=Record<string, unknown>]
- * @param {import('svelte').Component<TProps>} App Svelte component that is root of app.
- * @param {TProps} props Props passed to root component.
+ * @template {import('svelte').Component<any, any>} TComponent
+ * @param {TComponent} App Svelte component that is root of app.
+ * @param {import('svelte').ComponentProps<TComponent>} props Props passed to root component.
  * @return {string} HTML for the server rendered app.
  */
 export function render(App, props) {

package/common/server/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Require a module natively.
- * @param {string} module
- * @returns any
- */
-export function nativeRequire(module: string): any;