@razaman2/reactive-view 0.0.34-beta.31 → 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 +3 -3
  2. package/dist/index.d.ts +3 -3
  3. package/dist/index.js +307 -161
  4. package/dist/index.mjs +307 -161
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -43,7 +43,7 @@ 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;
@@ -55,7 +55,7 @@ declare const _default: {
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,7 +43,7 @@ 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;
@@ -55,7 +55,7 @@ declare const _default: {
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.31";
180
+ var version = "0.0.34-beta.32";
181
181
 
182
182
  // src/ReactiveView.ts
183
183
  var setup = {
@@ -188,7 +188,7 @@ 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
@@ -197,7 +197,7 @@ var ReactiveView_default = {
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,201 +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
- const emit = (after, before) => {
258
- if (vue && vue.vnode.el) {
259
- const event = new CustomEvent("data:emit", {
260
- bubbles: true,
261
- // Key: allows it to travel up
262
- composed: true,
263
- // Key: allows it to cross Shadow DOM boundaries
264
- detail: { before, after }
265
- // Payload goes here
266
- });
267
- vue.vnode.el.dispatchEvent(event);
268
- }
269
- };
270
256
  if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
271
- 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);
272
258
  }
273
259
  const defaultData = props.getDefaultData(
274
- "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)) ? [] : {} : {}
275
261
  );
276
262
  const datatype = Array.isArray(defaultData) ? [] : {};
277
- const normalize = (data) => {
278
- if (props.debug) {
279
- 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) });
280
- }
281
- if ((0, import_vue.isReactive)(data)) {
282
- return data;
283
- } else {
284
- if ((0, import_vue.isRef)(data) || isFunctionData || isPromiseData) {
285
- 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);
286
308
  } else {
287
309
  const props2 = "data" in vue.vnode.props;
288
310
  try {
289
311
  if (["Array", "Object"].includes(data.constructor.name)) {
290
- return (0, import_vue.reactive)(props2 ? data : datatype);
312
+ return (0, import_vue.reactive)(datatype2);
291
313
  } else {
292
- return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
314
+ return (0, import_vue.reactive)(props2 ? { "": datatype2 } : datatype2);
293
315
  }
294
316
  } catch (e) {
295
- return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
317
+ return (0, import_vue.reactive)(props2 ? { "": datatype2 } : datatype2);
296
318
  }
297
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
+ });
298
349
  }
299
- };
300
- const config = {
301
- data: props.beta ? normalize((_d = vue.vnode.props) == null ? void 0 : _d.data) : (0, import_vue.reactive)(import_object_manager.default.on(
302
- isPromiseData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
303
- ).clone()),
304
- defaultData: import_object_manager.default.on(defaultData).clone(),
305
- notifications: props.notifications,
306
- subscriptions: props.subscriptions,
307
- name: props.modelName,
308
- logging: props.logging
309
- };
310
- const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config), {
311
- get(target, key, receiver) {
312
- if (["setData", "replaceData"].includes(key.toString())) {
313
- return (...params) => {
314
- var _a2;
315
- const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
316
- if (typeof beforeSetData === "function") {
317
- const before = import_object_manager.default.on(target.getData());
318
- const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
319
- if (beforeSetData(access(component).diff(before, after), target)) {
320
- target[key](...params);
321
- }
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;
322
387
  } else {
323
- target[key](...params);
388
+ parent = access(parent.$parent);
324
389
  }
325
- return target;
326
- };
327
- } else {
328
- return Reflect.get(target, key, receiver);
390
+ } else {
391
+ break;
392
+ }
329
393
  }
330
- }
331
- });
332
- const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, diff, emit, dataPath: dataPath2, isValid } });
333
- if (props.debug) {
334
- console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
335
- }
336
- const watchDataProp = (dataProp) => {
337
- var _a2, _b2, _c2, _d2;
338
- const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
339
- callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
340
- options: Object.assign(__spreadValues(__spreadValues({
341
- deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true
342
- }, 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)
343
- };
344
- if (context.attrs["data:log"]) {
345
- console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
346
- }
347
- (0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
348
- var _a3;
349
- if (typeof config2.callback === "function") {
350
- 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);
351
401
  } else {
352
- model.replaceData(after);
402
+ return (_b2 = (_a3 = context.slots).loading) == null ? void 0 : _b2.call(_a3, { component });
353
403
  }
354
- }, config2.options);
404
+ };
355
405
  };
