@razaman2/reactive-view 0.0.34-beta.30 → 0.0.34-beta.32

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 +4 -4
  2. package/dist/index.d.ts +4 -4
  3. package/dist/index.js +308 -149
  4. package/dist/index.mjs +308 -149
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -43,19 +43,19 @@ declare const setup: {
43
43
  declare const _default: {
44
44
  props: {
45
45
  setup: {};
46
- beta: BooleanConstructor;
46
+ beta: (BooleanConstructor | StringConstructor)[];
47
47
  ReactiveView: {
48
48
  type: BooleanConstructor;
49
49
  default: boolean;
50
50
  };
51
51
  instance: {
52
- default: () => vue.Ref<any, any>;
52
+ default: vue.Ref<any, any>;
53
53
  };
54
54
  notifications: ObjectConstructor;
55
55
  subscriptions: ObjectConstructor;
56
56
  beforeSetData: FunctionConstructor;
57
57
  data: {
58
- default: () => {};
58
+ default: {};
59
59
  };
60
60
  defaultData: {};
61
61
  getDefaultData: {
@@ -76,7 +76,7 @@ declare const _default: {
76
76
  default: boolean;
77
77
  };
78
78
  state: {
79
- default: () => {};
79
+ default: {};
80
80
  };
81
81
  };
82
82
  setup(props: Record<string, any>, context: SetupContext): (vue: ComponentPublicInstance) => any;
package/dist/index.d.ts CHANGED
@@ -43,19 +43,19 @@ declare const setup: {
43
43
  declare const _default: {
44
44
  props: {
45
45
  setup: {};
46
- beta: BooleanConstructor;
46
+ beta: (BooleanConstructor | StringConstructor)[];
47
47
  ReactiveView: {
48
48
  type: BooleanConstructor;
49
49
  default: boolean;
50
50
  };
51
51
  instance: {
52
- default: () => vue.Ref<any, any>;
52
+ default: vue.Ref<any, any>;
53
53
  };
54
54
  notifications: ObjectConstructor;
55
55
  subscriptions: ObjectConstructor;
56
56
  beforeSetData: FunctionConstructor;
57
57
  data: {
58
- default: () => {};
58
+ default: {};
59
59
  };
60
60
  defaultData: {};
61
61
  getDefaultData: {
@@ -76,7 +76,7 @@ declare const _default: {
76
76
  default: boolean;
77
77
  };
78
78
  state: {
79
- default: () => {};
79
+ default: {};
80
80
  };
81
81
  };
82
82
  setup(props: Record<string, any>, context: SetupContext): (vue: ComponentPublicInstance) => any;
package/dist/index.js CHANGED
@@ -177,7 +177,7 @@ var import_vue = require("vue");
177
177
 
178
178
  // package.json
179
179
  var name = "@razaman2/reactive-view";
180
- var version = "0.0.34-beta.30";
180
+ var version = "0.0.34-beta.32";
181
181
 
182
182
  // src/ReactiveView.ts
183
183
  var setup = {
@@ -188,16 +188,16 @@ var setup = {
188
188
  var ReactiveView_default = {
189
189
  props: {
190
190
  setup: {},
191
- beta: Boolean,
191
+ beta: [Boolean, String],
192
192
  ReactiveView: {
193
193
  type: Boolean,
194
194
  default: true
195
195
  },
196
- instance: { default: () => (0, import_vue.ref)() },
196
+ instance: { default: (0, import_vue.ref)() },
197
197
  notifications: Object,
198
198
  subscriptions: Object,
199
199
  beforeSetData: Function,
200
- data: { default: () => (0, import_vue.reactive)({}) },
200
+ data: { default: (0, import_vue.reactive)({}) },
201
201
  defaultData: {},
202
202
  getDefaultData: {
203
203
  type: Function,
@@ -218,18 +218,21 @@ var ReactiveView_default = {
218
218
  type: Boolean,
219
219
  default: false
220
220
  },
221
- state: { default: () => (0, import_vue.reactive)({}) }
221
+ state: { default: (0, import_vue.reactive)({}) }
222
222
  },
223
223
  setup(props, context) {
224
- var _a, _b, _c, _d, _e, _f, _g;
224
+ var _a, _b, _c;
225
225
  const diff = (before, after) => {
226
- const change = after.paths().reduce((change2, path) => {
226
+ const paths = Array.from(new Set(before.paths().concat(after.paths())));
227
+ let changed = false;
228
+ const change = paths.reduce((change2, path) => {
227
229
  if (before.get(path) !== after.get(path)) {
228
230
  change2.set(path, after.get(path));
231
+ changed = true;
229
232
  }
230
233
  return change2;
231
234
  }, import_object_manager.default.on({}));
232
- return { before: before.get(), after: after.get(), change: change.get() };
235
+ return { before: before.get(), after: after.get(), changes: change.get(), changed };
233
236
  };
234
237
  const dataPath2 = (path) => {
235
238
  try {
@@ -238,188 +241,344 @@ var ReactiveView_default = {
238
241
  return path;
239
242
  }
240
243
  };
241
- const template = (component2, vue2) => {
242
- return (0, import_vue.createVNode)(
243
- "div",
244
- context.slots.default ? context.attrs : __spreadValues({
245
- style: { color: "red", textAlign: "center" }
246
- }, context.attrs),
247
- context.slots.default ? context.slots.default({ component: component2, vue: vue2, props, context }) : `${props.modelName}: ${name}@${version}`
248
- );
244
+ const template = (component, vue2) => {
245
+ return (0, import_vue.createVNode)("div", context.slots.default ? context.attrs : __spreadValues({
246
+ style: { color: "red", textAlign: "center" }
247
+ }, context.attrs), context.slots.default ? context.slots.default({ component, vue: vue2, props, context }) : `${props.modelName}: ${name}@${version}`);
249
248
  };
250
249
  const isValid = (0, import_vue.ref)(false);
251
250
  const isReady = (0, import_vue.ref)(false);
251
+ const defer = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
252
252
  const isFunctionData = ["Function"].includes((_a = props.data) == null ? void 0 : _a.constructor.name);
253
253
  const isAsyncFunctionData = ["AsyncFunction"].includes((_b = props.data) == null ? void 0 : _b.constructor.name);
254
254
  const isPromiseData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
255
- const defer = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
256
255
  const vue = (0, import_vue.getCurrentInstance)();
257
256
  if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
258
- console.warn("[ReactiveView]: defaultData is required for promise or async function data.", props.data);
257
+ console.warn(`${props.modelName}: defaultData is required for promise or async function data.`, props.data);
259
258
  }
260
259
  const defaultData = props.getDefaultData(
261
- "defaultData" in vue.vnode.props ? vue.vnode.props.defaultData : "data" in vue.vnode.props ? Array.isArray((0, import_vue.isRef)(vue.vnode.props.data) ? (0, import_vue.unref)(vue.vnode.props.data) : vue.vnode.props.data) ? [] : {} : {}
260
+ "defaultData" in vue.vnode.props ? vue.vnode.props.defaultData : "data" in vue.vnode.props ? Array.isArray((0, import_vue.unref)(vue.vnode.props.data)) ? [] : {} : {}
262
261
  );
263
262
  const datatype = Array.isArray(defaultData) ? [] : {};
264
- const normalize = (data) => {
265
- if (props.debug) {
266
- console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, isRef: (0, import_vue.isRef)(data), isReactive: (0, import_vue.isReactive)(data) });
267
- }
268
- if ((0, import_vue.isReactive)(data)) {
269
- return data;
270
- } else {
271
- if ((0, import_vue.isRef)(data) || isFunctionData || isPromiseData) {
272
- return (0, import_vue.reactive)(datatype);
263
+ const beta = () => {
264
+ var _a2;
265
+ const emit = (after, before) => {
266
+ if (vue && vue.vnode.el) {
267
+ const event = new CustomEvent("data:emit", {
268
+ bubbles: true,
269
+ // Key: allows it to travel up
270
+ composed: true,
271
+ // Key: allows it to cross Shadow DOM boundaries
272
+ detail: { before, after }
273
+ // Payload goes here
274
+ });
275
+ access(component).model.setData(after);
276
+ vue.vnode.el.dispatchEvent(event);
277
+ }
278
+ };
279
+ const proxy = (data) => {
280
+ return new Proxy(data, {
281
+ get(target, key, receiver) {
282
+ if (["setData", "replaceData"].includes(key.toString())) {
283
+ return (...params) => {
284
+ var _a3;
285
+ const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
286
+ if (typeof beforeSetData === "function") {
287
+ const before = import_object_manager.default.on(target.getData());
288
+ const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
289
+ const diff2 = access(component).diff(before, after);
290
+ if (beforeSetData(diff2, target)) {
291
+ target[key](...params);
292
+ }
293
+ } else {
294
+ target[key](...params);
295
+ }
296
+ return target;
297
+ };
298
+ } else {
299
+ return Reflect.get(target, key, receiver);
300
+ }
301
+ }
302
+ });
303
+ };
304
+ const normalize = (data) => {
305
+ const datatype2 = Array.isArray(defaultData) ? [] : {};
306
+ if ((0, import_vue.isRef)(data) || (0, import_vue.isReactive)(data) || isFunctionData || isPromiseData) {
307
+ return (0, import_vue.reactive)(datatype2);
273
308
  } else {
274
309
  const props2 = "data" in vue.vnode.props;
275
310
  try {
276
311
  if (["Array", "Object"].includes(data.constructor.name)) {
277
- return (0, import_vue.reactive)(props2 ? data : datatype);
312
+ return (0, import_vue.reactive)(datatype2);
278
313
  } else {
279
- return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
314
+ return (0, import_vue.reactive)(props2 ? { "": datatype2 } : datatype2);
280
315
  }
281
316
  } catch (e) {
282
- return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
317
+ return (0, import_vue.reactive)(props2 ? { "": datatype2 } : datatype2);
283
318
  }
284
319
  }
320
+ };
321
+ const config = {
322
+ data: normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data),
323
+ defaultData: import_object_manager.default.on(defaultData).clone(),
324
+ notifications: props.notifications,
325
+ subscriptions: props.subscriptions,
326
+ name: props.modelName,
327
+ logging: props.logging
328
+ };
329
+ const model = props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config);
330
+ const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, diff, emit, dataPath: dataPath2, model: proxy(model), isValid } });
331
+ if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
332
+ const config2 = {
333
+ callback: typeof context.attrs["onUpdate:model"] === "function" ? context.attrs["onUpdate:model"] : context.attrs["update:model"],
334
+ options: {
335
+ immediate: context.attrs["model:immediate"],
336
+ deep: context.attrs["model:deep"],
337
+ once: context.attrs["model:once"]
338
+ }
339
+ };
340
+ (0, import_vue.watch)(() => import_object_manager.default.on(model.getData()).clone(), (after, before) => {
341
+ const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
342
+ if (props.debug) {
343
+ console.warn(`[ModelWatcher] ${props.modelName}:`, { defaultData, diff: diff2, datatype, before, after, props, context });
344
+ }
345
+ if (diff2.changed) {
346
+ config2.callback(diff2, { component });
347
+ }
348
+ });
285
349
  }
286
- };
287
- const config = {
288
- data: props.beta ? normalize((_d = vue.vnode.props) == null ? void 0 : _d.data) : (0, import_vue.reactive)(import_object_manager.default.on(
289
- isPromiseData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
290
- ).clone()),
291
- defaultData: import_object_manager.default.on(defaultData).clone(),
292
- notifications: props.notifications,
293
- subscriptions: props.subscriptions,
294
- name: props.modelName,
295
- logging: props.logging
296
- };
297
- const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config), {
298
- get(target, key, receiver) {
299
- if (["setData", "replaceData"].includes(key.toString())) {
300
- return (...params) => {
301
- var _a2;
302
- const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
303
- if (typeof beforeSetData === "function") {
304
- const before = import_object_manager.default.on(target.getData());
305
- const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
306
- if (beforeSetData(access(component).diff(before, after), target)) {
307
- target[key](...params);
308
- }
350
+ setTimeout(async () => {
351
+ var _a3, _b2, _c2;
352
+ const [data] = isPromiseData ? await Promise.all([
353
+ isAsyncFunctionData ? props.data() : props.data,
354
+ (_a3 = defer.value) != null ? _a3 : true
355
+ ]) : [props.data];
356
+ const isRefData = (0, import_vue.isRef)(data);
357
+ const isReactiveData = (0, import_vue.isReactive)(data);
358
+ (0, import_vue.watch)(isRefData || isReactiveData || isFunctionData ? data : typeof data === "function" ? data : (() => data), async (after, before) => {
359
+ var _a4;
360
+ const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
361
+ if (props.debug) {
362
+ console.warn(`[DataWatcher] ${props.modelName}:`, { defaultData, data, datatype, isRefData, isReactiveData, isFunctionData, diff: diff2, before, after, props, context });
363
+ }
364
+ const callback = context.attrs["data:callback"];
365
+ if (typeof callback === "function") {
366
+ model.replaceData((_a4 = await callback(diff2, { component })) != null ? _a4 : after);
367
+ } else {
368
+ model.replaceData(after);
369
+ }
370
+ }, {
371
+ immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
372
+ deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
373
+ once: context.attrs["data:once"]
374
+ });
375
+ });
376
+ setTimeout(async () => {
377
+ var _a3;
378
+ isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
379
+ });
380
+ component.value = [access(component)].reduce((options, parent) => {
381
+ var _a3;
382
+ while (parent) {
383
+ if (typeof parent.setup === "function") {
384
+ options = { parent: options, self: (_a3 = parent.setup(component, options)) != null ? _a3 : {} };
385
+ if (access(parent.$parent).ReactiveView) {
386
+ break;
309
387
  } else {
310
- target[key](...params);
388
+ parent = access(parent.$parent);
311
389
  }
312
- return target;
313
- };
314
- } else {
315
- return Reflect.get(target, key, receiver);
390
+ } else {
391
+ break;
392
+ }
316
393
  }
317
- }
318
- });
319
- const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, diff, dataPath: dataPath2, isValid } });
320
- if (props.debug) {
321
- console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
322
- }
323
- const watchDataProp = (dataProp) => {
324
- var _a2, _b2, _c2, _d2;
325
- const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
326
- callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
327
- options: Object.assign(__spreadValues(__spreadValues({
328
- deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true
329
- }, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_d2 = context.attrs["onUpdate:data"]) != null ? _d2 : {}).options)
330
- };
331
- if (context.attrs["data:log"]) {
332
- console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
333
- }
334
- (0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
335
- var _a3;
336
- if (typeof config2.callback === "function") {
337
- model.replaceData((_a3 = config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a3 : after);
394
+ return options;
395
+ }, component.value);
396
+ props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
397
+ return (vue2) => {
398
+ var _a3, _b2;
399
+ if (isReady.value) {
400
+ return access(component).template(component, vue2);
338
401
  } else {
339
- model.replaceData(after);
402
+ return (_b2 = (_a3 = context.slots).loading) == null ? void 0 : _b2.call(_a3, { component });
340
403
  }
341
- }, config2.options);
404
+ };
342
405
  };
343
- if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
344
- const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
345
- callback: context.attrs["onUpdate:model"],
346
- options: Object.assign(__spreadValues(__spreadValues({
347
- deep: (_e = context.attrs["model:deep"]) != null ? _e : true
348
- }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_f = context.attrs["onUpdate:model"]) != null ? _f : {}).options)
349
- } : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
350
- if (context.attrs["model:log"]) {
351
- console.warn(`[ReactiveView]:model`, { config: config2 });
352
- }
353
- (0, import_vue.watch)(() => import_object_manager.default.on(model.getData()).clone(), (after, before) => {
354
- config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
355
- }, config2.options);
356
- }
357
- if (props.beta) {
358
- const isRefData = (0, import_vue.isRef)(props.data);
359
- if (isRefData || isFunctionData || isPromiseData) {
360
- setTimeout(async () => {
361
- var _a2, _b2, _c2;
362
- const [data] = isPromiseData ? await Promise.all([
363
- isAsyncFunctionData ? props.data() : props.data,
364
- (_a2 = defer.value) != null ? _a2 : true
365
- ]) : [props.data];
366
- (0, import_vue.watch)(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
367
- var _a3;
368
- if (before !== void 0 || after !== void 0) {
369
- const callback = context.attrs["data:callback"];
370
- if (typeof callback === "function") {
371
- const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
372
- model.replaceData((_a3 = callback(diff2, { component })) != null ? _a3 : after);
406
+ const current = () => {
407
+ var _a2, _b2, _c2, _d;
408
+ const emit = (after, before) => {
409
+ if (vue && vue.vnode.el) {
410
+ const event = new CustomEvent("data:emit", {
411
+ bubbles: true,
412
+ // Key: allows it to travel up
413
+ composed: true,
414
+ // Key: allows it to cross Shadow DOM boundaries
415
+ detail: { before, after }
416
+ // Payload goes here
417
+ });
418
+ vue.vnode.el.dispatchEvent(event);
419
+ }
420
+ };
421
+ const normalize = (data) => {
422
+ if (props.debug) {
423
+ console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, isRef: (0, import_vue.isRef)(data), isReactive: (0, import_vue.isReactive)(data) });
424
+ }
425
+ if ((0, import_vue.isReactive)(data)) {
426
+ return data;
427
+ } else {
428
+ if ((0, import_vue.isRef)(data) || isFunctionData || isPromiseData) {
429
+ return (0, import_vue.reactive)(datatype);
430
+ } else {
431
+ const props2 = "data" in vue.vnode.props;
432
+ try {
433
+ if (["Array", "Object"].includes(data.constructor.name)) {
434
+ return (0, import_vue.reactive)(props2 ? data : datatype);
373
435
  } else {
374
- model.replaceData(after);
436
+ return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
375
437
  }
438
+ } catch (e) {
439
+ return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
376
440
  }
377
- }, {
378
- immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
379
- deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
380
- once: context.attrs["data:once"]
441
+ }
442
+ }
443
+ };
444
+ const config = {
445
+ data: props.beta ? normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data) : (0, import_vue.reactive)(import_object_manager.default.on(
446
+ isPromiseData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
447
+ ).clone()),
448
+ defaultData: import_object_manager.default.on(defaultData).clone(),
449
+ notifications: props.notifications,
450
+ subscriptions: props.subscriptions,
451
+ name: props.modelName,
452
+ logging: props.logging
453
+ };
454
+ const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config), {
455
+ get(target, key, receiver) {
456
+ if (["setData", "replaceData"].includes(key.toString())) {
457
+ return (...params) => {
458
+ var _a3;
459
+ const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
460
+ if (typeof beforeSetData === "function") {
461
+ const before = import_object_manager.default.on(target.getData());
462
+ const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
463
+ if (beforeSetData(access(component).diff(before, after), target)) {
464
+ target[key](...params);
465
+ }
466
+ } else {
467
+ target[key](...params);
468
+ }
469
+ return target;
470
+ };
471
+ } else {
472
+ return Reflect.get(target, key, receiver);
473
+ }
474
+ }
475
+ });
476
+ const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, diff, emit, dataPath: dataPath2, isValid } });
477
+ if (props.debug) {
478
+ console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
479
+ }
480
+ const watchDataProp = (dataProp) => {
481
+ var _a3, _b3, _c3, _d2;
482
+ const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
483
+ callback: (_b3 = ((_a3 = context.attrs["onUpdate:data"]) != null ? _a3 : {}).callback) != null ? _b3 : context.attrs["data:callback"],
484
+ options: Object.assign(__spreadValues(__spreadValues({
485
+ deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true
486
+ }, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_d2 = context.attrs["onUpdate:data"]) != null ? _d2 : {}).options)
487
+ };
488
+ if (context.attrs["data:log"]) {
489
+ console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
490
+ }
491
+ (0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
492
+ var _a4;
493
+ if (typeof config2.callback === "function") {
494
+ model.replaceData((_a4 = config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a4 : after);
495
+ } else {
496
+ model.replaceData(after);
497
+ }
498
+ }, config2.options);
499
+ };
500
+ if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
501
+ const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
502
+ callback: context.attrs["onUpdate:model"],
503
+ options: Object.assign(__spreadValues(__spreadValues({
504
+ deep: (_b2 = context.attrs["model:deep"]) != null ? _b2 : true
505
+ }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_c2 = context.attrs["onUpdate:model"]) != null ? _c2 : {}).options)
506
+ } : (_d = context.attrs["onUpdate:model"]) != null ? _d : {};
507
+ if (context.attrs["model:log"]) {
508
+ console.warn(`[ReactiveView]:model`, { config: config2 });
509
+ }
510
+ (0, import_vue.watch)(() => import_object_manager.default.on(model.getData()).clone(), (after, before) => {
511
+ config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
512
+ }, config2.options);
513
+ }
514
+ if (props.beta) {
515
+ const isRefData = (0, import_vue.isRef)(props.data);
516
+ if (isRefData || isFunctionData || isPromiseData) {
517
+ setTimeout(async () => {
518
+ var _a3, _b3, _c3;
519
+ const [data] = isPromiseData ? await Promise.all([
520
+ isAsyncFunctionData ? props.data() : props.data,
521
+ (_a3 = defer.value) != null ? _a3 : true
522
+ ]) : [props.data];
523
+ (0, import_vue.watch)(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
524
+ var _a4;
525
+ if (before !== void 0 || after !== void 0) {
526
+ const callback = context.attrs["data:callback"];
527
+ if (typeof callback === "function") {
528
+ const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
529
+ model.replaceData((_a4 = callback(diff2, { component })) != null ? _a4 : after);
530
+ } else {
531
+ model.replaceData(after);
532
+ }
533
+ }
534
+ }, {
535
+ immediate: (_b3 = context.attrs["data:immediate"]) != null ? _b3 : true,
536
+ deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true,
537
+ once: context.attrs["data:once"]
538
+ });
381
539
  });
540
+ }
541
+ } else {
542
+ setTimeout(async () => {
543
+ var _a3;
544
+ const [data] = await Promise.all([
545
+ isAsyncFunctionData ? props.data() : props.data,
546
+ (_a3 = defer.value) != null ? _a3 : true
547
+ ]);
548
+ watchDataProp(data);
382
549
  });
383
550
  }
