patron-oop 1.34.0 → 1.35.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,118 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8"/>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
- <title>Document</title>
7
- </head>
8
- <body>
9
- <h1>Elegant Objects</h1>
10
- <p>Композиция объектов описывает поведение</p>
11
- <p>Умножение: num1 * num2 = result</p>
12
- <div>
13
- <label>
14
- num1:
15
- <input type="number" class="input-1"/>
16
- </label>
17
- </div>
18
- <div>
19
- <label>
20
- num2:
21
- <input type="number" class="input-2"/>
22
- </label>
23
- </div>
24
- <div>result = <b class="result"></b></div>
25
- <script type="module">
26
- import 'https://cdn.jsdelivr.net/npm/patron-oop@1.8.0/dist/patron.min.js';
27
-
28
- const {
29
- Patron,
30
- Source,
31
- GuestChain,
32
- GuestCast,
33
- GuestInTheMiddle,
34
- } = window.GUEST_LIBRARY;
35
-
36
- class TextInDocument {
37
- constructor(selector) {
38
- this.element = document.querySelector(selector);
39
- }
40
-
41
- receive(value) {
42
- this.element.innerText = value;
43
- }
44
- }
45
-
46
- class Input {
47
- constructor(source, selector) {
48
- this.source = source;
49
- const el = document.querySelector(selector);
50
- this.source.value(
51
- new Patron((value) => {
52
- el.value = value;
53
- }),
54
- );
55
- el.addEventListener('keyup', (e) => {
56
- this.give(e.target.value);
57
- });
58
- el.addEventListener('change', (e) => {
59
- this.give(e.target.value);
60
- });
61
- }
62
-
63
- receiving(guest) {
64
- this.source.value(guest);
65
- return this;
66
- }
67
-
68
- receive(value) {
69
- this.source.give(value);
70
- return this;
71
- }
72
- }
73
-
74
- class NumberOf {
75
- constructor(source) {
76
- this.source = source;
77
- }
78
-
79
- number(guest) {
80
- this.source.value(guest);
81
- return this;
82
- }
83
-
84
- receive(value) {
85
- this.source.give(value);
86
- }
87
- }
88
-
89
- class Mul {
90
- constructor(num1, num2) {
91
- this.num1 = num1;
92
- this.num2 = num2;
93
- }
94
-
95
- result(guest) {
96
- const chain = new GuestChain();
97
- this.num1.number(new GuestCast(guest, chain.receiveKey('num1')));
98
- this.num2.number(new GuestCast(guest, chain.receiveKey('num2')));
99
- chain.result(
100
- new GuestInTheMiddle(guest, ({num1, num2}) => {
101
- guest.give(num1 * num2);
102
- }),
103
- );
104
- }
105
- }
106
-
107
- const input1 = new Input(new Source(2), '.input-1');
108
- const input2 = new Input(new Source(2), '.input-2');
109
- const multiplication = new Mul(
110
- new NumberOf(input1),
111
- new NumberOf(input2),
112
- );
113
- multiplication.result(
114
- new Patron(new TextInDocument('.result')),
115
- );
116
- </script>
117
- </body>
118
- </html>
@@ -1,65 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8"/>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
- <title>Reactive Patron</title>
7
- </head>
8
- <body>
9
- <h1>Reactive example</h1>
10
- <div>
11
- <label>
12
- Поле ввода:
13
- <input class="input-1"/>
14
- </label>
15
- </div>
16
- <div>Результат ввода: <span class="result"></span></div>
17
- <script type="module">
18
- import 'https://cdn.jsdelivr.net/npm/patron-oop@1.8.0/dist/patron.min.js';
19
-
20
- const {Patron, Source} = window.GUEST_LIBRARY;
21
-
22
- class Input {
23
- constructor(source, selector) {
24
- this.source = source;
25
- const el = document.querySelector(selector);
26
- this.source.value(
27
- new Patron((value) => {
28
- el.value = value;
29
- }),
30
- );
31
- el.addEventListener('keyup', (e) => {
32
- this.give(e.target.value);
33
- });
34
- el.addEventListener('change', (e) => {
35
- this.give(e.target.value);
36
- });
37
- }
38
-
39
- receiving(guest) {
40
- this.source.value(guest);
41
- return this;
42
- }
43
-
44
- receive(value) {
45
- this.source.give(value);
46
- return this;
47
- }
48
- }
49
-
50
- class Text {
51
- constructor(selector) {
52
- this.element = document.querySelector(selector);
53
- }
54
-
55
- receive(value) {
56
- this.element.innerText = value;
57
- }
58
- }
59
-
60
- new Input(new Source(2), '.input-1').value(
61
- new Patron(new Text('.result')),
62
- );
63
- </script>
64
- </body>
65
- </html>
@@ -1,16 +0,0 @@
1
- import { expect, test } from "vitest";
2
- import { Source } from "../Source/Source";
3
- import { GuestChain } from "./GuestChain";
4
-
5
- test("GuestChain._twoValuesAfter.test", () => {
6
- const one = new Source(1);
7
- const two = new Source(2);
8
- const chain = new GuestChain<{ one: number; two: number }>();
9
-
10
- chain.result((value) => {
11
- expect(Object.values(value).join()).toBe("1,2");
12
- });
13
-
14
- one.value(chain.receiveKey("one"));
15
- two.value(chain.receiveKey("two"));
16
- });
@@ -1,16 +0,0 @@
1
- import { expect, test } from "vitest";
2
- import { Source } from "../Source/Source";
3
- import { GuestChain } from "./GuestChain";
4
-
5
- test("GuestChain._twoValuesBefore.test", () => {
6
- const one = new Source(1);
7
- const two = new Source(2);
8
- const chain = new GuestChain<{ one: number; two: number }>();
9
-
10
- one.value(chain.receiveKey("one"));
11
- two.value(chain.receiveKey("two"));
12
-
13
- chain.result((value) => {
14
- expect(Object.values(value).join()).toBe("1,2");
15
- });
16
- });
@@ -1,88 +0,0 @@
1
- import { GuestCast } from "./GuestCast";
2
- import { Source } from "../Source/Source";
3
- import { Guest, GuestObjectType, GuestType } from "./Guest";
4
- import { GuestObject } from "./GuestObject";
5
- import { GuestPool } from "./GuestPool";
6
-
7
- export interface ChainType<T = any> {
8
- result(guest: GuestObjectType<T>): this;
9
- resultArray(guest: GuestObjectType<T>): this;
10
- receiveKey<R>(key: string): GuestObjectType<R>;
11
- }
12
-
13
- /**
14
- * @url https://kosukhin.github.io/patron.site/#/guest/guest-chain
15
- */
16
- export class GuestChain<T> implements ChainType<T> {
17
- private theChain: Source<Record<string, unknown>>;
18
-
19
- private keysKnown = new Set();
20
-
21
- private keysFilled = new Set();
22
-
23
- private filledChainPool = new GuestPool(this);
24
-
25
- public constructor() {
26
- this.theChain = new Source<Record<string, unknown>>({});
27
- }
28
-
29
- public resultArray(guest: GuestType<T>) {
30
- const guestObject = new GuestObject(guest);
31
- this.filledChainPool.add(
32
- new GuestCast(guestObject, (value: Record<string, unknown>) => {
33
- guestObject.give(Object.values(value) as T);
34
- }),
35
- );
36
- if (this.isChainFilled()) {
37
- this.theChain.value(
38
- new Guest((chain: Record<string, unknown>) => {
39
- this.filledChainPool.give(Object.values(chain));
40
- }),
41
- );
42
- }
43
- return this;
44
- }
45
-
46
- public result(guest: GuestType<T>) {
47
- const guestObject = new GuestObject(guest);
48
- if (this.isChainFilled()) {
49
- this.filledChainPool.add(guestObject);
50
- this.theChain.value(
51
- new Guest((chain) => {
52
- this.filledChainPool.give(chain);
53
- }),
54
- );
55
- } else {
56
- this.filledChainPool.add(guestObject);
57
- }
58
- return this;
59
- }
60
-
61
- public receiveKey<R>(key: string): GuestObjectType<R> {
62
- this.keysKnown.add(key);
63
- return new Guest((value) => {
64
- // Обернул в очередь чтобы можно было синхронно наполнить очередь известных ключей
65
- queueMicrotask(() => {
66
- this.theChain.value(
67
- new Guest((chain: Record<string, unknown>) => {
68
- this.keysFilled.add(key);
69
- const lastChain = {
70
- ...chain,
71
- [key]: value,
72
- };
73
- this.theChain.give(lastChain);
74
- if (this.isChainFilled()) {
75
- this.filledChainPool.give(lastChain);
76
- }
77
- }),
78
- );
79
- });
80
- });
81
- }
82
-
83
- private isChainFilled() {
84
- return (
85
- this.keysFilled.size > 0 && this.keysFilled.size === this.keysKnown.size
86
- );
87
- }
88
- }