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

package/dist/index.cjs

@@ -9,13 +9,11 @@ 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(),
@@ -192,7 +190,7 @@ function setupDevtools(app) {
     const listen = [
       "start",
       "data",
-      "navigate",
+      "navigated",
       "progress",
       "error",
       "abort",
@@ -213,7 +211,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: {
@@ -229,7 +227,7 @@ function setupDevtools(app) {
             api.notifyComponentUpdate();
           }, 100);
         }
-      }));
+      }, { once: true }));
     });
   });
 }
@@ -303,7 +301,9 @@ function prepare(options) {
     if (routes) {
       state.setRoutes(window.hybridly?.routes);
       window.addEventListener("hybridly:routes", (event) => {
-        state.setRoutes(event.detail);
+        if (event.detail) {
+          state.setRoutes(event.detail);
+        }
       });
     }
   }
@@ -371,7 +371,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,
@@ -434,7 +434,6 @@ const HybridlyImports = {
   ],
   "hybridly": [
     "registerHook",
-    "registerHookOnce",
     "router",
     "can"
   ]
@@ -505,12 +504,8 @@ 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;
@@ -541,7 +536,7 @@ 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;
-    return core.router.visit({
+    return core.router.navigate({
       ...options,
       url: url ?? state.context.value?.url,
       method: options.method ?? "POST",
@@ -549,14 +544,14 @@ function useForm(options) {
       data: safeClone(data),
       preserveState: optionsOverrides?.preserveState === void 0 && options.method !== "GET" ? true : optionsOverrides?.preserveState,
       hooks: {
-        before: (visit) => {
+        before: (navigation) => {
           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);
         },
         start: (context) => {
           processing.value = true;
@@ -640,7 +635,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);
@@ -835,4 +830,3 @@ exports.useHistoryState = useHistoryState;
 exports.usePaginator = usePaginator;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
-exports.useRouter = useRouter;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { Plugin as Plugin$2, h, PropType, ComputedRef, DeepReadonly } from 'vue';
 import * as _hybridly_core from '@hybridly/core';
-import { VisitPayload as VisitPayload$1, ResolveComponent as ResolveComponent$1, RouterContextOptions, Plugin as Plugin$1, RouterContext, Method as Method$1, VisitOptions as VisitOptions$1, UrlResolvable as UrlResolvable$1 } 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 * as _vue_shared from '@vue/shared';
@@ -13,7 +13,7 @@ interface HybridlyOptions {
     /** ID of the app element. */
     id?: string;
     /** Initial view data. */
-    payload?: VisitPayload$1;
+    payload?: HybridPayload$1;
     /** A collection of pages. */
     pages?: Record<string, any>;
     /** An optional default persistent layout. */
@@ -72,7 +72,7 @@ declare const RouterLink: vue.DefineComponent<{
         default: boolean;
     };
     options: {
-        type: PropType<Omit<VisitOptions$1, "url" | "data" | "method">>;
+        type: PropType<Omit<HybridRequestOptions$1, "url" | "data" | "method">>;
         default: () => {};
     };
 }, (props: Readonly<_vue_shared.LooseRequired<Readonly<vue.ExtractPropTypes<{
@@ -101,7 +101,7 @@ declare const RouterLink: vue.DefineComponent<{
         default: boolean;
     };
     options: {
-        type: PropType<Omit<VisitOptions$1, "url" | "data" | "method">>;
+        type: PropType<Omit<HybridRequestOptions$1, "url" | "data" | "method">>;
         default: () => {};
     };
 }>> & {}>>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -132,13 +132,13 @@ declare const RouterLink: vue.DefineComponent<{
         default: boolean;
     };
     options: {
-        type: PropType<Omit<VisitOptions$1, "url" | "data" | "method">>;
+        type: PropType<Omit<HybridRequestOptions$1, "url" | "data" | "method">>;
         default: () => {};
     };
 }>>, {
     data: RequestData;
     method: Method$1 | "get" | "delete" | "post" | "put" | "patch";
-    options: Omit<VisitOptions$1, "url" | "data" | "method">;
+    options: Omit<HybridRequestOptions$1, "url" | "data" | "method">;
     as: string | Record<string, any>;
     external: boolean;
     disabled: boolean;
@@ -184,11 +184,11 @@ declare type MaybePromise<T> = T | Promise<T>;
 
 interface Hooks {
     /**
-     * Called before anything when a visit is going to happen.
+     * Called before anything when a navigation is going to happen.
      */
-    before: (options: VisitOptions) => MaybePromise<any | boolean>;
+    before: (options: HybridRequestOptions) => MaybePromise<any | boolean>;
     /**
-     * Called before the request of a visit is going to happen.
+     * Called before the request of a navigation is going to happen.
      */
     start: (context: InternalRouterContext) => MaybePromise<any>;
     /**
@@ -196,13 +196,13 @@ interface Hooks {
      */
     progress: (progress: Progress) => MaybePromise<any>;
     /**
-     * Called when data is received after a request for a visit.
+     * Called when data is received after a request for a navigation.
      */
     data: (response: AxiosResponse) => MaybePromise<any>;
     /**
      * Called when a request is successful and there is no error.
      */
-    success: (payload: VisitPayload) => MaybePromise<any>;
+    success: (payload: HybridPayload) => MaybePromise<any>;
     /**
      * Called when a request is successful but there were errors.
      */
@@ -228,18 +228,18 @@ interface Hooks {
      */
     after: (context: InternalRouterContext) => MaybePromise<void>;
     /**
-     * Called when a visit has been made and a page component has been navigated to.
+     * Called when a navigation has been made and a page component has been navigated to.
      */
-    navigate: (options: NavigationOptions) => MaybePromise<void>;
+    navigated: (options: NavigationOptions) => MaybePromise<void>;
 }
 
 declare type UrlResolvable = string | URL | Location;
 declare type UrlTransformable = Partial<Omit<URL, 'searchParams' | 'toJSON' | 'toString'>>;
 
-declare type ConditionalNavigationOption = boolean | ((payload: VisitPayload) => boolean);
+declare type ConditionalNavigationOption = boolean | ((payload: HybridPayload) => boolean);
 interface NavigationOptions {
     /** View to navigate to. */
-    payload?: VisitPayload;
+    payload?: HybridPayload;
     /**
      * Whether to replace the current history state instead of adding
      * one. This affects the browser's "back" and "forward" features.
@@ -267,41 +267,41 @@ interface NavigationOptions {
      */
     updateHistoryState?: boolean;
     /**
-     * Defines whether this navigation is a back/forward visit from the popstate event.
+     * Defines whether this navigation is a back/forward navigation from the popstate event.
      * @internal This is an advanced property meant to be used internally.
      */
     isBackForward?: boolean;
 }
 declare type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-interface VisitOptions extends Omit<NavigationOptions, 'request'> {
-    /** The URL to visit. */
+interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {
+    /** The URL to navigation. */
     url?: UrlResolvable;
     /** HTTP verb to use for the request. */
     method?: Method;
     /** Body of the request. */
     data?: RequestData;
-    /** Which properties to update for this visit. Other properties will be ignored. */
+    /** Which properties to update for this navigation. Other properties will be ignored. */
     only?: string | string[];
-    /** Which properties not to update for this visit. Other properties will be updated. */
+    /** Which properties not to update for this navigation. Other properties will be updated. */
     except?: string | string[];
     /** Specific headers to add to the request. */
     headers?: Record<string, string>;
     /** The bag in which to put potential errors. */
     errorBag?: string;
-    /** Hooks for this visit. */
+    /** Hooks for this navigation. */
     hooks?: Partial<Hooks>;
     /** If `true`, force the usage of a `FormData` object. */
     useFormData?: boolean;
 }
-/** An axios visit being made. */
-interface PendingVisit {
+/** A navigation being made. */
+interface PendingNavigation {
     /** The URL to which the request is being made. */
     url: URL;
     /** Abort controller associated to this request. */
     controller: AbortController;
-    /** Options for the associated visit. */
-    options: VisitOptions;
-    /** Visit identifier. */
+    /** Options for the associated hybrid request. */
+    options: HybridRequestOptions;
+    /** Navigation identifier. */
     id: string;
 }
 /** A page or dialog component. */
@@ -326,8 +326,8 @@ declare type DialogComponent = any;
 declare type ResolveComponent = (name: string) => Promise<ViewComponent>;
 declare type SwapView = (options: SwapOptions<ViewComponent>) => Promise<void>;
 declare type SwapDialog = (options: SwapOptions<DialogComponent>) => Promise<void>;
-/** The payload of a visit request from the server. */
-interface VisitPayload {
+/** The payload of a navigation request from the server. */
+interface HybridPayload {
     /** The view to use in this request. */
     view: View;
     /** An optional dialog. */
@@ -347,10 +347,9 @@ interface Errors {
     [key: string]: string;
 }
 
-interface Plugin {
+interface Plugin extends Partial<Hooks> {
     name: string;
-    initialized: (context: InternalRouterContext) => MaybePromise<void>;
-    hooks: Partial<Hooks>;
+    initialized?: (context: InternalRouterContext) => MaybePromise<void>;
 }
 
 /** Router context. */
@@ -369,8 +368,8 @@ interface InternalRouterContext {
     scrollRegions: ScrollRegion[];
     /** Arbitrary state. */
     state: Record<string, any>;
-    /** Currently pending visit. */
-    activeVisit?: PendingVisit;
+    /** Currently pending navigation. */
+    pendingNavigation?: PendingNavigation;
     /** History state serializer. */
     serializer: Serializer;
     /** List of plugins. */
@@ -402,11 +401,8 @@ interface Serializer {
 /** Accesses the hybridly context. */
 declare function useContext(): vue.ComputedRef<Readonly<InternalRouterContext> | undefined>;
 
-/** Gets the router. */
-declare function useRouter(): _hybridly_core.Router;
-
 declare type Fields = Record<string, any>;
-interface FormOptions<T extends Fields> extends Omit<VisitOptions$1, 'data' | 'url'> {
+interface FormOptions<T extends Fields> extends Omit<HybridRequestOptions$1, 'data' | 'url'> {
     fields: T;
     url?: UrlResolvable$1 | (() => UrlResolvable$1);
     key?: string | false;
@@ -420,8 +416,8 @@ declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
     abort: () => void;
     setErrors: (incoming: Record<string, string>) => void;
     clearErrors: () => void;
-    submitWithOptions: (optionsOverrides?: Omit<VisitOptions$1, 'data'>) => Promise<_hybridly_core.VisitResponse>;
-    submit: () => Promise<_hybridly_core.VisitResponse>;
+    submitWithOptions: (optionsOverrides?: Omit<HybridRequestOptions$1, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
+    submit: () => Promise<_hybridly_core.NavigationResponse>;
     hasErrors: boolean;
     initial: vue.UnwrapRef<DeepReadonly<T>>;
     loaded: any;
@@ -456,7 +452,7 @@ declare function useHistoryState<T = any>(key: string, initial: T): vue.Ref<vue.
 declare type BackForwardCallback = (context: RouterContext) => void;
 declare function useBackForward(): {
     onBackForward: (fn: BackForwardCallback) => void;
-    reloadOnBackForward: (options?: VisitOptions$1) => void;
+    reloadOnBackForward: (options?: HybridRequestOptions$1) => void;
 };
 
 declare global {
@@ -571,4 +567,4 @@ declare type RouteParameters<T extends RouteName> = Record<keyof GlobalRouteColl
  */
 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, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRouter };
+export { AutoImportResolverOptions, GlobalRouteCollection, HybridlyImports, HybridlyResolver, Layout, RouteCollection, RouteDefinition, RouteName, RouteParameters, RouterConfiguration, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty };

package/dist/index.mjs

@@ -1,12 +1,11 @@
 import { ref, shallowRef, unref, triggerRef, defineComponent, h, isRef, reactive, readonly, computed, watch, toRaw } from 'vue';
-import { registerHook, registerHookOnce, createRouter, makeUrl, router } from '@hybridly/core';
+import { registerHook, createRouter, makeUrl, router } from '@hybridly/core';
 export { can, router } from '@hybridly/core';
-import { debug, showPageComponentErrorModal, merge } from '@hybridly/utils';
+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 isEqual from 'lodash.isequal';
-import clone from 'lodash.clonedeep';
 
 const state = {
   context: ref(),
@@ -183,7 +182,7 @@ function setupDevtools(app) {
     const listen = [
       "start",
       "data",
-      "navigate",
+      "navigated",
       "progress",
       "error",
       "abort",
@@ -204,7 +203,7 @@ function setupDevtools(app) {
           data: options
         }
       });
-      listen.forEach((event) => registerHookOnce(event, (data) => {
+      listen.forEach((event) => registerHook(event, (data) => {
         api.addTimelineEvent({
           layerId: hybridlyEventsTimelineLayerId,
           event: {
@@ -220,7 +219,7 @@ function setupDevtools(app) {
             api.notifyComponentUpdate();
           }, 100);
         }
-      }));
+      }, { once: true }));
     });
   });
 }
@@ -294,7 +293,9 @@ function prepare(options) {
     if (routes) {
       state.setRoutes(window.hybridly?.routes);
       window.addEventListener("hybridly:routes", (event) => {
-        state.setRoutes(event.detail);
+        if (event.detail) {
+          state.setRoutes(event.detail);
+        }
       });
     }
   }
@@ -362,7 +363,7 @@ Please specify a more appropriate element using the "as" attribute. For example:
           if (props.disabled) {
             return;
           }
-          router.visit({
+          router.navigate({
             url,
             data,
             method,
@@ -425,7 +426,6 @@ const HybridlyImports = {
   ],
   "hybridly": [
     "registerHook",
-    "registerHookOnce",
     "router",
     "can"
   ]
@@ -496,10 +496,6 @@ function useContext() {
   return computed(() => state.context.value);
 }
 
-function useRouter() {
-  return router;
-}
-
 function safeClone(obj) {
   return clone(toRaw(obj));
 }
@@ -532,7 +528,7 @@ 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;
-    return router.visit({
+    return router.navigate({
       ...options,
       url: url ?? state.context.value?.url,
       method: options.method ?? "POST",
@@ -540,14 +536,14 @@ function useForm(options) {
       data: safeClone(data),
       preserveState: optionsOverrides?.preserveState === void 0 && options.method !== "GET" ? true : optionsOverrides?.preserveState,
       hooks: {
-        before: (visit) => {
+        before: (navigation) => {
           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);
         },
         start: (context) => {
           processing.value = true;
@@ -631,7 +627,7 @@ function useHistoryState(key, initial) {
 
 function useBackForward() {
   const callbacks = [];
-  registerHook("navigate", (options) => {
+  registerHook("navigated", (options) => {
     if (options.isBackForward) {
       callbacks.forEach((fn) => fn(state.context.value));
       callbacks.splice(0, callbacks.length);
@@ -810,4 +806,4 @@ function route(name, parameters, absolute) {
   return new Router(name, parameters, absolute).toString();
 }
 
-export { HybridlyImports, HybridlyResolver, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRouter };
+export { HybridlyImports, HybridlyResolver, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty };

package/package.json

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