356
- if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
357
- const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
358
- callback: context.attrs["onUpdate:model"],
359
- options: Object.assign(__spreadValues(__spreadValues({
360
- deep: (_e = context.attrs["model:deep"]) != null ? _e : true
361
- }, 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)
362
- } : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
363
- if (context.attrs["model:log"]) {
364
- console.warn(`[ReactiveView]:model`, { config: config2 });
365
- }
366
- (0, import_vue.watch)(() => import_object_manager.default.on(model.getData()).clone(), (after, before) => {
367
- config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
368
- }, config2.options);
369
- }
370
- if (props.beta) {
371
- const isRefData = (0, import_vue.isRef)(props.data);
372
- if (isRefData || isFunctionData || isPromiseData) {
373
- setTimeout(async () => {
374
- var _a2, _b2, _c2;
375
- const [data] = isPromiseData ? await Promise.all([
376
- isAsyncFunctionData ? props.data() : props.data,
377
- (_a2 = defer.value) != null ? _a2 : true
378
- ]) : [props.data];
379
- (0, import_vue.watch)(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
380
- var _a3;
381
- if (before !== void 0 || after !== void 0) {
382
- const callback = context.attrs["data:callback"];
383
- if (typeof callback === "function") {
384
- const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
385
- 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);
386
435
  } else {
387
- model.replaceData(after);
436
+ return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
388
437
  }
438
+ } catch (e) {
439
+ return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
389
440
  }
390
- }, {
391
- immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
392
- deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
393
- 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
+ });
394
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);
395
549
  });
396
550
  }
397
- } else {
398
551
  setTimeout(async () => {
399
- var _a2;
400
- const [data] = await Promise.all([
401
- isAsyncFunctionData ? props.data() : props.data,
402
- (_a2 = defer.value) != null ? _a2 : true
403
- ]);
404
- watchDataProp(data);
552
+ var _a3;
553
+ isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
405
554
  });
406
- }
407
- setTimeout(async () => {
408
- var _a2;
409
- isReady.value = (_a2 = await defer.value) != null ? _a2 : true;
410
- });
411
- component.value = [access(component)].reduce((options, parent) => {
412
- var _a2;
413
- while (parent) {
414
- if (typeof parent.setup === "function") {
415
- options = { parent: options, self: (_a2 = parent.setup(component, options)) != null ? _a2 : {} };
416
- if (access(parent.$parent).ReactiveView) {
417
- 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
+ }
418
565
  } else {
419
- parent = access(parent.$parent);
566
+ break;
420
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);
421
576
  } else {
422
- break;
577
+ return (_b3 = (_a3 = context.slots).loading) == null ? void 0 : _b3.call(_a3, { component });
423
578
  }
424
- }
425
- return options;
426
- }, component.value);
427
- props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
428
- return (vue2) => {
429
- var _a2, _b2;
430
- if (isReady.value) {
431
- return access(component).template(component, vue2);
432
- } else {
433
- return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });
434
- }
579
+ };
435
580
  };
581
+ return props.beta === "next" ? beta() : current();
436
582
  }
437
583
  };
438
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.31";
134
+ var version = "0.0.34-beta.32";
135
135
 
136
136
  // src/ReactiveView.ts
137
137
  var setup = {
@@ -142,7 +142,7 @@ 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
@@ -151,7 +151,7 @@ var ReactiveView_default = {
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,201 +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
- const emit = (after, before) => {
212
- if (vue && vue.vnode.el) {
213
- const event = new CustomEvent("data:emit", {
214
- bubbles: true,
215
- // Key: allows it to travel up
216
- composed: true,
217
- // Key: allows it to cross Shadow DOM boundaries
218
- detail: { before, after }
219
- // Payload goes here
220
- });
221
- vue.vnode.el.dispatchEvent(event);
222
- }
223
- };
224
210
  if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
225
- 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);
226
212
  }
227
213
  const defaultData = props.getDefaultData(
228
- "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)) ? [] : {} : {}
229
215
  );
230
216
  const datatype = Array.isArray(defaultData) ? [] : {};
231
- const normalize = (data) => {
232
- if (props.debug) {
233
- console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, isRef: isRef(data), isReactive: isReactive(data) });
234
- }
235
- if (isReactive(data)) {
236
- return data;
237
- } else {
238
- if (isRef(data) || isFunctionData || isPromiseData) {
239
- 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);
240
262
  } else {
241
263
  const props2 = "data" in vue.vnode.props;
242
264
  try {
243
265
  if (["Array", "Object"].includes(data.constructor.name)) {
244
- return reactive(props2 ? data : datatype);
266
+ return reactive(datatype2);
245
267
  } else {
246
- return reactive(props2 ? { "": data } : datatype);
268
+ return reactive(props2 ? { "": datatype2 } : datatype2);
247
269
  }
248
270
  } catch (e) {
249
- return reactive(props2 ? { "": data } : datatype);
271
+ return reactive(props2 ? { "": datatype2 } : datatype2);
250
272
  }
251
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
+ });
252
303
  }
