@medyll/idae-stator 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/stator/Stator.d.ts +1 -1
- package/dist/stator/Stator.js +31 -27
- package/package.json +43 -25
package/README.md
CHANGED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# Stator Demo
|
|
2
|
+
|
|
3
|
+
This is a demonstration of the **Stator** library, which provides reactive state management for JavaScript applications.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Reactive state creation using `stator`.
|
|
8
|
+
- Automatic state change detection with `onchange` handlers.
|
|
9
|
+
- Manual and automatic state updates.
|
|
10
|
+
- Simple UI updates based on state changes.
|
|
11
|
+
|
|
12
|
+
## Code Example
|
|
13
|
+
|
|
14
|
+
Below is an example of how to use the Stator library:
|
|
15
|
+
|
|
16
|
+
```javascript
|
|
17
|
+
// Import the stator library
|
|
18
|
+
import { stator } from './Stator.ts';
|
|
19
|
+
|
|
20
|
+
// Create reactive states
|
|
21
|
+
let countState = stator(0);
|
|
22
|
+
let countObje = stator({ index: 0 });
|
|
23
|
+
let monobjSte = stator({ index: 0 });
|
|
24
|
+
|
|
25
|
+
// State change handlers
|
|
26
|
+
countState.onchange = (oldValue, newValue) => {
|
|
27
|
+
console.log('countState', oldValue, newValue);
|
|
28
|
+
};
|
|
29
|
+
countObje.onchange = (oldValue, newValue) => {
|
|
30
|
+
console.log('countObje', oldValue, newValue);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// Increment the value every 30 seconds
|
|
34
|
+
setInterval(() => {
|
|
35
|
+
// Uncomment to enable automatic increment
|
|
36
|
+
// countState.stator++;
|
|
37
|
+
// monobjSte.stator.index++;
|
|
38
|
+
}, 30000);
|
|
39
|
+
|
|
40
|
+
// Function to manually increment the count
|
|
41
|
+
function incrementCount() {
|
|
42
|
+
countState.stator++;
|
|
43
|
+
monobjSte.stator.index++;
|
|
44
|
+
updateUI();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Function to update the UI
|
|
48
|
+
function updateUI() {
|
|
49
|
+
document.getElementById('count').textContent = `${countState.stator}-${countObje.stator.index}`;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Initialize the UI
|
|
53
|
+
window.onload = () => {
|
|
54
|
+
updateUI();
|
|
55
|
+
console.log(monobjSte, countState.stator);
|
|
56
|
+
};
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## HTML Structure
|
|
60
|
+
|
|
61
|
+
The following HTML structure is used for the demo:
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<!DOCTYPE html>
|
|
65
|
+
<html lang="en">
|
|
66
|
+
<head>
|
|
67
|
+
<meta charset="UTF-8">
|
|
68
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
69
|
+
<title>Stator Demo</title>
|
|
70
|
+
</head>
|
|
71
|
+
<body>
|
|
72
|
+
<h1>Stator Demo</h1>
|
|
73
|
+
<p>Count: <span id="count">0-0</span></p>
|
|
74
|
+
<button onclick="incrementCount()">Increment</button>
|
|
75
|
+
</body>
|
|
76
|
+
</html>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## How It Works
|
|
80
|
+
|
|
81
|
+
1. **Reactive States**: The `stator` function creates reactive states that automatically notify changes.
|
|
82
|
+
2. **State Handlers**: The `onchange` handlers log state changes to the console.
|
|
83
|
+
3. **UI Updates**: The `updateUI` function updates the DOM based on the current state values.
|
|
84
|
+
4. **Manual Increment**: The `incrementCount` function allows manual state updates via a button click.
|
|
85
|
+
|
|
86
|
+
## Usage
|
|
87
|
+
|
|
88
|
+
1. Clone the repository and include the `Stator.js` library in your project.
|
|
89
|
+
2. Use the provided code to create reactive states and bind them to your UI.
|
|
90
|
+
3. Customize the logic as needed for your application.
|
|
91
|
+
|
|
92
|
+
Enjoy building reactive applications with **Stator**!
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from './stator/Stator.js';
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
// auto exports of entry components
|
|
2
|
+
export * from './stator/Stator.js';
|
package/dist/stator/Stator.d.ts
CHANGED
package/dist/stator/Stator.js
CHANGED
|
@@ -10,7 +10,9 @@ export function stator(initialState) {
|
|
|
10
10
|
* @returns True if the value is a primitive, false otherwise
|
|
11
11
|
*/
|
|
12
12
|
function isPrimitive(val) {
|
|
13
|
-
return typeof val ===
|
|
13
|
+
return (typeof val === "string" ||
|
|
14
|
+
typeof val === "number" ||
|
|
15
|
+
typeof val === "boolean");
|
|
14
16
|
}
|
|
15
17
|
/**
|
|
16
18
|
* Logs errors with a custom prefix
|
|
@@ -21,39 +23,41 @@ export function stator(initialState) {
|
|
|
21
23
|
console.error(`[Stator Error] ${message}`, error);
|
|
22
24
|
}
|
|
23
25
|
// Create the state object
|
|
24
|
-
const state = {
|
|
26
|
+
const state = { value: initialState };
|
|
25
27
|
// Default onchange handler
|
|
26
28
|
let onchange;
|
|
27
29
|
// Proxy handler to intercept property access and modifications
|
|
28
30
|
const handler = {
|
|
29
31
|
get(target, property, receiver) {
|
|
30
32
|
try {
|
|
31
|
-
if (property ===
|
|
33
|
+
if (property === "onchange") {
|
|
32
34
|
return onchange;
|
|
33
35
|
}
|
|
34
|
-
if (property ===
|
|
35
|
-
return target.
|
|
36
|
+
if (property === "stator") {
|
|
37
|
+
return target.value;
|
|
36
38
|
}
|
|
37
|
-
if (property ===
|
|
39
|
+
if (property === "toString") {
|
|
38
40
|
return function () {
|
|
39
|
-
return String(target.
|
|
41
|
+
return String(target.value);
|
|
40
42
|
};
|
|
41
43
|
}
|
|
42
|
-
if (property ===
|
|
44
|
+
if (property === "valueOf") {
|
|
43
45
|
return function () {
|
|
44
|
-
return target.
|
|
46
|
+
return target.value;
|
|
45
47
|
};
|
|
46
48
|
}
|
|
47
49
|
if (property === Symbol.toPrimitive) {
|
|
48
50
|
return function (hint) {
|
|
49
|
-
if (hint ===
|
|
50
|
-
return Number(target.
|
|
51
|
-
if (hint ===
|
|
52
|
-
return String(target.
|
|
53
|
-
return isPrimitive(target.
|
|
51
|
+
if (hint === "number")
|
|
52
|
+
return Number(target.value);
|
|
53
|
+
if (hint === "string")
|
|
54
|
+
return String(target.value);
|
|
55
|
+
return isPrimitive(target.value)
|
|
56
|
+
? target.value
|
|
57
|
+
: String(target.value);
|
|
54
58
|
};
|
|
55
59
|
}
|
|
56
|
-
return Reflect.get(target.
|
|
60
|
+
return Reflect.get(target.value, property, receiver);
|
|
57
61
|
}
|
|
58
62
|
catch (error) {
|
|
59
63
|
logError(`Error getting property ${String(property)}:`, error);
|
|
@@ -61,26 +65,26 @@ export function stator(initialState) {
|
|
|
61
65
|
}
|
|
62
66
|
},
|
|
63
67
|
set(target, property, value, receiver) {
|
|
64
|
-
if (property ===
|
|
65
|
-
if (typeof value !==
|
|
66
|
-
throw new TypeError(
|
|
68
|
+
if (property === "onchange") {
|
|
69
|
+
if (typeof value !== "function") {
|
|
70
|
+
throw new TypeError("onchange must be a function");
|
|
67
71
|
}
|
|
68
72
|
onchange = value;
|
|
69
73
|
return true;
|
|
70
74
|
}
|
|
71
75
|
try {
|
|
72
|
-
const oldValue = target.
|
|
76
|
+
const oldValue = target.value;
|
|
73
77
|
let newValue;
|
|
74
|
-
if (property ===
|
|
78
|
+
if (property === "stator") {
|
|
75
79
|
newValue = value;
|
|
76
|
-
target.
|
|
80
|
+
target.value = value;
|
|
77
81
|
}
|
|
78
|
-
else if (typeof target.
|
|
79
|
-
Reflect.set(target.
|
|
80
|
-
newValue = { ...target.
|
|
82
|
+
else if (typeof target.value === "object" && target.value !== null) {
|
|
83
|
+
Reflect.set(target.value, property, value);
|
|
84
|
+
newValue = { ...target.value };
|
|
81
85
|
}
|
|
82
86
|
else {
|
|
83
|
-
throw new Error(
|
|
87
|
+
throw new Error("Cannot set property on primitive value");
|
|
84
88
|
}
|
|
85
89
|
if (onchange && !Object.is(oldValue, newValue)) {
|
|
86
90
|
onchange(oldValue, newValue);
|
|
@@ -91,8 +95,8 @@ export function stator(initialState) {
|
|
|
91
95
|
logError(`Error setting property ${String(property)}:`, error);
|
|
92
96
|
throw error;
|
|
93
97
|
}
|
|
94
|
-
}
|
|
95
|
-
// ... (
|
|
98
|
+
},
|
|
99
|
+
// ... (other methods unchanged)
|
|
96
100
|
};
|
|
97
101
|
// Create and return the proxied state object
|
|
98
102
|
return new Proxy(state, handler);
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@medyll/idae-stator",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "A lightweight and efficient state management library designed for building reactive and scalable JavaScript applications.",
|
|
4
5
|
"scripts": {
|
|
5
6
|
"dev": "vite dev",
|
|
6
7
|
"build": "vite build && npm run package",
|
|
@@ -12,12 +13,13 @@
|
|
|
12
13
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
13
14
|
"test": "vitest",
|
|
14
15
|
"lint": "prettier --check . && eslint .",
|
|
15
|
-
"format": "prettier --write ."
|
|
16
|
+
"format": "prettier --write .",
|
|
17
|
+
"package:pre": "node scripts/package-pre.js"
|
|
16
18
|
},
|
|
17
19
|
"exports": {
|
|
18
20
|
".": {
|
|
19
21
|
"types": "./dist/index.d.ts",
|
|
20
|
-
"
|
|
22
|
+
"import": "./dist/index.js"
|
|
21
23
|
}
|
|
22
24
|
},
|
|
23
25
|
"files": [
|
|
@@ -26,32 +28,48 @@
|
|
|
26
28
|
"!dist/**/*.spec.*"
|
|
27
29
|
],
|
|
28
30
|
"peerDependencies": {
|
|
29
|
-
"svelte": "^5.0.0-next
|
|
31
|
+
"svelte": "^5.0.0-next"
|
|
30
32
|
},
|
|
31
33
|
"devDependencies": {
|
|
32
|
-
"@medyll/idae-prettier-config": "^1.
|
|
33
|
-
"@sveltejs/adapter-auto": "^
|
|
34
|
-
"@sveltejs/kit": "^2.
|
|
35
|
-
"@sveltejs/package": "^2.
|
|
36
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
37
|
-
"@types/eslint": "^
|
|
38
|
-
"eslint": "^9.
|
|
39
|
-
"eslint-config-prettier": "^
|
|
40
|
-
"eslint-plugin-svelte": "^
|
|
41
|
-
"globals": "^
|
|
42
|
-
"prettier": "^3.
|
|
43
|
-
"prettier-plugin-svelte": "^3.
|
|
44
|
-
"
|
|
45
|
-
"svelte": "^
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"typescript": "^
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"vitest": "^1.2.0"
|
|
34
|
+
"@medyll/idae-prettier-config": "^1.2.1",
|
|
35
|
+
"@sveltejs/adapter-auto": "^5.0.0",
|
|
36
|
+
"@sveltejs/kit": "^2.20.2",
|
|
37
|
+
"@sveltejs/package": "^2.3.10",
|
|
38
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
39
|
+
"@types/eslint": "^9.6.1",
|
|
40
|
+
"eslint": "^9.23.0",
|
|
41
|
+
"eslint-config-prettier": "^10.1.1",
|
|
42
|
+
"eslint-plugin-svelte": "^3.3.3",
|
|
43
|
+
"globals": "^16.0.0",
|
|
44
|
+
"prettier": "^3.5.3",
|
|
45
|
+
"prettier-plugin-svelte": "^3.3.3",
|
|
46
|
+
"svelte": "^5.25.3",
|
|
47
|
+
"svelte-check": "^4.1.5",
|
|
48
|
+
"tslib": "^2.8.1",
|
|
49
|
+
"typescript": "^5.8.2",
|
|
50
|
+
"typescript-eslint": "^8.28.0",
|
|
51
|
+
"vite": "^6.2.3",
|
|
52
|
+
"vitest": "^3.0.9"
|
|
52
53
|
},
|
|
54
|
+
"keywords": [
|
|
55
|
+
"state-management",
|
|
56
|
+
"reactive",
|
|
57
|
+
"scalable",
|
|
58
|
+
"javascript",
|
|
59
|
+
"library"
|
|
60
|
+
],
|
|
61
|
+
"author": "Your Name <your.email@example.com>",
|
|
62
|
+
"license": "MIT",
|
|
63
|
+
"repository": {
|
|
64
|
+
"type": "git",
|
|
65
|
+
"url": "https://github.com/your-repo/idae-stator.git"
|
|
66
|
+
},
|
|
67
|
+
"bugs": {
|
|
68
|
+
"url": "https://github.com/your-repo/idae-stator/issues"
|
|
69
|
+
},
|
|
70
|
+
"homepage": "https://github.com/your-repo/idae-stator#readme",
|
|
53
71
|
"svelte": "./dist/index.js",
|
|
54
72
|
"types": "./dist/index.d.ts",
|
|
55
73
|
"type": "module",
|
|
56
74
|
"scope": "medyll"
|
|
57
|
-
}
|
|
75
|
+
}
|