@feng3d/reactivity 1.0.7 → 1.0.9

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.
Files changed (70) hide show
  1. package/dist/index.js +87 -0
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.umd.cjs +89 -2
  4. package/dist/index.umd.cjs.map +1 -1
  5. package/lib/ReactiveObject.d.ts +101 -0
  6. package/lib/ReactiveObject.d.ts.map +1 -0
  7. package/lib/batch.d.ts.map +1 -1
  8. package/lib/effectScope.d.ts.map +1 -1
  9. package/lib/index.d.ts +1 -0
  10. package/lib/index.d.ts.map +1 -1
  11. package/package.json +28 -20
  12. package/src/ReactiveObject.ts +131 -0
  13. package/src/batch.ts +12 -0
  14. package/src/collectionHandlers.ts +4 -4
  15. package/src/effectScope.ts +2 -3
  16. package/src/index.ts +1 -0
  17. package/src/shared/general.ts +1 -1
  18. package/dist/assets/RobotoMono-Medium-DVgDz_OO.woff2 +0 -0
  19. package/dist/assets/RobotoMono-Regular-BPoF81uy.woff2 +0 -0
  20. package/dist/assets/index-a2qCSG5V.css +0 -629
  21. package/dist/assets/index.html-Dyp3udP2.js +0 -200
  22. package/dist/assets/modulepreload-polyfill-DaKOjhqt.js +0 -37
  23. package/dist/assets/package-DuJynByc.js +0 -2539
  24. package/dist/assets/src//345/244/215/346/235/202/346/203/205/345/206/265/345/217/226/345/200/274/index.html-C3hbV3IR.js +0 -59
  25. package/dist/assets/src//346/225/260/347/273/204/index.html-CHK6WEhd.js +0 -43
  26. package/dist/docs/.nojekyll +0 -1
  27. package/dist/docs/assets/hierarchy.js +0 -1
  28. package/dist/docs/assets/highlight.css +0 -92
  29. package/dist/docs/assets/icons.js +0 -18
  30. package/dist/docs/assets/icons.svg +0 -1
  31. package/dist/docs/assets/main.js +0 -60
  32. package/dist/docs/assets/navigation.js +0 -1
  33. package/dist/docs/assets/search.js +0 -1
  34. package/dist/docs/assets/style.css +0 -1640
  35. package/dist/docs/classes/EffectScope.html +0 -40
  36. package/dist/docs/functions/batchRun.html +0 -15
  37. package/dist/docs/functions/computed.html +0 -5
  38. package/dist/docs/functions/effect.html +0 -11
  39. package/dist/docs/functions/effectScope.html +0 -5
  40. package/dist/docs/functions/forceTrack.html +0 -6
  41. package/dist/docs/functions/getCurrentScope.html +0 -4
  42. package/dist/docs/functions/isProxy.html +0 -5
  43. package/dist/docs/functions/isReactive.html +0 -5
  44. package/dist/docs/functions/isRef.html +0 -5
  45. package/dist/docs/functions/noTrack.html +0 -6
  46. package/dist/docs/functions/onScopeDispose.html +0 -6
  47. package/dist/docs/functions/reactive.html +0 -19
  48. package/dist/docs/functions/ref.html +0 -13
  49. package/dist/docs/functions/toRaw.html +0 -4
  50. package/dist/docs/hierarchy.html +0 -1
  51. package/dist/docs/index.html +0 -129
  52. package/dist/docs/interfaces/Computed.html +0 -9
  53. package/dist/docs/interfaces/Effect.html +0 -8
  54. package/dist/docs/interfaces/Ref.html +0 -9
  55. package/dist/docs/modules.html +0 -1
  56. package/dist/docs/types/Reactive.html +0 -3
  57. package/dist/docs/types/UnReadonly.html +0 -3
  58. package/dist/files/RobotoMono-Medium.woff2 +0 -0
  59. package/dist/files/RobotoMono-Regular.woff2 +0 -0
  60. package/dist/files/ic_code_black_24dp.svg +0 -4
  61. package/dist/files/ic_search_black_24dp.svg +0 -4
  62. package/dist/files/main.css +0 -629
  63. package/dist/files/thumbnails.svg +0 -7
  64. package/dist/files.json +0 -7
  65. package/dist/index.html +0 -84
  66. package/dist/screenshots//345/244/215/346/235/202/346/203/205/345/206/265/345/217/226/345/200/274.jpg +0 -0
  67. package/dist/screenshots//346/225/260/347/273/204.jpg +0 -0
  68. package/dist/src//345/244/215/346/235/202/346/203/205/345/206/265/345/217/226/345/200/274/index.html +0 -70
  69. package/dist/src//346/225/260/347/273/204/index.html +0 -65
  70. package/dist/tags.json +0 -2