253
- };
254
- const config = {
255
- data: props.beta ? normalize((_d = vue.vnode.props) == null ? void 0 : _d.data) : reactive(ObjectManager.on(
256
- isPromiseData || isFunctionData || isRef(props.data) || isReactive(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
257
- ).clone()),
258
- defaultData: ObjectManager.on(defaultData).clone(),
259
- notifications: props.notifications,
260
- subscriptions: props.subscriptions,
261
- name: props.modelName,
262
- logging: props.logging
263
- };
264
- const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config), {
265
- get(target, key, receiver) {
266
- if (["setData", "replaceData"].includes(key.toString())) {
267
- return (...params) => {
268
- var _a2;
269
- const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
270
- if (typeof beforeSetData === "function") {
271
- const before = ObjectManager.on(target.getData());
272
- const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
273
- if (beforeSetData(access(component).diff(before, after), target)) {
274
- target[key](...params);
275
- }
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;
276
341
  } else {
277
- target[key](...params);
342
+ parent = access(parent.$parent);
278
343
  }
279
- return target;
280
- };
281
- } else {
282
- return Reflect.get(target, key, receiver);
344
+ } else {
345
+ break;
346
+ }
283
347
  }
284
- }
285
- });
286
- const component = ref({ parent: { self: vue.proxy }, self: { template, model, diff, emit, dataPath: dataPath2, isValid } });
287
- if (props.debug) {
288
- console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
289
- }
290
- const watchDataProp = (dataProp) => {
291
- var _a2, _b2, _c2, _d2;
292
- const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
293
- callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
294
- options: Object.assign(__spreadValues(__spreadValues({
295
- deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true
296
- }, 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)
297
- };
298
- if (context.attrs["data:log"]) {
299
- console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
300
- }
301
- watch(isFunctionData || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
302
- var _a3;
303
- if (typeof config2.callback === "function") {
304
- 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);
305
355
  } else {
306
- model.replaceData(after);
356
+ return (_b2 = (_a3 = context.slots).loading) == null ? void 0 : _b2.call(_a3, { component });
307
357
  }
308
- }, config2.options);
358
+ };
309
359
  };
310
- if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
311
- const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
312
- callback: context.attrs["onUpdate:model"],
313
- options: Object.assign(__spreadValues(__spreadValues({
314
- deep: (_e = context.attrs["model:deep"]) != null ? _e : true
315
- }, 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)
316
- } : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
317
- if (context.attrs["model:log"]) {
318
- console.warn(`[ReactiveView]:model`, { config: config2 });
319
- }
320
- watch(() => ObjectManager.on(model.getData()).clone(), (after, before) => {
321
- config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
322
- }, config2.options);
323
- }
324
- if (props.beta) {
325
- const isRefData = isRef(props.data);
326
- if (isRefData || isFunctionData || isPromiseData) {
327
- setTimeout(async () => {
328
- var _a2, _b2, _c2;
329
- const [data] = isPromiseData ? await Promise.all([
330
- isAsyncFunctionData ? props.data() : props.data,
331
- (_a2 = defer.value) != null ? _a2 : true
332
- ]) : [props.data];
333
- watch(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
334
- var _a3;
335
- if (before !== void 0 || after !== void 0) {
336
- const callback = context.attrs["data:callback"];
337
- if (typeof callback === "function") {
338
- const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
339
- 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);
340
389
  } else {
341
- model.replaceData(after);
390
+ return reactive(props2 ? { "": data } : datatype);
342
391
  }
392
+ } catch (e) {
393
+ return reactive(props2 ? { "": data } : datatype);
343
394
  }
344
- }, {
345
- immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
346
- deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
347
- 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
+ });
348
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);
349
503
  });
350
504
  }
351
- } else {
352
505
  setTimeout(async () => {
353
- var _a2;
354
- const [data] = await Promise.all([
355
- isAsyncFunctionData ? props.data() : props.data,
356
- (_a2 = defer.value) != null ? _a2 : true
357
- ]);
358
- watchDataProp(data);
506
+ var _a3;
507
+ isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
359
508
  });
360
- }
361
- setTimeout(async () => {
362
- var _a2;
363
- isReady.value = (_a2 = await defer.value) != null ? _a2 : true;
364
- });
365
- component.value = [access(component)].reduce((options, parent) => {
366
- var _a2;
367
- while (parent) {
368
- if (typeof parent.setup === "function") {
369
- options = { parent: options, self: (_a2 = parent.setup(component, options)) != null ? _a2 : {} };
370
- if (access(parent.$parent).ReactiveView) {
371
- 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
+ }
372
519
  } else {
373
- parent = access(parent.$parent);
520
+ break;
374
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);
375
530
  } else {
376
- break;
531
+ return (_b3 = (_a3 = context.slots).loading) == null ? void 0 : _b3.call(_a3, { component });
377
532
  }
378
- }
379
- return options;
380
- }, component.value);
381
- props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
382
- return (vue2) => {
383
- var _a2, _b2;
384
- if (isReady.value) {
385
- return access(component).template(component, vue2);
386
- } else {
387
- return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });
388
- }
533
+ };
389
534
  };
535
+ return props.beta === "next" ? beta() : current();
390
536
  }
391
537
  };
392
538
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@razaman2/reactive-view",
3
- "version": "0.0.34-beta.31",
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",