@ailuracode/alpine-network 1.0.0 → 1.0.1

package/README.md

@@ -30,7 +30,8 @@ Alpine.start();
 | | |
 |-|-|
 | **Magic** | `$network` |
-| **Properties** | `isOnline` (boolean) |
+| **Getters** | `isOnline`, `isOffline` (boolean) |
+| **Helpers** | `readNetworkState()`, `createNetworkState()` |
 
 ## License
 

package/dist/global.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="@types/alpinejs" />
 
 export interface NetworkMagic {
-  isOnline: boolean;
+  readonly isOnline: boolean;
+  readonly isOffline: boolean;
 }
 
+export function readNetworkState(): NetworkMagic;
+
+export function createNetworkState(isOnline?: boolean): NetworkMagic;
+
 declare global {
   namespace Alpine {
     interface Magics<T> {

package/dist/index.d.ts

@@ -1,8 +1,16 @@
 import AlpineType from 'alpinejs';
 
 interface NetworkMagic {
-    isOnline: boolean;
+    readonly isOnline: boolean;
+    readonly isOffline: boolean;
 }
+type NetworkStateRecord = NetworkMagic & {
+    _online: boolean;
+};
+/** Reads current connectivity from `navigator.onLine` (defaults to online when unavailable). */
+declare function readNetworkState(): NetworkMagic;
+/** Builds reactive network state with getter-based flags. */
+declare function createNetworkState(isOnline?: boolean): NetworkStateRecord;
 /** Alpine.js network plugin. Registers reactive magic `$network`. */
 declare function networkPlugin(Alpine: AlpineType.Alpine): void;
 declare global {
@@ -13,4 +21,4 @@ declare global {
     }
 }
 
-export { type NetworkMagic, networkPlugin as default };
+export { type NetworkMagic, createNetworkState, networkPlugin as default, readNetworkState };

package/dist/index.js

@@ -1,14 +1,34 @@
 // src/index.ts
+function readNetworkState() {
+  const isOnline = typeof navigator !== "undefined" ? navigator.onLine : true;
+  return {
+    isOnline,
+    isOffline: !isOnline
+  };
+}
+function createNetworkState(isOnline = readNetworkState().isOnline) {
+  return {
+    _online: isOnline,
+    get isOnline() {
+      return this._online;
+    },
+    get isOffline() {
+      return !this._online;
+    }
+  };
+}
 function networkPlugin(Alpine) {
-  const state = Alpine.reactive({ isOnline: navigator.onLine });
+  const state = Alpine.reactive(createNetworkState());
   Alpine.magic("network", () => state);
   const update = () => {
-    state.isOnline = navigator.onLine;
+    state._online = navigator.onLine;
   };
   window.addEventListener("online", update);
   window.addEventListener("offline", update);
 }
 export {
-  networkPlugin as default
+  createNetworkState,
+  networkPlugin as default,
+  readNetworkState
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type AlpineType from \"alpinejs\";\n\nexport interface NetworkMagic {\n  isOnline: boolean;\n}\n\n/** Alpine.js network plugin. Registers reactive magic `$network`. */\nexport default function networkPlugin(Alpine: AlpineType.Alpine): void {\n  const state = Alpine.reactive<NetworkMagic>({ isOnline: navigator.onLine });\n\n  Alpine.magic(\"network\", () => state);\n\n  const update = () => {\n    state.isOnline = navigator.onLine;\n  };\n\n  window.addEventListener(\"online\", update);\n  window.addEventListener(\"offline\", update);\n}\n\ndeclare global {\n  namespace Alpine {\n    interface Magics<T> {\n      $network: NetworkMagic;\n    }\n  }\n}\n"],"mappings":";AAOe,SAAR,cAA+B,QAAiC;AACrE,QAAM,QAAQ,OAAO,SAAuB,EAAE,UAAU,UAAU,OAAO,CAAC;AAE1E,SAAO,MAAM,WAAW,MAAM,KAAK;AAEnC,QAAM,SAAS,MAAM;AACnB,UAAM,WAAW,UAAU;AAAA,EAC7B;AAEA,SAAO,iBAAiB,UAAU,MAAM;AACxC,SAAO,iBAAiB,WAAW,MAAM;AAC3C;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type AlpineType from \"alpinejs\";\n\nexport interface NetworkMagic {\n  readonly isOnline: boolean;\n  readonly isOffline: boolean;\n}\n\ntype NetworkStateRecord = NetworkMagic & {\n  _online: boolean;\n};\n\n/** Reads current connectivity from `navigator.onLine` (defaults to online when unavailable). */\nexport function readNetworkState(): NetworkMagic {\n  const isOnline = typeof navigator !== \"undefined\" ? navigator.onLine : true;\n\n  return {\n    isOnline,\n    isOffline: !isOnline,\n  };\n}\n\n/** Builds reactive network state with getter-based flags. */\nexport function createNetworkState(isOnline = readNetworkState().isOnline): NetworkStateRecord {\n  return {\n    _online: isOnline,\n    get isOnline() {\n      return this._online;\n    },\n    get isOffline() {\n      return !this._online;\n    },\n  };\n}\n\n/** Alpine.js network plugin. Registers reactive magic `$network`. */\nexport default function networkPlugin(Alpine: AlpineType.Alpine): void {\n  const state = Alpine.reactive(createNetworkState());\n\n  Alpine.magic(\"network\", () => state as NetworkMagic);\n\n  const update = () => {\n    state._online = navigator.onLine;\n  };\n\n  window.addEventListener(\"online\", update);\n  window.addEventListener(\"offline\", update);\n}\n\ndeclare global {\n  namespace Alpine {\n    interface Magics<T> {\n      $network: NetworkMagic;\n    }\n  }\n}\n"],"mappings":";AAYO,SAAS,mBAAiC;AAC/C,QAAM,WAAW,OAAO,cAAc,cAAc,UAAU,SAAS;AAEvE,SAAO;AAAA,IACL;AAAA,IACA,WAAW,CAAC;AAAA,EACd;AACF;AAGO,SAAS,mBAAmB,WAAW,iBAAiB,EAAE,UAA8B;AAC7F,SAAO;AAAA,IACL,SAAS;AAAA,IACT,IAAI,WAAW;AACb,aAAO,KAAK;AAAA,IACd;AAAA,IACA,IAAI,YAAY;AACd,aAAO,CAAC,KAAK;AAAA,IACf;AAAA,EACF;AACF;AAGe,SAAR,cAA+B,QAAiC;AACrE,QAAM,QAAQ,OAAO,SAAS,mBAAmB,CAAC;AAElD,SAAO,MAAM,WAAW,MAAM,KAAqB;AAEnD,QAAM,SAAS,MAAM;AACnB,UAAM,UAAU,UAAU;AAAA,EAC5B;AAEA,SAAO,iBAAiB,UAAU,MAAM;AACxC,SAAO,iBAAiB,WAAW,MAAM;AAC3C;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ailuracode/alpine-network",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Alpine.js network connectivity magic",
   "type": "module",
   "license": "MIT",
@@ -51,6 +51,6 @@
   ],
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean --sourcemap --out-dir dist && cp src/global.d.ts dist/global.d.ts",
-    "test": "vitest run --config ../../vitest.config.js test"
+    "test": "vitest run --config ../../vitest.config.ts test"
   }
 }