@hybridly/vue 0.0.1-alpha.7 → 0.0.1-alpha.8

package/dist/index.cjs

@@ -248,6 +248,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: {
@@ -266,13 +267,20 @@ 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 })
-  });
+  const render = () => vue.h(wrapper, { context: state.context.value });
+  if (options.setup) {
+    return await options.setup({
+      element,
+      wrapper,
+      render,
+      hybridly: plugin,
+      props: { context: state.context.value }
+    });
+  }
+  const app = vue.createApp({ render });
+  app.use(plugin);
+  await options.enhanceVue?.(app);
+  return app.mount(element);
 }
 function prepare(options) {
   utils.debug.adapter("vue", "Preparing Hybridly with options:", options);
@@ -530,8 +538,10 @@ function useForm(options) {
     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;
@@ -585,8 +595,16 @@ function useForm(options) {
       }
     });
   }
-  function clearErrors() {
-    errors.value = {};
+  function clearErrors(...keys) {
+    if (keys.length === 0) {
+      keys = Object.keys(fields);
+    }
+    keys.forEach((key) => {
+      clearError(key);
+    });
+  }
+  function clearError(key) {
+    errors.value[key] = void 0;
   }
   function setErrors(incoming) {
     errors.value = incoming;
@@ -609,6 +627,7 @@ function useForm(options) {
     abort,
     setErrors,
     clearErrors,
+    clearError,
     submitWithOptions: submit,
     submit: () => submit(),
     hasErrors: vue.computed(() => Object.values(errors.value).length > 0),

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import * as vue from 'vue';
-import { Plugin as Plugin$2, h, PropType, ComputedRef, DeepReadonly } 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';
 import { ProgressOptions } from '@hybridly/progress-plugin';
+import { Axios, AxiosResponse, AxiosProgressEvent } from 'axios';
 import * as _vue_shared from '@vue/shared';
 import { RequestData } from '@hybridly/utils';
-import { AxiosResponse, AxiosProgressEvent } from 'axios';
 
-declare function initializeHybridly(options: HybridlyOptions): Promise<void>;
+declare function initializeHybridly(options: HybridlyOptions): Promise<any>;
 interface HybridlyOptions {
     /** ID of the app element. */
     id?: string;
@@ -27,9 +27,13 @@ interface HybridlyOptions {
     /** Progressbar options. */
     progress?: boolean | Partial<ProgressOptions>;
     /** Sets up the hybridly router. */
-    setup: (options: SetupArguments) => any;
+    setup?: (options: SetupArguments) => any;
     /** List of Hybridly plugins. */
     plugins?: Plugin$1[];
+    /** Callback that gets executed before Vue is mounted. */
+    enhanceVue?: (vue: App<Element>) => any;
+    /** Custom Axios instance. */
+    axios?: Axios;
 }
 interface SetupArguments {
     /** DOM element to mount Vue on. */
@@ -56,7 +60,7 @@ declare const RouterLink: vue.DefineComponent<{
         default: string;
     };
     method: {
-        type: PropType<Method$1 | "get" | "delete" | "post" | "put" | "patch">;
+        type: PropType<"get" | "delete" | "post" | "put" | "patch" | Method$1>;
         default: string;
     };
     data: {
@@ -85,7 +89,7 @@ declare const RouterLink: vue.DefineComponent<{
         default: string;
     };
     method: {
-        type: PropType<Method$1 | "get" | "delete" | "post" | "put" | "patch">;
+        type: PropType<"get" | "delete" | "post" | "put" | "patch" | Method$1>;
         default: string;
     };
     data: {
@@ -116,7 +120,7 @@ declare const RouterLink: vue.DefineComponent<{
         default: string;
     };
     method: {
-        type: PropType<Method$1 | "get" | "delete" | "post" | "put" | "patch">;
+        type: PropType<"get" | "delete" | "post" | "put" | "patch" | Method$1>;
         default: string;
     };
     data: {
@@ -137,7 +141,7 @@ declare const RouterLink: vue.DefineComponent<{
     };
 }>>, {
     data: RequestData;
-    method: Method$1 | "get" | "delete" | "post" | "put" | "patch";
+    method: "get" | "delete" | "post" | "put" | "patch" | Method$1;
     options: Omit<HybridRequestOptions$1, "url" | "data" | "method">;
     as: string | Record<string, any>;
     external: boolean;
@@ -292,6 +296,11 @@ interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {
     hooks?: Partial<Hooks>;
     /** If `true`, force the usage of a `FormData` object. */
     useFormData?: boolean;
+    /**
+     * If `false`, disable automatic form spoofing.
+     * @see https://laravel.com/docs/9.x/routing#form-method-spoofing
+     */
+    spoof?: boolean;
 }
 /** A navigation being made. */
 interface PendingNavigation {
@@ -376,6 +385,8 @@ interface InternalRouterContext {
     plugins: Plugin[];
     /** Global hooks. */
     hooks: Partial<Record<keyof Hooks, Array<Function>>>;
+    /** The Axios instance. */
+    axios: Axios;
 }
 /** Adapter-specific functions. */
 interface Adapter {
@@ -415,7 +426,8 @@ declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
     fields: vue.UnwrapRef<vue.UnwrapNestedRefs<T>>;
     abort: () => void;
     setErrors: (incoming: Record<string, string>) => void;
-    clearErrors: () => void;
+    clearErrors: (...keys: (keyof T)[]) => void;
+    clearError: (key: keyof T) => void;
     submitWithOptions: (optionsOverrides?: Omit<HybridRequestOptions$1, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
     submit: () => Promise<_hybridly_core.NavigationResponse>;
     hasErrors: boolean;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { ref, shallowRef, unref, triggerRef, defineComponent, h, isRef, reactive, readonly, computed, watch, toRaw } from 'vue';
+import { ref, shallowRef, unref, triggerRef, defineComponent, h, createApp, isRef, reactive, readonly, computed, watch, toRaw } from 'vue';
 import { registerHook, createRouter, makeUrl, router } from '@hybridly/core';
 export { can, router } from '@hybridly/core';
 import { debug, showPageComponentErrorModal, merge, clone } from '@hybridly/utils';
@@ -240,6 +240,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: {
@@ -258,13 +259,20 @@ async function initializeHybridly(options) {
     },
     payload
   }));
-  await options.setup({
-    element,
-    wrapper,
-    hybridly: plugin,
-    props: { context: state.context.value },
-    render: () => h(wrapper, { context: state.context.value })
-  });
+  const render = () => h(wrapper, { context: state.context.value });
+  if (options.setup) {
+    return await options.setup({
+      element,
+      wrapper,
+      render,
+      hybridly: plugin,
+      props: { context: state.context.value }
+    });
+  }
+  const app = createApp({ render });
+  app.use(plugin);
+  await options.enhanceVue?.(app);
+  return app.mount(element);
 }
 function prepare(options) {
   debug.adapter("vue", "Preparing Hybridly with options:", options);
@@ -522,8 +530,10 @@ function useForm(options) {
     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;
@@ -577,8 +587,16 @@ function useForm(options) {
       }
     });
   }
-  function clearErrors() {
-    errors.value = {};
+  function clearErrors(...keys) {
+    if (keys.length === 0) {
+      keys = Object.keys(fields);
+    }
+    keys.forEach((key) => {
+      clearError(key);
+    });
+  }
+  function clearError(key) {
+    errors.value[key] = void 0;
   }
   function setErrors(incoming) {
     errors.value = incoming;
@@ -601,6 +619,7 @@ function useForm(options) {
     abort,
     setErrors,
     clearErrors,
+    clearError,
     submitWithOptions: submit,
     submit: () => submit(),
     hasErrors: computed(() => Object.values(errors.value).length > 0),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.8",
   "description": "A solution to develop server-driven, client-rendered applications",
   "keywords": [
     "hybridly",
@@ -38,9 +38,9 @@
     "vue": "^3.2.37"
   },
   "dependencies": {
-    "@hybridly/core": "0.0.1-alpha.7",
-    "@hybridly/progress-plugin": "0.0.1-alpha.7",
-    "@hybridly/utils": "0.0.1-alpha.7",
+    "@hybridly/core": "0.0.1-alpha.8",
+    "@hybridly/progress-plugin": "0.0.1-alpha.8",
+    "@hybridly/utils": "0.0.1-alpha.8",
     "@vue/devtools-api": "^6.4.4",
     "defu": "^6.1.0",
     "lodash.isequal": "^4.5.0",