384
- } else {
385
551
  setTimeout(async () => {
386
- var _a2;
387
- const [data] = await Promise.all([
388
- isAsyncFunctionData ? props.data() : props.data,
389
- (_a2 = defer.value) != null ? _a2 : true
390
- ]);
391
- watchDataProp(data);
552
+ var _a3;
553
+ isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
392
554
  });
393
- }
394
- setTimeout(async () => {
395
- var _a2;
396
- isReady.value = (_a2 = await defer.value) != null ? _a2 : true;
397
- });
398
- component.value = [access(component)].reduce((options, parent) => {
399
- var _a2;
400
- while (parent) {
401
- if (typeof parent.setup === "function") {
402
- options = { parent: options, self: (_a2 = parent.setup(component, options)) != null ? _a2 : {} };
403
- if (access(parent.$parent).ReactiveView) {
404
- break;
555
+ component.value = [access(component)].reduce((options, parent) => {
556
+ var _a3;
557
+ while (parent) {
558
+ if (typeof parent.setup === "function") {
559
+ options = { parent: options, self: (_a3 = parent.setup(component, options)) != null ? _a3 : {} };
560
+ if (access(parent.$parent).ReactiveView) {
561
+ break;
562
+ } else {
563
+ parent = access(parent.$parent);
564
+ }
405
565
  } else {
406
- parent = access(parent.$parent);
566
+ break;
407
567
  }
568
+ }
569
+ return options;
570
+ }, component.value);
571
+ props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
572
+ return (vue2) => {
573
+ var _a3, _b3;
574
+ if (isReady.value) {
575
+ return access(component).template(component, vue2);
408
576
  } else {
409
- break;
577
+ return (_b3 = (_a3 = context.slots).loading) == null ? void 0 : _b3.call(_a3, { component });
410
578
  }
411
- }
412
- return options;
413
- }, component.value);
414
- props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
415
- return (vue2) => {
416
- var _a2, _b2;
417
- if (isReady.value) {
418
- return access(component).template(component, vue2);
419
- } else {
420
- return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });
421
- }
579
+ };
422
580
  };