@@ -1,629 +0,0 @@
1
- :root {
2
- color-scheme: light dark;
3
-
4
- --background-color: #fff;
5
- --secondary-background-color: #f7f7f7;
6
-
7
- --color-blue: #049EF4;
8
- --text-color: #444;
9
- --secondary-text-color: #9e9e9e;
10
-
11
- --font-size: 16px;
12
- --line-height: 26px;
13
-
14
- --border-style: 1px solid #E8E8E8;
15
- --header-height: 48px;
16
- --panel-width: 300px;
17
- --panel-padding: 16px;
18
- --icon-size: 20px;
19
- }
20
-
21
- @media (prefers-color-scheme: dark) {
22
-
23
- :root {
24
- --background-color: #222;
25
- --secondary-background-color: #2e2e2e;
26
-
27
- --text-color: #bbb;
28
- --secondary-text-color: #666;
29
-
30
- --border-style: 1px solid #444;
31
- }
32
-
33
- #previewsToggler {
34
- filter: invert(100%);
35
- }
36
-
37
- }
38
-
39
- @font-face {
40
- font-family: 'Roboto Mono';
41
- src: local('Roboto Mono'), local('RobotoMono-Regular'), url('./RobotoMono-Regular-BPoF81uy.woff2') format('woff2');
42
- font-style: normal;
43
- font-weight: 400;
44
- }
45
-
46
- @font-face {
47
- font-family: 'Roboto Mono';
48
- src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url('./RobotoMono-Medium-DVgDz_OO.woff2') format('woff2');
49
- font-style: normal;
50
- font-weight: 500;
51
- }
52
-
53
- * {
54
- box-sizing: border-box;
55
- -webkit-font-smoothing: antialiased;
56
- -moz-osx-font-smoothing: grayscale;
57
- }
58
-
59
- html, body {
60
- height: 100%;
61
- }
62
-
63
- html {
64
- font-size: calc(var(--font-size) - 1px);
65
- line-height: calc(var(--line-height) - 1px);
66
- }
67
-
68
- body {
69
- font-family: 'Roboto Mono', monospace;
70
- margin: 0px;
71
- color: var(--text-color);
72
- background-color: var(--background-color);
73
- }
74
-
75
- a {
76
- text-decoration: none;
77
- }
78
-
79
- h1 {
80
- font-size: 18px;
81
- line-height: 24px;
82
- font-weight: 500;
83
- }
84
-
85
- h2 {
86
- padding: 0;
87
- margin: 16px 0;
88
- font-size: calc(var(--font-size) - 1px);
89
- line-height: var(--line-height);
90
- font-weight: 500;
91
- color: var(--color-blue);
92
- }
93
-
94
- h3 {
95
- margin: 0;
96
- font-weight: 500;
97
- font-size: calc(var(--font-size) - 1px);
98
- line-height: var(--line-height);
99
- color: var(--secondary-text-color);
100
- }
101
-
102
- h1 a {
103
- color: var(--color-blue);
104
- }
105
-
106
- #header {
107
- display: flex;
108
- height: var(--header-height);
109
- border-bottom: var(--border-style);
110
- align-items: center;
111
- }
112
- #header h1 {
113
- padding-left: var(--panel-padding);
114
- flex: 1;
115
- display: flex;
116
- align-items: center;
117
- color: var(--color-blue);
118
- }
119
- #header #version {
120
- border: 1px solid var(--color-blue);
121
- color: var(--color-blue);
122
- border-radius: 4px;
123
- line-height: 16px;
124
- padding: 0px 2px;
125
- margin-left: 6px;
126
- font-size: .9rem;
127
- }
128
- #panel {
129
- position: fixed;
130
- z-index: 100;
131
- left: 0px;
132
- width: var(--panel-width);
133
- height: 100%;
134
- overflow: auto;
135
- border-right: var(--border-style);
136
- display: flex;
137
- flex-direction: column;
138
- transition: 0s 0s height;
139
- }
140
-
141
- #panel #clearSearchButton {
142
- width: 48px;
143
- height: 48px;
144
- display: none;
145
- background-color: var(--text-color);
146
- background-size: var(--icon-size);
147
- -webkit-mask-image: url(../files/ic_close_black_24dp.svg);
148
- -webkit-mask-position: 50% 50%;
149
- -webkit-mask-repeat: no-repeat;
150
- mask-image: url(../files/ic_close_black_24dp.svg);
151
- mask-position: 50% 50%;
152
- mask-repeat: no-repeat;
153
- cursor: pointer;
154
- margin-right: 0px;
155
- }
156
-
157
- #panel.searchFocused #clearSearchButton {
158
- display: block;
159
- }
160
-
161
- #panel.searchFocused #language {
162
- display: none;
163
- }
164
-
165
- #panel.searchFocused #filterInput {
166
- -webkit-mask-image: none;
167
- mask-image: none;
168
- background-color: inherit;
169
- padding-left: 0;
170
- }
171
-
172
- #panel #expandButton {
173
- width: 48px;
174
- height: 48px;
175
- margin-right: 4px;
176
- margin-left: 4px;
177
- display: none;
178
- cursor: pointer;
179
- background-color: var(--text-color);
180
- background-size: var(--icon-size);
181
- -webkit-mask-image: url(../files/ic_menu_black_24dp.svg);
182
- -webkit-mask-position: 50% 50%;
183
- -webkit-mask-repeat: no-repeat;
184
- mask-image: url(../files/ic_menu_black_24dp.svg);
185
- mask-position: 50% 50%;
186
- mask-repeat: no-repeat;
187
- }
188
-
189
- #panel #sections {
190
- display: flex;
191
- justify-content: center;
192
- z-index: 1000;
193
- position: relative;
194
- height: 100%;
195
- align-items: center;
196
- font-weight: 500;
197
- }
198
-
199
- #panel #sections * {
200
- padding: 0 var(--panel-padding);
201
- height: 100%;
202
- position: relative;
203
- display: flex;
204
- justify-content: center;
205
- align-items: center;
206
- }
207
- #panel #sections .selected:after {
208
- content: "";
209
- position: absolute;
210
- left: 0;
211
- right: 0;
212
- bottom: -1px;
213
- border-bottom: 1px solid var(--text-color);
214
- }
215
- #panel #sections a {
216
- color: var(--secondary-text-color);
217
- }
218
-
219
- body.home #panel #sections {
220
- display: none;
221
- }
222
-
223
-
224
- #panel #inputWrapper {
225
- display: flex;
226
- align-items: center;
227
- height: var(--header-height);
228
- padding: 0 0 0 var(--panel-padding);
229
- position: relative;
230
- background: var(--background-color);
231
- }
232
- #panel #inputWrapper:after {
233
- position: absolute;
234
- left: 0;
235
- right: 0;
236
- bottom: 0;
237
- border-bottom: var(--border-style);
238
- content: "";
239
- }
240
-
241
- #panel #filterInput {
242
- flex: 1;
243
- width: 100%;
244
- font-size: 1rem;
245
- font-weight: 500;
246
- color: var(--text-color);
247
- outline: none;
248
- border: 0px;
249
- background-color: var(--text-color);
250
- background-size: var(--icon-size);
251
- -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20fill='%23000000'%3e%3cpath%20d='M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z'/%3e%3cpath%20d='M0%200h24v24H0z'%20fill='none'/%3e%3c/svg%3e");
252
- -webkit-mask-position: 0 50%;
253
- -webkit-mask-repeat: no-repeat;
254
- mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20fill='%23000000'%3e%3cpath%20d='M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z'/%3e%3cpath%20d='M0%200h24v24H0z'%20fill='none'/%3e%3c/svg%3e");
255
- mask-position: 0 50%;
256
- mask-repeat: no-repeat;
257
- font-family: 'Roboto Mono', monospace;
258
- }
259
-
260
- #panel #language {
261
- font-family: 'Roboto Mono', monospace;
262
- font-size: 1rem;
263
- font-weight: 500;
264
- color: var(--text-color);
265
- border: 0px;
266
- background-image: url(ic_arrow_drop_down_black_24dp.svg);
267
- background-size: var(--icon-size);
268
- background-repeat: no-repeat;
269
- background-position: right center;
270
- background-color: var(--background-color);
271
- padding: 2px 24px 4px 24px;
272
- -webkit-appearance: none;
273
- -moz-appearance: none;
274
- appearance: none;
275
- margin-right: 10px;
276
- text-align-last: right;
277
- }
278
-
279
- #panel #language:focus {
280
- outline: none;
281
- }
282
-
283
- #contentWrapper {
284
- flex: 1;
285
- overflow: hidden;
286
- display: flex;
287
- flex-direction: column;
288
- }
289
-
290
- #panel #content {
291
- flex: 1;
292
- overflow-y: auto;
293
- overflow-x: hidden;
294
- -webkit-overflow-scrolling: touch;
295
- padding: 0 var(--panel-padding) var(--panel-padding) var(--panel-padding);
296
- }
297
-
298
- #panel #content ul {
299
- list-style-type: none;
300
- padding: 0px;
301
- margin: 0px 0 20px 0;
302
- }
303
- #panel #content ul li {
304
- margin: 1px 0;
305
- }
306
-
307
- #panel #content h2:not(.hidden) {
308
- margin-top: 16px;
309
- border-top: none;
310
- padding-top: 0;
311
- }
312
-
313
- #panel #content h2:not(.hidden) ~ h2 {
314
- margin-top: 32px;
315
- border-top: var(--border-style);
316
- padding-top: 12px;
317
- }
318
-
319
- #panel #content h3 {
320
- color: var(--text-color);
321
- font-weight: 900;
322
- }
323
-
324
- #panel #content a {
325
- position: relative;
326
- color: var(--text-color);
327
- }
328
-
329
- #panel #content a:hover,
330
- #panel #content a:hover .spacer,
331
- #panel #content .selected {
332
- color: var(--color-blue);
333
- }
334
-
335
- #panel #content .selected {
336
- text-decoration: underline;
337
- }
338
-
339
- #panel #content .hidden {
340
- display: none !important;
341
- }
342
-
343
- #panel #content #previewsToggler {
344
- cursor: pointer;
345
- float: right;
346
- margin-top: 18px;
347
- margin-bottom: -18px;
348
- opacity: 0.25;
349
- }
350
-
351
- #panel #content.minimal .card {
352
- background-color: transparent;
353
- margin-bottom: 4px;
354
- }
355
-
356
- #panel #content.minimal .cover {
357
- display: none;
358
- }
359
-
360
- #panel #content.minimal .title {
361
- padding: 0;
362
- }
363
-
364
- #panel #content.minimal #previewsToggler {
365
- opacity: 1;
366
- }
367
-
368
- body.home #panel #content h2 {
369
- margin-bottom: 2px;
370
- padding-bottom: 0px;
371
- margin-top: 18px;
372
- border-top: none;
373
- padding-top: 6px;
374
- }
375
-
376
- .spacer {
377
- color: var(--secondary-text-color);
378
- margin-left: 2px;
379
- padding-right: 2px;
380
- }
381
-
382
- #viewer,
383
- iframe {
384
- position: absolute;
385
- border: 0px;
386
- left: 0;
387
- right: 0;
388
- width: 100%;
389
- height: 100%;
390
- overflow: auto;
391
- }
392
-
393
- iframe#viewer {
394
- display: none; /* Workaround: The iframe has white background in Chrome for some reason */
395
- }
396
-
397
- #viewer {
398
- padding-left: var(--panel-width);
399
- }
400
-
401
- #button {
402
- position: fixed;
403
- bottom: 16px;
404
- right: 16px;
405
-
406
- padding: 12px;
407
- border-radius: 50%;
408
- margin-bottom: 0px;
409
-
410
- background-color: #FFF;
411
- opacity: .9;
412
- z-index: 999;
413
-
414
- box-shadow: 0 0 4px rgba(0,0,0,.15);
415
- }
416
- #button:hover {
417
- cursor: pointer;
418
- opacity: 1;
419
- }
420
- #button img {
421
- display: block;
422
- width: var(--icon-size);
423
- }
424
-
425
- #button.text {
426
- border-radius: 25px;
427
- padding-right: 20px;
428
- padding-left: 20px;
429
- color: var(--color-blue);
430
- opacity: 1;
431
- font-weight: 500;
432
- }
433
-
434
-
435
- #projects {
436
- display: grid;
437
- grid-template-columns: repeat(6, 1fr);
438
- line-height: 0;
439
- }
440
- #projects a {
441
- overflow: hidden;
442
- }
443
- #projects a img {
444
- width: 100%;
445
- transform: scale(1.0);
446
- transition: 0.15s transform;
447
- }
448
- #projects a:hover img {
449
- transform: scale(1.08);
450
- }
451
-
452
-
453
-
454
- @media all and ( min-width: 1500px ) {
455
- #projects {
456
- grid-template-columns: repeat(7, 1fr);
457
- }
458
- }
459
-
460
- @media all and ( min-width: 1700px ) {
461
- :root {
462
- --panel-width: 360px;
463
- --font-size: 18px;
464
- --line-height: 28px;
465
- --header-height: 56px;
466
- --icon-size: 24px;
467
- }
468
- #projects {
469
- grid-template-columns: repeat(8, 1fr);
470
- }
471
- }
472
-
473
- @media all and ( min-width: 1900px ) {
474
-
475
- #projects {
476
- grid-template-columns: repeat(9, 1fr);
477
- }
478
-
479
- }
480
-
481
- @media all and ( max-width: 1300px ) {
482
- #projects {
483
- grid-template-columns: repeat(6, 1fr);
484
- }
485
- }
486
-
487
- @media all and ( max-width: 1100px ) {
488
- #projects {
489
- grid-template-columns: repeat(5, 1fr);
490
- }
491
- }
492
-
493
- @media all and ( max-width: 900px ) {
494
- #projects {
495
- grid-template-columns: repeat(4, 1fr);
496
- }
497
- }
498
-
499
- @media all and ( max-width: 700px ) {
500
- #projects {
501
- grid-template-columns: repeat(3, 1fr);
502
- }
503
- }
504
-
505
-
506
- .card {
507
- border-radius: 3px;
508
- overflow: hidden;
509
- background-color: var(--secondary-background-color);
510
- padding-bottom: 6px;
511
- margin-bottom: 16px;
512
- }
513
-
514
- .card.selected {
515
- box-shadow: 0 0 0 3px var(--color-blue);
516
- text-decoration: none !important;
517
- }
518
-
519
- .card .cover {
520
- padding-bottom: 56.25%; /* 16:9 aspect ratio */
521
- position: relative;
522
- overflow: hidden;
523
- }
524
-
525
- .card .cover img {
526
- position: absolute;
527
- width: 100%;
528
- top: 50%;
529
- left: 50%;
530
- transform: translate(-50%, -50%);
531
- }
532
-
533
- .card .title {
534
- padding: 8px 12px 4px;
535
- font-size: calc(var(--font-size) - 1px);
536
- font-weight: 500;
537
- line-height: calc(var(--line-height) - 6px);
538
- }
539
-
540
- .card .tag {
541
- background-color: var(--background-color);
542
- color: var(--color-blue);
543
- margin-left: 6px;
544
- padding: 1px 6px 2px;
545
- border-radius: 2px;
546
- font-size: calc(var(--font-size) - 2px);
547
- line-height: calc(var(--line-height) - 6px);
548
- }
549
-
550
- /* mobile */
551
-
552
- @media all and ( max-width: 640px ) {
553
-
554
- :root {
555
- --header-height: 56px;
556
- --icon-size: 24px;
557
- }
558
-
559
- #projects {
560
- grid-template-columns: repeat(2, 1fr);
561
- }
562
-
563
- #panel #expandButton {
564
- display: block;
565
- }
566
- #panel {
567
- position: absolute;
568
- left: 0;
569
- top: 0;
570
- width: 100%;
571
- right: 0;
572
- z-index: 1000;
573
- overflow-x: hidden;
574
- transition: 0s 0s height;
575
- border: none;
576
- height: var(--header-height);
577
- transition: 0s 0.2s height;
578
- }
579
- #panel.open {
580
- height: 100%;
581
- transition: 0s 0s height;
582
- }
583
-
584
- #panelScrim {
585
- pointer-events: none;
586
- background-color: rgba(0,0,0,0);
587
- position: absolute;
588
- left: 0;
589
- right: 0;
590
- top: 0;
591
- bottom: 0;
592
- z-index: 1000;
593
- pointer-events: none;
594
- transition: .2s background-color;
595
- }
596
- #panel.open #panelScrim {
597
- pointer-events: auto;
598
- background-color: rgba(0,0,0,0.4);
599
- }
600
-
601
- #contentWrapper {
602
- position: absolute;
603
- right: 0;
604
- top: 0;
605
- bottom: 0;
606
- background: var(--background-color);
607
- box-shadow: 0 0 8px rgba(0,0,0,.1);
608
- width: calc(100vw - 60px);
609
- max-width: 360px;
610
- z-index: 10000;
611
- transition: .25s transform;
612
- overflow-x: hidden;
613
- margin-right: -380px;
614
- line-height: 2rem;
615
- }
616
- #panel.open #contentWrapper {
617
- transform: translate3d(-380px, 0 ,0);
618
- }
619
- #viewer,
620
- iframe {
621
- left: 0;
622
- top: var(--header-height);
623
- width: 100%;
624
- height: calc(100% - var(--header-height));
625
- }
626
- #viewer {
627
- padding-left: 0;
628
- }
629
- }