@inertiajs/vue3 1.0.0-beta.2 → 1.0.0-beta.5

package/types/createInertiaApp.d.ts

@@ -0,0 +1,29 @@
+import { Page } from '@inertiajs/core';
+import { App as VueApp, DefineComponent, Plugin } from 'vue';
+import { InertiaApp, InertiaAppProps } from './app';
+interface CreateInertiaAppProps {
+    id?: string;
+    resolve: (name: string) => DefineComponent | Promise<DefineComponent> | {
+        default: DefineComponent;
+    };
+    setup: (props: {
+        el: Element;
+        App: InertiaApp;
+        props: InertiaAppProps;
+        plugin: Plugin;
+    }) => void | VueApp;
+    title?: (title: string) => string;
+    progress?: false | {
+        delay?: number;
+        color?: string;
+        includeCSS?: boolean;
+        showSpinner?: boolean;
+    };
+    page?: Page;
+    render?: (app: VueApp) => Promise<string>;
+}
+export default function createInertiaApp({ id, resolve, setup, title, progress, page, render, }: CreateInertiaAppProps): Promise<{
+    head: string[];
+    body: string;
+}>;
+export {};

package/types/head.d.ts

@@ -0,0 +1,6 @@
+import { DefineComponent } from 'vue';
+export type InertiaHead = DefineComponent<{
+    title?: string;
+}>;
+declare const Head: InertiaHead;
+export default Head;

package/types/index.d.ts

@@ -0,0 +1,7 @@
+export { router } from '@inertiajs/core';
+export { usePage } from './app';
+export { default as createInertiaApp } from './createInertiaApp';
+export { default as Head } from './head';
+export { default as Link } from './link';
+export { default as useForm } from './useForm';
+export { default as useRemember } from './useRemember';

package/types/link.d.ts

@@ -0,0 +1,25 @@
+import { Method, PageProps, Progress } from '@inertiajs/core';
+import { DefineComponent } from 'vue';
+interface InertiaLinkProps {
+    as?: string;
+    data?: object;
+    href: string;
+    method?: Method;
+    headers?: object;
+    onClick?: (event: MouseEvent | KeyboardEvent) => void;
+    preserveScroll?: boolean | ((props: PageProps) => boolean);
+    preserveState?: boolean | ((props: PageProps) => boolean) | null;
+    replace?: boolean;
+    only?: string[];
+    onCancelToken?: (cancelToken: import('axios').CancelTokenSource) => void;
+    onBefore?: () => void;
+    onStart?: () => void;
+    onProgress?: (progress: Progress) => void;
+    onFinish?: () => void;
+    onCancel?: () => void;
+    onSuccess?: () => void;
+    queryStringArrayFormat?: 'brackets' | 'indices';
+}
+type InertiaLink = DefineComponent<InertiaLinkProps>;
+declare const Link: InertiaLink;
+export default Link;

package/types/remember.d.ts

@@ -0,0 +1,3 @@
+import { ComponentOptions } from 'vue';
+declare const remember: ComponentOptions;
+export default remember;

package/types/types.d.ts

@@ -0,0 +1,24 @@
+import { createHeadManager, Page, PageHandler, router } from '@inertiajs/core';
+import { ComponentPublicInstance } from 'vue';
+import useForm from './useForm';
+export type VuePageHandlerArgs = Parameters<PageHandler>[0] & {
+    component: ComponentPublicInstance | Promise<ComponentPublicInstance>;
+};
+declare module '@inertiajs/core' {
+    interface Router {
+        form: typeof useForm;
+    }
+}
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $inertia: typeof router;
+        $page: Page;
+        $headManager: ReturnType<typeof createHeadManager>;
+    }
+    interface ComponentCustomOptions {
+        remember?: string | string[] | {
+            data: string | string[];
+            key?: string | (() => string);
+        };
+    }
+}

package/types/useForm.d.ts

