@hybridly/vue 0.0.1-alpha.13 → 0.0.1-alpha.15

package/dist/index.cjs

@@ -23,13 +23,6 @@ const state = {
   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;
@@ -63,13 +56,12 @@ 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() {
+    const properties = vue.ref();
+    vue.watch(() => state.context.value?.view?.properties, (value) => {
+      utils.debug.adapter("vue:properties", "Updating properties.", vue.toRaw(value));
+      properties.value = value;
+    }, { immediate: true });
     function renderLayout(child) {
       utils.debug.adapter("vue:render:layout", "Rendering layout.");
       if (typeof state.view.value?.layout === "function") {
@@ -80,14 +72,14 @@ const wrapper = vue.defineComponent({
           layout.inheritAttrs = !!layout.inheritAttrs;
           return vue.h(layout, {
             ...state.view.value?.layoutProperties ?? {},
-            ...state.context.value.view.properties
+            ...properties.value
           }, () => child2);
         });
       }
       return [
         vue.h(state.view.value?.layout, {
           ...state.view.value?.layoutProperties ?? {},
-          ...state.context.value.view.properties
+          ...properties.value
         }, () => child),
         renderDialog()
       ];
@@ -96,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,
+        ...properties.value,
         key: state.viewKey.value
       });
     }
@@ -109,29 +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.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()];
+    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
-    }
   }
 });
 
@@ -173,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) => {
@@ -231,7 +218,7 @@ function setupDevtools(app) {
     });
   });
 }
-const plugin = {
+const devtools = {
   install(app) {
     if (process.env.NODE_ENV === "development" || __VUE_PROD_DEVTOOLS__) {
       setupDevtools(app);
@@ -267,18 +254,26 @@ async function initializeHybridly(options) {
     },
     payload
   }));
-  const 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: plugin,
+      hybridly: devtools,
       props: { context: state.context.value }
     });
   }
   const app = vue.createApp({ render });
-  app.use(plugin);
+  if (options.devtools !== false) {
+    app.use(devtools);
+  }
   await options.enhanceVue?.(app);
   return app.mount(element);
 }
@@ -304,14 +299,6 @@ function prepare(options) {
     }
     throw new Error("Either `initializeHybridly#resolve` or `initializeHybridly#pages` should be defined.");
   };
