@inertiajs/vue3 3.0.0-beta.2 → 3.0.0-beta.3

package/dist/index.js

@@ -676,7 +676,8 @@ async function createInertiaApp({
   render,
   defaults = {},
   http: http3,
-  layout: layout2
+  layout: layout2,
+  withApp
 } = {}) {
   config.replace(defaults);
   if (http3) {
@@ -707,6 +708,9 @@ async function createInertiaApp({
       } else {
         vueApp2 = createSSRApp({ render: () => h2(app_default, props) });
         vueApp2.use(plugin);
+        if (withApp) {
+          withApp(vueApp2, { ssr: true });
+        }
       }
       const html = await renderToString(vueApp2);
       const body = buildSSRBody(id, page3, html);
@@ -748,10 +752,16 @@ async function createInertiaApp({
     if (el.hasAttribute("data-server-rendered")) {
       const app = createSSRApp({ render: () => h2(app_default, props) });
       app.use(plugin);
+      if (withApp) {
+        withApp(app, { ssr: false });
+      }
       app.mount(el);
     } else {
       const app = createApp({ render: () => h2(app_default, props) });
       app.use(plugin);
+      if (withApp) {
+        withApp(app, { ssr: false });
+      }
       app.mount(el);
     }
   });
@@ -790,6 +800,7 @@ var deferred_default = defineComponent3({
   setup(props, { slots }) {
     const reloading = ref3(false);
     const activeReloads = /* @__PURE__ */ new Set();
+    const page2 = usePage();
     let removeStartListener = null;
     let removeFinishListener = null;
     onMounted(() => {
@@ -814,14 +825,13 @@ var deferred_default = defineComponent3({
       removeFinishListener?.();
       activeReloads.clear();
     });
-    return { reloading, slots };
-  },
-  render() {
-    const keys = Array.isArray(this.$props.data) ? this.$props.data : [this.$props.data];
-    if (!this.$slots.fallback) {
-      throw new Error("`<Deferred>` requires a `<template #fallback>` slot");
-    }
-    return keys.every((key2) => get2(this.$page.props, key2) !== void 0) ? this.$slots.default?.({ reloading: this.reloading }) : this.$slots.fallback({});
+    return () => {
+      const keys = Array.isArray(props.data) ? props.data : [props.data];
+      if (!slots.fallback) {
+        throw new Error("`<Deferred>` requires a `<template #fallback>` slot");
+      }
+      return keys.every((key2) => get2(page2.props, key2) !== void 0) ? slots.default?.({ reloading: reloading.value }) : slots.fallback({});
+    };
   }
 });
 
@@ -1163,7 +1173,111 @@ var form_default = Form;
 
 // src/head.ts
 import { escape } from "lodash-es";
-import { defineComponent as defineComponent5 } from "vue";
+import { defineComponent as defineComponent5, onBeforeUnmount as onBeforeUnmount2 } from "vue";
+function isUnaryTag(node) {
+  return typeof node.type === "string" && [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "keygen",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ].indexOf(node.type) > -1;
+}
+function renderTagStart(node) {
+  node.props = node.props || {};
+  node.props["data-inertia"] = node.props["head-key"] !== void 0 ? node.props["head-key"] : "";
+  const attrs = Object.keys(node.props).reduce((carry, name) => {
+    const value = String(node.props[name]);
+    if (["key", "head-key"].includes(name)) {
+      return carry;
+    } else if (value === "") {
+      return carry + ` ${name}`;
+    } else {
+      return carry + ` ${name}="${escape(value)}"`;
+    }
+  }, "");
+  return `<${String(node.type)}${attrs}>`;
+}
+function renderTagChildren(node) {
+  const { children } = node;
+  if (typeof children === "string") {
+    return children;
+  }
+  if (Array.isArray(children)) {
+    return children.reduce((html, child) => {
+      return html + renderTag(child);
+    }, "");
+  }
+  return "";
+}
+function isFunctionNode(node) {
+  return typeof node.type === "function";
+}
+function isComponentNode(node) {
+  return typeof node.type === "object";
+}
+function isCommentNode(node) {
+  return /(comment|cmt)/i.test(node.type.toString());
+}
+function isFragmentNode(node) {
+  return /(fragment|fgt|symbol\(\))/i.test(node.type.toString());
+}
+function isTextNode(node) {
+  return /(text|txt)/i.test(node.type.toString());
+}
+function renderTag(node) {
+  if (isTextNode(node)) {
+    return String(node.children);
+  } else if (isFragmentNode(node)) {
+    return "";
+  } else if (isCommentNode(node)) {
+    return "";
+  }
+  let html = renderTagStart(node);
+  if (node.children) {
+    html += renderTagChildren(node);
+  }
+  if (!isUnaryTag(node)) {
+    html += `</${String(node.type)}>`;
+  }
+  return html;
+}
+function addTitleElement(elements, title) {
+  if (title && !elements.find((tag) => tag.startsWith("<title"))) {
+    elements.push(`<title data-inertia="">${title}</title>`);
+  }
+  return elements;
+}
+function renderNodes(nodes, title) {
+  const elements = nodes.flatMap((node) => resolveNode(node)).map((node) => renderTag(node)).filter((node) => node);
+  return addTitleElement(elements, title);
+}
+function resolveNode(node) {
+  if (isFunctionNode(node)) {
+    return resolveNode(node.type());
+  } else if (isComponentNode(node)) {
+    console.warn(`Using components in the <Head> component is not supported.`);
+    return [];
+  } else if (isTextNode(node) && node.children) {
+    return node;
+  } else if (isFragmentNode(node) && node.children) {
+    return node.children.flatMap((child) => resolveNode(child));
+  } else if (isCommentNode(node)) {
+    return [];
+  } else {
+    return node;
+  }
+}
 var Head = defineComponent5({
   props: {
     title: {
@@ -1171,122 +1285,14 @@ var Head = defineComponent5({
       required: false
     }
   },
-  data() {
-    return {
-      provider: this.$headManager.createProvider()
+  setup(props, { slots }) {
+    const provider = headManager.createProvider();
+    onBeforeUnmount2(() => {
+      provider.disconnect();
+    });
+    return () => {
+      provider.update(renderNodes(slots.default ? slots.default() : [], props.title));
     };
-  },
-  beforeUnmount() {
-    this.provider.disconnect();
-  },
-  methods: {
-    isUnaryTag(node) {
-      return typeof node.type === "string" && [
-        "area",
-        "base",
-        "br",
-        "col",
-        "embed",
-        "hr",
-        "img",
-        "input",
-        "keygen",
-        "link",
-        "meta",
-        "param",
-        "source",
-        "track",
-        "wbr"
-      ].indexOf(node.type) > -1;
-    },
-    renderTagStart(node) {
-      node.props = node.props || {};
-      node.props["data-inertia"] = node.props["head-key"] !== void 0 ? node.props["head-key"] : "";
-      const attrs = Object.keys(node.props).reduce((carry, name) => {
-        const value = String(node.props[name]);
-        if (["key", "head-key"].includes(name)) {
-          return carry;
-        } else if (value === "") {
-          return carry + ` ${name}`;
-        } else {
-          return carry + ` ${name}="${escape(value)}"`;
-        }
-      }, "");
-      return `<${String(node.type)}${attrs}>`;
-    },
-    renderTagChildren(node) {
-      const { children } = node;
-      if (typeof children === "string") {
-        return children;
-      }
-      if (Array.isArray(children)) {
-        return children.reduce((html, child) => {
-          return html + this.renderTag(child);
-        }, "");
-      }
-      return "";
-    },
-    isFunctionNode(node) {
-      return typeof node.type === "function";
-    },
-    isComponentNode(node) {
-      return typeof node.type === "object";
-    },
-    isCommentNode(node) {
-      return /(comment|cmt)/i.test(node.type.toString());
-    },
-    isFragmentNode(node) {
-      return /(fragment|fgt|symbol\(\))/i.test(node.type.toString());
-    },
-    isTextNode(node) {
-      return /(text|txt)/i.test(node.type.toString());
-    },
-    renderTag(node) {
-      if (this.isTextNode(node)) {
-        return String(node.children);
-      } else if (this.isFragmentNode(node)) {
-        return "";
-      } else if (this.isCommentNode(node)) {
-        return "";
-      }
-      let html = this.renderTagStart(node);
-      if (node.children) {
-        html += this.renderTagChildren(node);
-      }
-      if (!this.isUnaryTag(node)) {
-        html += `</${String(node.type)}>`;
-      }
-      return html;
-    },
-    addTitleElement(elements) {
-      if (this.title && !elements.find((tag) => tag.startsWith("<title"))) {
-        elements.push(`<title data-inertia="">${this.title}</title>`);
-      }
-      return elements;
-    },
-    renderNodes(nodes) {
-      const elements = nodes.flatMap((node) => this.resolveNode(node)).map((node) => this.renderTag(node)).filter((node) => node);
-      return this.addTitleElement(elements);
-    },
-    resolveNode(node) {
-      if (this.isFunctionNode(node)) {
-        return this.resolveNode(node.type());
-      } else if (this.isComponentNode(node)) {
-        console.warn(`Using components in the <Head> component is not supported.`);
-        return [];
-      } else if (this.isTextNode(node) && node.children) {
-        return node;
-      } else if (this.isFragmentNode(node) && node.children) {
-        return node.children.flatMap((child) => this.resolveNode(child));
-      } else if (this.isCommentNode(node)) {
-        return [];
-      } else {
-        return node;
-      }
-    }
-  },
-  render() {
-    this.provider.update(this.renderNodes(this.$slots.default ? this.$slots.default() : []));
   }
 });
 var head_default = Head;
@@ -2119,7 +2125,7 @@ function useRemember(data, key2) {
 // src/whenVisible.ts
 import { router as router11 } from "@inertiajs/core";
 import { get as get3 } from "lodash-es";
-import { defineComponent as defineComponent8, h as h6 } from "vue";
+import { computed as computed6, defineComponent as defineComponent8, h as h6, nextTick, onUnmounted as onUnmounted6, ref as ref9, watch as watch5 } from "vue";
 var whenVisible_default = defineComponent8({
   name: "WhenVisible",
   slots: Object,
@@ -2143,95 +2149,90 @@ var whenVisible_default = defineComponent8({
       default: false
     }
   },
-  data() {
-    return {
-      loaded: false,
-      fetching: false,
-      observer: null
-    };
-  },
-  unmounted() {
-    this.observer?.disconnect();
-  },
-  computed: {
-    keys() {
-      return this.data ? Array.isArray(this.data) ? this.data : [this.data] : [];
-    }
-  },
-  created() {
+  setup(props, { slots }) {
+    const loaded = ref9(false);
+    const fetching = ref9(false);
+    const observer = ref9(null);
+    const elementRef = ref9(null);
     const page2 = usePage();
-    this.$watch(
-      () => this.keys.map((key2) => get3(page2.props, key2)),
-      () => {
-        const exists = this.keys.length > 0 && this.keys.every((key2) => get3(page2.props, key2) !== void 0);
-        this.loaded = exists;
-        if (exists && !this.always) {
-          return;
-        }
-        if (!this.observer || !exists) {
-          this.$nextTick(this.registerObserver);
-        }
-      },
-      { immediate: true }
-    );
-  },
-  methods: {
-    registerObserver() {
-      this.observer?.disconnect();
-      this.observer = new IntersectionObserver(
+    const keys = computed6(() => {
+      return props.data ? Array.isArray(props.data) ? props.data : [props.data] : [];
+    });
+    function getReloadParams() {
+      const reloadParams = { preserveErrors: true, ...props.params };
+      if (props.data) {
+        reloadParams.only = Array.isArray(props.data) ? props.data : [props.data];
+      }
+      return reloadParams;
+    }
+    function registerObserver() {
+      observer.value?.disconnect();
+      observer.value = new IntersectionObserver(
         (entries) => {
           if (!entries[0].isIntersecting) {
             return;
           }
-          if (this.fetching) {
+          if (fetching.value) {
             return;
           }
-          if (!this.always && this.loaded) {
+          if (!props.always && loaded.value) {
             return;
           }
-          this.fetching = true;
-          const reloadParams = this.getReloadParams();
+          fetching.value = true;
+          const reloadParams = getReloadParams();
           router11.reload({
             ...reloadParams,
             onStart: (e) => {
-              this.fetching = true;
+              fetching.value = true;
               reloadParams.onStart?.(e);
             },
             onFinish: (e) => {
-              this.loaded = true;
-              this.fetching = false;
+              loaded.value = true;
+              fetching.value = false;
               reloadParams.onFinish?.(e);
-              if (!this.always) {
-                this.observer?.disconnect();
+              if (!props.always) {
+                observer.value?.disconnect();
               }
             }
           });
         },
         {
-          rootMargin: `${this.$props.buffer}px`
+          rootMargin: `${props.buffer}px`
         }
       );
-      this.observer.observe(this.$el.nextSibling);
-    },
-    getReloadParams() {
-      const reloadParams = { preserveErrors: true, ...this.$props.params };
-      if (this.$props.data) {
-        reloadParams.only = Array.isArray(this.$props.data) ? this.$props.data : [this.$props.data];
+      if (elementRef.value) {
+        observer.value.observe(elementRef.value);
       }
-      return reloadParams;
-    }
-  },
-  render() {
-    const els = [];
-    if (this.$props.always || !this.loaded) {
-      els.push(h6(this.$props.as));
-    }
-    if (!this.loaded) {
-      els.push(this.$slots.fallback ? this.$slots.fallback({}) : null);
-    } else if (this.$slots.default) {
-      els.push(this.$slots.default({ fetching: this.fetching }));
     }
-    return els;
+    watch5(
+      () => keys.value.map((key2) => get3(page2.props, key2)),
+      () => {
+        const exists = keys.value.length > 0 && keys.value.every((key2) => get3(page2.props, key2) !== void 0);
+        loaded.value = exists;
+        if (exists && !props.always) {
+          return;
+        }
+        if (!observer.value || !exists) {
+          nextTick(registerObserver);
+        }
+      },
+      { immediate: true }
+    );
+    onUnmounted6(() => {
+      observer.value?.disconnect();
+    });
+    return () => {
+      const els = [];
+      if (props.always || !loaded.value) {
+        els.push(h6(props.as, { ref: elementRef }));
+      }
+      if (!loaded.value) {
+        els.push(slots.fallback ? slots.fallback({}) : null);
+      } else if (slots.default) {
+        els.push(slots.default({ fetching: fetching.value }));
+      }
+      return els;
+    };
   }
 });