anu-verzum 2.0.0 → 2.2.0

package/README.md

@@ -4,7 +4,7 @@
 
 <h3>@author: <strong>Anubis-programmer</strong></h3>
 <h3>@license: <strong>MIT</strong></h3>
-<h3>@version: <strong>2.0.0</strong></h3>
+<h3>@version: <strong>2.2.0</strong></h3>
 
 <br>
 
@@ -88,6 +88,17 @@ module.exports = require('anu-verzum/webpack.config')(__dirname, {
 });
 ```
 
+Use `rules` to append additional webpack module rules after the built-in `babel-loader` rule. This is how you wire up CSS, LESS, images, or any other asset type:
+
+```js
+module.exports = require('anu-verzum/webpack.config')(__dirname, {
+    rules: [
+        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
+    ]
+});
+```
+
 <h3 id="importing-in-your-files">Importing in your files</h3>
 
 Every file that contains JSX must import `Anu`, because the JSX transform expands to `Anu.createElement(...)` calls at compile time:
@@ -185,6 +196,8 @@ The following types are exported from `anu-verzum` for use in consumer projects:
 | `CreateSelectorFn` | Overloaded interface for `Anu.store.createSelector` — enables full type inference on transformation parameters |
 | `ApiSuccessResponse<T>` | Successful HTTP response `{ status: number; response: T \| null }` |
 | `ApiErrorResponse` | Error HTTP response `{ status: number; response: null }` |
+| `FormatNumberOptions` | Options for `Anu.Intl.formatNumber` — `Intl.NumberFormatOptions` plus an optional `locale` |
+| `ParseNumberOptions` | Options for `Anu.Intl.parseNumber` — `{ locale?: string }` |
 
 #### Library development scripts
 

package/dist/core/components/Intl.d.ts

@@ -14,8 +14,16 @@ export interface AbbreviateNumberOptions {
     decimalPlaces?: number;
     decimalSign?: string;
 }
+export interface FormatNumberOptions extends Intl.NumberFormatOptions {
+    locale?: string;
+}
+export interface ParseNumberOptions {
+    locale?: string;
+}
 declare const Intl: {
     abbreviateNumber: (value: number, options?: AbbreviateNumberOptions) => string | number;
+    formatNumber: (value: number, options?: FormatNumberOptions) => string;
+    parseNumber: (text: string, options?: ParseNumberOptions) => number | null;
     FormattedMessage: ({ id, values, defaultMessage }: FormattedMessageProps) => AnuElement;
     formatMessage: (id: string, values?: Record<string, string | number>, defaultMessage?: string) => string;
     Provider: ({ locale, messages, defaultLocale, children }: IntlProviderProps) => AnuElement | null;

package/dist/core/components/Intl.js

@@ -11,6 +11,11 @@ let __messagesContext = {
   locale: undefined,
   messages: {}
 };
+
+// `Intl.NumberFormatOptions` here refers to the global ECMAScript Intl namespace
+// (type space), not the local `Intl` API object declared at the bottom of this
+// file — a `const` introduces only a value binding, so the type reference is safe.
+
 const IntlProvider = ({
   locale,
   messages,
@@ -113,8 +118,15 @@ const formatMessage = (id, values, defaultMessage) => {
   }
   return textValue;
 };
+
+// Reduce any BCP 47 tag to its lowercase language subtag, e.g. 'hu-HU' / 'HU' → 'hu'.
+// Used for the exact dictionary-key lookups below (UNITS / DECIMAL_SIGN), which key
+// on the language only — so a Provider locale of 'hu', 'HU', or 'hu-HU' all resolve
+// to the same Hungarian entry. (formatNumber/parseNumber keep the full tag, since the
+// region subtag is meaningful to Intl.NumberFormat — e.g. en-US vs en-GB vs en-IN.)
+const getLanguageSubtag = locale => locale ? locale.toLowerCase().split('-')[0] : undefined;
 const abbreviateNumber = (value, options = {}) => {
-  const getByLocale = values => values[__messagesContext.locale || 'default'] || values['default'];
+  const getByLocale = values => values[getLanguageSubtag(__messagesContext.locale) || 'default'] || values['default'];
   const UNITS = {
     hu: ['E', 'm', 'M', 'b'],
     default: ['K', 'M', 'B', 'T']
@@ -162,8 +174,70 @@ const abbreviateNumber = (value, options = {}) => {
   }
   return value;
 };
+
+// The local `Intl` object below shadows the global ECMAScript `Intl`, so number
+// formatting/parsing must reach the real `Intl.NumberFormat` via `globalThis.Intl`.
+const resolveLocale = locale => locale || __messagesContext.locale || undefined;
+const formatNumber = (value, options = {}) => {
+  const {
+    locale,
+    ...numberFormatOptions
+  } = options;
+  if (typeof value !== 'number' || isNaN(value)) {
+    return String(value);
+  }
+  try {
+    return new globalThis.Intl.NumberFormat(resolveLocale(locale), numberFormatOptions).format(value);
+  } catch (err) {
+    console.error(err);
+    return String(value);
+  }
+};
+const parseNumber = (text, options = {}) => {
+  if (typeof text !== 'string') {
+    return null;
+  }
+  try {
+    // Discover the locale's grouping/decimal/minus marks from a known sample,
+    // then normalize the input back into a plain JS-parseable number string.
+    const parts = new globalThis.Intl.NumberFormat(resolveLocale(options.locale)).formatToParts(-12345.6);
+    const groupSign = parts.find(p => p.type === 'group')?.value ?? '';
+    const decimalSign = parts.find(p => p.type === 'decimal')?.value ?? '.';
+    const minusSign = parts.find(p => p.type === 'minusSign')?.value ?? '-';
+    let normalized = text.trim();
+    const isNegative = normalized.indexOf('-') > -1 || !!minusSign && normalized.indexOf(minusSign) > -1;
+
+    // Drop grouping separators: the explicit locale group sign plus any
+    // whitespace (JS `\s` covers NBSP/NNBSP, which several locales group with).
+    if (groupSign) {
+      normalized = normalized.split(groupSign).join('');
+    }
+    normalized = normalized.replace(/\s/g, '');
+
+    // Convert the locale decimal sign to a dot.
+    if (decimalSign && decimalSign !== '.') {
+      normalized = normalized.split(decimalSign).join('.');
+    }
+
+    // Keep only digits and the decimal dot; sign is reapplied from isNegative.
+    normalized = normalized.replace(/[^0-9.]/g, '');
+    if (normalized === '' || normalized === '.') {
+      return null;
+    }
+    const result = Number(normalized);
+    if (isNaN(result)) {
+      return null;
+    }
+    return isNegative ? -result : result;
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+};
 const Intl = {
   abbreviateNumber,
+  formatNumber,
+  parseNumber,
   FormattedMessage,
   formatMessage,
   Provider: IntlProvider

package/dist/index.d.ts

@@ -102,6 +102,8 @@ declare const Anu: {
     };
     Intl: {
         abbreviateNumber: (value: number, options?: import(".").AbbreviateNumberOptions) => string | number;
+        formatNumber: (value: number, options?: import(".").FormatNumberOptions) => string;
+        parseNumber: (text: string, options?: import(".").ParseNumberOptions) => number | null;
         FormattedMessage: ({ id, values, defaultMessage }: import("./core/components/Intl").FormattedMessageProps) => AnuElement;
         formatMessage: (id: string, values?: Record<string, string | number>, defaultMessage?: string) => string;
         Provider: ({ locale, messages, defaultLocale, children }: import("./core/components/Intl").IntlProviderProps) => AnuElement | null;
@@ -160,7 +162,7 @@ export type { ApiSuccessResponse, ApiErrorResponse } from './server-api/server-a
 export { Component, Fragment, createElement, createRef, createPortal, createContext, render, goTo };
 export { AnulyticsProvider, trackEvent };
 export { store, ServerAPI, Utils, Connector, Feature, History, Intl };
-export type { AbbreviateNumberOptions } from './core/components/Intl';
+export type { AbbreviateNumberOptions, FormatNumberOptions, ParseNumberOptions } from './core/components/Intl';
 declare global {
     namespace JSX {
         interface IntrinsicAttributes {

package/dist/testing/queries/byLabelText.js

@@ -15,8 +15,12 @@ const queryAllByLabelText = (container, label) => {
     }
     const forAttr = labelEl.getAttribute('for');
     if (forAttr) {
-      const input = container.querySelector(`#${CSS.escape(forAttr)}`);
-      if (input) {
+      // The `for` attribute is already an element id, so resolve it with
+      // getElementById — no CSS.escape needed (jsdom omits the browser-only
+      // `CSS` global), and it handles any id characters. Scope to container.
+      const doc = container.ownerDocument ?? document;
+      const input = doc.getElementById(forAttr);
+      if (input && container.contains(input)) {
         results.push(input);
       }
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anu-verzum",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "A \"React-like\" UI library that supports JSX syntax, Redux-like state management, array-rendering, i18n, routing and many more.",
   "keywords": [
     "anu-verzum",

package/webpack.config.js

@@ -17,7 +17,8 @@ module.exports = (projectRoot, options = {}) => ({
                 test: /\.[jt]sx?$/,
                 exclude: /node_modules/,
                 use: 'babel-loader'
-            }
+            },
+            ...(options.rules ?? [])
         ]
     },
     resolve: {