-  if (typeof window !== "undefined") {
-    state.setRoutes(window?.hybridly?.routes);
-    window.addEventListener("hybridly:routes", (event) => {
-      if (event.detail) {
-        state.setRoutes(event.detail);
-      }
-    });
-  }
   if (options.progress !== false) {
     options.plugins = [
       progressPlugin.progress(typeof options.progress === "object" ? options.progress : {}),
@@ -439,12 +426,12 @@ const HybridlyImports = {
     "useHistoryState",
     "usePaginator",
     "defineLayout",
-    "defineLayoutProperties",
-    "route"
+    "defineLayoutProperties"
   ],
   "hybridly": [
     "registerHook",
     "router",
+    "route",
     "can"
   ]
 };
@@ -521,7 +508,7 @@ function safeClone(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 = {
@@ -551,13 +538,14 @@ function useForm(options) {
   function submit(optionsOverrides) {
     const url = typeof options.url === "function" ? options.url() : options.url;
     const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
+    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: (navigation, context) => {
           failed.value = false;
@@ -565,7 +553,6 @@ function useForm(options) {
           recentlySuccessful.value = false;
           clearTimeout(timeoutIds.recentlySuccessful);
           clearTimeout(timeoutIds.recentlyFailed);
-          clearErrors();
           return options.hooks?.before?.(navigation, context);
         },
         start: (context) => {
@@ -584,6 +571,7 @@ function useForm(options) {
           return options.hooks?.error?.(incoming, context);
         },
         success: (payload, context) => {
+          clearErrors();
           if (options?.reset !== false) {
             reset();
           }
@@ -608,6 +596,12 @@ function useForm(options) {
       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;
   }
@@ -633,6 +627,7 @@ function useForm(options) {
     setErrors,
     clearErrors,
     clearError,
+    hasDirty,
     submitWithOptions: submit,
     submit: () => submit(),
     hasErrors: vue.computed(() => Object.values(errors.value).length > 0),
@@ -714,131 +709,8 @@ function defineLayoutProperties(properties) {
   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. Make sure the Vite plugin is enabled and that `virtual:hybridly/router` is imported.");
-    }
-    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(/\/+$/, "");
-  }
-}
-
-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()
-    };
-  }
-  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();
-}
-
 exports.can = core.can;
+exports.route = core.route;
 exports.router = core.router;
 exports.HybridlyImports = HybridlyImports;
 exports.HybridlyResolver = HybridlyResolver;
@@ -847,7 +719,6 @@ exports.defineLayout = defineLayout;
 exports.defineLayoutProperties = defineLayoutProperties;
 exports.initializeHybridly = initializeHybridly;
 exports.resolvePageComponent = resolvePageComponent;
-exports.route = route;
 exports.useBackForward = useBackForward;
 exports.useContext = useContext;
 exports.useForm = useForm;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as vue from 'vue';
 import { App, Plugin as Plugin$2, h, PropType, ComputedRef, DeepReadonly } from 'vue';
 import * as _hybridly_core from '@hybridly/core';
 import { HybridPayload as HybridPayload$1, ResolveComponent as ResolveComponent$1, RouterContextOptions, Plugin as Plugin$1, RouterContext, Method as Method$1, HybridRequestOptions as HybridRequestOptions$1, UrlResolvable as UrlResolvable$1 } from '@hybridly/core';
-export { can, router } from '@hybridly/core';
+export { can, route, router } from '@hybridly/core';
 import { ProgressOptions } from '@hybridly/progress-plugin';
 import { Axios, AxiosResponse, AxiosProgressEvent } from 'axios';
 import * as _vue_shared from '@vue/shared';
@@ -28,6 +28,8 @@ interface HybridlyOptions {
     serializer?: RouterContextOptions['serializer'];
     /** Clean up the host element's payload dataset after loading. */
     cleanup?: boolean;
+    /** Whether to set up the devtools plugin. */
+    devtools?: boolean;
     /** Progressbar options. */
     progress?: boolean | Partial<ProgressOptions>;
     /** Sets up the hybridly router. */
@@ -65,7 +67,7 @@ declare const RouterLink: vue.DefineComponent<{
         default: string;
     };
     method: {
-        type: PropType<"get" | "delete" | "post" | "put" | "patch" | Method$1>;
+        type: PropType<Method$1 | "get" | "post" | "put" | "patch" | "delete">;
         default: string;
     };
     data: {
@@ -95,7 +97,7 @@ declare const RouterLink: vue.DefineComponent<{
         default: string;
     };
     method: {
-        type: PropType<"get" | "delete" | "post" | "put" | "patch" | Method$1>;
+        type: PropType<Method$1 | "get" | "post" | "put" | "patch" | "delete">;
         default: string;
     };
     data: {
@@ -127,7 +129,7 @@ declare const RouterLink: vue.DefineComponent<{
         default: string;
     };
     method: {
-        type: PropType<"get" | "delete" | "post" | "put" | "patch" | Method$1>;
+        type: PropType<Method$1 | "get" | "post" | "put" | "patch" | "delete">;
         default: string;
     };
     data: {
@@ -149,7 +151,7 @@ declare const RouterLink: vue.DefineComponent<{
 }>>, {
     data: RequestData;
     href: string;
-    method: "get" | "delete" | "post" | "put" | "patch" | Method$1;
+    method: Method$1 | "get" | "post" | "put" | "patch" | "delete";
     options: Omit<HybridRequestOptions$1, "data" | "url" | "method">;
     as: string | Record<string, any>;
     external: boolean;
@@ -254,6 +256,20 @@ interface Hooks {
     navigated: (options: NavigationOptions, context: InternalRouterContext) => MaybePromise<void>;
 }
 
+interface RoutingConfiguration {
+    url: string;
+    port?: number;
+    defaults: Record<string, any>;
+    routes: Record<string, RouteDefinition>;
+}
+interface RouteDefinition {
+    uri: string;
+    method: Method[];
+    bindings: Record<string, string>;
+    domain?: string;
+    wheres?: Record<string, string>;
+}
+
 type UrlResolvable = string | URL | Location;
 type UrlTransformable = Partial<Omit<URL, 'searchParams' | 'toJSON' | 'toString'>> & {
     query?: any;
@@ -300,7 +316,7 @@ interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {
     /** The URL to navigation. */
     url?: UrlResolvable;
     /** HTTP verb to use for the request. */
-    method?: Method;
+    method?: Method | Lowercase<Method>;
     /** Body of the request. */
     data?: RequestData;
     /** Which properties to update for this navigation. Other properties will be ignored. */
@@ -395,7 +411,7 @@ interface InternalRouterContext {
     /** The current local asset version. */
     version: string;
     /** The current adapter's functions. */
-    adapter: Adapter;
+    adapter: ResolvedAdapter;
     /** Scroll positions of the current page's DOM elements. */
     scrollRegions: ScrollRegion[];
     /** Arbitrary state. */
@@ -410,6 +426,8 @@ interface InternalRouterContext {
     hooks: Partial<Record<keyof Hooks, Array<Function>>>;
     /** The Axios instance. */
     axios: Axios;
+    /** Routing configuration. */
+    routing?: RoutingConfiguration;
 }
 /** Adapter-specific functions. */
 interface Adapter {
@@ -422,6 +440,9 @@ interface Adapter {
     /** Called when the context is updated. */
     update?: (context: InternalRouterContext) => void;
 }
+interface ResolvedAdapter extends Adapter {
+    updateRoutingConfiguration: (routing?: RoutingConfiguration) => void;
+}
 interface ScrollRegion {
     top: number;
     left: number;
@@ -451,6 +472,7 @@ declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
     setErrors: (incoming: Record<string, string>) => void;
     clearErrors: (...keys: (keyof T)[]) => void;
     clearError: (key: keyof T) => void;
+    hasDirty: (...keys: (keyof T)[]) => boolean;
     submitWithOptions: (optionsOverrides?: Omit<HybridRequestOptions$1, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
     submit: () => Promise<_hybridly_core.NavigationResponse>;
     hasErrors: boolean;
@@ -616,29 +638,4 @@ declare function defineLayout(layouts: Layout[]): void;
  */
 declare function defineLayoutProperties<T extends Record<string, K>, K = any>(properties: T): void;
 
-interface RouterConfiguration {
-    url: string;
-    port?: number;
-    defaults: Record<string, any>;
-}
-interface RouteDefinition {
-    uri: string;
-    methods: Method$1[];
-    bindings: Record<string, string>;
-    domain?: string;
-    wheres?: Record<string, string>;
-}
-interface RouteCollection extends RouterConfiguration {
-    routes: Record<string, RouteDefinition>;
-}
-interface GlobalRouteCollection extends RouteCollection {
-}
-type RouteName = keyof GlobalRouteCollection['routes'];
-type RouteParameters<T extends RouteName> = Record<keyof GlobalRouteCollection['routes'][T]['bindings'], any> & Record<string, any>;
-
-/**
- * Generates a route from the given route name.
- */
-declare function route<T extends RouteName>(name: T, parameters?: RouteParameters<T>, absolute?: boolean): string;
-
-export { AutoImportResolverOptions, GlobalRouteCollection, HybridlyImports, HybridlyResolver, Layout, RouteCollection, RouteDefinition, RouteName, RouteParameters, RouterConfiguration, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, resolvePageComponent, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useTypedProperty };
+export { AutoImportResolverOptions, HybridlyImports, HybridlyResolver, Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, resolvePageComponent, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useTypedProperty };

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { ref, shallowRef, unref, triggerRef, defineComponent, h, createApp, isRef, reactive, readonly, computed, watch, toRaw } from 'vue';
+import { ref, shallowRef, unref, triggerRef, defineComponent, watch, toRaw, h, createApp, isRef, reactive, readonly, computed } from 'vue';
 import { registerHook, createRouter, makeUrl, router } from '@hybridly/core';
-export { can, 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';
 
 const state = {
@@ -15,13 +15,6 @@ const state = {
   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;
@@ -55,13 +48,12 @@ 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() {
+    const properties = ref();
+    watch(() => state.context.value?.view?.properties, (value) => {
+      debug.adapter("vue:properties", "Updating properties.", toRaw(value));
+      properties.value = value;
+    }, { immediate: true });
     function renderLayout(child) {
       debug.adapter("vue:render:layout", "Rendering layout.");
       if (typeof state.view.value?.layout === "function") {
@@ -72,14 +64,14 @@ const wrapper = defineComponent({
           layout.inheritAttrs = !!layout.inheritAttrs;
           return h(layout, {
             ...state.view.value?.layoutProperties ?? {},
-            ...state.context.value.view.properties
+            ...properties.value
           }, () => child2);
         });
       }
       return [
         h(state.view.value?.layout, {
           ...state.view.value?.layoutProperties ?? {},
-          ...state.context.value.view.properties
+          ...properties.value
         }, () => child),
         renderDialog()
       ];
@@ -88,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,
+        ...properties.value,
         key: state.viewKey.value
       });
     }
@@ -101,29 +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.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()];
+    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
-    }
   }
 });
 
@@ -165,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) => {
@@ -223,7 +210,7 @@ function setupDevtools(app) {
     });
   });
 }
-const plugin = {
+const devtools = {
   install(app) {
     if (process.env.NODE_ENV === "development" || __VUE_PROD_DEVTOOLS__) {
       setupDevtools(app);
@@ -259,18 +246,26 @@ async function initializeHybridly(options) {
     },
     payload
   }));
-  const 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: plugin,
+      hybridly: devtools,
       props: { context: state.context.value }
     });
   }
   const app = createApp({ render });
-  app.use(plugin);
+  if (options.devtools !== false) {
+    app.use(devtools);
+  }
   await options.enhanceVue?.(app);
   return app.mount(element);
 }
@@ -296,14 +291,6 @@ function prepare(options) {
     }
     throw new Error("Either `initializeHybridly#resolve` or `initializeHybridly#pages` should be defined.");
   };
-  if (typeof window !== "undefined") {
-    state.setRoutes(window?.hybridly?.routes);
-    window.addEventListener("hybridly:routes", (event) => {
-      if (event.detail) {
-        state.setRoutes(event.detail);
-      }
-    });
-  }
   if (options.progress !== false) {
     options.plugins = [
       progress(typeof options.progress === "object" ? options.progress : {}),
@@ -431,12 +418,12 @@ const HybridlyImports = {
     "useHistoryState",
     "usePaginator",
     "defineLayout",
-    "defineLayoutProperties",
-    "route"
+    "defineLayoutProperties"
   ],
   "hybridly": [
     "registerHook",
     "router",
+    "route",
     "can"
   ]
 };
@@ -513,7 +500,7 @@ 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 = {
@@ -543,13 +530,14 @@ function useForm(options) {
   function submit(optionsOverrides) {
     const url = typeof options.url === "function" ? options.url() : options.url;
     const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
+    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: (navigation, context) => {
           failed.value = false;
@@ -557,7 +545,6 @@ function useForm(options) {
           recentlySuccessful.value = false;
           clearTimeout(timeoutIds.recentlySuccessful);
           clearTimeout(timeoutIds.recentlyFailed);
-          clearErrors();
           return options.hooks?.before?.(navigation, context);
         },
         start: (context) => {
@@ -576,6 +563,7 @@ function useForm(options) {
           return options.hooks?.error?.(incoming, context);
         },
         success: (payload, context) => {
+          clearErrors();
           if (options?.reset !== false) {
             reset();
           }
@@ -600,6 +588,12 @@ function useForm(options) {
       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;
   }
@@ -625,6 +619,7 @@ function useForm(options) {
     setErrors,
     clearErrors,
     clearError,
+    hasDirty,
     submitWithOptions: submit,
     submit: () => submit(),
     hasErrors: computed(() => Object.values(errors.value).length > 0),
@@ -706,128 +701,4 @@ function defineLayoutProperties(properties) {
   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. Make sure the Vite plugin is enabled and that `virtual:hybridly/router` is imported.");
-    }
-    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(/\/+$/, "");
-  }
-}
-
-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()
-    };
-  }
-  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();
-}
-
-export { HybridlyImports, HybridlyResolver, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, resolvePageComponent, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useTypedProperty };
+export { HybridlyImports, HybridlyResolver, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, resolvePageComponent, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useTypedProperty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.0.1-alpha.13",
+  "version": "0.0.1-alpha.15",
   "description": "A solution to develop server-driven, client-rendered applications",
   "keywords": [
     "hybridly",
@@ -38,14 +38,14 @@
     "vue": "^3.2.37"
   },
   "dependencies": {
-    "@hybridly/core": "0.0.1-alpha.13",
-    "@hybridly/progress-plugin": "0.0.1-alpha.13",
-    "@hybridly/utils": "0.0.1-alpha.13",
     "@vue/devtools-api": "^6.4.5",
     "defu": "^6.1.1",
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
-    "qs": "^6.11.0"
+    "qs": "^6.11.0",
+    "@hybridly/core": "0.0.1-alpha.15",
+    "@hybridly/progress-plugin": "0.0.1-alpha.15",
+    "@hybridly/utils": "0.0.1-alpha.15"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.190",