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

package/dist/index.cjs

@@ -9,36 +9,37 @@ const progressPlugin = require('@hybridly/progress-plugin');
 const devtoolsApi = require('@vue/devtools-api');
 const qs = require('qs');
 const isEqual = require('lodash.isequal');
-const clone = require('lodash.clonedeep');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
 const qs__default = /*#__PURE__*/_interopDefaultLegacy(qs);
 const isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
-const clone__default = /*#__PURE__*/_interopDefaultLegacy(clone);
 
 const state = {
   context: vue.ref(),
   view: vue.shallowRef(),
+  properties: vue.ref(),
   viewLayout: vue.shallowRef(),
+  viewLayoutProperties: vue.ref(),
   viewKey: vue.ref(),
   dialog: vue.shallowRef(),
   dialogKey: vue.ref(),
-  routes: vue.ref(),
-  setRoutes(routes) {
-    utils.debug.adapter("vue:state:routes", "Setting routes:", routes);
-    if (routes) {
-      state.routes.value = vue.unref(routes);
-    }
-  },
   setView(view) {
     utils.debug.adapter("vue:state:view", "Setting view:", view);
     state.view.value = view;
   },
+  setProperties(properties) {
+    utils.debug.adapter("vue:state:view", "Setting properties:", properties);
+    state.properties.value = properties;
+  },
   setViewLayout(layout) {
-    utils.debug.adapter("vue:state:view", "Setting layout:", layout);
+    utils.debug.adapter("vue:state:view", "Setting layout", layout);
     state.viewLayout.value = layout;
   },
+  setViewLayoutProperties(properties) {
+    utils.debug.adapter("vue:state:view", "Setting layout properties:", properties);
+    state.viewLayoutProperties.value = properties;
+  },
   setDialog(dialog) {
     utils.debug.adapter("vue:state:dialog", "Setting dialog:", dialog);
     state.dialog.value = dialog;
@@ -60,13 +61,7 @@ const state = {
 
 const wrapper = vue.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) {
       utils.debug.adapter("vue:render:layout", "Rendering layout.");
       if (typeof state.view.value?.layout === "function") {
@@ -75,11 +70,17 @@ const wrapper = vue.defineComponent({
       if (Array.isArray(state.view.value?.layout)) {
         return state.view.value.layout.concat(child).reverse().reduce((child2, layout) => {
           layout.inheritAttrs = !!layout.inheritAttrs;
-          return vue.h(layout, { ...state.context.value.view.properties }, () => child2);
+          return vue.h(layout, {
+            ...state.view.value?.layoutProperties ?? {},
+            ...state.properties.value
+          }, () => child2);
         });
       }
       return [
-        vue.h(state.view.value?.layout, { ...state.context.value.view.properties }, () => child),
+        vue.h(state.view.value?.layout, {
+          ...state.view.value?.layoutProperties ?? {},
+          ...state.properties.value
+        }, () => child),
         renderDialog()
       ];
     }
@@ -87,7 +88,7 @@ const wrapper = vue.defineComponent({
       utils.debug.adapter("vue:render:view", "Rendering view.");
       state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
       return vue.h(state.view.value, {
-        ...state.context.value.view.properties,
+        ...state.properties.value,
         key: state.viewKey.value
       });
     }
@@ -100,25 +101,24 @@ const wrapper = vue.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;
+      }
+      utils.debug.adapter("vue:render:wrapper", "Rendering wrapper component.", a.map(vue.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
-    }
   }
 });
 
@@ -160,8 +160,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) => {
@@ -177,7 +177,7 @@ function setupDevtools(app) {
     const listen = [
       "start",
       "data",
-      "navigate",
+      "navigated",
       "progress",
       "error",
       "abort",
@@ -198,7 +198,7 @@ function setupDevtools(app) {
           data: options
         }
       });
-      listen.forEach((event) => core.registerHookOnce(event, (data) => {
+      listen.forEach((event) => core.registerHook(event, (data) => {
         api.addTimelineEvent({
           layerId: hybridlyEventsTimelineLayerId,
           event: {
@@ -214,11 +214,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);
@@ -235,6 +235,7 @@ async function initializeHybridly(options) {
     throw new Error("No payload. Are you using `@hybridly` or the `payload` option?");
   }
   state.setContext(await core.createRouter({
+    axios: options.axios,
     plugins: options.plugins,
     serializer: options.serializer,
     adapter: {
@@ -243,6 +244,7 @@ async function initializeHybridly(options) {
       },
       swapView: async (options2) => {
         state.setView(options2.component);
+        state.setProperties(options2.properties);
         if (!options2.preserveState) {
           state.setViewKey(Date.now());
         }
@@ -253,13 +255,28 @@ async function initializeHybridly(options) {
     },
     payload
   }));
-  await options.setup({
-    element,
-    wrapper,
-    hybridly: plugin,
-    props: { context: state.context.value },
-    render: () => vue.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 = () => vue.h(wrapper);
+  if (options.setup) {
+    return await options.setup({
+      element,
+      wrapper,
+      render,
+      hybridly: devtools,
+      props: { context: state.context.value }
+    });
+  }
+  const app = vue.createApp({ render });
+  if (options.devtools !== false) {
+    app.use(devtools);
+  }
+  await options.enhanceVue?.(app);
+  return app.mount(element);
 }
 function prepare(options) {
   utils.debug.adapter("vue", "Preparing Hybridly with options:", options);
@@ -283,15 +300,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 = [
       progressPlugin.progress(typeof options.progress === "object" ? options.progress : {}),
@@ -306,6 +314,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) {
     utils.showPageComponentErrorModal(name);
@@ -324,7 +336,7 @@ const RouterLink = vue.defineComponent({
     return (props) => {
       let data = props.data ?? {};
       const url = core.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") {
         utils.debug.adapter("vue", "Moving data object to URL parameters.");
@@ -356,7 +368,7 @@ Please specify a more appropriate element using the "as" attribute. For example:
           if (props.disabled) {
             return;
           }
-          core.router.visit({
+          core.router.navigate({
             url,
             data,
             method,
@@ -364,13 +376,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],
@@ -395,6 +408,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
     }
   }
 });
@@ -406,6 +424,7 @@ function shouldIntercept(event) {
 const HybridlyImports = {
   "hybridly/vue": [
     "useProperty",
+    "useTypedProperty",
     "useProperties",
     "useRouter",
     "useBackForward",
@@ -413,13 +432,14 @@ const HybridlyImports = {
     "useForm",
     "useHistoryState",
     "usePaginator",
-    "useLayout",
-    "route"
+    "defineLayout",
+    "defineLayoutProperties",
+    "registerHook"
   ],
   "hybridly": [
-    "registerHook",
-    "registerHookOnce",
     "router",
+    "route",
+    "current",
     "can"
   ]
 };
@@ -481,31 +501,34 @@ function toReactive(objectRef) {
 function useProperties() {
   return vue.readonly(toReactive(vue.computed(() => state.context.value?.view.properties)));
 }
+function useTypedProperty(path, fallback) {
+  return vue.computed(
+    () => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback
+  );
+}
 function useProperty(path, fallback) {
-  return vue.computed(() => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback);
+  return vue.computed(
+    () => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback
+  );
 }
 
 function useContext() {
   return vue.computed(() => state.context.value);
 }
 
-function useRouter() {
-  return core.router;
-}
-
 function safeClone(obj) {
-  return clone__default(vue.toRaw(obj));
+  return utils.clone(vue.toRaw(obj));
 }
 function useForm(options) {
-  const shouldRemember = options?.key !== false;
+  const shouldRemember = !!options?.key;
   const historyKey = options?.key ?? "form:default";
   const historyData = shouldRemember ? core.router.history.get(historyKey) : void 0;
   const timeoutIds = {
     recentlyFailed: void 0,
     recentlySuccessful: void 0
   };
-  const initial = vue.readonly(safeClone(options.fields));
-  const loaded = vue.readonly(safeClone(historyData?.fields ?? options.fields));
+  const initial = safeClone(options.fields);
+  const loaded = safeClone(historyData?.fields ?? options.fields);
   const fields = vue.reactive(safeClone(historyData?.fields ?? options.fields));
   const errors = vue.ref(historyData?.errors ?? {});
   const isDirty = vue.ref(false);
@@ -514,61 +537,85 @@ function useForm(options) {
   const recentlyFailed = vue.ref(false);
   const failed = vue.ref(false);
   const processing = vue.ref(false);
+  const progress = vue.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 core.router.visit({
+    const preserveState = optionsOverrides?.preserveState ?? options.preserveState;
+    return core.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__default(vue.toRaw(fields[key]), vue.toRaw(initial[key])));
+  }
+  function clearError(key) {
+    errors.value[key] = void 0;
   }
   function setErrors(incoming) {
     errors.value = incoming;
@@ -587,21 +634,25 @@ function useForm(options) {
   }, { deep: true, immediate: true });
   return vue.reactive({
     reset,
-    initial,
     fields,
-    loaded,
-    submit,
     abort,
     setErrors,
     clearErrors,
+    clearError,
+    hasDirty,
+    submitWithOptions: submit,
+    submit: () => submit(),
     hasErrors: vue.computed(() => Object.values(errors.value).length > 0),
-    isDirty: vue.readonly(isDirty),
-    errors: vue.readonly(errors),
-    processing: vue.readonly(processing),
-    successful: vue.readonly(successful),
-    failed: vue.readonly(failed),
-    recentlySuccessful: vue.readonly(recentlySuccessful),
-    recentlyFailed: vue.readonly(recentlyFailed)
+    initial,
+    loaded,
+    progress,
+    isDirty,
+    errors,
+    processing,
+    successful,
+    failed,
+    recentlySuccessful,
+    recentlyFailed
   });
 }
 
@@ -615,7 +666,7 @@ function useHistoryState(key, initial) {
 
 function useBackForward() {
   const callbacks = [];
-  core.registerHook("navigate", (options) => {
+  core.registerHook("navigated", (options) => {
     if (options.isBackForward) {
       callbacks.forEach((fn) => fn(state.context.value));
       callbacks.splice(0, callbacks.length);
@@ -660,146 +711,40 @@ 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: qs.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) + qs.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 = core.registerHook(hook, fn, options);
+  if (vue.getCurrentInstance()) {
+    vue.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;
+};
 
+exports.can = core.can;
+exports.route = core.route;
 exports.router = core.router;
 exports.HybridlyImports = HybridlyImports;
 exports.HybridlyResolver = HybridlyResolver;
 exports.RouterLink = RouterLink;
+exports.defineLayout = defineLayout;
+exports.defineLayoutProperties = defineLayoutProperties;
 exports.initializeHybridly = initializeHybridly;
-exports.route = route;
+exports.registerHook = registerHook;
+exports.resolvePageComponent = resolvePageComponent;
 exports.useBackForward = useBackForward;
 exports.useContext = useContext;
 exports.useForm = useForm;
 exports.useHistoryState = useHistoryState;
-exports.useLayout = useLayout;
 exports.usePaginator = usePaginator;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
-exports.useRouter = useRouter;
+exports.useTypedProperty = useTypedProperty;