@@ -0,0 +1,30 @@
+import { Progress, VisitOptions } from '@inertiajs/core';
+interface InertiaFormProps<TForm extends Record<string, unknown>> {
+    isDirty: boolean;
+    errors: Partial<Record<keyof TForm, string>>;
+    hasErrors: boolean;
+    processing: boolean;
+    progress: Progress | null;
+    wasSuccessful: boolean;
+    recentlySuccessful: boolean;
+    data(): TForm;
+    transform(callback: (data: TForm) => object): this;
+    defaults(): this;
+    defaults(field: keyof TForm, value: string): this;
+    defaults(fields: Record<keyof TForm, string>): this;
+    reset(...fields: (keyof TForm)[]): this;
+    clearErrors(...fields: (keyof TForm)[]): this;
+    setError(field: keyof TForm, value: string): this;
+    setError(errors: Record<keyof TForm, string>): this;
+    submit(method: string, url: string, options?: Partial<VisitOptions>): void;
+    get(url: string, options?: Partial<VisitOptions>): void;
+    post(url: string, options?: Partial<VisitOptions>): void;
+    put(url: string, options?: Partial<VisitOptions>): void;
+    patch(url: string, options?: Partial<VisitOptions>): void;
+    delete(url: string, options?: Partial<VisitOptions>): void;
+    cancel(): void;
+}
+type InertiaForm<TForm extends Record<string, unknown>> = TForm & InertiaFormProps<TForm>;
+export default function useForm<TForm extends Record<string, unknown>>(data: TForm): InertiaForm<TForm>;
+export default function useForm<TForm extends Record<string, unknown>>(rememberKey: string, data: TForm): InertiaForm<TForm>;
+export {};

package/types/useRemember.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'vue';
+export default function useRemember<T extends object>(data: T & {
+    __rememberable?: boolean;
+    __remember?: Function;
+    __restore?: Function;
+}, key?: string): Ref<T> | T;

package/index.d.ts

@@ -1,117 +0,0 @@
-import * as Inertia from '@inertiajs/core'
-import { Ref, ComputedRef, App as VueApp, DefineComponent, Plugin } from 'vue'
-
-export interface InertiaAppProps {
-  initialPage: Inertia.Page
-  initialComponent?: object
-  resolveComponent?: (name: string) => DefineComponent | Promise<DefineComponent>
-  onHeadUpdate?: (elements: string[]) => void
-}
-
-type InertiaApp = DefineComponent<InertiaAppProps>
-
-export declare const App: InertiaApp
-
-export declare const plugin: Plugin
-
-export interface CreateInertiaAppProps {
-  id?: string
-  resolve: (name: string) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
-  setup: (props: { el: Element; app: InertiaApp; props: InertiaAppProps; plugin: Plugin }) => void | VueApp
-  title?: (title: string) => string
-  page?: Inertia.Page
-  render?: (app: VueApp) => Promise<string>
-}
-
-export declare function createInertiaApp(props: CreateInertiaAppProps): Promise<{ head: string[]; body: string } | void>
-
-export interface InertiaLinkProps {
-  as?: string
-  data?: object
-  href: string
-  method?: string
-  headers?: object
-  onClick?: (event: MouseEvent | KeyboardEvent) => void
-  preserveScroll?: boolean | ((props: Inertia.PageProps) => boolean)
-  preserveState?: boolean | ((props: Inertia.PageProps) => boolean) | null
-  replace?: boolean
-  only?: string[]
-  onCancelToken?: (cancelToken: import('axios').CancelTokenSource) => void
-  onBefore?: () => void
-  onStart?: () => void
-  onProgress?: (progress: Inertia.Progress) => void
-  onFinish?: () => void
-  onCancel?: () => void
-  onSuccess?: () => void
-}
-
-export type InertiaLink = DefineComponent<InertiaLinkProps>
-
-export declare const Link: InertiaLink
-
-export interface InertiaFormProps<TForm> {
-  isDirty: boolean
-  errors: Record<keyof TForm, string>
-  hasErrors: boolean
-  processing: boolean
-  progress: Inertia.Progress | null
-  wasSuccessful: boolean
-  recentlySuccessful: boolean
-  data(): TForm
-  transform(callback: (data: TForm) => object): this
-  defaults(): this
-  defaults(field: keyof TForm, value: string): this
-  defaults(fields: Record<keyof TForm, string>): this
-  reset(...fields: (keyof TForm)[]): this
-  clearErrors(...fields: (keyof TForm)[]): this
-  setError(field: keyof TForm, value: string): this
-  setError(errors: Record<keyof TForm, string>): this
-  submit(method: string, url: string, options?: Partial<Inertia.VisitOptions>): void
-  get(url: string, options?: Partial<Inertia.VisitOptions>): void
-  post(url: string, options?: Partial<Inertia.VisitOptions>): void
-  put(url: string, options?: Partial<Inertia.VisitOptions>): void
-  patch(url: string, options?: Partial<Inertia.VisitOptions>): void
-  delete(url: string, options?: Partial<Inertia.VisitOptions>): void
-  cancel(): void
-}
-
-export type InertiaForm<TForm> = TForm & InertiaFormProps<TForm>
-
-export declare function useForm<TForm>(data: TForm): InertiaForm<TForm>
-
-export declare function useForm<TForm>(rememberKey: string, data: TForm): InertiaForm<TForm>
-
-export declare function useRemember(data: object, key?: string): Ref<object>
-
-export declare function usePage<PageProps>(): {
-  props: ComputedRef<PageProps & Inertia.PageProps>
-  url: ComputedRef<string>
-  component: ComputedRef<string>
-  version: ComputedRef<string | null>
-}
-
-export declare function defineLayout(component: object): void
-
-export type InertiaHead = DefineComponent<{
-  title?: string
-}>
-
-export declare const Head: InertiaHead
-
-declare module '@vue/runtime-core' {
-  export interface ComponentCustomProperties {
-    $inertia: typeof Inertia.Inertia
-    $page: Inertia.Page
-    $headManager: ReturnType<typeof Inertia.createHeadManager>
-  }
-
-  export interface ComponentCustomOptions {
-    remember?:
-      | string
-      | string[]
-      | {
-          data: string | string[]
-          key?: string | (() => string)
-        }
-  }
-}

