@hybridly/vue 0.0.1-alpha.2 → 0.0.1-alpha.20

package/dist/index.mjs

@@ -1,35 +1,37 @@
-import { ref, shallowRef, unref, triggerRef, defineComponent, h, isRef, reactive, readonly, computed, toRaw, watch } from 'vue';
-import { registerHook, registerHookOnce, createRouter, makeUrl, router } from '@hybridly/core';
-export { router } from '@hybridly/core';
-import { debug, showPageComponentErrorModal, merge } from '@hybridly/utils';
+import { ref, shallowRef, unref, triggerRef, defineComponent, toRaw, h, createApp, isRef, reactive, readonly, computed, watch, getCurrentInstance, onUnmounted } from 'vue';
+import { registerHook as registerHook$1, createRouter, makeUrl, router } from '@hybridly/core';
+export { can, route, router } from '@hybridly/core';
+import { debug, showPageComponentErrorModal, merge, clone } from '@hybridly/utils';
 import { progress } from '@hybridly/progress-plugin';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
-import qs, { parse, stringify } from 'qs';
+import qs from 'qs';
 import isEqual from 'lodash.isequal';
-import clone from 'lodash.clonedeep';
 
 const state = {
   context: ref(),
   view: shallowRef(),
+  properties: ref(),
   viewLayout: shallowRef(),
+  viewLayoutProperties: ref(),
   viewKey: ref(),
   dialog: shallowRef(),
   dialogKey: ref(),
-  routes: ref(),
-  setRoutes(routes) {
-    debug.adapter("vue:state:routes", "Setting routes:", routes);
-    if (routes) {
-      state.routes.value = unref(routes);
-    }
-  },
   setView(view) {
     debug.adapter("vue:state:view", "Setting view:", view);
     state.view.value = view;
   },
+  setProperties(properties) {
+    debug.adapter("vue:state:view", "Setting properties:", properties);
+    state.properties.value = properties;
+  },
   setViewLayout(layout) {
-    debug.adapter("vue:state:view", "Setting layout:", layout);
+    debug.adapter("vue:state:view", "Setting layout", layout);
     state.viewLayout.value = layout;
   },
+  setViewLayoutProperties(properties) {
+    debug.adapter("vue:state:view", "Setting layout properties:", properties);
+    state.viewLayoutProperties.value = properties;
+  },
   setDialog(dialog) {
     debug.adapter("vue:state:dialog", "Setting dialog:", dialog);
     state.dialog.value = dialog;
@@ -51,13 +53,7 @@ const state = {
 
 const wrapper = defineComponent({
   name: "Hybridly",
-  setup(props) {
-    if (typeof window !== "undefined") {
-      state.setContext(props.context);
-      if (!props.context) {
-        throw new Error("Hybridly was not properly initialized. The context is missing.");
-      }
-    }
+  setup() {
     function renderLayout(child) {
       debug.adapter("vue:render:layout", "Rendering layout.");
       if (typeof state.view.value?.layout === "function") {
@@ -66,11 +62,17 @@ const wrapper = defineComponent({
       if (Array.isArray(state.view.value?.layout)) {
         return state.view.value.layout.concat(child).reverse().reduce((child2, layout) => {
           layout.inheritAttrs = !!layout.inheritAttrs;
-          return h(layout, { ...state.context.value.view.properties }, () => child2);
+          return h(layout, {
+            ...state.view.value?.layoutProperties ?? {},
+            ...state.properties.value
+          }, () => child2);
         });
       }
       return [
-        h(state.view.value?.layout, { ...state.context.value.view.properties }, () => child),
+        h(state.view.value?.layout, {
+          ...state.view.value?.layoutProperties ?? {},
+          ...state.properties.value
+        }, () => child),
         renderDialog()
       ];
     }
@@ -78,7 +80,7 @@ const wrapper = defineComponent({
       debug.adapter("vue:render:view", "Rendering view.");
       state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
       return h(state.view.value, {
-        ...state.context.value.view.properties,
+        ...state.properties.value,
         key: state.viewKey.value
       });
     }
@@ -91,25 +93,24 @@ const wrapper = defineComponent({
         });
       }
     }
-    return () => {
-      if (state.view.value) {
-        const view = renderView();
-        if (state.viewLayout.value) {
-          state.view.value.layout = state.viewLayout.value;
-          state.viewLayout.value = void 0;
-        }
-        if (state.view.value.layout) {
-          return renderLayout(view);
-        }
-        return [view, renderDialog()];
+    return (...a) => {
+      if (!state.view.value) {
+        return;
+      }
+      debug.adapter("vue:render:wrapper", "Rendering wrapper component.", a.map(toRaw));
+      const view = renderView();
+      if (state.viewLayout.value) {
+        state.view.value.layout = state.viewLayout.value;
+      }
+      if (state.viewLayoutProperties.value) {
+        state.view.value.layoutProperties = state.viewLayoutProperties.value;
+        state.viewLayoutProperties.value = void 0;
+      }
+      if (state.view.value.layout) {
+        return renderLayout(view);
       }
+      return [view, renderDialog()];
     };
-  },
-  props: {
-    context: {
-      type: Object,
-      required: true
-    }
   }
 });
 
@@ -151,8 +152,8 @@ function setupDevtools(app) {
       });
       payload.instanceData.state.push({
         type: hybridlyStateType,
-        key: "router",
-        value: state.routes.value
+        key: "routing",
+        value: state.context.value?.routing
       });
     });
     api.on.editComponentState((payload) => {
@@ -168,7 +169,7 @@ function setupDevtools(app) {
     const listen = [
       "start",
       "data",
-      "navigate",
+      "navigated",
       "progress",
       "error",
       "abort",
@@ -178,7 +179,7 @@ function setupDevtools(app) {
       "fail",
       "after"
     ];
-    registerHook("before", (options) => {
+    registerHook$1("before", (options) => {
       const groupId = (Math.random() + 1).toString(36).substring(7);
       api.addTimelineEvent({
         layerId: hybridlyEventsTimelineLayerId,
@@ -189,7 +190,7 @@ function setupDevtools(app) {
           data: options
         }
       });
-      listen.forEach((event) => registerHookOnce(event, (data) => {
+      listen.forEach((event) => registerHook$1(event, (data) => {
         api.addTimelineEvent({
           layerId: hybridlyEventsTimelineLayerId,
           event: {
@@ -205,11 +206,11 @@ function setupDevtools(app) {
             api.notifyComponentUpdate();
           }, 100);
         }
-      }));
+      }, { once: true }));
     });
   });
 }
-const plugin = {
+const devtools = {
   install(app) {
     if (process.env.NODE_ENV === "development" || __VUE_PROD_DEVTOOLS__) {
       setupDevtools(app);
@@ -226,6 +227,7 @@ async function initializeHybridly(options) {
     throw new Error("No payload. Are you using `@hybridly` or the `payload` option?");
   }
   state.setContext(await createRouter({
+    axios: options.axios,
     plugins: options.plugins,
     serializer: options.serializer,
     adapter: {
@@ -234,6 +236,7 @@ async function initializeHybridly(options) {
       },
       swapView: async (options2) => {
         state.setView(options2.component);
+        state.setProperties(options2.properties);
         if (!options2.preserveState) {
           state.setViewKey(Date.now());
         }
@@ -244,13 +247,28 @@ async function initializeHybridly(options) {
     },
     payload
   }));
-  await options.setup({
-    element,
-    wrapper,
-    hybridly: plugin,
-    props: { context: state.context.value },
-    render: () => h(wrapper, { context: state.context.value })
-  });
+  if (typeof window !== "undefined") {
+    window.addEventListener("hybridly:routing", (event) => {
+      state.context.value?.adapter.updateRoutingConfiguration(event.detail);
+    });
+    window.dispatchEvent(new CustomEvent("hybridly:routing", { detail: window?.hybridly?.routing }));
+  }
+  const render = () => h(wrapper);
+  if (options.setup) {
+    return await options.setup({
+      element,
+      wrapper,
+      render,
+      hybridly: devtools,
+      props: { context: state.context.value }
+    });
+  }
+  const app = createApp({ render });
+  if (options.devtools !== false) {
+    app.use(devtools);
+  }
+  await options.enhanceVue?.(app);
+  return app.mount(element);
 }
 function prepare(options) {
   debug.adapter("vue", "Preparing Hybridly with options:", options);
@@ -274,15 +292,6 @@ function prepare(options) {
     }
     throw new Error("Either `initializeHybridly#resolve` or `initializeHybridly#pages` should be defined.");
   };
-  if (typeof window !== "undefined") {
-    const routes = window.hybridly?.routes;
-    if (routes) {
-      state.setRoutes(window.hybridly?.routes);
-      window.addEventListener("hybridly:routes", (event) => {
-        state.setRoutes(event.detail);
-      });
-    }
-  }
   if (options.progress !== false) {
     options.plugins = [
       progress(typeof options.progress === "object" ? options.progress : {}),
@@ -297,6 +306,10 @@ function prepare(options) {
   };
 }
 async function resolvePageComponent(name, pages, defaultLayout) {
+  if (name.includes(":")) {
+    const [domain, page] = name.split(":");
+    name = `domains.${domain}.pages.${page}`;
+  }
   const path = Object.keys(pages).sort((a, b) => a.length - b.length).find((path2) => path2.endsWith(`${name.replaceAll(".", "/")}.vue`));
   if (!path) {
     showPageComponentErrorModal(name);
@@ -315,7 +328,7 @@ const RouterLink = defineComponent({
     return (props) => {
       let data = props.data ?? {};
       const url = makeUrl(props.href ?? "");
-      const method = props.method ?? "GET";
+      const method = props.method?.toUpperCase() ?? "GET";
       const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
       if (method === "GET") {
         debug.adapter("vue", "Moving data object to URL parameters.");
@@ -347,7 +360,7 @@ Please specify a more appropriate element using the "as" attribute. For example:
           if (props.disabled) {
             return;
           }
-          router.visit({
+          router.navigate({
             url,
             data,
             method,
@@ -355,13 +368,14 @@ Please specify a more appropriate element using the "as" attribute. For example:
             ...props.options
           });
         }
-      }, slots);
+      }, slots.default ? slots : props.text);
     };
   },
   props: {
     href: {
       type: String,
-      required: true
+      required: false,
+      default: void 0
     },
     as: {
       type: [String, Object],
@@ -386,6 +400,11 @@ Please specify a more appropriate element using the "as" attribute. For example:
     options: {
       type: Object,
       default: () => ({})
+    },
+    text: {
+      type: String,
+      required: false,
+      default: void 0
     }
   }
 });
@@ -397,6 +416,7 @@ function shouldIntercept(event) {
 const HybridlyImports = {
   "hybridly/vue": [
     "useProperty",
+    "useTypedProperty",
     "useProperties",
     "useRouter",
     "useBackForward",
@@ -404,13 +424,14 @@ const HybridlyImports = {
     "useForm",
     "useHistoryState",
     "usePaginator",
-    "useLayout",
-    "route"
+    "defineLayout",
+    "defineLayoutProperties",
+    "registerHook"
   ],
   "hybridly": [
-    "registerHook",
-    "registerHookOnce",
     "router",
+    "route",
+    "current",
     "can"
   ]
 };
@@ -472,31 +493,34 @@ function toReactive(objectRef) {
 function useProperties() {
   return readonly(toReactive(computed(() => state.context.value?.view.properties)));
 }
+function useTypedProperty(path, fallback) {
+  return computed(
+    () => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback
+  );
+}
 function useProperty(path, fallback) {
-  return computed(() => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback);
+  return computed(
+    () => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback
+  );
 }
 
 function useContext() {
   return computed(() => state.context.value);
 }
 
-function useRouter() {
-  return router;
-}
-
 function safeClone(obj) {
   return clone(toRaw(obj));
 }
 function useForm(options) {
-  const shouldRemember = options?.key !== false;
+  const shouldRemember = !!options?.key;
   const historyKey = options?.key ?? "form:default";
   const historyData = shouldRemember ? router.history.get(historyKey) : void 0;
   const timeoutIds = {
     recentlyFailed: void 0,
     recentlySuccessful: void 0
   };
-  const initial = readonly(safeClone(options.fields));
-  const loaded = readonly(safeClone(historyData?.fields ?? options.fields));
+  const initial = safeClone(options.fields);
+  const loaded = safeClone(historyData?.fields ?? options.fields);
   const fields = reactive(safeClone(historyData?.fields ?? options.fields));
   const errors = ref(historyData?.errors ?? {});
   const isDirty = ref(false);
@@ -505,61 +529,85 @@ function useForm(options) {
   const recentlyFailed = ref(false);
   const failed = ref(false);
   const processing = ref(false);
+  const progress = ref();
   function reset(...keys) {
     if (keys.length === 0) {
       keys = Object.keys(fields);
     }
-    keys.forEach((key) => Reflect.set(fields, key, safeClone(Reflect.get(initial, key))));
-    clearErrors();
+    keys.forEach((key) => {
+      Reflect.set(fields, key, safeClone(Reflect.get(initial, key)));
+      clearError(key);
+    });
   }
   function submit(optionsOverrides) {
     const url = typeof options.url === "function" ? options.url() : options.url;
     const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
-    return router.visit({
+    const preserveState = optionsOverrides?.preserveState ?? options.preserveState;
+    return router.navigate({
+      ...options,
       url: url ?? state.context.value?.url,
       method: options.method ?? "POST",
       ...optionsOverrides,
       data: safeClone(data),
-      preserveState: optionsOverrides?.preserveState === void 0 && options.method !== "GET" ? true : optionsOverrides?.preserveState,
+      preserveState: preserveState === void 0 && options.method !== "GET" ? true : preserveState,
       hooks: {
-        before: (visit) => {
+        before: (navigation, context) => {
           failed.value = false;
           successful.value = false;
           recentlySuccessful.value = false;
           clearTimeout(timeoutIds.recentlySuccessful);
           clearTimeout(timeoutIds.recentlyFailed);
-          clearErrors();
-          return options.hooks?.before?.(visit);
+          return options.hooks?.before?.(navigation, context);
         },
         start: (context) => {
           processing.value = true;
           return options.hooks?.start?.(context);
         },
-        error: (incoming) => {
+        progress: (incoming, context) => {
+          progress.value = incoming;
+          return options.hooks?.progress?.(incoming, context);
+        },
+        error: (incoming, context) => {
           setErrors(incoming);
           failed.value = true;
           recentlyFailed.value = true;
           timeoutIds.recentlyFailed = setTimeout(() => recentlyFailed.value = false, options?.timeout ?? 5e3);
-          return options.hooks?.error?.(incoming);
+          return options.hooks?.error?.(incoming, context);
         },
-        success: (payload) => {
+        success: (payload, context) => {
+          clearErrors();
           if (options?.reset !== false) {
             reset();
           }
           successful.value = true;
           recentlySuccessful.value = true;
           timeoutIds.recentlySuccessful = setTimeout(() => recentlySuccessful.value = false, options?.timeout ?? 5e3);
-          return options.hooks?.success?.(payload);
+          return options.hooks?.success?.(payload, context);
         },
         after: (context) => {
+          progress.value = void 0;
           processing.value = false;
           return options.hooks?.after?.(context);
         }
       }
     });
   }
-  function clearErrors() {
-    errors.value = {};
+  function clearErrors(...keys) {
+    if (keys.length === 0) {
+      keys = Object.keys(fields);
+    }
+    keys.forEach((key) => {
+      clearError(key);
+    });
+  }
+  function hasDirty(...keys) {
+    if (keys.length === 0) {
+      return isDirty.value;
+    }
+    return keys.some((key) => !isEqual(toRaw(fields[key]), toRaw(initial[key])));
+  }
+  function clearError(key) {
+    errors.value[key] = void 0;
   }
   function setErrors(incoming) {
     errors.value = incoming;
@@ -578,21 +626,25 @@ function useForm(options) {
   }, { deep: true, immediate: true });
   return reactive({
     reset,
-    initial,
     fields,
-    loaded,
-    submit,
     abort,
     setErrors,
     clearErrors,
+    clearError,
+    hasDirty,
+    submitWithOptions: submit,
+    submit: () => submit(),
     hasErrors: computed(() => Object.values(errors.value).length > 0),
-    isDirty: readonly(isDirty),
-    errors: readonly(errors),
-    processing: readonly(processing),
-    successful: readonly(successful),
-    failed: readonly(failed),
-    recentlySuccessful: readonly(recentlySuccessful),
-    recentlyFailed: readonly(recentlyFailed)
+    initial,
+    loaded,
+    progress,
+    isDirty,
+    errors,
+    processing,
+    successful,
+    failed,
+    recentlySuccessful,
+    recentlyFailed
   });
 }
 
@@ -606,7 +658,7 @@ function useHistoryState(key, initial) {
 
 function useBackForward() {
   const callbacks = [];
-  registerHook("navigate", (options) => {
+  registerHook$1("navigated", (options) => {
     if (options.isBackForward) {
       callbacks.forEach((fn) => fn(state.context.value));
       callbacks.splice(0, callbacks.length);
@@ -651,132 +703,22 @@ function usePaginator(paginator) {
   return { pages, items, previous, next, first, last, total, from, to };
 }
 
-function useLayout(layout) {
-  state.setViewLayout(layout);
+function defineLayout(...args) {
+  const layouts = args[0];
+  const properties = args[1];
+  state.setViewLayout(layouts);
+  state.setViewLayoutProperties(properties);
 }
-
-class Route {
-  constructor(name, absolute) {
-    this.name = name;
-    this.absolute = absolute;
-    this.definition = Route.getDefinition(name);
-  }
-  static getDefinition(name) {
-    if (!state.routes.value) {
-      throw new Error("Routing is not initialized. Have you enabled the Vite plugin?");
-    }
-    const routes = state.routes.value;
-    const route = routes?.routes?.[name];
-    if (!route) {
-      throw new Error(`Route ${name.toString()} does not exist.`);
-    }
-    return route;
-  }
-  get template() {
-    const origin = !this.absolute ? "" : this.definition.domain ? `${state.routes.value?.url.match(/^\w+:\/\//)?.[0]}${this.definition.domain}${state.routes.value?.port ? `:${state.routes.value?.port}` : ""}` : state.routes.value?.url;
-    return `${origin}/${this.definition.uri}`.replace(/\/+$/, "");
-  }
-  get parameterSegments() {
-    return this.template.match(/{[^}?]+\??}/g)?.map((segment) => ({
-      name: segment.replace(/{|\??}/g, ""),
-      required: !/\?}$/.test(segment)
-    })) ?? [];
-  }
-  matchesUrl(url) {
-    if (!this.definition.methods.includes("GET")) {
-      return false;
-    }
-    const pattern = this.template.replace(/(\/?){([^}?]*)(\??)}/g, (_, slash, segment, optional) => {
-      const regex = `(?<${segment}>${this.definition.wheres?.[segment]?.replace(/(^\^)|(\$$)/g, "") || "[^/?]+"})`;
-      return optional ? `(${slash}${regex})?` : `${slash}${regex}`;
-    }).replace(/^\w+:\/\//, "");
-    const [location, query] = url.replace(/^\w+:\/\//, "").split("?");
-    const matches = new RegExp(`^${pattern}/?$`).exec(location);
-    return matches ? { params: matches.groups, query: parse(query) } : false;
-  }
-  compile(params) {
-    const segments = this.parameterSegments;
-    if (!segments.length) {
-      return this.template;
-    }
-    return this.template.replace(/{([^}?]+)(\??)}/g, (_, segment, optional) => {
-      if (!optional && [null, void 0].includes(params?.[segment])) {
-        throw new Error(`Router error: [${segment}] parameter is required for route [${this.name}].`);
-      }
-      if (segments[segments.length - 1].name === segment && this.definition?.wheres?.[segment] === ".*") {
-        return encodeURIComponent(params[segment] ?? "").replace(/%2F/g, "/");
-      }
-      if (this.definition?.wheres?.[segment] && !new RegExp(`^${optional ? `(${this.definition?.wheres?.[segment]})?` : this.definition?.wheres?.[segment]}$`).test(params[segment] ?? "")) {
-        throw new Error(`Router error: [${segment}] parameter does not match required format [${this.definition?.wheres?.[segment]}] for route [${this.name}].`);
-      }
-      return encodeURIComponent(params[segment] ?? "");
-    }).replace(/\/+$/, "");
-  }
+function defineLayoutProperties(properties) {
+  state.setViewLayoutProperties(properties);
 }
 
-class Router extends String {
-  constructor(name, parameters, absolute = true) {
-    super();
-    this.route = new Route(name, absolute);
-    this.setParameters(parameters);
-  }
-  toString() {
-    const unhandled = Object.keys(this.parameters).filter((key) => !this.route.parameterSegments.some(({ name }) => name === key)).filter((key) => key !== "_query").reduce((result, current) => ({ ...result, [current]: this.parameters[current] }), {});
-    return this.route.compile(this.parameters) + stringify({ ...unhandled, ...this.parameters._query }, {
-      addQueryPrefix: true,
-      arrayFormat: "indices",
-      encodeValuesOnly: true,
-      skipNulls: true,
-      encoder: (value, encoder) => typeof value === "boolean" ? Number(value).toString() : encoder(value)
-    });
-  }
-  static has(name) {
-    try {
-      Route.getDefinition(name);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-  setParameters(parameters) {
-    this.parameters = parameters ?? {};
-    this.parameters = ["string", "number"].includes(typeof this.parameters) ? [this.parameters] : this.parameters;
-    const segments = this.route.parameterSegments.filter(({ name }) => !state.routes.value?.defaults[name]);
-    if (Array.isArray(this.parameters)) {
-      this.parameters = this.parameters.reduce((result, current, i) => segments[i] ? { ...result, [segments[i].name]: current } : typeof current === "object" ? { ...result, ...current } : { ...result, [current]: "" }, {});
-    } else if (segments.length === 1 && !this.parameters[segments[0].name] && (Reflect.has(this.parameters, Object.values(this.route.definition.bindings)[0]) || Reflect.has(this.parameters, "id"))) {
-      this.parameters = { [segments[0].name]: this.parameters };
-    }
-    this.parameters = {
-      ...this.getDefaults(),
-      ...this.substituteBindings()
-    };
+const registerHook = (hook, fn, options) => {
+  const unregister = registerHook$1(hook, fn, options);
+  if (getCurrentInstance()) {
+    onUnmounted(() => unregister());
   }
-  getDefaults() {
-    return this.route.parameterSegments.filter(({ name }) => state.routes.value?.defaults[name]).reduce((result, { name }) => ({ ...result, [name]: state.routes.value?.defaults[name] }), {});
-  }
-  substituteBindings() {
-    return Object.entries(this.parameters).reduce((result, [key, value]) => {
-      if (!value || typeof value !== "object" || Array.isArray(value) || !this.route.parameterSegments.some(({ name }) => name === key)) {
-        return { ...result, [key]: value };
-      }
-      if (!Reflect.has(value, this.route.definition.bindings[key])) {
-        if (Reflect.has(value, "id")) {
-          this.route.definition.bindings[key] = "id";
-        } else {
-          throw new Error(`Router error: object passed as [${key}] parameter is missing route model binding key [${this.route.definition.bindings?.[key]}].`);
-        }
-      }
-      return { ...result, [key]: value[this.route.definition.bindings[key]] };
-    }, {});
-  }
-  valueOf() {
-    return this.toString();
-  }
-}
-
-function route(name, parameters, absolute) {
-  return new Router(name, parameters, absolute).toString();
-}
+  return unregister;
+};
 
-export { HybridlyImports, HybridlyResolver, RouterLink, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, useLayout, usePaginator, useProperties, useProperty, useRouter };
+export { HybridlyImports, HybridlyResolver, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useTypedProperty };