581
+ return props.beta === "next" ? beta() : current();
423
582
  }
424
583
  };
425
584
 
package/dist/index.mjs CHANGED
@@ -131,7 +131,7 @@ import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstanc
131
131
 
132
132
  // package.json
133
133
  var name = "@razaman2/reactive-view";
134
- var version = "0.0.34-beta.30";
134
+ var version = "0.0.34-beta.32";
135
135
 
136
136
  // src/ReactiveView.ts
137
137
  var setup = {
@@ -142,16 +142,16 @@ var setup = {
142
142
  var ReactiveView_default = {
143
143
  props: {
144
144
  setup: {},
145
- beta: Boolean,
145
+ beta: [Boolean, String],
146
146
  ReactiveView: {
147
147
  type: Boolean,
148
148
  default: true
149
149
  },
150
- instance: { default: () => ref() },
150
+ instance: { default: ref() },
151
151
  notifications: Object,
152
152
  subscriptions: Object,
153
153
  beforeSetData: Function,
154
- data: { default: () => reactive({}) },
154
+ data: { default: reactive({}) },
155
155
  defaultData: {},
156
156
  getDefaultData: {
157
157
  type: Function,
@@ -172,18 +172,21 @@ var ReactiveView_default = {
172
172
  type: Boolean,
173
173
  default: false
174
174
  },
175
- state: { default: () => reactive({}) }
175
+ state: { default: reactive({}) }
176
176
  },
177
177
  setup(props, context) {
178
- var _a, _b, _c, _d, _e, _f, _g;
178
+ var _a, _b, _c;
179
179
  const diff = (before, after) => {
180
- const change = after.paths().reduce((change2, path) => {
180
+ const paths = Array.from(new Set(before.paths().concat(after.paths())));
181
+ let changed = false;
182
+ const change = paths.reduce((change2, path) => {
181
183
  if (before.get(path) !== after.get(path)) {
182
184
  change2.set(path, after.get(path));
185
+ changed = true;
183
186
  }
184
187
  return change2;
185
188
  }, ObjectManager.on({}));
186
- return { before: before.get(), after: after.get(), change: change.get() };
189
+ return { before: before.get(), after: after.get(), changes: change.get(), changed };
187
190
  };
188
191
  const dataPath2 = (path) => {
189
192
  try {
@@ -192,188 +195,344 @@ var ReactiveView_default = {
192
195
  return path;
193
196
  }
194
197
  };
195
- const template = (component2, vue2) => {
196
- return createVNode(
197
- "div",
198
- context.slots.default ? context.attrs : __spreadValues({
199
- style: { color: "red", textAlign: "center" }
200
- }, context.attrs),
201
- context.slots.default ? context.slots.default({ component: component2, vue: vue2, props, context }) : `${props.modelName}: ${name}@${version}`
202
- );
198
+ const template = (component, vue2) => {
199
+ return createVNode("div", context.slots.default ? context.attrs : __spreadValues({
200
+ style: { color: "red", textAlign: "center" }
201
+ }, context.attrs), context.slots.default ? context.slots.default({ component, vue: vue2, props, context }) : `${props.modelName}: ${name}@${version}`);
203
202
  };
204
203
  const isValid = ref(false);
205
204
  const isReady = ref(false);
205
+ const defer = ref(typeof props.defer === "function" ? props.defer() : props.defer);
206
206
  const isFunctionData = ["Function"].includes((_a = props.data) == null ? void 0 : _a.constructor.name);
207
207
  const isAsyncFunctionData = ["AsyncFunction"].includes((_b = props.data) == null ? void 0 : _b.constructor.name);
208
208
  const isPromiseData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
209
- const defer = ref(typeof props.defer === "function" ? props.defer() : props.defer);
210
209
  const vue = getCurrentInstance();
211
210
  if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
212
- console.warn("[ReactiveView]: defaultData is required for promise or async function data.", props.data);
211
+ console.warn(`${props.modelName}: defaultData is required for promise or async function data.`, props.data);
213
212
  }
214
213
  const defaultData = props.getDefaultData(
215
- "defaultData" in vue.vnode.props ? vue.vnode.props.defaultData : "data" in vue.vnode.props ? Array.isArray(isRef(vue.vnode.props.data) ? unref(vue.vnode.props.data) : vue.vnode.props.data) ? [] : {} : {}
214
+ "defaultData" in vue.vnode.props ? vue.vnode.props.defaultData : "data" in vue.vnode.props ? Array.isArray(unref(vue.vnode.props.data)) ? [] : {} : {}
216
215
  );
217
216
  const datatype = Array.isArray(defaultData) ? [] : {};
218
- const normalize = (data) => {
219
- if (props.debug) {
220
- console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, isRef: isRef(data), isReactive: isReactive(data) });
221
- }
222
- if (isReactive(data)) {
223
- return data;
224
- } else {
225
- if (isRef(data) || isFunctionData || isPromiseData) {
226
- return reactive(datatype);
217
+ const beta = () => {
218
+ var _a2;
219
+ const emit = (after, before) => {
220
+ if (vue && vue.vnode.el) {
221
+ const event = new CustomEvent("data:emit", {
222
+ bubbles: true,
223
+ // Key: allows it to travel up
224
+ composed: true,
225
+ // Key: allows it to cross Shadow DOM boundaries
226
+ detail: { before, after }
227
+ // Payload goes here
228
+ });
229
+ access(component).model.setData(after);
230
+ vue.vnode.el.dispatchEvent(event);
231
+ }
232
+ };
233
+ const proxy = (data) => {
234
+ return new Proxy(data, {
235
+ get(target, key, receiver) {
236
+ if (["setData", "replaceData"].includes(key.toString())) {
237
+ return (...params) => {
238
+ var _a3;
239
+ const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
240
+ if (typeof beforeSetData === "function") {
241
+ const before = ObjectManager.on(target.getData());
242
+ const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
243
+ const diff2 = access(component).diff(before, after);
244
+ if (beforeSetData(diff2, target)) {
245
+ target[key](...params);
246
+ }
247
+ } else {
248
+ target[key](...params);
249
+ }
250
+ return target;
251
+ };
252
+ } else {
253
+ return Reflect.get(target, key, receiver);
254
+ }
255
+ }
256
+ });
257
+ };
258
+ const normalize = (data) => {
259
+ const datatype2 = Array.isArray(defaultData) ? [] : {};
260
+ if (isRef(data) || isReactive(data) || isFunctionData || isPromiseData) {
261
+ return reactive(datatype2);
227
262
  } else {
228
263
  const props2 = "data" in vue.vnode.props;
229
264
  try {
230
265
  if (["Array", "Object"].includes(data.constructor.name)) {
231
- return reactive(props2 ? data : datatype);
266
+ return reactive(datatype2);
232
267
  } else {
233
- return reactive(props2 ? { "": data } : datatype);
268
+ return reactive(props2 ? { "": datatype2 } : datatype2);
234
269
  }
235
270
  } catch (e) {
236
- return reactive(props2 ? { "": data } : datatype);
271
+ return reactive(props2 ? { "": datatype2 } : datatype2);
237
272
  }
238
273
  }
274
+ };
275
+ const config = {
276
+ data: normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data),
277
+ defaultData: ObjectManager.on(defaultData).clone(),
278
+ notifications: props.notifications,
279
+ subscriptions: props.subscriptions,
280
+ name: props.modelName,
281
+ logging: props.logging
282
+ };
283
+ const model = props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config);
284
+ const component = ref({ parent: { self: vue.proxy }, self: { template, diff, emit, dataPath: dataPath2, model: proxy(model), isValid } });
285
+ if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
286
+ const config2 = {
287
+ callback: typeof context.attrs["onUpdate:model"] === "function" ? context.attrs["onUpdate:model"] : context.attrs["update:model"],
288
+ options: {
289
+ immediate: context.attrs["model:immediate"],
290
+ deep: context.attrs["model:deep"],
291
+ once: context.attrs["model:once"]
292
+ }
293
+ };
294
+ watch(() => ObjectManager.on(model.getData()).clone(), (after, before) => {
295
+ const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
296
+ if (props.debug) {
297
+ console.warn(`[ModelWatcher] ${props.modelName}:`, { defaultData, diff: diff2, datatype, before, after, props, context });
298
+ }
299
+ if (diff2.changed) {
300
+ config2.callback(diff2, { component });
301
+ }
302
+ });
239
303
  }
240
- };
241
- const config = {
242
- data: props.beta ? normalize((_d = vue.vnode.props) == null ? void 0 : _d.data) : reactive(ObjectManager.on(
243
- isPromiseData || isFunctionData || isRef(props.data) || isReactive(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
244
- ).clone()),
245
- defaultData: ObjectManager.on(defaultData).clone(),
246
- notifications: props.notifications,
247
- subscriptions: props.subscriptions,
248
- name: props.modelName,
249
- logging: props.logging
250
- };
251
- const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config), {
252
- get(target, key, receiver) {
253
- if (["setData", "replaceData"].includes(key.toString())) {
254
- return (...params) => {
255
- var _a2;
256
- const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
257
- if (typeof beforeSetData === "function") {
258
- const before = ObjectManager.on(target.getData());
259
- const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
260
- if (beforeSetData(access(component).diff(before, after), target)) {
261
- target[key](...params);
262
- }
304
+ setTimeout(async () => {
305
+ var _a3, _b2, _c2;
306
+ const [data] = isPromiseData ? await Promise.all([
307
+ isAsyncFunctionData ? props.data() : props.data,
308
+ (_a3 = defer.value) != null ? _a3 : true
309
+ ]) : [props.data];
310
+ const isRefData = isRef(data);
311
+ const isReactiveData = isReactive(data);
312
+ watch(isRefData || isReactiveData || isFunctionData ? data : typeof data === "function" ? data : (() => data), async (after, before) => {
313
+ var _a4;
314
+ const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
315
+ if (props.debug) {
316
+ console.warn(`[DataWatcher] ${props.modelName}:`, { defaultData, data, datatype, isRefData, isReactiveData, isFunctionData, diff: diff2, before, after, props, context });
317
+ }
318
+ const callback = context.attrs["data:callback"];
319
+ if (typeof callback === "function") {
320
+ model.replaceData((_a4 = await callback(diff2, { component })) != null ? _a4 : after);
321
+ } else {
322
+ model.replaceData(after);
323
+ }
324
+ }, {
325
+ immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
326
+ deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
327
+ once: context.attrs["data:once"]
328
+ });
329
+ });
330
+ setTimeout(async () => {
331
+ var _a3;
332
+ isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
333
+ });
334
+ component.value = [access(component)].reduce((options, parent) => {
335
+ var _a3;
336
+ while (parent) {
337
+ if (typeof parent.setup === "function") {
338
+ options = { parent: options, self: (_a3 = parent.setup(component, options)) != null ? _a3 : {} };
339
+ if (access(parent.$parent).ReactiveView) {
340
+ break;
263
341
  } else {
264
- target[key](...params);
342
+ parent = access(parent.$parent);
265
343
  }
266
- return target;
267
- };
268
- } else {
269
- return Reflect.get(target, key, receiver);
344
+ } else {
345
+ break;
346
+ }
270
347
  }
271
- }
272
- });
273
- const component = ref({ parent: { self: vue.proxy }, self: { template, model, diff, dataPath: dataPath2, isValid } });
274
- if (props.debug) {
275
- console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
276
- }
277
- const watchDataProp = (dataProp) => {
278
- var _a2, _b2, _c2, _d2;
279
- const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
280
- callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
281
- options: Object.assign(__spreadValues(__spreadValues({
282
- deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true
283
- }, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_d2 = context.attrs["onUpdate:data"]) != null ? _d2 : {}).options)
284
- };
285
- if (context.attrs["data:log"]) {
286
- console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
287
- }
288
- watch(isFunctionData || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
289
- var _a3;
290
- if (typeof config2.callback === "function") {
291
- model.replaceData((_a3 = config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a3 : after);
348
+ return options;
349
+ }, component.value);
350
+ props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
351
+ return (vue2) => {
352
+ var _a3, _b2;
353
+ if (isReady.value) {
354
+ return access(component).template(component, vue2);
292
355
  } else {
293
- model.replaceData(after);
356
+ return (_b2 = (_a3 = context.slots).loading) == null ? void 0 : _b2.call(_a3, { component });
294
357
  }
295
- }, config2.options);
358
+ };
296
359
  };
297
- if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
298
- const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
299
- callback: context.attrs["onUpdate:model"],
300
- options: Object.assign(__spreadValues(__spreadValues({
301
- deep: (_e = context.attrs["model:deep"]) != null ? _e : true
302
- }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_f = context.attrs["onUpdate:model"]) != null ? _f : {}).options)
303
- } : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
304
- if (context.attrs["model:log"]) {
305
- console.warn(`[ReactiveView]:model`, { config: config2 });
306
- }
307
- watch(() => ObjectManager.on(model.getData()).clone(), (after, before) => {
308
- config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
309
- }, config2.options);
310
- }
311
- if (props.beta) {
312
- const isRefData = isRef(props.data);
313
- if (isRefData || isFunctionData || isPromiseData) {
314
- setTimeout(async () => {
315
- var _a2, _b2, _c2;
316
- const [data] = isPromiseData ? await Promise.all([
317
- isAsyncFunctionData ? props.data() : props.data,
318
- (_a2 = defer.value) != null ? _a2 : true
319
- ]) : [props.data];
320
- watch(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
321
- var _a3;
322
- if (before !== void 0 || after !== void 0) {
323
- const callback = context.attrs["data:callback"];
324
- if (typeof callback === "function") {
325
- const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
326
- model.replaceData((_a3 = callback(diff2, { component })) != null ? _a3 : after);
360
+ const current = () => {
361
+ var _a2, _b2, _c2, _d;
362
+ const emit = (after, before) => {
363
+ if (vue && vue.vnode.el) {
364
+ const event = new CustomEvent("data:emit", {
365
+ bubbles: true,
366
+ // Key: allows it to travel up
367
+ composed: true,
368
+ // Key: allows it to cross Shadow DOM boundaries
369
+ detail: { before, after }
370
+ // Payload goes here
371
+ });
372
+ vue.vnode.el.dispatchEvent(event);
373
+ }
374
+ };
375
+ const normalize = (data) => {
376
+ if (props.debug) {
377
+ console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, isRef: isRef(data), isReactive: isReactive(data) });
378
+ }
379
+ if (isReactive(data)) {
380
+ return data;
381
+ } else {
382
+ if (isRef(data) || isFunctionData || isPromiseData) {
383
+ return reactive(datatype);
384
+ } else {
385
+ const props2 = "data" in vue.vnode.props;
386
+ try {
387
+ if (["Array", "Object"].includes(data.constructor.name)) {
388
+ return reactive(props2 ? data : datatype);
327
389
  } else {
328
- model.replaceData(after);
390
+ return reactive(props2 ? { "": data } : datatype);
329
391
  }
392
+ } catch (e) {
393
+ return reactive(props2 ? { "": data } : datatype);
330
394
  }
331
- }, {
332
- immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
333
- deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
334
- once: context.attrs["data:once"]
395
+ }
396
+ }
397
+ };
398
+ const config = {
399
+ data: props.beta ? normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data) : reactive(ObjectManager.on(
400
+ isPromiseData || isFunctionData || isRef(props.data) || isReactive(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
401
+ ).clone()),
402
+ defaultData: ObjectManager.on(defaultData).clone(),
403
+ notifications: props.notifications,
404
+ subscriptions: props.subscriptions,
405
+ name: props.modelName,
406
+ logging: props.logging
407
+ };
408
+ const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config), {
409
+ get(target, key, receiver) {
410
+ if (["setData", "replaceData"].includes(key.toString())) {
411
+ return (...params) => {
412
+ var _a3;
413
+ const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
414
+ if (typeof beforeSetData === "function") {
415
+ const before = ObjectManager.on(target.getData());
416
+ const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
417
+ if (beforeSetData(access(component).diff(before, after), target)) {
418
+ target[key](...params);
419
+ }
420
+ } else {
421
+ target[key](...params);
422
+ }
423
+ return target;
424
+ };
425
+ } else {
426
+ return Reflect.get(target, key, receiver);
427
+ }
428
+ }
429
+ });
430
+ const component = ref({ parent: { self: vue.proxy }, self: { template, model, diff, emit, dataPath: dataPath2, isValid } });
431
+ if (props.debug) {
432
+ console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
433
+ }
434
+ const watchDataProp = (dataProp) => {
435
+ var _a3, _b3, _c3, _d2;
436
+ const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
437
+ callback: (_b3 = ((_a3 = context.attrs["onUpdate:data"]) != null ? _a3 : {}).callback) != null ? _b3 : context.attrs["data:callback"],
438
+ options: Object.assign(__spreadValues(__spreadValues({
439
+ deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true
440
+ }, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_d2 = context.attrs["onUpdate:data"]) != null ? _d2 : {}).options)
441
+ };
442
+ if (context.attrs["data:log"]) {
443
+ console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
444
+ }
445
+ watch(isFunctionData || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
446
+ var _a4;
447
+ if (typeof config2.callback === "function") {
448
+ model.replaceData((_a4 = config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a4 : after);
449
+ } else {
450
+ model.replaceData(after);
451
+ }
452
+ }, config2.options);
453
+ };
454
+ if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
455
+ const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
456
+ callback: context.attrs["onUpdate:model"],
457
+ options: Object.assign(__spreadValues(__spreadValues({
458
+ deep: (_b2 = context.attrs["model:deep"]) != null ? _b2 : true
459
+ }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_c2 = context.attrs["onUpdate:model"]) != null ? _c2 : {}).options)
460
+ } : (_d = context.attrs["onUpdate:model"]) != null ? _d : {};
461
+ if (context.attrs["model:log"]) {
462
+ console.warn(`[ReactiveView]:model`, { config: config2 });
463
+ }
464
+ watch(() => ObjectManager.on(model.getData()).clone(), (after, before) => {
465
+ config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
466
+ }, config2.options);
467
+ }
468
+ if (props.beta) {
469
+ const isRefData = isRef(props.data);
470
+ if (isRefData || isFunctionData || isPromiseData) {
471
+ setTimeout(async () => {
472
+ var _a3, _b3, _c3;
473
+ const [data] = isPromiseData ? await Promise.all([
474
+ isAsyncFunctionData ? props.data() : props.data,
475
+ (_a3 = defer.value) != null ? _a3 : true
476
+ ]) : [props.data];
477
+ watch(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
478
+ var _a4;
479
+ if (before !== void 0 || after !== void 0) {
480
+ const callback = context.attrs["data:callback"];
481
+ if (typeof callback === "function") {
482
+ const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
483
+ model.replaceData((_a4 = callback(diff2, { component })) != null ? _a4 : after);
484
+ } else {
485
+ model.replaceData(after);
486
+ }
487
+ }
488
+ }, {
489
+ immediate: (_b3 = context.attrs["data:immediate"]) != null ? _b3 : true,
490
+ deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true,
491
+ once: context.attrs["data:once"]
492
+ });
335
493
  });
494
+ }
495
+ } else {
496
+ setTimeout(async () => {
497
+ var _a3;
498
+ const [data] = await Promise.all([
499
+ isAsyncFunctionData ? props.data() : props.data,
500
+ (_a3 = defer.value) != null ? _a3 : true
501
+ ]);
502
+ watchDataProp(data);
336
503
  });
337
504
  }
338
- } else {
339
505
  setTimeout(async () => {
340
- var _a2;
341
- const [data] = await Promise.all([
342
- isAsyncFunctionData ? props.data() : props.data,
343
- (_a2 = defer.value) != null ? _a2 : true
344
- ]);
345
- watchDataProp(data);
506
+ var _a3;
507
+ isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
346
508
  });
347
- }
348
- setTimeout(async () => {
349
- var _a2;
350
- isReady.value = (_a2 = await defer.value) != null ? _a2 : true;
351
- });
352
- component.value = [access(component)].reduce((options, parent) => {
353
- var _a2;
354
- while (parent) {
355
- if (typeof parent.setup === "function") {
356
- options = { parent: options, self: (_a2 = parent.setup(component, options)) != null ? _a2 : {} };
357
- if (access(parent.$parent).ReactiveView) {
358
- break;
509
+ component.value = [access(component)].reduce((options, parent) => {
510
+ var _a3;
511
+ while (parent) {
512
+ if (typeof parent.setup === "function") {
513
+ options = { parent: options, self: (_a3 = parent.setup(component, options)) != null ? _a3 : {} };
514
+ if (access(parent.$parent).ReactiveView) {
515
+ break;
516
+ } else {
517
+ parent = access(parent.$parent);
518
+ }
359
519
  } else {
360
- parent = access(parent.$parent);
520
+ break;
361
521
  }
522
+ }
523
+ return options;
524
+ }, component.value);
525
+ props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
526
+ return (vue2) => {
527
+ var _a3, _b3;
528
+ if (isReady.value) {
529
+ return access(component).template(component, vue2);
362
530
  } else {
363
- break;
531
+ return (_b3 = (_a3 = context.slots).loading) == null ? void 0 : _b3.call(_a3, { component });
364
532
  }
365
- }
366
- return options;
367
- }, component.value);
368
- props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
369
- return (vue2) => {
370
- var _a2, _b2;
371
- if (isReady.value) {
372
- return access(component).template(component, vue2);
373
- } else {
374
- return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });
375
- }
533
+ };
376
534
  };
535
+ return props.beta === "next" ? beta() : current();
377
536
  }
378
537
  };
379
538
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@razaman2/reactive-view",
3
- "version": "0.0.34-beta.30",
3
+ "version": "0.0.34-beta.32",
4
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
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",