feat: adds the composable and event system for inertia integration

Author: fenilli

src/event.ts

@@ -0,0 +1,60 @@
+import type { VisitOptions, GlobalEventsMap } from '@inertiajs/core';
+
+export type Events<A extends [...args: any]> = {
+  [K in keyof Omit<GlobalEventsMap, 'navigate' | 'invalid' | 'exception'>]
+  : (...args: [...GlobalEventsMap[K]['parameters'], ...A]) => GlobalEventsMap[K]['result'];
+} & {
+  cancelToken: (...args: [{ cancel: () => void }, ...A]) => void;
+};
+
+export type EventsList<A extends [...args: any]> = {
+  [K in keyof Events<A>]: Events<A>[K][];
+};
+
+export const useEventsSystem = <E extends [...args: any]>() => {
+  const eventList: Partial<EventsList<E>> = {};
+
+  const on = <T extends keyof Events<E>>(eventName: T, callback: Events<E>[T]) => {
+    if (typeof eventList[eventName] === 'undefined') eventList[eventName] = [];
+
+    eventList[eventName]?.push(callback);
+  };
+
+  const combine = (combineCb: (cb: typeof on) => void | ((cb: typeof on) => void)[]) => {
+    if (Array.isArray(combineCb)) combineCb.forEach((cb) => cb(on));
+    combineCb(on);
+  };
+
+  const execute = <T extends keyof Events<E>>(eventName: T, ...params: Parameters<Events<E>[T]>): ReturnType<Events<E>[T]> | undefined => {
+    const events = eventList[eventName];
+    if (!events) return;
+
+    if (eventName === 'before') {
+      for (const event of events) {
+        const res = event(...params);
+
+        if (typeof res === 'boolean') return res as ReturnType<Events<E>[T]>;
+      }
+    } else {
+      for (const event of events) {
+        event(...params);
+      }
+    }
+  };
+
+  const toVisitOptions = (...params: E): VisitOptions => ((Object.keys(eventList) as (keyof typeof eventList)[]).map((name) => ({
+    [`on${(name.charAt(0).toUpperCase() + name.slice(1)) as Capitalize<keyof typeof eventList>}`]: (arg: any) => {
+      return execute(name, ...[arg, ...params]);
+    }
+  })).reduce((p, c) => ({
+    ...p,
+    ...c
+  }), {}));
+
+  return {
+    on,
+    combine,
+    execute,
+    toVisitOptions
+  };
+};

src/index.ts

@@ -0,0 +1,4 @@
+export type { Events, EventsList } from './event';
+export { useEventsSystem } from './event';
+
+export { useForm } from './inertia';

src/inertia.ts

@@ -0,0 +1,144 @@
+import type { FormKitNode } from '@formkit/core';
+import type { Method, VisitOptions, RequestPayload } from '@inertiajs/core';
+
+import { createMessage } from '@formkit/core';
+import { router } from '@inertiajs/core';
+import { reactive, toRefs, watchEffect } from 'vue';
+import { useEventsSystem } from './event';
+
+export const useForm = <F extends RequestPayload>(initialFields?: F) => {
+  const event = useEventsSystem<[node: FormKitNode]>();
+
+  let _recentlySuccessfulTimeoutId: ReturnType<typeof setTimeout> | undefined = undefined;
+  let _cancelToken: {
+    cancel: () => void;
+  } | undefined = undefined;
+
+  const state = reactive<{
+    node: FormKitNode | null,
+    dirty: boolean | null;
+    errors: boolean | null;
+    processing: boolean;
+    progress: number;
+    recentlySuccessful: boolean;
+    valid: boolean | null;
+    wasSuccessful: boolean;
+  }>({
+    node: null,
+    dirty: null,
+    errors: null,
+    processing: false,
+    progress: 0,
+    recentlySuccessful: false,
+    valid: null,
+    wasSuccessful: false
+  });
+
+  event.combine((on) => {
+    on('cancelToken', (token) => {
+      _cancelToken = token;
+    });
+
+    on('before', () => {
+      state.progress = 0;
+      state.recentlySuccessful = false;
+      state.wasSuccessful = false;
+
+      clearInterval(_recentlySuccessfulTimeoutId);
+    });
+
+    on('start', (_, node) => {
+      node.store.set(createMessage({
+        key: 'loading',
+        visible: false,
+        value: true
+      }));
+
+      if (node.props.submitBehavior !== 'live') node.props.disabled = true;
+
+      state.processing = true;
+    });
+
+    on('progress', (axiosProgress) => {
+      state.progress = axiosProgress?.percentage || 0;
+    });
+
+    on('success', () => {
+      state.recentlySuccessful = true;
+      state.wasSuccessful = true;
+
+      _recentlySuccessfulTimeoutId = setTimeout(() => {
+        state.recentlySuccessful = false;
+      }, 2000);
+    });
+
+    on('error', (errors, node) => {
+      node.setErrors(node.name in errors ? errors[node.name] : [], errors);
+    });
+
+    on('finish', (_, node) => {
+      _cancelToken = undefined;
+
+      node.store.remove('loading');
+
+      if (node.props.submitBehavior !== 'live') node.props.disabled = false;
+
+      state.processing = false;
+      state.progress = 0;
+    });
+  });
+
+  const plugin = (node: FormKitNode) => {
+    if (node.props.type !== 'form') return;
+
+    state.node = node;
+    node.input(initialFields);
+
+    node.on('created', () => {
+      if (!node.context) return;
+
+      watchEffect(() => {
+        if (!node.context) return;
+
+        state.dirty = node.context.state.dirty;
+        state.valid = node.context.state.valid;
+        state.errors = node.context.state.errors;
+      });
+    });
+
+    return false;
+  };
+
+  const _createVisitHandler = (method: Method) => (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => {
+    if (method === 'delete') {
+      router.delete(url, {
+        ...event.toVisitOptions(node),
+        ...options,
+        data
+      });
+    } else {
+      router[method](url, data, {
+        ...event.toVisitOptions(node),
+        ...options,
+      });
+    }
+  };
+
+  return {
+    get: _createVisitHandler('get'),
+    post: _createVisitHandler('post'),
+    put: _createVisitHandler('put'),
+    patch: _createVisitHandler('patch'),
+    delete: _createVisitHandler('delete'),
+    cancel: () => {
+      if (_cancelToken) _cancelToken.cancel();
+    },
+
+    ...toRefs(state),
+
+    on: event.on,
+    combine: event.combine,
+
+    plugin,
+  }
+};