@studiometa/ui 0.1.1 → 0.2.2

package/atoms/LargeText/LargeText.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base, withMountWhenInView } from "@studiometa/js-toolkit";
+import { damp, matrix, clamp, nextFrame } from "@studiometa/js-toolkit/utils";
+class LargeText extends withMountWhenInView(Base, { rootMargin: "50%" }) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "translateX", 0);
+    __publicField(this, "deltaY", 0);
+    __publicField(this, "transform", {
+      skewX: 0,
+      translateX: 0
+    });
+    __publicField(this, "width", 0);
+  }
+  mounted() {
+    this.width = this.$refs.target.clientWidth;
+  }
+  resized() {
+    this.width = this.$refs.target.clientWidth;
+  }
+  scrolled(props) {
+    this.deltaY = props.delta.y;
+  }
+  ticked() {
+    this.translateX -= Math.abs(this.deltaY) + 1;
+    this.transform.translateX = damp(this.translateX, this.transform.translateX, 0.25);
+    this.transform.skewX = damp(clamp(this.deltaY / 20 * -1, -0.5, 0.5), this.transform.skewX, 0.25);
+    if (Math.abs(this.transform.translateX) >= this.width) {
+      this.translateX = 0;
+      this.transform.translateX = 0;
+    }
+    nextFrame(() => {
+      this.$refs.target.style.transform = matrix(this.transform) + " translateZ(0px)";
+    });
+  }
+}
+__publicField(LargeText, "config", {
+  name: "LargeText",
+  refs: ["target"]
+});
+export {
+  LargeText as default
+};

package/atoms/LazyInclude/LazyInclude.cjs

