@hybridly/vue 0.4.3 → 0.4.4

package/dist/index.cjs

@@ -3,7 +3,7 @@
 const vue = require('vue');
 const core = require('@hybridly/core');
 const utils = require('@hybridly/utils');
-const progressPlugin = require('@hybridly/progress-plugin');
+const nprogress = require('nprogress');
 const devtoolsApi = require('@vue/devtools-api');
 const qs = require('qs');
 const dotDiver = require('@clickbar/dot-diver');
@@ -12,9 +12,128 @@ const hybridly = require('hybridly');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
+const nprogress__default = /*#__PURE__*/_interopDefaultCompat(nprogress);
 const qs__default = /*#__PURE__*/_interopDefaultCompat(qs);
 const isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
 
+function progress(options) {
+  const resolved = {
+    delay: 250,
+    color: "#29d",
+    includeCSS: true,
+    spinner: false,
+    ...options
+  };
+  let timeout;
+  function startProgress() {
+    nprogress__default.start();
+  }
+  function finishProgress() {
+    if (nprogress__default.isStarted()) {
+      nprogress__default.done(true);
+    }
+  }
+  function cancelProgress() {
+    if (nprogress__default.isStarted()) {
+      nprogress__default.done(true);
+      nprogress__default.remove();
+    }
+  }
+  return core.definePlugin({
+    name: "hybridly:progress",
+    initialized() {
+      nprogress__default.configure({ showSpinner: resolved.spinner });
+      if (resolved.includeCSS) {
+        injectCSS(resolved.color);
+      }
+    },
+    start: (context) => {
+      if (context.pendingNavigation?.options.progress === false) {
+        return;
+      }
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        finishProgress();
+        startProgress();
+      }, resolved.delay);
+    },
+    progress: (progress2) => {
+      if (nprogress__default.isStarted() && progress2.percentage) {
+        nprogress__default.set(Math.max(nprogress__default.status, progress2.percentage / 100 * 0.9));
+      }
+    },
+    success: () => finishProgress(),
+    error: () => cancelProgress(),
+    fail: () => cancelProgress(),
+    after: () => clearTimeout(timeout)
+  });
+}
+function injectCSS(color) {
+  const element = document.createElement("style");
+  element.textContent = `
+    #nprogress {
+      pointer-events: none;
+			--progress-color: ${color};
+    }
+    #nprogress .bar {
+      background: var(--progress-color);
+      position: fixed;
+      z-index: 1031;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+    #nprogress .peg {
+      display: block;
+      position: absolute;
+      right: 0px;
+      width: 100px;
+      height: 100%;
+      box-shadow: 0 0 10px var(--progress-color), 0 0 5px var(--progress-color);
+      opacity: 1.0;
+      -webkit-transform: rotate(3deg) translate(0px, -4px);
+          -ms-transform: rotate(3deg) translate(0px, -4px);
+              transform: rotate(3deg) translate(0px, -4px);
+    }
+    #nprogress .spinner {
+      display: block;
+      position: fixed;
+      z-index: 1031;
+      top: 15px;
+      right: 15px;
+    }
+    #nprogress .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border: solid 2px transparent;
+      border-top-color: var(--progress-color);
+      border-left-color: var(--progress-color);
+      border-radius: 50%;
+      -webkit-animation: nprogress-spinner 400ms linear infinite;
+              animation: nprogress-spinner 400ms linear infinite;
+    }
+    .nprogress-custom-parent {
+      overflow: hidden;
+      position: relative;
+    }
+    .nprogress-custom-parent #nprogress .spinner,
+    .nprogress-custom-parent #nprogress .bar {
+      position: absolute;
+    }
+    @-webkit-keyframes nprogress-spinner {
+      0%   { -webkit-transform: rotate(0deg); }
+      100% { -webkit-transform: rotate(360deg); }
+    }
+    @keyframes nprogress-spinner {
+      0%   { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `;
+  document.head.appendChild(element);
+}
+
 const DEBUG_KEY = "vue:state:dialog";
 const dialogStore = {
   state: {
@@ -278,6 +397,29 @@ const devtools = {
   }
 };
 
+function viewTransition() {
+  if (!document.startViewTransition) {
+    return { name: "view-transition" };
+  }
+  let domUpdated;
+  return {
+    name: "view-transition",
+    navigating: async ({ isInitial }) => {
+      if (isInitial) {
+        return;
+      }
+      return new Promise((confirmTransitionStarted) => document.startViewTransition(() => {
+        confirmTransitionStarted(true);
+        return new Promise((resolve) => domUpdated = resolve);
+      }));
+    },
+    mounted: () => {
+      domUpdated?.();
+      domUpdated = void 0;
+    }
+  };
+}
+
 async function initializeHybridly(options = {}) {
   const resolved = options;
   const { element, payload, resolve } = prepare(resolved);
@@ -363,11 +505,12 @@ function prepare(options) {
     }
     return await resolveViewComponent(name, options);
   };
+  options.plugins ?? (options.plugins = []);
   if (options.progress !== false) {
-    options.plugins = [
-      progressPlugin.progress(typeof options.progress === "object" ? options.progress : {}),
-      ...options.plugins ?? []
-    ];
+    options.plugins.push(progress(typeof options.progress === "object" ? options.progress : {}));
+  }
+  if (options.viewTransition !== false) {
+    options.plugins.push(viewTransition());
   }
   return {
     isServer,

package/dist/index.d.cts

@@ -4,11 +4,38 @@ 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';
 import { Axios, AxiosResponse, AxiosProgressEvent } from 'axios';
-import { ProgressOptions } from '@hybridly/progress-plugin';
 import * as _vue_shared from '@vue/shared';
 import { RequestData } from '@hybridly/utils';
 import { SearchableObject, Path, PathValue } from '@clickbar/dot-diver';
 
+interface ProgressOptions {
+    /**
+     * The delay after which the progress bar will
+     * appear during navigation, in milliseconds.
+     *
+     * @default 250
+     */
+    delay: number;
+    /**
+     * The color of the progress bar.
+     *
+     * Defaults to #29d.
+     */
+    color: string;
+    /**
+     * Whether to include the default NProgress styles.
+     *
+     * Defaults to true.
+     */
+    includeCSS: boolean;
+    /**
+     * Whether the NProgress spinner will be shown.
+     *
+     * Defaults to false.
+     */
+    spinner: boolean;
+}
+
 /**
  * Initializes Hybridly's router and context.
  */
@@ -34,6 +61,11 @@ interface InitializeOptions {
     plugins?: Plugin$1[];
     /** Custom Axios instance. */
     axios?: Axios;
+    /**
+     * Enables the View Transition API, if supported.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition
+     */
+    viewTransition?: boolean;
 }
 interface SetupArguments {
     /** DOM element to mount Vue on. */
@@ -294,6 +326,11 @@ interface NavigationOptions {
      * @internal This is an advanced property meant to be used internally.
      */
     isBackForward?: boolean;
+    /**
+     * Defines whether this navigation is the first to happen after a direct page load.
+     * @internal This is an advanced property meant to be used internally.
+     */
+    isInitial?: boolean;
 }
 type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {

package/dist/index.d.mts

@@ -4,11 +4,38 @@ 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';
 import { Axios, AxiosResponse, AxiosProgressEvent } from 'axios';
-import { ProgressOptions } from '@hybridly/progress-plugin';
 import * as _vue_shared from '@vue/shared';
 import { RequestData } from '@hybridly/utils';
 import { SearchableObject, Path, PathValue } from '@clickbar/dot-diver';
 
+interface ProgressOptions {
+    /**
+     * The delay after which the progress bar will
+     * appear during navigation, in milliseconds.
+     *
+     * @default 250
+     */
+    delay: number;
+    /**
+     * The color of the progress bar.
+     *
+     * Defaults to #29d.
+     */
+    color: string;
+    /**
+     * Whether to include the default NProgress styles.
+     *
+     * Defaults to true.
+     */
+    includeCSS: boolean;
+    /**
+     * Whether the NProgress spinner will be shown.
+     *
+     * Defaults to false.
+     */
+    spinner: boolean;
+}
+
 /**
  * Initializes Hybridly's router and context.
  */
@@ -34,6 +61,11 @@ interface InitializeOptions {
     plugins?: Plugin$1[];
     /** Custom Axios instance. */
     axios?: Axios;
+    /**
+     * Enables the View Transition API, if supported.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition
+     */
+    viewTransition?: boolean;
 }
 interface SetupArguments {
     /** DOM element to mount Vue on. */
@@ -294,6 +326,11 @@ interface NavigationOptions {
      * @internal This is an advanced property meant to be used internally.
      */
     isBackForward?: boolean;
+    /**
+     * Defines whether this navigation is the first to happen after a direct page load.
+     * @internal This is an advanced property meant to be used internally.
+     */
+    isInitial?: boolean;
 }
 type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {

package/dist/index.d.ts

@@ -4,11 +4,38 @@ 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';
 import { Axios, AxiosResponse, AxiosProgressEvent } from 'axios';
-import { ProgressOptions } from '@hybridly/progress-plugin';
 import * as _vue_shared from '@vue/shared';
 import { RequestData } from '@hybridly/utils';
 import { SearchableObject, Path, PathValue } from '@clickbar/dot-diver';
 
+interface ProgressOptions {
+    /**
+     * The delay after which the progress bar will
+     * appear during navigation, in milliseconds.
+     *
+     * @default 250
+     */
+    delay: number;
+    /**
+     * The color of the progress bar.
+     *
+     * Defaults to #29d.
+     */
+    color: string;
+    /**
+     * Whether to include the default NProgress styles.
+     *
+     * Defaults to true.
+     */
+    includeCSS: boolean;
+    /**
+     * Whether the NProgress spinner will be shown.
+     *
+     * Defaults to false.
+     */
+    spinner: boolean;
+}
+
 /**
  * Initializes Hybridly's router and context.
  */
@@ -34,6 +61,11 @@ interface InitializeOptions {
     plugins?: Plugin$1[];
     /** Custom Axios instance. */
     axios?: Axios;
+    /**
+     * Enables the View Transition API, if supported.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition
+     */
+    viewTransition?: boolean;
 }
 interface SetupArguments {
     /** DOM element to mount Vue on. */
@@ -294,6 +326,11 @@ interface NavigationOptions {
      * @internal This is an advanced property meant to be used internally.
      */
     isBackForward?: boolean;
+    /**
+     * Defines whether this navigation is the first to happen after a direct page load.
+     * @internal This is an advanced property meant to be used internally.
+     */
+    isInitial?: boolean;
 }
 type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {

package/dist/index.mjs

@@ -1,14 +1,132 @@
 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';
+import { definePlugin, 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 nprogress from 'nprogress';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
 import qs from 'qs';
 import { getByPath, setByPath } from '@clickbar/dot-diver';
 import isEqual from 'lodash.isequal';
 import { router as router$1 } from 'hybridly';
 
+function progress(options) {
+  const resolved = {
+    delay: 250,
+    color: "#29d",
+    includeCSS: true,
+    spinner: false,
+    ...options
+  };
+  let timeout;
+  function startProgress() {
+    nprogress.start();
+  }
+  function finishProgress() {
+    if (nprogress.isStarted()) {
+      nprogress.done(true);
+    }
+  }
+  function cancelProgress() {
+    if (nprogress.isStarted()) {
+      nprogress.done(true);
+      nprogress.remove();
+    }
+  }
+  return definePlugin({
+    name: "hybridly:progress",
+    initialized() {
+      nprogress.configure({ showSpinner: resolved.spinner });
+      if (resolved.includeCSS) {
+        injectCSS(resolved.color);
+      }
+    },
+    start: (context) => {
+      if (context.pendingNavigation?.options.progress === false) {
+        return;
+      }
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        finishProgress();
+        startProgress();
+      }, resolved.delay);
+    },
+    progress: (progress2) => {
+      if (nprogress.isStarted() && progress2.percentage) {
+        nprogress.set(Math.max(nprogress.status, progress2.percentage / 100 * 0.9));
+      }
+    },
+    success: () => finishProgress(),
+    error: () => cancelProgress(),
+    fail: () => cancelProgress(),
+    after: () => clearTimeout(timeout)
+  });
+}
+function injectCSS(color) {
+  const element = document.createElement("style");
+  element.textContent = `
+    #nprogress {
+      pointer-events: none;
+			--progress-color: ${color};
+    }
+    #nprogress .bar {
+      background: var(--progress-color);
+      position: fixed;
+      z-index: 1031;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+    #nprogress .peg {
+      display: block;
+      position: absolute;
+      right: 0px;
+      width: 100px;
+      height: 100%;
+      box-shadow: 0 0 10px var(--progress-color), 0 0 5px var(--progress-color);
+      opacity: 1.0;
+      -webkit-transform: rotate(3deg) translate(0px, -4px);
+          -ms-transform: rotate(3deg) translate(0px, -4px);
+              transform: rotate(3deg) translate(0px, -4px);
+    }
+    #nprogress .spinner {
+      display: block;
+      position: fixed;
+      z-index: 1031;
+      top: 15px;
+      right: 15px;
+    }
+    #nprogress .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border: solid 2px transparent;
+      border-top-color: var(--progress-color);
+      border-left-color: var(--progress-color);
+      border-radius: 50%;
+      -webkit-animation: nprogress-spinner 400ms linear infinite;
+              animation: nprogress-spinner 400ms linear infinite;
+    }
+    .nprogress-custom-parent {
+      overflow: hidden;
+      position: relative;
+    }
+    .nprogress-custom-parent #nprogress .spinner,
+    .nprogress-custom-parent #nprogress .bar {
+      position: absolute;
+    }
+    @-webkit-keyframes nprogress-spinner {
+      0%   { -webkit-transform: rotate(0deg); }
+      100% { -webkit-transform: rotate(360deg); }
+    }
+    @keyframes nprogress-spinner {
+      0%   { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `;
+  document.head.appendChild(element);
+}
+
 const DEBUG_KEY = "vue:state:dialog";
 const dialogStore = {
   state: {
@@ -272,6 +390,29 @@ const devtools = {
   }
 };
 
+function viewTransition() {
+  if (!document.startViewTransition) {
+    return { name: "view-transition" };
+  }
+  let domUpdated;
+  return {
+    name: "view-transition",
+    navigating: async ({ isInitial }) => {
+      if (isInitial) {
+        return;
+      }
+      return new Promise((confirmTransitionStarted) => document.startViewTransition(() => {
+        confirmTransitionStarted(true);
+        return new Promise((resolve) => domUpdated = resolve);
+      }));
+    },
+    mounted: () => {
+      domUpdated?.();
+      domUpdated = void 0;
+    }
+  };
+}
+
 async function initializeHybridly(options = {}) {
   const resolved = options;
   const { element, payload, resolve } = prepare(resolved);
@@ -357,11 +498,12 @@ function prepare(options) {
     }
     return await resolveViewComponent(name, options);
   };
+  options.plugins ?? (options.plugins = []);
   if (options.progress !== false) {
-    options.plugins = [
-      progress(typeof options.progress === "object" ? options.progress : {}),
-      ...options.plugins ?? []
-    ];
+    options.plugins.push(progress(typeof options.progress === "object" ? options.progress : {}));
+  }
+  if (options.viewTransition !== false) {
+    options.plugins.push(viewTransition());
   }
   return {
     isServer,

package/package.json

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