spikijs 1.0.2 → 1.0.5

package/README.md

@@ -21,7 +21,7 @@ npm install spikijs
 You can use the CDN directly in your HTML using a standard script tag:
 
 ```html
-<script src="https://unpkg.com/spikijs@1.0.2/spiki.min.js"></script>
+<script src="https://unpkg.com/spikijs@1.0.0/spiki.min.js"></script>
 
 ```
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "spikijs",
     "license": "MIT",
-    "version": "1.0.2",
+    "version": "1.0.5",
     "type": "module",
     "repository": {
       "type": "git",
@@ -12,10 +12,12 @@
       "url": "https://github.com/novver/spikijs/issues"
     },
     "main": "./spiki.esm.min.js",
+    "types": "./spiki.d.ts",
     "unpkg": "./spiki.min.js",
     "jsdelivr": "./spiki.min.js",
     "exports": {
       ".": {
+        "types": "./spiki.d.ts",
         "development": "./spiki.esm.js",
         "default": "./spiki.esm.min.js"
       }
@@ -24,6 +26,7 @@
       "spiki.esm.js",
       "spiki.esm.min.js",
       "spiki.js",
-      "spiki.min.js"
+      "spiki.min.js",
+      "spiki.d.ts"
     ]
   }

package/spiki.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Interface representing the internal properties injected by Spiki.
+ * These are available via 'this' inside your component.
+ */
+export interface SpikiInstance {
+    /**
+     * The root DOM element of the component (the one with s-data).
+     */
+    readonly $root: HTMLElement;
+
+    /**
+     * References to DOM elements marked with `s-ref`.
+     * Example: <input s-ref="box"> becomes this.$refs.box
+     */
+    readonly $refs: Record<string, HTMLElement>;
+
+    /**
+     * Access to the global reactive store.
+     */
+    readonly $store: Record<string, any>;
+
+    /**
+     * Lifecycle hook: Called immediately after the component is mounted.
+     */
+    init?(): void;
+
+    /**
+     * Lifecycle hook: Called when the component is removed from the DOM.
+     */
+    destroy?(): void;
+
+    /**
+     * Index signature to allow dynamic properties.
+     * This prevents TypeScript errors when accessing variables 
+     * injected by 's-for' loops (e.g., this.item, this.index).
+     */
+    [key: string]: any;
+}
+
+/**
+ * Type helper for the data factory.
+ * It ensures 'this' inside your methods includes both your data 
+ * and Spiki's internal properties ($refs, $root, etc).
+ */
+type ComponentFactory<T> = () => T & ThisType<T & SpikiInstance>;
+
+interface Spiki {
+    /**
+     * Registers a new component.
+     * 
+     * @param name The name matching the 's-data' attribute in HTML.
+     * @param factory A function that returns the initial state object.
+     */
+    data<T extends object>(name: string, factory: ComponentFactory<T>): void;
+
+    /**
+     * Starts the Spiki engine.
+     * Scans the DOM for 's-data' elements and mounts them.
+     */
+    start(): void;
+
+    /**
+     * Retrieves a value from the global store.
+     */
+    store<T = any>(key: string): T;
+
+    /**
+     * Sets a value in the global store.
+     */
+    store<T = any>(key: string, value: T): T;
+}
+
+declare const spiki: Spiki;
+export default spiki;