@@ -0,0 +1,72 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/LazyInclude/LazyInclude.js
+var LazyInclude_exports = {};
+__export(LazyInclude_exports, {
+  default: () => LazyInclude
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var LazyInclude = class extends import_js_toolkit.Base {
+  mounted() {
+    if (!this.$options.src) {
+      this.$log("The `src` option is missing. Define it with the `data-option-src` attribute");
+      return;
+    }
+    fetch(this.$options.src).then((response) => response.text()).then((content) => {
+      this.$emit("content", content);
+    }).catch((error) => {
+      this.$emit("error", error);
+    }).finally(() => {
+      this.$emit("always");
+    });
+  }
+  onContent(content) {
+    this.$refs.loading.style.display = "none";
+    this.$el.innerHTML = content;
+  }
+  onError() {
+    this.$refs.error.style.display = "block";
+  }
+  onAlways() {
+    if (this.$options.terminateOnLoad) {
+      this.$terminate();
+    }
+  }
+};
+__publicField(LazyInclude, "config", {
+  name: "LazyInclude",
+  refs: ["loading", "error"],
+  emits: ["content", "error", "always"],
+  options: {
+    src: String,
+    terminateOnLoad: Boolean
+  }
+});
+module.exports = __toCommonJS(LazyInclude_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/LazyInclude/LazyInclude.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @typedef {{ src: string, terminateOnLoad: boolean }} LazyIncludeOptions
+ * @typedef {{ loading: HTMLElement, error: HTMLElement }} LazyIncludeRefs
+ * @typedef {LazyInclude & { $refs: LazyIncludeRefs, $options: LazyIncludeOptions }} LazyIncludeInterface
+ */
+/**
+ * LazyInclude class.
+ */
+export default class LazyInclude extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        emits: string[];
+        options: {
+            src: StringConstructor;
+            terminateOnLoad: BooleanConstructor;
+        };
+    };
+    /**
+     * Load the lazy content on mount.
+     *
+     * @this {LazyIncludeInterface}
+     * @returns {void}
+     */
+    mounted(): void;
+    /**
+     * Set content.
+     *
+     * @this {LazyIncludeInterface}
+     * @param   {string} content
+     * @returns {void}
+     */
+    onContent(content: string): void;
+    /**
+     * Set error.
+     *
+     * @this {LazyIncludeInterface}
+     * @returns {void}
+     */
+    onError(): void;
+    /**
+     * Always.
+     *
+     * @this {LazyIncludeInterface}
+     * @returns {void}
+     */
+    onAlways(): void;
+}
+export type LazyIncludeOptions = {
+    src: string;
+    terminateOnLoad: boolean;
+};
+export type LazyIncludeRefs = {
+    loading: HTMLElement;
+    error: HTMLElement;
+};
+export type LazyIncludeInterface = LazyInclude & {
+    $refs: LazyIncludeRefs;
+    $options: LazyIncludeOptions;
+};
+import { Base } from "@studiometa/js-toolkit";

package/atoms/LazyInclude/LazyInclude.js

@@ -0,0 +1,46 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+class LazyInclude extends Base {
+  mounted() {
+    if (!this.$options.src) {
+      this.$log("The `src` option is missing. Define it with the `data-option-src` attribute");
+      return;
+    }
+    fetch(this.$options.src).then((response) => response.text()).then((content) => {
+      this.$emit("content", content);
+    }).catch((error) => {
+      this.$emit("error", error);
+    }).finally(() => {
+      this.$emit("always");
+    });
+  }
+  onContent(content) {
+    this.$refs.loading.style.display = "none";
+    this.$el.innerHTML = content;
+  }
+  onError() {
+    this.$refs.error.style.display = "block";
+  }
+  onAlways() {
+    if (this.$options.terminateOnLoad) {
+      this.$terminate();
+    }
+  }
+}
+__publicField(LazyInclude, "config", {
+  name: "LazyInclude",
+  refs: ["loading", "error"],
+  emits: ["content", "error", "always"],
+  options: {
+    src: String,
+    terminateOnLoad: Boolean
+  }
+});
+export {
+  LazyInclude as default
+};

package/atoms/Prefetch/AbstractPrefetch.cjs

@@ -0,0 +1,84 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/Prefetch/AbstractPrefetch.js
+var AbstractPrefetch_exports = {};
+__export(AbstractPrefetch_exports, {
+  default: () => AbstractPrefetch
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var _AbstractPrefetch = class extends import_js_toolkit.Base {
+  isPrefetchable(url, options) {
+    if (!url || !url.href) {
+      return false;
+    }
+    if (!options.prefetch) {
+      return false;
+    }
+    if (url.origin !== window.location.origin) {
+      return false;
+    }
+    if (!["http:", "https:"].includes(url.protocol)) {
+      return false;
+    }
+    if (url.protocol === "http:" && window.location.protocol === "https:") {
+      return false;
+    }
+    if (url.hash && url.pathname + url.search === window.location.pathname + window.location.search) {
+      return false;
+    }
+    return true;
+  }
+  prefetch(url) {
+    if (_AbstractPrefetch.prefetchedUrls.has(url.href)) {
+      return;
+    }
+    if (!this.isPrefetchable(url, this.$options)) {
+      return;
+    }
+    const prefetcher = document.createElement("link");
+    prefetcher.rel = "prefetch";
+    prefetcher.href = url.href;
+    document.head.appendChild(prefetcher);
+    _AbstractPrefetch.prefetchedUrls.add(url.href);
+    this.$terminate();
+  }
+};
+var AbstractPrefetch = _AbstractPrefetch;
+__publicField(AbstractPrefetch, "config", {
+  name: "AbstractPrefetch",
+  options: {
+    prefetch: {
+      type: Boolean,
+      default: true
+    }
+  }
+});
+__publicField(AbstractPrefetch, "prefetchedUrls", /* @__PURE__ */ new Set());
+module.exports = __toCommonJS(AbstractPrefetch_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/Prefetch/AbstractPrefetch.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @typedef {{ prefetch: boolean }} PrefetchOptions
+ */
+/**
+ * @typedef {AbstractPrefetch & {
+ *   $options: PrefetchOptions
+ * }} AbstractPrefetchInterface
+ */
+/**
+ * AbstractPrefetch class.
+ */
+export default class AbstractPrefetch extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        options: {
+            prefetch: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        };
+    };
+    /**
+     * Store prefetched URL.
+     * @type {Set<string>}
+     */
+    static prefetchedUrls: Set<string>;
+    /**
+     * Is the given anchor prefetchable?
+     * @param   {URL}  url
+     * @param   {PrefetchOptions} options
+     * @returns {boolean}
+     */
+    isPrefetchable(url: URL, options: PrefetchOptions): boolean;
+    /**
+     * Prefetch the given URL and terminate the component.
+     *
+     * @this  {AbstractPrefetchInterface}
+     * @param {URL} url
+     * @returns {void}
+     */
+    prefetch(url: URL): void;
+}
+export type PrefetchOptions = {
+    prefetch: boolean;
+};
+export type AbstractPrefetchInterface = AbstractPrefetch & {
+    $options: PrefetchOptions;
+};
+import { Base } from "@studiometa/js-toolkit";

package/atoms/Prefetch/AbstractPrefetch.js

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+const _AbstractPrefetch = class extends Base {
+  isPrefetchable(url, options) {
+    if (!url || !url.href) {
+      return false;
+    }
+    if (!options.prefetch) {
+      return false;
+    }
+    if (url.origin !== window.location.origin) {
+      return false;
+    }
+    if (!["http:", "https:"].includes(url.protocol)) {
+      return false;
+    }
+    if (url.protocol === "http:" && window.location.protocol === "https:") {
+      return false;
+    }
+    if (url.hash && url.pathname + url.search === window.location.pathname + window.location.search) {
+      return false;
+    }
+    return true;
+  }
+  prefetch(url) {
+    if (_AbstractPrefetch.prefetchedUrls.has(url.href)) {
+      return;
+    }
+    if (!this.isPrefetchable(url, this.$options)) {
+      return;
+    }
+    const prefetcher = document.createElement("link");
+    prefetcher.rel = "prefetch";
+    prefetcher.href = url.href;
+    document.head.appendChild(prefetcher);
+    _AbstractPrefetch.prefetchedUrls.add(url.href);
+    this.$terminate();
+  }
+};
+let AbstractPrefetch = _AbstractPrefetch;
+__publicField(AbstractPrefetch, "config", {
+  name: "AbstractPrefetch",
+  options: {
+    prefetch: {
+      type: Boolean,
+      default: true
+    }
+  }
+});
+__publicField(AbstractPrefetch, "prefetchedUrls", /* @__PURE__ */ new Set());
+export {
+  AbstractPrefetch as default
+};

package/atoms/Prefetch/PrefetchWhenOver.cjs

@@ -0,0 +1,65 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/Prefetch/PrefetchWhenOver.js
+var PrefetchWhenOver_exports = {};
+__export(PrefetchWhenOver_exports, {
+  default: () => PrefetchWhenOver
+});
+var import_AbstractPrefetch = __toESM(require("./AbstractPrefetch.cjs"), 1);
+var PrefetchWhenOver = class extends import_AbstractPrefetch.default {
+  onMouseenter() {
+    this.prefetch(new URL(this.$el.href));
+  }
+};
+__publicField(PrefetchWhenOver, "config", __spreadProps(__spreadValues({}, import_AbstractPrefetch.default.config), {
+  name: "PrefetchWhenOver"
+}));
+module.exports = __toCommonJS(PrefetchWhenOver_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/Prefetch/PrefetchWhenOver.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @typedef {PrefetchWhenOver & {
+ *   $el: HTMLAnchorElement
+ * }} PrefetchWhenOverInterface
+ */
+/**
+ * PrefetchWhenOver class.
+ */
+export default class PrefetchWhenOver extends AbstractPrefetch {
+    /**
+     * Prefetch on mouseenter.
+     *
+     * @this    {PrefetchWhenOverInterface}
+     * @returns {void}
+     */
+    onMouseenter(): void;
+}
+export type PrefetchWhenOverInterface = PrefetchWhenOver & {
+    $el: HTMLAnchorElement;
+};
+import AbstractPrefetch from "./AbstractPrefetch.js";

package/atoms/Prefetch/PrefetchWhenOver.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import AbstractPrefetch from "./AbstractPrefetch.js";
+class PrefetchWhenOver extends AbstractPrefetch {
+  onMouseenter() {
+    this.prefetch(new URL(this.$el.href));
+  }
+}
+__publicField(PrefetchWhenOver, "config", __spreadProps(__spreadValues({}, AbstractPrefetch.config), {
+  name: "PrefetchWhenOver"
+}));
+export {
+  PrefetchWhenOver as default
+};

package/atoms/Prefetch/PrefetchWhenVisible.cjs

@@ -0,0 +1,66 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/Prefetch/PrefetchWhenVisible.js
+var PrefetchWhenVisible_exports = {};
+__export(PrefetchWhenVisible_exports, {
+  default: () => PrefetchWhenVisible
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_AbstractPrefetch = __toESM(require("./AbstractPrefetch.cjs"), 1);
+var PrefetchWhenVisible = class extends (0, import_js_toolkit.withMountWhenInView)(import_AbstractPrefetch.default) {
+  mounted() {
+    this.prefetch(new URL(this.$el.href));
+  }
+};
+__publicField(PrefetchWhenVisible, "config", __spreadProps(__spreadValues({}, import_AbstractPrefetch.default.config), {
+  name: "PrefetchWhenVisible"
+}));
+module.exports = __toCommonJS(PrefetchWhenVisible_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/Prefetch/PrefetchWhenVisible.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @typedef {PrefetchWhenVisible & {
+ *   $el: HTMLAnchorElement
+ * }} PrefetchWhenVisibleInterface
+ */
+/**
+ * PrefetchWhenVisible class.
+ */
+export default class PrefetchWhenVisible extends AbstractPrefetch {
+    /**
+     * Prefetch on mount.
+     *
+     * @this    {PrefetchWhenVisibleInterface}
+     * @returns {void}
+     */
+    mounted(): void;
+}
+export type PrefetchWhenVisibleInterface = PrefetchWhenVisible & {
+    $el: HTMLAnchorElement;
+};
+import AbstractPrefetch from "./AbstractPrefetch.js";

package/atoms/Prefetch/PrefetchWhenVisible.js

@@ -0,0 +1,36 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { withMountWhenInView } from "@studiometa/js-toolkit";
+import AbstractPrefetch from "./AbstractPrefetch.js";
+class PrefetchWhenVisible extends withMountWhenInView(AbstractPrefetch) {
+  mounted() {
+    this.prefetch(new URL(this.$el.href));
+  }
+}
+__publicField(PrefetchWhenVisible, "config", __spreadProps(__spreadValues({}, AbstractPrefetch.config), {
+  name: "PrefetchWhenVisible"
+}));
+export {
+  PrefetchWhenVisible as default
+};