package/src/app.js

@@ -1,117 +0,0 @@
-import { createHeadManager, router } from '@inertiajs/core'
-import { computed, h, markRaw, ref, shallowRef } from 'vue'
-import remember from './remember'
-import useForm from './useForm'
-
-const component = ref(null)
-const page = ref({})
-const layout = shallowRef(null)
-const key = ref(null)
-let headManager = null
-
-export default {
-  name: 'Inertia',
-  props: {
-    initialPage: {
-      type: Object,
-      required: true,
-    },
-    initialComponent: {
-      type: Object,
-      required: false,
-    },
-    resolveComponent: {
-      type: Function,
-      required: false,
-    },
-    titleCallback: {
-      type: Function,
-      required: false,
-      default: (title) => title,
-    },
-    onHeadUpdate: {
-      type: Function,
-      required: false,
-      default: () => () => {},
-    },
-  },
-  setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }) {
-    component.value = initialComponent ? markRaw(initialComponent) : null
-    page.value = initialPage
-    key.value = null
-
-    const isServer = typeof window === 'undefined'
-    headManager = createHeadManager(isServer, titleCallback, onHeadUpdate)
-
-    if (!isServer) {
-      router.init({
-        initialPage,
-        resolveComponent,
-        swapComponent: async (args) => {
-          component.value = markRaw(args.component)
-          page.value = args.page
-          key.value = args.preserveState ? key.value : Date.now()
-        },
-      })
-
-      router.on('navigate', () => headManager.forceUpdate())
-    }
-
-    return () => {
-      if (component.value) {
-        component.value.inheritAttrs = !!component.value.inheritAttrs
-
-        const child = h(component.value, {
-          ...page.value.props,
-          key: key.value,
-        })
-
-        if (layout.value) {
-          component.value.layout = layout.value
-          layout.value = null
-        }
-
-        if (component.value.layout) {
-          if (typeof component.value.layout === 'function') {
-            return component.value.layout(h, child)
-          }
-
-          return (Array.isArray(component.value.layout) ? component.value.layout : [component.value.layout])
-            .concat(child)
-            .reverse()
-            .reduce((child, layout) => {
-              layout.inheritAttrs = !!layout.inheritAttrs
-              return h(layout, { ...page.value.props }, () => child)
-            })
-        }
-
-        return child
-      }
-    }
-  },
-}
-
-export const plugin = {
-  install(app) {
-    router.form = useForm
-
-    Object.defineProperty(app.config.globalProperties, '$inertia', { get: () => router })
-    Object.defineProperty(app.config.globalProperties, '$page', { get: () => page.value })
-    Object.defineProperty(app.config.globalProperties, '$headManager', { get: () => headManager })
-
-    app.mixin(remember)
-  },
-}
-
-export function usePage() {
-  return {
-    props: computed(() => page.value.props),
-    url: computed(() => page.value.url),
-    component: computed(() => page.value.component),
-    version: computed(() => page.value.version),
-  }
-}
-
-export function defineLayout(component) {
-  layout.value = component
-}

