@hybridly/vue 0.4.0 → 0.4.2

package/dist/index.cjs

@@ -127,7 +127,9 @@ const wrapper = vue.defineComponent({
         actual?.();
         vue.nextTick(() => {
           utils.debug.adapter("vue:render:view", "Calling mounted callbacks.");
-          onMountedCallbacks.pop()?.();
+          while (onMountedCallbacks.length) {
+            onMountedCallbacks.shift()?.();
+          }
         });
       };
       return vue.h(state.view.value, {
@@ -288,7 +290,7 @@ async function initializeHybridly(options = {}) {
     routing: resolved.routing,
     adapter: {
       resolveComponent: resolve,
-      onWaitingForMount: (callback) => {
+      executeOnMounted: (callback) => {
         onMountedCallbacks.push(callback);
       },
       onDialogClose: async () => {
@@ -391,6 +393,7 @@ const RouterLink = vue.defineComponent({
   setup(_, { slots, attrs }) {
     return (props) => {
       let data = props.data ?? {};
+      const preloads = props.preload ?? false;
       const url = core.makeUrl(props.href ?? "");
       const method = props.method?.toUpperCase() ?? "GET";
       const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
@@ -413,6 +416,24 @@ Please specify a more appropriate element using the "as" attribute. For example:
         ...attrs,
         ...as === "a" ? { href: url } : {},
         ...props.disabled ? { disabled: props.disabled } : {},
+        onMouseenter: () => {
+          if (!preloads) {
+            return;
+          }
+          if (props.external) {
+            return;
+          }
+          if (props.disabled) {
+            return;
+          }
+          if (method !== "GET") {
+            return;
+          }
+          core.router.preload(url, {
+            data,
+            ...props.options
+          });
+        },
         onClick: (event) => {
           if (props.external) {
             return;
@@ -469,6 +490,10 @@ Please specify a more appropriate element using the "as" attribute. For example:
       type: String,
       required: false,
       default: void 0
+    },
+    preload: {
+      type: Boolean,
+      default: false
     }
   }
 });
@@ -518,6 +543,12 @@ function useProperties() {
 function useProperty(path) {
   return vue.computed(() => dotDiver.getByPath(state.context.value?.view.properties, path));
 }
+function setProperty(path, value) {
+  if (!state.context.value?.view.properties) {
+    return;
+  }
+  dotDiver.setByPath(state.context.value.view.properties, path, vue.toValue(value));
+}
 
 function useContext() {
   return vue.computed(() => state.context.value);
@@ -770,6 +801,16 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   const refinements = vue.computed(() => properties[refinementsKeys]);
   const sortsKey = vue.computed(() => refinements.value.keys.sorts);
   const filtersKey = vue.computed(() => refinements.value.keys.filters);
+  defaultOptions = {
+    replace: false,
+    ...defaultOptions
+  };
+  function getSort(name) {
+    return refinements.value.sorts.find((sort) => sort.name === name);
+  }
+  function getFilter(name) {
+    return refinements.value.filters.find((sort) => sort.name === name);
+  }
   async function reset(options = {}) {
     return await core.router.reload({
       ...defaultOptions,
@@ -800,16 +841,21 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       }
     });
   }
-  async function applyFilter(filter, value, options = {}) {
-    if (!refinements.value.filters.find(({ name }) => name === filter)) {
+  async function applyFilter(name, value, options = {}) {
+    const filter = getFilter(name);
+    if (!filter) {
+      console.warn(`[Refinement] Filter "${name} does not exist."`);
       return;
     }
+    if (["", null].includes(value) || value === filter.default) {
+      value = void 0;
+    }
     return await core.router.reload({
       ...defaultOptions,
       ...options,
       data: {
         [filtersKey.value]: {
-          [filter]: value === "" ? void 0 : value
+          [name]: value
         }
       }
     });
@@ -829,16 +875,22 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   function currentFilters() {
     return refinements.value.filters.filter(({ is_active }) => is_active);
   }
-  function isSorting() {
+  function isSorting(name) {
+    if (name) {
+      return currentSorts().some((sort) => sort.name === name);
+    }
     return currentSorts().length !== 0;
   }
-  function isFiltering() {
+  function isFiltering(name) {
+    if (name) {
+      return currentFilters().some((filter) => filter.name === name);
+    }
     return currentFilters().length !== 0;
   }
-  async function toggleSort(sortName, options) {
-    const sort = refinements.value.sorts.find(({ name }) => name === sortName);
+  async function toggleSort(name, options) {
+    const sort = getSort(name);
     if (!sort) {
-      console.warn(`[Refinement] Sort "${sortName} does not exist."`);
+      console.warn(`[Refinement] Sort "${name} does not exist."`);
       return;
     }
     const next = options?.direction ? sort[options?.direction] : sort.next;
@@ -850,9 +902,22 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       }
     });
   }
+  function bindFilter(name, options = {}) {
+    const transform = options?.transformValue ?? ((value) => value);
+    const watchFn = options?.watch ?? vue.watch;
+    const _ref = vue.ref(transform(refinements.value.filters.find((f) => f.name === name)?.value));
+    vue.watch(() => refinements.value.filters.find((f) => f.name === name), (filter) => {
+      _ref.value = transform(filter?.value);
+    }, { deep: true });
+    watchFn(_ref, (value) => applyFilter(name, transform(value), options));
+    return _ref;
+  }
   return {
+    bindFilter,
     filters: toReactive(refinements.value.filters),
     sorts: toReactive(refinements.value.sorts),
+    getFilter,
+    getSort,
     reset,
     toggleSort,
     isSorting,
@@ -866,6 +931,20 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   };
 }
 
+function useRoute() {
+  const current = vue.ref(hybridly.router.current());
+  function matches(name, parameters) {
+    return hybridly.router.matches(vue.toValue(name), parameters);
+  }
+  registerHook("navigated", () => {
+    current.value = hybridly.router.current();
+  });
+  return {
+    current: vue.readonly(current),
+    matches
+  };
+}
+
 exports.can = core.can;
 exports.route = core.route;
 exports.router = core.router;
@@ -874,6 +953,7 @@ exports.defineLayout = defineLayout;
 exports.defineLayoutProperties = defineLayoutProperties;
 exports.initializeHybridly = initializeHybridly;
 exports.registerHook = registerHook;
+exports.setProperty = setProperty;
 exports.useBackForward = useBackForward;
 exports.useContext = useContext;
 exports.useDialog = useDialog;
@@ -883,3 +963,4 @@ exports.usePaginator = usePaginator;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
 exports.useRefinements = useRefinements;
+exports.useRoute = useRoute;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { App, Plugin as Plugin$2, h, PropType, ComputedRef, DeepReadonly } from 'vue';
+import { App, Plugin as Plugin$2, h, PropType, ComputedRef, DeepReadonly, Ref, MaybeRefOrGetter } from 'vue';
 import * as _hybridly_core from '@hybridly/core';
 import { RouterContextOptions, Plugin as Plugin$1, RouterContext, Method as Method$1, HybridRequestOptions as HybridRequestOptions$1, UrlResolvable as UrlResolvable$1, registerHook as registerHook$1 } from '@hybridly/core';
 export { can, route, router } from '@hybridly/core';
@@ -85,6 +85,10 @@ declare const RouterLink: vue.DefineComponent<{
         required: false;
         default: undefined;
     };
+    preload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, (props: _vue_shared.LooseRequired<{
     readonly data: RequestData;
     readonly method: "delete" | Method$1 | "get" | "post" | "put" | "patch";
@@ -92,6 +96,7 @@ declare const RouterLink: vue.DefineComponent<{
     readonly as: string | Record<string, any>;
     readonly external: boolean;
     readonly disabled: boolean;
+    readonly preload: boolean;
     readonly text?: string | undefined;
     readonly href?: string | undefined;
 } & {}>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -131,6 +136,10 @@ declare const RouterLink: vue.DefineComponent<{
         required: false;
         default: undefined;
     };
+    preload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     data: RequestData;
     text: string;
@@ -140,12 +149,18 @@ declare const RouterLink: vue.DefineComponent<{
     as: string | Record<string, any>;
     external: boolean;
     disabled: boolean;
+    preload: boolean;
 }, {}>;
 
 /** Accesses all current properties. */
 declare function useProperties<T extends object, Global extends GlobalHybridlyProperties>(): vue.DeepReadonly<vue.UnwrapNestedRefs<T & Global>>;
 /** Accesses a property with a dot notation. */
 declare function useProperty<Override = never, T extends SearchableObject = GlobalHybridlyProperties, P extends Path<T> & string = Path<T> & string, ReturnType = [Override] extends [never] ? PathValue<T, P> : Override>(path: [Override] extends [never] ? P : string): ComputedRef<ReturnType>;
+/**
+ * Sets the property at the given path to the given value.
+ * Note: this helper is experimental and may change in the future.
+ */
+declare function setProperty<Override = never, T extends SearchableObject = GlobalHybridlyProperties, P extends Path<T> & string = Path<T> & string, ValueType = [Override] extends [never] ? PathValue<T, P> : Override>(path: [Override] extends [never] ? P : string, value: ValueType): void;
 
 type UrlResolvable = string | URL | Location;
 type UrlTransformable = BaseUrlTransformable | ((string: URL) => BaseUrlTransformable);
@@ -223,6 +238,10 @@ interface Hooks extends RequestHooks {
      * Called when a component has been navigated to.
      */
     navigated: (options: NavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
+    /**
+     * Called when a component has been navigated to and was mounted by the adapter.
+     */
+    mounted: (context: InternalRouterContext) => MaybePromise<any>;
 }
 
 interface RoutingConfiguration {
@@ -405,6 +424,8 @@ interface InternalRouterContext {
     routing?: RoutingConfiguration;
     /** Whether to display response error modals. */
     responseErrorModals?: boolean;
+    /** Cache of preload requests. */
+    preloadCache: Map<string, AxiosResponse>;
 }
 /** Adapter-specific functions. */
 interface Adapter {
@@ -417,7 +438,7 @@ interface Adapter {
     /** Called when a dialog is closed. */
     onDialogClose?: (context: InternalRouterContext) => void;
     /** Called when Hybridly is waiting for a component to be mounted. The given callback should be executed after the view component is mounted. */
-    onWaitingForMount: (callback: Function) => void;
+    executeOnMounted: (callback: Function) => void;
 }
 interface ResolvedAdapter extends Adapter {
     updateRoutingConfiguration: (routing?: RoutingConfiguration) => void;
@@ -625,6 +646,11 @@ type AvailableHybridRequestOptions = Omit<HybridRequestOptions$1, 'url' | 'data'
 interface ToggleSortOptions extends AvailableHybridRequestOptions {
     direction?: SortDirection;
 }
+interface BindFilterOptions<T> extends AvailableHybridRequestOptions {
+    transformValue?: (value?: T) => any;
+    /** If specified, this callback will watch the ref and apply  */
+    watch?: (ref: Ref<T>, cb: any) => void;
+}
 declare global {
     interface FilterRefinement {
         /**
@@ -655,6 +681,10 @@ declare global {
          * Whether this filter is hidden.
          */
         hidden: boolean;
+        /**
+         * The default value of the filter.
+         */
+        default: any;
     }
     interface SortRefinement {
         /**
@@ -729,6 +759,10 @@ declare global {
 declare function useRefinements<Properties extends object, RefinementsKey extends {
     [K in keyof Properties]: Properties[K] extends Refinements ? K : never;
 }[keyof Properties]>(properties: Properties, refinementsKeys: RefinementsKey, defaultOptions?: AvailableHybridRequestOptions): {
+    /**
+     * Binds a named filter to a ref, applying filters when it changes and updating the ref accordingly.
+     */
+    bindFilter: <T = any>(name: string, options?: BindFilterOptions<T>) => Ref<T>;
     /**
      * Available filters.
      */
@@ -737,6 +771,14 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
      * Available sorts.
      */
     sorts: SortRefinement[];
+    /**
+     * Gets a filter by name.
+     */
+    getFilter: (name: string) => FilterRefinement | undefined;
+    /**
+     * Gets a sort by name.
+     */
+    getSort: (name: string) => SortRefinement | undefined;
     /**
      * Resets all filters and sorts.
      */
@@ -744,15 +786,15 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
     /**
      * Toggles the specified sort.
      */
-    toggleSort: (sortName: string, options?: ToggleSortOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
+    toggleSort: (name: string, options?: ToggleSortOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
     /**
      * Whether a sort is active.
      */
-    isSorting: () => boolean;
+    isSorting: (name?: string) => boolean;
     /**
      * Whether a filter is active.
      */
-    isFiltering: () => boolean;
+    isFiltering: (name?: string) => boolean;
     /**
      * The current sorts.
      */
@@ -776,7 +818,12 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
     /**
      * Applies the given filter.
      */
-    applyFilter: (filter: string, value: any, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
+    applyFilter: (name: string, value: any, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
+};
+
+declare function useRoute(): {
+    current: Readonly<vue.Ref<string | undefined>>;
+    matches: <T extends string>(name: MaybeRefOrGetter<T>, parameters?: Record<string, any> | undefined) => boolean;
 };
 
-export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };
+export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements, useRoute };

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, nextTick, createApp, isRef, reactive, readonly, computed, watch, getCurrentInstance, onUnmounted } from 'vue';
+import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, nextTick, createApp, isRef, reactive, readonly, computed, toValue, watch, getCurrentInstance, onUnmounted } from 'vue';
 import { registerHook as registerHook$1, createRouter, makeUrl, router } from '@hybridly/core';
 export { can, route, router } from '@hybridly/core';
 import { debug, random, showPageComponentErrorModal, merge, clone, unsetPropertyAtPath, setValueAtPath } from '@hybridly/utils';
 import { progress } from '@hybridly/progress-plugin';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
 import qs from 'qs';
-import { getByPath } from '@clickbar/dot-diver';
+import { getByPath, setByPath } from '@clickbar/dot-diver';
 import isEqual from 'lodash.isequal';
 import { router as router$1 } from 'hybridly';
 
@@ -119,7 +119,9 @@ const wrapper = defineComponent({
         actual?.();
         nextTick(() => {
           debug.adapter("vue:render:view", "Calling mounted callbacks.");
-          onMountedCallbacks.pop()?.();
+          while (onMountedCallbacks.length) {
+            onMountedCallbacks.shift()?.();
+          }
         });
       };
       return h(state.view.value, {
@@ -280,7 +282,7 @@ async function initializeHybridly(options = {}) {
     routing: resolved.routing,
     adapter: {
       resolveComponent: resolve,
-      onWaitingForMount: (callback) => {
+      executeOnMounted: (callback) => {
         onMountedCallbacks.push(callback);
       },
       onDialogClose: async () => {
@@ -383,6 +385,7 @@ const RouterLink = defineComponent({
   setup(_, { slots, attrs }) {
     return (props) => {
       let data = props.data ?? {};
+      const preloads = props.preload ?? false;
       const url = makeUrl(props.href ?? "");
       const method = props.method?.toUpperCase() ?? "GET";
       const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
@@ -405,6 +408,24 @@ Please specify a more appropriate element using the "as" attribute. For example:
         ...attrs,
         ...as === "a" ? { href: url } : {},
         ...props.disabled ? { disabled: props.disabled } : {},
+        onMouseenter: () => {
+          if (!preloads) {
+            return;
+          }
+          if (props.external) {
+            return;
+          }
+          if (props.disabled) {
+            return;
+          }
+          if (method !== "GET") {
+            return;
+          }
+          router.preload(url, {
+            data,
+            ...props.options
+          });
+        },
         onClick: (event) => {
           if (props.external) {
             return;
@@ -461,6 +482,10 @@ Please specify a more appropriate element using the "as" attribute. For example:
       type: String,
       required: false,
       default: void 0
+    },
+    preload: {
+      type: Boolean,
+      default: false
     }
   }
 });
@@ -510,6 +535,12 @@ function useProperties() {
 function useProperty(path) {
   return computed(() => getByPath(state.context.value?.view.properties, path));
 }
+function setProperty(path, value) {
+  if (!state.context.value?.view.properties) {
+    return;
+  }
+  setByPath(state.context.value.view.properties, path, toValue(value));
+}
 
 function useContext() {
   return computed(() => state.context.value);
@@ -762,6 +793,16 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   const refinements = computed(() => properties[refinementsKeys]);
   const sortsKey = computed(() => refinements.value.keys.sorts);
   const filtersKey = computed(() => refinements.value.keys.filters);
+  defaultOptions = {
+    replace: false,
+    ...defaultOptions
+  };
+  function getSort(name) {
+    return refinements.value.sorts.find((sort) => sort.name === name);
+  }
+  function getFilter(name) {
+    return refinements.value.filters.find((sort) => sort.name === name);
+  }
   async function reset(options = {}) {
     return await router.reload({
       ...defaultOptions,
@@ -792,16 +833,21 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       }
     });
   }
-  async function applyFilter(filter, value, options = {}) {
-    if (!refinements.value.filters.find(({ name }) => name === filter)) {
+  async function applyFilter(name, value, options = {}) {
+    const filter = getFilter(name);
+    if (!filter) {
+      console.warn(`[Refinement] Filter "${name} does not exist."`);
       return;
     }
+    if (["", null].includes(value) || value === filter.default) {
+      value = void 0;
+    }
     return await router.reload({
       ...defaultOptions,
       ...options,
       data: {
         [filtersKey.value]: {
-          [filter]: value === "" ? void 0 : value
+          [name]: value
         }
       }
     });
@@ -821,16 +867,22 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   function currentFilters() {
     return refinements.value.filters.filter(({ is_active }) => is_active);
   }
-  function isSorting() {
+  function isSorting(name) {
+    if (name) {
+      return currentSorts().some((sort) => sort.name === name);
+    }
     return currentSorts().length !== 0;
   }
-  function isFiltering() {
+  function isFiltering(name) {
+    if (name) {
+      return currentFilters().some((filter) => filter.name === name);
+    }
     return currentFilters().length !== 0;
   }
-  async function toggleSort(sortName, options) {
-    const sort = refinements.value.sorts.find(({ name }) => name === sortName);
+  async function toggleSort(name, options) {
+    const sort = getSort(name);
     if (!sort) {
-      console.warn(`[Refinement] Sort "${sortName} does not exist."`);
+      console.warn(`[Refinement] Sort "${name} does not exist."`);
       return;
     }
     const next = options?.direction ? sort[options?.direction] : sort.next;
@@ -842,9 +894,22 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
       }
     });
   }
+  function bindFilter(name, options = {}) {
+    const transform = options?.transformValue ?? ((value) => value);
+    const watchFn = options?.watch ?? watch;
+    const _ref = ref(transform(refinements.value.filters.find((f) => f.name === name)?.value));
+    watch(() => refinements.value.filters.find((f) => f.name === name), (filter) => {
+      _ref.value = transform(filter?.value);
+    }, { deep: true });
+    watchFn(_ref, (value) => applyFilter(name, transform(value), options));
+    return _ref;
+  }
   return {
+    bindFilter,
     filters: toReactive(refinements.value.filters),
     sorts: toReactive(refinements.value.sorts),
+    getFilter,
+    getSort,
     reset,
     toggleSort,
     isSorting,
@@ -858,4 +923,18 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   };
 }
 
-export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };
+function useRoute() {
+  const current = ref(router$1.current());
+  function matches(name, parameters) {
+    return router$1.matches(toValue(name), parameters);
+  }
+  registerHook("navigated", () => {
+    current.value = router$1.current();
+  });
+  return {
+    current: readonly(current),
+    matches
+  };
+}
+
+export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, setProperty, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements, useRoute };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Vue adapter for Hybridly",
   "keywords": [
     "hybridly",
@@ -44,9 +44,9 @@
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "qs": "^6.11.2",
-    "@hybridly/core": "0.4.0",
-    "@hybridly/utils": "0.4.0",
-    "@hybridly/progress-plugin": "0.4.0"
+    "@hybridly/core": "0.4.2",
+    "@hybridly/progress-plugin": "0.4.2",
+    "@hybridly/utils": "0.4.2"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.195",