@razaman2/reactive-view 0.0.6 → 0.0.8

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 (5) hide show
  1. package/dist/index.d.mts +16 -71
  2. package/dist/index.d.ts +16 -71
  3. package/dist/index.js +65 -180
  4. package/dist/index.mjs +64 -173
  5. package/package.json +46 -46
package/dist/index.d.mts CHANGED
@@ -1,4 +1,3 @@
1
- import * as vue from 'vue';
2
1
  import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
3
2
 
4
3
  type SubscriptionItem = {
@@ -29,19 +28,20 @@ declare const setup: {
29
28
  default: (param1?: {}, param2?: {}) => {};
30
29
  };
31
30
  };
32
- declare const _default$1: {
31
+ declare const _default: {
33
32
  props: {
34
33
  notifications: ObjectConstructor;
35
34
  subscriptions: ObjectConstructor;
36
35
  defaultData: {};
37
36
  model: {};
38
37
  state: {};
38
+ await: {};
39
39
  getDefaultData: {
40
40
  type: FunctionConstructor;
41
41
  default: (data?: {}) => {};
42
42
  };
43
43
  logging: {
44
- validator: (logging: unknown) => boolean;
44
+ validator: (logging: any) => boolean;
45
45
  };
46
46
  modelName: {
47
47
  type: StringConstructor;
@@ -59,52 +59,19 @@ declare const _default$1: {
59
59
  setup(props: Record<string, any>, context: SetupContext): ($vue: ComponentPublicInstance & any) => any;
60
60
  };
61
61
 
62
- declare const _default: {
63
- props: {
64
- resolve: {
65
- required: boolean;
66
- };
67
- delay: {
68
- type: NumberConstructor;
69
- default: number;
70
- };
71
- timeout: {
72
- type: NumberConstructor;
73
- default: number;
74
- };
75
- loading: {
76
- default: vue.VNode<vue.RendererNode, vue.RendererElement, {
77
- [key: string]: any;
78
- }>;
79
- };
80
- options: {
81
- type: ObjectConstructor;
82
- };
83
- error: {
84
- required: boolean;
85
- };
86
- setup: {
87
- type: FunctionConstructor;
88
- default: (param1?: {}, param2?: {}) => {};
89
- };
62
+ type Accessible = {
63
+ parent: {
64
+ self: Record<string | symbol, any>;
90
65
  };
91
- setup(): ($vue: any) => vue.VNode<vue.RendererNode, vue.RendererElement, {
92
- [key: string]: any;
93
- }>;
66
+ self: Record<string | symbol, any>;
67
+ access?: () => Accessible;
68
+ value?: Accessible;
94
69
  };
95
-
96
- /**
97
- * uppercase the first character of each word in the input string.
98
- * @description
99
- * (test -> Test), (TEST -> Test), (test test -> Test Test)
100
- */
101
- declare function ucf(string: string): string;
102
- /**
103
- * uppercase the first character of each word that follows a specified token
104
- * @description
105
- * (test-test -> test-Test), (TEST-TEST -> TEST-Test), (test/test -> test/Test)
106
- */
107
- declare function ucfat(string: string, tokens: Array<string>): string;
70
+ type PropOptions = {
71
+ exclude: string | Array<string>;
72
+ include: Record<string, any>;
73
+ };
74
+ type PropExclusions = Array<string> | string;
108
75
  declare function safeRequest(request: {
109
76
  try: () => Promise<any> | any;
110
77
  catch?: ((error: any) => Promise<any> | any) | false;
@@ -117,12 +84,6 @@ declare function safeRequest(request: {
117
84
  message?: string;
118
85
  alternative?: boolean;
119
86
  }): Promise<any>;
120
- declare function getRoot(vue: ComponentPublicInstance): any;
121
- type PropOptions = {
122
- exclude: string | Array<string>;
123
- include: Record<string, any>;
124
- };
125
- type PropExclusions = Array<string> | string;
126
87
  declare function getProps(props: Record<string, any>, exclude: PropExclusions): Record<string, any>;
127
88
  declare function getProps(props: Record<string, any>, options: PropOptions): Record<string, any>;
128
89
  declare function getDate(timestamp: {
@@ -134,8 +95,7 @@ declare function getDate(timestamp: {
134
95
  format?: string;
135
96
  timezone?: string;
136
97
  }): string;
137
- declare function getRef(component: ComponentPublicInstance, ref: UnwrapRef<any>): ComponentPublicInstance;
138
- declare function expose(vue: any, props: Record<string, any>): Record<string, any>;
98
+ declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>): Record<string | symbol, any>;
139
99
  declare function getSubscription(): {
140
100
  addSubscription(name: string, handler?: () => boolean, data?: any): void;
141
101
  replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
@@ -145,20 +105,5 @@ declare function getSubscription(): {
145
105
  subscriptions: any[];
146
106
  subscription: Subscription;
147
107
  };
148
- type Accessible = {
149
- parent: {
150
- self: Record<string | symbol, any>;
151
- };
152
- self: Record<string | symbol, any>;
153
- access?: Function;
154
- value?: {
155
- parent: {
156
- self: Record<string | symbol, any>;
157
- };
158
- self: Record<string | symbol, any>;
159
- access?: Function;
160
- };
161
- };
162
- declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T): any;
163
108
 
164
- export { _default as AsyncComponent, access, _default$1 as default, expose, getDate, getProps, getRef, getRoot, getSubscription, safeRequest, setup, ucf, ucfat };
109
+ export { access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import * as vue from 'vue';
2
1
  import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
3
2
 
4
3
  type SubscriptionItem = {
@@ -29,19 +28,20 @@ declare const setup: {
29
28
  default: (param1?: {}, param2?: {}) => {};
30
29
  };
31
30
  };
32
- declare const _default$1: {
31
+ declare const _default: {
33
32
  props: {
34
33
  notifications: ObjectConstructor;
35
34
  subscriptions: ObjectConstructor;
36
35
  defaultData: {};
37
36
  model: {};
38
37
  state: {};
38
+ await: {};
39
39
  getDefaultData: {
40
40
  type: FunctionConstructor;
41
41
  default: (data?: {}) => {};
42
42
  };
43
43
  logging: {
44
- validator: (logging: unknown) => boolean;
44
+ validator: (logging: any) => boolean;
45
45
  };
46
46
  modelName: {
47
47
  type: StringConstructor;
@@ -59,52 +59,19 @@ declare const _default$1: {
59
59
  setup(props: Record<string, any>, context: SetupContext): ($vue: ComponentPublicInstance & any) => any;
60
60
  };
61
61
 
62
- declare const _default: {
63
- props: {
64
- resolve: {
65
- required: boolean;
66
- };
67
- delay: {
68
- type: NumberConstructor;
69
- default: number;
70
- };
71
- timeout: {
72
- type: NumberConstructor;
73
- default: number;
74
- };
75
- loading: {
76
- default: vue.VNode<vue.RendererNode, vue.RendererElement, {
77
- [key: string]: any;
78
- }>;
79
- };
80
- options: {
81
- type: ObjectConstructor;
82
- };
83
- error: {
84
- required: boolean;
85
- };
86
- setup: {
87
- type: FunctionConstructor;
88
- default: (param1?: {}, param2?: {}) => {};
89
- };
62
+ type Accessible = {
63
+ parent: {
64
+ self: Record<string | symbol, any>;
90
65
  };
91
- setup(): ($vue: any) => vue.VNode<vue.RendererNode, vue.RendererElement, {
92
- [key: string]: any;
93
- }>;
66
+ self: Record<string | symbol, any>;
67
+ access?: () => Accessible;
68
+ value?: Accessible;
94
69
  };
95
-
96
- /**
97
- * uppercase the first character of each word in the input string.
98
- * @description
99
- * (test -> Test), (TEST -> Test), (test test -> Test Test)
100
- */
101
- declare function ucf(string: string): string;
102
- /**
103
- * uppercase the first character of each word that follows a specified token
104
- * @description
105
- * (test-test -> test-Test), (TEST-TEST -> TEST-Test), (test/test -> test/Test)
106
- */
107
- declare function ucfat(string: string, tokens: Array<string>): string;
70
+ type PropOptions = {
71
+ exclude: string | Array<string>;
72
+ include: Record<string, any>;
73
+ };
74
+ type PropExclusions = Array<string> | string;
108
75
  declare function safeRequest(request: {
109
76
  try: () => Promise<any> | any;
110
77
  catch?: ((error: any) => Promise<any> | any) | false;
@@ -117,12 +84,6 @@ declare function safeRequest(request: {
117
84
  message?: string;
118
85
  alternative?: boolean;
119
86
  }): Promise<any>;
120
- declare function getRoot(vue: ComponentPublicInstance): any;
121
- type PropOptions = {
122
- exclude: string | Array<string>;
123
- include: Record<string, any>;
124
- };
125
- type PropExclusions = Array<string> | string;
126
87
  declare function getProps(props: Record<string, any>, exclude: PropExclusions): Record<string, any>;
127
88
  declare function getProps(props: Record<string, any>, options: PropOptions): Record<string, any>;
128
89
  declare function getDate(timestamp: {
@@ -134,8 +95,7 @@ declare function getDate(timestamp: {
134
95
  format?: string;
135
96
  timezone?: string;
136
97
  }): string;
137
- declare function getRef(component: ComponentPublicInstance, ref: UnwrapRef<any>): ComponentPublicInstance;
138
- declare function expose(vue: any, props: Record<string, any>): Record<string, any>;
98
+ declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T | UnwrapRef<any>): Record<string | symbol, any>;
139
99
  declare function getSubscription(): {
140
100
  addSubscription(name: string, handler?: () => boolean, data?: any): void;
141
101
  replaceSubscription(name: string, handler?: () => boolean, data?: any): void;
@@ -145,20 +105,5 @@ declare function getSubscription(): {
145
105
  subscriptions: any[];
146
106
  subscription: Subscription;
147
107
  };
148
- type Accessible = {
149
- parent: {
150
- self: Record<string | symbol, any>;
151
- };
152
- self: Record<string | symbol, any>;
153
- access?: Function;
154
- value?: {
155
- parent: {
156
- self: Record<string | symbol, any>;
157
- };
158
- self: Record<string | symbol, any>;
159
- access?: Function;
160
- };
161
- };
162
- declare function access<T extends ComponentPublicInstance & Accessible>($vue?: T): any;
163
108
 
164
- export { _default as AsyncComponent, access, _default$1 as default, expose, getDate, getProps, getRef, getRoot, getSubscription, safeRequest, setup, ucf, ucfat };
109
+ export { access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };
package/dist/index.js CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
  var __create = Object.create;
3
3
  var __defProp = Object.defineProperty;
4
- var __defProps = Object.defineProperties;
5
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
8
6
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
7
  var __getProtoOf = Object.getPrototypeOf;
@@ -21,7 +19,6 @@ var __spreadValues = (a, b) => {
21
19
  }
22
20
  return a;
23
21
  };
24
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
22
  var __objRest = (source, exclude) => {
26
23
  var target = {};
27
24
  for (var prop in source)
@@ -55,43 +52,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
55
52
  mod
56
53
  ));
57
54
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
- var __async = (__this, __arguments, generator) => {
59
- return new Promise((resolve, reject) => {
60
- var fulfilled = (value) => {
61
- try {
62
- step(generator.next(value));
63
- } catch (e) {
64
- reject(e);
65
- }
66
- };
67
- var rejected = (value) => {
68
- try {
69
- step(generator.throw(value));
70
- } catch (e) {
71
- reject(e);
72
- }
73
- };
74
- var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
75
- step((generator = generator.apply(__this, __arguments)).next());
76
- });
77
- };
78
55
 
79
56
  // src/index.ts
80
57
  var src_exports = {};
81
58
  __export(src_exports, {
82
- AsyncComponent: () => AsyncComponent_default,
83
59
  access: () => access,
84
60
  default: () => src_default,
85
- expose: () => expose,
86
61
  getDate: () => getDate,
87
62
  getProps: () => getProps,
88
- getRef: () => getRef,
89
- getRoot: () => getRoot,
90
63
  getSubscription: () => getSubscription,
91
64
  safeRequest: () => safeRequest,
92
- setup: () => setup,
93
- ucf: () => ucf,
94
- ucfat: () => ucfat
65
+ setup: () => setup
95
66
  });
96
67
  module.exports = __toCommonJS(src_exports);
97
68
  var import_date_fns_tz = require("date-fns-tz");
@@ -187,26 +158,27 @@ var Subscriptions = _Subscriptions;
187
158
  // src/ReactiveView.ts
188
159
  var import_object_manager = __toESM(require("@razaman2/object-manager"));
189
160
  var import_data_manager = __toESM(require("@razaman2/data-manager"));
190
- var import_vue = require("vue");
191
161
 
192
162
  // package.json
193
163
  var name = "@razaman2/reactive-view";
194
- var version = "0.0.6";
164
+ var version = "0.0.8";
195
165
 
196
166
  // src/ReactiveView.ts
167
+ var import_vue = require("vue");
197
168
  var props = {
198
169
  notifications: Object,
199
170
  subscriptions: Object,
200
171
  defaultData: {},
201
172
  model: {},
202
173
  state: {},
174
+ await: {},
203
175
  getDefaultData: {
204
176
  type: Function,
205
177
  default: (data = {}) => data
206
178
  },
207
179
  logging: {
208
180
  validator: (logging) => {
209
- return typeof logging === "boolean";
181
+ return logging.constructor.name === "Boolean";
210
182
  }
211
183
  },
212
184
  modelName: {
@@ -229,7 +201,7 @@ var setup = {
229
201
  var ReactiveView_default = {
230
202
  props: __spreadValues(__spreadValues({}, setup), props),
231
203
  setup(props2, context) {
232
- var _a, _b, _c, _d, _f;
204
+ var _a, _b, _c, _d, _e, _g;
233
205
  const template = (vue, options2) => {
234
206
  var _a2, _b2, _c2;
235
207
  const vnode = context.slots.default ? (0, import_vue.h)(
@@ -242,34 +214,39 @@ var ReactiveView_default = {
242
214
  textAlign: "center"
243
215
  }
244
216
  }, context.attrs), `${props2.modelName}: ${name}@${version}`);
245
- return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, vnode })) != null ? _c2 : vnode;
217
+ return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { $vue: vue, vnode })) != null ? _c2 : vnode;
246
218
  };
247
219
  const isValid = (0, import_vue.ref)(false);
248
220
  const defaultData = props2.getDefaultData(
249
221
  Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
250
222
  );
251
223
  const defaultType = Array.isArray(defaultData) ? [] : {};
252
- const stateRef = (0, import_vue.ref)(import_data_manager.default.transform((_c = props2.state) != null ? _c : defaultType));
224
+ const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? defaultType : (_c = props2.state) != null ? _c : defaultType));
253
225
  const config = {
254
226
  defaultData,
255
- data: stateRef.value,
227
+ data: state,
256
228
  name: props2.modelName,
257
229
  logging: props2.logging,
258
- notifications: props2.notifications
230
+ notifications: props2.notifications,
231
+ subscriptions: props2.subscriptions
259
232
  };
260
233
  const getState = props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new import_data_manager.default(config);
234
+ const sync = (0, import_vue.ref)(false);
261
235
  const options = {
262
- parent: { self: props2 },
263
- self: { template, isValid, getState, stateRef }
236
+ parent: { self: (_d = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _d.proxy },
237
+ self: { template, isValid, getState }
264
238
  };
265
- const setup2 = (_d = props2.setup(options)) != null ? _d : options;
266
- const _e = setup2, { parent = {}, self = {} } = _e, rest = __objRest(_e, ["parent", "self"]);
267
- const sync = (0, import_vue.ref)(false);
239
+ const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
240
+ if (props2.await instanceof Promise) {
241
+ (0, import_vue.nextTick)(async () => {
242
+ getState.replaceData(await props2.await);
243
+ });
244
+ }
268
245
  if (context.attrs["onUpdate:modelState"]) {
269
246
  const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
270
- const subscription = (0, import_vue.watch)(() => import_object_manager.default.on(stateRef.value).clone(), (after, before) => {
247
+ (0, import_vue.watch)(() => import_object_manager.default.on(state).clone(), (after, before) => {
271
248
  var _a2;
272
- const transform = (_a2 = config2.transform) != null ? _a2 : access(setup2).$transform;
249
+ const transform = (_a2 = config2.transform) != null ? _a2 : access({ parent, self }).$transform;
273
250
  const diff = {
274
251
  before: (before == null ? void 0 : before.hasOwnProperty("")) ? before[""] : before,
275
252
  after: (after == null ? void 0 : after.hasOwnProperty("")) ? after[""] : after
@@ -282,8 +259,8 @@ var ReactiveView_default = {
282
259
  }, config2.options);
283
260
  }
284
261
  if (context.attrs["onUpdate:propsState"] || props2.sync) {
285
- const config2 = (_f = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _f : {};
286
- const subscription = (0, import_vue.watch)(() => props2.state, (after, before) => {
262
+ const config2 = (_g = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _g : {};
263
+ (0, import_vue.watch)(() => props2.state, (after, before) => {
287
264
  if (props2.sync && typeof config2.callback !== "function") {
288
265
  getState.replaceData(after);
289
266
  } else if (typeof config2.callback === "function") {
@@ -293,103 +270,26 @@ var ReactiveView_default = {
293
270
  }, config2.options);
294
271
  }
295
272
  return ($vue) => {
296
- const setup3 = { $vue, options: parent };
297
- while (setup3.options) {
298
- Object.defineProperties(setup3.$vue, Object.assign({
273
+ const setup2 = { $vue, options: parent };
274
+ while (setup2.options) {
275
+ Object.defineProperties(setup2.$vue, Object.assign({
299
276
  access: {
300
277
  configurable: true,
301
- value: () => {
302
- return access({ parent, self });
303
- }
278
+ value: () => access({ parent, self })
304
279
  }
305
280
  }, rest));
306
- setup3.options = setup3.options.parent;
307
- setup3.$vue = setup3.$vue.$parent;
281
+ setup2.options = setup2.options.parent;
282
+ setup2.$vue = setup2.$vue.$parent;
308
283
  }
309
284
  return access($vue).template($vue, { parent, self });
310
285
  };
311
286
  }
312
287
  };
313
288
 
314
- // src/AsyncComponent.ts
315
- var import_vue2 = require("vue");
316
- var AsyncComponent_default = {
317
- props: __spreadProps(__spreadValues({}, setup), {
318
- resolve: {
319
- required: true
320
- },
321
- delay: {
322
- type: Number,
323
- default: 200
324
- },
325
- timeout: {
326
- type: Number,
327
- default: 2e3
328
- },
329
- loading: {
330
- default: (0, import_vue2.h)("div")
331
- },
332
- options: {
333
- type: Object
334
- },
335
- error: {
336
- required: false
337
- }
338
- }),
339
- setup() {
340
- return ($vue) => {
341
- return (0, import_vue2.h)(
342
- src_default,
343
- {
344
- setup: (parent) => {
345
- const componentRef = (0, import_vue2.ref)($vue.loading);
346
- const template = () => {
347
- var _a, _b, _c;
348
- const vnode = componentRef.value;
349
- return (_c = (_b = (_a = $vue.$slots).template) == null ? void 0 : _b.call(_a, { $vue, vnode })) != null ? _c : vnode;
350
- };
351
- const self = { template };
352
- (0, import_vue2.onMounted)(() => __async(this, null, function* () {
353
- try {
354
- if ($vue.resolve) {
355
- const target = yield $vue.resolve;
356
- target.hasOwnProperty("property") ? (0, import_vue2.watch)((0, import_vue2.isRef)(target.property) || (0, import_vue2.isReactive)(target.property) ? target.property : () => __async(this, null, function* () {
357
- return (yield $vue.resolve).property;
358
- }), (after, before) => {
359
- setTimeout(() => __async(this, null, function* () {
360
- return componentRef.value = yield target.onChange({ before: yield before, after: yield after });
361
- }), $vue.delay);
362
- }, $vue.options) : setTimeout(() => __async(this, null, function* () {
363
- return componentRef.value = target;
364
- }), $vue.delay);
365
- }
366
- } catch (error) {
367
- if ($vue.error) {
368
- componentRef.value = (0, import_vue2.h)(yield $vue.error, { error });
369
- }
370
- }
371
- }));
372
- return { parent, self };
373
- }
374
- }
375
- );
376
- };
377
- }
378
- };
379
-
380
289
  // src/index.ts
381
290
  var src_default = ReactiveView_default;
382
- function ucf(string) {
383
- return string.split(/\s+/).map((string2) => {
384
- return string2.toLowerCase().replace(/^(\w)/, ($1) => $1.toUpperCase());
385
- }).join(" ");
386
- }
387
- function ucfat(string, tokens) {
388
- const pattern = RegExp(`(?<=(?:${tokens.join("|")}))(\\w)(\\w*)`, "g");
389
- return string.replace(pattern, ($1, $2, $3) => `${$2.toUpperCase()}${$3.toLowerCase()}`);
390
- }
391
291
  function safeRequest(request) {
392
- return new Promise((resolve) => __async(this, null, function* () {
292
+ return new Promise(async (resolve) => {
393
293
  var _a, _b, _c, _d;
394
294
  const { message } = (_a = request.loading) != null ? _a : {};
395
295
  if (request.loading) {
@@ -399,26 +299,22 @@ function safeRequest(request) {
399
299
  }
400
300
  }
401
301
  try {
402
- resolve(yield request.try());
302
+ resolve(await request.try());
403
303
  } catch (e) {
404
304
  if ((_b = request.alternative) != null ? _b : true) {
405
- resolve(request.catch ? yield request.catch(e) : console.log(e));
305
+ resolve(request.catch ? await request.catch(e) : console.log(e));
406
306
  }
407
307
  } finally {
408
- yield (_c = request.finally) == null ? void 0 : _c.call(request);
308
+ await ((_c = request.finally) == null ? void 0 : _c.call(request));
409
309
  if (request.loading) {
410
310
  request.loading.status = false;
411
311
  }
412
312
  if (request.loading && message) {
413
313
  request.loading.message = message;
414
314
  }
415
- yield (_d = request.complete) == null ? void 0 : _d.call(request);
315
+ await ((_d = request.complete) == null ? void 0 : _d.call(request));
416
316
  }
417
- }));
418
- }
419
- function getRoot(vue) {
420
- var _a, _b, _c;
421
- return (_c = (_a = typeof vue.$attrs.root === "function" ? vue.$attrs.root() : vue.$attrs.root) != null ? _a : vue.$root) != null ? _c : (_b = vue.$parent) == null ? void 0 : _b.$root;
317
+ });
422
318
  }
423
319
  function getProps(props2, param2) {
424
320
  var _a;
@@ -449,20 +345,34 @@ function getDate(param1, param2) {
449
345
  };
450
346
  return (0, import_date_fns_tz.formatInTimeZone)(datetime(), options.timezone, options.format);
451
347
  }
452
- function getRef(component, ref3) {
453
- safeRequest({
454
- try: () => __async(this, null, function* () {
455
- return component.$props.ref.value = component;
456
- }),
457
- alternative: false
458
- });
459
- return ref3.value = component;
460
- }
461
- function expose(vue, props2) {
462
- Object.entries(Object.getOwnPropertyDescriptors(props2)).forEach(([key, val]) => {
463
- Object.defineProperty(vue, key, val);
464
- });
465
- return props2;
348
+ function access($vue = {}) {
349
+ var _a, _b;
350
+ const proxy = (target) => {
351
+ return new Proxy(target, {
352
+ get(target2, key) {
353
+ var _a2, _b2;
354
+ const component = { $vue: target2 };
355
+ do {
356
+ if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
357
+ return component.$vue[key];
358
+ } else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
359
+ return component.$vue.self[key];
360
+ } else {
361
+ component.$vue = component.$vue.parent;
362
+ }
363
+ } while (component.$vue);
364
+ }
365
+ });
366
+ };
367
+ try {
368
+ return proxy($vue.access());
369
+ } catch (e) {
370
+ try {
371
+ return proxy($vue.value.access());
372
+ } catch (e2) {
373
+ return proxy((_b = (_a = $vue.value) != null ? _a : $vue) != null ? _b : {});
374
+ }
375
+ }
466
376
  }
467
377
  function getSubscription() {
468
378
  const subscriptions = [];
@@ -491,37 +401,12 @@ function getSubscription() {
491
401
  subscription
492
402
  };
493
403
  }
494
- function access($vue = {}) {
495
- var _a, _b;
496
- const target = typeof $vue.access === "function" ? $vue.access() : (_b = (_a = $vue.value && typeof $vue.value.access === "function" ? $vue.value.access() : $vue.value) != null ? _a : $vue) != null ? _b : {};
497
- return new Proxy(target, {
498
- get(target2, key) {
499
- var _a2, _b2;
500
- const component = { $vue: target2 };
501
- do {
502
- if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
503
- return component.$vue[key];
504
- } else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
505
- return component.$vue.self[key];
506
- } else {
507
- component.$vue = component.$vue.parent;
508
- }
509
- } while (component.$vue);
510
- }
511
- });
512
- }
513
404
  // Annotate the CommonJS export names for ESM import in node:
514
405
  0 && (module.exports = {
515
- AsyncComponent,
516
406
  access,
517
- expose,
518
407
  getDate,
519
408
  getProps,
520
- getRef,
521
- getRoot,
522
409
  getSubscription,
523
410
  safeRequest,
524
- setup,
525
- ucf,
526
- ucfat
411
+ setup
527
412
  });
package/dist/index.mjs CHANGED
@@ -1,6 +1,4 @@
1
1
  var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
2
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
3
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
4
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
16
14
  }
17
15
  return a;
18
16
  };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
17
  var __objRest = (source, exclude) => {
21
18
  var target = {};
22
19
  for (var prop in source)
@@ -29,26 +26,6 @@ var __objRest = (source, exclude) => {
29
26
  }
30
27
  return target;
31
28
  };
32
- var __async = (__this, __arguments, generator) => {
33
- return new Promise((resolve, reject) => {
34
- var fulfilled = (value) => {
35
- try {
36
- step(generator.next(value));
37
- } catch (e) {
38
- reject(e);
39
- }
40
- };
41
- var rejected = (value) => {
42
- try {
43
- step(generator.throw(value));
44
- } catch (e) {
45
- reject(e);
46
- }
47
- };
48
- var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
49
- step((generator = generator.apply(__this, __arguments)).next());
50
- });
51
- };
52
29
 
53
30
  // src/index.ts
54
31
  import { formatInTimeZone } from "date-fns-tz";
@@ -144,26 +121,27 @@ var Subscriptions = _Subscriptions;
144
121
  // src/ReactiveView.ts
145
122
  import ObjectManager from "@razaman2/object-manager";
146
123
  import DataManager from "@razaman2/data-manager";
147
- import { h, ref, watch } from "vue";
148
124
 
149
125
  // package.json
150
126
  var name = "@razaman2/reactive-view";
151
- var version = "0.0.6";
127
+ var version = "0.0.8";
152
128
 
153
129
  // src/ReactiveView.ts
130
+ import { h, ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
154
131
  var props = {
155
132
  notifications: Object,
156
133
  subscriptions: Object,
157
134
  defaultData: {},
158
135
  model: {},
159
136
  state: {},
137
+ await: {},
160
138
  getDefaultData: {
161
139
  type: Function,
162
140
  default: (data = {}) => data
163
141
  },
164
142
  logging: {
165
143
  validator: (logging) => {
166
- return typeof logging === "boolean";
144
+ return logging.constructor.name === "Boolean";
167
145
  }
168
146
  },
169
147
  modelName: {
@@ -186,7 +164,7 @@ var setup = {
186
164
  var ReactiveView_default = {
187
165
  props: __spreadValues(__spreadValues({}, setup), props),
188
166
  setup(props2, context) {
189
- var _a, _b, _c, _d, _f;
167
+ var _a, _b, _c, _d, _e, _g;
190
168
  const template = (vue, options2) => {
191
169
  var _a2, _b2, _c2;
192
170
  const vnode = context.slots.default ? h(
@@ -199,34 +177,39 @@ var ReactiveView_default = {
199
177
  textAlign: "center"
200
178
  }
201
179
  }, context.attrs), `${props2.modelName}: ${name}@${version}`);
202
- return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, vnode })) != null ? _c2 : vnode;
180
+ return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { $vue: vue, vnode })) != null ? _c2 : vnode;
203
181
  };
204
182
  const isValid = ref(false);
205
183
  const defaultData = props2.getDefaultData(
206
184
  Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
207
185
  );
208
186
  const defaultType = Array.isArray(defaultData) ? [] : {};
209
- const stateRef = ref(DataManager.transform((_c = props2.state) != null ? _c : defaultType));
187
+ const state = reactive(DataManager.transform(props2.await ? defaultType : (_c = props2.state) != null ? _c : defaultType));
210
188
  const config = {
211
189
  defaultData,
212
- data: stateRef.value,
190
+ data: state,
213
191
  name: props2.modelName,
214
192
  logging: props2.logging,
215
- notifications: props2.notifications
193
+ notifications: props2.notifications,
194
+ subscriptions: props2.subscriptions
216
195
  };
217
196
  const getState = props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config);
197
+ const sync = ref(false);
218
198
  const options = {
219
- parent: { self: props2 },
220
- self: { template, isValid, getState, stateRef }
199
+ parent: { self: (_d = getCurrentInstance()) == null ? void 0 : _d.proxy },
200
+ self: { template, isValid, getState }
221
201
  };
222
- const setup2 = (_d = props2.setup(options)) != null ? _d : options;
223
- const _e = setup2, { parent = {}, self = {} } = _e, rest = __objRest(_e, ["parent", "self"]);
224
- const sync = ref(false);
202
+ const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
203
+ if (props2.await instanceof Promise) {
204
+ nextTick(async () => {
205
+ getState.replaceData(await props2.await);
206
+ });
207
+ }
225
208
  if (context.attrs["onUpdate:modelState"]) {
226
209
  const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
227
- const subscription = watch(() => ObjectManager.on(stateRef.value).clone(), (after, before) => {
210
+ watch(() => ObjectManager.on(state).clone(), (after, before) => {
228
211
  var _a2;
229
- const transform = (_a2 = config2.transform) != null ? _a2 : access(setup2).$transform;
212
+ const transform = (_a2 = config2.transform) != null ? _a2 : access({ parent, self }).$transform;
230
213
  const diff = {
231
214
  before: (before == null ? void 0 : before.hasOwnProperty("")) ? before[""] : before,
232
215
  after: (after == null ? void 0 : after.hasOwnProperty("")) ? after[""] : after
@@ -239,8 +222,8 @@ var ReactiveView_default = {
239
222
  }, config2.options);
240
223
  }
241
224
  if (context.attrs["onUpdate:propsState"] || props2.sync) {
242
- const config2 = (_f = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _f : {};
243
- const subscription = watch(() => props2.state, (after, before) => {
225
+ const config2 = (_g = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _g : {};
226
+ watch(() => props2.state, (after, before) => {
244
227
  if (props2.sync && typeof config2.callback !== "function") {
245
228
  getState.replaceData(after);
246
229
  } else if (typeof config2.callback === "function") {
@@ -250,103 +233,26 @@ var ReactiveView_default = {
250
233
  }, config2.options);
251
234
  }
252
235
  return ($vue) => {
253
- const setup3 = { $vue, options: parent };
254
- while (setup3.options) {
255
- Object.defineProperties(setup3.$vue, Object.assign({
236
+ const setup2 = { $vue, options: parent };
237
+ while (setup2.options) {
238
+ Object.defineProperties(setup2.$vue, Object.assign({
256
239
  access: {
257
240
  configurable: true,
258
- value: () => {
259
- return access({ parent, self });
260
- }
241
+ value: () => access({ parent, self })
261
242
  }
262
243
  }, rest));
263
- setup3.options = setup3.options.parent;
264
- setup3.$vue = setup3.$vue.$parent;
244
+ setup2.options = setup2.options.parent;
245
+ setup2.$vue = setup2.$vue.$parent;
265
246
  }
266
247
  return access($vue).template($vue, { parent, self });
267
248
  };
268
249
  }
269
250
  };
270
251
 
271
- // src/AsyncComponent.ts
272
- import { h as h2, ref as ref2, watch as watch2, isRef, isReactive, onMounted } from "vue";
273
- var AsyncComponent_default = {
274
- props: __spreadProps(__spreadValues({}, setup), {
275
- resolve: {
276
- required: true
277
- },
278
- delay: {
279
- type: Number,
280
- default: 200
281
- },
282
- timeout: {
283
- type: Number,
284
- default: 2e3
285
- },
286
- loading: {
287
- default: h2("div")
288
- },
289
- options: {
290
- type: Object
291
- },
292
- error: {
293
- required: false
294
- }
295
- }),
296
- setup() {
297
- return ($vue) => {
298
- return h2(
299
- src_default,
300
- {
301
- setup: (parent) => {
302
- const componentRef = ref2($vue.loading);
303
- const template = () => {
304
- var _a, _b, _c;
305
- const vnode = componentRef.value;
306
- return (_c = (_b = (_a = $vue.$slots).template) == null ? void 0 : _b.call(_a, { $vue, vnode })) != null ? _c : vnode;
307
- };
308
- const self = { template };
309
- onMounted(() => __async(this, null, function* () {
310
- try {
311
- if ($vue.resolve) {
312
- const target = yield $vue.resolve;
313
- target.hasOwnProperty("property") ? watch2(isRef(target.property) || isReactive(target.property) ? target.property : () => __async(this, null, function* () {
314
- return (yield $vue.resolve).property;
315
- }), (after, before) => {
316
- setTimeout(() => __async(this, null, function* () {
317
- return componentRef.value = yield target.onChange({ before: yield before, after: yield after });
318
- }), $vue.delay);
319
- }, $vue.options) : setTimeout(() => __async(this, null, function* () {
320
- return componentRef.value = target;
321
- }), $vue.delay);
322
- }
323
- } catch (error) {
324
- if ($vue.error) {
325
- componentRef.value = h2(yield $vue.error, { error });
326
- }
327
- }
328
- }));
329
- return { parent, self };
330
- }
331
- }
332
- );
333
- };
334
- }
335
- };
336
-
337
252
  // src/index.ts
338
253
  var src_default = ReactiveView_default;
339
- function ucf(string) {
340
- return string.split(/\s+/).map((string2) => {
341
- return string2.toLowerCase().replace(/^(\w)/, ($1) => $1.toUpperCase());
342
- }).join(" ");
343
- }
344
- function ucfat(string, tokens) {
345
- const pattern = RegExp(`(?<=(?:${tokens.join("|")}))(\\w)(\\w*)`, "g");
346
- return string.replace(pattern, ($1, $2, $3) => `${$2.toUpperCase()}${$3.toLowerCase()}`);
347
- }
348
254
  function safeRequest(request) {
349
- return new Promise((resolve) => __async(this, null, function* () {
255
+ return new Promise(async (resolve) => {
350
256
  var _a, _b, _c, _d;
351
257
  const { message } = (_a = request.loading) != null ? _a : {};
352
258
  if (request.loading) {
@@ -356,26 +262,22 @@ function safeRequest(request) {
356
262
  }
357
263
  }
358
264
  try {
359
- resolve(yield request.try());
265
+ resolve(await request.try());
360
266
  } catch (e) {
361
267
  if ((_b = request.alternative) != null ? _b : true) {
362
- resolve(request.catch ? yield request.catch(e) : console.log(e));
268
+ resolve(request.catch ? await request.catch(e) : console.log(e));
363
269
  }
364
270
  } finally {
365
- yield (_c = request.finally) == null ? void 0 : _c.call(request);
271
+ await ((_c = request.finally) == null ? void 0 : _c.call(request));
366
272
  if (request.loading) {
367
273
  request.loading.status = false;
368
274
  }
369
275
  if (request.loading && message) {
370
276
  request.loading.message = message;
371
277
  }
372
- yield (_d = request.complete) == null ? void 0 : _d.call(request);
278
+ await ((_d = request.complete) == null ? void 0 : _d.call(request));
373
279
  }
374
- }));
375
- }
376
- function getRoot(vue) {
377
- var _a, _b, _c;
378
- return (_c = (_a = typeof vue.$attrs.root === "function" ? vue.$attrs.root() : vue.$attrs.root) != null ? _a : vue.$root) != null ? _c : (_b = vue.$parent) == null ? void 0 : _b.$root;
280
+ });
379
281
  }
380
282
  function getProps(props2, param2) {
381
283
  var _a;
@@ -406,20 +308,34 @@ function getDate(param1, param2) {
406
308
  };
407
309
  return formatInTimeZone(datetime(), options.timezone, options.format);
408
310
  }
409
- function getRef(component, ref3) {
410
- safeRequest({
411
- try: () => __async(this, null, function* () {
412
- return component.$props.ref.value = component;
413
- }),
414
- alternative: false
415
- });
416
- return ref3.value = component;
417
- }
418
- function expose(vue, props2) {
419
- Object.entries(Object.getOwnPropertyDescriptors(props2)).forEach(([key, val]) => {
420
- Object.defineProperty(vue, key, val);
421
- });
422
- return props2;
311
+ function access($vue = {}) {
312
+ var _a, _b;
313
+ const proxy = (target) => {
314
+ return new Proxy(target, {
315
+ get(target2, key) {
316
+ var _a2, _b2;
317
+ const component = { $vue: target2 };
318
+ do {
319
+ if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
320
+ return component.$vue[key];
321
+ } else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
322
+ return component.$vue.self[key];
323
+ } else {
324
+ component.$vue = component.$vue.parent;
325
+ }
326
+ } while (component.$vue);
327
+ }
328
+ });
329
+ };
330
+ try {
331
+ return proxy($vue.access());
332
+ } catch (e) {
333
+ try {
334
+ return proxy($vue.value.access());
335
+ } catch (e2) {
336
+ return proxy((_b = (_a = $vue.value) != null ? _a : $vue) != null ? _b : {});
337
+ }
338
+ }
423
339
  }
424
340
  function getSubscription() {
425
341
  const subscriptions = [];
@@ -448,37 +364,12 @@ function getSubscription() {
448
364
  subscription
449
365
  };
450
366
  }
451
- function access($vue = {}) {
452
- var _a, _b;
453
- const target = typeof $vue.access === "function" ? $vue.access() : (_b = (_a = $vue.value && typeof $vue.value.access === "function" ? $vue.value.access() : $vue.value) != null ? _a : $vue) != null ? _b : {};
454
- return new Proxy(target, {
455
- get(target2, key) {
456
- var _a2, _b2;
457
- const component = { $vue: target2 };
458
- do {
459
- if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
460
- return component.$vue[key];
461
- } else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
462
- return component.$vue.self[key];
463
- } else {
464
- component.$vue = component.$vue.parent;
465
- }
466
- } while (component.$vue);
467
- }
468
- });
469
- }
470
367
  export {
471
- AsyncComponent_default as AsyncComponent,
472
368
  access,
473
369
  src_default as default,
474
- expose,
475
370
  getDate,
476
371
  getProps,
477
- getRef,
478
- getRoot,
479
372
  getSubscription,
480
373
  safeRequest,
481
- setup,
482
- ucf,
483
- ucfat
374
+ setup
484
375
  };
package/package.json CHANGED
@@ -1,46 +1,46 @@
1
- {
2
- "name": "@razaman2/reactive-view",
3
- "version": "0.0.6",
4
- "description": "This library enables you to build vue apps in an object oriented way. It provides a convenient approach to extend and override ui components. It provides a built in eventing system along with component data management.",
5
- "main": "dist/index.js",
6
- "module": "dist/index.mjs",
7
- "types": "dist/index.d.ts",
8
- "scripts": {
9
- "prepublishOnly": "npm run build",
10
- "build": "tsup src/index.ts --format cjs,esm --dts",
11
- "lint": "tsc"
12
- },
13
- "keywords": [
14
- "vue",
15
- "vue-helper",
16
- "reactive-view",
17
- "vue-class-component"
18
- ],
19
- "author": "razaman2",
20
- "license": "MIT",
21
- "dependencies": {
22
- "@razaman2/data-manager": "^3.2.5",
23
- "@razaman2/collection-proxy": "^0.0.1",
24
- "@razaman2/object-manager": "^3.3.7",
25
- "date-fns": "^2.30.0",
26
- "date-fns-tz": "^2.0.0",
27
- "uuid": "^9.0.1",
28
- "vue": "^3.3.13"
29
- },
30
- "devDependencies": {
31
- "@types/uuid": "^9.0.7",
32
- "tsup": "^8.0.1",
33
- "typescript": "^5.3.3",
34
- "vitest": "^1.1.0"
35
- },
36
- "publishConfig": {
37
- "access": "public"
38
- },
39
- "files": [
40
- "dist"
41
- ],
42
- "repository": {
43
- "type": "git",
44
- "url": "https://github.com/razaman2/reactive-view.git"
45
- }
46
- }
1
+ {
2
+ "name": "@razaman2/reactive-view",
3
+ "version": "0.0.8",
4
+ "description": "This library enables you to build vue apps in an object oriented way. It provides a convenient approach to extend and override ui components. It provides a built in eventing system along with component data management.",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "scripts": {
9
+ "prepublishOnly": "npm run build",
10
+ "build": "tsup src/index.ts --format cjs,esm --dts",
11
+ "lint": "tsc"
12
+ },
13
+ "keywords": [
14
+ "vue",
15
+ "vue-helper",
16
+ "reactive-view",
17
+ "vue-class-component"
18
+ ],
19
+ "author": "razaman2",
20
+ "license": "MIT",
21
+ "dependencies": {
22
+ "@razaman2/collection-proxy": "^0.0.11",
23
+ "@razaman2/data-manager": "^3.2.8",
24
+ "@razaman2/object-manager": "^3.3.9",
25
+ "date-fns": "^3.6.0",
26
+ "date-fns-tz": "^3.1.3",
27
+ "uuid": "^9.0.1",
28
+ "vue": "^3.4.27"
29
+ },
30
+ "devDependencies": {
31
+ "@types/uuid": "^9.0.8",
32
+ "tsup": "^8.0.2",
33
+ "typescript": "^5.4.5",
34
+ "vitest": "^1.6.0"
35
+ },
36
+ "publishConfig": {
37
+ "access": "public"
38
+ },
39
+ "files": [
40
+ "dist"
41
+ ],
42
+ "repository": {
43
+ "type": "git",
44
+ "url": "https://github.com/razaman2/reactive-view.git"
45
+ }
46
+ }