package/src/createInertiaApp.js

@@ -1,46 +0,0 @@
-import { setupProgress } from '@inertiajs/core'
-import { createSSRApp, h } from 'vue'
-import App, { plugin } from './app'
-
-export default async function createInertiaApp({ id = 'app', resolve, setup, title, progress = {}, page, render }) {
-  const isServer = typeof window === 'undefined'
-  const el = isServer ? null : document.getElementById(id)
-  const initialPage = page || JSON.parse(el.dataset.page)
-  const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
-
-  let head = []
-
-  const vueApp = await resolveComponent(initialPage.component).then((initialComponent) => {
-    return setup({
-      el,
-      App,
-      props: {
-        initialPage,
-        initialComponent,
-        resolveComponent,
-        titleCallback: title,
-        onHeadUpdate: isServer ? (elements) => (head = elements) : null,
-      },
-      plugin,
-    })
-  })
-
-  if (!isServer && progress) {
-    setupProgress(progress)
-  }
-
-  if (isServer) {
-    const body = await render(
-      createSSRApp({
-        render: () =>
-          h('div', {
-            id,
-            'data-page': JSON.stringify(initialPage),
-            innerHTML: render(vueApp),
-          }),
-      }),
-    )
-
-    return { head, body }
-  }
-}

package/src/head.js

