@simplysm/solid 13.0.75 → 13.0.77

package/src/hooks/createControllableSignal.ts

@@ -1,13 +1,4 @@
-import { createSignal, createEffect } from "solid-js";
-
-/**
- * Utility type that restricts function types.
- * If a function type is passed, it is converted to never, causing a compile-time error.
- *
- * @remarks
- * To store a function, wrap it in an object: `createControllableSignal<{ fn: () => void }>(...)`
- */
-type NotFunction<TValue> = TValue extends (...args: unknown[]) => unknown ? never : TValue;
+import { type Accessor, createEffect, createSignal } from "solid-js";
 
 /**
  * Signal hook that supports the controlled/uncontrolled pattern.
@@ -36,9 +27,9 @@ type NotFunction<TValue> = TValue extends (...args: unknown[]) => unknown ? neve
  * ```
  */
 export function createControllableSignal<TValue>(options: {
-  value: () => TValue & NotFunction<TValue>;
-  onChange: () => ((value: TValue) => void) | undefined;
-}) {
+  value: Accessor<TValue>;
+  onChange: Accessor<((value: TValue) => void) | undefined>;
+}): [Accessor<TValue>, (newValue: TValue | ((prev: TValue) => TValue)) => TValue] {
   const [internalValue, setInternalValue] = createSignal<TValue>(options.value());
 
   // Sync internal state when props change (props take precedence)
@@ -47,18 +38,19 @@ export function createControllableSignal<TValue>(options: {
     setInternalValue(() => propValue);
   });
 
-  const isControlled = () => options.onChange() !== undefined;
+  const isControlled = () => options.onChange() != null;
   const value = () => (isControlled() ? options.value() : internalValue());
-  const setValue = (newValue: TValue | ((prev: TValue) => TValue)) => {
-    const resolved =
-      typeof newValue === "function" ? (newValue as (prev: TValue) => TValue)(value()) : newValue;
+  const setValue = (newValue: TValue | ((prev: TValue) => TValue)): TValue => {
+    const resolved = newValue instanceof Function ? (newValue as (prev: TValue) => TValue)(value()) : newValue;
 
     if (isControlled()) {
       options.onChange()?.(resolved);
     } else {
       setInternalValue(() => resolved);
     }
+
+    return resolved;
   };
 
-  return [value, setValue] as const;
+  return [value, setValue];
 }

package/src/hooks/createControllableStore.ts

@@ -1,7 +1,7 @@
 import { createEffect } from "solid-js";
 import { createStore, reconcile, unwrap } from "solid-js/store";
 import type { SetStoreFunction } from "solid-js/store";
-import { objClone } from "@simplysm/core-common";
+import { obj } from "@simplysm/core-common";
 
 /**
  * Store hook that supports the controlled/uncontrolled pattern.
@@ -30,7 +30,7 @@ export function createControllableStore<TValue extends object>(options: {
   value: () => TValue;
   onChange: () => ((value: TValue) => void) | undefined;
 }): [TValue, SetStoreFunction<TValue>] {
-  const [store, rawSet] = createStore<TValue>(objClone(options.value()));
+  const [store, rawSet] = createStore<TValue>(obj.clone(options.value()));
 
   // Sync internal store when external value changes
   createEffect(() => {
@@ -39,11 +39,10 @@ export function createControllableStore<TValue extends object>(options: {
 
   // Wrap setter with a function wrapper to add onChange notification
   const wrappedSet = ((...args: any[]) => {
-    const before = JSON.stringify(unwrap(store));
+    const before = obj.clone(unwrap(store));
     (rawSet as any)(...args);
-    const after = JSON.stringify(unwrap(store));
-    if (before !== after) {
-      options.onChange()?.(objClone(unwrap(store)));
+    if (!obj.equal(before, unwrap(store))) {
+      options.onChange()?.(obj.clone(unwrap(store)));
     }
   }) as SetStoreFunction<TValue>;
 

package/src/hooks/useLogger.ts

@@ -1,6 +1,6 @@
 import { useContext } from "solid-js";
 import { consola } from "consola";
-import { LoggerContext, type LogAdapter } from "../providers/LoggerContext";
+import { LoggerContext, type LogAdapter } from "../providers/LoggerProvider";
 
 type LogLevel = Parameters<LogAdapter["write"]>[0];
 

package/src/hooks/useSyncConfig.ts

@@ -1,6 +1,6 @@
 import { type Accessor, type Setter, createEffect, createSignal, untrack } from "solid-js";
 import { useConfig } from "../providers/ConfigContext";
-import { useSyncStorage } from "../providers/SyncStorageContext";
+import { useSyncStorage } from "../providers/SyncStorageProvider";
 
 /**
  * Creates a reactive signal that syncs configuration data to storage.

package/src/index.ts

@@ -41,9 +41,7 @@ export * from "./components/form-control/Invalid";
 export * from "./components/layout/FormGroup";
 export * from "./components/layout/FormTable";
 export * from "./components/layout/sidebar/Sidebar";
-export * from "./components/layout/sidebar/SidebarContext";
 export * from "./components/layout/topbar/Topbar";
-export * from "./components/layout/topbar/TopbarContext";
 
 //#endregion
 
@@ -56,16 +54,16 @@ export * from "./components/data/list/ListItem.styles";
 export * from "./components/data/Pagination";
 export * from "./components/data/sheet/DataSheet";
 export * from "./components/data/sheet/DataSheet.styles";
-export * from "./components/data/sheet/types";
+export * from "./components/data/sheet/DataSheet.types";
 export * from "./components/data/calendar/Calendar";
 export * from "./components/data/kanban/Kanban";
-export * from "./components/data/kanban/KanbanContext";
 
 //#endregion
 
 //#region ========== Display ==========
 
 export * from "./components/display/Barcode";
+export * from "./components/display/Barcode.types";
 export * from "./components/display/Card";
 export * from "./components/display/Echarts";
 export * from "./components/display/Icon";
@@ -80,9 +78,6 @@ export * from "./components/display/Alert";
 export * from "./components/disclosure/Collapse";
 export * from "./components/disclosure/Dropdown";
 export * from "./components/disclosure/Dialog";
-export * from "./components/disclosure/DialogContext";
-export * from "./components/disclosure/DialogInstanceContext";
-export * from "./components/disclosure/DialogProvider";
 export * from "./components/disclosure/Tabs";
 
 //#endregion
@@ -90,19 +85,17 @@ export * from "./components/disclosure/Tabs";
 //#region ========== Feedback ==========
 
 // Notification
-export * from "./components/feedback/notification/NotificationContext";
+export * from "./components/feedback/notification/NotificationProvider";
 export * from "./components/feedback/notification/NotificationBell";
 export * from "./components/feedback/notification/NotificationBanner";
 
 // Busy
-export * from "./components/feedback/busy/BusyContext";
+export * from "./components/feedback/busy/BusyProvider";
 export * from "./components/feedback/busy/BusyContainer";
 
 // Print
-export * from "./components/feedback/print/PrintContext";
 export * from "./components/feedback/print/PrintProvider";
 export * from "./components/feedback/print/Print";
-export * from "./components/feedback/print/PrintInstanceContext";
 export * from "./components/feedback/Progress";
 
 //#endregion
@@ -113,27 +106,27 @@ export * from "./components/feedback/Progress";
 export * from "./providers/ConfigContext";
 
 // SyncStorage
-export * from "./providers/SyncStorageContext";
+export * from "./providers/SyncStorageProvider";
 
 // Logger
-export * from "./providers/LoggerContext";
+export * from "./providers/LoggerProvider";
 
 // Theme
 export * from "./providers/ThemeContext";
 
 // ServiceClient
-export * from "./providers/ServiceClientContext";
+export * from "./providers/ServiceClientProvider";
 
 // SharedData
-export * from "./providers/shared-data/SharedDataContext";
+export * from "./providers/shared-data/SharedDataProvider";
 export * from "./providers/shared-data/SharedDataChangeEvent";
 
 // SystemProvider
 export * from "./providers/SystemProvider";
 
 // I18n
-export * from "./providers/i18n/I18nContext";
-export * from "./providers/i18n/I18nContext.types";
+export * from "./providers/i18n/I18nProvider";
+export * from "./providers/i18n/I18nProvider.types";
 
 //#endregion
 
@@ -146,15 +139,16 @@ export * from "./hooks/createControllableSignal";
 export * from "./hooks/createControllableStore";
 export * from "./hooks/createIMEHandler";
 export * from "./hooks/createMountTransition";
-export * from "./hooks/createSlotSignal";
 export * from "./hooks/useRouterLink";
 
 //#endregion
 
 //#region ========== Styles ==========
 
-export * from "./styles/tokens.styles";
-export * from "./styles/patterns.styles";
+export * from "./styles/base.styles";
+export * from "./styles/control.styles";
+export * from "./styles/theme.styles";
+
 
 //#endregion
 
@@ -168,7 +162,8 @@ export * from "./directives/ripple";
 
 export * from "./helpers/mergeStyles";
 export * from "./helpers/createAppStructure";
-export * from "./helpers/createSlotComponent";
+export * from "./helpers/createSlot";
+export * from "./helpers/createSlots";
 
 //#endregion
 
@@ -187,11 +182,11 @@ export * from "./components/features/data-select-button/DataSelectButton";
 
 // CrudSheet
 export * from "./components/features/crud-sheet/CrudSheet";
-export * from "./components/features/crud-sheet/types";
+export * from "./components/features/crud-sheet/CrudSheet.types";
 
 // CrudDetail
 export * from "./components/features/crud-detail/CrudDetail";
-export * from "./components/features/crud-detail/types";
+export * from "./components/features/crud-detail/CrudDetail.types";
 
 // PermissionTable
 export * from "./components/features/permission-table/PermissionTable";

package/src/providers/ConfigContext.tsx

@@ -40,7 +40,6 @@ export function useConfig(): AppConfig {
  */
 export const ConfigProvider: ParentComponent<{ clientName: string }> = (props) => {
   return (
-    // eslint-disable-next-line solid/reactivity -- clientName is an initial config value that does not change
     <ConfigContext.Provider value={{ clientName: props.clientName }}>
       {props.children}
     </ConfigContext.Provider>

package/src/providers/PwaUpdateProvider.tsx

@@ -1,5 +1,5 @@
 import { onCleanup, type ParentComponent } from "solid-js";
-import { useNotification } from "../components/feedback/notification/NotificationContext";
+import { useNotification } from "../components/feedback/notification/NotificationProvider";
 
 const UPDATE_INTERVAL = 5 * 60 * 1000; // 5 minutes
 

package/src/providers/ServiceClientProvider.tsx

@@ -1,12 +1,41 @@
-import { type ParentComponent, onCleanup } from "solid-js";
+import { createContext, type ParentComponent, onCleanup, useContext } from "solid-js";
 import {
   createServiceClient,
   type ServiceClient,
-  type ServiceConnectionConfig,
+  type ServiceConnectionOptions,
 } from "@simplysm/service-client";
-import { ServiceClientContext, type ServiceClientContextValue } from "./ServiceClientContext";
 import { useConfig } from "./ConfigContext";
-import { useNotification } from "../components/feedback/notification/NotificationContext";
+import { useNotification } from "../components/feedback/notification/NotificationProvider";
+
+/**
+ * WebSocket service client context value.
+ */
+export interface ServiceClientContextValue {
+  /** Open a WebSocket connection (defaults to "default" if key is omitted) */
+  connect: (key?: string, options?: Partial<ServiceConnectionOptions>) => Promise<void>;
+  /** Close a connection */
+  close: (key?: string) => Promise<void>;
+  /** Get a connected client instance (throws if the key is not connected) */
+  get: (key?: string) => ServiceClient;
+  /** Check connection status */
+  isConnected: (key?: string) => boolean;
+}
+
+/** WebSocket service client Context */
+export const ServiceClientContext = createContext<ServiceClientContextValue>();
+
+/**
+ * Hook to access the WebSocket service client.
+ *
+ * @throws Throws an error if ServiceClientProvider is not present
+ */
+export function useServiceClient(): ServiceClientContextValue {
+  const context = useContext(ServiceClientContext);
+  if (!context) {
+    throw new Error("useServiceClient can only be used inside ServiceClientProvider");
+  }
+  return context;
+}
 
 /**
  * WebSocket service client Provider.
@@ -37,6 +66,31 @@ export const ServiceClientProvider: ParentComponent = (props) => {
   const reqProgressMap = new Map<string, string>();
   const resProgressMap = new Map<string, string>();
 
+  function handleProgress(
+    progressMap: Map<string, string>,
+    state: { uuid: string; completedSize: number; totalSize: number },
+    startTitle: string,
+    completeTitle: string,
+  ) {
+    const existing = progressMap.get(state.uuid);
+
+    if (existing == null) {
+      const id = notification.info(startTitle, "0%");
+      progressMap.set(state.uuid, id);
+    } else {
+      const percent = Math.round((state.completedSize / state.totalSize) * 100);
+      notification.update(existing, { message: `${percent}%` });
+    }
+
+    if (state.completedSize === state.totalSize) {
+      const id = progressMap.get(state.uuid);
+      if (id != null) {
+        notification.update(id, { title: completeTitle, message: "100%" }, { renotify: true });
+        progressMap.delete(state.uuid);
+      }
+    }
+  }
+
   onCleanup(() => {
     for (const client of clientMap.values()) {
       void client.close();
@@ -46,7 +100,7 @@ export const ServiceClientProvider: ParentComponent = (props) => {
 
   const connect = async (
     key?: string,
-    options?: Partial<ServiceConnectionConfig>,
+    options?: Partial<ServiceConnectionOptions>,
   ): Promise<void> => {
     const resolvedKey = key ?? "default";
 
@@ -59,7 +113,7 @@ export const ServiceClientProvider: ParentComponent = (props) => {
       }
     }
 
-    const defaultConfig: ServiceConnectionConfig = {
+    const defaultConfig: ServiceConnectionOptions = {
       host: location.hostname,
       port: Number(location.port) || (location.protocol.startsWith("https") ? 443 : 80),
       ssl: location.protocol.startsWith("https"),
@@ -70,60 +124,12 @@ export const ServiceClientProvider: ParentComponent = (props) => {
       ...options,
     });
 
-    // Request progress event
     client.on("request-progress", (state) => {
-      const existing = reqProgressMap.get(state.uuid);
-
-      if (existing == null) {
-        const id = notification.info("Sending request", "0%");
-        reqProgressMap.set(state.uuid, id);
-      } else {
-        const percent = Math.round((state.completedSize / state.totalSize) * 100);
-        notification.update(existing, { message: `${percent}%` });
-      }
-
-      if (state.completedSize === state.totalSize) {
-        const id = reqProgressMap.get(state.uuid);
-        if (id != null) {
-          notification.update(
-            id,
-            {
-              title: "Request transmission completed",
-              message: "100%",
-            },
-            { renotify: true },
-          );
-          reqProgressMap.delete(state.uuid);
-        }
-      }
+      handleProgress(reqProgressMap, state, "Sending request", "Request transmission completed");
     });
 
-    // Response progress event
     client.on("response-progress", (state) => {
-      const existing = resProgressMap.get(state.uuid);
-
-      if (existing == null) {
-        const id = notification.info("Receiving response", "0%");
-        resProgressMap.set(state.uuid, id);
-      } else {
-        const percent = Math.round((state.completedSize / state.totalSize) * 100);
-        notification.update(existing, { message: `${percent}%` });
-      }
-
-      if (state.completedSize === state.totalSize) {
-        const id = resProgressMap.get(state.uuid);
-        if (id != null) {
-          notification.update(
-            id,
-            {
-              title: "Response reception completed",
-              message: "100%",
-            },
-            { renotify: true },
-          );
-          resProgressMap.delete(state.uuid);
-        }
-      }
+      handleProgress(resProgressMap, state, "Receiving response", "Response reception completed");
     });
 
     await client.connect();

package/src/providers/SystemProvider.tsx

@@ -1,8 +1,8 @@
 import { type ParentComponent } from "solid-js";
 import { ConfigProvider } from "./ConfigContext";
-import { I18nProvider } from "./i18n/I18nContext";
-import { SyncStorageProvider } from "./SyncStorageContext";
-import { LoggerProvider } from "./LoggerContext";
+import { I18nProvider } from "./i18n/I18nProvider";
+import { SyncStorageProvider } from "./SyncStorageProvider";
+import { LoggerProvider } from "./LoggerProvider";
 import { NotificationProvider } from "../components/feedback/notification/NotificationProvider";
 import { NotificationBanner } from "../components/feedback/notification/NotificationBanner";
 import { ErrorLoggerProvider } from "./ErrorLoggerProvider";
@@ -11,8 +11,7 @@ import { ClipboardProvider } from "./ClipboardProvider";
 import { ThemeProvider } from "./ThemeContext";
 import { ServiceClientProvider } from "./ServiceClientProvider";
 import { SharedDataProvider } from "./shared-data/SharedDataProvider";
-import { BusyProvider } from "../components/feedback/busy/BusyProvider";
-import type { BusyVariant } from "../components/feedback/busy/BusyContext";
+import { BusyProvider, type BusyVariant } from "../components/feedback/busy/BusyProvider";
 
 export type { BusyVariant };
 

package/src/providers/i18n/{I18nContext.tsx → I18nProvider.tsx}

@@ -5,7 +5,7 @@ import {
   createSignal,
   createMemo,
 } from "solid-js";
-import type { I18nContextValue, I18nConfigureOptions, FlatDict } from "./I18nContext.types";
+import type { I18nContextValue, I18nConfigureOptions, FlatDict } from "./I18nProvider.types";
 import { flattenDict, mergeDict, interpolate } from "./i18nUtils";
 import enDict from "./locales/en";
 import koDict from "./locales/ko";