@@ -1,93 +0,0 @@
-export default {
-  props: {
-    title: {
-      type: String,
-      required: false,
-    },
-  },
-  data() {
-    return {
-      provider: this.$headManager.createProvider(),
-    }
-  },
-  beforeUnmount() {
-    this.provider.disconnect()
-  },
-  methods: {
-    isUnaryTag(node) {
-      return (
-        [
-          '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.inertia = node.props['head-key'] !== undefined ? node.props['head-key'] : ''
-      const attrs = Object.keys(node.props).reduce((carry, name) => {
-        const value = node.props[name]
-        if (['key', 'head-key'].includes(name)) {
-          return carry
-        } else if (value === '') {
-          return carry + ` ${name}`
-        } else {
-          return carry + ` ${name}="${value}"`
-        }
-      }, '')
-      return `<${node.type}${attrs}>`
-    },
-    renderTagChildren(node) {
-      return typeof node.children === 'string'
-        ? node.children
-        : node.children.reduce((html, child) => html + this.renderTag(child), '')
-    },
-    renderTag(node) {
-      if (node.type.toString() === 'Symbol(Text)') {
-        return node.children
-      } else if (node.type.toString() === 'Symbol()') {
-        return ''
-      } else if (node.type.toString() === 'Symbol(Comment)') {
-        return ''
-      }
-      let html = this.renderTagStart(node)
-      if (node.children) {
-        html += this.renderTagChildren(node)
-      }
-      if (!this.isUnaryTag(node)) {
-        html += `</${node.type}>`
-      }
-      return html
-    },
-    addTitleElement(elements) {
-      if (this.title && !elements.find((tag) => tag.startsWith('<title'))) {
-        elements.push(`<title inertia>${this.title}</title>`)
-      }
-      return elements
-    },
-    renderNodes(nodes) {
-      return this.addTitleElement(
-        nodes
-          .flatMap((node) => (node.type.toString() === 'Symbol(Fragment)' ? node.children : node))
-          .map((node) => this.renderTag(node))
-          .filter((node) => node),
-      )
-    },
-  },
-  render() {
-    this.provider.update(this.renderNodes(this.$slots.default ? this.$slots.default() : []))
-  },
-}

package/src/index.js

@@ -1,7 +0,0 @@
-export { router } from '@inertiajs/core'
-export { defineLayout, usePage } from './app'
-export { default as createInertiaApp } from './createInertiaApp'
-export { default as Head } from './head'
-export { default as Link } from './link'
-export { default as useForm } from './useForm'
-export { default as useRemember } from './useRemember'

package/src/link.js

@@ -1,92 +0,0 @@
-import { mergeDataIntoQueryString, router, shouldIntercept } from '@inertiajs/core'
-import { h } from 'vue'
-
-export default {
-  name: 'Link',
-  props: {
-    as: {
-      type: String,
-      default: 'a',
-    },
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-    href: {
-      type: String,
-    },
-    method: {
-      type: String,
-      default: 'get',
-    },
-    replace: {
-      type: Boolean,
-      default: false,
-    },
-    preserveScroll: {
-      type: Boolean,
-      default: false,
-    },
-    preserveState: {
-      type: Boolean,
-      default: null,
-    },
-    only: {
-      type: Array,
-      default: () => [],
-    },
-    headers: {
-      type: Object,
-      default: () => ({}),
-    },
-    queryStringArrayFormat: {
-      type: String,
-      default: 'brackets',
-    },
-  },
-  setup(props, { slots, attrs }) {
-    return (props) => {
-      const as = props.as.toLowerCase()
-      const method = props.method.toLowerCase()
-      const [href, data] = mergeDataIntoQueryString(method, props.href || '', props.data, props.queryStringArrayFormat)
-
-      if (as === 'a' && method !== 'get') {
-        console.warn(
-          `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<Link href="${href}" method="${method}" as="button">...</Link>`,
-        )
-      }
-
-      return h(
-        props.as,
-        {
-          ...attrs,
-          ...(as === 'a' ? { href } : {}),
-          onClick: (event) => {
-            if (shouldIntercept(event)) {
-              event.preventDefault()
-
-              router.visit(href, {
-                data: data,
-                method: method,
-                replace: props.replace,
-                preserveScroll: props.preserveScroll,
-                preserveState: props.preserveState ?? method !== 'get',
-                only: props.only,
-                headers: props.headers,
-                onCancelToken: attrs.onCancelToken || (() => ({})),
-                onBefore: attrs.onBefore || (() => ({})),
-                onStart: attrs.onStart || (() => ({})),
-                onProgress: attrs.onProgress || (() => ({})),
-                onFinish: attrs.onFinish || (() => ({})),
-                onCancel: attrs.onCancel || (() => ({})),
-                onSuccess: attrs.onSuccess || (() => ({})),
-                onError: attrs.onError || (() => ({})),
-              })
-            }
-          },
-        },
-        slots,
-      )
-    }
-  },
-}

package/src/remember.js

@@ -1,65 +0,0 @@
-import { router } from '@inertiajs/core'
-import cloneDeep from 'lodash.clonedeep'
-
-export default {
-  created() {
-    if (!this.$options.remember) {
-      return
-    }
-
-    if (Array.isArray(this.$options.remember)) {
-      this.$options.remember = { data: this.$options.remember }
-    }
-
-    if (typeof this.$options.remember === 'string') {
-      this.$options.remember = { data: [this.$options.remember] }
-    }
-
-    if (typeof this.$options.remember.data === 'string') {
-      this.$options.remember = { data: [this.$options.remember.data] }
-    }
-
-    const rememberKey =
-      this.$options.remember.key instanceof Function
-        ? this.$options.remember.key.call(this)
-        : this.$options.remember.key
-
-    const restored = router.restore(rememberKey)
-
-    const rememberable = this.$options.remember.data.filter((key) => {
-      return !(this[key] !== null && typeof this[key] === 'object' && this[key].__rememberable === false)
-    })
-
-    const hasCallbacks = (key) => {
-      return (
-        this[key] !== null &&
-        typeof this[key] === 'object' &&
-        typeof this[key].__remember === 'function' &&
-        typeof this[key].__restore === 'function'
-      )
-    }
-
-    rememberable.forEach((key) => {
-      if (this[key] !== undefined && restored !== undefined && restored[key] !== undefined) {
-        hasCallbacks(key) ? this[key].__restore(restored[key]) : (this[key] = restored[key])
-      }
-
-      this.$watch(
-        key,
-        () => {
-          router.remember(
-            rememberable.reduce(
-              (data, key) => ({
-                ...data,
-                [key]: cloneDeep(hasCallbacks(key) ? this[key].__remember() : this[key]),
-              }),
-              {},
-            ),
-            rememberKey,
-          )
-        },
-        { immediate: true, deep: true },
-      )
-    })
-  },
-}

package/src/server.js

@@ -1 +0,0 @@
-export { default as default } from '@inertiajs/core/server'