[ { "path": ".editorconfig", "content": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.{php,xml,htaccess}]\nindent_size = 4\n\n[*.blade.php]\nindent_size = 2\n" }, { "path": ".gitattributes", "content": "# exclude playgrounds/ since otherwise the project gets classified as mainly php based.\n# https://github.com/github-linguist/linguist/blob/master/docs/overrides.md#summary\nplaygrounds/** linguist-vendored\n\n* text=auto\n" }, { "path": ".github/CODE_OF_CONDUCT.md", "content": "# Code of Conduct\n\nThe Laravel Code of Conduct can be found in the [Laravel documentation](https://laravel.com/docs/contributions#code-of-conduct).\n" }, { "path": ".github/ISSUE_TEMPLATE/0-bug-report.yml", "content": "name: Bug Report\ndescription: 'Submit an issue.'\nbody:\n - type: markdown\n attributes:\n value: |\n Please read [our full contribution guide](https://laravel.com/docs/contributions#bug-reports) before submitting bug reports.\n\n Before submitting, please confirm:\n - You have **upgraded to the latest version** of both the JS package (`@inertiajs/{adapter}`) and the server-side adapter (`inertiajs/inertia-laravel`) and confirmed the issue still exists\n - Only Inertia **2.x** and **3.x (beta)** are supported. Issues for 0.x or 1.x will be closed.\n - type: dropdown\n attributes:\n label: Inertia version\n description: Which major version of Inertia are you using?\n options:\n - 2.x (stable)\n - 3.x (beta)\n validations:\n required: true\n - type: checkboxes\n attributes:\n label: Inertia adapter(s) affected\n description: Select all frontend adapters that are impacted by this issue.\n options:\n - label: React\n - label: Vue 3\n - label: Svelte\n - label: Not Applicable\n - type: input\n attributes:\n label: 'JS package version'\n description: Provide the exact version of `@inertiajs/{adapter}` you are using (e.g. 2.0.3 or 3.0.0-beta.2).\n placeholder: 2.0.3\n validations:\n required: true\n - type: textarea\n attributes:\n label: Backend stack (optional)\n description: If this bug depends on backend integration, provide details such as Laravel version, PHP version, or other relevant environment info.\n placeholder: |\n Laravel 12.x\n PHP 8.4\n validations:\n required: false\n - type: textarea\n attributes:\n label: Describe the problem\n description: Explain the behavior you're seeing that you think is a bug, and describe how you expect it to behave instead.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Steps to reproduce\n description: Provide clear steps to reproduce the issue. Include a minimal code example that clearly shows the problem.\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/1-bug-report-react.yml", "content": "name: Bug Report - React\ndescription: 'Submit a React related issue.'\nlabels: [react]\nbody:\n - type: markdown\n attributes:\n value: |\n Please read [our full contribution guide](https://laravel.com/docs/contributions#bug-reports) before submitting bug reports.\n\n Before submitting, please confirm:\n - You have **upgraded to the latest version** of both `@inertiajs/react` and `inertiajs/inertia-laravel` and confirmed the issue still exists\n - Only Inertia **2.x** and **3.x (beta)** are supported. Issues for 0.x or 1.x will be closed.\n - type: dropdown\n attributes:\n label: Inertia version\n description: Which major version of Inertia are you using?\n options:\n - 2.x (stable)\n - 3.x (beta)\n validations:\n required: true\n - type: input\n attributes:\n label: '@inertiajs/react Version'\n description: Provide the exact version of `@inertiajs/react` you are using (e.g. 2.0.3 or 3.0.0-beta.2).\n placeholder: 2.0.3\n validations:\n required: true\n - type: textarea\n attributes:\n label: Backend stack (optional)\n description: If this bug depends on backend integration, provide details such as Laravel version, PHP version, or other relevant environment info.\n placeholder: |\n Laravel 12.x\n PHP 8.4\n validations:\n required: false\n - type: textarea\n attributes:\n label: Describe the problem\n description: Explain the behavior you're seeing that you think is a bug, and describe how you expect it to behave instead.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Steps to reproduce\n description: Provide clear steps to reproduce the issue. Include a minimal code example that clearly shows the problem.\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/2-bug-report-vue.yml", "content": "name: Bug Report - Vue 3\ndescription: 'Submit a Vue 3 related issue.'\nlabels: ['vue 3']\nbody:\n - type: markdown\n attributes:\n value: |\n Please read [our full contribution guide](https://laravel.com/docs/contributions#bug-reports) before submitting bug reports.\n\n Before submitting, please confirm:\n - You have **upgraded to the latest version** of both `@inertiajs/vue3` and `inertiajs/inertia-laravel` and confirmed the issue still exists\n - Only Inertia **2.x** and **3.x (beta)** are supported. Issues for 0.x or 1.x will be closed.\n - type: dropdown\n attributes:\n label: Inertia version\n description: Which major version of Inertia are you using?\n options:\n - 2.x (stable)\n - 3.x (beta)\n validations:\n required: true\n - type: input\n attributes:\n label: '@inertiajs/vue3 Version'\n description: Provide the exact version of `@inertiajs/vue3` you are using (e.g. 2.0.3 or 3.0.0-beta.2).\n placeholder: 2.0.3\n validations:\n required: true\n - type: textarea\n attributes:\n label: Backend stack (optional)\n description: If this bug depends on backend integration, provide details such as Laravel version, PHP version, or other relevant environment info.\n placeholder: |\n Laravel 12.x\n PHP 8.4\n validations:\n required: false\n - type: textarea\n attributes:\n label: Describe the problem\n description: Explain the behavior you're seeing that you think is a bug, and describe how you expect it to behave instead.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Steps to reproduce\n description: Provide clear steps to reproduce the issue. Include a minimal code example that clearly shows the problem.\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/3-bug-report-svelte.yml", "content": "name: Bug Report - Svelte\ndescription: 'Submit a Svelte related issue.'\nlabels: [svelte]\nassignees:\n - pedroborges\nbody:\n - type: markdown\n attributes:\n value: |\n Please read [our full contribution guide](https://laravel.com/docs/contributions#bug-reports) before submitting bug reports.\n\n Before submitting, please confirm:\n - You have **upgraded to the latest version** of both `@inertiajs/svelte` and `inertiajs/inertia-laravel` and confirmed the issue still exists\n - Only Inertia **2.x** and **3.x (beta)** are supported. Issues for 0.x or 1.x will be closed.\n - type: dropdown\n attributes:\n label: Inertia version\n description: Which major version of Inertia are you using?\n options:\n - 2.x (stable)\n - 3.x (beta)\n validations:\n required: true\n - type: input\n attributes:\n label: '@inertiajs/svelte Version'\n description: Provide the exact version of `@inertiajs/svelte` you are using (e.g. 2.0.3 or 3.0.0-beta.2).\n placeholder: 2.0.3\n validations:\n required: true\n - type: textarea\n attributes:\n label: Backend stack (optional)\n description: If this bug depends on backend integration, provide details such as Laravel version, PHP version, or other relevant environment info.\n placeholder: |\n Laravel 12.x\n PHP 8.4\n validations:\n required: false\n - type: textarea\n attributes:\n label: Describe the problem\n description: Explain the behavior you're seeing that you think is a bug, and describe how you expect it to behave instead.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Steps to reproduce\n description: Provide clear steps to reproduce the issue. Include a minimal code example that clearly shows the problem.\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Feature Request\n url: https://github.com/inertiajs/inertia/discussions/new?category=ideas\n about: 'For ideas or feature requests, start a new discussion'\n - name: Support Questions & Other\n url: https://github.com/inertiajs/inertia/discussions/new?category=help\n about: 'This repository is only for reporting bugs. If you have a question or need help using the library, click:'\n - name: Documentation issue\n url: https://github.com/inertiajs/docs\n about: For documentation issues, open a pull request at the inertiajs/docs repository\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "\n" }, { "path": ".github/SECURITY.md", "content": "# Security Policy\n\n**PLEASE DON'T DISCLOSE SECURITY-RELATED ISSUES PUBLICLY, [SEE BELOW](#reporting-a-vulnerability).**\n\n## Supported Versions\n\nOnly the latest major version receives security fixes.\n\n## Reporting a Vulnerability\n\nIf you discover a security vulnerability within Laravel, please send an email to Taylor Otwell at taylor@laravel.com. All security vulnerabilities will be promptly addressed.\n\n### Public PGP Key\n\n```\n-----BEGIN PGP PUBLIC KEY BLOCK-----\nVersion: OpenPGP v2.0.8\nComment: Report Security Vulnerabilities to taylor@laravel.com\n\nxsFNBFugFSQBEACxEKhIY9IoJzcouVTIYKJfWFGvwFgbRjQWBiH3QdHId5vCrbWo\ns2l+4Rv03gMG+yHLJ3rWElnNdRaNdQv59+lShrZF7Bvu7Zvc0mMNmFOM/mQ/K2Lt\nOK/8bh6iwNNbEuyOhNQlarEy/w8hF8Yf55hBeu/rajGtcyURJDloQ/vNzcx4RWGK\nG3CLr8ka7zPYIjIFUvHLt27mcYFF9F4/G7b4HKpn75ICKC4vPoQSaYNAHlHQBLFb\nJg/WPl93SySHLugU5F58sICs+fBZadXYQG5dWmbaF5OWB1K2XgRs45BQaBzf/8oS\nqq0scN8wVhAdBeYlVFf0ImDOxGlZ2suLK1BKJboR6zCIkBAwufKss4NV1R9KSUMv\nYGn3mq13PGme0QoIkvQkua5VjTwWfQx7wFDxZ3VQSsjIlbVyRL/Ac/hq71eAmiIR\nt6ZMNMPFpuSwBfYimrXqqb4EOffrfsTzRenG1Cxm4jNZRzX/6P4an7F/euoqXeXZ\nh37TiC7df+eHKcBI4mL+qOW4ibBqg8WwWPJ+jvuhANyQpRVzf3NNEOwJYCNbQPM/\nPbqYvMruAH+gg7uyu9u0jX3o/yLSxJMV7kF4x/SCDuBKIxSSUI4cgbjIlnxWLXZC\nwl7KW4xAKkerO3wgIPnxNfxQoiYiEKA1c3PShWRA0wHIMt3rVRJxwGM4CwARAQAB\nzRJ0YXlsb3JAbGFyYXZlbC5jb23CwXAEEwEKABoFAlugFSQCGy8DCwkHAxUKCAIe\nAQIXgAIZAQAKCRDKAI7r/Ml7Zo0SD/9zwu9K87rbqXbvZ3TVu7TnN+z7mPvVBzl+\nSFEK360TYq8a4GosghZuGm4aNEyZ90CeUjPQwc5fHwa26tIwqgLRppsG21B/mZwu\n0m8c5RaBFRFX/mCTEjlpvBkOwMJZ8f05nNdaktq6W98DbMN03neUwnpWlNSLeoNI\nu4KYZmJopNFLEax5WGaaDpmqD1J+WDr/aPHx39MUAg2ZVuC3Gj/IjYZbD1nCh0xD\na09uDODje8a9uG33cKRBcKKPRLZjWEt5SWReLx0vsTuqJSWhCybHRBl9BQTc/JJR\ngJu5V4X3f1IYMTNRm9GggxcXrlOAiDCjE2J8ZTUt0cSxedQFnNyGfKxe/l94oTFP\nwwFHbdKhsSDZ1OyxPNIY5OHlMfMvvJaNbOw0xPPAEutPwr1aqX9sbgPeeiJwAdyw\nmPw2x/wNQvKJITRv6atw56TtLxSevQIZGPHCYTSlsIoi9jqh9/6vfq2ruMDYItCq\n+8uzei6TyH6w+fUpp/uFmcwZdrDwgNVqW+Ptu+pD2WmthqESF8UEQVoOv7OPgA5E\nofOMaeH2ND74r2UgcXjPxZuUp1RkhHE2jJeiuLtbvOgrWwv3KOaatyEbVl+zHA1e\n1RHdJRJRPK+S7YThxxduqfOBX7E03arbbhHdS1HKhPwMc2e0hNnQDoNxQcv0GQp4\n2Y6UyCRaus7ATQRboBUkAQgA0h5j3EO2HNvp8YuT1t/VF00uUwbQaz2LIoZogqgC\n14Eb77diuIPM9MnuG7bEOnNtPVMFXxI5UYBIlzhLMxf7pfbrsoR4lq7Ld+7KMzdm\neREqJRgUNfjZhtRZ9Z+jiFPr8AGpYxwmJk4v387uQGh1GC9JCc3CCLJoI62I9t/1\nK2b25KiOzW/FVZ/vYFj1WbISRd5GqS8SEFh4ifU79LUlJ/nEsFv4JxAXN9RqjU0e\nH4S/m1Nb24UCtYAv1JKymcf5O0G7kOzvI0w06uKxk0hNwspjDcOebD8Vv9IdYtGl\n0bn7PpBlVO1Az3s8s6Xoyyw+9Us+VLNtVka3fcrdaV/n0wARAQABwsKEBBgBCgAP\nBQJboBUkBQkPCZwAAhsuASkJEMoAjuv8yXtmwF0gBBkBCgAGBQJboBUkAAoJEA1I\n8aTLtYHmjpIH/A1ZKwTGetHFokJxsd2omvbqv+VtpAjnUbvZEi5g3yZXn+dHJV+K\nUR/DNlfGxLWEcY6datJ3ziNzzD5u8zcPp2CqeTlCxOky8F74FjEL9tN/EqUbvvmR\ntd2LXsSFjHnLJRK5lYfZ3rnjKA5AjqC9MttILBovY2rI7lyVt67kbS3hMHi8AZl8\nEgihnHRJxGZjEUxyTxcB13nhfjAvxQq58LOj5754Rpe9ePSKbT8DNMjHbGpLrESz\ncmyn0VzDMLfxg8AA9uQFMwdlKqve7yRZXzeqvy08AatUpJaL7DsS4LKOItwvBub6\ntHbCE3mqrUw5lSNyUahO3vOcMAHnF7fd4W++eA//WIQKnPX5t3CwCedKn8Qkb3Ow\noj8xUNl2T6kEtQJnO85lKBFXaMOUykopu6uB9EEXEr0ShdunOKX/UdDbkv46F2AB\n7TtltDSLB6s/QeHExSb8Jo3qra86JkDUutWdJxV7DYFUttBga8I0GqdPu4yRRoc/\n0irVXsdDY9q7jz6l7fw8mSeJR96C0Puhk70t4M1Vg/tu/ONRarXQW7fJ8kl21PcD\nUKNWWa242gji/+GLRI8AIpGMsBiX7pHhqmMMth3u7+ne5BZGGJz0uX+CzWboOHyq\nkWgfY4a62t3hM0vwnUkl/D7VgSGy4LiKQrapd3LvU2uuEfFsMu3CDicZBRXPqoXj\nPBjkkPKhwUTNlwEQrGF3QsZhNe0M9ptM2fC34qtxZtMIMB2NLvE4S621rmQ05oQv\nsT0B9WgUL3GYRKdx700+ojHEuwZ79bcLgo1dezvkfPtu/++2CXtieFthDlWHy8x5\nXJJjI1pDfGO+BgX0rS3QrQEYlF/uPQynKwxe6cGI62eZ0ug0hNrPvKEcfMLVqBQv\nw4VH6iGp9yNKMUOgAECLCs4YCxK+Eka9Prq/Gh4wuqjWiX8m66z8YvKf27sFL3fR\nOwGaz3LsnRSxbk/8oSiZuOVLfn44XRcxsHebteZat23lwD93oq54rtKnlJgmZHJY\n4vMgk1jpS4laGnvhZj7OwE0EW6AVJAEIAKJSrUvXRyK3XQnLp3Kfj82uj0St8Dt2\nh8BMeVbrAbg38wCN8XQZzVR9+bRZRR+aCzpKSqwhEQVtH7gdKgfdNdGNhG2DFAVk\nSihMhQz190FKttUZgwY00enzD7uaaA5VwNAZzRIr8skwiASB7UoO+lIhrAYgcQCA\nLpwCSMrUNB3gY1IVa2xi9FljEbS2uMABfOsTfl7z4L4T4DRv/ovDf+ihyZOXsXiH\nRVoUTIpN8ZILCZiiKubE1sMj4fSQwCs06UyDy17HbOG5/dO9awR/LHW53O3nZCxE\nJbCqr5iHa2MdHMC12+luxWJKD9DbVB01LiiPZCTkuKUDswCyi7otpVEAEQEAAcLC\nhAQYAQoADwUCW6AVJAUJDwmcAAIbLgEpCRDKAI7r/Ml7ZsBdIAQZAQoABgUCW6AV\nJAAKCRDxrCjKN7eORjt2B/9EnKVJ9lwB1JwXcQp6bZgJ21r6ghyXBssv24N9UF+v\n5QDz/tuSkTsKK1UoBrBDEinF/xTP2z+xXIeyP4c3mthMHsYdMl7AaGpcCwVJiL62\nfZvd+AiYNX3C+Bepwnwoziyhx4uPaqoezSEMD8G2WQftt6Gqttmm0Di5RVysCECF\nEyhkHwvCcbpXb5Qq+4XFzCUyaIZuGpe+oeO7U8B1CzOC16hEUu0Uhbk09Xt6dSbS\nZERoxFjrGU+6bk424MkZkKvNS8FdTN2s3kQuHoNmhbMY+fRzKX5JNrcQ4dQQufiB\nzFcc2Ba0JVU0nYAMftTeT5ALakhwSqr3AcdD2avJZp3EYfYP/3smPGTeg1cDJV3E\nWIlCtSlhbwviUjvWEWJUE+n9MjhoUNU0TJtHIliUYUajKMG/At5wJZTXJaKVUx32\nUCWr4ioKfSzlbp1ngBuFlvU7LgZRcKbBZWvKj/KRYpxpfvPyPElmegCjAk6oiZYV\nLOV+jFfnMkk9PnR91ZZfTNx/bK+BwjOnO+g7oE8V2g2bA90vHdeSUHR52SnaVN/b\n9ytt07R0f+YtyKojuPmlNsbyAaUYUtJ1o+XNCwdVxzarYEuUabhAfDiVTu9n8wTr\nYVvnriSFOjNvOY9wdLAa56n7/qM8bzuGpoBS5SilXgJvITvQfWPvg7I9C3QhwK1S\nF6B1uquQGbBSze2wlnMbKXmhyGLlv9XpOqpkkejQo3o58B+Sqj4B8DuYixSjoknr\npRbj8gqgqBKlcpf1wD5X9qCrl9vq19asVOHaKhiFZGxZIVbBpBOdvAKaMj4p/uln\nyklN3YFIfgmGPYbL0elvXVn7XfvwSV1mCQV5LtMbLHsFf0VsA16UsG8A/tLWtwgt\n0antzftRHXb+DI4qr+qEYKFkv9F3oCOXyH4QBhPA42EzKqhMXByEkEK9bu6skioL\nmHhDQ7yHjTWcxstqQjkUQ0T/IF9ls+Sm5u7rVXEifpyI7MCb+76kSCDawesvInKt\nWBGOG/qJGDlNiqBYYt2xNqzHCJoC\n=zXOv\n-----END PGP PUBLIC KEY BLOCK-----\n```\n" }, { "path": ".github/SUPPORT.md", "content": "# Support Questions\n\nThe Laravel support guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions#support-questions).\n" }, { "path": ".github/workflows/build.yml", "content": "name: Build\non: [push, pull_request]\njobs:\n build:\n if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository\n timeout-minutes: 15\n runs-on: ubuntu-24.04\n\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install pnpm\n uses: pnpm/action-setup@v3\n with:\n version: 10\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: 22.14\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Build Inertia\n run: pnpm build:all\n" }, { "path": ".github/workflows/coding-standards.yml", "content": "name: Coding Standards\n\non:\n push:\n branches:\n - master\n pull_request:\n\njobs:\n format:\n runs-on: ubuntu-latest\n\n permissions:\n contents: write\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v4\n\n - name: Install pnpm\n uses: pnpm/action-setup@v4\n with:\n version: 10\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Format code\n run: pnpm run format\n\n - name: Commit linted files\n uses: stefanzweifel/git-auto-commit-action@v5\n with:\n commit_message: 'Fix code style'\n" }, { "path": ".github/workflows/es2020-compatibility.yml", "content": "name: Compatibility Checks\non: [push, pull_request]\njobs:\n es2020-compatibility:\n name: ES2020 (${{ matrix.adapter }})\n if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository\n runs-on: ubuntu-24.04\n timeout-minutes: 15\n\n strategy:\n fail-fast: false\n matrix:\n adapter: ['core', 'react', 'vue', 'svelte']\n\n steps:\n - name: Checkout code\n uses: actions/checkout@v4\n\n - name: Setup pnpm\n uses: pnpm/action-setup@v3\n with:\n version: 10\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: 22.14\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Build core package\n if: matrix.adapter != 'core'\n run: pnpm -r --filter ./packages/core build\n\n - name: Validate ES2020 compatibility\n run: pnpm -r --filter ./packages/${{ matrix.adapter }}* es2020-check\n" }, { "path": ".github/workflows/playwright-chromium.yml", "content": "name: Playwright Tests on Chromium\non: [push, pull_request]\njobs:\n test-chromium:\n if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository\n name: Chromium (${{ matrix.adapter }})\n timeout-minutes: 15\n runs-on: ubuntu-24.04\n strategy:\n matrix:\n adapter: ['vue', 'react', 'svelte']\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install pnpm\n uses: pnpm/action-setup@v3\n with:\n version: 10\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: 22.14\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Build Inertia\n run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }}* build\n\n - name: Install Playwright Browsers\n run: pnpm playwright install chromium\n\n - name: Run Playwright Tests\n run: pnpm test:${{ matrix.adapter }}\n\n - name: Upload failure screenshots\n if: failure()\n uses: actions/upload-artifact@v4\n with:\n name: playwright-failure-screenshots-${{ matrix.adapter }}-chromium\n path: test-results\n\n test-chromium-ssr:\n if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository\n name: Chromium SSR (${{ matrix.adapter }})\n timeout-minutes: 15\n runs-on: ubuntu-24.04\n strategy:\n matrix:\n adapter: ['vue', 'react', 'svelte']\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install pnpm\n uses: pnpm/action-setup@v3\n with:\n version: 10\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: 22.14\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Build Inertia\n run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }}* build\n\n - name: Install Playwright Browsers\n run: pnpm playwright install chromium\n\n - name: Run Playwright SSR Tests\n run: pnpm test:ssr:${{ matrix.adapter }} --project=chromium\n\n - name: Upload failure screenshots\n if: failure()\n uses: actions/upload-artifact@v4\n with:\n name: playwright-failure-screenshots-${{ matrix.adapter }}-chromium-ssr\n path: test-results\n" }, { "path": ".github/workflows/playwright-firefox.yml", "content": "name: Playwright Tests on Firefox\non: [push, pull_request]\njobs:\n test-firefox:\n if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository\n name: Firefox (${{ matrix.adapter }}) - shard ${{ matrix.shard }} of 3)\n timeout-minutes: 15\n runs-on: ubuntu-24.04\n strategy:\n matrix:\n adapter: ['vue', 'react', 'svelte']\n shard: ['1', '2', '3']\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install pnpm\n uses: pnpm/action-setup@v3\n with:\n version: 10\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: 22.14\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Build Inertia\n run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }}* build\n\n - name: Install Playwright Browsers\n run: pnpm playwright install firefox\n\n - name: Run Playwright Tests\n run: pnpm test:${{ matrix.adapter }} --firefox --shard=${{ matrix.shard }}/3\n\n - name: Upload failure screenshots\n if: failure()\n uses: actions/upload-artifact@v4\n with:\n name: playwright-failure-screenshots-${{ matrix.adapter }}-firefox-shard-${{ matrix.shard }}\n path: test-results\n" }, { "path": ".github/workflows/playwright-webkit.yml", "content": "name: Playwright Tests on WebKit\non: [push, pull_request]\njobs:\n test-webkit:\n if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository\n name: WebKit (${{ matrix.adapter }} - shard ${{ matrix.shard }} of 4)\n timeout-minutes: 15\n runs-on: macos-15\n strategy:\n matrix:\n adapter: ['vue', 'react', 'svelte']\n shard: ['1', '2', '3', '4']\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install pnpm\n uses: pnpm/action-setup@v3\n with:\n version: 10\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: 22.14\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Build Inertia\n run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }}* build\n\n - name: Install Playwright Browsers\n run: pnpm playwright install webkit\n\n - name: Run Playwright Tests\n run: pnpm test:${{ matrix.adapter }} --webkit --shard=${{ matrix.shard }}/4\n\n - name: Upload failure screenshots\n if: failure()\n uses: actions/upload-artifact@v4\n with:\n name: playwright-failure-screenshots-${{ matrix.adapter }}-webkit-shard-${{ matrix.shard }}\n path: test-results\n" }, { "path": ".github/workflows/publish.yml", "content": "name: Publish Packages\n\non:\n release:\n types: [released, prereleased]\n\npermissions:\n id-token: write # Required for OIDC\n contents: read\n\njobs:\n publish:\n runs-on: ubuntu-latest\n strategy:\n matrix:\n adapter: ['core', 'vue3', 'react', 'svelte']\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Install pnpm\n uses: pnpm/action-setup@v4\n with:\n version: 10\n\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n registry-url: 'https://registry.npmjs.org'\n cache: pnpm\n\n # Ensure npm 11.5.1 or later is installed\n - name: Update npm\n run: npm install -g npm@latest\n\n - name: Install dependencies\n run: pnpm install\n\n - name: 'Publish ${{ matrix.adapter }}'\n run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }} build\n\n - name: 'Publish ${{ matrix.adapter }} to npm'\n run: cd ./packages/${{ matrix.adapter }} && pnpm publish --no-git-checks\n" }, { "path": ".github/workflows/test-app-quality.yml", "content": "name: Test App Quality\non: [push, pull_request]\njobs:\n test-app-quality:\n if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository\n timeout-minutes: 15\n runs-on: ubuntu-24.04\n strategy:\n matrix:\n adapter: ['vue', 'react', 'svelte']\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Install pnpm\n uses: pnpm/action-setup@v3\n with:\n version: 10\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: 22.14\n cache: pnpm\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Build Inertia\n run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }}* build\n\n - name: Type-check test-app\n run: cd packages/${{ matrix.adapter == 'vue' && 'vue3' || matrix.adapter }}/test-app && pnpm run type-check\n\n - name: ESLint test-app\n run: cd packages/${{ matrix.adapter == 'vue' && 'vue3' || matrix.adapter }}/test-app && pnpm run lint\n" }, { "path": ".github/workflows/update-changelog.yml", "content": "name: update changelog\n\non:\n release:\n types: [released]\n\npermissions: {}\n\njobs:\n update:\n permissions:\n contents: write\n uses: laravel/.github/.github/workflows/update-changelog.yml@main\n" }, { "path": ".gitignore", "content": ".DS_Store\n.idea\n/packages/*/test-app/test-results/.last-run.json\n/packages/svelte/test-app/vite.config.js.timestamp-*.mjs\n/playwright-report\n/test-results\nnode_modules\n" }, { "path": ".prettierignore", "content": "# Dependencies\nnode_modules/\n**/vendor/\n\n# Build outputs\n**/dist/\n**/.svelte-kit\n**/bootstrap/ssr\n**/public/build\n\n# Files we don't want to format\npnpm-lock.yaml\n*.lock\n*.md\n*.timestamp-*.mjs\n\n# Vue files with parsing issues (dual script blocks)\npackages/vue3/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageA.vue\npackages/vue3/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageB.vue\npackages/vue3/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageA.vue\npackages/vue3/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageB.vue\npackages/vue3/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.vue\npackages/vue3/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.vue\n\n# Directories we don't want to format\n**/test-results/\n" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\nFor changes prior to v1.0.0, see the [legacy releases](https://legacy.inertiajs.com/releases).\n\n## [Unreleased](https://github.com/inertiajs/inertia/compare/v2.3.18...master)\n\n- Nothing yet\n\n## [v2.3.18](https://github.com/inertiajs/inertia/compare/v2.3.17...v2.3.18) - 2026-03-12\n\n### What's Changed\n\n* Bump [@sveltejs](https://github.com/sveltejs)/kit from 2.53.2 to 2.53.3 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2919\n* Bump multer from 2.0.2 to 2.1.1 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2923\n* [2.x] Remove request from stream on network failure by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2948\n* Use SharedPageProps in GlobalEventsMap event types by [@hamedelasma](https://github.com/hamedelasma) in https://github.com/inertiajs/inertia/pull/2946\n* [2.x] fix: include SharedPageProps in createInertiaApp and onSuccess types by [@isaackaara](https://github.com/isaackaara) in https://github.com/inertiajs/inertia/pull/2931\n* [2.x] Remove `server-renderer` dependency from Vue adapter type by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2955\n* [2.x] fix(types): module augmentation example by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2954\n* [2.x] fix: always fire flash event regardless of partial reload equality by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2953\n* fix: skip view transition when document visibility is hidden by [@mortenhauberg](https://github.com/mortenhauberg) in https://github.com/inertiajs/inertia/pull/2957\n\n### New Contributors\n\n* [@hamedelasma](https://github.com/hamedelasma) made their first contribution in https://github.com/inertiajs/inertia/pull/2946\n* [@mortenhauberg](https://github.com/mortenhauberg) made their first contribution in https://github.com/inertiajs/inertia/pull/2957\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.17...v2.3.18\n\n## [v2.3.17](https://github.com/inertiajs/inertia/compare/v2.3.16...v2.3.17) - 2026-02-26\n\n### What's Changed\n\n* Include resources directory in published packages by [@pushpak1300](https://github.com/pushpak1300) in https://github.com/inertiajs/inertia/pull/2914\n* [2.x] Bump deps by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2916\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.16...v2.3.17\n\n## [v2.3.16](https://github.com/inertiajs/inertia/compare/v2.3.15...v2.3.16) - 2026-02-24\n\n### What's Changed\n\n* Bump [@sveltejs](https://github.com/sveltejs)/kit from 2.50.2 to 2.52.2 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2904\n* Add Boost Guidelines & Skills by [@pushpak1300](https://github.com/pushpak1300) in https://github.com/inertiajs/inertia/pull/2896\n\n### New Contributors\n\n* [@pushpak1300](https://github.com/pushpak1300) made their first contribution in https://github.com/inertiajs/inertia/pull/2896\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.15...v2.3.16\n\n## [v2.3.15](https://github.com/inertiajs/inertia/compare/v2.3.14...v2.3.15) - 2026-02-13\n\n### What's Changed\n\n* Bump axios from 1.13.2 to 1.13.5 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2888\n* [2.x] Fix flash data being cleared by `history.replaceState` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2889\n* [2.x] Handle `bfcache` restoration for encrypted history by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2890\n* [2.x] Bump dependencies by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2891\n* [2.x] Fix InfiniteScroll loading all pages in reverse mode with flex/grid layouts by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2893\n* [2.x] Improve flaky tests and test app quality by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2895\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.14...v2.3.15\n\n## [v2.3.14](https://github.com/inertiajs/inertia/compare/v2.3.13...v2.3.14) - 2026-02-11\n\n### What's Changed\n\n* [2.x] Shut down entire cluster on SSR shutdown by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2876\n* [2.x] Fix `useForm` type inference when passing data as callback by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2878\n* Add global configuration support for withAllErrors in form components by [@skryukov](https://github.com/skryukov) in https://github.com/inertiajs/inertia/pull/2865\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.13...v2.3.14\n\n## [v2.3.13](https://github.com/inertiajs/inertia/compare/v2.3.12...v2.3.13) - 2026-01-30\n\n### What's Changed\n\n* Fix `useForm` type inference in generic wrapper components by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2851\n* Support wildcard paths in `validate()` method by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2854\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.12...v2.3.13\n\n## [v2.3.12](https://github.com/inertiajs/inertia/compare/v2.3.11...v2.3.12) - 2026-01-27\n\n### What's Changed\n\n* Bump lodash from 4.17.21 to 4.17.23 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2835\n* Bump lodash-es from 4.17.22 to 4.17.23 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2836\n* Fix cancellation of concurrent partial reloads with query parameters by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2843\n* Support for the `formTarget` attribute in the `
` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2844\n* Clear stale form errors on resubmit by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2845\n* Prevent `` from rendering children with undefined props by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2846\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.11...v2.3.12\n\n## [v2.3.11](https://github.com/inertiajs/inertia/compare/v2.3.10...v2.3.11) - 2026-01-20\n\n### What's Changed\n\n* Bump and cleanup dependencies by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2822\n* Add test for Precognition validation with transform key changes by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2827\n* TS and console error on conflicting `useForm()` keys by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2823\n* Allow `useForm` without arguments by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2830\n* Pass `true` to `inert` attribute in React 19 by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2831\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.10...v2.3.11\n\n## [v2.3.10](https://github.com/inertiajs/inertia/compare/v2.3.9...v2.3.10) - 2026-01-15\n\n### What's Changed\n\n* Add `async` and `sync` options to `cancelAll` method by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2814\n* Fix smooth scrolling in Firefox and add Firefox to CI by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2815\n* Improve flaky `` test in WebKit CI by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2818\n* Pass `onceProps` as second argument in client-side visit props callback by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2816\n* Prevent converting a string response to an object by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2821\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.9...v2.3.10\n\n## [v2.3.9](https://github.com/inertiajs/inertia/compare/v2.3.8...v2.3.9) - 2026-01-14\n\n### What's Changed\n\n* Fix React Precognition Error Sync (issue #2806) by [@joetifa2003](https://github.com/joetifa2003) in https://github.com/inertiajs/inertia/pull/2808\n* Add tests for deferred scroll props by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2811\n* Fix deferred props not loading after back button navigation by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2812\n* Add test for concurrent reloads by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2813\n* Cancel in-flight deferred prop requests on navigation by [@alexspeller](https://github.com/alexspeller) in https://github.com/inertiajs/inertia/pull/2656\n* fix: preserve query parameters in test server responses by [@alexspeller](https://github.com/alexspeller) in https://github.com/inertiajs/inertia/pull/2665\n* [2.x] Add Form Context Support by [@laserhybiz](https://github.com/laserhybiz) in https://github.com/inertiajs/inertia/pull/2671\n\n### New Contributors\n\n* [@joetifa2003](https://github.com/joetifa2003) made their first contribution in https://github.com/inertiajs/inertia/pull/2808\n* [@alexspeller](https://github.com/alexspeller) made their first contribution in https://github.com/inertiajs/inertia/pull/2656\n* [@laserhybiz](https://github.com/laserhybiz) made their first contribution in https://github.com/inertiajs/inertia/pull/2671\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.8...v2.3.9\n\n## [v2.3.8](https://github.com/inertiajs/inertia/compare/v2.3.7...v2.3.8) - 2026-01-09\n\n### What's Changed\n\n* fix: update has more state when resetting before updating page by [@AydinHassan](https://github.com/AydinHassan) in https://github.com/inertiajs/inertia/pull/2787\n* Ensure Flash Data listener is registered before event is fired by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2799\n* Improve indices detection in `mergeDataIntoQueryString()` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2798\n* Fix `` re-registering observer when params change by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2804\n\n### New Contributors\n\n* [@AydinHassan](https://github.com/AydinHassan) made their first contribution in https://github.com/inertiajs/inertia/pull/2787\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.7...v2.3.8\n\n## [v2.3.7](https://github.com/inertiajs/inertia/compare/v2.3.6...v2.3.7) - 2026-01-07\n\n### What's Changed\n\n* Add `dontRemember()` method to form helper by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2792\n* Only call `replaceState()` when page data has actually changed by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2793\n* Fix `@typescript-eslint/unbound-method` warning when destructuring `useForm()` methods by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2794\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.6...v2.3.7\n\n## [v2.3.6](https://github.com/inertiajs/inertia/compare/v2.3.5...v2.3.6) - 2025-12-31\n\n### What's Changed\n\n* Bump qs from 6.14.0 to 6.14.1 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2790\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.5...v2.3.6\n\n## [v2.3.5](https://github.com/inertiajs/inertia/compare/v2.3.4...v2.3.5) - 2025-12-31\n\n### What's Changed\n\n* Refresh the Infinite Scroll triggers after partial reload by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2784\n* Fix `hasAnyState()` to actually check for browser history by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2785\n* Handle WebKit history throttle errors by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2786\n* Merge `data` and `params` props in `` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2789\n* Handle `QuotaExceededError` in WebKit by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2788\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.4...v2.3.5\n\n## [v2.3.4](https://github.com/inertiajs/inertia/compare/v2.3.3...v2.3.4) - 2025-12-19\n\n### What's Changed\n\n* Only restore Infinite Scroll state from history on back/forward navigation by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2777\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.3...v2.3.4\n\n## [v2.3.3](https://github.com/inertiajs/inertia/compare/v2.3.2...v2.3.3) - 2025-12-17\n\n### What's Changed\n\n* Add support for protocol-relative urls in url.ts by [@machour](https://github.com/machour) in https://github.com/inertiajs/inertia/pull/2769\n* Fix brackets notation qs parsing by [@skryukov](https://github.com/skryukov) in https://github.com/inertiajs/inertia/pull/2722\n* Support for Flash Data by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2757\n\n### New Contributors\n\n* [@machour](https://github.com/machour) made their first contribution in https://github.com/inertiajs/inertia/pull/2769\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.2...v2.3.3\n\n## [v2.3.2](https://github.com/inertiajs/inertia/compare/v2.3.1...v2.3.2) - 2025-12-16\n\n### What's Changed\n\n* Expose InertiaPrecognitiveForm type by [@lcdss](https://github.com/lcdss) in https://github.com/inertiajs/inertia/pull/2756\n* Test for loading deferred props on `router.reload()` without `only`/`except` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2761\n* Expose `fetching` in default `` slot by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2766\n* Include submitter element value in Form component submission by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2770\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.1...v2.3.2\n\n## [v2.3.1](https://github.com/inertiajs/inertia/compare/v2.3.0...v2.3.1) - 2025-12-12\n\n### What's Changed\n\n* Test for Form + Vue Options API by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2750\n* Fix for validating items in dynamic arrays by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2753\n* Escape forward slashes when using useScriptElementForInitialPage by [@kirk-loretz-fsn](https://github.com/kirk-loretz-fsn) in https://github.com/inertiajs/inertia/pull/2751\n* Sync Playground configs by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2754\n* Fix race condition when restoring scroll regions by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2755\n\n### New Contributors\n\n* [@kirk-loretz-fsn](https://github.com/kirk-loretz-fsn) made their first contribution in https://github.com/inertiajs/inertia/pull/2751\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.3.0...v2.3.1\n\n## [v2.3.0](https://github.com/inertiajs/inertia/compare/v2.2.21...v2.3.0) - 2025-12-11\n\n### What's Changed\n\n* Support for Precognition in `useForm()` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2684\n* Support for Precognition in `` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2700\n* Improve Precognition examples in Playgrounds by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2746\n* Improve flaky tests by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2747\n* bugfix(whenVisible-vue): Fix loaded state when data already exists by [@ClaraLeigh](https://github.com/ClaraLeigh) in https://github.com/inertiajs/inertia/pull/2748\n\n### New Contributors\n\n* [@ClaraLeigh](https://github.com/ClaraLeigh) made their first contribution in https://github.com/inertiajs/inertia/pull/2748\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.21...v2.3.0\n\n## [v2.2.21](https://github.com/inertiajs/inertia/compare/v2.2.20...v2.2.21) - 2025-12-10\n\n### What's Changed\n\n* Add `viewTransition` to `FormComponentOptions` type by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2741\n* Preserve untouched Once Props on Partial Reload + Once Props in Playground by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2743\n* Only preserve loaded Deferred + Once props by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2745\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.20...v2.2.21\n\n## [v2.2.20](https://github.com/inertiajs/inertia/compare/v2.2.19...v2.2.20) - 2025-12-09\n\n### What's Changed\n\n* Bump express from 5.1.0 to 5.2.0 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2727\n* Add tests for SSR server by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2730\n* Preserve errors when loading deferred props by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2729\n* Optimize page data size and parsing (37% size reduction!) by [@bram-pkg](https://github.com/bram-pkg) in https://github.com/inertiajs/inertia/pull/2687\n* Support for `once()` props by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2732\n* Fix for sequential Client Side Visits by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2737\n* Refactor duplicated initial page code by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2738\n\n### New Contributors\n\n* [@bram-pkg](https://github.com/bram-pkg) made their first contribution in https://github.com/inertiajs/inertia/pull/2687\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.19...v2.2.20\n\n## [v2.2.19](https://github.com/inertiajs/inertia/compare/v2.2.18...v2.2.19) - 2025-11-27\n\n### What's Changed\n\n* Bump dependencies by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2710\n* TypeScript fix accessing error keys of optional nested object by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2718\n* Use FormValue in Form component by [@skryukov](https://github.com/skryukov) in https://github.com/inertiajs/inertia/pull/2709\n* Fix anchor hash scrolling on initial page visit in React by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2719\n* Ensure page is rendered before scrolling to top by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2721\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.18...v2.2.19\n\n## [v2.2.18](https://github.com/inertiajs/inertia/compare/v2.2.17...v2.2.18) - 2025-11-17\n\n### What's Changed\n\n* Ensure `objectsAreEqual()` checks all keys in both objects by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2705\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.17...v2.2.18\n\n## [v2.2.17](https://github.com/inertiajs/inertia/compare/v2.2.16...v2.2.17) - 2025-11-14\n\n### What's Changed\n\n* Reset `` loading state after a page reload by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2699\n* Add test for reloading deferred props by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2698\n* Force `indices` array format when submitting data using `FormData` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2701\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.16...v2.2.17\n\n## [v2.2.16](https://github.com/inertiajs/inertia/compare/v2.2.15...v2.2.16) - 2025-11-13\n\n### What's Changed\n\n* Added test for `defaultValue` in Form component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2685\n* Prevent navigation on right-click on `` with `prefetch=\"click\"` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2676\n* Export page component type for React adapter by [@skryukov](https://github.com/skryukov) in https://github.com/inertiajs/inertia/pull/2691\n* Switch `useContext` to `use` in `usePage()` hook by [@HichemTab-tech](https://github.com/HichemTab-tech) in https://github.com/inertiajs/inertia/pull/2680\n* Improve serialization in `formDataToObject()` when mixing numeric and non-numeric object keys by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2692\n* Fix `InfiniteScroll` scroll preservation by [@skryukov](https://github.com/skryukov) in https://github.com/inertiajs/inertia/pull/2689\n* Export Inertia `App` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2695\n* Ignore `preserveScroll` and `preserveState` when finding cached response by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2694\n* Upgrade Express server for test apps to v5 by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2693\n* Add WebKit browser testing to CI with Safari compatibility fixes by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2696\n* Bump symfony/http-foundation from 7.3.4 to 7.3.7 in /playgrounds/vue3 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2697\n* Fix array keys misalignment in form data and query by [@skryukov](https://github.com/skryukov) in https://github.com/inertiajs/inertia/pull/2690\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.15...v2.2.16\n\n## [v2.2.15](https://github.com/inertiajs/inertia/compare/v2.2.14...v2.2.15) - 2025-10-30\n\n### What's Changed\n\n* TS Fix for circularly references in form data by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2673\n* Improve TS for config defaults by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2674\n* [v2.x] feat: allow adding type to `router.restore` by [@peaklabs-dev](https://github.com/peaklabs-dev) in https://github.com/inertiajs/inertia/pull/2545\n* Configurable prefetch hover delay by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2675\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.14...v2.2.15\n\n## [v2.2.14](https://github.com/inertiajs/inertia/compare/v2.2.13...v2.2.14) - 2025-10-28\n\n### What's Changed\n\n* TS cleanup for `` component + View Transition prop in Svelte by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2667\n* Improve support for `any` as form data value by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2668\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.13...v2.2.14\n\n## [v2.2.13](https://github.com/inertiajs/inertia/compare/v2.2.12...v2.2.13) - 2025-10-28\n\n### What's Changed\n\n* Support for View Transitions by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2658\n* Opt-in to using `data-inertia` attribute in `` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2663\n* Opt-in to using `` for error modals by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2664\n* feat: give access to underlying data as object and as form data object by [@MeiKatz](https://github.com/MeiKatz) in https://github.com/inertiajs/inertia/pull/2605\n\n### New Contributors\n\n* [@MeiKatz](https://github.com/MeiKatz) made their first contribution in https://github.com/inertiajs/inertia/pull/2605\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.12...v2.2.13\n\n## [v2.2.12](https://github.com/inertiajs/inertia/compare/v2.2.11...v2.2.12) - 2025-10-27\n\n### What's Changed\n\n* Clone page props before writing it to the browser's history by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2662\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.11...v2.2.12\n\n## [v2.2.11](https://github.com/inertiajs/inertia/compare/v2.2.10...v2.2.11) - 2025-10-24\n\n### What's Changed\n\n* Configure global defaults and update during runtime by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2655\n* Stabilize prop references when visiting the same page by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2657\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.10...v2.2.11\n\n## [v2.2.10](https://github.com/inertiajs/inertia/compare/v2.2.9...v2.2.10) - 2025-10-23\n\n### What's Changed\n\n* Restore uppercase `Component` object key in React's `App.ts` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2654\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.9...v2.2.10\n\n## [v2.2.9](https://github.com/inertiajs/inertia/compare/v2.2.8...v2.2.9) - 2025-10-21\n\n### What's Changed\n\n* Use local `@inertiajs/core` in Playgrounds + dependencies bump by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2633\n* Introduce types for Head Manager by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2634\n* Fix resolving `preserveScroll` and `preserveState` in Client Side Visits by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2635\n* Support for type-hinting shared Page Props by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2636\n* Add `globals.d.ts` file to Playgrounds by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2637\n* Remove wrong `shouldIntercept()` call in `keydown` event handler in `` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2638\n* Introduce `CancelToken` and `CancelTokenCallback` types to replace Axios imports by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2639\n* Internal TypeScript improvements by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2640\n* Tests and TS improvements for the `` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2641\n* Make `data` prop of `` required by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2642\n* TS fixes in Vue adapter for `useRemember` and `remember` mixin by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2643\n* Bump vite from 5.4.20 to 5.4.21 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2647\n* TypeScript improvements to `createInertiaApp()` and unifying it across adapters by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2648\n* ESLint check for test-apps by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2560\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.8...v2.2.9\n\n## [v2.2.8](https://github.com/inertiajs/inertia/compare/v2.2.7...v2.2.8) - 2025-10-09\n\n### What's Changed\n\n* Prevent false positives in `getScrollableParent()` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2626\n* Restore scroll regions after navigation by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2627\n* Prevent replacing history state when scroll regions are unchanged to fix popstate behavior in WebKit by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2629\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.7...v2.2.8\n\n## [v2.2.7](https://github.com/inertiajs/inertia/compare/v2.2.6...v2.2.7) - 2025-10-07\n\n### What's Changed\n\n* Preserve relative URL when `` updates query string by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2623\n* Use `SlotsType` to type-hint Vue slots by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2620\n* Fix race condition in `history.ts` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2624\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.6...v2.2.7\n\n## [v2.2.6](https://github.com/inertiajs/inertia/compare/v2.2.5...v2.2.6) - 2025-10-03\n\n### What's Changed\n\n* SSR fixes for `` component. by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2616\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.5...v2.2.6\n\n## [v2.2.5](https://github.com/inertiajs/inertia/compare/v2.2.4...v2.2.5) - 2025-10-02\n\n### What's Changed\n\n* Improve `` cleanup after navigating away by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2610\n* Fix for `` component when using React SSR by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2612\n* Fix conflicting Client Side Visits by queuing the URL synchronization by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2613\n* Improvements to `` in Svelte adapter by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2614\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.4...v2.2.5\n\n## [v2.2.4](https://github.com/inertiajs/inertia/compare/v2.2.3...v2.2.4) - 2025-09-30\n\n### What's Changed\n\n* Compile TS while developing + improve CLI output by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2600\n* Improve testing of scroll restoration by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2602\n* Fix for reloading an unrelated prop affecting infinite scroll by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2603\n* Add `preserve-url` prop to `` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2541\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.3...v2.2.4\n\n## [v2.2.3](https://github.com/inertiajs/inertia/compare/v2.2.2...v2.2.3) - 2025-09-29\n\n### What's Changed\n\n* Preserve `ScrollProp` on Partial Reloads by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2597\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.2...v2.2.3\n\n## [v2.2.2](https://github.com/inertiajs/inertia/compare/v2.2.1...v2.2.2) - 2025-09-28\n\n### What's Changed\n\n* Reset `ScrollProp` when requested by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2595\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.1...v2.2.2\n\n## [v2.2.1](https://github.com/inertiajs/inertia/compare/v2.2.0...v2.2.1) - 2025-09-28\n\n### What's Changed\n\n* Don't restore remembered state after a refresh by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2591\n* Remember Infinite Scroll state by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2592\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.2.0...v2.2.1\n\n## [v2.2.0](https://github.com/inertiajs/inertia/compare/v2.1.11...v2.2.0) - 2025-09-26\n\n### What's Changed\n\n* Support for merging nested prop paths by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2561\n* Client-side visit helpers to update props by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2589\n* Introduction of the `` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2580\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.11...v2.2.0\n\n## [v2.1.11](https://github.com/inertiajs/inertia/compare/v2.1.10...v2.1.11) - 2025-09-24\n\n### What's Changed\n\n* Fix flaky tests in CI by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2582\n* Bump Playwright by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2585\n* Progress indicator API by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2581\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.10...v2.1.11\n\n## [v2.1.10](https://github.com/inertiajs/inertia/compare/v2.1.9...v2.1.10) - 2025-09-22\n\n### What's Changed\n\n* Fix PNPM publishing by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2578\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.9...v2.1.10\n\n## [v2.1.9](https://github.com/inertiajs/inertia/compare/v2.1.8...v2.1.9) - 2025-09-22\n\n### What's Changed\n\n* Fix PNPM build by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2577\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.8...v2.1.9\n\n## [v2.1.8](https://github.com/inertiajs/inertia/compare/v2.1.7...v2.1.8) - 2025-09-22\n\n### What's Changed\n\n* Publish packages in CI by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2575\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.7...v2.1.8\n\n## [v2.1.7](https://github.com/inertiajs/inertia/compare/v2.1.6...v2.1.7) - 2025-09-18\n\n### What's Changed\n\n* Bump axios from 1.11.0 to 1.12.0 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2568\n* Bump dependencies by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2571\n* TypeScript upgrade by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2573\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.6...v2.1.7\n\n## [v2.1.6](https://github.com/inertiajs/inertia/compare/v2.1.5...v2.1.6) - 2025-09-12\n\n### What's Changed\n\n* Invalidate prefetch cache when page is received from a network request by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2567\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.5...v2.1.6\n\n## [v2.1.5](https://github.com/inertiajs/inertia/compare/v2.1.4...v2.1.5) - 2025-09-05\n\n### What's Changed\n\n* Fix race condition when combining Deferred Props with an instant Partial Reload on mount by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2562\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.4...v2.1.5\n\n## [v2.1.4](https://github.com/inertiajs/inertia/compare/v2.1.3...v2.1.4) - 2025-09-03\n\n### What's Changed\n\n* Replace html-escape with built-in function on Svelte package by [@kresnasatya](https://github.com/kresnasatya) in https://github.com/inertiajs/inertia/pull/2535\n* Update dirty state after DOM changes (React only) by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2558\n* Prevent errors caused by null href value by [@fritz-c](https://github.com/fritz-c) in https://github.com/inertiajs/inertia/pull/2550\n* Remove data from the dependency array of setDefaults by [@jasonlbeggs](https://github.com/jasonlbeggs) in https://github.com/inertiajs/inertia/pull/2554\n\n### New Contributors\n\n* [@fritz-c](https://github.com/fritz-c) made their first contribution in https://github.com/inertiajs/inertia/pull/2550\n* [@jasonlbeggs](https://github.com/jasonlbeggs) made their first contribution in https://github.com/inertiajs/inertia/pull/2554\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.3...v2.1.4\n\n## [v2.1.3](https://github.com/inertiajs/inertia/compare/v2.1.2...v2.1.3) - 2025-08-27\n\n### What's Changed\n\n* Code formatting with Prettier by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2515\n* Add EditorConfig and fix some whitespace issues by [@jrmajor](https://github.com/jrmajor) in https://github.com/inertiajs/inertia/pull/2516\n* Fix for nullable object types in `useForm` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2528\n* Fix for Form Component in Svelte when resetting use input/button by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2525\n* Improve Link component `as` prop by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2524\n* [v2.x] fix: type error by changing page props type to `any` by [@peaklabs-dev](https://github.com/peaklabs-dev) in https://github.com/inertiajs/inertia/pull/2520\n* Revert to back to Lodash to retain ES2020 compatibility by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2527\n* Verify ES2020 compatibility in CI by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2530\n* [Vue] Fixing action attribute on Form Component when using Wayfinder by [@nicolagianelli](https://github.com/nicolagianelli) in https://github.com/inertiajs/inertia/pull/2532\n* Make package.json structure in Svelte package Consistent as Vue and React by [@kresnasatya](https://github.com/kresnasatya) in https://github.com/inertiajs/inertia/pull/2529\n* Remove Svelte 5-next version constraint by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2533\n* improve typescript configuration by [@sudo-barun](https://github.com/sudo-barun) in https://github.com/inertiajs/inertia/pull/2470\n* Format JSON files with Prettier by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2534\n* Fix warning about `inert` attribute in React < 19 by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2536\n* Fix keyboard activation when using `prefetch: 'click'` by [@pedroborges](https://github.com/pedroborges) in https://github.com/inertiajs/inertia/pull/2538\n* Fix `useForm` to respect manual `setDefaults()` calls in `onSuccess` and unify timing across adapters by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2539\n* Run Playwright in parallel in CI by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2540\n* Fix Coding Standards workflow by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2547\n* bumpup axios to fix CVE-2025-7783 by [@vallerydelexy](https://github.com/vallerydelexy) in https://github.com/inertiajs/inertia/pull/2546\n* Bump `@sveltejs/kit` version by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2548\n\n### New Contributors\n\n* [@peaklabs-dev](https://github.com/peaklabs-dev) made their first contribution in https://github.com/inertiajs/inertia/pull/2520\n* [@nicolagianelli](https://github.com/nicolagianelli) made their first contribution in https://github.com/inertiajs/inertia/pull/2532\n* [@kresnasatya](https://github.com/kresnasatya) made their first contribution in https://github.com/inertiajs/inertia/pull/2529\n* [@vallerydelexy](https://github.com/vallerydelexy) made their first contribution in https://github.com/inertiajs/inertia/pull/2546\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.2...v2.1.3\n\n## [v2.1.2](https://github.com/inertiajs/inertia/compare/v2.1.1...v2.1.2) - 2025-08-15\n\n### What's Changed\n\n* Fix for manipulating form after redirect in `onSubmitComplete` by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2510\n* Support for passing Wayfinder objects to router methods by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2497\n* Tag-based cache invalidation for prefetch requests by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2484\n* Add `resetOnError`, `resetOnSuccess`, `setDefaultsOnSuccess` to Form component by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2514\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.1...v2.1.2\n\n## [v2.1.1](https://github.com/inertiajs/inertia/compare/v2.1.0...v2.1.1) - 2025-08-14\n\n### What's Changed\n\n* Improve `Link` component types and support for prefetch events by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2464\n* allow passing partial errors object to `setError()` by [@sudo-barun](https://github.com/sudo-barun) in https://github.com/inertiajs/inertia/pull/2461\n* Add missing generic type support to PendingVisit and VisitHelperOptions by [@HichemTab-tech](https://github.com/HichemTab-tech) in https://github.com/inertiajs/inertia/pull/2454\n* Revamp useForm's generic types across adaptors by [@Spice-King](https://github.com/Spice-King) in https://github.com/inertiajs/inertia/pull/2335\n* TypeScript improvements for `Link` component and Client Side Visits by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2472\n* Further TS improvements for `useForm` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2475\n* Improve consistency in `useForm` across adapters by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2482\n* Improve TypeScript support for Client Side Visit `props` callback by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2483\n* TS improvements to Svelte's `` and `useForm()` implementations by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2489\n* Typescript Improvements by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2468\n* Test apps in TypeScript by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2469\n* Fix empty action in `` component when the current URL has more than one segment by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2501\n* Support uppercase method in `` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2502\n* Add `Form` component `disableWhileProcessing` prop by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2504\n* Reset form fields by name in Form components by [@skryukov](https://github.com/skryukov) in https://github.com/inertiajs/inertia/pull/2499\n* Add `onSubmitComplete` prop to `Form` component by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2503\n* Remove failed prefetch requests from in-flight array by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2500\n* Add `defaults()` method to Form component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2507\n* Release script by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2508\n* Only `reset()` and `defaults()` in `onSubmitComplete` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2509\n\n### New Contributors\n\n* [@sudo-barun](https://github.com/sudo-barun) made their first contribution in https://github.com/inertiajs/inertia/pull/2461\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.1.0...v2.1.1\n\n## [v2.1.0](https://github.com/inertiajs/inertia/compare/v2.0.17...v2.1.0) - 2025-08-13\n\n### What's Changed\n\n* Support for passing custom component to `as` prop of `Link` component. by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2443\n* Use `nodemon` to trigger new files and deleted files in test apps by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2442\n* Use ReactNode type for children props by [@chack1172](https://github.com/chack1172) in https://github.com/inertiajs/inertia/pull/2385\n* Allow function as children component in react Deferred and WhenVisible by [@chack1172](https://github.com/chack1172) in https://github.com/inertiajs/inertia/pull/2386\n* Improve test that waits for scroll position restoration by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2473\n* Introduction of the `Form` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2474\n* Improve `children` prop of `` Component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2487\n* Add Form component ref support by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2496\n* Make Svelte's not crash in an SSR environment by [@dkulchenko](https://github.com/dkulchenko) in https://github.com/inertiajs/inertia/pull/2396\n* Fix core: Queue processing when an item fails by [@pintend](https://github.com/pintend) in https://github.com/inertiajs/inertia/pull/2467\n* Migrate playgrounds to Tailwind 4 by [@jrmajor](https://github.com/jrmajor) in https://github.com/inertiajs/inertia/pull/2369\n\n### New Contributors\n\n* [@dkulchenko](https://github.com/dkulchenko) made their first contribution in https://github.com/inertiajs/inertia/pull/2396\n* [@pintend](https://github.com/pintend) made their first contribution in https://github.com/inertiajs/inertia/pull/2467\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.17...v2.1.0\n\n## [v2.0.17](https://github.com/inertiajs/inertia/compare/v2.0.16...v2.0.17) - 2025-07-18\n\n### What's Changed\n\n* Bump multer from 2.0.1 to 2.0.2 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2447\n* Bump vite from 5.4.12 to 5.4.19 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2450\n* Bump esbuild from 0.21.5 to 0.25.0 by [@dependabot](https://github.com/dependabot)[bot] in https://github.com/inertiajs/inertia/pull/2451\n* Explicit string coercion in `Head` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2453\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.16...v2.0.17\n\n## [v2.0.16](https://github.com/inertiajs/inertia/compare/v2.0.15...v2.0.16) - 2025-07-18\n\n### What's Changed\n\n* Make errorBag parameter optional by [@joelstein](https://github.com/joelstein) in https://github.com/inertiajs/inertia/pull/2445\n\n### New Contributors\n\n* [@joelstein](https://github.com/joelstein) made their first contribution in https://github.com/inertiajs/inertia/pull/2445\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.15...v2.0.16\n\n## [v2.0.15](https://github.com/inertiajs/inertia/compare/v2.0.14...v2.0.15) - 2025-07-17\n\n### What's Changed\n\n* Improve GitHub issue templates by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2418\n* Escape the attribute values that are passed into the `Head` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2403\n* Introduce single method to reset form state and clear errors by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2414\n* Use `CacheForOption` type in React `Link` component by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2426\n* Improve query string merging in `mergeDataIntoQueryString()` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2417\n* Improve scrolling when using anchor hash by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2428\n* Cancel sync request on popstate event by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2429\n* Support for path traversal by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2413\n* Add event callbacks to `ClientSideVisitOptions` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2405\n* Pass parameters to `onFinish` and `onSuccess` callbacks on Client Side Visits by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2433\n* Prevent JS builds and test apps from being minified by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2424\n* Migrate to pnpm by [@jrmajor](https://github.com/jrmajor) in https://github.com/inertiajs/inertia/pull/2276\n* Fix single-use prefetching by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2440\n* Change defaults values order in onSuccess callback of useForm by [@yilanboy](https://github.com/yilanboy) in https://github.com/inertiajs/inertia/pull/2437\n* Improve reactivity of Link components by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2441\n\n### New Contributors\n\n* [@yilanboy](https://github.com/yilanboy) made their first contribution in https://github.com/inertiajs/inertia/pull/2437\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.14...v2.0.15\n\n## [v2.0.14](https://github.com/inertiajs/inertia/compare/v2.0.13...v2.0.14) - 2025-06-26\n\n### What's Changed\n\n* fix: fixed type error in `useForm SetDataAction` type by [@fxnm](https://github.com/fxnm) in https://github.com/inertiajs/inertia/pull/2395\n* Call `provider.update` outside useEffect block to support SSR by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2397\n* Improve state restore logic in `useRemember` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2401\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.13...v2.0.14\n\n## [v2.0.13](https://github.com/inertiajs/inertia/compare/v2.0.12...v2.0.13) - 2025-06-20\n\n### What's Changed\n\n* Allow deepMerge on custom properties by [@mpociot](https://github.com/mpociot) in https://github.com/inertiajs/inertia/pull/2344\n* fix: React StrictMode breaking Inertia Head by [@jordanhavard](https://github.com/jordanhavard) in https://github.com/inertiajs/inertia/pull/2328\n* Bump multer from 1.4.4 to 2.0.1 in /tests/app by [@dependabot](https://github.com/dependabot) in https://github.com/inertiajs/inertia/pull/2373\n* Initialize router before components in React by [@chack1172](https://github.com/chack1172) in https://github.com/inertiajs/inertia/pull/2379\n* Prevent duplicate render of the initial page in React by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2377\n* Update default state when `setDefault()` is called right after `setData()` is called by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2364\n* [2.x] Restore `router.resolveComponent()` method by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2039\n* Move `currentIsInitialPage` variable outside of `App` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2381\n* Don't overwrite Vite class in Svelte playgrounds by [@jrmajor](https://github.com/jrmajor) in https://github.com/inertiajs/inertia/pull/2368\n* Dependency update + Prevent Playwright 1.53.0 due to Svelte bug by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2382\n* Update to Vite 6 by [@SuperDJ](https://github.com/SuperDJ) in https://github.com/inertiajs/inertia/pull/2315\n* Fix React scroll restoration on popState by [@sebastiandedeyne](https://github.com/sebastiandedeyne) in https://github.com/inertiajs/inertia/pull/2357\n* feat(useForm): export granular setData types and introduce SetDataAction by [@hasib-devs](https://github.com/hasib-devs) in https://github.com/inertiajs/inertia/pull/2356\n* Refactor `mergeStrategies` to `matchOn` by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2384\n* Remove `setSwapComponent` method and cleanup after PR #2379 by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2383\n\n### New Contributors\n\n* [@jordanhavard](https://github.com/jordanhavard) made their first contribution in https://github.com/inertiajs/inertia/pull/2328\n* [@chack1172](https://github.com/chack1172) made their first contribution in https://github.com/inertiajs/inertia/pull/2379\n* [@jrmajor](https://github.com/jrmajor) made their first contribution in https://github.com/inertiajs/inertia/pull/2368\n* [@SuperDJ](https://github.com/SuperDJ) made their first contribution in https://github.com/inertiajs/inertia/pull/2315\n* [@hasib-devs](https://github.com/hasib-devs) made their first contribution in https://github.com/inertiajs/inertia/pull/2356\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.12...v2.0.13\n\n## [v2.0.12](https://github.com/inertiajs/inertia/compare/v2.0.11...v2.0.12) - 2025-06-10\n\n### What's Changed\n\n* Send `Purpose: prefetch` header on prefetching by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2367\n\n### New Contributors\n\n* [@pascalbaljet](https://github.com/pascalbaljet) made their first contribution in https://github.com/inertiajs/inertia/pull/2367\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.11...v2.0.12\n\n## [v2.0.11](https://github.com/inertiajs/inertia/compare/v2.0.10...v2.0.11) - 2025-05-16\n\n### What's Changed\n\n* Fix progress bar not showing on subsequent page clicks by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2349\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.10...v2.0.11\n\n## [v2.0.10](https://github.com/inertiajs/inertia/compare/v2.0.9...v2.0.10) - 2025-05-15\n\n### What's Changed\n\n* Don't show progress bar on prefetch hover by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2347\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.9...v2.0.10\n\n## [v2.0.9](https://github.com/inertiajs/inertia/compare/v2.0.8...v2.0.9) - 2025-05-09\n\n### What's Changed\n\n* Bump [@sveltejs](https://github.com/sveltejs)/kit from 2.11.1 to 2.20.6 by [@dependabot](https://github.com/dependabot) in https://github.com/inertiajs/inertia/pull/2312\n* Bump vite from 5.4.17 to 5.4.18 by [@dependabot](https://github.com/dependabot) in https://github.com/inertiajs/inertia/pull/2307\n* Fix for deferred props + prefetch links by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2321\n* Progress: Make hide and reveal CSP-compatible by [@flexponsive](https://github.com/flexponsive) in https://github.com/inertiajs/inertia/pull/2316\n* Corrected URL search parameter merge logic to match behavior prior to v2.0.8 by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2341\n* Corrects url search parameter merge logic to match behavior prior to v2.0.8 by [@CTOJoe](https://github.com/CTOJoe) in https://github.com/inertiajs/inertia/pull/2320\n* Bump vite from 5.4.18 to 5.4.19 by [@dependabot](https://github.com/dependabot) in https://github.com/inertiajs/inertia/pull/2334\n* On back button, fetch from server if version hash is not current by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2342\n* Allow custom URL protocols by [@mpociot](https://github.com/mpociot) in https://github.com/inertiajs/inertia/pull/2329\n\n### New Contributors\n\n* [@flexponsive](https://github.com/flexponsive) made their first contribution in https://github.com/inertiajs/inertia/pull/2316\n* [@CTOJoe](https://github.com/CTOJoe) made their first contribution in https://github.com/inertiajs/inertia/pull/2320\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.8...v2.0.9\n\n## [v2.0.8](https://github.com/inertiajs/inertia/compare/v2.0.7...v2.0.8) - 2025-04-10\n\n### What's Changed\n\n* Add deepMerge Support for Merging Nested Arrays and Objects in Props by [@HichemTab-tech](https://github.com/HichemTab-tech) in https://github.com/inertiajs/inertia/pull/2069\n* fix: build error because of invalid type definitions by [@fxnm](https://github.com/fxnm) in https://github.com/inertiajs/inertia/pull/2301\n* fix(vue/useForm/defaults): untrack before assign by [@Dsaquel](https://github.com/Dsaquel) in https://github.com/inertiajs/inertia/pull/2112\n* Improve type checking of request data by [@7nohe](https://github.com/7nohe) in https://github.com/inertiajs/inertia/pull/2304\n* Remove empty payload from GET requests by [@edgars-vasiljevs](https://github.com/edgars-vasiljevs) in https://github.com/inertiajs/inertia/pull/2305\n\n### New Contributors\n\n* [@HichemTab-tech](https://github.com/HichemTab-tech) made their first contribution in https://github.com/inertiajs/inertia/pull/2069\n* [@fxnm](https://github.com/fxnm) made their first contribution in https://github.com/inertiajs/inertia/pull/2301\n* [@Dsaquel](https://github.com/Dsaquel) made their first contribution in https://github.com/inertiajs/inertia/pull/2112\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.7...v2.0.8\n\n## [v2.0.7](https://github.com/inertiajs/inertia/compare/v2.0.6...v2.0.7) - 2025-04-08\n\n### What's Changed\n\n* Added missing pages to React and Svelte5 playrounds by [@Verox001](https://github.com/Verox001) in https://github.com/inertiajs/inertia/pull/2217\n* chore: replace lodash to decrease bundle size by [@lcdss](https://github.com/lcdss) in https://github.com/inertiajs/inertia/pull/2210\n* do not pass url when storing scroll state to history by [@miDeb](https://github.com/miDeb) in https://github.com/inertiajs/inertia/pull/2280\n* fix: react `Deferred` component error on partial visits by [@KaioFelps](https://github.com/KaioFelps) in https://github.com/inertiajs/inertia/pull/2223\n* Bump vite from 5.4.16 to 5.4.17 by [@dependabot](https://github.com/dependabot) in https://github.com/inertiajs/inertia/pull/2295\n* [2.x] SSR clustering by [@RobertBoes](https://github.com/RobertBoes) in https://github.com/inertiajs/inertia/pull/2206\n* Allow Object type for href prop by [@nckrtl](https://github.com/nckrtl) in https://github.com/inertiajs/inertia/pull/2292\n* Update GitHub Actions to Ubuntu 24.04 by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/inertiajs/inertia/pull/2299\n* [2.x]: Support for nested paths in forms by [@joaopalopes24](https://github.com/joaopalopes24) in https://github.com/inertiajs/inertia/pull/2181\n\n### New Contributors\n\n* [@Verox001](https://github.com/Verox001) made their first contribution in https://github.com/inertiajs/inertia/pull/2217\n* [@lcdss](https://github.com/lcdss) made their first contribution in https://github.com/inertiajs/inertia/pull/2210\n* [@miDeb](https://github.com/miDeb) made their first contribution in https://github.com/inertiajs/inertia/pull/2280\n* [@KaioFelps](https://github.com/KaioFelps) made their first contribution in https://github.com/inertiajs/inertia/pull/2223\n* [@nckrtl](https://github.com/nckrtl) made their first contribution in https://github.com/inertiajs/inertia/pull/2292\n* [@joaopalopes24](https://github.com/joaopalopes24) made their first contribution in https://github.com/inertiajs/inertia/pull/2181\n\n**Full Changelog**: https://github.com/inertiajs/inertia/compare/v2.0.6...v2.0.7\n\n## [v2.0.6](https://github.com/inertiajs/inertia/compare/v2.0.5...v2.0.6)\n\n- Deferred: More descriptive Deferred data prop error ([#2284](https://github.com/inertiajs/inertia/pull/2284))\n- Bump vite from 5.4.12 to 5.4.16 ([#2288](https://github.com/inertiajs/inertia/pull/2288))\n- Fix location return history decryption throwing error ([#2282](https://github.com/inertiajs/inertia/pull/2282))\n- Make isDirty reactive to defaults ([#2236](https://github.com/inertiajs/inertia/pull/2236))\n- Fix playground WhenVisible always ([#2203](https://github.com/inertiajs/inertia/pull/2203))\n- Wayfinder support ([#2290](https://github.com/inertiajs/inertia/pull/2290))\n\n## [v2.0.5](https://github.com/inertiajs/inertia/compare/v2.0.4...v2.0.5)\n\n- Fix history state errors by nicholaspufal ([#2265](https://github.com/inertiajs/inertia/pull/2265))\n- Bump axios from 1.7.9 to 1.8.2 ([#2269](https://github.com/inertiajs/inertia/pull/2269))\n- Bump esbuild from 0.16.17 to 0.25.0 #2231 ([#2231](https://github.com/inertiajs/inertia/pull/2231))\n- Bump vite from 5.4.11 to 5.4.12 ([#2201](https://github.com/inertiajs/inertia/pull/2201))\n\n## [v2.0.4](https://github.com/inertiajs/inertia/compare/v2.0.3...v2.0.4)\n\n- Fix anchor links on initial visits ([#2258](https://github.com/inertiajs/inertia/pull/2258))\n\n## [v2.0.3](https://github.com/inertiajs/inertia/compare/v2.0.2...v2.0.3)\n\n- Fix: Reload on mount ([#2200](https://github.com/inertiajs/inertia/pull/2200))\n\n## [v2.0.2](https://github.com/inertiajs/inertia/compare/v2.0.1...v2.0.2)\n\n- Fix SSR with scroll restoration ([#2190](https://github.com/inertiajs/inertia/pull/2190))\n- Fix for scroll + back bug ([#2191](https://github.com/inertiajs/inertia/pull/2191))\n- Backport 1.x fixes from [v1.3.0](https://github.com/inertiajs/inertia/releases/tag/v1.3.0) release ([#2193](https://github.com/inertiajs/inertia/pull/2193))\n\n## [v2.0.1](https://github.com/inertiajs/inertia/compare/v2.0.0...v2.0.1)\n\n- Fix playground dependencies ([#2070](https://github.com/inertiajs/inertia/pull/2070))\n- Removed Vitest tests + dependencies ([#2175](https://github.com/inertiajs/inertia/pull/2175))\n- Augment `vue` instead of `@vue/runtime-core` ([#2099](https://github.com/inertiajs/inertia/pull/2099))\n- Fix prefetch missing `cacheFor` default value ([#2136](https://github.com/inertiajs/inertia/pull/2136))\n- Fix `useForm` re-renders by memoizing functions in React [#2146](https://github.com/inertiajs/inertia/pull/2146)\n- WhenVisible useEffect function is not recreated when params change. ([#2153](https://github.com/inertiajs/inertia/pull/2153))\n- Ensure callback execution ([#2163](https://github.com/inertiajs/inertia/pull/2163))\n- More resilient logic for stripping the origin from page URLs ([#2164](https://github.com/inertiajs/inertia/pull/2164))\n- Add helper scripts for running tests ([#2173](https://github.com/inertiajs/inertia/pull/2173))\n- Export `InertiaFormProps` in React ([#2161](https://github.com/inertiajs/inertia/pull/2161))\n- Use default empty object in `useForm` Vue and Svelte ([#2052](https://github.com/inertiajs/inertia/pull/2052))\n- Remove `data` option from `useForm` options type ([#2060](https://github.com/inertiajs/inertia/pull/2060))\n- Take over scroll restoration from browser ([#2051](https://github.com/inertiajs/inertia/pull/2051))\n\n## [v2.0.0](https://github.com/inertiajs/inertia/compare/v1.2.0...v2.0.0)\n\n### Added\n\n- Add polling\n- Add link prefetching\n- Add deferred props\n- Add lazy loading of data when scrolling\n- Add history encryption API\n- Add React 19 support ([#2131](https://github.com/inertiajs/inertia/pull/2131))\n- Add client side visits ([#2130](https://github.com/inertiajs/inertia/pull/2130))\n\n### Changed\n\n- Removal of NProgress dependency ([#2045](https://github.com/inertiajs/inertia/pull/2045))\n- Change TypeScript module resolution in the Svelte adapter ([#2035](https://github.com/inertiajs/inertia/pull/2035))\n- Refactor `createInertiaApp` in Svelte adapter ([#2036](https://github.com/inertiajs/inertia/pull/2036))\n\n### Fixed\n\n- Fix: make Link href prop reactive ([#2089](https://github.com/inertiajs/inertia/pull/2089))\n\n## [v1.3.0](https://github.com/inertiajs/inertia/compare/v1.2.0...v1.3.0)\n\n### Added\n\n- Add React 19 support ([#2121](https://github.com/inertiajs/inertia/pull/2121))\n- Add Svelte 5 support ([#1970](https://github.com/inertiajs/inertia/pull/1970))\n- Add TypeScript support to Svelte adapter ([#1866](https://github.com/inertiajs/inertia/pull/1866), [69292e](https://github.com/inertiajs/inertia/commit/69292ef3592ccca5e0f05f7ce131a53f6c1ba22b), [#2003](https://github.com/inertiajs/inertia/pull/2003), [#2005](https://github.com/inertiajs/inertia/pull/2005))\n\n### Changed\n\n- Skip intercepting non-left button clicks on links ([#1908](https://github.com/inertiajs/inertia/pull/1908), [#1910](https://github.com/inertiajs/inertia/pull/1910))\n- Changed `preserveScroll` to be `true` on initial page visit ([#1360](https://github.com/inertiajs/inertia/pull/1360))\n- Return early when using `router.on()` during SSR ([#1715](https://github.com/inertiajs/inertia/pull/1715))\n- Use updater function in `setData` in `useForm` hook in React adapter ([#1859](https://github.com/inertiajs/inertia/pull/1859))\n\n### Fixed\n\n- Fix history navigation issue on Chrome iOS ([#1984](https://github.com/inertiajs/inertia/pull/1984), [#1992](https://github.com/inertiajs/inertia/pull/1992))\n- Fix `setNavigationType` for Safari 10 ([#1957](https://github.com/inertiajs/inertia/pull/1957))\n- Export `InertiaFormProps` in all adapters ([#1596](https://github.com/inertiajs/inertia/pull/1596), [#1734](https://github.com/inertiajs/inertia/pull/1734))\n- Fix `isDirty` after `form.defaults()` call in Vue 3 ([#1985](https://github.com/inertiajs/inertia/pull/1985))\n- Fix scroll reset on page navigation ([#1980](https://github.com/inertiajs/inertia/pull/1980))\n- Fix scroll position restoration for `[scroll-region]` elements ([#1782](https://github.com/inertiajs/inertia/pull/1782), [#1980](https://github.com/inertiajs/inertia/pull/1980))\n- Fix `useForm` re-renders by memoizing functions in React adapter ([#1607](https://github.com/inertiajs/inertia/pull/1607))\n- Fix doubling hash when using `` ([#1728](https://github.com/inertiajs/inertia/pull/1728))\n- Fix type augmentation in Vue 3 adapter ([#1958](https://github.com/inertiajs/inertia/pull/1958))\n- Fix form helper `transform` return type in React adapter ([#1896](https://github.com/inertiajs/inertia/pull/1896))\n- Fix props reactivity in Svelte adapter ([#1969](https://github.com/inertiajs/inertia/pull/1969))\n- Fix `` component to respect `preserveState` option in Svelte adapter ([#1943](https://github.com/inertiajs/inertia/pull/1943))\n- Fix 'received an unexpected slot \"default\"' warning in Svelte adapter ([#1941](https://github.com/inertiajs/inertia/pull/1941))\n- Fix command + click behavior on links in React adapter ([#2132](https://github.com/inertiajs/inertia/pull/2132))\n- Fix import in Svelte adapter ([#2002](https://github.com/inertiajs/inertia/pull/2002))\n\n## [v1.2.0](https://github.com/inertiajs/inertia/compare/v1.1.0...v1.2.0)\n\n- Fix `preserveScroll` and `preserveState` types ([#1882](https://github.com/inertiajs/inertia/pull/1882))\n- Revert \"merge props from partial reloads\" ([#1895](https://github.com/inertiajs/inertia/pull/1895))\n\n## [v1.1.0](https://github.com/inertiajs/inertia/compare/v1.0.16...v1.1.0)\n\n- Add new `except` visit option to exclude props from partial reloads ([#1876](https://github.com/inertiajs/inertia/pull/1876))\n- Deep merge props from partial reloads ([#1877](https://github.com/inertiajs/inertia/pull/1877))\n\n## [v1.0.16](https://github.com/inertiajs/inertia/compare/v1.0.15...v1.0.16)\n\n- Fix Svelte 4 slot rendering issues ([#1763](https://github.com/inertiajs/inertia/pull/1763))\n- Fix accessibility warning in Svelte `Link` component ([#1858](https://github.com/inertiajs/inertia/pull/1858))\n- Use `Omit` instead of `Exclude` in router types ([#1857](https://github.com/inertiajs/inertia/pull/1857))\n\n## [v1.0.15](https://github.com/inertiajs/inertia/compare/v1.0.14...v1.0.15)\n\n- Bump axios from `v1.4.0` to `v1.6.0` ([#1723](https://github.com/inertiajs/inertia/pull/1723))\n\n## [v1.0.14](https://github.com/inertiajs/inertia/compare/v1.0.13...v1.0.14)\n\n- Revert \"Clear errors on form reset (#1568)\" ([#1716](https://github.com/inertiajs/inertia/pull/1716))\n\n## [v1.0.13](https://github.com/inertiajs/inertia/compare/v1.0.12...v1.0.13)\n\n- Clear errors on form reset ([#1568](https://github.com/inertiajs/inertia/pull/1568))\n- Fix `Link` type in React ([#1659](https://github.com/inertiajs/inertia/pull/1659))\n\n## [v1.0.12](https://github.com/inertiajs/inertia/compare/v1.0.11...v1.0.12)\n\n- Fix type of `onClick` for `Link` component in React and Vue ([#1699](https://github.com/inertiajs/inertia/pull/1699), [#1701](https://github.com/inertiajs/inertia/pull/1701))\n\n## [v1.0.11](https://github.com/inertiajs/inertia/compare/v1.0.10...v1.0.11)\n\n- Fix form helper types for `setDefaults()` method (React) and `defaults()` method (Vue) ([#1504](https://github.com/inertiajs/inertia/pull/1504))\n- Fix interface issue with `useForm()` in React and Vue adapters ([#1649](https://github.com/inertiajs/inertia/pull/1649))\n\n## [v1.0.10](https://github.com/inertiajs/inertia/compare/v1.0.9...v1.0.10)\n\n- Fix Svelte's `useForm` helper ([#1610](https://github.com/inertiajs/inertia/pull/1610))\n\n## [v1.0.9](https://github.com/inertiajs/inertia/compare/v1.0.8...v1.0.9)\n\n- Fix `` vNode handling in Vue 3 adapter ([#1590](https://github.com/inertiajs/inertia/pull/1590))\n- Add Svelte 4 support ([60699c7](https://github.com/inertiajs/inertia/commit/60699c7c5978eebd393e0333b567d8e465f4b58f))\n\n## [v1.0.8](https://github.com/inertiajs/inertia/compare/v1.0.7...v1.0.8)\n\n### Fixed\n\n- Fix `` vNode handling in Vue 3 adapter ([#1570](https://github.com/inertiajs/inertia/pull/1570))\n- Fix watching remembered data in Vue 3 adapter ([#1571](https://github.com/inertiajs/inertia/pull/1571))\n\n## [v1.0.7](https://github.com/inertiajs/inertia/compare/v1.0.6...v1.0.7)\n\n### Fixed\n\n- Fix `` fragment detection in Vue 3 adapter ([#1509](https://github.com/inertiajs/inertia/pull/1509))\n\n## [v1.0.6](https://github.com/inertiajs/inertia/compare/v1.0.5...v1.0.6)\n\n### Fixed\n\n- Fix `usePage()` null object error in Vue 3 adapter ([#1530](https://github.com/inertiajs/inertia/pull/1530))\n\n## [v1.0.5](https://github.com/inertiajs/inertia/compare/v1.0.4...v1.0.5)\n\n### Fixed\n\n- Fix `usePage()` reactivity in Vue 2 adapter ([#1527](https://github.com/inertiajs/inertia/pull/1527))\n\n### Changed\n\n- Simplify the Vue 2 form helper ([#1529](https://github.com/inertiajs/inertia/pull/1529))\n\n## [v1.0.4](https://github.com/inertiajs/inertia/compare/v1.0.3...v1.0.4)\n\n### Added\n\n- Added `displayName` to `Link` component in React adapter ([#1512](https://github.com/inertiajs/inertia/pull/1512))\n\n### Fixed\n\n- Fix `usePage()` reactivity in Vue 3 adapter ([#1469](https://github.com/inertiajs/inertia/pull/1469))\n\n## [v1.0.3](https://github.com/inertiajs/inertia/compare/v1.0.2...v1.0.3)\n\n### Added\n\n- Added initialization callback to form helper in Vue adapters ([#1516](https://github.com/inertiajs/inertia/pull/1516))\n\n## [v1.0.2](https://github.com/inertiajs/inertia/compare/v1.0.1...v1.0.2)\n\n### Fixed\n\n- Added explicit children to `InertiaHeadProps` ([#1448](https://github.com/inertiajs/inertia/pull/1448))\n- Exported `InertiaLinkProps` type ([#1450](https://github.com/inertiajs/inertia/pull/1450))\n- Improved React `usePage` generic type ([#1451](https://github.com/inertiajs/inertia/pull/1451))\n\n## [v1.0.1](https://github.com/inertiajs/inertia/compare/v1.0.0...v1.0.1)\n\n### Fixed\n\n- Fixed Vue type overrides for `$page` and `$inertia` ([#1393](https://github.com/inertiajs/inertia/pull/1393))\n- Restored React `usePage` generic type ([#1396](https://github.com/inertiajs/inertia/pull/1396))\n- Prevented need to use `Method` enum with the Link component ([#1392](https://github.com/inertiajs/inertia/pull/1392))\n- Restored Vue 3 `usePage` generic type ([#1394](https://github.com/inertiajs/inertia/pull/1394))\n- Fixed export of server types ([#1397](https://github.com/inertiajs/inertia/pull/1397))\n- Updated form types to support nested data ([#1401](https://github.com/inertiajs/inertia/pull/1401))\n- Allowed stronger type support with Vue `useForm` ([#1413](https://github.com/inertiajs/inertia/pull/1413))\n- Fixed Vue 2 `setup` prop types ([#1418](https://github.com/inertiajs/inertia/pull/1418))\n- Fixed issue when passing multiple children to React `Head` component ([#1433](https://github.com/inertiajs/inertia/pull/1433))\n\n## [v1.0.0](https://github.com/inertiajs/inertia/compare/7ce91ec...v1.0.0) - 2023-01-14\n\n### Added\n\n- Added SSR support to Svelte library ([#1349](https://github.com/inertiajs/inertia/pull/1349))\n- Added first-class TypeScript support to React adapter\n- Added first-class TypeScript support to Vue 2 adapter\n- Added first-class TypeScript support to Vue 3 adapter\n- Added new `useForm()` hook to Vue 2 adapter ([ff59196](https://github.com/inertiajs/inertia/commit/ff59196))\n\n### Changed\n\n- Renamed `@inertiajs/inertia` library to `@inertiajs/core` ([#1282](https://github.com/inertiajs/inertia/pull/1282))\n- Renamed `@inertiajs/inertia-react` library to `@inertiajs/react` ([#1282](https://github.com/inertiajs/inertia/pull/1282))\n- Renamed `@inertiajs/inertia-svelte` library to `@inertiajs/svelte` ([#1282](https://github.com/inertiajs/inertia/pull/1282))\n- Renamed `@inertiajs/inertia-vue` library to `@inertiajs/vue2` ([#1282](https://github.com/inertiajs/inertia/pull/1282))\n- Renamed `@inertiajs/inertia-vue3` library to `@inertiajs/vue3` ([#1282](https://github.com/inertiajs/inertia/pull/1282))\n- Merged progress library to core and deprecated `@inertiajs/progress` library ([#1282](https://github.com/inertiajs/inertia/pull/1282), [0b5f773](https://github.com/inertiajs/inertia/commit/0b5f773))\n- Merged server library to core and deprecated `@inertiajs/server` library ([#1282](https://github.com/inertiajs/inertia/pull/1282))\n- Renamed `Inertia` named export to `router` ([#1282](https://github.com/inertiajs/inertia/pull/1282), [e556703](https://github.com/inertiajs/inertia/commit/e556703))\n- Removed deprecated named exports ([#1282](https://github.com/inertiajs/inertia/pull/1282), [e556703](https://github.com/inertiajs/inertia/commit/e556703))\n- Removed deprecated `app` argument from `createInertiaApp()` in Vue adapters ([#1282](https://github.com/inertiajs/inertia/pull/1282), [65f8a5f](https://github.com/inertiajs/inertia/commit/65f8a5f))\n- Updated axios to 1.x ([#1377](https://github.com/inertiajs/inertia/pull/1377))\n- Simplified `usePage()` hook in Vue 3 adapter ([#1373](https://github.com/inertiajs/inertia/pull/1373))\n- Improved Svelte `use:inertia` and `` component ([#1344](https://github.com/inertiajs/inertia/pull/1344))\n- Removed global `visitOptions()` hook ([#1282](https://github.com/inertiajs/inertia/pull/1282), [30908c2](https://github.com/inertiajs/inertia/commit/30908c2))\n- Switched bundler from Microbundle to ESbuild ([f711b46](https://github.com/inertiajs/inertia/commit/f711b46), [8093713](https://github.com/inertiajs/inertia/commit/8093713), [342312d](https://github.com/inertiajs/inertia/commit/342312d), [c9e12b3](https://github.com/inertiajs/inertia/commit/c9e12b3))\n\n### Fixed\n\n- Fixed `` tag not always being included when a `title` callback is defined in `createInertiaApp()` ([#1055](https://github.com/inertiajs/inertia/pull/1055))\n- Fixed types to include `undefined` as a valid `FormDataConvertable` option ([#1165](https://github.com/inertiajs/inertia/pull/1165))\n- Fixed issue where remembered state wasn't clear on a full page reload ([769f643](https://github.com/inertiajs/inertia/commit/769f643))\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\nThank you for your interest in contributing to Inertia.js! Your contributions help make this project better for everyone.\n\nInertia.js is maintained as a monorepo using [pnpm workspaces](https://pnpm.io/workspaces). Below you'll find an overview of the repository and how to get your development environment running.\n\n> **Note:** You'll need **pnpm version 10 or higher**. If you're unsure which version you have, run `pnpm -v`.\n\n## Repository Overview\n\n```\ninertia/\n├── packages/ Core libraries and framework adapters\n│ ├── core/ Framework-agnostic core library\n│ ├── react/ React adapter\n│ │ └── test-app/ React test application\n│ ├── svelte/ Svelte adapter\n│ │ └── test-app/ Svelte test application\n│ └── vue3/ Vue 3 adapter\n│ └── test-app/ Vue 3 test application\n├── playgrounds/ Full Laravel applications for manual testing\n│ ├── react/ Laravel + React\n│ ├── svelte4/ Laravel + Svelte 4\n│ ├── svelte5/ Laravel + Svelte 5\n│ └── vue3/ Laravel + Vue 3\n└── tests/ End-to-end tests and test server\n ├── app/ Shared Node.js backend\n └── *.spec.ts Playwright test suite\n```\n\n### Key Components\n\n- **Core Library:** The framework-agnostic engine powering all adapters (`packages/core`).\n- **Adapters:** Framework-specific integrations for React, Svelte, and Vue.\n- **Test Applications:** Minimal frontend apps used for automated testing (`packages/*/test-app/`).\n- **Playwright Tests:** Framework-agnostic end-to-end tests that verify behavior across adapters (`tests/*.spec.ts`).\n- **Playgrounds:** Full Laravel applications for manual testing (`playgrounds/`). These are optional and may eventually be removed.\n\n## Getting Started\n\nClone the repository and install the dependencies:\n\n```sh\ngit clone https://github.com/inertiajs/inertia.git inertia\ncd inertia\npnpm install\n```\n\nThen, start the development environment:\n\n```sh\npnpm dev\n```\n\nThis builds the core library and all adapters, and starts a file watcher that will automatically rebuild each package when changes are made.\n\nIf you prefer, you can also start individual watchers from each package directory. For example:\n\n```sh\ncd packages/core && pnpm dev\ncd packages/react && pnpm dev\n```\n\n> **Note:** The core package (`packages/core`) must always be running, as all adapters depend on it.\n\n## Running Tests\n\nInertia.js uses Playwright to run a shared end-to-end test suite against each adapter. This is how we verify that Inertia behaves the same across React, Svelte, and Vue.\n\nRun the test suite for a specific adapter:\n\n```sh\npnpm test:react\npnpm test:svelte\npnpm test:vue\n```\n\nThese commands automatically set a `PACKAGE` environment variable that tells the Node.js test server which adapter to serve. For example, when running `pnpm test:react`, the test server loads the React test application.\n\nIf you want to run Playwright directly, you can pass the environment variable yourself:\n\n```sh\nPACKAGE=react playwright test\n```\n\nYou may filter tests by name:\n\n```sh\npnpm test:react -g \"partial reload\"\n```\n\nRun tests in headed mode (to see the browser):\n\n```sh\npnpm test:vue --headed\n```\n\nOr in debug mode:\n\n```sh\npnpm test:vue --debug\n```\n\n### How the Test Setup Works\n\nAll adapters use the same Node.js backend and Playwright test suite. The only difference is which adapter's test app is served.\n\n```\ntests/app/server.js Shared Node.js backend\n├── serves: react test app (when PACKAGE=react)\n├── serves: svelte test app (when PACKAGE=svelte)\n└── serves: vue test app (when PACKAGE=vue3)\n\ntests/*.spec.ts Shared Playwright test suite\n```\n\nWhen running a test command, the correct adapter is selected automatically:\n\n| Adapter | `PACKAGE` value | Test server port | App URL |\n| ------- | --------------- | ---------------- | -------------------------------------------------- |\n| React | `react` | 13716 | [http://localhost:13716/](http://localhost:13716/) |\n| Svelte | `svelte` | 13717 | [http://localhost:13717/](http://localhost:13717/) |\n| Vue 3 | `vue3` | 13715 | [http://localhost:13715/](http://localhost:13715/) |\n\n### Automatic Test Server Boot\n\nYou do not need to start the test server manually. When you run a test, Playwright automatically builds the frontend for the selected adapter and boots the Node.js test server before running the tests. This is configured in the Playwright config (`playwright.config.ts`) using the [`webServer`](https://playwright.dev/docs/test-configuration#webserver) option. If a server is already running (for example, during local development), Playwright will reuse it.\n\n## Running Test Applications\n\nThe test applications are the primary development environments for Inertia.js. These minimal apps cover all supported features and are used for both manual development and automated end-to-end testing.\n\nRun all test apps at once:\n\n```sh\npnpm dev:test-app\n```\n\nOr start an individual one:\n\n```sh\npnpm dev:test-app:react\npnpm dev:test-app:svelte\npnpm dev:test-app:vue\n```\n\nEach test app runs two servers:\n\n- A Node.js backend that automatically restarts when changed\n- A Vite development server for the frontend\n\nIf you are developing a new feature or fixing a bug, you can use these test apps to develop and test your changes.\n\n## Adding Tests\n\nIf you are fixing a bug, adding a feature, or improving existing functionality, please verify that your changes work across all adapters, not just one.\n\n### 1. Add Frontend Pages\n\nCreate the same frontend page in each test application:\n\n```\npackages/react/test-app/Pages/YourFeature.jsx\npackages/svelte/test-app/Pages/YourFeature.svelte\npackages/vue3/test-app/Pages/YourFeature.vue\n```\n\nEach page should provide the same behavior and functionality.\n\n### 2. Add Backend Routes (If Needed)\n\nIf your change requires a backend route, add it to the shared Node.js test server:\n\n```javascript\n// tests/app/server.js\napp.get('/your-feature', (req, res) =>\n inertia.render(req, res, {\n component: 'YourFeature',\n props: { foo: 'bar' },\n }),\n)\n```\n\n### 3. Write a Playwright Test\n\nAdd a new Playwright test to verify your change. Playwright allows us to test features across all adapters without duplicating test logic.\n\n```typescript\n// tests/your-feature.spec.ts\nimport { test, expect } from '@playwright/test'\n\ntest('your feature works', async ({ page }) => {\n await page.goto('/your-feature')\n // Your assertions here\n})\n```\n\n### 4. Run the Tests in All Adapters\n\nBe sure to run your test for each adapter:\n\n```sh\npnpm test:react -g \"your feature\"\npnpm test:svelte -g \"your feature\"\npnpm test:vue -g \"your feature\"\n```\n\nYour work is not considered complete until it works consistently across all frameworks.\n\n## Using the Playgrounds (Optional)\n\nThe repository also includes several full Laravel applications that integrate Inertia.js. These are optional and mostly useful for manually exploring how Inertia works inside a real Laravel app.\n\nThe playgrounds are provided as-is and are not part of the automated test setup. They may be removed in the future.\n\n### Getting Started\n\nTo start a playground, simply run:\n\n```sh\npnpm playground:react\n```\n\nThe playground script will automatically handle initial setup if needed:\n- Installing PHP dependencies via Composer\n- Installing Node.js dependencies via pnpm\n- Creating the `.env` file from `.env.example`\n- Generating the application key\n- Setting up the SQLite database\n- Running migrations with seed data\n\nVisit the application at [http://127.0.0.1:8000](http://127.0.0.1:8000).\n\nEach playground has its own pnpm script:\n\n```sh\npnpm playground:react\npnpm playground:svelte4\npnpm playground:svelte5\npnpm playground:vue\n```\n\n## Publishing (Maintainers Only)\n\nReleasing is handled by the included release script. You'll need both the `git` CLI and the GitHub CLI ([`gh`](https://cli.github.com)) installed. To create a new release:\n\n```sh\n./release.sh\n```\n\nThe script will:\n- Ensure you're on the master branch with a clean working tree\n- Prompt you to select the type of version bump (patch, minor, or major)\n- Update all package versions automatically\n- Update the lockfile\n- Create a git commit and tag\n- Push changes and tags to GitHub\n- Create a GitHub release with auto-generated notes\n- Trigger the CI publishing workflow\n\nPublishing is handled securely using GitHub + npm [trusted publishing](https://docs.npmjs.com/trusted-publishers).\n" }, { "path": "LICENSE.md", "content": "MIT License\n\nCopyright (c) Jonathan Reinink <jonathan@reinink.ca>\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "[![Inertia.js](https://raw.githubusercontent.com/inertiajs/inertia/master/.github/LOGO.png)](https://inertiajs.com/)\n\nInertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers. Find full documentation at [inertiajs.com](https://inertiajs.com/).\n\n## Contributing\n\nThank you for considering contributing to Inertia! You can read the contribution guide [here](CONTRIBUTING.md).\n\n## Code of Conduct\n\nIn order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).\n\n## Security Vulnerabilities\n\nPlease review [our security policy](https://github.com/inertiajs/inertia/security/policy) on how to report security vulnerabilities.\n\n## License\n\nInertia is open-sourced software licensed under the [MIT license](LICENSE.md).\n" }, { "path": "package.json", "content": "{\n \"name\": \"inertia\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build:all\": \"pnpm -r --filter './packages/*' build\",\n \"dev\": \"pnpx concurrently -c \\\"#b794f4,#61dafb,#d43008,#32a06f\\\" \\\"pnpm dev:core\\\" \\\"pnpm dev:react\\\" \\\"pnpm dev:svelte\\\" \\\"pnpm dev:vue\\\" --names=core,react,svelte,vue\",\n \"dev:core\": \"cd packages/core && pnpm run dev\",\n \"dev:vue\": \"cd packages/vue3 && pnpm run dev\",\n \"dev:react\": \"cd packages/react && pnpm run dev\",\n \"dev:svelte\": \"cd packages/svelte && pnpm run dev\",\n \"dev:test-app\": \"pnpx concurrently -c \\\"#61dafb,#d43008,#32a06f\\\" \\\"pnpm dev:test-app:react\\\" \\\"pnpm dev:test-app:svelte\\\" \\\"pnpm dev:test-app:vue\\\" --names=react,svelte,vue\",\n \"dev:test-app:react\": \"pnpx concurrently -c \\\"#c4b5fd,#ffa800\\\" \\\"cd tests/app && PACKAGE=react pnpm serve:watch\\\" \\\"cd packages/react/test-app && pnpm run dev\\\" --names=server,vite\",\n \"dev:test-app:svelte\": \"pnpx concurrently -c \\\"#c4b5fd,#ffa800\\\" \\\"cd tests/app && PACKAGE=svelte pnpm serve:watch\\\" \\\"cd packages/svelte/test-app && pnpm run dev\\\" --names=server,vite\",\n \"dev:test-app:vue\": \"pnpx concurrently -c \\\"#c4b5fd,#ffa800\\\" \\\"cd tests/app && PACKAGE=vue3 pnpm serve:watch\\\" \\\"cd packages/vue3/test-app && pnpm run dev\\\" --names=server,vite\",\n \"es2020-check\": \"pnpm -r --filter './packages/*' es2020-check\",\n \"lint:test-app\": \"pnpm -r --filter './packages/*/test-app' lint\",\n \"lint:test-app:react\": \"cd packages/react/test-app && pnpm run lint\",\n \"lint:test-app:svelte\": \"cd packages/svelte/test-app && pnpm run lint\",\n \"lint:test-app:vue\": \"cd packages/vue3/test-app && pnpm run lint\",\n \"type-check:test-app\": \"pnpm -r --filter './packages/*/test-app' type-check\",\n \"type-check:test-app:react\": \"cd packages/react/test-app && pnpm run type-check\",\n \"type-check:test-app:svelte\": \"cd packages/svelte/test-app && pnpm run type-check\",\n \"type-check:test-app:vue\": \"cd packages/vue3/test-app && pnpm run type-check\",\n \"test:react\": \"PACKAGE=react node playwright.js\",\n \"test:svelte\": \"PACKAGE=svelte node playwright.js\",\n \"test:vue\": \"PACKAGE=vue3 node playwright.js\",\n \"test:ssr:react\": \"PACKAGE=react SSR=true npx playwright test\",\n \"test:ssr:svelte\": \"PACKAGE=svelte SSR=true npx playwright test\",\n \"test:ssr:vue\": \"PACKAGE=vue3 SSR=true npx playwright test\",\n \"playground:react\": \"cd playgrounds/react && ./init.sh && composer run dev\",\n \"playground:svelte4\": \"cd playgrounds/svelte4 && ./init.sh && composer run dev\",\n \"playground:svelte5\": \"cd playgrounds/svelte5 && ./init.sh && composer run dev\",\n \"playground:vue\": \"cd playgrounds/vue3 && ./init.sh && composer run dev\",\n \"format\": \"prettier --write .\"\n },\n \"dependencies\": {\n \"@playwright/test\": \"^1.58.2\",\n \"prettier\": \"^3.8.1\",\n \"prettier-plugin-organize-imports\": \"^4.3.0\",\n \"prettier-plugin-svelte\": \"^3.5.0\",\n \"prettier-plugin-tailwindcss\": \"^0.7.2\"\n },\n \"optionalDependencies\": {\n \"@rollup/rollup-linux-x64-gnu\": \"^4.59.0\"\n },\n \"pnpm\": {\n \"overrides\": {\n \"cookie\": \">=0.7.0\",\n \"esbuild\": \">=0.25.0\"\n }\n }\n}\n" }, { "path": "packages/core/.gitignore", "content": "dist\ntypes\nnode_modules\npackage-lock.json\nyarn.lock\n" }, { "path": "packages/core/LICENSE", "content": "MIT License\n\nCopyright (c) Jonathan Reinink <jonathan@reinink.ca>\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "packages/core/build.js", "content": "#!/usr/bin/env node\nimport esbuild from 'esbuild'\nimport { nodeExternalsPlugin } from 'esbuild-node-externals'\n\nconst watch = process.argv.slice(1).includes('--watch')\nconst withDeps = process.argv.slice(1).includes('--with-deps')\n\nconst config = {\n bundle: true,\n minify: false,\n sourcemap: withDeps ? false : true,\n target: 'es2020',\n plugins: [\n ...(withDeps ? [] : [nodeExternalsPlugin()]),\n {\n name: 'inertia',\n setup(build) {\n let count = 0\n build.onEnd((result) => {\n if (count++ !== 0) {\n console.log(`Rebuilding ${build.initialOptions.entryPoints} (${build.initialOptions.format})…`)\n }\n })\n },\n },\n ],\n}\n\nconst builds = [\n { entryPoints: ['src/index.ts'], format: 'esm', outfile: 'dist/index.esm.js', platform: 'browser' },\n { entryPoints: ['src/index.ts'], format: 'cjs', outfile: 'dist/index.js', platform: 'browser' },\n { entryPoints: ['src/server.ts'], format: 'esm', outfile: 'dist/server.esm.js', platform: 'node' },\n { entryPoints: ['src/server.ts'], format: 'cjs', outfile: 'dist/server.js', platform: 'node' },\n]\n\nbuilds.forEach(async (build) => {\n const context = await esbuild.context({ ...config, ...build })\n\n if (watch) {\n console.log(`Watching ${build.entryPoints} (${build.format})…`)\n await context.watch()\n } else {\n await context.rebuild()\n context.dispose()\n console.log(`Built ${build.entryPoints} (${build.format}) ${withDeps ? '(with-deps)' : ''}…`)\n }\n})\n" }, { "path": "packages/core/package.json", "content": "{\n \"name\": \"@inertiajs/core\",\n \"version\": \"2.3.18\",\n \"license\": \"MIT\",\n \"description\": \"A framework for creating server-driven single page apps.\",\n \"contributors\": [\n \"Jonathan Reinink <jonathan@reinink.ca>\",\n \"Claudio Dekker <claudio@ubient.net>\",\n \"Sebastian De Deyne <sebastiandedeyne@gmail.com>\"\n ],\n \"homepage\": \"https://inertiajs.com/\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/inertiajs/inertia.git\",\n \"directory\": \"packages/inertia\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/inertiajs/inertia/issues\"\n },\n \"files\": [\n \"dist\",\n \"types\"\n ],\n \"type\": \"module\",\n \"main\": \"dist/index.js\",\n \"types\": \"types/index.d.ts\",\n \"exports\": {\n \".\": {\n \"types\": \"./types/index.d.ts\",\n \"import\": \"./dist/index.esm.js\",\n \"require\": \"./dist/index.js\"\n },\n \"./server\": {\n \"types\": \"./types/server.d.ts\",\n \"import\": \"./dist/server.esm.js\",\n \"require\": \"./dist/server.js\"\n }\n },\n \"typesVersions\": {\n \"*\": {\n \"server\": [\n \"types/server.d.ts\"\n ]\n }\n },\n \"scripts\": {\n \"build\": \"pnpm clean && ./build.js && tsc\",\n \"build:with-deps\": \"./build.js --with-deps\",\n \"clean\": \"rm -rf types && rm -rf dist\",\n \"dev\": \"pnpx concurrently -c \\\"#ffcf00,#3178c6\\\" \\\"pnpm dev:build\\\" \\\"pnpm dev:types\\\" --names build,types\",\n \"dev:build\": \"./build.js --watch\",\n \"dev:types\": \"tsc --watch --preserveWatchOutput\",\n \"es2020-check\": \"pnpm build:with-deps && es-check es2020 \\\"dist/index.esm.js\\\" --checkFeatures --module --noCache --verbose\"\n },\n \"dependencies\": {\n \"@types/lodash-es\": \"^4.17.12\",\n \"axios\": \"^1.13.5\",\n \"laravel-precognition\": \"^1.0.2\",\n \"lodash-es\": \"^4.17.23\",\n \"qs\": \"^6.15.0\"\n },\n \"devDependencies\": {\n \"@types/node\": \"^18.19.130\",\n \"@types/qs\": \"^6.14.0\",\n \"es-check\": \"^9.6.1\",\n \"esbuild\": \"^0.27.3\",\n \"esbuild-node-externals\": \"^1.20.1\",\n \"typescript\": \"^5.9.3\"\n }\n}\n" }, { "path": "packages/core/readme.md", "content": "# Inertia.js\n\nInertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.\n\nVisit [inertiajs.com](https://inertiajs.com/) to learn more.\n" }, { "path": "packages/core/src/config.ts", "content": "import { get, has, set } from 'lodash-es'\nimport { InertiaAppConfig } from './types'\n\n// Generate all possible nested paths\ntype ConfigKeys<T> = T extends Function\n ? never\n : string extends keyof T\n ? string\n :\n | Extract<keyof T, string>\n | {\n [Key in Extract<keyof T, string>]: T[Key] extends object ? `${Key}.${ConfigKeys<T[Key]> & string}` : never\n }[Extract<keyof T, string>]\n\n// Extract the value type at a given path\ntype ConfigValue<T, K extends ConfigKeys<T>> = K extends `${infer P}.${infer Rest}`\n ? P extends keyof T\n ? Rest extends ConfigKeys<T[P]>\n ? ConfigValue<T[P], Rest>\n : never\n : never\n : K extends keyof T\n ? T[K]\n : never\n\n// Helper type for setting multiple config values with an object\ntype ConfigSetObject<T> = {\n [K in ConfigKeys<T>]?: ConfigValue<T, K>\n}\n\ntype FirstLevelOptional<T> = {\n [K in keyof T]?: T[K] extends object ? { [P in keyof T[K]]?: T[K][P] } : T[K]\n}\n\nexport class Config<TConfig extends {} = {}> {\n protected config: FirstLevelOptional<TConfig> = {}\n protected defaults: TConfig\n\n public constructor(defaults: TConfig) {\n this.defaults = defaults\n }\n\n public extend<TExtension extends {}>(defaults?: TExtension): Config<TConfig & TExtension> {\n if (defaults) {\n this.defaults = { ...this.defaults, ...defaults } as TConfig & TExtension\n }\n\n return this as unknown as Config<TConfig & TExtension>\n }\n\n public replace(newConfig: FirstLevelOptional<TConfig>): void {\n this.config = newConfig\n }\n\n public get<K extends ConfigKeys<TConfig>>(key: K): ConfigValue<TConfig, K> {\n return (has(this.config, key) ? get(this.config, key) : get(this.defaults, key)) as ConfigValue<TConfig, K>\n }\n\n public set<K extends ConfigKeys<TConfig>>(\n keyOrValues: K | Partial<ConfigSetObject<TConfig>>,\n value?: ConfigValue<TConfig, K>,\n ): void {\n if (typeof keyOrValues === 'string') {\n set(this.config, keyOrValues, value)\n } else {\n Object.entries(keyOrValues).forEach(([key, val]) => {\n set(this.config, key, val)\n })\n }\n }\n}\n\nexport const config = new Config<InertiaAppConfig>({\n form: {\n recentlySuccessfulDuration: 2_000,\n forceIndicesArrayFormatInFormData: true,\n withAllErrors: false,\n },\n future: {\n preserveEqualProps: false,\n useDataInertiaHeadAttribute: false,\n useDialogForErrorModal: false,\n useScriptElementForInitialPage: false,\n },\n prefetch: {\n cacheFor: 30_000,\n hoverDelay: 75,\n },\n})\n" }, { "path": "packages/core/src/debounce.ts", "content": "export default function debounce<F extends (...params: any[]) => ReturnType<F>>(fn: F, delay: number): F {\n let timeoutID: NodeJS.Timeout\n return function (...args: unknown[]) {\n clearTimeout(timeoutID)\n timeoutID = setTimeout(() => fn.apply(this, args), delay)\n } as F\n}\n" }, { "path": "packages/core/src/debug.ts", "content": "export const stackTrace = (autolog = true) => {\n try {\n throw new Error()\n } catch (e) {\n const stack = (e as Error).stack\n\n if (!autolog) {\n return stack\n }\n\n console.log(stack)\n }\n}\n" }, { "path": "packages/core/src/dialog.ts", "content": "import modal from './modal'\n\nexport default {\n show(html: Record<string, unknown> | string): void {\n const { iframe, page } = modal.createIframeAndPage(html)\n\n iframe.style.boxSizing = 'border-box'\n iframe.style.display = 'block'\n\n const dialog = document.createElement('dialog')\n dialog.id = 'inertia-error-dialog'\n\n // Style the dialog to mimic 50px padding\n Object.assign(dialog.style, {\n width: 'calc(100vw - 100px)',\n height: 'calc(100vh - 100px)',\n padding: '0',\n margin: 'auto',\n border: 'none',\n backgroundColor: 'transparent',\n })\n\n // There's no way to directly style the backdrop of a dialog, so we need to use a style element...\n const dialogStyleElement = document.createElement('style')\n dialogStyleElement.textContent = `\n dialog#inertia-error-dialog::backdrop {\n background-color: rgba(0, 0, 0, 0.6);\n }\n\n dialog#inertia-error-dialog:focus {\n outline: none;\n }\n `\n document.head.appendChild(dialogStyleElement)\n\n dialog.addEventListener('click', (event: MouseEvent) => {\n if (event.target === dialog) {\n dialog.close()\n }\n })\n\n dialog.addEventListener('close', () => {\n dialogStyleElement.remove()\n dialog.remove()\n })\n\n dialog.appendChild(iframe)\n document.body.prepend(dialog)\n dialog.showModal()\n\n // Focus the dialog so the 'Escape' key works immediately\n dialog.focus()\n\n if (!iframe.contentWindow) {\n throw new Error('iframe not yet ready.')\n }\n\n iframe.contentWindow.document.open()\n iframe.contentWindow.document.write(page.outerHTML)\n iframe.contentWindow.document.close()\n },\n}\n" }, { "path": "packages/core/src/domUtils.ts", "content": "const elementInViewport = (el: HTMLElement) => {\n if (el.offsetParent === null) {\n // Element is not participating in layout (e.g., display: none)\n return false\n }\n\n const rect = el.getBoundingClientRect()\n\n // We check both vertically and horizontally for containers that scroll in either direction\n const verticallyVisible = rect.top < window.innerHeight && rect.bottom >= 0\n const horizontallyVisible = rect.left < window.innerWidth && rect.right >= 0\n\n return verticallyVisible && horizontallyVisible\n}\n\nexport const getScrollableParent = (element: HTMLElement | null): HTMLElement | null => {\n const allowsVerticalScroll = (el: HTMLElement): boolean => {\n const computedStyle = window.getComputedStyle(el)\n\n if (['scroll', 'overlay'].includes(computedStyle.overflowY)) {\n return true\n }\n\n if (computedStyle.overflowY !== 'auto') {\n return false\n }\n\n if (['visible', 'clip'].includes(computedStyle.overflowX)) {\n return true\n }\n\n return hasDimensionConstraint(computedStyle.maxHeight, el.style.height) || isConstrainedByLayout(el, 'height')\n }\n\n const allowsHorizontalScroll = (el: HTMLElement): boolean => {\n const computedStyle = window.getComputedStyle(el)\n\n if (['scroll', 'overlay'].includes(computedStyle.overflowX)) {\n return true\n }\n\n if (computedStyle.overflowX !== 'auto') {\n return false\n }\n\n if (['visible', 'clip'].includes(computedStyle.overflowY)) {\n return true\n }\n\n return hasDimensionConstraint(computedStyle.maxWidth, el.style.width) || isConstrainedByLayout(el, 'width')\n }\n\n const hasDimensionConstraint = (computedMaxDimension: string, inlineStyleDimension: string): boolean => {\n if (computedMaxDimension && computedMaxDimension !== 'none' && computedMaxDimension !== '0px') {\n return true\n }\n\n if (inlineStyleDimension && inlineStyleDimension !== 'auto' && inlineStyleDimension !== '0') {\n return true\n }\n\n return false\n }\n\n // When overflow is set to 'auto' on one axis, the browser implicitly sets the other axis\n // to 'auto' as well (CSS spec), which causes the 'visible'/'clip' checks above to fail.\n // In flex/grid layouts, the element's size may be constrained by the parent layout rather\n // than explicit dimension properties, so we check for that here.\n const isConstrainedByLayout = (el: HTMLElement, dimension: 'height' | 'width'): boolean => {\n const parent = el.parentElement\n\n if (!parent) {\n return false\n }\n\n const parentStyle = window.getComputedStyle(parent)\n\n if (['flex', 'inline-flex'].includes(parentStyle.display)) {\n const isColumnLayout = ['column', 'column-reverse'].includes(parentStyle.flexDirection)\n return dimension === 'height' ? isColumnLayout : !isColumnLayout\n }\n\n return ['grid', 'inline-grid'].includes(parentStyle.display)\n }\n\n let parent = element?.parentElement\n\n while (parent) {\n const allowsScroll = allowsVerticalScroll(parent) || allowsHorizontalScroll(parent)\n\n if (window.getComputedStyle(parent).display !== 'contents' && allowsScroll) {\n return parent\n }\n\n parent = parent.parentElement\n }\n\n return null\n}\n\nexport const getElementsInViewportFromCollection = (\n elements: HTMLElement[],\n referenceElement?: HTMLElement,\n): HTMLElement[] => {\n if (!referenceElement) {\n return elements.filter((element) => elementInViewport(element))\n }\n\n const referenceIndex = elements.indexOf(referenceElement)\n const upwardElements: HTMLElement[] = []\n const downwardElements: HTMLElement[] = []\n\n // Traverse upwards until an element is not visible\n for (let i = referenceIndex; i >= 0; i--) {\n const element = elements[i]\n\n if (elementInViewport(element)) {\n upwardElements.push(element)\n } else {\n break\n }\n }\n\n // Traverse downwards until an element is not visible\n for (let i = referenceIndex + 1; i < elements.length; i++) {\n const element = elements[i]\n\n if (elementInViewport(element)) {\n downwardElements.push(element)\n } else {\n break\n }\n }\n\n // Reverse upward elements to maintain DOM order, then append downward elements\n return [...upwardElements.reverse(), ...downwardElements]\n}\n\nexport const requestAnimationFrame = (cb: () => void, times: number = 1): void => {\n window.requestAnimationFrame(() => {\n if (times > 1) {\n requestAnimationFrame(cb, times - 1)\n } else {\n cb()\n }\n })\n}\n\nexport const getInitialPageFromDOM = <T>(id: string, useScriptElement: boolean = false): T | null => {\n if (typeof window === 'undefined') {\n return null\n }\n\n if (!useScriptElement) {\n const el = document.getElementById(id)\n\n if (el?.dataset.page) {\n return JSON.parse(el.dataset.page)\n }\n }\n\n const scriptEl = document.querySelector(`script[data-page=\"${id}\"][type=\"application/json\"]`)\n\n if (scriptEl?.textContent) {\n return JSON.parse(scriptEl.textContent)\n }\n\n return null\n}\n" }, { "path": "packages/core/src/encryption.ts", "content": "import { SessionStorage } from './sessionStorage'\n\nexport const encryptHistory = async (data: any): Promise<ArrayBuffer> => {\n if (typeof window === 'undefined') {\n throw new Error('Unable to encrypt history')\n }\n\n const iv = getIv()\n const storedKey = await getKeyFromSessionStorage()\n const key = await getOrCreateKey(storedKey)\n\n if (!key) {\n throw new Error('Unable to encrypt history')\n }\n\n const encrypted = await encryptData(iv, key, data)\n\n return encrypted\n}\n\nexport const historySessionStorageKeys = {\n key: 'historyKey',\n iv: 'historyIv',\n}\n\nexport const decryptHistory = async (data: any): Promise<any> => {\n const iv = getIv()\n const storedKey = await getKeyFromSessionStorage()\n\n if (!storedKey) {\n throw new Error('Unable to decrypt history')\n }\n\n return await decryptData(iv, storedKey, data)\n}\n\nconst encryptData = async (iv: BufferSource, key: CryptoKey, data: any) => {\n if (typeof window === 'undefined') {\n throw new Error('Unable to encrypt history')\n }\n\n if (typeof window.crypto.subtle === 'undefined') {\n console.warn('Encryption is not supported in this environment. SSL is required.')\n\n return Promise.resolve(data)\n }\n\n const textEncoder = new TextEncoder()\n const str = JSON.stringify(data)\n const encoded = new Uint8Array(str.length * 3)\n\n const result = textEncoder.encodeInto(str, encoded)\n\n return window.crypto.subtle.encrypt(\n {\n name: 'AES-GCM',\n iv,\n },\n key,\n encoded.subarray(0, result.written),\n )\n}\n\nconst decryptData = async (iv: BufferSource, key: CryptoKey, data: any) => {\n if (typeof window.crypto.subtle === 'undefined') {\n console.warn('Decryption is not supported in this environment. SSL is required.')\n\n return Promise.resolve(data)\n }\n\n const decrypted = await window.crypto.subtle.decrypt(\n {\n name: 'AES-GCM',\n iv,\n },\n key,\n data,\n )\n\n return JSON.parse(new TextDecoder().decode(decrypted))\n}\n\nconst getIv = (): BufferSource => {\n const ivString = SessionStorage.get(historySessionStorageKeys.iv)\n\n if (ivString) {\n return new Uint8Array(ivString)\n }\n\n const iv = window.crypto.getRandomValues(new Uint8Array(12))\n\n SessionStorage.set(historySessionStorageKeys.iv, Array.from(iv))\n\n return iv\n}\n\nconst createKey = async () => {\n if (typeof window.crypto.subtle === 'undefined') {\n console.warn('Encryption is not supported in this environment. SSL is required.')\n\n return Promise.resolve(null)\n }\n\n return window.crypto.subtle.generateKey(\n {\n name: 'AES-GCM',\n length: 256,\n },\n true,\n ['encrypt', 'decrypt'],\n )\n}\n\nconst saveKey = async (key: CryptoKey) => {\n if (typeof window.crypto.subtle === 'undefined') {\n console.warn('Encryption is not supported in this environment. SSL is required.')\n\n return Promise.resolve()\n }\n\n const keyData = await window.crypto.subtle.exportKey('raw', key)\n\n SessionStorage.set(historySessionStorageKeys.key, Array.from(new Uint8Array(keyData)))\n}\n\nconst getOrCreateKey = async (key: CryptoKey | null) => {\n if (key) {\n return key\n }\n\n const newKey = await createKey()\n\n if (!newKey) {\n return null\n }\n\n await saveKey(newKey)\n\n return newKey\n}\n\nconst getKeyFromSessionStorage = async (): Promise<CryptoKey | null> => {\n const stringKey = SessionStorage.get(historySessionStorageKeys.key)\n\n if (!stringKey) {\n return null\n }\n\n const key = await window.crypto.subtle.importKey(\n 'raw',\n new Uint8Array(stringKey),\n {\n name: 'AES-GCM',\n length: 256,\n },\n true,\n ['encrypt', 'decrypt'],\n )\n\n return key\n}\n" }, { "path": "packages/core/src/eventHandler.ts", "content": "import debounce from './debounce'\nimport { fireNavigateEvent } from './events'\nimport { history } from './history'\nimport { router } from './index'\nimport { page as currentPage } from './page'\nimport { Scroll } from './scroll'\nimport { GlobalEvent, GlobalEventNames, GlobalEventResult, InternalEvent } from './types'\nimport { hrefToUrl } from './url'\n\nclass EventHandler {\n protected internalListeners: {\n event: InternalEvent\n listener: (...args: any[]) => void\n }[] = []\n\n public init() {\n if (typeof window !== 'undefined') {\n window.addEventListener('popstate', this.handlePopstateEvent.bind(this))\n window.addEventListener('pageshow', this.handlePageshowEvent.bind(this))\n window.addEventListener('scroll', debounce(Scroll.onWindowScroll.bind(Scroll), 100), true)\n }\n\n if (typeof document !== 'undefined') {\n document.addEventListener('scroll', debounce(Scroll.onScroll.bind(Scroll), 100), true)\n }\n }\n\n public onGlobalEvent<TEventName extends GlobalEventNames>(\n type: TEventName,\n callback: (event: GlobalEvent<TEventName>) => GlobalEventResult<TEventName>,\n ): VoidFunction {\n const listener = ((event: GlobalEvent<TEventName>) => {\n const response = callback(event)\n\n if (event.cancelable && !event.defaultPrevented && response === false) {\n event.preventDefault()\n }\n }) as EventListener\n\n return this.registerListener(`inertia:${type}`, listener)\n }\n\n public on(event: InternalEvent, callback: (...args: any[]) => void): VoidFunction {\n this.internalListeners.push({ event, listener: callback })\n\n return () => {\n this.internalListeners = this.internalListeners.filter((listener) => listener.listener !== callback)\n }\n }\n\n public onMissingHistoryItem() {\n // At this point, the user has probably cleared the state\n // Mark the current page as cleared so that we don't try to write anything to it.\n currentPage.clear()\n // Fire an event so that that any listeners can handle this situation\n this.fireInternalEvent('missingHistoryItem')\n }\n\n public fireInternalEvent(event: InternalEvent, ...args: any[]): void {\n this.internalListeners\n .filter((listener) => listener.event === event)\n .forEach((listener) => listener.listener(...args))\n }\n\n protected registerListener(type: string, listener: EventListener): VoidFunction {\n document.addEventListener(type, listener)\n\n return () => document.removeEventListener(type, listener)\n }\n\n // bfcache restores pages without firing `popstate`, so we use `pageshow` to\n // re-validate encrypted history entries after `clearHistory` removed the keys.\n // https://web.dev/articles/bfcache\n protected handlePageshowEvent(event: PageTransitionEvent): void {\n if (event.persisted) {\n history.decrypt().catch(() => this.onMissingHistoryItem())\n }\n }\n\n protected handlePopstateEvent(event: PopStateEvent): void {\n const state = event.state || null\n\n if (state === null) {\n const url = hrefToUrl(currentPage.get().url)\n url.hash = window.location.hash\n\n history.replaceState({ ...currentPage.getWithoutFlashData(), url: url.href })\n Scroll.reset()\n\n return\n }\n\n if (!history.isValidState(state)) {\n return this.onMissingHistoryItem()\n }\n\n history\n .decrypt(state.page)\n .then((data) => {\n if (currentPage.get().version !== data.version) {\n this.onMissingHistoryItem()\n return\n }\n\n // Cancel ongoing requests except prefetch requests\n router.cancelAll({ prefetch: false })\n\n currentPage.setQuietly(data, { preserveState: false }).then(() => {\n Scroll.restore(history.getScrollRegions())\n fireNavigateEvent(currentPage.get())\n\n const pendingDeferred: Record<string, string[]> = {}\n const pageProps = currentPage.get().props\n\n for (const [group, props] of Object.entries(data.initialDeferredProps ?? data.deferredProps ?? {})) {\n const missing = props.filter((prop) => pageProps[prop] === undefined)\n\n if (missing.length > 0) {\n pendingDeferred[group] = missing\n }\n }\n\n if (Object.keys(pendingDeferred).length > 0) {\n this.fireInternalEvent('loadDeferredProps', pendingDeferred)\n }\n })\n })\n .catch(() => {\n this.onMissingHistoryItem()\n })\n }\n}\n\nexport const eventHandler = new EventHandler()\n" }, { "path": "packages/core/src/events.ts", "content": "import { GlobalEventDetails, GlobalEventNames, GlobalEventTrigger } from './types'\n\nfunction fireEvent<TEventName extends GlobalEventNames>(\n name: TEventName,\n options: CustomEventInit<GlobalEventDetails<TEventName>>,\n): boolean {\n return document.dispatchEvent(new CustomEvent(`inertia:${name}`, options))\n}\n\nexport const fireBeforeEvent: GlobalEventTrigger<'before'> = (visit) => {\n return fireEvent('before', { cancelable: true, detail: { visit } })\n}\n\nexport const fireErrorEvent: GlobalEventTrigger<'error'> = (errors) => {\n return fireEvent('error', { detail: { errors } })\n}\n\nexport const fireExceptionEvent: GlobalEventTrigger<'exception'> = (exception) => {\n return fireEvent('exception', { cancelable: true, detail: { exception } })\n}\n\nexport const fireFinishEvent: GlobalEventTrigger<'finish'> = (visit) => {\n return fireEvent('finish', { detail: { visit } })\n}\n\nexport const fireInvalidEvent: GlobalEventTrigger<'invalid'> = (response) => {\n return fireEvent('invalid', { cancelable: true, detail: { response } })\n}\n\nexport const fireBeforeUpdateEvent: GlobalEventTrigger<'beforeUpdate'> = (page) => {\n return fireEvent('beforeUpdate', { detail: { page } })\n}\n\nexport const fireNavigateEvent: GlobalEventTrigger<'navigate'> = (page) => {\n return fireEvent('navigate', { detail: { page } })\n}\n\nexport const fireProgressEvent: GlobalEventTrigger<'progress'> = (progress) => {\n return fireEvent('progress', { detail: { progress } })\n}\n\nexport const fireStartEvent: GlobalEventTrigger<'start'> = (visit) => {\n return fireEvent('start', { detail: { visit } })\n}\n\nexport const fireSuccessEvent: GlobalEventTrigger<'success'> = (page) => {\n return fireEvent('success', { detail: { page } })\n}\n\nexport const firePrefetchedEvent: GlobalEventTrigger<'prefetched'> = (response, visit) => {\n return fireEvent('prefetched', { detail: { fetchedAt: Date.now(), response: response.data, visit } })\n}\n\nexport const firePrefetchingEvent: GlobalEventTrigger<'prefetching'> = (visit) => {\n return fireEvent('prefetching', { detail: { visit } })\n}\n\nexport const fireFlashEvent: GlobalEventTrigger<'flash'> = (flash) => {\n return fireEvent('flash', { detail: { flash } })\n}\n" }, { "path": "packages/core/src/files.ts", "content": "import { FormDataConvertible, RequestPayload } from './types'\n\nexport const isFile = (value: unknown): boolean =>\n (typeof File !== 'undefined' && value instanceof File) ||\n value instanceof Blob ||\n (typeof FileList !== 'undefined' && value instanceof FileList && value.length > 0)\n\nexport function hasFiles(data: RequestPayload | FormDataConvertible): boolean {\n return (\n isFile(data) ||\n (data instanceof FormData && Array.from(data.values()).some((value) => hasFiles(value))) ||\n (typeof data === 'object' && data !== null && Object.values(data).some((value) => hasFiles(value)))\n )\n}\n" }, { "path": "packages/core/src/formData.ts", "content": "import type { FormDataConvertible, QueryStringArrayFormatOption } from './types'\n\nexport const isFormData = (value: any): value is FormData => value instanceof FormData\n\nexport function objectToFormData(\n source: Record<string, FormDataConvertible>,\n form: FormData = new FormData(),\n parentKey: string | null = null,\n queryStringArrayFormat: QueryStringArrayFormatOption = 'brackets',\n): FormData {\n source = source || {}\n\n for (const key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n append(form, composeKey(parentKey, key, 'indices'), source[key], queryStringArrayFormat)\n }\n }\n\n return form\n}\n\nfunction composeKey(parent: string | null, key: string, format: QueryStringArrayFormatOption): string {\n if (!parent) {\n return key\n }\n\n return format === 'brackets' ? `${parent}[]` : `${parent}[${key}]`\n}\n\nfunction append(form: FormData, key: string, value: FormDataConvertible, format: QueryStringArrayFormatOption): void {\n if (Array.isArray(value)) {\n return Array.from(value.keys()).forEach((index) =>\n append(form, composeKey(key, index.toString(), format), value[index], format),\n )\n } else if (value instanceof Date) {\n return form.append(key, value.toISOString())\n } else if (value instanceof File) {\n return form.append(key, value, value.name)\n } else if (value instanceof Blob) {\n return form.append(key, value)\n } else if (typeof value === 'boolean') {\n return form.append(key, value ? '1' : '0')\n } else if (typeof value === 'string') {\n return form.append(key, value)\n } else if (typeof value === 'number') {\n return form.append(key, `${value}`)\n } else if (value === null || value === undefined) {\n return form.append(key, '')\n }\n\n objectToFormData(value, form, key, format)\n}\n" }, { "path": "packages/core/src/formObject.ts", "content": "import { get, set } from 'lodash-es'\nimport { isFile } from './files'\nimport { FormDataConvertible } from './types'\n\n/**\n * Transform dotted notation to bracket notation.\n *\n * Examples:\n * user.name => user[name]\n * user.profile.city => user[profile][city]\n * user.skills[] => user[skills][]\n * users.company[address].street => users[company][address][street]\n * config\\.app\\.name => config.app.name (escaped, literal)\n */\nfunction undotKey(key: string): string {\n if (!key.includes('.')) {\n return key\n }\n\n const transformSegment = (segment: string): string => {\n if (segment.startsWith('[') && segment.endsWith(']')) {\n return segment // Already in bracket notation - leave untouched\n }\n\n // Convert dotted segment to bracket notation: \"user.name\" → \"user[name]\"\n return segment.split('.').reduce((result, part, index) => (index === 0 ? part : `${result}[${part}]`))\n }\n\n return key\n .replace(/\\\\\\./g, '__ESCAPED_DOT__') // Temporarily replace escaped dots (\\.) to protect them from transformation\n .split(/(\\[[^\\]]*\\])/) // Split on bracket notation while preserving the brackets in the result array\n .filter(Boolean) // Remove empty strings from the split operation\n .map(transformSegment) // Transform each segment: dotted parts become bracketed, existing brackets stay as-is\n .join('') // Reassemble all segments back into a single string\n .replace(/__ESCAPED_DOT__/g, '.') // Restore the escaped dots as literal dots in the final result\n}\n\n/**\n * Parse a key into an array of path segments.\n *\n * Examples:\n * - \"user[name]\" => [\"user\", \"name\"]\n * - \"tags[]\" => [\"tags\", \"\"]\n * - \"items[0][name]\" => [\"items\", 0, \"name\"]\n */\nfunction parseKey(key: string): (string | number | '')[] {\n const path: (string | number | '')[] = []\n const pattern = /([^\\[\\]]+)|\\[(\\d*)\\]/g\n let match: RegExpExecArray | null\n\n while ((match = pattern.exec(key)) !== null) {\n if (match[1] !== undefined) {\n path.push(match[1])\n } else if (match[2] !== undefined) {\n path.push(match[2] === '' ? '' : Number(match[2]))\n }\n }\n\n return path\n}\n\n/**\n * Set value in nested object, always creating objects (never arrays).\n * This ensures we can analyze the final structure before deciding what should be arrays.\n */\nfunction setNestedObject(obj: Record<string, any>, path: string[], value: any): void {\n let current = obj\n\n for (let i = 0; i < path.length - 1; i++) {\n if (!(path[i] in current)) {\n current[path[i]] = {}\n }\n\n current = current[path[i]]\n }\n\n current[path[path.length - 1]] = value\n}\n\n/**\n * Check if an object has sequential numeric keys (0, 1, 2, ...).\n */\nfunction objectHasSequentialNumericKeys(value: any): boolean {\n const keys = Object.keys(value)\n const numericKeys = keys\n .filter((k) => /^\\d+$/.test(k))\n .map(Number)\n .sort((a, b) => a - b)\n\n return (\n keys.length === numericKeys.length &&\n numericKeys.length > 0 &&\n numericKeys[0] === 0 &&\n numericKeys.every((n, i) => n === i)\n )\n}\n\n/**\n * Convert objects with sequential numeric keys (0, 1, 2, ...) to arrays.\n */\nfunction convertSequentialObjectsToArrays(value: any): any {\n if (Array.isArray(value)) {\n return value.map(convertSequentialObjectsToArrays)\n }\n\n if (typeof value !== 'object' || value === null || isFile(value)) {\n return value\n }\n\n if (objectHasSequentialNumericKeys(value)) {\n const result = []\n\n for (let i = 0; i < Object.keys(value).length; i++) {\n result[i] = convertSequentialObjectsToArrays(value[i])\n }\n\n return result\n }\n\n // Keep as object, recursively process values\n const result: Record<string, any> = {}\n\n for (const key in value) {\n result[key] = convertSequentialObjectsToArrays(value[key])\n }\n\n return result\n}\n\n/**\n * Convert a FormData instance into an object structure.\n */\nexport function formDataToObject(source: FormData): Record<string, FormDataConvertible> {\n const form: Record<string, any> = {}\n\n // formData.entries() returns an iterator where the first element is the key and the second element\n // is the value. Examples of the keys are \"user[name]\", \"tags[]\", \"items[0][name]\", \"user.name\", etc.\n // We should construct a new (nested) object based on these keys.\n for (const [key, value] of source.entries()) {\n if (value instanceof File && value.size === 0 && value.name === '') {\n // Check if the given value is an empty file. We want to filter\n // those out as they prevent us from comparing objects with\n // each other, which we do to set the isDirty prop.\n continue\n }\n\n const path = parseKey(undotKey(key))\n\n // If the key ends with an empty string (''), treat it as an array push (e.g., \"tags[]\")\n if (path[path.length - 1] === '') {\n const arrayPath = path.slice(0, -1)\n const existing = get(form, arrayPath)\n\n if (Array.isArray(existing)) {\n existing.push(value)\n } else if (existing && typeof existing === 'object' && !isFile(existing)) {\n // If existing is an object with numeric keys, convert to array (treating indices as relative)\n const numericKeys = Object.keys(existing)\n .filter((k) => /^\\d+$/.test(k))\n .map(Number)\n .sort((a, b) => a - b)\n\n set(form, arrayPath, numericKeys.length > 0 ? [...numericKeys.map((k) => existing[k]), value] : [value])\n } else {\n set(form, arrayPath, [value])\n }\n\n continue\n }\n\n // Always build nested objects first, then convert sequential numeric keys to arrays.\n // This prevents the creation of sparse arrays when mixing numeric and string keys.\n setNestedObject(form, path.map(String), value)\n }\n\n // Convert objects with sequential numeric keys (0, 1, 2, ...) to arrays\n return convertSequentialObjectsToArrays(form)\n}\n" }, { "path": "packages/core/src/head.ts", "content": "import { config, HeadManager, HeadManagerOnUpdateCallback, HeadManagerTitleCallback } from '.'\nimport debounce from './debounce'\n\nconst Renderer = {\n preferredAttribute(): 'data-inertia' | 'inertia' {\n return config.get('future.useDataInertiaHeadAttribute') ? 'data-inertia' : 'inertia'\n },\n\n buildDOMElement(tag: string): ChildNode {\n const template = document.createElement('template')\n template.innerHTML = tag\n const node = template.content.firstChild as Element\n\n if (!tag.startsWith('<script ')) {\n return node\n }\n\n const script = document.createElement('script')\n script.innerHTML = node.innerHTML\n node.getAttributeNames().forEach((name) => {\n script.setAttribute(name, node.getAttribute(name) || '')\n })\n\n return script\n },\n\n isInertiaManagedElement(element: Element): boolean {\n return element.nodeType === Node.ELEMENT_NODE && element.getAttribute(this.preferredAttribute()) !== null\n },\n\n findMatchingElementIndex(element: Element, elements: Array<Element>): number {\n const attribute = this.preferredAttribute()\n const key = element.getAttribute(attribute)\n if (key !== null) {\n return elements.findIndex((element) => element.getAttribute(attribute) === key)\n }\n\n return -1\n },\n\n update: debounce(function (elements: Array<string>) {\n const sourceElements = elements.map((element) => this.buildDOMElement(element))\n const targetElements = Array.from(document.head.childNodes).filter((element) =>\n this.isInertiaManagedElement(element as Element),\n )\n\n targetElements.forEach((targetElement) => {\n const index = this.findMatchingElementIndex(targetElement as Element, sourceElements)\n if (index === -1) {\n targetElement?.parentNode?.removeChild(targetElement)\n return\n }\n\n const sourceElement = sourceElements.splice(index, 1)[0]\n if (sourceElement && !targetElement.isEqualNode(sourceElement)) {\n targetElement?.parentNode?.replaceChild(sourceElement, targetElement)\n }\n })\n\n sourceElements.forEach((element) => document.head.appendChild(element))\n }, 1),\n}\n\nexport default function createHeadManager(\n isServer: boolean,\n titleCallback: HeadManagerTitleCallback,\n onUpdate: HeadManagerOnUpdateCallback,\n): HeadManager {\n const states: Record<string, Array<string>> = {}\n let lastProviderId = 0\n\n function connect(): string {\n const id = (lastProviderId += 1)\n states[id] = []\n return id.toString()\n }\n\n function disconnect(id: string): void {\n if (id === null || Object.keys(states).indexOf(id) === -1) {\n return\n }\n\n delete states[id]\n commit()\n }\n\n function reconnect(id: string): void {\n if (Object.keys(states).indexOf(id) === -1) {\n states[id] = []\n }\n }\n\n function update(id: string, elements: Array<string> = []): void {\n if (id !== null && Object.keys(states).indexOf(id) > -1) {\n states[id] = elements\n }\n\n commit()\n }\n\n function collect(): Array<string> {\n const title = titleCallback('')\n const attribute = Renderer.preferredAttribute()\n\n const defaults: Record<string, string> = {\n ...(title ? { title: `<title ${attribute}=\"\">${title}` } : {}),\n }\n\n const elements = Object.values(states)\n .reduce((carry, elements) => carry.concat(elements), [])\n .reduce((carry, element) => {\n if (element.indexOf('<') === -1) {\n return carry\n }\n\n if (element.indexOf(']+>)(.*?)(<\\/title>)/)\n carry.title = title ? `${title[1]}${titleCallback(title[2])}${title[3]}` : element\n return carry\n }\n\n const match = element.match(attribute === 'inertia' ? / inertia=\"[^\"]+\"/ : / data-inertia=\"[^\"]+\"/)\n if (match) {\n carry[match[0]] = element\n } else {\n carry[Object.keys(carry).length] = element\n }\n\n return carry\n }, defaults)\n\n return Object.values(elements)\n }\n\n function commit(): void {\n isServer ? onUpdate(collect()) : Renderer.update(collect())\n }\n\n // By committing during initialization, we can guarantee that the default\n // tags are set, as well as that they exist during SSR itself.\n commit()\n\n return {\n forceUpdate: commit,\n createProvider: function () {\n const id = connect()\n\n return {\n preferredAttribute: Renderer.preferredAttribute,\n reconnect: () => reconnect(id),\n update: (elements) => update(id, elements),\n disconnect: () => disconnect(id),\n }\n },\n }\n}\n" }, { "path": "packages/core/src/history.ts", "content": "import { cloneDeep, isEqual } from 'lodash-es'\nimport { decryptHistory, encryptHistory, historySessionStorageKeys } from './encryption'\nimport { eventHandler } from './eventHandler'\nimport { page as currentPage } from './page'\nimport Queue from './queue'\nimport { SessionStorage } from './sessionStorage'\nimport { Page, ScrollRegion } from './types'\n\nconst isServer = typeof window === 'undefined'\nconst queue = new Queue<Promise<void>>()\nconst isChromeIOS = !isServer && /CriOS/.test(window.navigator.userAgent)\n\nclass History {\n public rememberedState = 'rememberedState' as const\n public scrollRegions = 'scrollRegions' as const\n public preserveUrl = false\n protected current: Partial<Page> = {}\n // We need initialState for `restore`\n protected initialState: Partial<Page> | null = null\n\n public remember(data: unknown, key: string): void {\n this.replaceState({\n ...currentPage.getWithoutFlashData(),\n rememberedState: {\n ...(currentPage.get()?.rememberedState ?? {}),\n [key]: data,\n },\n })\n }\n\n public restore(key: string): unknown {\n if (!isServer) {\n return this.current[this.rememberedState]?.[key] !== undefined\n ? this.current[this.rememberedState]?.[key]\n : this.initialState?.[this.rememberedState]?.[key]\n }\n }\n\n public pushState(page: Page, cb: (() => void) | null = null): void {\n if (isServer) {\n return\n }\n\n if (this.preserveUrl) {\n cb && cb()\n return\n }\n\n this.current = page\n\n queue.add(() => {\n return this.getPageData(page).then((data) => {\n // Defer history.pushState to the next event loop tick to prevent timing conflicts.\n // Ensure any previous history.replaceState completes before pushState is executed.\n const doPush = () => this.doPushState({ page: data }, page.url).then(() => cb?.())\n\n if (isChromeIOS) {\n return new Promise((resolve) => {\n setTimeout(() => doPush().then(resolve))\n })\n }\n\n return doPush()\n })\n })\n }\n\n protected clonePageProps(page: Page): Page {\n try {\n structuredClone(page.props)\n return page\n } catch {\n // Props contain non-serializable data (e.g., Proxies, functions).\n // Clone them to ensure they can be safely stored in browser history.\n return {\n ...page,\n props: cloneDeep(page.props),\n }\n }\n }\n\n protected getPageData(page: Page): Promise<Page | ArrayBuffer> {\n const pageWithClonedProps = this.clonePageProps(page)\n\n return new Promise((resolve) => {\n return page.encryptHistory ? encryptHistory(pageWithClonedProps).then(resolve) : resolve(pageWithClonedProps)\n })\n }\n\n public processQueue(): Promise<void> {\n return queue.process()\n }\n\n public decrypt(page: Page | null = null): Promise<Page> {\n if (isServer) {\n return Promise.resolve(page ?? currentPage.get())\n }\n\n const pageData = page ?? window.history.state?.page\n\n return this.decryptPageData(pageData).then((data) => {\n if (!data) {\n throw new Error('Unable to decrypt history')\n }\n\n if (this.initialState === null) {\n this.initialState = data ?? undefined\n } else {\n this.current = data ?? {}\n }\n\n return data\n })\n }\n\n protected decryptPageData(pageData: ArrayBuffer | Page | null): Promise<Page | null> {\n return pageData instanceof ArrayBuffer ? decryptHistory(pageData) : Promise.resolve(pageData)\n }\n\n public saveScrollPositions(scrollRegions: ScrollRegion[]): void {\n queue.add(() => {\n return Promise.resolve().then(() => {\n if (!window.history.state?.page) {\n return\n }\n\n if (isEqual(this.getScrollRegions(), scrollRegions)) {\n return\n }\n\n return this.doReplaceState({\n page: window.history.state.page,\n scrollRegions,\n })\n })\n })\n }\n\n public saveDocumentScrollPosition(scrollRegion: ScrollRegion): void {\n queue.add(() => {\n return Promise.resolve().then(() => {\n if (!window.history.state?.page) {\n return\n }\n\n if (isEqual(this.getDocumentScrollPosition(), scrollRegion)) {\n return\n }\n\n return this.doReplaceState({\n page: window.history.state.page,\n documentScrollPosition: scrollRegion,\n })\n })\n })\n }\n\n public getScrollRegions(): ScrollRegion[] {\n return window.history.state?.scrollRegions || []\n }\n\n public getDocumentScrollPosition(): ScrollRegion {\n return window.history.state?.documentScrollPosition || { top: 0, left: 0 }\n }\n\n public replaceState(page: Page, cb: (() => void) | null = null): void {\n if (isEqual(this.current, page)) {\n cb && cb()\n return\n }\n\n // Exclude flash from the merge to prevent callers (like router.remember())\n // from accidentally clearing flash data on the current page.\n const { flash, ...pageWithoutFlash } = page\n currentPage.merge(pageWithoutFlash)\n\n if (isServer) {\n return\n }\n\n if (this.preserveUrl) {\n cb && cb()\n return\n }\n\n this.current = page\n\n queue.add(() => {\n return this.getPageData(page).then((data) => {\n // Defer history.replaceState to the next event loop tick to prevent timing conflicts.\n // Ensure any previous history.pushState completes before replaceState is executed.\n const doReplace = () => this.doReplaceState({ page: data }, page.url).then(() => cb?.())\n\n if (isChromeIOS) {\n return new Promise((resolve) => {\n setTimeout(() => doReplace().then(resolve))\n })\n }\n\n return doReplace()\n })\n })\n }\n\n protected isHistoryThrottleError(error: unknown): error is Error & { name: 'SecurityError' } {\n return (\n error instanceof Error &&\n error.name === 'SecurityError' &&\n (error.message.includes('history.pushState') || error.message.includes('history.replaceState'))\n )\n }\n\n protected isQuotaExceededError(error: unknown): error is Error & { name: 'QuotaExceededError' } {\n return error instanceof Error && error.name === 'QuotaExceededError'\n }\n\n protected withThrottleProtection<T = void>(cb: () => T): Promise<T | undefined> {\n return Promise.resolve().then(() => {\n try {\n return cb()\n } catch (error) {\n if (!this.isHistoryThrottleError(error)) {\n throw error\n }\n\n console.error(error.message)\n }\n })\n }\n\n protected doReplaceState(\n data: {\n page: Page | ArrayBuffer\n scrollRegions?: ScrollRegion[]\n documentScrollPosition?: ScrollRegion\n },\n url?: string,\n ): Promise<void> {\n return this.withThrottleProtection(() => {\n window.history.replaceState(\n {\n ...data,\n scrollRegions: data.scrollRegions ?? window.history.state?.scrollRegions,\n documentScrollPosition: data.documentScrollPosition ?? window.history.state?.documentScrollPosition,\n },\n '',\n url,\n )\n })\n }\n\n protected doPushState(\n data: {\n page: Page | ArrayBuffer\n scrollRegions?: ScrollRegion[]\n documentScrollPosition?: ScrollRegion\n },\n url: string,\n ): Promise<void> {\n return this.withThrottleProtection(() => {\n try {\n window.history.pushState(data, '', url)\n } catch (error) {\n if (!this.isQuotaExceededError(error)) {\n throw error\n }\n\n eventHandler.fireInternalEvent('historyQuotaExceeded', url)\n }\n })\n }\n\n public getState<T>(key: keyof Page, defaultValue?: T): any {\n return this.current?.[key] ?? defaultValue\n }\n\n public deleteState(key: keyof Page) {\n if (this.current[key] !== undefined) {\n delete this.current[key]\n this.replaceState(this.current as Page)\n }\n }\n\n public clearInitialState(key: keyof Page) {\n if (this.initialState && this.initialState[key] !== undefined) {\n delete this.initialState[key]\n }\n }\n\n public browserHasHistoryEntry(): boolean {\n return !isServer && !!window.history.state?.page\n }\n\n public clear() {\n SessionStorage.remove(historySessionStorageKeys.key)\n SessionStorage.remove(historySessionStorageKeys.iv)\n }\n\n public setCurrent(page: Page): void {\n this.current = page\n }\n\n public isValidState(state: any): boolean {\n return !!state.page\n }\n\n public getAllState(): Page {\n return this.current as Page\n }\n}\n\nif (typeof window !== 'undefined' && window.history.scrollRestoration) {\n window.history.scrollRestoration = 'manual'\n}\n\nexport const history = new History()\n" }, { "path": "packages/core/src/index.ts", "content": "import { Config } from './config'\nimport { Router } from './router'\n\nexport { UseFormUtils } from './useFormUtils'\n\nexport { config } from './config'\nexport { getInitialPageFromDOM, getScrollableParent } from './domUtils'\nexport { objectToFormData } from './formData'\nexport { formDataToObject } from './formObject'\nexport { default as createHeadManager } from './head'\nexport { default as useInfiniteScroll } from './infiniteScroll'\nexport { shouldIntercept, shouldNavigate } from './navigationEvents'\nexport { hide as hideProgress, progress, reveal as revealProgress, default as setupProgress } from './progress'\nexport { FormComponentResetSymbol, resetFormFields } from './resetFormFields'\nexport * from './types'\nexport {\n hrefToUrl,\n isUrlMethodPair,\n mergeDataIntoQueryString,\n urlHasProtocol,\n urlToString,\n urlWithoutHash,\n} from './url'\nexport { type Config, type Router }\n\nexport const router = new Router()\n" }, { "path": "packages/core/src/infiniteScroll/data.ts", "content": "import { router } from '../index'\nimport { page as currentPage } from '../page'\nimport { Page, PendingVisit, ReloadOptions, ScrollProp, UseInfiniteScrollDataManager } from '../types'\n\nconst MERGE_INTENT_HEADER = 'X-Inertia-Infinite-Scroll-Merge-Intent'\n\ntype Side = 'previous' | 'next'\ntype ScrollPropPageNames = keyof Pick<ScrollProp, 'previousPage' | 'nextPage'>\n\ntype InfiniteScrollState = {\n previousPage: number | string | null\n nextPage: number | string | null\n lastLoadedPage: number | string | null\n requestCount: number\n}\n\nexport const useInfiniteScrollData = (options: {\n getPropName: () => string\n onBeforeUpdate: () => void\n onBeforePreviousRequest: () => void\n onBeforeNextRequest: () => void\n onCompletePreviousRequest: (loadedPage: string | number | null) => void\n onCompleteNextRequest: (loadedPage: string | number | null) => void\n onReset?: () => void\n}): UseInfiniteScrollDataManager => {\n const getScrollPropFromCurrentPage = (): ScrollProp => {\n const scrollProp = currentPage.get().scrollProps?.[options.getPropName()]\n\n if (scrollProp) {\n return scrollProp\n }\n\n throw new Error(`The page object does not contain a scroll prop named \"${options.getPropName()}\".`)\n }\n\n const state = {\n component: null,\n loading: false,\n previousPage: null,\n nextPage: null,\n lastLoadedPage: null,\n requestCount: 0,\n } as {\n component: string | null\n loading: boolean\n } & InfiniteScrollState\n\n const resetState = () => {\n const scrollProp = getScrollPropFromCurrentPage()\n\n state.component = currentPage.get().component\n state.loading = false\n state.previousPage = scrollProp.previousPage\n state.nextPage = scrollProp.nextPage\n state.lastLoadedPage = scrollProp.currentPage\n state.requestCount = 0\n }\n\n const getRememberKey = () => `inertia:infinite-scroll-data:${options.getPropName()}`\n\n if (typeof window !== 'undefined') {\n resetState()\n\n const rememberedState = router.restore(getRememberKey()) as InfiniteScrollState | undefined\n\n if (\n rememberedState &&\n typeof rememberedState === 'object' &&\n rememberedState.lastLoadedPage === getScrollPropFromCurrentPage().currentPage\n ) {\n // Restore remembered state only when it's consistent with the current scroll prop,\n // which ensures back/forward navigation works while direct URL visits reset properly.\n state.previousPage = rememberedState.previousPage\n state.nextPage = rememberedState.nextPage\n state.lastLoadedPage = rememberedState.lastLoadedPage\n state.requestCount = rememberedState.requestCount || 0\n }\n }\n\n const removeEventListener = router.on('success', (event) => {\n if (state.component === event.detail.page.component && getScrollPropFromCurrentPage().reset) {\n resetState()\n options.onReset?.()\n }\n })\n\n const getScrollPropKeyForSide = (side: Side): ScrollPropPageNames => {\n return side === 'next' ? 'nextPage' : 'previousPage'\n }\n\n const findPageToLoad = (side: Side) => {\n const pagePropName = getScrollPropKeyForSide(side)\n\n return state[pagePropName]\n }\n\n const syncStateOnSuccess = (side: Side) => {\n const scrollProp = getScrollPropFromCurrentPage()\n const paginationProp = getScrollPropKeyForSide(side)\n\n state.lastLoadedPage = scrollProp.currentPage\n state[paginationProp] = scrollProp[paginationProp]\n\n state.requestCount += 1\n\n // We save the state in the browser history so it can be restored\n // if the user navigates away and then back to the page...\n router.remember(\n {\n previousPage: state.previousPage,\n nextPage: state.nextPage,\n lastLoadedPage: state.lastLoadedPage,\n requestCount: state.requestCount,\n } as InfiniteScrollState,\n getRememberKey(),\n )\n }\n\n const getPageName = () => getScrollPropFromCurrentPage().pageName\n const getRequestCount = () => state.requestCount\n\n const fetchPage = (side: Side, reloadOptions: ReloadOptions = {}): void => {\n const page = findPageToLoad(side)\n\n if (state.loading || page === null) {\n return\n }\n\n state.loading = true\n\n router.reload({\n ...reloadOptions,\n data: { [getPageName()]: page },\n only: [options.getPropName()],\n preserveUrl: true, // we handle URL updates manually via useInfiniteScrollQueryString()\n headers: {\n [MERGE_INTENT_HEADER]: side === 'previous' ? 'prepend' : 'append',\n ...reloadOptions.headers,\n },\n onBefore: (visit: PendingVisit) => {\n side === 'next' ? options.onBeforeNextRequest() : options.onBeforePreviousRequest()\n reloadOptions.onBefore?.(visit)\n },\n onBeforeUpdate: (page: Page) => {\n options.onBeforeUpdate()\n reloadOptions.onBeforeUpdate?.(page)\n },\n onSuccess: (page: Page) => {\n syncStateOnSuccess(side)\n reloadOptions.onSuccess?.(page)\n },\n onFinish: (visit: any) => {\n state.loading = false\n side === 'next'\n ? options.onCompleteNextRequest(state.lastLoadedPage)\n : options.onCompletePreviousRequest(state.lastLoadedPage)\n reloadOptions.onFinish?.(visit)\n },\n })\n }\n\n const getLastLoadedPage = () => state.lastLoadedPage\n const hasPrevious = () => !!state.previousPage\n const hasNext = () => !!state.nextPage\n const fetchPrevious = (reloadOptions?: ReloadOptions): void => fetchPage('previous', reloadOptions)\n const fetchNext = (reloadOptions?: ReloadOptions): void => fetchPage('next', reloadOptions)\n\n return {\n getLastLoadedPage,\n getPageName,\n getRequestCount,\n hasPrevious,\n hasNext,\n fetchNext,\n fetchPrevious,\n removeEventListener,\n }\n}\n" }, { "path": "packages/core/src/infiniteScroll/elements.ts", "content": "import { router } from '..'\nimport debounce from '../debounce'\nimport { useIntersectionObservers } from '../intersectionObservers'\nimport { UseInfiniteScrollElementManager } from '../types'\n\nconst INFINITE_SCROLL_PAGE_KEY = 'infiniteScrollPage'\nconst INFINITE_SCROLL_IGNORE_KEY = 'infiniteScrollIgnore'\n\ntype ElementRange = {\n from: number\n to: number\n}\n\nexport const getPageFromElement = (element: HTMLElement): string | undefined =>\n element.dataset[INFINITE_SCROLL_PAGE_KEY]\n\nexport const useInfiniteScrollElementManager = (options: {\n shouldFetchNext: () => boolean\n shouldFetchPrevious: () => boolean\n getTriggerMargin: () => number\n getStartElement: () => HTMLElement\n getEndElement: () => HTMLElement\n getItemsElement: () => HTMLElement\n getScrollableParent: () => HTMLElement | null\n onPreviousTriggered: () => void\n onNextTriggered: () => void\n onItemIntersected: (element: HTMLElement) => void\n getPropName: () => string\n}): UseInfiniteScrollElementManager => {\n const intersectionObservers = useIntersectionObservers()\n\n let itemsObserver: IntersectionObserver\n let startElementObserver: IntersectionObserver\n let endElementObserver: IntersectionObserver\n let itemsMutationObserver: MutationObserver\n let triggersEnabled = false\n\n const setupObservers = () => {\n // Watch for manually added DOM elements (not from server responses)\n // This mutation observer tracks when new elements are added to the slot,\n // so we can distinguish between user-added content and server-loaded pages\n itemsMutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n mutation.addedNodes.forEach((node) => {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return\n }\n\n addedElements.add(node as HTMLElement)\n })\n })\n\n rememberElementsDebounced()\n })\n\n itemsMutationObserver.observe(options.getItemsElement(), { childList: true })\n\n // Track individual items entering/leaving viewport for URL synchronization\n // When items become visible, we update the URL to reflect the current page\n itemsObserver = intersectionObservers.new((entry: IntersectionObserverEntry) =>\n options.onItemIntersected(entry.target as HTMLElement),\n )\n\n // Set up trigger zones at start/end that load more content when intersected. The rootMargin\n // creates a buffer zone so loading starts before user reaches the edge. We should always\n // have a root margin of at least 1px as our default elements have no height\n const observerOptions: IntersectionObserverInit = {\n root: options.getScrollableParent(),\n rootMargin: `${Math.max(1, options.getTriggerMargin())}px`,\n }\n\n startElementObserver = intersectionObservers.new(options.onPreviousTriggered, observerOptions)\n endElementObserver = intersectionObservers.new(options.onNextTriggered, observerOptions)\n }\n\n const enableTriggers = () => {\n if (triggersEnabled) {\n // Make sure we don't register multiple watchers\n disableTriggers()\n }\n\n const startElement = options.getStartElement()\n const endElement = options.getEndElement()\n\n if (startElement && options.shouldFetchPrevious()) {\n startElementObserver.observe(startElement)\n }\n\n if (endElement && options.shouldFetchNext()) {\n endElementObserver.observe(endElement)\n }\n\n triggersEnabled = true\n }\n\n const disableTriggers = () => {\n if (!triggersEnabled) {\n return\n }\n\n startElementObserver.disconnect()\n endElementObserver.disconnect()\n triggersEnabled = false\n }\n\n const refreshTriggers = () => {\n if (triggersEnabled) {\n enableTriggers()\n }\n }\n\n const flushAll = () => {\n disableTriggers()\n intersectionObservers.flushAll()\n itemsMutationObserver?.disconnect()\n }\n\n const addedElements = new Set<HTMLElement>()\n\n const elementIsUntagged = (element: HTMLElement): boolean =>\n !(INFINITE_SCROLL_PAGE_KEY in element.dataset) && !(INFINITE_SCROLL_IGNORE_KEY in element.dataset)\n\n const processManuallyAddedElements = () => {\n // Tag manually added elements so they don't interfere with URL management\n // These elements get marked as \"ignore\" since they weren't loaded from the server\n Array.from(addedElements).forEach((element) => {\n if (elementIsUntagged(element)) {\n element.dataset[INFINITE_SCROLL_IGNORE_KEY] = 'true'\n }\n\n itemsObserver.observe(element)\n })\n\n addedElements.clear()\n }\n\n const findUntaggedElements = (containerElement: HTMLElement): HTMLElement[] => {\n return Array.from(\n containerElement.querySelectorAll(\n `:scope > *:not([data-infinite-scroll-page]):not([data-infinite-scroll-ignore])`,\n ),\n )\n }\n\n let hasRestoredElements = false\n\n const processServerLoadedElements = (loadedPage: string | number | null) => {\n // On first run, try to restore the elements tags from browser history\n if (!hasRestoredElements) {\n hasRestoredElements = true\n\n if (restoreElements()) {\n return\n }\n }\n\n // Tag new server-loaded elements with their page number for URL management\n // This allows us to update the URL based on which page's content is most visible\n findUntaggedElements(options.getItemsElement()).forEach((element) => {\n if (elementIsUntagged(element)) {\n element.dataset[INFINITE_SCROLL_PAGE_KEY] = loadedPage?.toString() || '1'\n }\n\n itemsObserver.observe(element)\n })\n\n rememberElements()\n }\n\n const getElementsRememberKey = () => `inertia:infinite-scroll-elements:${options.getPropName()}`\n\n // Remember in browser history which elements belong to which page, so we can restore\n // them on back/forward navigation and keep URL synchronization working correctly\n const rememberElements = () => {\n const pageElementRange: Record<string, ElementRange> = {}\n const childNodes = options.getItemsElement().childNodes\n\n for (let index = 0; index < childNodes.length; index++) {\n const node = childNodes[index]\n\n if (node.nodeType !== Node.ELEMENT_NODE) {\n continue\n }\n\n const page = getPageFromElement(node as HTMLElement)\n\n if (typeof page === 'undefined') {\n continue\n }\n\n if (!(page in pageElementRange)) {\n pageElementRange[page] = { from: index, to: index }\n } else {\n pageElementRange[page].to = index\n }\n }\n\n router.remember(pageElementRange, getElementsRememberKey())\n }\n\n const rememberElementsDebounced = debounce(rememberElements, 250)\n\n const restoreElements = (): boolean => {\n const pageElementRange = router.restore(getElementsRememberKey()) as Record<string, ElementRange> | undefined\n\n if (!pageElementRange || typeof pageElementRange !== 'object') {\n return false\n }\n\n const childNodes = options.getItemsElement().childNodes\n\n // Use for loop instead of forEach for better performance\n for (let index = 0; index < childNodes.length; index++) {\n const node = childNodes[index]\n\n if (node.nodeType !== Node.ELEMENT_NODE) {\n continue\n }\n\n const element = node as HTMLElement\n\n // Find which page this element belongs to based on ranges\n let elementPage: string | undefined\n\n for (const [page, range] of Object.entries(pageElementRange)) {\n if (index >= range.from && index <= range.to) {\n elementPage = page\n break\n }\n }\n\n if (elementPage) {\n element.dataset[INFINITE_SCROLL_PAGE_KEY] = elementPage\n } else if (!elementIsUntagged(element)) {\n continue\n } else {\n element.dataset[INFINITE_SCROLL_IGNORE_KEY] = 'true'\n }\n\n itemsObserver.observe(element)\n }\n\n return true\n }\n\n return {\n setupObservers,\n enableTriggers,\n disableTriggers,\n refreshTriggers,\n flushAll,\n processManuallyAddedElements,\n processServerLoadedElements,\n }\n}\n" }, { "path": "packages/core/src/infiniteScroll/queryString.ts", "content": "import { hrefToUrl, router, urlHasProtocol, urlToString } from '..'\nimport debounce from '../debounce'\nimport { getElementsInViewportFromCollection } from '../domUtils'\nimport { page as currentPage } from './../page'\nimport Queue from './../queue'\nimport { getPageFromElement } from './elements'\n\n// Shared queue among all instances to ensure URL updates are processed sequentially\nconst queue = new Queue<Promise<void>>()\n\nlet initialUrl: URL | null\nlet payloadUrl: URL | null\nlet initialUrlWasAbsolute: boolean | null = null\n\n/**\n * As users scroll through infinite content, this system updates the URL to reflect\n * which page they're currently viewing. It uses a \"most visible page\" calculation\n * so that the URL reflects whichever page has the most visible items.\n */\nexport const useInfiniteScrollQueryString = (options: {\n getPageName: () => string\n getItemsElement: () => HTMLElement\n shouldPreserveUrl: () => boolean\n}) => {\n let enabled = true\n\n const queuePageUpdate = (page: string) => {\n queue\n .add(() => {\n return new Promise((resolve) => {\n if (!enabled) {\n initialUrl = payloadUrl = null\n return resolve()\n }\n\n if (!initialUrl || !payloadUrl) {\n const currentPageUrl = currentPage.get().url\n initialUrl = hrefToUrl(currentPageUrl)\n payloadUrl = hrefToUrl(currentPageUrl)\n initialUrlWasAbsolute = urlHasProtocol(currentPageUrl)\n }\n\n const pageName = options.getPageName()\n const searchParams = payloadUrl.searchParams\n\n // Clean URLs: don't show ?page=1 in the URL, just remove the parameter entirely\n if (page === '1') {\n searchParams.delete(pageName)\n } else {\n searchParams.set(pageName, page)\n }\n\n setTimeout(() => resolve())\n })\n })\n .finally(() => {\n if (\n enabled &&\n initialUrl &&\n payloadUrl &&\n initialUrl.href !== payloadUrl.href &&\n initialUrlWasAbsolute !== null\n ) {\n // Update URL without triggering a page reload or affecting scroll position\n router.replace({\n url: urlToString(payloadUrl, initialUrlWasAbsolute),\n preserveScroll: true,\n preserveState: true,\n })\n }\n\n initialUrl = payloadUrl = initialUrlWasAbsolute = null\n })\n }\n\n // Debounced to avoid excessive URL updates during fast scrolling\n const onItemIntersected = debounce((itemElement: HTMLElement) => {\n const itemsElement = options.getItemsElement()\n\n if (!enabled || options.shouldPreserveUrl() || !itemElement || !itemsElement) {\n return\n }\n\n // Count how many items from each page are currently visible in the viewport\n const pageMap = new Map<string, number>()\n const elements = [...itemsElement.children] as HTMLElement[]\n\n getElementsInViewportFromCollection(elements, itemElement).forEach((element) => {\n const page = getPageFromElement(element) ?? '1'\n\n if (pageMap.has(page)) {\n pageMap.set(page, pageMap.get(page)! + 1)\n } else {\n pageMap.set(page, 1)\n }\n })\n\n // Find the page with the most visible items - this becomes the \"current\" page\n const sortedPages = Array.from(pageMap.entries()).sort((a, b) => b[1] - a[1])\n const mostVisiblePage = sortedPages[0]?.[0]\n\n if (mostVisiblePage !== undefined) {\n queuePageUpdate(mostVisiblePage)\n }\n }, 250)\n\n return {\n onItemIntersected,\n cancel: () => (enabled = false),\n }\n}\n" }, { "path": "packages/core/src/infiniteScroll/scrollPreservation.ts", "content": "import { getElementsInViewportFromCollection } from '../domUtils'\n\n/**\n * When loading content \"before\" the current viewport (e.g. loading page 1 when viewing page 2),\n * new content is prepended to the DOM, which naturally pushes existing content down and\n * disrupts the user's scroll position. This system maintains visual stability by:\n *\n * 1. Capturing a reference element and its position before the update\n * 2. After new content is added, calculating how far that reference element moved\n * 3. Adjusting scroll position to keep the reference element in the same visual location\n */\nexport const useInfiniteScrollPreservation = (options: {\n getScrollableParent: () => HTMLElement | null\n getItemsElement: () => HTMLElement\n}) => {\n const createCallbacks = () => {\n let currentScrollTop: number\n let referenceElement: Element | null = null\n let referenceElementTop: number = 0\n\n const captureScrollPosition = () => {\n const scrollableContainer = options.getScrollableParent()\n const itemsElement = options.getItemsElement()\n\n // Capture current scroll position\n currentScrollTop = scrollableContainer?.scrollTop || window.scrollY\n\n // Find the first visible element to use as a reference point\n // This element will help us calculate how much the content shifted after the update\n const visibleElements = getElementsInViewportFromCollection([...itemsElement.children] as HTMLElement[])\n\n if (visibleElements.length > 0) {\n referenceElement = visibleElements[0]\n const containerRect = scrollableContainer?.getBoundingClientRect() || { top: 0 }\n const containerTop = scrollableContainer ? containerRect.top : 0\n const rect = referenceElement.getBoundingClientRect()\n // Store the reference element's position relative to its container\n referenceElementTop = rect.top - containerTop\n }\n }\n\n const restoreScrollPosition = () => {\n if (!referenceElement) {\n return\n }\n\n let attempts = 0\n let restored = false\n\n const restore = () => {\n attempts++\n\n if (restored || attempts > 10) {\n return false\n }\n\n // Calculate where our reference element ended up after new content was prepended\n const scrollableContainer = options.getScrollableParent()\n const containerRect = scrollableContainer?.getBoundingClientRect() || { top: 0 }\n const containerTop = scrollableContainer ? containerRect.top : 0\n const newRect = referenceElement!.getBoundingClientRect()\n const newElementTop = newRect.top - containerTop\n\n // Calculate how much the reference element moved due to content being prepended\n const adjustment = newElementTop - referenceElementTop\n\n if (adjustment === 0) {\n // Try again on the next frame, as DOM may still be updating\n window.requestAnimationFrame(restore)\n return\n }\n\n // Adjust scroll position to compensate for the movement, keeping the reference element\n // in the same visual position as before the update\n if (scrollableContainer) {\n scrollableContainer.scrollTo({ top: currentScrollTop + adjustment })\n } else {\n window.scrollTo(0, window.scrollY + adjustment)\n }\n\n restored = true\n }\n\n window.requestAnimationFrame(restore)\n }\n\n return {\n captureScrollPosition,\n restoreScrollPosition,\n }\n }\n\n return {\n createCallbacks,\n }\n}\n" }, { "path": "packages/core/src/infiniteScroll.ts", "content": "import { requestAnimationFrame } from './domUtils'\nimport { router } from './index'\nimport { useInfiniteScrollData } from './infiniteScroll/data'\nimport { useInfiniteScrollElementManager } from './infiniteScroll/elements'\nimport { useInfiniteScrollQueryString } from './infiniteScroll/queryString'\nimport { useInfiniteScrollPreservation } from './infiniteScroll/scrollPreservation'\nimport { Page, ReloadOptions, UseInfiniteScrollOptions, UseInfiniteScrollProps } from './types'\n\n/**\n * Core infinite scroll composable that orchestrates data fetching, DOM management,\n * scroll preservation, and URL synchronization.\n *\n * This is the main entry point that coordinates four sub-systems:\n * - Data management: Handles pagination state and server requests\n * - Element management: DOM observation and intersection detection\n * - Query string sync: Updates URL as user scrolls through pages\n * - Scroll preservation: Maintains scroll position during content updates\n */\nexport default function useInfiniteScroll(options: UseInfiniteScrollOptions): UseInfiniteScrollProps {\n const queryStringManager = useInfiniteScrollQueryString({ ...options, getPageName: () => dataManager.getPageName() })\n\n // Create scroll preservation callbacks that capture and restore scroll position\n // and restore it after new content is prepended to maintain visual stability\n const scrollPreservation = useInfiniteScrollPreservation(options)\n\n const elementManager = useInfiniteScrollElementManager({\n ...options,\n // As items enter viewport, update URL to reflect the most visible page\n onItemIntersected: queryStringManager.onItemIntersected,\n onPreviousTriggered: () => dataManager.fetchPrevious(),\n onNextTriggered: () => dataManager.fetchNext(),\n })\n\n const dataManager = useInfiniteScrollData({\n ...options,\n // Before updating page data, tag any manually added DOM elements\n // so they don't get confused with server-loaded content\n onBeforeUpdate: elementManager.processManuallyAddedElements,\n // After successful request, tag new server content\n onCompletePreviousRequest: (loadedPage) => {\n options.onCompletePreviousRequest()\n requestAnimationFrame(() => elementManager.processServerLoadedElements(loadedPage), 2)\n },\n onCompleteNextRequest: (loadedPage) => {\n options.onCompleteNextRequest()\n requestAnimationFrame(() => elementManager.processServerLoadedElements(loadedPage), 2)\n },\n onReset: options.onDataReset,\n })\n\n const addScrollPreservationCallbacks = (reloadOptions: ReloadOptions): ReloadOptions => {\n const { captureScrollPosition, restoreScrollPosition } = scrollPreservation.createCallbacks()\n\n const originalOnBeforeUpdate = reloadOptions.onBeforeUpdate || (() => {})\n const originalOnSuccess = reloadOptions.onSuccess || (() => {})\n\n reloadOptions.onBeforeUpdate = (page: Page) => {\n originalOnBeforeUpdate(page)\n captureScrollPosition()\n }\n\n reloadOptions.onSuccess = (page: Page) => {\n originalOnSuccess(page)\n restoreScrollPosition()\n }\n\n return reloadOptions\n }\n\n const originalFetchNext = dataManager.fetchNext\n dataManager.fetchNext = (reloadOptions: ReloadOptions = {}) => {\n if (options.inReverseMode()) {\n reloadOptions = addScrollPreservationCallbacks(reloadOptions)\n }\n\n originalFetchNext(reloadOptions)\n }\n\n const originalFetchPrevious = dataManager.fetchPrevious\n dataManager.fetchPrevious = (reloadOptions: ReloadOptions = {}) => {\n if (!options.inReverseMode()) {\n reloadOptions = addScrollPreservationCallbacks(reloadOptions)\n }\n\n originalFetchPrevious(reloadOptions)\n }\n\n const removeEventListener = router.on('success', () => requestAnimationFrame(elementManager.refreshTriggers, 2))\n\n return {\n dataManager,\n elementManager,\n flush: () => {\n removeEventListener()\n dataManager.removeEventListener()\n elementManager.flushAll()\n queryStringManager.cancel()\n },\n }\n}\n" }, { "path": "packages/core/src/initialVisit.ts", "content": "import { eventHandler } from './eventHandler'\nimport { fireFlashEvent, fireNavigateEvent } from './events'\nimport { history } from './history'\nimport { navigationType } from './navigationType'\nimport { page as currentPage } from './page'\nimport { Scroll } from './scroll'\nimport { SessionStorage } from './sessionStorage'\nimport { LocationVisit, Page } from './types'\n\nexport class InitialVisit {\n public static handle(): void {\n this.clearRememberedStateOnReload()\n\n const scenarios = [this.handleBackForward, this.handleLocation, this.handleDefault]\n\n scenarios.find((handler) => handler.bind(this)())\n }\n\n protected static clearRememberedStateOnReload(): void {\n if (navigationType.isReload()) {\n history.deleteState(history.rememberedState)\n history.clearInitialState(history.rememberedState)\n }\n }\n\n protected static handleBackForward(): boolean {\n if (!navigationType.isBackForward() || !history.browserHasHistoryEntry()) {\n return false\n }\n\n const scrollRegions = history.getScrollRegions()\n\n history\n .decrypt()\n .then((data) => {\n currentPage.set(data, { preserveScroll: true, preserveState: true }).then(() => {\n Scroll.restore(scrollRegions)\n fireNavigateEvent(currentPage.get())\n })\n })\n .catch(() => {\n eventHandler.onMissingHistoryItem()\n })\n\n return true\n }\n\n /**\n * @link https://inertiajs.com/redirects#external-redirects\n */\n protected static handleLocation(): boolean {\n if (!SessionStorage.exists(SessionStorage.locationVisitKey)) {\n return false\n }\n\n const locationVisit: LocationVisit = SessionStorage.get(SessionStorage.locationVisitKey) || {}\n\n SessionStorage.remove(SessionStorage.locationVisitKey)\n\n if (typeof window !== 'undefined') {\n currentPage.setUrlHash(window.location.hash)\n }\n\n history\n .decrypt(currentPage.get())\n .then(() => {\n const rememberedState = history.getState<Page['rememberedState']>(history.rememberedState, {})\n const scrollRegions = history.getScrollRegions()\n currentPage.remember(rememberedState)\n\n currentPage\n .set(currentPage.get(), {\n preserveScroll: locationVisit.preserveScroll,\n preserveState: true,\n })\n .then(() => {\n if (locationVisit.preserveScroll) {\n Scroll.restore(scrollRegions)\n }\n\n fireNavigateEvent(currentPage.get())\n })\n })\n .catch(() => {\n eventHandler.onMissingHistoryItem()\n })\n\n return true\n }\n\n protected static handleDefault(): void {\n if (typeof window !== 'undefined') {\n currentPage.setUrlHash(window.location.hash)\n }\n\n currentPage.set(currentPage.get(), { preserveScroll: true, preserveState: true }).then(() => {\n if (navigationType.isReload()) {\n Scroll.restore(history.getScrollRegions())\n } else {\n Scroll.scrollToAnchor()\n }\n\n const page = currentPage.get()\n\n fireNavigateEvent(page)\n\n const flash = page.flash\n\n if (Object.keys(flash).length > 0) {\n queueMicrotask(() => fireFlashEvent(flash))\n }\n })\n }\n}\n" }, { "path": "packages/core/src/intersectionObservers.ts", "content": "type IntersectionObserverCallback = (entry: IntersectionObserverEntry) => void\n\ninterface IntersectionObserverManager {\n new: (callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => IntersectionObserver\n flushAll: () => void\n}\n\nexport const useIntersectionObservers = (): IntersectionObserverManager => {\n const intersectionObservers: IntersectionObserver[] = []\n\n const newIntersectionObserver = (\n callback: IntersectionObserverCallback,\n options: IntersectionObserverInit = {},\n ): IntersectionObserver => {\n const observer = new IntersectionObserver((entries) => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n callback(entry)\n }\n }\n }, options)\n\n intersectionObservers.push(observer)\n\n return observer\n }\n\n const flushAll = () => {\n intersectionObservers.forEach((observer) => observer.disconnect())\n intersectionObservers.length = 0\n }\n\n return {\n new: newIntersectionObserver,\n flushAll,\n }\n}\n" }, { "path": "packages/core/src/modal.ts", "content": "export default {\n modal: null,\n listener: null,\n\n createIframeAndPage(html: Record<string, unknown> | string): { iframe: HTMLIFrameElement; page: HTMLElement } {\n if (typeof html === 'object') {\n html = `All Inertia requests must receive a valid Inertia response, however a plain JSON response was received.<hr>${JSON.stringify(\n html,\n )}`\n }\n\n const page = document.createElement('html')\n page.innerHTML = html\n page.querySelectorAll('a').forEach((a) => a.setAttribute('target', '_top'))\n\n const iframe = document.createElement('iframe')\n iframe.style.backgroundColor = 'white'\n iframe.style.borderRadius = '5px'\n iframe.style.width = '100%'\n iframe.style.height = '100%'\n\n return { iframe, page }\n },\n\n show(html: Record<string, unknown> | string): void {\n const { iframe, page } = this.createIframeAndPage(html)\n\n this.modal = document.createElement('div')\n this.modal.style.position = 'fixed'\n this.modal.style.width = '100vw'\n this.modal.style.height = '100vh'\n this.modal.style.padding = '50px'\n this.modal.style.boxSizing = 'border-box'\n this.modal.style.backgroundColor = 'rgba(0, 0, 0, .6)'\n this.modal.style.zIndex = 200000\n this.modal.addEventListener('click', () => this.hide())\n this.modal.appendChild(iframe)\n\n document.body.prepend(this.modal)\n document.body.style.overflow = 'hidden'\n if (!iframe.contentWindow) {\n throw new Error('iframe not yet ready.')\n }\n iframe.contentWindow.document.open()\n iframe.contentWindow.document.write(page.outerHTML)\n iframe.contentWindow.document.close()\n\n this.listener = this.hideOnEscape.bind(this)\n document.addEventListener('keydown', this.listener)\n },\n\n hide(): void {\n this.modal.outerHTML = ''\n this.modal = null\n document.body.style.overflow = 'visible'\n document.removeEventListener('keydown', this.listener)\n },\n\n hideOnEscape(event: KeyboardEvent): void {\n if (event.keyCode === 27) {\n this.hide()\n }\n },\n}\n" }, { "path": "packages/core/src/navigationEvents.ts", "content": "type MouseNavigationEvent = Pick<\n MouseEvent,\n 'altKey' | 'ctrlKey' | 'shiftKey' | 'metaKey' | 'button' | 'currentTarget' | 'defaultPrevented' | 'target'\n>\n\ntype KeyboardNavigationEvent = Pick<KeyboardEvent, 'currentTarget' | 'defaultPrevented' | 'key' | 'target'>\n\nfunction isContentEditableOrPrevented(event: KeyboardNavigationEvent | MouseNavigationEvent): boolean {\n return (event.target instanceof HTMLElement && event.target.isContentEditable) || event.defaultPrevented\n}\n\n/**\n * Determine if this mouse event should be intercepted for navigation purposes.\n * Links with modifier keys or non-left clicks should not be intercepted.\n * Content editable elements and prevented events are ignored.\n */\nexport function shouldIntercept(event: MouseNavigationEvent): boolean {\n const isLink = (event.currentTarget as HTMLElement).tagName.toLowerCase() === 'a'\n\n return !(\n isContentEditableOrPrevented(event) ||\n (isLink && event.altKey) ||\n (isLink && event.ctrlKey) ||\n (isLink && event.metaKey) ||\n (isLink && event.shiftKey) ||\n (isLink && 'button' in event && event.button !== 0)\n )\n}\n\n/**\n * Determine if this keyboard event should trigger a navigation request.\n * Enter triggers navigation for both links and buttons currently.\n * Space only triggers navigation for buttons specifically.\n */\nexport function shouldNavigate(event: KeyboardNavigationEvent): boolean {\n const isButton = (event.currentTarget as HTMLElement).tagName.toLowerCase() === 'button'\n\n return !isContentEditableOrPrevented(event) && (event.key === 'Enter' || (isButton && event.key === ' '))\n}\n" }, { "path": "packages/core/src/navigationType.ts", "content": "class NavigationType {\n protected type: NavigationTimingType\n\n public constructor() {\n this.type = this.resolveType()\n }\n\n protected resolveType(): NavigationTimingType {\n if (typeof window === 'undefined') {\n return 'navigate'\n }\n\n if (\n window.performance &&\n window.performance.getEntriesByType &&\n window.performance.getEntriesByType('navigation').length > 0\n ) {\n return (window.performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming).type\n }\n\n return 'navigate'\n }\n\n public get(): NavigationTimingType {\n return this.type\n }\n\n public isBackForward(): boolean {\n return this.type === 'back_forward'\n }\n\n public isReload(): boolean {\n return this.type === 'reload'\n }\n}\n\nexport const navigationType = new NavigationType()\n" }, { "path": "packages/core/src/objectUtils.ts", "content": "export const objectsAreEqual = <T extends Record<string, any>>(\n obj1: T,\n obj2: T,\n excludeKeys: {\n [K in keyof T]: K\n }[keyof T][],\n): boolean => {\n if (obj1 === obj2) {\n return true\n }\n\n // Check keys in obj1\n for (const key in obj1) {\n if (excludeKeys.includes(key)) {\n continue\n }\n\n if (obj1[key] === obj2[key]) {\n continue\n }\n\n if (!compareValues(obj1[key], obj2[key])) {\n return false\n }\n }\n\n // Check keys that exist in obj2 but not in obj1\n for (const key in obj2) {\n if (excludeKeys.includes(key)) {\n continue\n }\n\n if (!(key in obj1)) {\n return false\n }\n }\n\n return true\n}\n\nconst compareValues = (value1: any, value2: any): boolean => {\n switch (typeof value1) {\n case 'object':\n return objectsAreEqual(value1, value2, [])\n case 'function':\n return value1.toString() === value2.toString()\n default:\n return value1 === value2\n }\n}\n" }, { "path": "packages/core/src/page.ts", "content": "import { eventHandler } from './eventHandler'\nimport { fireNavigateEvent } from './events'\nimport { history } from './history'\nimport { prefetchedRequests } from './prefetched'\nimport { Scroll } from './scroll'\nimport { Component, FlashData, Page, PageEvent, PageHandler, PageResolver, RouterInitParams, Visit } from './types'\nimport { hrefToUrl, isSameUrlWithoutHash } from './url'\n\nclass CurrentPage {\n protected page!: Page\n protected swapComponent!: PageHandler<any>\n protected resolveComponent!: PageResolver\n protected onFlashCallback?: (flash: Page['flash']) => void\n protected componentId = {}\n protected listeners: {\n event: PageEvent\n callback: VoidFunction\n }[] = []\n protected isFirstPageLoad = true\n protected cleared = false\n protected pendingDeferredProps: Pick<Page, 'deferredProps' | 'url' | 'component'> | null = null\n protected historyQuotaExceeded = false\n\n public init<ComponentType = Component>({\n initialPage,\n swapComponent,\n resolveComponent,\n onFlash,\n }: RouterInitParams<ComponentType>) {\n this.page = { ...initialPage, flash: initialPage.flash ?? {} }\n this.swapComponent = swapComponent\n this.resolveComponent = resolveComponent\n this.onFlashCallback = onFlash\n\n eventHandler.on('historyQuotaExceeded', () => {\n this.historyQuotaExceeded = true\n })\n\n return this\n }\n\n public set(\n page: Page,\n {\n replace = false,\n preserveScroll = false,\n preserveState = false,\n viewTransition = false,\n }: {\n replace?: boolean\n preserveScroll?: boolean\n preserveState?: boolean\n viewTransition?: Visit['viewTransition']\n } = {},\n ): Promise<void> {\n if (Object.keys(page.deferredProps || {}).length) {\n this.pendingDeferredProps = {\n deferredProps: page.deferredProps,\n component: page.component,\n url: page.url,\n }\n\n // Preserve original deferred props for back button handling\n if (page.initialDeferredProps === undefined) {\n page.initialDeferredProps = page.deferredProps\n }\n }\n\n this.componentId = {}\n\n const componentId = this.componentId\n\n if (page.clearHistory) {\n history.clear()\n }\n\n return this.resolve(page.component).then((component) => {\n if (componentId !== this.componentId) {\n // Component has changed since we started resolving this component, bail\n return\n }\n\n page.rememberedState ??= {}\n\n const isServer = typeof window === 'undefined'\n const location = !isServer ? window.location : new URL(page.url)\n const scrollRegions = !isServer && preserveScroll ? Scroll.getScrollRegions() : []\n replace = replace || isSameUrlWithoutHash(hrefToUrl(page.url), location)\n\n // Clear flash data from the page object, we don't want it when navigating back/forward...\n const pageForHistory = { ...page, flash: {} }\n\n return new Promise<void>((resolve) =>\n replace ? history.replaceState(pageForHistory, resolve) : history.pushState(pageForHistory, resolve),\n ).then(() => {\n const isNewComponent = !this.isTheSame(page)\n\n if (!isNewComponent && Object.keys(page.props.errors || {}).length > 0) {\n // Don't use view transition if the page stays the same and there are (new) errors...\n viewTransition = false\n }\n\n this.page = page\n this.cleared = false\n\n if (this.hasOnceProps()) {\n prefetchedRequests.updateCachedOncePropsFromCurrentPage()\n }\n\n if (isNewComponent) {\n this.fireEventsFor('newComponent')\n }\n\n if (this.isFirstPageLoad) {\n this.fireEventsFor('firstLoad')\n }\n\n this.isFirstPageLoad = false\n\n if (this.historyQuotaExceeded) {\n // If we exceeded the history quota, don't attempt to swap the\n // component as we're performing a full page reload instead.\n this.historyQuotaExceeded = false\n return\n }\n\n return this.swap({\n component,\n page,\n preserveState,\n viewTransition,\n }).then(() => {\n if (preserveScroll) {\n // Scroll regions must be explicitly restored since the DOM elements are destroyed\n // and recreated during the component 'swap'. Document scroll is naturally\n // preserved as the document element itself persists across navigations.\n window.requestAnimationFrame(() => Scroll.restoreScrollRegions(scrollRegions))\n } else {\n Scroll.reset()\n }\n\n if (\n this.pendingDeferredProps &&\n this.pendingDeferredProps.component === page.component &&\n this.pendingDeferredProps.url === page.url\n ) {\n eventHandler.fireInternalEvent('loadDeferredProps', this.pendingDeferredProps.deferredProps)\n }\n\n this.pendingDeferredProps = null\n\n if (!replace) {\n fireNavigateEvent(page)\n }\n })\n })\n })\n }\n\n public setQuietly(\n page: Page,\n {\n preserveState = false,\n }: {\n preserveState?: boolean\n } = {},\n ) {\n return this.resolve(page.component).then((component) => {\n this.page = page\n this.cleared = false\n history.setCurrent(page)\n return this.swap({ component, page, preserveState, viewTransition: false })\n })\n }\n\n public clear(): void {\n this.cleared = true\n }\n\n public isCleared(): boolean {\n return this.cleared\n }\n\n public get(): Page {\n return this.page\n }\n\n public getWithoutFlashData(): Page {\n return { ...this.page, flash: {} }\n }\n\n public hasOnceProps(): boolean {\n return Object.keys(this.page.onceProps ?? {}).length > 0\n }\n\n public merge(data: Partial<Page>): void {\n this.page = { ...this.page, ...data }\n }\n\n public setFlash(flash: FlashData): void {\n this.page = { ...this.page, flash }\n this.onFlashCallback?.(flash)\n }\n\n public setUrlHash(hash: string): void {\n if (!this.page.url.includes(hash)) {\n this.page.url += hash\n }\n }\n\n public remember(data: Page['rememberedState']): void {\n this.page.rememberedState = data\n }\n\n public swap({\n component,\n page,\n preserveState,\n viewTransition,\n }: {\n component: Component\n page: Page\n preserveState: boolean\n viewTransition: Visit['viewTransition']\n }): Promise<unknown> {\n const doSwap = () => this.swapComponent({ component, page, preserveState })\n\n if (!viewTransition || !document?.startViewTransition || document.visibilityState === 'hidden') {\n return doSwap()\n }\n\n const viewTransitionCallback = typeof viewTransition === 'boolean' ? () => null : viewTransition\n\n return new Promise((resolve) => {\n const transitionResult = document.startViewTransition(() => doSwap().then(resolve))\n\n viewTransitionCallback(transitionResult)\n })\n }\n\n public resolve(component: string): Promise<Component> {\n return Promise.resolve(this.resolveComponent(component))\n }\n\n public isTheSame(page: Page): boolean {\n return this.page.component === page.component\n }\n\n public on(event: PageEvent, callback: VoidFunction): VoidFunction {\n this.listeners.push({ event, callback })\n\n return () => {\n this.listeners = this.listeners.filter((listener) => listener.event !== event && listener.callback !== callback)\n }\n }\n\n public fireEventsFor(event: PageEvent): void {\n this.listeners.filter((listener) => listener.event === event).forEach((listener) => listener.callback())\n }\n\n public mergeOncePropsIntoResponse(response: Page, { force = false }: { force?: boolean } = {}): void {\n Object.entries(response.onceProps ?? {}).forEach(([key, onceProp]) => {\n const existingOnceProp = this.page.onceProps?.[key]\n\n if (existingOnceProp === undefined) {\n return\n }\n\n if (force || response.props[onceProp.prop] === undefined) {\n response.props[onceProp.prop] = this.page.props[existingOnceProp.prop]\n response.onceProps![key].expiresAt = existingOnceProp.expiresAt\n }\n })\n }\n}\n\nexport const page = new CurrentPage()\n" }, { "path": "packages/core/src/poll.ts", "content": "import { PollOptions } from './types'\n\nexport class Poll {\n protected id: number | null = null\n protected throttle = false\n protected keepAlive = false\n protected cb: VoidFunction\n protected interval: number\n protected cbCount = 0\n\n constructor(interval: number, cb: VoidFunction, options: PollOptions) {\n this.keepAlive = options.keepAlive ?? false\n\n this.cb = cb\n this.interval = interval\n\n if (options.autoStart ?? true) {\n this.start()\n }\n }\n\n public stop() {\n // console.log('stopping...', this.id)\n if (this.id) {\n // console.log('clearing interval...')\n clearInterval(this.id)\n }\n }\n\n public start() {\n if (typeof window === 'undefined') {\n return\n }\n\n this.stop()\n\n this.id = window.setInterval(() => {\n if (!this.throttle || this.cbCount % 10 === 0) {\n this.cb()\n }\n\n if (this.throttle) {\n this.cbCount++\n }\n }, this.interval)\n }\n\n public isInBackground(hidden: boolean) {\n this.throttle = this.keepAlive ? false : hidden\n\n if (this.throttle) {\n this.cbCount = 0\n }\n }\n}\n" }, { "path": "packages/core/src/polls.ts", "content": "import { Poll } from './poll'\nimport { PollOptions } from './types'\n\nclass Polls {\n protected polls: Poll[] = []\n\n constructor() {\n this.setupVisibilityListener()\n }\n\n public add(\n interval: number,\n cb: VoidFunction,\n options: PollOptions,\n ): {\n stop: VoidFunction\n start: VoidFunction\n } {\n const poll = new Poll(interval, cb, options)\n\n this.polls.push(poll)\n\n return {\n stop: () => poll.stop(),\n start: () => poll.start(),\n }\n }\n\n public clear() {\n this.polls.forEach((poll) => poll.stop())\n\n this.polls = []\n }\n\n protected setupVisibilityListener() {\n if (typeof document === 'undefined') {\n return\n }\n\n document.addEventListener(\n 'visibilitychange',\n () => {\n this.polls.forEach((poll) => poll.isInBackground(document.hidden))\n },\n false,\n )\n }\n}\n\nexport const polls = new Polls()\n" }, { "path": "packages/core/src/prefetched.ts", "content": "import { cloneDeep } from 'lodash-es'\nimport { objectsAreEqual } from './objectUtils'\nimport { page as currentPage } from './page'\nimport { Response } from './response'\nimport { timeToMs } from './time'\nimport {\n ActiveVisit,\n CacheForOption,\n InFlightPrefetch,\n InternalActiveVisit,\n Page,\n PrefetchedResponse,\n PrefetchOptions,\n PrefetchRemovalTimer,\n} from './types'\n\nclass PrefetchedRequests {\n protected cached: PrefetchedResponse[] = []\n protected inFlightRequests: InFlightPrefetch[] = []\n protected removalTimers: PrefetchRemovalTimer[] = []\n protected currentUseId: string | null = null\n\n public add(\n params: ActiveVisit,\n sendFunc: (params: InternalActiveVisit) => void,\n { cacheFor, cacheTags }: PrefetchOptions,\n ) {\n const inFlight = this.findInFlight(params)\n\n if (inFlight) {\n return Promise.resolve()\n }\n\n const existing = this.findCached(params)\n\n if (!params.fresh && existing && existing.staleTimestamp > Date.now()) {\n return Promise.resolve()\n }\n\n const [stale, prefetchExpiresIn] = this.extractStaleValues(cacheFor)\n\n const promise = new Promise<Response>((resolve, reject) => {\n sendFunc({\n ...params,\n onCancel: () => {\n this.remove(params)\n params.onCancel()\n reject()\n },\n onError: (error) => {\n this.remove(params)\n params.onError(error)\n reject()\n },\n onPrefetching(visitParams) {\n params.onPrefetching(visitParams)\n },\n onPrefetched(response, visit) {\n params.onPrefetched(response, visit)\n },\n onPrefetchResponse(response) {\n resolve(response)\n },\n onPrefetchError(error) {\n prefetchedRequests.removeFromInFlight(params)\n reject(error)\n },\n })\n }).then((response) => {\n this.remove(params)\n\n const pageResponse = response.getPageResponse()\n\n currentPage.mergeOncePropsIntoResponse(pageResponse)\n\n this.cached.push({\n params: { ...params },\n staleTimestamp: Date.now() + stale,\n expiresAt: Date.now() + prefetchExpiresIn,\n response: promise,\n singleUse: prefetchExpiresIn === 0,\n timestamp: Date.now(),\n inFlight: false,\n tags: Array.isArray(cacheTags) ? cacheTags : [cacheTags],\n })\n\n const oncePropExpiresIn = this.getShortestOncePropTtl(pageResponse)\n this.scheduleForRemoval(\n params,\n oncePropExpiresIn ? Math.min(prefetchExpiresIn, oncePropExpiresIn) : prefetchExpiresIn,\n )\n this.removeFromInFlight(params)\n\n response.handlePrefetch()\n\n return response\n })\n\n this.inFlightRequests.push({\n params: { ...params },\n response: promise,\n staleTimestamp: null,\n inFlight: true,\n })\n\n return promise\n }\n\n public removeAll(): void {\n this.cached = []\n this.removalTimers.forEach((removalTimer) => {\n clearTimeout(removalTimer.timer)\n })\n this.removalTimers = []\n }\n\n public removeByTags(tags: string[]): void {\n this.cached = this.cached.filter((prefetched) => {\n return !prefetched.tags.some((tag) => tags.includes(tag))\n })\n }\n\n public remove(params: ActiveVisit): void {\n this.cached = this.cached.filter((prefetched) => {\n return !this.paramsAreEqual(prefetched.params, params)\n })\n\n this.clearTimer(params)\n }\n\n protected removeFromInFlight(params: ActiveVisit): void {\n this.inFlightRequests = this.inFlightRequests.filter((prefetching) => {\n return !this.paramsAreEqual(prefetching.params, params)\n })\n }\n\n protected extractStaleValues(cacheFor: PrefetchOptions['cacheFor']): [number, number] {\n const [stale, expires] = this.cacheForToStaleAndExpires(cacheFor)\n\n return [timeToMs(stale), timeToMs(expires)]\n }\n\n protected cacheForToStaleAndExpires(cacheFor: PrefetchOptions['cacheFor']): [CacheForOption, CacheForOption] {\n if (!Array.isArray(cacheFor)) {\n return [cacheFor, cacheFor]\n }\n\n switch (cacheFor.length) {\n case 0:\n return [0, 0]\n case 1:\n return [cacheFor[0], cacheFor[0]]\n default:\n return [cacheFor[0], cacheFor[1]]\n }\n }\n\n protected clearTimer(params: ActiveVisit) {\n const timer = this.removalTimers.find((removalTimer) => {\n return this.paramsAreEqual(removalTimer.params, params)\n })\n\n if (timer) {\n clearTimeout(timer.timer)\n this.removalTimers = this.removalTimers.filter((removalTimer) => removalTimer !== timer)\n }\n }\n\n protected scheduleForRemoval(params: ActiveVisit, expiresIn: number) {\n if (typeof window === 'undefined') {\n return\n }\n\n this.clearTimer(params)\n\n if (expiresIn > 0) {\n const timer = window.setTimeout(() => this.remove(params), expiresIn)\n\n this.removalTimers.push({\n params,\n timer,\n })\n }\n }\n\n public get(params: ActiveVisit): InFlightPrefetch | PrefetchedResponse | null {\n return this.findCached(params) || this.findInFlight(params)\n }\n\n public use(prefetched: PrefetchedResponse | InFlightPrefetch, params: ActiveVisit) {\n const id = `${params.url.pathname}-${Date.now()}-${Math.random().toString(36).substring(7)}`\n\n this.currentUseId = id\n\n return prefetched.response.then((response) => {\n if (this.currentUseId !== id) {\n // They've since gone on to `use` a different request,\n // so we should ignore this one\n return\n }\n\n response.mergeParams({ ...params, onPrefetched: () => {} })\n\n // If this was a one-time cache, remove it\n // (generally a prefetch=\"click\" request with no specified cache value)\n this.removeSingleUseItems(params)\n\n return response.handle()\n })\n }\n\n protected removeSingleUseItems(params: ActiveVisit) {\n this.cached = this.cached.filter((prefetched) => {\n if (!this.paramsAreEqual(prefetched.params, params)) {\n return true\n }\n\n return !prefetched.singleUse\n })\n }\n\n public findCached(params: ActiveVisit): PrefetchedResponse | null {\n return (\n this.cached.find((prefetched) => {\n return this.paramsAreEqual(prefetched.params, params)\n }) || null\n )\n }\n\n public findInFlight(params: ActiveVisit): InFlightPrefetch | null {\n return (\n this.inFlightRequests.find((prefetched) => {\n return this.paramsAreEqual(prefetched.params, params)\n }) || null\n )\n }\n\n protected withoutPurposePrefetchHeader(params: ActiveVisit): ActiveVisit {\n const newParams = cloneDeep(params)\n if (newParams.headers['Purpose'] === 'prefetch') {\n delete newParams.headers['Purpose']\n }\n return newParams\n }\n\n protected paramsAreEqual(params1: ActiveVisit, params2: ActiveVisit): boolean {\n return objectsAreEqual<ActiveVisit>(\n this.withoutPurposePrefetchHeader(params1),\n this.withoutPurposePrefetchHeader(params2),\n [\n 'showProgress',\n 'replace',\n 'prefetch',\n 'preserveScroll',\n 'preserveState',\n 'onBefore',\n 'onBeforeUpdate',\n 'onStart',\n 'onProgress',\n 'onFinish',\n 'onCancel',\n 'onSuccess',\n 'onError',\n 'onFlash',\n 'onPrefetched',\n 'onCancelToken',\n 'onPrefetching',\n 'async',\n 'viewTransition',\n ],\n )\n }\n\n public updateCachedOncePropsFromCurrentPage(): void {\n this.cached.forEach((prefetched) => {\n prefetched.response.then((response) => {\n const pageResponse = response.getPageResponse()\n\n currentPage.mergeOncePropsIntoResponse(pageResponse, { force: true })\n\n for (const [group, deferredProps] of Object.entries(pageResponse.deferredProps ?? {})) {\n const remaining = deferredProps.filter((prop) => pageResponse.props[prop] === undefined)\n\n if (remaining.length > 0) {\n pageResponse.deferredProps![group] = remaining\n } else {\n delete pageResponse.deferredProps![group]\n }\n }\n\n const oncePropExpiresIn = this.getShortestOncePropTtl(pageResponse)\n\n if (oncePropExpiresIn === null) {\n return\n }\n\n const prefetchExpiresIn = prefetched.expiresAt - Date.now()\n const expiresIn = Math.min(prefetchExpiresIn, oncePropExpiresIn)\n\n if (expiresIn > 0) {\n this.scheduleForRemoval(prefetched.params, expiresIn)\n } else {\n this.remove(prefetched.params)\n }\n })\n })\n }\n\n protected getShortestOncePropTtl(page: Page): number | null {\n const expiryTimestamps = Object.values(page.onceProps ?? {})\n .map((onceProp) => onceProp.expiresAt)\n .filter((expiresAt): expiresAt is number => !!expiresAt)\n\n if (expiryTimestamps.length === 0) {\n return null\n }\n\n return Math.min(...expiryTimestamps) - Date.now()\n }\n}\n\nexport const prefetchedRequests = new PrefetchedRequests()\n" }, { "path": "packages/core/src/progress-component.ts", "content": "/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress\n * @license MIT */\n\nimport { ProgressSettings } from './types'\n\nconst baseComponentSelector = 'nprogress'\n\nlet progress: HTMLDivElement\n\nconst settings: ProgressSettings = {\n minimum: 0.08,\n easing: 'linear',\n positionUsing: 'translate3d',\n speed: 200,\n trickle: true,\n trickleSpeed: 200,\n showSpinner: true,\n barSelector: '[role=\"bar\"]',\n spinnerSelector: '[role=\"spinner\"]',\n parent: 'body',\n color: '#29d',\n includeCSS: true,\n template: [\n '<div class=\"bar\" role=\"bar\">',\n '<div class=\"peg\"></div>',\n '</div>',\n '<div class=\"spinner\" role=\"spinner\">',\n '<div class=\"spinner-icon\"></div>',\n '</div>',\n ].join(''),\n}\n\nlet status: number | null = null\n\nconst configure = (options: Partial<ProgressSettings>) => {\n Object.assign(settings, options)\n\n if (settings.includeCSS) {\n injectCSS(settings.color)\n }\n\n progress = document.createElement('div')\n progress.id = baseComponentSelector\n progress.innerHTML = settings.template\n}\n\n/**\n * Sets the progress bar status, where `n` is a number from `0.0` to `1.0`.\n */\nconst set = (n: number) => {\n const started = isStarted()\n\n n = clamp(n, settings.minimum, 1)\n status = n === 1 ? null : n\n\n const progress = render(!started)\n const bar = progress.querySelector(settings.barSelector)! as HTMLElement\n const speed = settings.speed\n const ease = settings.easing\n\n progress.offsetWidth /* Repaint */\n\n queue((next) => {\n const barStyles = ((): Partial<CSSStyleDeclaration> => {\n if (settings.positionUsing === 'translate3d') {\n return {\n transition: `all ${speed}ms ${ease}`,\n transform: `translate3d(${toBarPercentage(n)}%,0,0)`,\n }\n }\n\n if (settings.positionUsing === 'translate') {\n return {\n transition: `all ${speed}ms ${ease}`,\n transform: `translate(${toBarPercentage(n)}%,0)`,\n }\n }\n\n return { marginLeft: `${toBarPercentage(n)}%` }\n })()\n\n for (const key in barStyles) {\n bar.style[key] = barStyles[key]!\n }\n\n if (n !== 1) {\n return setTimeout(next, speed)\n }\n\n // Fade out\n progress.style.transition = 'none'\n progress.style.opacity = '1'\n progress.offsetWidth /* Repaint */\n\n setTimeout(() => {\n progress.style.transition = `all ${speed}ms linear`\n progress.style.opacity = '0'\n\n setTimeout(() => {\n remove()\n progress.style.transition = ''\n progress.style.opacity = ''\n next()\n }, speed)\n }, speed)\n })\n}\n\nconst isStarted = () => typeof status === 'number'\n\n/**\n * Shows the progress bar.\n * This is the same as setting the status to 0%, except that it doesn't go backwards.\n */\nconst start = () => {\n if (!status) {\n set(0)\n }\n\n const work = function () {\n setTimeout(function () {\n if (!status) {\n return\n }\n\n increaseByRandom()\n work()\n }, settings.trickleSpeed)\n }\n\n if (settings.trickle) {\n work()\n }\n}\n\n/**\n * Hides the progress bar.\n * This is the *sort of* the same as setting the status to 100%, with the\n * difference being `done()` makes some placebo effect of some realistic motion.\n *\n * If `true` is passed, it will show the progress bar even if it's hidden.\n */\nconst done = (force?: boolean) => {\n if (!force && !status) {\n return\n }\n\n increaseByRandom(0.3 + 0.5 * Math.random())\n set(1)\n}\n\nconst increaseByRandom = (amount?: number) => {\n const n = status\n\n if (n === null) {\n return start()\n }\n\n if (n > 1) {\n return\n }\n\n amount =\n typeof amount === 'number'\n ? amount\n : (() => {\n const ranges: Record<number, [number, number]> = {\n 0.1: [0, 0.2],\n 0.04: [0.2, 0.5],\n 0.02: [0.5, 0.8],\n 0.005: [0.8, 0.99],\n }\n\n for (const r in ranges) {\n if (n >= ranges[r][0] && n < ranges[r][1]) {\n return parseFloat(r)\n }\n }\n\n return 0\n })()\n\n return set(clamp(n + amount, 0, 0.994))\n}\n\n/**\n * (Internal) renders the progress bar markup based on the `template` setting.\n */\nconst render = (fromStart: boolean) => {\n if (isRendered()) {\n return document.getElementById(baseComponentSelector)!\n }\n\n document.documentElement.classList.add(`${baseComponentSelector}-busy`)\n\n const bar = progress.querySelector(settings.barSelector)! as HTMLElement\n const perc = fromStart ? '-100' : toBarPercentage(status || 0)\n const parent = getParent()\n\n bar.style.transition = 'all 0 linear'\n bar.style.transform = `translate3d(${perc}%,0,0)`\n\n if (!settings.showSpinner) {\n progress.querySelector(settings.spinnerSelector)?.remove()\n }\n\n if (parent !== document.body) {\n parent.classList.add(`${baseComponentSelector}-custom-parent`)\n }\n\n parent.appendChild(progress)\n\n return progress\n}\n\nconst getParent = (): HTMLElement => {\n return (isDOM(settings.parent) ? settings.parent : document.querySelector(settings.parent)) as HTMLElement\n}\n\nconst remove = () => {\n document.documentElement.classList.remove(`${baseComponentSelector}-busy`)\n getParent().classList.remove(`${baseComponentSelector}-custom-parent`)\n progress?.remove()\n}\n\nconst isRendered = () => {\n return document.getElementById(baseComponentSelector) !== null\n}\n\nconst isDOM = (obj: any) => {\n if (typeof HTMLElement === 'object') {\n return obj instanceof HTMLElement\n }\n\n return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'\n}\n\nfunction clamp(n: number, min: number, max: number): number {\n if (n < min) {\n return min\n }\n\n if (n > max) {\n return max\n }\n\n return n\n}\n\n// Converts a percentage (`0..1`) to a bar translateX percentage (`-100%..0%`).\nconst toBarPercentage = (n: number) => (-1 + n) * 100\n\n// Queues a function to be executed.\nconst queue = (() => {\n const pending: ((...args: any[]) => any)[] = []\n\n const next = () => {\n const fn = pending.shift()\n\n if (fn) {\n fn(next)\n }\n }\n\n return (fn: (...args: any[]) => any) => {\n pending.push(fn)\n\n if (pending.length === 1) {\n next()\n }\n }\n})()\n\nconst injectCSS = (color: string): void => {\n const element = document.createElement('style')\n\n element.textContent = `\n #${baseComponentSelector} {\n pointer-events: none;\n }\n\n #${baseComponentSelector} .bar {\n background: ${color};\n\n position: fixed;\n z-index: 1031;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 2px;\n }\n\n #${baseComponentSelector} .peg {\n display: block;\n position: absolute;\n right: 0px;\n width: 100px;\n height: 100%;\n box-shadow: 0 0 10px ${color}, 0 0 5px ${color};\n opacity: 1.0;\n\n transform: rotate(3deg) translate(0px, -4px);\n }\n\n #${baseComponentSelector} .spinner {\n display: block;\n position: fixed;\n z-index: 1031;\n top: 15px;\n right: 15px;\n }\n\n #${baseComponentSelector} .spinner-icon {\n width: 18px;\n height: 18px;\n box-sizing: border-box;\n\n border: solid 2px transparent;\n border-top-color: ${color};\n border-left-color: ${color};\n border-radius: 50%;\n\n animation: ${baseComponentSelector}-spinner 400ms linear infinite;\n }\n\n .${baseComponentSelector}-custom-parent {\n overflow: hidden;\n position: relative;\n }\n\n .${baseComponentSelector}-custom-parent #${baseComponentSelector} .spinner,\n .${baseComponentSelector}-custom-parent #${baseComponentSelector} .bar {\n position: absolute;\n }\n\n @keyframes ${baseComponentSelector}-spinner {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n `\n document.head.appendChild(element)\n}\n\nconst show = () => {\n if (progress) {\n progress.style.display = ''\n }\n}\n\nconst hide = () => {\n if (progress) {\n progress.style.display = 'none'\n }\n}\n\nexport default {\n configure,\n isStarted,\n done,\n set,\n remove,\n start,\n status,\n show,\n hide,\n}\n" }, { "path": "packages/core/src/progress.ts", "content": "import ProgressComponent from './progress-component'\nimport { GlobalEvent } from './types'\n\nclass Progress {\n public hideCount = 0\n\n public start(): void {\n ProgressComponent.start()\n }\n\n public reveal(force: boolean = false): void {\n this.hideCount = Math.max(0, this.hideCount - 1)\n\n if (force || this.hideCount === 0) {\n ProgressComponent.show()\n }\n }\n\n public hide(): void {\n this.hideCount++\n\n ProgressComponent.hide()\n }\n\n public set(status: number): void {\n ProgressComponent.set(Math.max(0, Math.min(1, status)))\n }\n\n public finish(): void {\n ProgressComponent.done()\n }\n\n public reset(): void {\n ProgressComponent.set(0)\n }\n\n public remove(): void {\n ProgressComponent.done()\n ProgressComponent.remove()\n }\n\n public isStarted(): boolean {\n return ProgressComponent.isStarted()\n }\n\n public getStatus(): number | null {\n return ProgressComponent.status\n }\n}\n\nexport const progress = new Progress()\nexport const reveal = progress.reveal\nexport const hide = progress.hide\n\nfunction addEventListeners(delay: number): void {\n document.addEventListener('inertia:start', (e) => handleStartEvent(e, delay))\n document.addEventListener('inertia:progress', handleProgressEvent)\n}\n\nfunction handleStartEvent(event: GlobalEvent<'start'>, delay: number): void {\n if (!event.detail.visit.showProgress) {\n progress.hide()\n }\n\n const timeout = setTimeout(() => progress.start(), delay)\n document.addEventListener('inertia:finish', (e) => finish(e, timeout), { once: true })\n}\n\nfunction handleProgressEvent(event: GlobalEvent<'progress'>): void {\n if (progress.isStarted() && event.detail.progress?.percentage) {\n progress.set(Math.max(progress.getStatus()!, (event.detail.progress.percentage / 100) * 0.9))\n }\n}\n\nfunction finish(event: GlobalEvent<'finish'>, timeout: NodeJS.Timeout): void {\n clearTimeout(timeout!)\n\n if (!progress.isStarted()) {\n return\n }\n\n if (event.detail.visit.completed) {\n progress.finish()\n } else if (event.detail.visit.interrupted) {\n progress.reset()\n } else if (event.detail.visit.cancelled) {\n progress.remove()\n }\n}\n\nexport default function setupProgress({\n delay = 250,\n color = '#29d',\n includeCSS = true,\n showSpinner = false,\n} = {}): void {\n addEventListeners(delay)\n ProgressComponent.configure({ showSpinner, includeCSS, color })\n}\n" }, { "path": "packages/core/src/queue.ts", "content": "export default class Queue<T> {\n protected items: (() => T)[] = []\n protected processingPromise: Promise<void> | null = null\n\n public add(item: () => T) {\n this.items.push(item)\n return this.process()\n }\n\n public process() {\n this.processingPromise ??= this.processNext().finally(() => {\n this.processingPromise = null\n })\n\n return this.processingPromise\n }\n\n protected processNext(): Promise<void> {\n const next = this.items.shift()\n\n if (next) {\n return Promise.resolve(next()).then(() => this.processNext())\n }\n\n return Promise.resolve()\n }\n}\n" }, { "path": "packages/core/src/request.ts", "content": "import { type AxiosProgressEvent, type AxiosRequestConfig, default as axios } from 'axios'\nimport { fireExceptionEvent, fireFinishEvent, firePrefetchingEvent, fireProgressEvent, fireStartEvent } from './events'\nimport { page as currentPage } from './page'\nimport { RequestParams } from './requestParams'\nimport { Response } from './response'\nimport type { ActiveVisit, Page } from './types'\nimport { urlWithoutHash } from './url'\n\nexport class Request {\n protected response!: Response\n protected cancelToken!: AbortController\n protected requestParams: RequestParams\n protected requestHasFinished = false\n\n constructor(\n params: ActiveVisit,\n protected page: Page,\n ) {\n this.requestParams = RequestParams.create(params)\n this.cancelToken = new AbortController()\n }\n\n public static create(params: ActiveVisit, page: Page): Request {\n return new Request(params, page)\n }\n\n public isPrefetch(): boolean {\n return this.requestParams.isPrefetch()\n }\n\n public async send() {\n this.requestParams.onCancelToken(() => this.cancel({ cancelled: true }))\n\n fireStartEvent(this.requestParams.all())\n this.requestParams.onStart()\n\n if (this.requestParams.all().prefetch) {\n this.requestParams.onPrefetching()\n firePrefetchingEvent(this.requestParams.all())\n }\n\n // We capture this up here because the response\n // will clear the prefetch flag so it can use it\n // as a regular response once the prefetch is done\n const originallyPrefetch = this.requestParams.all().prefetch\n\n return axios({\n method: this.requestParams.all().method,\n url: urlWithoutHash(this.requestParams.all().url).href,\n data: this.requestParams.data(),\n params: this.requestParams.queryParams(),\n signal: this.cancelToken.signal,\n headers: this.getHeaders(),\n onUploadProgress: this.onProgress.bind(this),\n // Why text? This allows us to delay JSON.parse until we're ready to use the response,\n // helps with performance particularly on large responses + history encryption\n responseType: 'text',\n })\n .then((response) => {\n this.response = Response.create(this.requestParams, response, this.page)\n\n return this.response.handle()\n })\n .catch((error) => {\n if (error?.response) {\n this.response = Response.create(this.requestParams, error.response, this.page)\n\n return this.response.handle()\n }\n\n return Promise.reject(error)\n })\n .catch((error) => {\n if (axios.isCancel(error)) {\n return\n }\n\n if (fireExceptionEvent(error)) {\n if (originallyPrefetch) {\n this.requestParams.onPrefetchError(error)\n }\n\n return Promise.reject(error)\n }\n })\n .finally(() => {\n this.finish()\n\n if (originallyPrefetch && this.response) {\n this.requestParams.onPrefetchResponse(this.response)\n }\n })\n }\n\n protected finish(): void {\n if (this.requestParams.wasCancelledAtAll()) {\n return\n }\n\n this.requestParams.markAsFinished()\n this.fireFinishEvents()\n }\n\n protected fireFinishEvents(): void {\n if (this.requestHasFinished) {\n // This could be called from multiple places, don't let it re-fire\n return\n }\n\n this.requestHasFinished = true\n\n fireFinishEvent(this.requestParams.all())\n this.requestParams.onFinish()\n }\n\n public cancel({ cancelled = false, interrupted = false }: { cancelled?: boolean; interrupted?: boolean }): void {\n if (this.requestHasFinished) {\n // If the request has already finished, there's no need to cancel it\n return\n }\n\n this.cancelToken.abort()\n\n this.requestParams.markAsCancelled({ cancelled, interrupted })\n\n this.fireFinishEvents()\n }\n\n protected onProgress(progress: AxiosProgressEvent): void {\n if (this.requestParams.data() instanceof FormData) {\n progress.percentage = progress.progress ? Math.round(progress.progress * 100) : 0\n fireProgressEvent(progress)\n this.requestParams.all().onProgress(progress)\n }\n }\n\n protected getHeaders(): AxiosRequestConfig['headers'] {\n const headers: AxiosRequestConfig['headers'] = {\n ...this.requestParams.headers(),\n Accept: 'text/html, application/xhtml+xml',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-Inertia': true,\n }\n\n const page = currentPage.get()\n\n if (page.version) {\n headers['X-Inertia-Version'] = page.version\n }\n\n const onceProps = Object.entries(page.onceProps || {})\n .filter(([, onceProp]) => {\n if (page.props[onceProp.prop] === undefined) {\n // The prop could deferred and not be loaded yet\n return false\n }\n\n return !onceProp.expiresAt || onceProp.expiresAt > Date.now()\n })\n .map(([key]) => key)\n\n if (onceProps.length > 0) {\n headers['X-Inertia-Except-Once-Props'] = onceProps.join(',')\n }\n\n return headers\n }\n}\n" }, { "path": "packages/core/src/requestParams.ts", "content": "import { AxiosRequestConfig } from 'axios'\nimport { page as currentPage } from './page'\nimport { Response } from './response'\nimport { ActiveVisit, InternalActiveVisit, Page, PreserveStateOption, VisitCallbacks } from './types'\n\nexport class RequestParams {\n protected callbacks: {\n name: keyof VisitCallbacks\n args: any[]\n }[] = []\n\n protected params: InternalActiveVisit\n\n constructor(params: InternalActiveVisit) {\n if (!params.prefetch) {\n this.params = params\n } else {\n const wrappedCallbacks: Record<keyof VisitCallbacks, () => any> = {\n onBefore: this.wrapCallback(params, 'onBefore'),\n onBeforeUpdate: this.wrapCallback(params, 'onBeforeUpdate'),\n onStart: this.wrapCallback(params, 'onStart'),\n onProgress: this.wrapCallback(params, 'onProgress'),\n onFinish: this.wrapCallback(params, 'onFinish'),\n onCancel: this.wrapCallback(params, 'onCancel'),\n onSuccess: this.wrapCallback(params, 'onSuccess'),\n onError: this.wrapCallback(params, 'onError'),\n onFlash: this.wrapCallback(params, 'onFlash'),\n onCancelToken: this.wrapCallback(params, 'onCancelToken'),\n onPrefetched: this.wrapCallback(params, 'onPrefetched'),\n onPrefetching: this.wrapCallback(params, 'onPrefetching'),\n }\n\n this.params = {\n ...params,\n ...wrappedCallbacks,\n onPrefetchResponse: params.onPrefetchResponse || (() => {}),\n onPrefetchError: params.onPrefetchError || (() => {}),\n }\n }\n //\n }\n\n public static create(params: ActiveVisit): RequestParams {\n return new RequestParams(params)\n }\n\n public data() {\n return this.params.method === 'get' ? null : this.params.data\n }\n\n public queryParams() {\n return this.params.method === 'get' ? this.params.data : {}\n }\n\n public isPartial() {\n return this.params.only.length > 0 || this.params.except.length > 0 || this.params.reset.length > 0\n }\n\n public isPrefetch(): boolean {\n return this.params.prefetch === true\n }\n\n public isDeferredPropsRequest() {\n return this.params.deferredProps === true\n }\n\n public onCancelToken(cb: VoidFunction) {\n this.params.onCancelToken({\n cancel: cb,\n })\n }\n\n public markAsFinished() {\n this.params.completed = true\n this.params.cancelled = false\n this.params.interrupted = false\n }\n\n public markAsCancelled({ cancelled = true, interrupted = false }) {\n this.params.onCancel()\n\n this.params.completed = false\n this.params.cancelled = cancelled\n this.params.interrupted = interrupted\n }\n\n public wasCancelledAtAll() {\n return this.params.cancelled || this.params.interrupted\n }\n\n public onFinish() {\n this.params.onFinish(this.params)\n }\n\n public onStart() {\n this.params.onStart(this.params)\n }\n\n public onPrefetching() {\n this.params.onPrefetching(this.params)\n }\n\n public onPrefetchResponse(response: Response) {\n if (this.params.onPrefetchResponse) {\n this.params.onPrefetchResponse(response)\n }\n }\n\n public onPrefetchError(error: Error) {\n if (this.params.onPrefetchError) {\n this.params.onPrefetchError(error)\n }\n }\n\n public all() {\n return this.params\n }\n\n public headers(): AxiosRequestConfig['headers'] {\n const headers: AxiosRequestConfig['headers'] = {\n ...this.params.headers,\n }\n\n if (this.isPartial()) {\n headers['X-Inertia-Partial-Component'] = currentPage.get().component\n }\n\n const only = this.params.only.concat(this.params.reset)\n\n if (only.length > 0) {\n headers['X-Inertia-Partial-Data'] = only.join(',')\n }\n\n if (this.params.except.length > 0) {\n headers['X-Inertia-Partial-Except'] = this.params.except.join(',')\n }\n\n if (this.params.reset.length > 0) {\n headers['X-Inertia-Reset'] = this.params.reset.join(',')\n }\n\n if (this.params.errorBag && this.params.errorBag.length > 0) {\n headers['X-Inertia-Error-Bag'] = this.params.errorBag\n }\n\n return headers\n }\n\n public setPreserveOptions(page: Page) {\n this.params.preserveScroll = RequestParams.resolvePreserveOption(this.params.preserveScroll, page)\n this.params.preserveState = RequestParams.resolvePreserveOption(this.params.preserveState, page)\n }\n\n public runCallbacks() {\n this.callbacks.forEach(({ name, args }) => {\n // @ts-ignore\n this.params[name](...args)\n })\n }\n\n public merge(toMerge: Partial<ActiveVisit>) {\n this.params = {\n ...this.params,\n ...toMerge,\n }\n }\n\n protected wrapCallback(params: ActiveVisit, name: keyof VisitCallbacks) {\n // @ts-ignore\n return (...args) => {\n this.recordCallback(name, args)\n // @ts-ignore\n params[name](...args)\n }\n }\n\n protected recordCallback(name: keyof VisitCallbacks, args: any[]) {\n this.callbacks.push({ name, args })\n }\n\n public static resolvePreserveOption(value: PreserveStateOption, page: Page): boolean {\n if (typeof value === 'function') {\n return value(page)\n }\n\n if (value === 'errors') {\n return Object.keys(page.props.errors || {}).length > 0\n }\n\n return value\n }\n}\n" }, { "path": "packages/core/src/requestStream.ts", "content": "import { Request } from './request'\n\nexport class RequestStream {\n protected requests: Request[] = []\n\n protected maxConcurrent: number\n\n protected interruptible: boolean\n\n constructor({ maxConcurrent, interruptible }: { maxConcurrent: number; interruptible: boolean }) {\n this.maxConcurrent = maxConcurrent\n this.interruptible = interruptible\n }\n\n public send(request: Request) {\n this.requests.push(request)\n\n request.send().finally(() => {\n this.requests = this.requests.filter((r) => r !== request)\n })\n }\n\n public interruptInFlight(): void {\n this.cancel({ interrupted: true }, false)\n }\n\n public cancelInFlight({ prefetch = true } = {}): void {\n this.requests\n .filter((request) => prefetch || !request.isPrefetch())\n .forEach((request) => request.cancel({ cancelled: true }))\n }\n\n protected cancel({ cancelled = false, interrupted = false } = {}, force: boolean = false): void {\n if (!force && !this.shouldCancel()) {\n return\n }\n\n const request = this.requests.shift()!\n\n request?.cancel({ cancelled, interrupted })\n }\n\n protected shouldCancel(): boolean {\n return this.interruptible && this.requests.length >= this.maxConcurrent\n }\n}\n" }, { "path": "packages/core/src/resetFormFields.ts", "content": "export const FormComponentResetSymbol = Symbol('FormComponentReset')\n\ntype FormElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n\nfunction isFormElement(element: Element): element is FormElement {\n return (\n element instanceof HTMLInputElement ||\n element instanceof HTMLSelectElement ||\n element instanceof HTMLTextAreaElement\n )\n}\n\nfunction resetInputElement(input: HTMLInputElement, defaultValues: FormDataEntryValue[]): boolean {\n const oldValue = input.value\n const oldChecked = input.checked\n\n switch (input.type.toLowerCase()) {\n case 'checkbox':\n // For checkboxes, check if the input's value is in the array of default values\n input.checked = defaultValues.includes(input.value)\n break\n case 'radio':\n // For radios, only use the first default value to avoid multiple radios being checked\n input.checked = defaultValues[0] === input.value\n break\n case 'file':\n input.value = ''\n break\n case 'button':\n case 'submit':\n case 'reset':\n case 'image':\n // These input types don't carry form state\n break\n default:\n // text, email, number, date, etc. - use first default value\n input.value = defaultValues[0] !== null && defaultValues[0] !== undefined ? String(defaultValues[0]) : ''\n }\n\n // Return true if the value actually changed\n return input.value !== oldValue || input.checked !== oldChecked\n}\n\nfunction resetSelectElement(select: HTMLSelectElement, defaultValues: FormDataEntryValue[]): boolean {\n const oldValue = select.value\n const oldSelectedOptions = Array.from(select.selectedOptions).map((opt) => opt.value)\n\n if (select.multiple) {\n // For multi-select, select all options that match any of the default values\n const defaultStrings = defaultValues.map((value) => String(value))\n\n Array.from(select.options).forEach((option) => {\n option.selected = defaultStrings.includes(option.value)\n })\n } else {\n // For single select, use the first default value (or empty string)\n select.value = defaultValues[0] !== undefined ? String(defaultValues[0]) : ''\n }\n\n // Check if selection actually changed\n const newSelectedOptions = Array.from(select.selectedOptions).map((opt) => opt.value)\n const hasChanged = select.multiple\n ? JSON.stringify(oldSelectedOptions.sort()) !== JSON.stringify(newSelectedOptions.sort())\n : select.value !== oldValue\n\n return hasChanged\n}\n\nfunction resetFormElement(element: FormElement, defaultValues: FormDataEntryValue[]): boolean {\n if (element.disabled) {\n // For disabled elements, use their DOM defaultValue since they're not in FormData\n if (element instanceof HTMLInputElement) {\n const oldValue = element.value\n const oldChecked = element.checked\n\n switch (element.type.toLowerCase()) {\n case 'checkbox':\n case 'radio':\n element.checked = element.defaultChecked\n return element.checked !== oldChecked\n case 'file':\n element.value = ''\n return oldValue !== ''\n case 'button':\n case 'submit':\n case 'reset':\n case 'image':\n // These input types don't carry form state\n return false\n default:\n element.value = element.defaultValue\n return element.value !== oldValue\n }\n } else if (element instanceof HTMLSelectElement) {\n // Reset select to default selected options\n const oldSelectedOptions = Array.from(element.selectedOptions).map((opt) => opt.value)\n\n Array.from(element.options).forEach((option) => {\n option.selected = option.defaultSelected\n })\n\n const newSelectedOptions = Array.from(element.selectedOptions).map((opt) => opt.value)\n return JSON.stringify(oldSelectedOptions.sort()) !== JSON.stringify(newSelectedOptions.sort())\n } else if (element instanceof HTMLTextAreaElement) {\n const oldValue = element.value\n element.value = element.defaultValue\n return element.value !== oldValue\n }\n\n return false\n }\n\n if (element instanceof HTMLInputElement) {\n // Pass all default values to handle checkboxes and radios correctly\n return resetInputElement(element, defaultValues)\n } else if (element instanceof HTMLSelectElement) {\n return resetSelectElement(element, defaultValues)\n } else if (element instanceof HTMLTextAreaElement) {\n const oldValue = element.value\n element.value = defaultValues[0] !== undefined ? String(defaultValues[0]) : ''\n return element.value !== oldValue\n }\n\n return false\n}\n\nfunction resetFieldElements(\n elements: Element | RadioNodeList | HTMLCollection,\n defaultValues: FormDataEntryValue[],\n): boolean {\n let hasChanged = false\n\n if (elements instanceof RadioNodeList || elements instanceof HTMLCollection) {\n // Handle multiple elements with the same name (e.g., radio buttons, checkboxes, array fields)\n Array.from(elements).forEach((node, index) => {\n if (node instanceof Element && isFormElement(node)) {\n if (node instanceof HTMLInputElement && ['checkbox', 'radio'].includes(node.type.toLowerCase())) {\n // For checkboxes and radios, pass all default values for value-based matching\n if (resetFormElement(node, defaultValues)) {\n hasChanged = true\n }\n } else {\n // For other array elements (like text inputs), use index-based matching\n const indexedDefaultValues =\n defaultValues[index] !== undefined ? [defaultValues[index]] : [defaultValues[0] ?? null].filter(Boolean)\n\n if (resetFormElement(node, indexedDefaultValues)) {\n hasChanged = true\n }\n }\n }\n })\n } else if (isFormElement(elements)) {\n // Handle single element - pass all default values (important for multi-selects)\n hasChanged = resetFormElement(elements, defaultValues)\n }\n\n return hasChanged\n}\n\nexport function resetFormFields(formElement: HTMLFormElement, defaults: FormData, fieldNames?: string[]): void {\n if (!formElement) {\n return\n }\n\n const resetEntireForm = !fieldNames || fieldNames.length === 0\n\n // If no specific fields provided, reset the entire form\n if (resetEntireForm) {\n // Get all field names from both defaults and form elements (including disabled ones)\n const formData = new FormData(formElement)\n const formElementNames = Array.from(formElement.elements)\n .map((el) => (isFormElement(el) ? el.name : ''))\n .filter(Boolean)\n fieldNames = [...new Set([...defaults.keys(), ...formData.keys(), ...formElementNames])]\n }\n\n let hasChanged = false\n\n fieldNames!.forEach((fieldName) => {\n const elements = formElement.elements.namedItem(fieldName)\n\n if (elements) {\n if (resetFieldElements(elements, defaults.getAll(fieldName))) {\n hasChanged = true\n }\n }\n })\n\n // Dispatch reset event to notify listeners that the form was reset programmatically\n if (hasChanged && resetEntireForm) {\n // Use Symbol in detail so adapters can preventDefault() to avoid Firefox's native reset behavior\n formElement.dispatchEvent(\n new CustomEvent('reset', { bubbles: true, cancelable: true, detail: { [FormComponentResetSymbol]: true } }),\n )\n }\n}\n" }, { "path": "packages/core/src/response.ts", "content": "import { AxiosResponse } from 'axios'\nimport { get, isEqual, set } from 'lodash-es'\nimport { config, router } from '.'\nimport dialog from './dialog'\nimport {\n fireBeforeUpdateEvent,\n fireErrorEvent,\n fireFlashEvent,\n fireInvalidEvent,\n firePrefetchedEvent,\n fireSuccessEvent,\n} from './events'\nimport { history } from './history'\nimport modal from './modal'\nimport { page as currentPage } from './page'\nimport Queue from './queue'\nimport { RequestParams } from './requestParams'\nimport { SessionStorage } from './sessionStorage'\nimport { ActiveVisit, ErrorBag, Errors, Page } from './types'\nimport { hrefToUrl, isSameUrlWithoutHash, setHashIfSameUrl } from './url'\n\nconst queue = new Queue<Promise<boolean | void>>()\n\nexport class Response {\n protected wasPrefetched = false\n\n constructor(\n protected requestParams: RequestParams,\n protected response: AxiosResponse,\n protected originatingPage: Page,\n ) {}\n\n public static create(params: RequestParams, response: AxiosResponse, originatingPage: Page): Response {\n return new Response(params, response, originatingPage)\n }\n\n public async handlePrefetch() {\n if (isSameUrlWithoutHash(this.requestParams.all().url, window.location)) {\n this.handle()\n }\n }\n\n public async handle() {\n return queue.add(() => this.process())\n }\n\n public async process() {\n if (this.requestParams.all().prefetch) {\n this.wasPrefetched = true\n this.requestParams.all().prefetch = false\n\n this.requestParams.all().onPrefetched(this.response, this.requestParams.all())\n firePrefetchedEvent(this.response, this.requestParams.all())\n\n return Promise.resolve()\n }\n\n this.requestParams.runCallbacks()\n\n if (!this.isInertiaResponse()) {\n return this.handleNonInertiaResponse()\n }\n\n await history.processQueue()\n\n history.preserveUrl = this.requestParams.all().preserveUrl\n\n await this.setPage()\n\n const errors = currentPage.get().props.errors || {}\n\n if (Object.keys(errors).length > 0) {\n const scopedErrors = this.getScopedErrors(errors)\n\n fireErrorEvent(scopedErrors)\n\n return this.requestParams.all().onError(scopedErrors)\n }\n\n router.flushByCacheTags(this.requestParams.all().invalidateCacheTags || [])\n\n if (!this.wasPrefetched) {\n // We end up here other than from the prefetch cache, so we assume this response is\n // never than the cached one and therefore flush the cache.\n router.flush(currentPage.get().url)\n }\n\n const { flash } = currentPage.get()\n\n if (Object.keys(flash).length > 0 && !this.requestParams.isDeferredPropsRequest()) {\n fireFlashEvent(flash)\n this.requestParams.all().onFlash(flash)\n }\n\n fireSuccessEvent(currentPage.get())\n\n await this.requestParams.all().onSuccess(currentPage.get())\n\n history.preserveUrl = false\n }\n\n public mergeParams(params: ActiveVisit) {\n this.requestParams.merge(params)\n }\n\n public getPageResponse(): Page {\n const data = this.getDataFromResponse(this.response.data)\n\n // Only spread if data is an object (not a string like HTML error pages)\n if (typeof data === 'object') {\n return (this.response.data = { ...data, flash: data.flash ?? {} })\n }\n\n return (this.response.data = data)\n }\n\n protected async handleNonInertiaResponse() {\n if (this.isLocationVisit()) {\n const locationUrl = hrefToUrl(this.getHeader('x-inertia-location'))\n\n setHashIfSameUrl(this.requestParams.all().url, locationUrl)\n\n return this.locationVisit(locationUrl)\n }\n\n const response = {\n ...this.response,\n data: this.getDataFromResponse(this.response.data),\n }\n\n if (fireInvalidEvent(response)) {\n return config.get('future.useDialogForErrorModal') ? dialog.show(response.data) : modal.show(response.data)\n }\n }\n\n protected isInertiaResponse(): boolean {\n return this.hasHeader('x-inertia')\n }\n\n protected hasStatus(status: number): boolean {\n return this.response.status === status\n }\n\n protected getHeader(header: string): string {\n return this.response.headers[header]\n }\n\n protected hasHeader(header: string): boolean {\n return this.getHeader(header) !== undefined\n }\n\n protected isLocationVisit(): boolean {\n return this.hasStatus(409) && this.hasHeader('x-inertia-location')\n }\n\n /**\n * @link https://inertiajs.com/redirects#external-redirects\n */\n protected locationVisit(url: URL): boolean | void {\n try {\n SessionStorage.set(SessionStorage.locationVisitKey, {\n preserveScroll: this.requestParams.all().preserveScroll === true,\n })\n\n if (typeof window === 'undefined') {\n return\n }\n\n if (isSameUrlWithoutHash(window.location, url)) {\n window.location.reload()\n } else {\n window.location.href = url.href\n }\n } catch (error) {\n return false\n }\n }\n\n protected async setPage(): Promise<void> {\n const pageResponse = this.getPageResponse()\n\n if (!this.shouldSetPage(pageResponse)) {\n return Promise.resolve()\n }\n\n this.mergeProps(pageResponse)\n currentPage.mergeOncePropsIntoResponse(pageResponse)\n this.preserveEqualProps(pageResponse)\n\n await this.setRememberedState(pageResponse)\n\n this.requestParams.setPreserveOptions(pageResponse)\n\n pageResponse.url = history.preserveUrl ? currentPage.get().url : this.pageUrl(pageResponse)\n\n this.requestParams.all().onBeforeUpdate(pageResponse)\n fireBeforeUpdateEvent(pageResponse)\n\n return currentPage.set(pageResponse, {\n replace: this.requestParams.all().replace,\n preserveScroll: this.requestParams.all().preserveScroll as boolean,\n preserveState: this.requestParams.all().preserveState as boolean,\n viewTransition: this.requestParams.all().viewTransition,\n })\n }\n\n protected getDataFromResponse(response: any): any {\n if (typeof response !== 'string') {\n return response\n }\n\n try {\n return JSON.parse(response)\n } catch (error) {\n return response\n }\n }\n\n protected shouldSetPage(pageResponse: Page): boolean {\n if (!this.requestParams.all().async) {\n // If the request is sync, we should always set the page\n return true\n }\n\n if (this.originatingPage.component !== pageResponse.component) {\n // We originated from a component but the response re-directed us,\n // we should respect the redirection and set the page\n return true\n }\n\n // At this point, if the originating request component is different than the current component,\n // the user has since navigated and we should discard the response\n if (this.originatingPage.component !== currentPage.get().component) {\n return false\n }\n\n const originatingUrl = hrefToUrl(this.originatingPage.url)\n const currentPageUrl = hrefToUrl(currentPage.get().url)\n\n // We have the same component, let's double-check the URL\n // If we're no longer on the same path name (e.g. /users/1 -> /users/2), we should not set the page\n return originatingUrl.origin === currentPageUrl.origin && originatingUrl.pathname === currentPageUrl.pathname\n }\n\n protected pageUrl(pageResponse: Page) {\n const responseUrl = hrefToUrl(pageResponse.url)\n\n setHashIfSameUrl(this.requestParams.all().url, responseUrl)\n\n return responseUrl.pathname + responseUrl.search + responseUrl.hash\n }\n\n protected preserveEqualProps(pageResponse: Page): void {\n if (pageResponse.component !== currentPage.get().component || config.get('future.preserveEqualProps') !== true) {\n return\n }\n\n const currentPageProps = currentPage.get().props\n\n Object.entries(pageResponse.props).forEach(([key, value]) => {\n if (isEqual(value, currentPageProps[key])) {\n pageResponse.props[key] = currentPageProps[key]\n }\n })\n }\n\n protected mergeProps(pageResponse: Page): void {\n if (!this.requestParams.isPartial() || pageResponse.component !== currentPage.get().component) {\n return\n }\n\n const propsToAppend = pageResponse.mergeProps || []\n const propsToPrepend = pageResponse.prependProps || []\n const propsToDeepMerge = pageResponse.deepMergeProps || []\n const matchPropsOn = pageResponse.matchPropsOn || []\n\n const mergeProp = (prop: string, shouldAppend: boolean) => {\n const currentProp = get(currentPage.get().props, prop)\n const incomingProp = get(pageResponse.props, prop)\n\n if (Array.isArray(incomingProp)) {\n const newArray = this.mergeOrMatchItems(\n (currentProp || []) as any[],\n incomingProp,\n prop,\n matchPropsOn,\n shouldAppend,\n )\n\n set(pageResponse.props, prop, newArray)\n } else if (typeof incomingProp === 'object' && incomingProp !== null) {\n const newObject = {\n ...(currentProp || {}),\n ...incomingProp,\n }\n\n set(pageResponse.props, prop, newObject)\n }\n }\n\n propsToAppend.forEach((prop) => mergeProp(prop, true))\n propsToPrepend.forEach((prop) => mergeProp(prop, false))\n\n propsToDeepMerge.forEach((prop) => {\n const currentProp = currentPage.get().props[prop]\n const incomingProp = pageResponse.props[prop]\n\n // Function to recursively merge objects and arrays\n const deepMerge = (target: any, source: any, matchProp: string) => {\n if (Array.isArray(source)) {\n return this.mergeOrMatchItems(target, source, matchProp, matchPropsOn)\n }\n\n if (typeof source === 'object' && source !== null) {\n // Merge objects by iterating over keys\n return Object.keys(source).reduce(\n (acc, key) => {\n acc[key] = deepMerge(target ? target[key] : undefined, source[key], `${matchProp}.${key}`)\n return acc\n },\n { ...target },\n )\n }\n\n // If the source is neither an array nor an object, simply return the it\n return source\n }\n\n // Apply the deep merge and update the page response\n pageResponse.props[prop] = deepMerge(currentProp, incomingProp, prop)\n })\n\n pageResponse.props = { ...currentPage.get().props, ...pageResponse.props }\n\n if (this.requestParams.isDeferredPropsRequest()) {\n const currentErrors = currentPage.get().props.errors\n\n if (currentErrors && Object.keys(currentErrors).length > 0) {\n // Preserve existing errors during deferred props requests\n pageResponse.props.errors = currentErrors\n }\n }\n\n // Preserve the existing scrollProps\n if (currentPage.get().scrollProps) {\n pageResponse.scrollProps = {\n ...(currentPage.get().scrollProps || {}),\n ...(pageResponse.scrollProps || {}),\n }\n }\n\n // Preserve the existing onceProps\n if (currentPage.hasOnceProps()) {\n pageResponse.onceProps = {\n ...(currentPage.get().onceProps || {}),\n ...(pageResponse.onceProps || {}),\n }\n }\n\n // Preserve flash data and merge with new flash data on non-deferred requests\n pageResponse.flash = {\n ...currentPage.get().flash,\n ...(this.requestParams.isDeferredPropsRequest() ? {} : pageResponse.flash),\n }\n\n const currentOriginalDeferred = currentPage.get().initialDeferredProps\n if (currentOriginalDeferred && Object.keys(currentOriginalDeferred).length > 0) {\n pageResponse.initialDeferredProps = currentOriginalDeferred\n }\n }\n\n protected mergeOrMatchItems(\n existingItems: any[],\n newItems: any[],\n matchProp: string,\n matchPropsOn: string[],\n shouldAppend = true,\n ) {\n const items = Array.isArray(existingItems) ? existingItems : []\n\n // Find the matching key for this specific property path\n const matchingKey = matchPropsOn.find((key) => {\n const keyPath = key.split('.').slice(0, -1).join('.')\n\n return keyPath === matchProp\n })\n\n // If no matching key is configured, simply concatenate the arrays\n if (!matchingKey) {\n return shouldAppend ? [...items, ...newItems] : [...newItems, ...items]\n }\n\n // Extract the property name we'll use to match items (e.g., 'id' from 'users.data.id')\n const uniqueProperty = matchingKey.split('.').pop() || ''\n\n // Create a map of new items by their unique property lookups\n const newItemsMap = new Map()\n\n newItems.forEach((item) => {\n if (this.hasUniqueProperty(item, uniqueProperty)) {\n newItemsMap.set(item[uniqueProperty], item)\n }\n })\n\n return shouldAppend\n ? this.appendWithMatching(items, newItems, newItemsMap, uniqueProperty)\n : this.prependWithMatching(items, newItems, newItemsMap, uniqueProperty)\n }\n\n protected appendWithMatching(\n existingItems: any[],\n newItems: any[],\n newItemsMap: Map<any, any>,\n uniqueProperty: string,\n ): any[] {\n // Update existing items with new values, keep non-matching items\n const updatedExisting = existingItems.map((item) => {\n if (this.hasUniqueProperty(item, uniqueProperty) && newItemsMap.has(item[uniqueProperty])) {\n return newItemsMap.get(item[uniqueProperty])\n }\n\n return item\n })\n\n // Filter new items to only include those not already in existing items\n const newItemsToAdd = newItems.filter((item) => {\n if (!this.hasUniqueProperty(item, uniqueProperty)) {\n return true // Always add items without unique property\n }\n\n return !existingItems.some(\n (existing) =>\n this.hasUniqueProperty(existing, uniqueProperty) && existing[uniqueProperty] === item[uniqueProperty],\n )\n })\n\n return [...updatedExisting, ...newItemsToAdd]\n }\n\n protected prependWithMatching(\n existingItems: any[],\n newItems: any[],\n newItemsMap: Map<any, any>,\n uniqueProperty: string,\n ): any[] {\n // Filter existing items, keeping only those not being updated\n const untouchedExisting = existingItems.filter((item) => {\n if (this.hasUniqueProperty(item, uniqueProperty)) {\n return !newItemsMap.has(item[uniqueProperty])\n }\n\n return true\n })\n\n return [...newItems, ...untouchedExisting]\n }\n\n protected hasUniqueProperty(item: any, property: string): boolean {\n return item && typeof item === 'object' && property in item\n }\n\n protected async setRememberedState(pageResponse: Page): Promise<void> {\n const rememberedState = await history.getState<Page['rememberedState']>(history.rememberedState, {})\n\n if (\n this.requestParams.all().preserveState &&\n rememberedState &&\n pageResponse.component === currentPage.get().component\n ) {\n pageResponse.rememberedState = rememberedState\n }\n }\n\n protected getScopedErrors(errors: Errors & ErrorBag): Errors {\n if (!this.requestParams.all().errorBag) {\n return errors\n }\n\n return errors[this.requestParams.all().errorBag || ''] || {}\n }\n}\n" }, { "path": "packages/core/src/router.ts", "content": "import { cloneDeep, get, set } from 'lodash-es'\nimport { progress } from '.'\nimport { config } from './config'\nimport { eventHandler } from './eventHandler'\nimport { fireBeforeEvent, fireFlashEvent } from './events'\nimport { history } from './history'\nimport { InitialVisit } from './initialVisit'\nimport { page as currentPage } from './page'\nimport { polls } from './polls'\nimport { prefetchedRequests } from './prefetched'\nimport Queue from './queue'\nimport { Request } from './request'\nimport { RequestParams } from './requestParams'\nimport { RequestStream } from './requestStream'\nimport { Scroll } from './scroll'\nimport {\n ActiveVisit,\n ClientSideVisitOptions,\n Component,\n FlashData,\n GlobalEvent,\n GlobalEventNames,\n GlobalEventResult,\n InFlightPrefetch,\n Method,\n Page,\n PageFlashData,\n PendingVisit,\n PendingVisitOptions,\n PollOptions,\n PrefetchedResponse,\n PrefetchOptions,\n ReloadOptions,\n RequestPayload,\n RouterInitParams,\n UrlMethodPair,\n Visit,\n VisitCallbacks,\n VisitHelperOptions,\n VisitOptions,\n} from './types'\nimport {\n hrefToUrl,\n isSameUrlWithoutHash,\n isSameUrlWithoutQueryOrHash,\n isUrlMethodPair,\n transformUrlAndData,\n} from './url'\n\nexport class Router {\n protected syncRequestStream = new RequestStream({\n maxConcurrent: 1,\n interruptible: true,\n })\n\n protected asyncRequestStream = new RequestStream({\n maxConcurrent: Infinity,\n interruptible: false,\n })\n\n protected clientVisitQueue = new Queue<Promise<void>>()\n\n public init<ComponentType = Component>({\n initialPage,\n resolveComponent,\n swapComponent,\n onFlash,\n }: RouterInitParams<ComponentType>): void {\n currentPage.init({\n initialPage,\n resolveComponent,\n swapComponent,\n onFlash,\n })\n\n InitialVisit.handle()\n\n eventHandler.init()\n\n eventHandler.on('missingHistoryItem', () => {\n if (typeof window !== 'undefined') {\n this.visit(window.location.href, { preserveState: true, preserveScroll: true, replace: true })\n }\n })\n\n eventHandler.on('loadDeferredProps', (deferredProps: Page['deferredProps']) => {\n this.loadDeferredProps(deferredProps)\n })\n\n eventHandler.on('historyQuotaExceeded', (url) => {\n window.location.href = url\n })\n }\n\n public get<T extends RequestPayload = RequestPayload>(\n url: URL | string | UrlMethodPair,\n data: T = {} as T,\n options: VisitHelperOptions<T> = {},\n ): void {\n return this.visit(url, { ...options, method: 'get', data })\n }\n\n public post<T extends RequestPayload = RequestPayload>(\n url: URL | string | UrlMethodPair,\n data: T = {} as T,\n options: VisitHelperOptions<T> = {},\n ): void {\n return this.visit(url, { preserveState: true, ...options, method: 'post', data })\n }\n\n public put<T extends RequestPayload = RequestPayload>(\n url: URL | string | UrlMethodPair,\n data: T = {} as T,\n options: VisitHelperOptions<T> = {},\n ): void {\n return this.visit(url, { preserveState: true, ...options, method: 'put', data })\n }\n\n public patch<T extends RequestPayload = RequestPayload>(\n url: URL | string | UrlMethodPair,\n data: T = {} as T,\n options: VisitHelperOptions<T> = {},\n ): void {\n return this.visit(url, { preserveState: true, ...options, method: 'patch', data })\n }\n\n public delete<T extends RequestPayload = RequestPayload>(\n url: URL | string | UrlMethodPair,\n options: Omit<VisitOptions<T>, 'method'> = {},\n ): void {\n return this.visit(url, { preserveState: true, ...options, method: 'delete' })\n }\n\n public reload<T extends RequestPayload = RequestPayload>(options: ReloadOptions<T> = {}): void {\n return this.doReload(options)\n }\n\n protected doReload<T extends RequestPayload = RequestPayload>(\n options: ReloadOptions<T> & {\n deferredProps?: boolean\n } = {},\n ): void {\n if (typeof window === 'undefined') {\n return\n }\n\n return this.visit(window.location.href, {\n ...options,\n preserveScroll: true,\n preserveState: true,\n async: true,\n headers: {\n ...(options.headers || {}),\n 'Cache-Control': 'no-cache',\n },\n })\n }\n\n public remember(data: unknown, key = 'default'): void {\n history.remember(data, key)\n }\n\n public restore<T = unknown>(key = 'default'): T | undefined {\n return history.restore(key) as T | undefined\n }\n\n public on<TEventName extends GlobalEventNames>(\n type: TEventName,\n callback: (event: GlobalEvent<TEventName>) => GlobalEventResult<TEventName>,\n ): VoidFunction {\n if (typeof window === 'undefined') {\n return () => {}\n }\n\n return eventHandler.onGlobalEvent(type, callback)\n }\n\n /**\n * @deprecated Use cancelAll() instead.\n */\n public cancel(): void {\n this.syncRequestStream.cancelInFlight()\n }\n\n public cancelAll({ async = true, prefetch = true, sync = true } = {}): void {\n if (async) {\n this.asyncRequestStream.cancelInFlight({ prefetch })\n }\n\n if (sync) {\n this.syncRequestStream.cancelInFlight()\n }\n }\n\n public poll(interval: number, requestOptions: ReloadOptions = {}, options: PollOptions = {}) {\n return polls.add(interval, () => this.reload(requestOptions), {\n autoStart: options.autoStart ?? true,\n keepAlive: options.keepAlive ?? false,\n })\n }\n\n public visit<T extends RequestPayload = RequestPayload>(\n href: string | URL | UrlMethodPair,\n options: VisitOptions<T> = {},\n ): void {\n const visit: PendingVisit = this.getPendingVisit(href, {\n ...options,\n showProgress: options.showProgress ?? !options.async,\n } as VisitOptions)\n\n const events = this.getVisitEvents(options as VisitOptions)\n\n // If either of these return false, we don't want to continue\n if (events.onBefore(visit) === false || !fireBeforeEvent(visit)) {\n return\n }\n\n const currentPageUrl = hrefToUrl(currentPage.get().url)\n const isPartialReload = visit.only.length > 0 || visit.except.length > 0 || visit.reset.length > 0\n\n // For partial reloads, only compare the base URL (origin + pathname) to allow\n // concurrent requests with different query params to the same page\n const isSamePage = isPartialReload\n ? isSameUrlWithoutQueryOrHash(visit.url, currentPageUrl)\n : isSameUrlWithoutHash(visit.url, currentPageUrl)\n\n if (!isSamePage) {\n // Only cancel non-prefetch requests (deferred props + partial reloads)\n this.asyncRequestStream.cancelInFlight({ prefetch: false })\n }\n\n if (!visit.async) {\n this.syncRequestStream.interruptInFlight()\n }\n\n if (!currentPage.isCleared() && !visit.preserveUrl) {\n // Save scroll regions for the current page\n Scroll.save()\n }\n\n const requestParams: PendingVisit & VisitCallbacks = {\n ...visit,\n ...events,\n }\n\n const prefetched = prefetchedRequests.get(requestParams)\n\n if (prefetched) {\n progress.reveal(prefetched.inFlight)\n prefetchedRequests.use(prefetched, requestParams)\n } else {\n progress.reveal(true)\n const requestStream = visit.async ? this.asyncRequestStream : this.syncRequestStream\n requestStream.send(Request.create(requestParams, currentPage.get()))\n }\n }\n\n public getCached(\n href: string | URL | UrlMethodPair,\n options: VisitOptions = {},\n ): InFlightPrefetch | PrefetchedResponse | null {\n return prefetchedRequests.findCached(this.getPrefetchParams(href, options))\n }\n\n public flush(href: string | URL | UrlMethodPair, options: VisitOptions = {}): void {\n prefetchedRequests.remove(this.getPrefetchParams(href, options))\n }\n\n public flushAll(): void {\n prefetchedRequests.removeAll()\n }\n\n public flushByCacheTags(tags: string | string[]): void {\n prefetchedRequests.removeByTags(Array.isArray(tags) ? tags : [tags])\n }\n\n public getPrefetching(\n href: string | URL | UrlMethodPair,\n options: VisitOptions = {},\n ): InFlightPrefetch | PrefetchedResponse | null {\n return prefetchedRequests.findInFlight(this.getPrefetchParams(href, options))\n }\n\n public prefetch(\n href: string | URL | UrlMethodPair,\n options: VisitOptions = {},\n prefetchOptions: Partial<PrefetchOptions> = {},\n ) {\n const method: Method = options.method ?? (isUrlMethodPair(href) ? href.method : 'get')\n\n if (method !== 'get') {\n throw new Error('Prefetch requests must use the GET method')\n }\n\n const visit: PendingVisit = this.getPendingVisit(href, {\n ...options,\n async: true,\n showProgress: false,\n prefetch: true,\n viewTransition: false,\n })\n\n const visitUrl = visit.url.origin + visit.url.pathname + visit.url.search\n const currentUrl = window.location.origin + window.location.pathname + window.location.search\n\n if (visitUrl === currentUrl) {\n // Don't prefetch the current page, you're already on it\n return\n }\n\n const events = this.getVisitEvents(options)\n\n // If either of these return false, we don't want to continue\n if (events.onBefore(visit) === false || !fireBeforeEvent(visit)) {\n return\n }\n\n progress.hide()\n\n this.asyncRequestStream.interruptInFlight()\n\n const requestParams: PendingVisit & VisitCallbacks = {\n ...visit,\n ...events,\n }\n\n const ensureCurrentPageIsSet = (): Promise<void> => {\n return new Promise((resolve) => {\n const checkIfPageIsDefined = () => {\n if (currentPage.get()) {\n resolve()\n } else {\n setTimeout(checkIfPageIsDefined, 50)\n }\n }\n\n checkIfPageIsDefined()\n })\n }\n\n ensureCurrentPageIsSet().then(() => {\n prefetchedRequests.add(\n requestParams,\n (params) => {\n this.asyncRequestStream.send(Request.create(params, currentPage.get()))\n },\n {\n cacheFor: config.get('prefetch.cacheFor'),\n cacheTags: [],\n ...prefetchOptions,\n },\n )\n })\n }\n\n public clearHistory(): void {\n history.clear()\n }\n\n public decryptHistory(): Promise<Page> {\n return history.decrypt()\n }\n\n public resolveComponent(component: string): Promise<Component> {\n return currentPage.resolve(component)\n }\n\n public replace<TProps = Page['props']>(params: ClientSideVisitOptions<TProps>): void {\n this.clientVisit(params, { replace: true })\n }\n\n public replaceProp<TProps = Page['props']>(\n name: string,\n value: unknown | ((oldValue: unknown, props: TProps) => unknown),\n options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess'>,\n ): void {\n this.replace({\n preserveScroll: true,\n preserveState: true,\n props(currentProps) {\n const newValue = typeof value === 'function' ? value(get(currentProps, name), currentProps) : value\n\n return set(cloneDeep(currentProps), name, newValue)\n },\n ...(options || {}),\n })\n }\n\n public appendToProp<TProps = Page['props']>(\n name: string,\n value: unknown | unknown[] | ((oldValue: unknown, props: TProps) => unknown | unknown[]),\n options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess'>,\n ): void {\n this.replaceProp(\n name,\n (currentValue: unknown, currentProps: TProps) => {\n const newValue = typeof value === 'function' ? value(currentValue, currentProps) : value\n\n if (!Array.isArray(currentValue)) {\n currentValue = currentValue !== undefined ? [currentValue] : []\n }\n\n return [...(currentValue as unknown[]), newValue]\n },\n options,\n )\n }\n\n public prependToProp<TProps = Page['props']>(\n name: string,\n value: unknown | unknown[] | ((oldValue: unknown, props: TProps) => unknown | unknown[]),\n options?: Pick<ClientSideVisitOptions, 'onError' | 'onFinish' | 'onSuccess'>,\n ): void {\n this.replaceProp(\n name,\n (currentValue: unknown, currentProps: TProps) => {\n const newValue = typeof value === 'function' ? value(currentValue, currentProps) : value\n\n if (!Array.isArray(currentValue)) {\n currentValue = currentValue !== undefined ? [currentValue] : []\n }\n\n return [newValue, ...(currentValue as unknown[])]\n },\n options,\n )\n }\n\n public push<TProps = Page['props']>(params: ClientSideVisitOptions<TProps>): void {\n this.clientVisit(params)\n }\n\n public flash<TFlash extends PageFlashData = PageFlashData>(\n keyOrData: string | ((flash: FlashData) => TFlash) | TFlash,\n value?: unknown,\n ): void {\n const current = currentPage.get().flash\n let flash: PageFlashData\n\n if (typeof keyOrData === 'function') {\n flash = keyOrData(current)\n } else if (typeof keyOrData === 'string') {\n flash = { ...current, [keyOrData]: value }\n } else if (keyOrData && Object.keys(keyOrData).length) {\n flash = { ...current, ...keyOrData }\n } else {\n return\n }\n\n currentPage.setFlash(flash)\n\n if (Object.keys(flash).length) {\n fireFlashEvent(flash)\n }\n }\n\n protected clientVisit<TProps = Page['props']>(\n params: ClientSideVisitOptions<TProps>,\n { replace = false }: { replace?: boolean } = {},\n ): void {\n this.clientVisitQueue.add(() => this.performClientVisit(params, { replace }))\n }\n\n protected performClientVisit<TProps = Page['props']>(\n params: ClientSideVisitOptions<TProps>,\n { replace = false }: { replace?: boolean } = {},\n ): Promise<void> {\n const current = currentPage.get()\n\n const onceProps =\n typeof params.props === 'function'\n ? Object.fromEntries(\n Object.values(current.onceProps ?? {}).map((onceProp) => [onceProp.prop, current.props[onceProp.prop]]),\n )\n : {}\n\n const props =\n typeof params.props === 'function'\n ? params.props(current.props as TProps, onceProps as Partial<TProps>)\n : (params.props ?? current.props)\n\n const flash = typeof params.flash === 'function' ? params.flash(current.flash) : params.flash\n\n const { viewTransition, onError, onFinish, onFlash, onSuccess, ...pageParams } = params\n\n const page = {\n ...current,\n ...pageParams,\n flash: flash ?? {},\n props: props as Page['props'],\n }\n\n const preserveScroll = RequestParams.resolvePreserveOption(params.preserveScroll ?? false, page)\n const preserveState = RequestParams.resolvePreserveOption(params.preserveState ?? false, page)\n\n return currentPage\n .set(page, {\n replace,\n preserveScroll,\n preserveState,\n viewTransition,\n })\n .then(() => {\n const currentFlash = currentPage.get().flash\n\n if (Object.keys(currentFlash).length > 0) {\n fireFlashEvent(currentFlash)\n onFlash?.(currentFlash)\n }\n\n const errors = currentPage.get().props.errors || {}\n\n if (Object.keys(errors).length === 0) {\n onSuccess?.(currentPage.get())\n return\n }\n\n const scopedErrors = params.errorBag ? errors[params.errorBag || ''] || {} : errors\n\n onError?.(scopedErrors)\n })\n .finally(() => onFinish?.(params))\n }\n\n protected getPrefetchParams(href: string | URL | UrlMethodPair, options: VisitOptions): ActiveVisit {\n return {\n ...this.getPendingVisit(href, {\n ...options,\n async: true,\n showProgress: false,\n prefetch: true,\n viewTransition: false,\n }),\n ...this.getVisitEvents(options),\n }\n }\n\n protected getPendingVisit(\n href: string | URL | UrlMethodPair,\n options: VisitOptions,\n pendingVisitOptions: Partial<PendingVisitOptions> = {},\n ): PendingVisit {\n if (isUrlMethodPair(href)) {\n const urlMethodPair = href\n href = urlMethodPair.url\n options.method = options.method ?? urlMethodPair.method\n }\n\n const defaultVisitOptionsCallback = config.get('visitOptions')\n\n const configuredOptions = defaultVisitOptionsCallback\n ? defaultVisitOptionsCallback(href.toString(), cloneDeep(options)) || {}\n : {}\n\n const mergedOptions: Visit = {\n method: 'get',\n data: {},\n replace: false,\n preserveScroll: false,\n preserveState: false,\n only: [],\n except: [],\n headers: {},\n errorBag: '',\n forceFormData: false,\n queryStringArrayFormat: 'brackets',\n async: false,\n showProgress: true,\n fresh: false,\n reset: [],\n preserveUrl: false,\n prefetch: false,\n invalidateCacheTags: [],\n viewTransition: false,\n ...options,\n ...configuredOptions,\n }\n\n const [url, _data] = transformUrlAndData(\n href,\n mergedOptions.data,\n mergedOptions.method,\n mergedOptions.forceFormData,\n mergedOptions.queryStringArrayFormat,\n )\n\n const visit = {\n cancelled: false,\n completed: false,\n interrupted: false,\n ...mergedOptions,\n ...pendingVisitOptions,\n url,\n data: _data,\n }\n\n if (visit.prefetch) {\n visit.headers['Purpose'] = 'prefetch'\n }\n\n return visit\n }\n\n protected getVisitEvents(options: VisitOptions): VisitCallbacks {\n return {\n onCancelToken: options.onCancelToken || (() => {}),\n onBefore: options.onBefore || (() => {}),\n onBeforeUpdate: options.onBeforeUpdate || (() => {}),\n onStart: options.onStart || (() => {}),\n onProgress: options.onProgress || (() => {}),\n onFinish: options.onFinish || (() => {}),\n onCancel: options.onCancel || (() => {}),\n onSuccess: options.onSuccess || (() => {}),\n onError: options.onError || (() => {}),\n onFlash: options.onFlash || (() => {}),\n onPrefetched: options.onPrefetched || (() => {}),\n onPrefetching: options.onPrefetching || (() => {}),\n }\n }\n\n protected loadDeferredProps(deferred: Page['deferredProps']): void {\n if (deferred) {\n Object.entries(deferred).forEach(([_, group]) => {\n this.doReload({ only: group, deferredProps: true })\n })\n }\n }\n}\n" }, { "path": "packages/core/src/scroll.ts", "content": "import { requestAnimationFrame } from './domUtils'\nimport { history } from './history'\nimport { ScrollRegion } from './types'\n\nconst isServer = typeof window === 'undefined'\nconst isFirefox = !isServer && /Firefox/i.test(window.navigator.userAgent)\n\nexport class Scroll {\n public static save(): void {\n history.saveScrollPositions(this.getScrollRegions())\n }\n\n public static getScrollRegions(): ScrollRegion[] {\n return Array.from(this.regions()).map((region) => ({\n top: region.scrollTop,\n left: region.scrollLeft,\n }))\n }\n\n protected static regions(): NodeListOf<Element> {\n return document.querySelectorAll('[scroll-region]')\n }\n\n public static scrollToTop(): void {\n if (isFirefox && getComputedStyle(document.documentElement).scrollBehavior === 'smooth') {\n // Firefox has a bug with smooth scrolling to (0, 0) when navigating to pages that are shorter than the previous page.\n return requestAnimationFrame(() => window.scrollTo(0, 0), 2)\n }\n\n window.scrollTo(0, 0)\n }\n\n public static reset(): void {\n const anchorHash = isServer ? null : window.location.hash\n\n if (!anchorHash) {\n // Reset the document scroll position if there is no hash.\n this.scrollToTop()\n }\n\n this.regions().forEach((region) => {\n if (typeof region.scrollTo === 'function') {\n region.scrollTo(0, 0)\n } else {\n region.scrollTop = 0\n region.scrollLeft = 0\n }\n })\n\n this.save()\n this.scrollToAnchor()\n }\n\n public static scrollToAnchor(): void {\n const anchorHash = isServer ? null : window.location.hash\n\n if (anchorHash) {\n // We're using a setTimeout() here as a workaround for a bug in the React adapter where the\n // rendering isn't completing fast enough, causing the anchor link to not be scrolled to.\n setTimeout(() => {\n const anchorElement = document.getElementById(anchorHash.slice(1))\n anchorElement ? anchorElement.scrollIntoView() : this.scrollToTop()\n })\n }\n }\n\n public static restore(scrollRegions: ScrollRegion[]): void {\n if (isServer) {\n return\n }\n\n window.requestAnimationFrame(() => {\n this.restoreDocument()\n this.restoreScrollRegions(scrollRegions)\n })\n }\n\n public static restoreScrollRegions(scrollRegions: ScrollRegion[]): void {\n if (isServer) {\n return\n }\n\n this.regions().forEach((region: Element, index: number) => {\n const scrollPosition = scrollRegions[index]\n\n if (!scrollPosition) {\n return\n }\n\n if (typeof region.scrollTo === 'function') {\n region.scrollTo(scrollPosition.left, scrollPosition.top)\n } else {\n region.scrollTop = scrollPosition.top\n region.scrollLeft = scrollPosition.left\n }\n })\n }\n\n public static restoreDocument(): void {\n const scrollPosition = history.getDocumentScrollPosition()\n window.scrollTo(scrollPosition.left, scrollPosition.top)\n }\n\n public static onScroll(event: Event): void {\n const target = event.target as Element\n\n if (typeof target.hasAttribute === 'function' && target.hasAttribute('scroll-region')) {\n this.save()\n }\n }\n\n public static onWindowScroll(): void {\n history.saveDocumentScrollPosition({\n top: window.scrollY,\n left: window.scrollX,\n })\n }\n}\n" }, { "path": "packages/core/src/server.ts", "content": "import { createServer, IncomingMessage } from 'http'\nimport cluster from 'node:cluster'\nimport { availableParallelism } from 'node:os'\nimport * as process from 'process'\nimport { InertiaAppResponse, Page } from './types'\n\ntype AppCallback = (page: Page) => InertiaAppResponse\ntype RouteHandler = (request: IncomingMessage) => Promise<unknown>\ntype ServerOptions = {\n port?: number\n cluster?: boolean\n}\ntype Port = number\n\nconst readableToString: (readable: IncomingMessage) => Promise<string> = (readable) =>\n new Promise((resolve, reject) => {\n let data = ''\n readable.on('data', (chunk) => (data += chunk))\n readable.on('end', () => resolve(data))\n readable.on('error', (err) => reject(err))\n })\n\nexport default (render: AppCallback, options?: Port | ServerOptions): void => {\n const _port = typeof options === 'number' ? options : (options?.port ?? 13714)\n const _useCluster = typeof options === 'object' && options?.cluster !== undefined ? options.cluster : false\n\n const log = (message: string) => {\n console.log(\n _useCluster && !cluster.isPrimary\n ? `[${cluster.worker?.id ?? 'N/A'} / ${cluster.worker?.process?.pid ?? 'N/A'}] ${message}`\n : message,\n )\n }\n\n if (_useCluster && cluster.isPrimary) {\n log('Primary Inertia SSR server process started...')\n\n for (let i = 0; i < availableParallelism(); i++) {\n cluster.fork()\n }\n\n cluster.on('message', (_worker, message) => {\n if (message === 'shutdown') {\n for (const id in cluster.workers) {\n cluster.workers[id]?.kill()\n }\n\n process.exit()\n }\n })\n\n return\n }\n\n const routes: Record<string, RouteHandler> = {\n '/health': async () => ({ status: 'OK', timestamp: Date.now() }),\n '/shutdown': async () => {\n if (cluster.isWorker) {\n process.send?.('shutdown')\n }\n\n process.exit()\n },\n '/render': async (request) => render(JSON.parse(await readableToString(request))),\n '/404': async () => ({ status: 'NOT_FOUND', timestamp: Date.now() }),\n }\n\n createServer(async (request, response) => {\n const dispatchRoute = routes[<string>request.url] || routes['/404']\n\n try {\n response.writeHead(200, { 'Content-Type': 'application/json', Server: 'Inertia.js SSR' })\n response.write(JSON.stringify(await dispatchRoute(request)))\n } catch (e) {\n console.error(e)\n }\n\n response.end()\n }).listen(_port, () => log('Inertia SSR server started.'))\n\n log(`Starting SSR server on port ${_port}...`)\n}\n" }, { "path": "packages/core/src/sessionStorage.ts", "content": "export class SessionStorage {\n public static locationVisitKey = 'inertiaLocationVisit'\n\n public static set(key: string, value: any): void {\n if (typeof window !== 'undefined') {\n window.sessionStorage.setItem(key, JSON.stringify(value))\n }\n }\n\n public static get(key: string): any {\n if (typeof window !== 'undefined') {\n return JSON.parse(window.sessionStorage.getItem(key) || 'null')\n }\n }\n\n public static merge(key: string, value: any): void {\n const existing = this.get(key)\n\n if (existing === null) {\n this.set(key, value)\n } else {\n this.set(key, { ...existing, ...value })\n }\n }\n\n public static remove(key: string): void {\n if (typeof window !== 'undefined') {\n window.sessionStorage.removeItem(key)\n }\n }\n\n public static removeNested(key: string, nestedKey: string): void {\n const existing = this.get(key)\n\n if (existing !== null) {\n delete existing[nestedKey]\n\n this.set(key, existing)\n }\n }\n\n public static exists(key: string): boolean {\n try {\n return this.get(key) !== null\n } catch (error) {\n return false\n }\n }\n\n public static clear(): void {\n if (typeof window !== 'undefined') {\n window.sessionStorage.clear()\n }\n }\n}\n" }, { "path": "packages/core/src/time.ts", "content": "import { CacheForOption, TimeUnit } from './types'\n\nconst conversionMap: Record<TimeUnit, number> = {\n ms: 1,\n s: 1000,\n m: 1000 * 60,\n h: 1000 * 60 * 60,\n d: 1000 * 60 * 60 * 24,\n}\n\nexport const timeToMs = (time: CacheForOption): number => {\n if (typeof time === 'number') {\n return time\n }\n\n for (const [unit, conversion] of Object.entries(conversionMap)) {\n if (time.endsWith(unit)) {\n return parseFloat(time) * conversion\n }\n }\n\n return parseInt(time)\n}\n" }, { "path": "packages/core/src/types.ts", "content": "import { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { NamedInputEvent, ValidationConfig, Validator } from 'laravel-precognition'\nimport { Response } from './response'\n\ndeclare module 'axios' {\n export interface AxiosProgressEvent {\n percentage: number | undefined\n }\n}\n\nexport interface PageFlashData {\n [key: string]: unknown\n}\n\nexport type DefaultInertiaConfig = {\n errorValueType: string\n flashDataType: PageFlashData\n sharedPageProps: PageProps\n}\n/**\n * Designed to allow overriding of some core types using TypeScript\n * interface declaration merging.\n *\n * @see {@link DefaultInertiaConfig} for keys to override\n * @example\n * ```ts\n * // global.d.ts\n * import '@inertiajs/core'\n *\n * declare module '@inertiajs/core' {\n * export interface InertiaConfig {\n * errorValueType: string[]\n * flashDataType: {\n * toast?: { type: 'success' | 'error', message: string }\n * }\n * sharedPageProps: {\n * auth: { user: User | null }\n * }\n * }\n * }\n * ```\n */\nexport interface InertiaConfig {}\nexport type InertiaConfigFor<Key extends keyof DefaultInertiaConfig> = Key extends keyof InertiaConfig\n ? InertiaConfig[Key]\n : DefaultInertiaConfig[Key]\nexport type ErrorValue = InertiaConfigFor<'errorValueType'>\nexport type FlashData = InertiaConfigFor<'flashDataType'>\nexport type SharedPageProps = InertiaConfigFor<'sharedPageProps'>\n\nexport type Errors = Record<string, ErrorValue>\nexport type ErrorBag = Record<string, Errors>\n\nexport type FormDataConvertibleValue = Blob | FormDataEntryValue | Date | boolean | number | null | undefined\nexport type FormDataConvertible =\n | Array<FormDataConvertible>\n | { [key: string]: FormDataConvertible }\n | FormDataConvertibleValue\n\nexport type FormDataType<T extends object> = {\n [K in keyof T]: T[K] extends infer U\n ? U extends FormDataConvertibleValue\n ? U\n : U extends (...args: unknown[]) => unknown\n ? never\n : U extends object | Array<unknown>\n ? FormDataType<U>\n : never\n : never\n}\n\n/**\n * Uses `0 extends 1 & T` to detect `any` type and prevent infinite recursion.\n */\nexport type FormDataKeys<T> = T extends Function | FormDataConvertibleValue\n ? never\n : T extends unknown[]\n ? ArrayFormDataKeys<T>\n : T extends object\n ? ObjectFormDataKeys<T>\n : never\n\n/**\n * Helper type for array form data keys\n */\ntype ArrayFormDataKeys<T extends unknown[]> = number extends T['length']\n ? // Dynamic array\n | `${number}`\n | (0 extends 1 & T[number]\n ? never\n : T[number] extends FormDataConvertibleValue\n ? never\n : `${number}.${FormDataKeys<T[number]>}`)\n : // Tuple with known length\n | Extract<keyof T, `${number}`>\n | {\n [Key in Extract<keyof T, `${number}`>]: 0 extends 1 & T[Key]\n ? never\n : T[Key] extends FormDataConvertibleValue\n ? never\n : `${Key & string}.${FormDataKeys<T[Key & string] & string>}`\n }[Extract<keyof T, `${number}`>]\n\n/**\n * Helper type for object form data keys\n */\ntype ObjectFormDataKeys<T extends object> = string extends keyof T\n ? string\n :\n | Extract<keyof T, string>\n | {\n [Key in Extract<keyof T, string>]: 0 extends 1 & T[Key]\n ? never\n : T[Key] extends FormDataConvertibleValue\n ? never\n : T[Key] extends any[]\n ? `${Key}.${FormDataKeys<T[Key]> & string}`\n : T[Key] extends Record<string, any>\n ? `${Key}.${FormDataKeys<T[Key]> & string}`\n : Exclude<T[Key], null | undefined> extends any[]\n ? never\n : Exclude<T[Key], null | undefined> extends Record<string, any>\n ? `${Key}.${FormDataKeys<Exclude<T[Key], null | undefined>> & string}`\n : never\n }[Extract<keyof T, string>]\n\ntype PartialFormDataErrors<T> = {\n [K in string extends keyof T ? string : Extract<keyof FormDataError<T>, string>]?: ErrorValue\n}\n\nexport type FormDataErrors<T> = PartialFormDataErrors<T> & {\n [K in keyof PartialFormDataErrors<T>]: NonNullable<PartialFormDataErrors<T>[K]>\n}\n\nexport type FormDataValues<T, K extends FormDataKeys<T>> = K extends `${infer P}.${infer Rest}`\n ? T extends unknown[]\n ? P extends `${infer I extends number}`\n ? Rest extends FormDataKeys<T[I]>\n ? FormDataValues<T[I], Rest>\n : never\n : never\n : P extends keyof T\n ? Rest extends FormDataKeys<T[P]>\n ? FormDataValues<T[P], Rest>\n : never\n : never\n : K extends keyof T\n ? T[K]\n : T extends unknown[]\n ? T[K & number]\n : never\n\nexport type FormDataError<T> = Partial<Record<FormDataKeys<T>, ErrorValue>>\n\nexport type Method = 'get' | 'post' | 'put' | 'patch' | 'delete'\n\nexport type RequestPayload = Record<string, FormDataConvertible> | FormData\n\nexport interface PageProps {\n [key: string]: unknown\n}\n\nexport type ScrollProp = {\n pageName: string\n previousPage: number | string | null\n nextPage: number | string | null\n currentPage: number | string | null\n reset: boolean\n}\n\nexport interface Page<SharedProps extends PageProps = PageProps> {\n component: string\n props: PageProps &\n SharedProps & {\n errors: Errors & ErrorBag\n deferred?: Record<string, VisitOptions['only']>\n }\n url: string\n version: string | null\n clearHistory: boolean\n encryptHistory: boolean\n deferredProps?: Record<string, NonNullable<VisitOptions['only']>>\n initialDeferredProps?: Record<string, NonNullable<VisitOptions['only']>>\n mergeProps?: string[]\n prependProps?: string[]\n deepMergeProps?: string[]\n matchPropsOn?: string[]\n scrollProps?: Record<keyof PageProps, ScrollProp>\n flash: FlashData\n onceProps?: Record<\n string,\n {\n prop: keyof PageProps\n expiresAt?: number | null\n }\n >\n\n /** @internal */\n rememberedState: Record<string, unknown>\n}\n\nexport type ScrollRegion = {\n top: number\n left: number\n}\n\nexport interface ClientSideVisitOptions<TProps = Page['props']> {\n component?: Page['component']\n url?: Page['url']\n props?: ((props: TProps, onceProps: Partial<TProps>) => PageProps) | PageProps\n flash?: ((flash: FlashData) => PageFlashData) | PageFlashData\n clearHistory?: Page['clearHistory']\n encryptHistory?: Page['encryptHistory']\n preserveScroll?: VisitOptions['preserveScroll']\n preserveState?: VisitOptions['preserveState']\n errorBag?: string | null\n viewTransition?: VisitOptions['viewTransition']\n onError?: (errors: Errors) => void\n onFinish?: (visit: ClientSideVisitOptions<TProps>) => void\n onFlash?: (flash: FlashData) => void\n onSuccess?: (page: Page<SharedPageProps>) => void\n}\n\nexport type PageResolver = (name: string) => Component\n\nexport type PageHandler<ComponentType = Component> = ({\n component,\n page,\n preserveState,\n}: {\n component: ComponentType\n page: Page\n preserveState: boolean\n}) => Promise<unknown>\n\nexport type PreserveStateOption = boolean | 'errors' | ((page: Page) => boolean)\n\nexport type QueryStringArrayFormatOption = 'indices' | 'brackets'\n\nexport type Progress = AxiosProgressEvent\n\nexport type LocationVisit = {\n preserveScroll: boolean\n}\n\nexport type CancelToken = {\n cancel: VoidFunction\n}\n\nexport type CancelTokenCallback = (cancelToken: CancelToken) => void\n\nexport type Visit<T extends RequestPayload = RequestPayload> = {\n method: Method\n data: T\n replace: boolean\n preserveScroll: PreserveStateOption\n preserveState: PreserveStateOption\n only: Array<string>\n except: Array<string>\n headers: Record<string, string>\n errorBag: string | null\n forceFormData: boolean\n queryStringArrayFormat: QueryStringArrayFormatOption\n async: boolean\n showProgress: boolean\n prefetch: boolean\n fresh: boolean\n reset: string[]\n preserveUrl: boolean\n invalidateCacheTags: string | string[]\n viewTransition: boolean | ((viewTransition: ViewTransition) => void)\n}\n\nexport type GlobalEventsMap<T extends RequestPayload = RequestPayload> = {\n before: {\n parameters: [PendingVisit<T>]\n details: {\n visit: PendingVisit<T>\n }\n result: boolean | void\n }\n start: {\n parameters: [PendingVisit<T>]\n details: {\n visit: PendingVisit<T>\n }\n result: void\n }\n progress: {\n parameters: [Progress | undefined]\n details: {\n progress: Progress | undefined\n }\n result: void\n }\n finish: {\n parameters: [ActiveVisit<T>]\n details: {\n visit: ActiveVisit<T>\n }\n result: void\n }\n cancel: {\n parameters: []\n details: {}\n result: void\n }\n beforeUpdate: {\n parameters: [Page<SharedPageProps>]\n details: {\n page: Page<SharedPageProps>\n }\n result: void\n }\n navigate: {\n parameters: [Page<SharedPageProps>]\n details: {\n page: Page<SharedPageProps>\n }\n result: void\n }\n success: {\n parameters: [Page<SharedPageProps>]\n details: {\n page: Page<SharedPageProps>\n }\n result: void\n }\n error: {\n parameters: [Errors]\n details: {\n errors: Errors\n }\n result: void\n }\n invalid: {\n parameters: [AxiosResponse]\n details: {\n response: AxiosResponse\n }\n result: boolean | void\n }\n exception: {\n parameters: [Error]\n details: {\n exception: Error\n }\n result: boolean | void\n }\n prefetched: {\n parameters: [AxiosResponse, ActiveVisit<T>]\n details: {\n response: AxiosResponse\n fetchedAt: number\n visit: ActiveVisit<T>\n }\n result: void\n }\n prefetching: {\n parameters: [ActiveVisit<T>]\n details: {\n visit: ActiveVisit<T>\n }\n result: void\n }\n flash: {\n parameters: [Page['flash']]\n details: {\n flash: Page['flash']\n }\n result: void\n }\n}\n\nexport type PageEvent = 'newComponent' | 'firstLoad'\n\nexport type GlobalEventNames<T extends RequestPayload = RequestPayload> = keyof GlobalEventsMap<T>\n\nexport type GlobalEvent<\n TEventName extends GlobalEventNames<T>,\n T extends RequestPayload = RequestPayload,\n> = CustomEvent<GlobalEventDetails<TEventName, T>>\n\nexport type GlobalEventParameters<\n TEventName extends GlobalEventNames<T>,\n T extends RequestPayload = RequestPayload,\n> = GlobalEventsMap<T>[TEventName]['parameters']\n\nexport type GlobalEventResult<\n TEventName extends GlobalEventNames<T>,\n T extends RequestPayload = RequestPayload,\n> = GlobalEventsMap<T>[TEventName]['result']\n\nexport type GlobalEventDetails<\n TEventName extends GlobalEventNames<T>,\n T extends RequestPayload = RequestPayload,\n> = GlobalEventsMap<T>[TEventName]['details']\n\nexport type GlobalEventTrigger<TEventName extends GlobalEventNames<T>, T extends RequestPayload = RequestPayload> = (\n ...params: GlobalEventParameters<TEventName, T>\n) => GlobalEventResult<TEventName, T>\n\nexport type GlobalEventCallback<TEventName extends GlobalEventNames<T>, T extends RequestPayload = RequestPayload> = (\n ...params: GlobalEventParameters<TEventName, T>\n) => GlobalEventResult<TEventName, T>\n\nexport type InternalEvent = 'missingHistoryItem' | 'loadDeferredProps' | 'historyQuotaExceeded'\n\nexport type VisitCallbacks<T extends RequestPayload = RequestPayload> = {\n onCancelToken: CancelTokenCallback\n onBefore: GlobalEventCallback<'before', T>\n onBeforeUpdate: GlobalEventCallback<'beforeUpdate', T>\n onStart: GlobalEventCallback<'start', T>\n onProgress: GlobalEventCallback<'progress', T>\n onFinish: GlobalEventCallback<'finish', T>\n onCancel: GlobalEventCallback<'cancel', T>\n onSuccess: GlobalEventCallback<'success', T>\n onError: GlobalEventCallback<'error', T>\n onFlash: GlobalEventCallback<'flash', T>\n onPrefetched: GlobalEventCallback<'prefetched', T>\n onPrefetching: GlobalEventCallback<'prefetching', T>\n}\n\nexport type VisitOptions<T extends RequestPayload = RequestPayload> = Partial<Visit<T> & VisitCallbacks<T>>\n\nexport type ReloadOptions<T extends RequestPayload = RequestPayload> = Omit<\n VisitOptions<T>,\n 'preserveScroll' | 'preserveState'\n>\n\nexport type PollOptions = {\n keepAlive?: boolean\n autoStart?: boolean\n}\n\nexport type VisitHelperOptions<T extends RequestPayload = RequestPayload> = Omit<VisitOptions<T>, 'method' | 'data'>\n\nexport type RouterInitParams<ComponentType = Component> = {\n initialPage: Page\n resolveComponent: PageResolver\n swapComponent: PageHandler<ComponentType>\n onFlash?: (flash: Page['flash']) => void\n}\n\nexport type PendingVisitOptions = {\n url: URL\n completed: boolean\n cancelled: boolean\n interrupted: boolean\n}\n\nexport type PendingVisit<T extends RequestPayload = RequestPayload> = Visit<T> & PendingVisitOptions\n\nexport type ActiveVisit<T extends RequestPayload = RequestPayload> = PendingVisit<T> & Required<VisitOptions<T>>\n\nexport type InternalActiveVisit = ActiveVisit & {\n onPrefetchResponse?: (response: Response) => void\n onPrefetchError?: (error: Error) => void\n deferredProps?: boolean\n}\n\nexport type VisitId = unknown\nexport type Component = unknown\n\ntype FirstLevelOptional<T> = {\n [K in keyof T]?: T[K] extends object ? { [P in keyof T[K]]?: T[K][P] } : T[K]\n}\n\ninterface CreateInertiaAppOptions<TComponentResolver, TSetupOptions, TSetupReturn, TAdditionalInertiaAppConfig> {\n resolve: TComponentResolver\n setup: (options: TSetupOptions) => TSetupReturn\n title?: HeadManagerTitleCallback\n defaults?: FirstLevelOptional<InertiaAppConfig & TAdditionalInertiaAppConfig>\n}\n\nexport interface CreateInertiaAppOptionsForCSR<\n SharedProps extends PageProps,\n TComponentResolver,\n TSetupOptions,\n TSetupReturn,\n TAdditionalInertiaAppConfig,\n> extends CreateInertiaAppOptions<TComponentResolver, TSetupOptions, TSetupReturn, TAdditionalInertiaAppConfig> {\n id?: string\n page?: Page<SharedProps>\n progress?:\n | false\n | {\n delay?: number\n color?: string\n includeCSS?: boolean\n showSpinner?: boolean\n }\n render?: undefined\n}\n\nexport interface CreateInertiaAppOptionsForSSR<\n SharedProps extends PageProps,\n TComponentResolver,\n TSetupOptions,\n TSetupReturn,\n TAdditionalInertiaAppConfig,\n> extends CreateInertiaAppOptions<TComponentResolver, TSetupOptions, TSetupReturn, TAdditionalInertiaAppConfig> {\n id?: undefined\n page: Page<SharedProps>\n progress?: undefined\n render: unknown\n}\n\nexport type InertiaAppSSRResponse = { head: string[]; body: string }\nexport type InertiaAppResponse = Promise<InertiaAppSSRResponse | void>\n\nexport type HeadManagerTitleCallback = (title: string) => string\nexport type HeadManagerOnUpdateCallback = (elements: string[]) => void\nexport type HeadManager = {\n forceUpdate: () => void\n createProvider: () => {\n preferredAttribute: () => 'data-inertia' | 'inertia'\n reconnect: () => void\n update: HeadManagerOnUpdateCallback\n disconnect: () => void\n }\n}\n\nexport type LinkPrefetchOption = 'mount' | 'hover' | 'click'\n\nexport type TimeUnit = 'ms' | 's' | 'm' | 'h' | 'd'\nexport type CacheForOption = number | `${number}${TimeUnit}` | string\n\nexport type PrefetchOptions = {\n cacheFor: CacheForOption | CacheForOption[]\n cacheTags: string | string[]\n}\n\nexport type InertiaAppConfig = {\n form: {\n recentlySuccessfulDuration: number\n forceIndicesArrayFormatInFormData: boolean\n withAllErrors: boolean\n }\n // experimental: {\n // /* not guaranteed */\n // }\n future: {\n /* planned defaults */\n preserveEqualProps: boolean\n useDataInertiaHeadAttribute: boolean\n useDialogForErrorModal: boolean\n useScriptElementForInitialPage: boolean\n }\n prefetch: {\n cacheFor: CacheForOption | CacheForOption[]\n hoverDelay: number\n }\n visitOptions?: (href: string, options: VisitOptions) => VisitOptions\n}\n\nexport interface LinkComponentBaseProps extends Partial<\n Pick<\n Visit<RequestPayload>,\n | 'data'\n | 'method'\n | 'replace'\n | 'preserveScroll'\n | 'preserveState'\n | 'preserveUrl'\n | 'only'\n | 'except'\n | 'headers'\n | 'queryStringArrayFormat'\n | 'async'\n | 'viewTransition'\n > &\n VisitCallbacks & {\n href: string | UrlMethodPair\n prefetch: boolean | LinkPrefetchOption | LinkPrefetchOption[]\n cacheFor: CacheForOption | CacheForOption[]\n cacheTags: string | string[]\n }\n> {}\n\ntype PrefetchObject = {\n params: ActiveVisit\n response: Promise<Response>\n}\n\nexport type InFlightPrefetch = PrefetchObject & {\n staleTimestamp: null\n inFlight: true\n}\n\nexport type PrefetchCancellationToken = {\n isCancelled: boolean\n cancel: () => void\n}\n\nexport type PrefetchedResponse = PrefetchObject & {\n staleTimestamp: number\n timestamp: number\n expiresAt: number\n singleUse: boolean\n inFlight: false\n tags: string[]\n}\n\nexport type PrefetchRemovalTimer = {\n params: ActiveVisit\n timer: number\n}\n\nexport type ProgressSettings = {\n minimum: number\n easing: string\n positionUsing: 'translate3d' | 'translate' | 'margin'\n speed: number\n trickle: boolean\n trickleSpeed: number\n showSpinner: boolean\n barSelector: string\n spinnerSelector: string\n parent: string\n template: string\n includeCSS: boolean\n color: string\n}\n\nexport type UrlMethodPair = { url: string; method: Method }\n\nexport type UseFormTransformCallback<TForm> = (data: TForm) => object\nexport type UseFormWithPrecognitionArguments =\n | [Method | (() => Method), string | (() => string)]\n | [UrlMethodPair | (() => UrlMethodPair)]\n\ntype UseFormInertiaArguments<TForm> =\n | []\n | [data: TForm | (() => TForm)]\n | [rememberKey: string, data: TForm | (() => TForm)]\ntype UseFormPrecognitionArguments<TForm> =\n | [urlMethodPair: UrlMethodPair | (() => UrlMethodPair), data: TForm | (() => TForm)]\n | [method: Method | (() => Method), url: string | (() => string), data: TForm | (() => TForm)]\nexport type UseFormArguments<TForm> = UseFormInertiaArguments<TForm> | UseFormPrecognitionArguments<TForm>\n\nexport type UseFormSubmitOptions = Omit<VisitOptions, 'data'>\nexport type UseFormSubmitArguments =\n | [Method, string, UseFormSubmitOptions?]\n | [UrlMethodPair, UseFormSubmitOptions?]\n | [UseFormSubmitOptions?]\n\nexport type FormComponentOptions = Pick<\n VisitOptions,\n 'preserveScroll' | 'preserveState' | 'preserveUrl' | 'replace' | 'only' | 'except' | 'reset' | 'viewTransition'\n>\n\nexport type FormComponentProps = Partial<\n Pick<Visit, 'headers' | 'queryStringArrayFormat' | 'errorBag' | 'showProgress' | 'invalidateCacheTags'> &\n Omit<VisitCallbacks, 'onPrefetched' | 'onPrefetching'>\n> & {\n method?: Method | Uppercase<Method>\n action?: string | UrlMethodPair\n transform?: (data: Record<string, FormDataConvertible>) => Record<string, FormDataConvertible>\n options?: FormComponentOptions\n onSubmitComplete?: (props: FormComponentonSubmitCompleteArguments) => void\n disableWhileProcessing?: boolean\n resetOnSuccess?: boolean | string[]\n resetOnError?: boolean | string[]\n setDefaultsOnSuccess?: boolean\n validateFiles?: boolean\n validationTimeout?: number\n withAllErrors?: boolean | null\n}\n\nexport type FormComponentMethods = {\n clearErrors: (...fields: string[]) => void\n resetAndClearErrors: (...fields: string[]) => void\n setError: {\n (field: string, value: ErrorValue): void\n (errors: Record<string, ErrorValue>): void\n }\n reset: (...fields: string[]) => void\n submit: () => void\n defaults: () => void\n getData: () => Record<string, FormDataConvertible>\n getFormData: () => FormData\n valid: (field: string) => boolean\n invalid: (field: string) => boolean\n validate: (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) => void\n touch: (...fields: string[]) => void\n touched: (field?: string) => boolean\n validator: () => Validator\n}\n\nexport type FormComponentonSubmitCompleteArguments = Pick<FormComponentMethods, 'reset' | 'defaults'>\n\nexport type FormComponentState = {\n errors: Record<string, ErrorValue>\n hasErrors: boolean\n processing: boolean\n progress: Progress | null\n wasSuccessful: boolean\n recentlySuccessful: boolean\n isDirty: boolean\n validating: boolean\n}\n\nexport type FormComponentSlotProps = FormComponentMethods & FormComponentState\n\nexport type FormComponentRef = FormComponentSlotProps\n\nexport interface UseInfiniteScrollOptions {\n // Core data\n getPropName: () => string\n inReverseMode: () => boolean\n shouldFetchNext: () => boolean\n shouldFetchPrevious: () => boolean\n shouldPreserveUrl: () => boolean\n\n // Elements\n getTriggerMargin: () => number\n getStartElement: () => HTMLElement\n getEndElement: () => HTMLElement\n getItemsElement: () => HTMLElement\n getScrollableParent: () => HTMLElement | null\n\n // Callbacks\n onBeforePreviousRequest: () => void\n onBeforeNextRequest: () => void\n onCompletePreviousRequest: () => void\n onCompleteNextRequest: () => void\n onDataReset?: () => void\n}\n\nexport interface UseInfiniteScrollDataManager {\n getLastLoadedPage: () => number | string | null\n getPageName: () => string\n getRequestCount: () => number\n hasPrevious: () => boolean\n hasNext: () => boolean\n fetchNext: (reloadOptions?: ReloadOptions) => void\n fetchPrevious: (reloadOptions?: ReloadOptions) => void\n removeEventListener: () => void\n}\n\nexport interface UseInfiniteScrollElementManager {\n setupObservers: () => void\n enableTriggers: () => void\n disableTriggers: () => void\n refreshTriggers: () => void\n flushAll: () => void\n processManuallyAddedElements: () => void\n processServerLoadedElements: (loadedPage: string | number | null) => void\n}\n\nexport interface UseInfiniteScrollProps {\n dataManager: UseInfiniteScrollDataManager\n elementManager: UseInfiniteScrollElementManager\n flush: () => void\n}\n\nexport interface InfiniteScrollSlotProps {\n loading: boolean\n loadingPrevious: boolean\n loadingNext: boolean\n}\n\nexport interface InfiniteScrollActionSlotProps {\n loading: boolean\n loadingPrevious: boolean\n loadingNext: boolean\n fetch: () => void\n autoMode: boolean\n manualMode: boolean\n hasMore: boolean\n hasPrevious: boolean\n hasNext: boolean\n}\n\nexport interface InfiniteScrollRef {\n fetchNext: (reloadOptions?: ReloadOptions) => void\n fetchPrevious: (reloadOptions?: ReloadOptions) => void\n hasPrevious: () => boolean\n hasNext: () => boolean\n}\n\nexport interface InfiniteScrollComponentBaseProps {\n data: string\n buffer?: number\n as?: string\n manual?: boolean\n manualAfter?: number\n preserveUrl?: boolean\n reverse?: boolean\n autoScroll?: boolean\n onlyNext?: boolean\n onlyPrevious?: boolean\n}\n\ndeclare global {\n interface DocumentEventMap {\n 'inertia:before': GlobalEvent<'before'>\n 'inertia:start': GlobalEvent<'start'>\n 'inertia:progress': GlobalEvent<'progress'>\n 'inertia:success': GlobalEvent<'success'>\n 'inertia:error': GlobalEvent<'error'>\n 'inertia:invalid': GlobalEvent<'invalid'>\n 'inertia:exception': GlobalEvent<'exception'>\n 'inertia:finish': GlobalEvent<'finish'>\n 'inertia:beforeUpdate': GlobalEvent<'beforeUpdate'>\n 'inertia:navigate': GlobalEvent<'navigate'>\n 'inertia:flash': GlobalEvent<'flash'>\n }\n}\n" }, { "path": "packages/core/src/url.ts", "content": "import * as qs from 'qs'\nimport { config } from './config'\nimport { hasFiles } from './files'\nimport { isFormData, objectToFormData } from './formData'\nimport type {\n FormDataConvertible,\n Method,\n QueryStringArrayFormatOption,\n RequestPayload,\n UrlMethodPair,\n VisitOptions,\n} from './types'\n\nexport function hrefToUrl(href: string | URL): URL {\n return new URL(href.toString(), typeof window === 'undefined' ? undefined : window.location.toString())\n}\n\nexport const transformUrlAndData = (\n href: string | URL,\n data: RequestPayload,\n method: Method,\n forceFormData: VisitOptions['forceFormData'],\n queryStringArrayFormat: VisitOptions['queryStringArrayFormat'],\n): [URL, RequestPayload] => {\n let url = typeof href === 'string' ? hrefToUrl(href) : href\n\n if ((hasFiles(data) || forceFormData) && !isFormData(data)) {\n if (config.get('form.forceIndicesArrayFormatInFormData')) {\n queryStringArrayFormat = 'indices'\n }\n\n data = objectToFormData(data, new FormData(), null, queryStringArrayFormat)\n }\n\n if (isFormData(data)) {\n return [url, data]\n }\n\n const [_href, _data] = mergeDataIntoQueryString(method, url, data, queryStringArrayFormat)\n\n return [hrefToUrl(_href), _data]\n}\n\ntype MergeDataIntoQueryStringDataReturnType<T extends RequestPayload> =\n T extends Record<string, FormDataConvertible> ? Record<string, FormDataConvertible> : RequestPayload\n\nexport function mergeDataIntoQueryString<T extends RequestPayload>(\n method: Method,\n href: URL | string,\n data: T,\n qsArrayFormat: QueryStringArrayFormatOption = 'brackets',\n): [string, MergeDataIntoQueryStringDataReturnType<T>] {\n const hasDataForQueryString = method === 'get' && !isFormData(data) && Object.keys(data).length > 0\n const hasHost = urlHasProtocol(href.toString())\n const hasAbsolutePath = hasHost || href.toString().startsWith('/') || href.toString() === ''\n const hasRelativePath = !hasAbsolutePath && !href.toString().startsWith('#') && !href.toString().startsWith('?')\n const hasRelativePathWithDotPrefix = /^[.]{1,2}([/]|$)/.test(href.toString())\n const hasSearch = href.toString().includes('?') || hasDataForQueryString\n const hasHash = href.toString().includes('#')\n\n const url = new URL(href.toString(), typeof window === 'undefined' ? 'http://localhost' : window.location.toString())\n\n if (hasDataForQueryString) {\n // If the original URL contains indices notation (e.g. [0], [1]), preserve it.\n // Indices notation cannot be converted to brackets notation without data loss.\n // We decode the URL search first because browsers may return URL-encoded brackets (%5B0%5D).\n const hasIndices = /\\[\\d+\\]/.test(decodeURIComponent(url.search))\n const parseOptions = { ignoreQueryPrefix: true, allowSparse: true }\n url.search = qs.stringify(\n { ...qs.parse(url.search, parseOptions), ...data },\n {\n encodeValuesOnly: true,\n arrayFormat: hasIndices ? 'indices' : qsArrayFormat,\n },\n )\n }\n\n return [\n [\n hasHost ? `${url.protocol}//${url.host}` : '',\n hasAbsolutePath ? url.pathname : '',\n hasRelativePath ? url.pathname.substring(hasRelativePathWithDotPrefix ? 0 : 1) : '',\n hasSearch ? url.search : '',\n hasHash ? url.hash : '',\n ].join(''),\n (hasDataForQueryString ? {} : data) as MergeDataIntoQueryStringDataReturnType<T>,\n ]\n}\n\nexport function urlWithoutHash(url: URL | Location): URL {\n url = new URL(url.href)\n url.hash = ''\n return url\n}\n\nexport const setHashIfSameUrl = (originUrl: URL | Location, destinationUrl: URL | Location) => {\n if (originUrl.hash && !destinationUrl.hash && urlWithoutHash(originUrl).href === destinationUrl.href) {\n destinationUrl.hash = originUrl.hash\n }\n}\n\nexport const isSameUrlWithoutHash = (url1: URL | Location, url2: URL | Location): boolean => {\n return urlWithoutHash(url1).href === urlWithoutHash(url2).href\n}\n\nexport const isSameUrlWithoutQueryOrHash = (url1: URL | Location, url2: URL | Location): boolean => {\n return url1.origin === url2.origin && url1.pathname === url2.pathname\n}\n\nexport function isUrlMethodPair(href: unknown): href is UrlMethodPair {\n return href !== null && typeof href === 'object' && href !== undefined && 'url' in href && 'method' in href\n}\n\nexport function urlHasProtocol(url: string): boolean {\n return /^([a-z][a-z0-9+.-]*:)?\\/\\/[^/]/i.test(url)\n}\n\nexport function urlToString(url: URL | string, absolute: boolean): string {\n const urlObj = typeof url === 'string' ? hrefToUrl(url) : url\n\n return absolute\n ? `${urlObj.protocol}//${urlObj.host}${urlObj.pathname}${urlObj.search}${urlObj.hash}`\n : `${urlObj.pathname}${urlObj.search}${urlObj.hash}`\n}\n" }, { "path": "packages/core/src/useFormUtils.ts", "content": "import { NamedInputEvent, ValidationConfig } from 'laravel-precognition'\nimport {\n FormDataType,\n Method,\n UrlMethodPair,\n UseFormArguments,\n UseFormSubmitArguments,\n UseFormSubmitOptions,\n} from './types'\nimport { isUrlMethodPair } from './url'\n\nexport class UseFormUtils {\n /**\n * Creates a callback that returns a UrlMethodPair.\n *\n * createWayfinderCallback(urlMethodPair)\n * createWayfinderCallback(method, url)\n * createWayfinderCallback(() => urlMethodPair)\n * createWayfinderCallback(() => method, () => url)\n */\n public static createWayfinderCallback(\n ...args: [UrlMethodPair | (() => UrlMethodPair)] | [Method | (() => Method), string | (() => string)]\n ): () => UrlMethodPair {\n return () => {\n if (args.length === 1) {\n // Wayfinder object, return as-is or call function...\n return isUrlMethodPair(args[0]) ? args[0] : args[0]()\n }\n\n // Separate method and url, reconstruct Wayfinder object...\n return {\n method: typeof args[0] === 'function' ? args[0]() : args[0],\n url: typeof args[1] === 'function' ? args[1]() : args[1],\n }\n }\n }\n\n /**\n * Parses all useForm() arguments into { rememberKey, data, precognitionEndpoint }.\n *\n * useForm()\n * useForm(data)\n * useForm(rememberKey, data)\n * useForm(method, url, data)\n * useForm(urlMethodPair, data)\n *\n */\n public static parseUseFormArguments<TForm extends FormDataType<TForm>>(\n ...args: UseFormArguments<TForm>\n ): {\n rememberKey: string | null\n data: TForm | (() => TForm)\n precognitionEndpoint: (() => UrlMethodPair) | null\n } {\n if (args.length === 0) {\n // Empty form: useForm()\n return {\n rememberKey: null,\n data: {} as TForm,\n precognitionEndpoint: null,\n }\n }\n\n if (args.length === 1) {\n // Basic form: useForm(data)\n return {\n rememberKey: null,\n data: args[0],\n precognitionEndpoint: null,\n }\n }\n\n if (args.length === 2) {\n if (typeof args[0] === 'string') {\n // Rememberable form: useForm(rememberKey, data)\n return {\n rememberKey: args[0],\n data: args[1],\n precognitionEndpoint: null,\n }\n }\n\n // Form with Precognition + Wayfinder: useForm(wayfinder, data)\n return {\n rememberKey: null,\n data: args[1],\n precognitionEndpoint: this.createWayfinderCallback(args[0]),\n }\n }\n\n // Form with Precognition: useForm(method, url, data)\n return {\n rememberKey: null,\n data: args[2],\n precognitionEndpoint: this.createWayfinderCallback(args[0], args[1]),\n }\n }\n\n /**\n * Parses all submission arguments into { method, url, options }.\n * It uses the Precognition endpoint if no explicit method/url are provided.\n *\n * form.submit(method, url)\n * form.submit(method, url, options)\n * form.submit(urlMethodPair)\n * form.submit(urlMethodPair, options)\n * form.submit()\n * form.submit(options)\n */\n public static parseSubmitArguments(\n args: UseFormSubmitArguments,\n precognitionEndpoint: (() => UrlMethodPair) | null,\n ): { method: Method; url: string; options: UseFormSubmitOptions } {\n if (args.length === 3 || (args.length === 2 && typeof args[0] === 'string')) {\n // Explicit method and url provided...\n return { method: args[0], url: args[1], options: args[2] ?? {} }\n }\n\n if (isUrlMethodPair(args[0])) {\n // Wayfinder object provided...\n return { ...args[0], options: (args[1] as UseFormSubmitOptions) ?? {} }\n }\n\n // Use Precognition endpoint with optional options...\n return { ...precognitionEndpoint!(), options: (args[0] as UseFormSubmitOptions) ?? {} }\n }\n\n /**\n * Merges headers into the Precognition validate() arguments.\n */\n public static mergeHeadersForValidation(\n field?: string | NamedInputEvent | ValidationConfig,\n config?: ValidationConfig,\n headers?: Record<string, string>,\n ): [string | NamedInputEvent | ValidationConfig | undefined, ValidationConfig | undefined] {\n const merge = (config: ValidationConfig): ValidationConfig => {\n config.headers = {\n ...(headers ?? {}),\n ...(config.headers ?? {}),\n }\n\n return config\n }\n\n if (field && typeof field === 'object' && !('target' in field)) {\n field = merge(field)\n } else if (config && typeof config === 'object') {\n config = merge(config)\n } else if (typeof field === 'string') {\n config = merge(config ?? {})\n } else {\n field = merge(field ?? {})\n }\n\n return [field, config]\n }\n}\n" }, { "path": "packages/core/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"rootDir\": \"src\",\n \"noEmitOnError\": true,\n\n \"lib\": [\"DOM\", \"DOM.Iterable\", \"ES2020\"],\n \"target\": \"ES2020\",\n \"types\": [\"node\"],\n\n \"declaration\": true,\n \"declarationDir\": \"types\",\n \"emitDeclarationOnly\": true,\n\n \"module\": \"ES2020\",\n \"moduleResolution\": \"Node\",\n \"resolveJsonModule\": true,\n \"allowSyntheticDefaultImports\": true,\n\n \"noImplicitThis\": false,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"preserveConstEnums\": true,\n \"removeComments\": false,\n \"typeRoots\": [\"./node_modules/@types\"],\n \"strict\": true,\n \"skipLibCheck\": true\n }\n}\n" }, { "path": "packages/react/.gitignore", "content": "dist\ntypes\nnode_modules\npackage-lock.json\nyarn.lock\n" }, { "path": "packages/react/LICENSE", "content": "MIT License\n\nCopyright (c) Jonathan Reinink <jonathan@reinink.ca>\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "packages/react/build.js", "content": "#!/usr/bin/env node\nimport esbuild from 'esbuild'\nimport { nodeExternalsPlugin } from 'esbuild-node-externals'\nimport { readFileSync } from 'fs'\n\nconst watch = process.argv.slice(1).includes('--watch')\nconst withDeps = process.argv.slice(1).includes('--with-deps')\n\n// For regular builds, externalize all dependencies to keep the bundle size small (using nodeExternalsPlugin).\n// For builds with dependencies, only externalize peer dependencies and bundle everything\n// else so we can check ES2020 compatibility without checking framework code.\nlet externalDependencies = undefined\n\nif (withDeps) {\n const pkg = JSON.parse(readFileSync('./package.json', 'utf8'))\n externalDependencies = Object.keys(pkg.peerDependencies || {})\n}\n\nconst config = {\n bundle: true,\n minify: false,\n sourcemap: withDeps ? false : true,\n target: 'es2020',\n external: externalDependencies,\n plugins: [\n ...(withDeps ? [] : [nodeExternalsPlugin()]),\n {\n name: 'inertia',\n setup(build) {\n let count = 0\n build.onEnd((result) => {\n if (count++ !== 0) {\n console.log(`Rebuilding ${build.initialOptions.entryPoints} (${build.initialOptions.format})…`)\n }\n })\n },\n },\n ],\n}\n\nconst builds = [\n { entryPoints: ['src/index.ts'], format: 'esm', outfile: 'dist/index.esm.js', platform: 'browser' },\n { entryPoints: ['src/index.ts'], format: 'cjs', outfile: 'dist/index.js', platform: 'browser' },\n { entryPoints: ['src/server.ts'], format: 'esm', outfile: 'dist/server.esm.js', platform: 'node' },\n { entryPoints: ['src/server.ts'], format: 'cjs', outfile: 'dist/server.js', platform: 'node' },\n]\n\nbuilds.forEach(async (build) => {\n const context = await esbuild.context({ ...config, ...build })\n\n if (watch) {\n console.log(`Watching ${build.entryPoints} (${build.format})…`)\n await context.watch()\n } else {\n await context.rebuild()\n context.dispose()\n console.log(`Built ${build.entryPoints} (${build.format}) ${withDeps ? '(with-deps)' : ''}…`)\n }\n})\n" }, { "path": "packages/react/package.json", "content": "{\n \"name\": \"@inertiajs/react\",\n \"version\": \"2.3.18\",\n \"license\": \"MIT\",\n \"description\": \"The React adapter for Inertia.js\",\n \"contributors\": [\n \"Jonathan Reinink <jonathan@reinink.ca>\",\n \"Sebastian De Deyne <sebastiandedeyne@gmail.com>\"\n ],\n \"homepage\": \"https://inertiajs.com/\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/inertiajs/inertia.git\",\n \"directory\": \"packages/react\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/inertiajs/inertia/issues\"\n },\n \"files\": [\n \"dist\",\n \"types\",\n \"resources\"\n ],\n \"type\": \"module\",\n \"main\": \"dist/index.js\",\n \"types\": \"types/index.d.ts\",\n \"exports\": {\n \".\": {\n \"types\": \"./types/index.d.ts\",\n \"import\": \"./dist/index.esm.js\",\n \"require\": \"./dist/index.js\"\n },\n \"./server\": {\n \"types\": \"./types/server.d.ts\",\n \"import\": \"./dist/server.esm.js\",\n \"require\": \"./dist/server.js\"\n }\n },\n \"typesVersions\": {\n \"*\": {\n \"server\": [\n \"types/server.d.ts\"\n ]\n }\n },\n \"scripts\": {\n \"build\": \"pnpm clean && ./build.js && tsc\",\n \"build:with-deps\": \"./build.js --with-deps\",\n \"clean\": \"rm -rf types && rm -rf dist\",\n \"dev\": \"pnpx concurrently -c \\\"#ffcf00,#3178c6\\\" \\\"pnpm dev:build\\\" \\\"pnpm dev:types\\\" --names build,types\",\n \"dev:build\": \"./build.js --watch\",\n \"dev:types\": \"tsc --watch --preserveWatchOutput\",\n \"es2020-check\": \"pnpm build:with-deps && es-check es2020 \\\"dist/index.esm.js\\\" --checkFeatures --module --noCache --verbose\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"axios\": \"^1.13.5\",\n \"es-check\": \"^9.6.1\",\n \"esbuild\": \"^0.27.3\",\n \"esbuild-node-externals\": \"^1.20.1\",\n \"react\": \"^19.2.4\",\n \"react-dom\": \"^19.2.4\",\n \"typescript\": \"^5.9.3\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\",\n \"react-dom\": \"^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0\"\n },\n \"dependencies\": {\n \"@inertiajs/core\": \"workspace:*\",\n \"@types/lodash-es\": \"^4.17.12\",\n \"laravel-precognition\": \"^1.0.2\",\n \"lodash-es\": \"^4.17.23\"\n }\n}\n" }, { "path": "packages/react/readme.md", "content": "# Inertia.js React Adapter\n\nVisit [inertiajs.com](https://inertiajs.com/) to learn more.\n" }, { "path": "packages/react/resources/boost/guidelines/core.blade.php", "content": "# Inertia + React\n\n- IMPORTANT: Activate `inertia-react-development` when working with Inertia React client-side patterns.\n" }, { "path": "packages/react/resources/boost/skills/inertia-react-development/SKILL.blade.php", "content": "---\nname: inertia-react-development\ndescription: \"Develops Inertia.js v2 React client-side applications. Activates when creating React pages, forms, or navigation; using <Link>, <Form>, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions React with Inertia, React pages, React forms, or React navigation.\"\nlicense: MIT\nmetadata:\n author: laravel\n---\n@php\n/** @var \\Laravel\\Boost\\Install\\GuidelineAssist $assist */\n@endphp\n# Inertia React Development\n\n## When to Apply\n\nActivate this skill when:\n\n- Creating or modifying React page components for Inertia\n- Working with forms in React (using `<Form>` or `useForm`)\n- Implementing client-side navigation with `<Link>` or `router`\n- Using v2 features: deferred props, prefetching, WhenVisible, InfiniteScroll, once props, flash data, or polling\n- Building React-specific features with the Inertia protocol\n\n## Documentation\n\nUse `search-docs` for detailed Inertia v2 React patterns and documentation.\n\n## Basic Usage\n\n### Page Components Location\n\nReact page components should be placed in the `{{ $assist->inertia()->pagesDirectory() }}` directory.\n\n### Page Component Structure\n\n@boostsnippet(\"Basic React Page Component\", \"react\")\nexport default function UsersIndex({ users }) {\n return (\n <div>\n <h1>Users</h1>\n <ul>\n {users.map(user => <li key={user.id}>{user.name}</li>)}\n </ul>\n </div>\n )\n}\n@endboostsnippet\n\n## Client-Side Navigation\n\n### Basic Link Component\n\nUse `<Link>` for client-side navigation instead of traditional `<a>` tags:\n\n@boostsnippet(\"Inertia React Navigation\", \"react\")\nimport { Link, router } from '@inertiajs/react'\n\n<Link href=\"/\">Home</Link>\n<Link href=\"/users\">Users</Link>\n<Link href={`/users/${user.id}`}>View User</Link>\n@endboostsnippet\n\n### Link with Method\n\n@boostsnippet(\"Link with POST Method\", \"react\")\nimport { Link } from '@inertiajs/react'\n\n<Link href=\"/logout\" method=\"post\" as=\"button\">\n Logout\n</Link>\n@endboostsnippet\n\n### Prefetching\n\nPrefetch pages to improve perceived performance:\n\n@boostsnippet(\"Prefetch on Hover\", \"react\")\nimport { Link } from '@inertiajs/react'\n\n<Link href=\"/users\" prefetch>\n Users\n</Link>\n@endboostsnippet\n\n### Programmatic Navigation\n\n@boostsnippet(\"Router Visit\", \"react\")\nimport { router } from '@inertiajs/react'\n\nfunction handleClick() {\n router.visit('/users')\n}\n\n// Or with options\nrouter.visit('/users', {\n method: 'post',\n data: { name: 'John' },\n onSuccess: () => console.log('Success!'),\n})\n@endboostsnippet\n\n## Form Handling\n\n@if($assist->inertia()->hasFormComponent())\n### Form Component (Recommended)\n\nThe recommended way to build forms is with the `<Form>` component:\n\n@boostsnippet(\"Form Component Example\", \"react\")\nimport { Form } from '@inertiajs/react'\n\nexport default function CreateUser() {\n return (\n <Form action=\"/users\" method=\"post\">\n {({ errors, processing, wasSuccessful }) => (\n <>\n <input type=\"text\" name=\"name\" />\n {errors.name && <div>{errors.name}</div>}\n\n <input type=\"email\" name=\"email\" />\n {errors.email && <div>{errors.email}</div>}\n\n <button type=\"submit\" disabled={processing}>\n {processing ? 'Creating...' : 'Create User'}\n </button>\n\n {wasSuccessful && <div>User created!</div>}\n </>\n )}\n </Form>\n )\n}\n@endboostsnippet\n\n### Form Component With All Props\n\n@boostsnippet(\"Form Component Full Example\", \"react\")\nimport { Form } from '@inertiajs/react'\n\n<Form action=\"/users\" method=\"post\">\n {({\n errors,\n hasErrors,\n processing,\n progress,\n wasSuccessful,\n recentlySuccessful,\n clearErrors,\n resetAndClearErrors,\n defaults,\n isDirty,\n reset,\n submit\n }) => (\n <>\n <input type=\"text\" name=\"name\" defaultValue={defaults.name} />\n {errors.name && <div>{errors.name}</div>}\n\n <button type=\"submit\" disabled={processing}>\n {processing ? 'Saving...' : 'Save'}\n </button>\n\n {progress && (\n <progress value={progress.percentage} max=\"100\">\n {progress.percentage}%\n </progress>\n )}\n\n {wasSuccessful && <div>Saved!</div>}\n </>\n )}\n</Form>\n@endboostsnippet\n\n@if($assist->inertia()->hasFormComponentResets())\n### Form Component Reset Props\n\nThe `<Form>` component supports automatic resetting:\n\n- `resetOnError` - Reset form data when the request fails\n- `resetOnSuccess` - Reset form data when the request succeeds\n- `setDefaultsOnSuccess` - Update default values on success\n\nUse the `search-docs` tool with a query of `form component resetting` for detailed guidance.\n\n@boostsnippet(\"Form with Reset Props\", \"react\")\nimport { Form } from '@inertiajs/react'\n\n<Form\n action=\"/users\"\n method=\"post\"\n resetOnSuccess\n setDefaultsOnSuccess\n>\n {({ errors, processing, wasSuccessful }) => (\n <>\n <input type=\"text\" name=\"name\" />\n {errors.name && <div>{errors.name}</div>}\n\n <button type=\"submit\" disabled={processing}>\n Submit\n </button>\n </>\n )}\n</Form>\n@endboostsnippet\n@else\nNote: This version of Inertia does not support `resetOnError`, `resetOnSuccess`, or `setDefaultsOnSuccess` on the `<Form>` component. Using these props will cause errors. Upgrade to Inertia v2.2.0+ to use these features.\n@endif\n\nForms can also be built using the `useForm` helper for more programmatic control. Use the `search-docs` tool with a query of `useForm helper` for guidance.\n\n@endif\n\n### `useForm` Hook\n\n@if($assist->inertia()->hasFormComponent() === false)\nFor Inertia v2.0.x: Build forms using the `useForm` helper as the `<Form>` component is not available until v2.1.0+.\n@else\nFor more programmatic control or to follow existing conventions, use the `useForm` hook:\n@endif\n\n@boostsnippet(\"useForm Hook Example\", \"react\")\nimport { useForm } from '@inertiajs/react'\n\nexport default function CreateUser() {\n const { data, setData, post, processing, errors, reset } = useForm({\n name: '',\n email: '',\n password: '',\n })\n\n function submit(e) {\n e.preventDefault()\n post('/users', {\n onSuccess: () => reset('password'),\n })\n }\n\n return (\n <form onSubmit={submit}>\n <input\n type=\"text\"\n value={data.name}\n onChange={e => setData('name', e.target.value)}\n />\n {errors.name && <div>{errors.name}</div>}\n\n <input\n type=\"email\"\n value={data.email}\n onChange={e => setData('email', e.target.value)}\n />\n {errors.email && <div>{errors.email}</div>}\n\n <input\n type=\"password\"\n value={data.password}\n onChange={e => setData('password', e.target.value)}\n />\n {errors.password && <div>{errors.password}</div>}\n\n <button type=\"submit\" disabled={processing}>\n Create User\n </button>\n </form>\n )\n}\n@endboostsnippet\n\n## Inertia v2 Features\n\n### Deferred Props\n\nUse deferred props to load data after initial page render:\n\n@boostsnippet(\"Deferred Props with Empty State\", \"react\")\nexport default function UsersIndex({ users }) {\n // users will be undefined initially, then populated\n return (\n <div>\n <h1>Users</h1>\n {!users ? (\n <div className=\"animate-pulse\">\n <div className=\"h-4 bg-gray-200 rounded w-3/4 mb-2\"></div>\n <div className=\"h-4 bg-gray-200 rounded w-1/2\"></div>\n </div>\n ) : (\n <ul>\n {users.map(user => (\n <li key={user.id}>{user.name}</li>\n ))}\n </ul>\n )}\n </div>\n )\n}\n@endboostsnippet\n\n### Polling\n\nAutomatically refresh data at intervals:\n\n@boostsnippet(\"Polling Example\", \"react\")\nimport { router } from '@inertiajs/react'\nimport { useEffect } from 'react'\n\nexport default function Dashboard({ stats }) {\n useEffect(() => {\n const interval = setInterval(() => {\n router.reload({ only: ['stats'] })\n }, 5000) // Poll every 5 seconds\n\n return () => clearInterval(interval)\n }, [])\n\n return (\n <div>\n <h1>Dashboard</h1>\n <div>Active Users: {stats.activeUsers}</div>\n </div>\n )\n}\n@endboostsnippet\n\n### WhenVisible\n\nLazy-load a prop when an element scrolls into view. Useful for deferring expensive data that sits below the fold:\n\n@boostsnippet(\"WhenVisible Example\", \"react\")\nimport { WhenVisible } from '@inertiajs/react'\n\nexport default function Dashboard({ stats }) {\n return (\n <div>\n <h1>Dashboard</h1>\n\n {/* stats prop is loaded only when this section scrolls into view */}\n <WhenVisible data=\"stats\" buffer={200} fallback={<div className=\"animate-pulse\">Loading stats...</div>}>\n {({ fetching }) => (\n <div>\n <p>Total Users: {stats.total_users}</p>\n <p>Revenue: {stats.revenue}</p>\n {fetching && <span>Refreshing...</span>}\n </div>\n )}\n </WhenVisible>\n </div>\n )\n}\n@endboostsnippet\n\n## Server-Side Patterns\n\nServer-side patterns (Inertia::render, props, middleware) are covered in inertia-laravel guidelines.\n\n## Common Pitfalls\n\n- Using traditional `<a>` links instead of Inertia's `<Link>` component (breaks SPA behavior)\n- Forgetting to add loading states (skeleton screens) when using deferred props\n- Not handling the `undefined` state of deferred props before data loads\n- Using `<form>` without preventing default submission (use `<Form>` component or `e.preventDefault()`)\n- Forgetting to check if `<Form>` component is available in your Inertia version\n" }, { "path": "packages/react/src/App.ts", "content": "import {\n createHeadManager,\n HeadManagerOnUpdateCallback,\n HeadManagerTitleCallback,\n Page,\n PageHandler,\n PageProps,\n router,\n} from '@inertiajs/core'\nimport { createElement, FunctionComponent, ReactNode, useEffect, useMemo, useState } from 'react'\nimport { flushSync } from 'react-dom'\nimport HeadContext from './HeadContext'\nimport PageContext from './PageContext'\nimport { LayoutFunction, ReactComponent, ReactPageHandlerArgs } from './types'\n\nlet currentIsInitialPage = true\nlet routerIsInitialized = false\nlet swapComponent: PageHandler<ReactComponent> = async () => {\n // Dummy function so we can init the router outside of the useEffect hook. This is\n // needed so `router.reload()` works right away (on mount) in any of the user's\n // components. We swap in the real function in the useEffect hook below.\n currentIsInitialPage = false\n}\n\ntype CurrentPage = {\n component: ReactComponent | null\n page: Page\n key: number | null\n}\n\nexport interface InertiaAppProps<SharedProps extends PageProps = PageProps> {\n children?: (options: { Component: ReactComponent; props: PageProps; key: number | null }) => ReactNode\n initialPage: Page<SharedProps>\n initialComponent?: ReactComponent\n resolveComponent?: (name: string) => ReactComponent | Promise<ReactComponent>\n titleCallback?: HeadManagerTitleCallback\n onHeadUpdate?: HeadManagerOnUpdateCallback\n}\n\nexport type InertiaApp = FunctionComponent<InertiaAppProps>\n\nexport default function App<SharedProps extends PageProps = PageProps>({\n children,\n initialPage,\n initialComponent,\n resolveComponent,\n titleCallback,\n onHeadUpdate,\n}: InertiaAppProps<SharedProps>) {\n const [current, setCurrent] = useState<CurrentPage>({\n component: initialComponent || null,\n page: { ...initialPage, flash: initialPage.flash ?? {} },\n key: null,\n })\n\n const headManager = useMemo(() => {\n return createHeadManager(\n typeof window === 'undefined',\n titleCallback || ((title) => title),\n onHeadUpdate || (() => {}),\n )\n }, [])\n\n if (!routerIsInitialized) {\n router.init<ReactComponent>({\n initialPage,\n resolveComponent: resolveComponent!,\n swapComponent: async (args) => swapComponent(args),\n onFlash: (flash) => {\n setCurrent((current) => ({\n ...current,\n page: { ...current.page, flash },\n }))\n },\n })\n\n routerIsInitialized = true\n }\n\n useEffect(() => {\n swapComponent = async ({ component, page, preserveState }: ReactPageHandlerArgs) => {\n if (currentIsInitialPage) {\n // We block setting the current page on the initial page to\n // prevent the initial page from being re-rendered again.\n currentIsInitialPage = false\n return\n }\n\n flushSync(() =>\n setCurrent((current) => ({\n component,\n page,\n key: preserveState ? current.key : Date.now(),\n })),\n )\n }\n\n router.on('navigate', () => headManager.forceUpdate())\n }, [])\n\n if (!current.component) {\n return createElement(\n HeadContext.Provider,\n { value: headManager },\n createElement(PageContext.Provider, { value: current.page }, null),\n )\n }\n\n const renderChildren =\n children ||\n (({ Component, props, key }) => {\n const child = createElement(Component, { key, ...props })\n\n if (typeof Component.layout === 'function') {\n return (Component.layout as LayoutFunction)(child)\n }\n\n if (Array.isArray(Component.layout)) {\n return (Component.layout as any)\n .concat(child)\n .reverse()\n .reduce((children: any, Layout: any) => createElement(Layout, { children, ...props }))\n }\n\n return child\n })\n\n return createElement(\n HeadContext.Provider,\n { value: headManager },\n createElement(\n PageContext.Provider,\n { value: current.page },\n renderChildren({\n Component: current.component,\n key: current.key,\n props: current.page.props,\n }),\n ),\n )\n}\n\nApp.displayName = 'Inertia'\n" }, { "path": "packages/react/src/Deferred.ts", "content": "import { ReactNode, useEffect, useMemo, useState } from 'react'\nimport { router } from '.'\nimport usePage from './usePage'\n\nconst urlWithoutHash = (url: URL | Location): URL => {\n url = new URL(url.href)\n url.hash = ''\n\n return url\n}\n\nconst isSameUrlWithoutHash = (url1: URL | Location, url2: URL | Location): boolean => {\n return urlWithoutHash(url1).href === urlWithoutHash(url2).href\n}\n\ninterface DeferredProps {\n children: ReactNode | (() => ReactNode)\n fallback: ReactNode | (() => ReactNode)\n data: string | string[]\n}\n\nconst Deferred = ({ children, data, fallback }: DeferredProps) => {\n if (!data) {\n throw new Error('`<Deferred>` requires a `data` prop to be a string or array of strings')\n }\n\n const [loaded, setLoaded] = useState(false)\n const pageProps = usePage().props\n const keys = useMemo(() => (Array.isArray(data) ? data : [data]), [data])\n\n useEffect(() => {\n const removeListener = router.on('start', (e) => {\n const isPartialVisit = e.detail.visit.only.length > 0 || e.detail.visit.except.length > 0\n const isReloadingKey = e.detail.visit.only.find((key) => keys.includes(key))\n\n if (isSameUrlWithoutHash(e.detail.visit.url, window.location) && (!isPartialVisit || isReloadingKey)) {\n setLoaded(false)\n }\n })\n\n return () => {\n removeListener()\n }\n }, [])\n\n useEffect(() => {\n setLoaded(keys.every((key) => pageProps[key] !== undefined))\n }, [pageProps, keys])\n\n // Always check that props are actually defined before rendering children,\n // even if loaded is true, to prevent race conditions during reloads\n const propsAreDefined = useMemo(() => keys.every((key) => pageProps[key] !== undefined), [keys, pageProps])\n\n if (loaded && propsAreDefined) {\n return typeof children === 'function' ? children() : children\n }\n\n return typeof fallback === 'function' ? fallback() : fallback\n}\n\nDeferred.displayName = 'InertiaDeferred'\n\nexport default Deferred\n" }, { "path": "packages/react/src/Form.ts", "content": "import {\n config,\n FormComponentProps,\n FormComponentRef,\n FormComponentResetSymbol,\n FormComponentSlotProps,\n FormDataConvertible,\n formDataToObject,\n isUrlMethodPair,\n mergeDataIntoQueryString,\n Method,\n resetFormFields,\n UseFormUtils,\n VisitOptions,\n} from '@inertiajs/core'\nimport { NamedInputEvent, ValidationConfig } from 'laravel-precognition'\nimport { isEqual } from 'lodash-es'\nimport React, {\n createContext,\n createElement,\n FormEvent,\n forwardRef,\n ReactNode,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { isReact19 } from './react'\nimport useForm from './useForm'\n\n// Polyfill for startTransition to support React 16.9+\nconst deferStateUpdate = (callback: () => void) => {\n typeof React.startTransition === 'function' ? React.startTransition(callback) : setTimeout(callback, 0)\n}\n\ntype ComponentProps = (FormComponentProps &\n Omit<React.FormHTMLAttributes<HTMLFormElement>, keyof FormComponentProps | 'children'> &\n Omit<React.AllHTMLAttributes<HTMLFormElement>, keyof FormComponentProps | 'children'>) & {\n children: ReactNode | ((props: FormComponentSlotProps) => ReactNode)\n}\n\ntype FormSubmitOptions = Omit<VisitOptions, 'data' | 'onPrefetched' | 'onPrefetching'>\ntype FormSubmitter = HTMLElement | null\n\nconst noop = () => undefined\n\nconst FormContext = createContext<FormComponentRef | undefined>(undefined)\n\nconst Form = forwardRef<FormComponentRef, ComponentProps>(\n (\n {\n action = '',\n method = 'get',\n headers = {},\n queryStringArrayFormat = 'brackets',\n errorBag = null,\n showProgress = true,\n transform = (data) => data,\n options = {},\n onStart = noop,\n onProgress = noop,\n onFinish = noop,\n onBefore = noop,\n onCancel = noop,\n onSuccess = noop,\n onError = noop,\n onCancelToken = noop,\n onSubmitComplete = noop,\n disableWhileProcessing = false,\n resetOnError = false,\n resetOnSuccess = false,\n setDefaultsOnSuccess = false,\n invalidateCacheTags = [],\n validateFiles = false,\n validationTimeout = 1500,\n withAllErrors = null,\n children,\n ...props\n },\n ref,\n ) => {\n const getTransformedData = (): Record<string, FormDataConvertible> => {\n const [_url, data] = getUrlAndData()\n return transform(data)\n }\n\n const form = useForm<Record<string, any>>({})\n .withPrecognition(\n () => resolvedMethod,\n () => getUrlAndData()[0],\n )\n .setValidationTimeout(validationTimeout)\n\n if (validateFiles) {\n form.validateFiles()\n }\n\n if (withAllErrors ?? config.get('form.withAllErrors')) {\n form.withAllErrors()\n }\n\n form.transform(getTransformedData)\n\n const formElement = useRef<HTMLFormElement>(undefined)\n\n const resolvedMethod = useMemo(() => {\n return isUrlMethodPair(action) ? action.method : (method.toLowerCase() as Method)\n }, [action, method])\n\n const [isDirty, setIsDirty] = useState(false)\n const defaultData = useRef<FormData>(new FormData())\n\n const getFormData = (submitter?: FormSubmitter): FormData => new FormData(formElement.current, submitter)\n\n // Convert the FormData to an object because we can't compare two FormData\n // instances directly (which is needed for isDirty), mergeDataIntoQueryString()\n // expects an object, and submitting a FormData instance directly causes problems with nested objects.\n const getData = (submitter?: FormSubmitter): Record<string, FormDataConvertible> =>\n formDataToObject(getFormData(submitter))\n\n const getUrlAndData = (submitter?: FormSubmitter): [string, Record<string, FormDataConvertible>] => {\n return mergeDataIntoQueryString(\n resolvedMethod,\n isUrlMethodPair(action) ? action.url : action,\n getData(submitter),\n queryStringArrayFormat,\n )\n }\n\n const updateDirtyState = (event: Event) => {\n if (event.type === 'reset' && (event as CustomEvent).detail?.[FormComponentResetSymbol]) {\n // When the form is reset programmatically, prevent native reset behavior\n event.preventDefault()\n }\n\n deferStateUpdate(() =>\n setIsDirty(event.type === 'reset' ? false : !isEqual(getData(), formDataToObject(defaultData.current))),\n )\n }\n\n const clearErrors = (...names: string[]) => {\n form.clearErrors(...names)\n\n return form\n }\n\n useEffect(() => {\n defaultData.current = getFormData()\n\n form.setDefaults(getData())\n\n const formEvents: Array<keyof HTMLElementEventMap> = ['input', 'change', 'reset']\n\n formEvents.forEach((e) => formElement.current!.addEventListener(e, updateDirtyState))\n\n return () => {\n formEvents.forEach((e) => formElement.current?.removeEventListener(e, updateDirtyState))\n }\n }, [])\n\n useEffect(() => {\n form.setValidationTimeout(validationTimeout)\n }, [validationTimeout])\n\n useEffect(() => {\n if (validateFiles) {\n form.validateFiles()\n } else {\n form.withoutFileValidation()\n }\n }, [validateFiles])\n\n const reset = (...fields: string[]) => {\n if (formElement.current) {\n resetFormFields(formElement.current, defaultData.current, fields)\n }\n\n form.reset(...fields)\n }\n\n const resetAndClearErrors = (...fields: string[]) => {\n clearErrors(...fields)\n reset(...fields)\n }\n\n const maybeReset = (resetOption: boolean | string[]) => {\n if (!resetOption) {\n return\n }\n\n if (resetOption === true) {\n reset()\n } else if (resetOption.length > 0) {\n reset(...resetOption)\n }\n }\n\n const submit = (submitter?: FormSubmitter) => {\n const [url, data] = getUrlAndData(submitter)\n const formTarget = (submitter as HTMLButtonElement | HTMLInputElement | null)?.getAttribute('formtarget')\n\n if (formTarget === '_blank' && resolvedMethod === 'get') {\n window.open(url, '_blank')\n return\n }\n\n const submitOptions: FormSubmitOptions = {\n headers,\n queryStringArrayFormat,\n errorBag,\n showProgress,\n invalidateCacheTags,\n onCancelToken,\n onBefore,\n onStart,\n onProgress,\n onFinish,\n onCancel,\n onSuccess: (...args) => {\n onSuccess(...args)\n onSubmitComplete({\n reset,\n defaults,\n })\n maybeReset(resetOnSuccess)\n\n if (setDefaultsOnSuccess === true) {\n defaults()\n }\n },\n onError(...args) {\n onError(...args)\n maybeReset(resetOnError)\n },\n ...options,\n }\n\n // We need transform because we can't override the default data with different keys (by design)\n form.transform(() => transform(data))\n form.submit(resolvedMethod, url, submitOptions)\n\n // Reset the transformer back so the submitter is not used for future submissions\n form.transform(getTransformedData)\n }\n\n const defaults = () => {\n defaultData.current = getFormData()\n setIsDirty(false)\n }\n\n const exposed = {\n errors: form.errors,\n hasErrors: form.hasErrors,\n processing: form.processing,\n progress: form.progress,\n wasSuccessful: form.wasSuccessful,\n recentlySuccessful: form.recentlySuccessful,\n isDirty,\n clearErrors,\n resetAndClearErrors,\n setError: form.setError,\n reset,\n submit,\n defaults,\n getData,\n getFormData,\n\n // Precognition\n validator: () => form.validator(),\n validating: form.validating,\n valid: form.valid,\n invalid: form.invalid,\n validate: (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) =>\n form.validate(...UseFormUtils.mergeHeadersForValidation(field, config, headers)),\n touch: form.touch,\n touched: form.touched,\n }\n\n useImperativeHandle(ref, () => exposed, [form, isDirty, submit])\n\n const formNode = createElement(\n 'form',\n {\n ...props,\n ref: formElement,\n action: isUrlMethodPair(action) ? action.url : action,\n method: resolvedMethod,\n onSubmit: (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault()\n submit((event.nativeEvent as SubmitEvent).submitter)\n },\n // React 19 supports passing a boolean to the `inert` attribute, but shows\n // a warning when receiving a string. Earlier versions require the string 'true'.\n // See: https://github.com/inertiajs/inertia/pull/2536\n inert: disableWhileProcessing && form.processing && (isReact19 ? true : 'true'),\n },\n typeof children === 'function' ? children(exposed) : children,\n )\n\n return createElement(FormContext.Provider, { value: exposed }, formNode)\n },\n)\n\nForm.displayName = 'InertiaForm'\n\nexport function useFormContext(): FormComponentRef | undefined {\n return useContext(FormContext)\n}\n\nexport default Form\n" }, { "path": "packages/react/src/Head.ts", "content": "import { escape } from 'lodash-es'\nimport React, { FunctionComponent, ReactElement, ReactNode, useContext, useEffect, useMemo } from 'react'\nimport HeadContext from './HeadContext'\n\ntype InertiaHeadProps = {\n title?: string\n children?: ReactNode\n}\n\ntype InertiaHead = FunctionComponent<InertiaHeadProps>\n\nconst Head: InertiaHead = function ({ children, title }) {\n const headManager = useContext(HeadContext)\n const provider = useMemo(() => headManager!.createProvider(), [headManager])\n const isServer = typeof window === 'undefined'\n\n useEffect(() => {\n provider.reconnect()\n provider.update(renderNodes(children))\n return () => {\n provider.disconnect()\n }\n }, [provider, children, title])\n\n function isUnaryTag(node: ReactElement<any>) {\n return (\n typeof node.type === 'string' &&\n [\n 'area',\n 'base',\n 'br',\n 'col',\n 'embed',\n 'hr',\n 'img',\n 'input',\n 'keygen',\n 'link',\n 'meta',\n 'param',\n 'source',\n 'track',\n 'wbr',\n ].indexOf(node.type) > -1\n )\n }\n\n function renderTagStart(node: ReactElement<any>): string {\n const attrs = Object.keys(node.props).reduce((carry, name) => {\n if (['head-key', 'children', 'dangerouslySetInnerHTML'].includes(name)) {\n return carry\n }\n\n const value = String(node.props[name])\n\n if (value === '') {\n return carry + ` ${name}`\n }\n\n return carry + ` ${name}=\"${escape(value)}\"`\n }, '')\n\n return `<${String(node.type)}${attrs}>`\n }\n\n function renderTagChildren(node: ReactElement<any>): string {\n const { children } = node.props\n\n if (typeof children === 'string') {\n return children\n }\n\n if (Array.isArray(children)) {\n return children.reduce((html, child) => html + renderTag(child), '')\n }\n\n return ''\n }\n\n function renderTag(node: ReactElement<any>): string {\n let html = renderTagStart(node)\n\n if (node.props.children) {\n html += renderTagChildren(node)\n }\n\n if (node.props.dangerouslySetInnerHTML) {\n html += node.props.dangerouslySetInnerHTML.__html\n }\n\n if (!isUnaryTag(node)) {\n html += `</${String(node.type)}>`\n }\n\n return html\n }\n\n function ensureNodeHasInertiaProp(node: ReactElement<any>) {\n return React.cloneElement(node, {\n [provider.preferredAttribute()]: node.props['head-key'] !== undefined ? node.props['head-key'] : '',\n })\n }\n\n function renderNode(node: ReactElement<any>) {\n return renderTag(ensureNodeHasInertiaProp(node))\n }\n\n function renderNodes(nodes: ReactNode) {\n const elements = React.Children.toArray(nodes)\n .filter((node) => node)\n .map((node) => renderNode(node as ReactElement<any>))\n\n if (title && !elements.find((tag) => tag.startsWith('<title'))) {\n elements.push(`<title ${provider.preferredAttribute()}>${title}`)\n }\n\n return elements\n }\n\n if (isServer) {\n provider.update(renderNodes(children))\n }\n\n return null\n}\nexport default Head\n" }, { "path": "packages/react/src/HeadContext.ts", "content": "import { HeadManager } from '@inertiajs/core'\nimport { createContext } from 'react'\n\nconst headContext = createContext(null)\nheadContext.displayName = 'InertiaHeadContext'\n\nexport default headContext\n" }, { "path": "packages/react/src/InfiniteScroll.ts", "content": "import {\n getScrollableParent,\n InfiniteScrollActionSlotProps,\n InfiniteScrollComponentBaseProps,\n InfiniteScrollRef,\n InfiniteScrollSlotProps,\n useInfiniteScroll,\n UseInfiniteScrollProps,\n} from '@inertiajs/core'\nimport React, {\n createElement,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nconst resolveHTMLElement = (\n value: string | React.RefObject | null,\n fallback: HTMLElement | null,\n): HTMLElement | null => {\n if (!value) {\n return fallback\n }\n\n // React ref object { current: HTMLElement | null }\n if (value && typeof value === 'object' && 'current' in value) {\n return value.current\n }\n\n // CSS Selector string\n if (typeof value === 'string') {\n return document.querySelector(value) as HTMLElement | null\n }\n\n return fallback\n}\n\n// Helper function to render slot content\nconst renderSlot = (\n slotContent: React.ReactNode | ((props: InfiniteScrollActionSlotProps) => React.ReactNode) | undefined,\n slotProps: InfiniteScrollActionSlotProps,\n fallback: React.ReactNode = null,\n): React.ReactNode => {\n if (!slotContent) {\n return fallback\n }\n\n return typeof slotContent === 'function' ? slotContent(slotProps) : slotContent\n}\n\ninterface ComponentProps\n extends\n InfiniteScrollComponentBaseProps,\n Omit, keyof InfiniteScrollComponentBaseProps | 'children'> {\n children?: React.ReactNode | ((props: InfiniteScrollSlotProps) => React.ReactNode)\n\n // Element references for custom trigger detection (when you want different trigger elements)\n startElement?: string | React.RefObject\n endElement?: string | React.RefObject\n itemsElement?: string | React.RefObject\n\n // Render slots for UI components (when you want custom loading/action components)\n previous?: React.ReactNode | ((props: InfiniteScrollActionSlotProps) => React.ReactNode)\n next?: React.ReactNode | ((props: InfiniteScrollActionSlotProps) => React.ReactNode)\n loading?: React.ReactNode | ((props: InfiniteScrollActionSlotProps) => React.ReactNode)\n\n onlyNext?: boolean\n onlyPrevious?: boolean\n}\n\nconst InfiniteScroll = forwardRef(\n (\n {\n data,\n buffer = 0,\n as = 'div',\n manual = false,\n manualAfter = 0,\n preserveUrl = false,\n reverse = false,\n autoScroll,\n children,\n startElement,\n endElement,\n itemsElement,\n previous,\n next,\n loading,\n onlyNext = false,\n onlyPrevious = false,\n ...props\n },\n ref,\n ) => {\n const [startElementFromRef, setStartElementFromRef] = useState(null)\n const startElementRef = useCallback((node: HTMLElement | null) => setStartElementFromRef(node), [])\n\n const [endElementFromRef, setEndElementFromRef] = useState(null)\n const endElementRef = useCallback((node: HTMLElement | null) => setEndElementFromRef(node), [])\n\n const [itemsElementFromRef, setItemsElementFromRef] = useState(null)\n const itemsElementRef = useCallback((node: HTMLElement | null) => setItemsElementFromRef(node), [])\n\n const [loadingPrevious, setLoadingPrevious] = useState(false)\n const [loadingNext, setLoadingNext] = useState(false)\n const [requestCount, setRequestCount] = useState(0)\n const [hasPreviousPage, setHasPreviousPage] = useState(false)\n const [hasNextPage, setHasNextPage] = useState(false)\n\n const [resolvedStartElement, setResolvedStartElement] = useState(null)\n const [resolvedEndElement, setResolvedEndElement] = useState(null)\n const [resolvedItemsElement, setResolvedItemsElement] = useState(null)\n\n // Update elements when refs or props change\n useEffect(() => {\n const element = startElement ? resolveHTMLElement(startElement, startElementFromRef) : startElementFromRef\n setResolvedStartElement(element)\n }, [startElement, startElementFromRef])\n\n useEffect(() => {\n const element = endElement ? resolveHTMLElement(endElement, endElementFromRef) : endElementFromRef\n setResolvedEndElement(element)\n }, [endElement, endElementFromRef])\n\n useEffect(() => {\n const element = itemsElement ? resolveHTMLElement(itemsElement, itemsElementFromRef) : itemsElementFromRef\n setResolvedItemsElement(element)\n }, [itemsElement, itemsElementFromRef])\n\n const scrollableParent = useMemo(() => getScrollableParent(resolvedItemsElement), [resolvedItemsElement])\n\n const callbackPropsRef = useRef({\n buffer,\n onlyNext,\n onlyPrevious,\n reverse,\n preserveUrl,\n })\n\n callbackPropsRef.current = {\n buffer,\n onlyNext,\n onlyPrevious,\n reverse,\n preserveUrl,\n }\n\n const [infiniteScroll, setInfiniteScroll] = useState(null)\n\n const dataManager = useMemo(() => infiniteScroll?.dataManager, [infiniteScroll])\n const elementManager = useMemo(() => infiniteScroll?.elementManager, [infiniteScroll])\n\n const scrollToBottom = useCallback(() => {\n if (scrollableParent) {\n scrollableParent.scrollTo({\n top: scrollableParent.scrollHeight,\n behavior: 'instant',\n })\n } else {\n window.scrollTo({\n top: document.body.scrollHeight,\n behavior: 'instant',\n })\n }\n }, [scrollableParent])\n\n // Main setup effect - only recreate when structural dependencies change\n useEffect(() => {\n if (!resolvedItemsElement) {\n return\n }\n\n function syncStateFromDataManager() {\n setRequestCount(infiniteScrollInstance.dataManager.getRequestCount())\n setHasPreviousPage(infiniteScrollInstance.dataManager.hasPrevious())\n setHasNextPage(infiniteScrollInstance.dataManager.hasNext())\n }\n\n const infiniteScrollInstance = useInfiniteScroll({\n // Data\n getPropName: () => data,\n inReverseMode: () => callbackPropsRef.current.reverse,\n shouldFetchNext: () => !callbackPropsRef.current.onlyPrevious,\n shouldFetchPrevious: () => !callbackPropsRef.current.onlyNext,\n shouldPreserveUrl: () => callbackPropsRef.current.preserveUrl,\n\n // Elements\n getTriggerMargin: () => callbackPropsRef.current.buffer,\n getStartElement: () => resolvedStartElement!,\n getEndElement: () => resolvedEndElement!,\n getItemsElement: () => resolvedItemsElement,\n getScrollableParent: () => scrollableParent,\n\n // Callbacks\n onBeforePreviousRequest: () => setLoadingPrevious(true),\n onBeforeNextRequest: () => setLoadingNext(true),\n onCompletePreviousRequest: () => {\n setLoadingPrevious(false)\n syncStateFromDataManager()\n },\n onCompleteNextRequest: () => {\n setLoadingNext(false)\n syncStateFromDataManager()\n },\n onDataReset: syncStateFromDataManager,\n })\n\n setInfiniteScroll(infiniteScrollInstance)\n const { dataManager, elementManager } = infiniteScrollInstance\n syncStateFromDataManager()\n\n elementManager.setupObservers()\n elementManager.processServerLoadedElements(dataManager.getLastLoadedPage())\n\n if (autoLoad) {\n elementManager.enableTriggers()\n }\n\n return () => {\n infiniteScrollInstance.flush()\n setInfiniteScroll(null)\n }\n }, [data, resolvedItemsElement, resolvedStartElement, resolvedEndElement, scrollableParent])\n\n const manualMode = useMemo(\n () => manual || (manualAfter > 0 && requestCount >= manualAfter),\n [manual, manualAfter, requestCount],\n )\n const autoLoad = useMemo(() => !manualMode, [manualMode])\n\n useEffect(() => {\n autoLoad ? elementManager?.enableTriggers() : elementManager?.disableTriggers()\n }, [autoLoad, onlyNext, onlyPrevious, resolvedStartElement, resolvedEndElement])\n\n useEffect(() => {\n // autoScroll defaults to reverse value if not explicitly set\n const shouldAutoScroll = autoScroll !== undefined ? autoScroll : reverse\n\n if (shouldAutoScroll) {\n scrollToBottom()\n }\n }, [scrollableParent])\n\n useImperativeHandle(\n ref,\n () => ({\n fetchNext: dataManager?.fetchNext || (() => {}),\n fetchPrevious: dataManager?.fetchPrevious || (() => {}),\n hasPrevious: dataManager?.hasPrevious || (() => false),\n hasNext: dataManager?.hasNext || (() => false),\n }),\n [dataManager],\n )\n\n const headerAutoMode = autoLoad && !onlyNext\n const footerAutoMode = autoLoad && !onlyPrevious\n\n const sharedExposed: Pick<\n InfiniteScrollActionSlotProps,\n 'loadingPrevious' | 'loadingNext' | 'hasPrevious' | 'hasNext'\n > = {\n loadingPrevious,\n loadingNext,\n hasPrevious: hasPreviousPage,\n hasNext: hasNextPage,\n }\n\n const exposedPrevious: InfiniteScrollActionSlotProps = {\n loading: loadingPrevious,\n fetch: dataManager?.fetchPrevious ?? (() => {}),\n autoMode: headerAutoMode,\n manualMode: !headerAutoMode,\n hasMore: hasPreviousPage,\n ...sharedExposed,\n }\n\n const exposedNext: InfiniteScrollActionSlotProps = {\n loading: loadingNext,\n fetch: dataManager?.fetchNext ?? (() => {}),\n autoMode: footerAutoMode,\n manualMode: !footerAutoMode,\n hasMore: hasNextPage,\n ...sharedExposed,\n }\n\n const exposedSlot: InfiniteScrollSlotProps = {\n loading: loadingPrevious || loadingNext,\n loadingPrevious,\n loadingNext,\n }\n\n const renderElements = []\n\n // Only render previous trigger if not using custom element selector/ref\n if (!startElement) {\n renderElements.push(\n createElement(\n 'div',\n { ref: startElementRef },\n // Render previous slot or fallback to loading indicator\n renderSlot(previous, exposedPrevious, loadingPrevious ? renderSlot(loading, exposedPrevious) : null),\n ),\n )\n }\n\n renderElements.push(\n createElement(\n as,\n { ...props, ref: itemsElementRef },\n typeof children === 'function' ? children(exposedSlot) : children,\n ),\n )\n\n // Only render next trigger if not using custom element selector/ref\n if (!endElement) {\n renderElements.push(\n createElement(\n 'div',\n { ref: endElementRef },\n // Render next slot or fallback to loading indicator\n renderSlot(next, exposedNext, loadingNext ? renderSlot(loading, exposedNext) : null),\n ),\n )\n }\n\n return createElement(React.Fragment, {}, ...(reverse ? [...renderElements].reverse() : renderElements))\n },\n)\n\nInfiniteScroll.displayName = 'InertiaInfiniteScroll'\n\nexport default InfiniteScroll\n" }, { "path": "packages/react/src/Link.ts", "content": "import {\n ActiveVisit,\n isUrlMethodPair,\n LinkComponentBaseProps,\n LinkPrefetchOption,\n mergeDataIntoQueryString,\n Method,\n PendingVisit,\n router,\n shouldIntercept,\n shouldNavigate,\n VisitOptions,\n} from '@inertiajs/core'\nimport { createElement, ElementType, forwardRef, useEffect, useMemo, useRef, useState } from 'react'\nimport { config } from '.'\n\nconst noop = () => undefined\n\ninterface BaseInertiaLinkProps extends LinkComponentBaseProps {\n as?: ElementType\n onClick?: (event: React.MouseEvent) => void\n}\n\nexport type InertiaLinkProps = BaseInertiaLinkProps &\n Omit, keyof BaseInertiaLinkProps> &\n Omit, keyof BaseInertiaLinkProps>\n\nconst Link = forwardRef(\n (\n {\n children,\n as = 'a',\n data = {},\n href = '',\n method = 'get',\n preserveScroll = false,\n preserveState = null,\n preserveUrl = false,\n replace = false,\n only = [],\n except = [],\n headers = {},\n queryStringArrayFormat = 'brackets',\n async = false,\n onClick = noop,\n onCancelToken = noop,\n onBefore = noop,\n onStart = noop,\n onProgress = noop,\n onFinish = noop,\n onCancel = noop,\n onSuccess = noop,\n onError = noop,\n onPrefetching = noop,\n onPrefetched = noop,\n prefetch = false,\n cacheFor = 0,\n cacheTags = [],\n viewTransition = false,\n ...props\n },\n ref,\n ) => {\n const [inFlightCount, setInFlightCount] = useState(0)\n const hoverTimeout = useRef(undefined)\n\n const _method = useMemo(() => {\n return isUrlMethodPair(href) ? href.method : (method.toLowerCase() as Method)\n }, [href, method])\n\n const _as = useMemo(() => {\n if (typeof as !== 'string' || as.toLowerCase() !== 'a') {\n // Custom component or element\n return as\n }\n\n return _method !== 'get' ? 'button' : as.toLowerCase()\n }, [as, _method])\n\n const mergeDataArray = useMemo(\n () => mergeDataIntoQueryString(_method, isUrlMethodPair(href) ? href.url : href, data, queryStringArrayFormat),\n [href, _method, data, queryStringArrayFormat],\n )\n\n const url = useMemo(() => mergeDataArray[0], [mergeDataArray])\n const _data = useMemo(() => mergeDataArray[1], [mergeDataArray])\n\n const baseParams = useMemo(\n () => ({\n data: _data,\n method: _method,\n preserveScroll,\n preserveState: preserveState ?? _method !== 'get',\n preserveUrl,\n replace,\n only,\n except,\n headers,\n async,\n }),\n [_data, _method, preserveScroll, preserveState, preserveUrl, replace, only, except, headers, async],\n )\n\n const visitParams = useMemo(\n () => ({\n ...baseParams,\n viewTransition,\n onCancelToken,\n onBefore,\n onStart(visit: PendingVisit) {\n setInFlightCount((count) => count + 1)\n onStart(visit)\n },\n onProgress,\n onFinish(visit: ActiveVisit) {\n setInFlightCount((count) => count - 1)\n onFinish(visit)\n },\n onCancel,\n onSuccess,\n onError,\n }),\n [\n baseParams,\n viewTransition,\n onCancelToken,\n onBefore,\n onStart,\n onProgress,\n onFinish,\n onCancel,\n onSuccess,\n onError,\n ],\n )\n\n const prefetchModes: LinkPrefetchOption[] = useMemo(\n () => {\n if (prefetch === true) {\n return ['hover']\n }\n\n if (prefetch === false) {\n return []\n }\n\n if (Array.isArray(prefetch)) {\n return prefetch\n }\n\n return [prefetch]\n },\n Array.isArray(prefetch) ? prefetch : [prefetch],\n )\n\n const cacheForValue = useMemo(() => {\n if (cacheFor !== 0) {\n // If they've provided a value, respect it\n return cacheFor\n }\n\n if (prefetchModes.length === 1 && prefetchModes[0] === 'click') {\n // If they've only provided a prefetch mode of 'click',\n // we should only prefetch for the next request but not keep it around\n return 0\n }\n\n // Otherwise, default to 30 seconds\n return config.get('prefetch.cacheFor')\n }, [cacheFor, prefetchModes])\n\n const doPrefetch = useMemo(() => {\n return () => {\n router.prefetch(\n url,\n {\n ...baseParams,\n onPrefetching,\n onPrefetched,\n },\n { cacheFor: cacheForValue, cacheTags },\n )\n }\n }, [url, baseParams, onPrefetching, onPrefetched, cacheForValue, cacheTags])\n\n useEffect(() => {\n return () => {\n clearTimeout(hoverTimeout.current)\n }\n }, [])\n\n useEffect(() => {\n if (prefetchModes.includes('mount')) {\n setTimeout(() => doPrefetch())\n }\n }, prefetchModes)\n\n const regularEvents = {\n onClick: (event: React.MouseEvent) => {\n onClick(event)\n\n if (shouldIntercept(event)) {\n event.preventDefault()\n\n router.visit(url, visitParams)\n }\n },\n }\n\n const prefetchHoverEvents = {\n onMouseEnter: () => {\n hoverTimeout.current = window.setTimeout(() => {\n doPrefetch()\n }, config.get('prefetch.hoverDelay'))\n },\n onMouseLeave: () => {\n clearTimeout(hoverTimeout.current)\n },\n onClick: regularEvents.onClick,\n }\n\n const prefetchClickEvents = {\n onMouseDown: (event: React.MouseEvent) => {\n if (shouldIntercept(event)) {\n event.preventDefault()\n doPrefetch()\n }\n },\n onKeyDown: (event: React.KeyboardEvent) => {\n if (shouldNavigate(event)) {\n event.preventDefault()\n doPrefetch()\n }\n },\n onMouseUp: (event: React.MouseEvent) => {\n if (shouldIntercept(event)) {\n event.preventDefault()\n router.visit(url, visitParams)\n }\n },\n onKeyUp: (event: React.KeyboardEvent) => {\n if (shouldNavigate(event)) {\n event.preventDefault()\n router.visit(url, visitParams)\n }\n },\n onClick: (event: React.MouseEvent) => {\n onClick(event)\n\n if (shouldIntercept(event)) {\n // Let the mouseup/keyup event handle the visit\n event.preventDefault()\n }\n },\n }\n\n const elProps = useMemo(() => {\n if (_as === 'button') {\n return { type: 'button' }\n }\n\n if (_as === 'a' || typeof _as !== 'string') {\n return { href: url }\n }\n\n return {}\n }, [_as, url])\n\n return createElement(\n _as,\n {\n ...props,\n ...elProps,\n ref,\n ...(() => {\n if (prefetchModes.includes('hover')) {\n return prefetchHoverEvents\n }\n\n if (prefetchModes.includes('click')) {\n return prefetchClickEvents\n }\n\n return regularEvents\n })(),\n 'data-loading': inFlightCount > 0 ? '' : undefined,\n },\n children,\n )\n },\n)\nLink.displayName = 'InertiaLink'\n\nexport default Link\n" }, { "path": "packages/react/src/PageContext.ts", "content": "import { Page } from '@inertiajs/core'\nimport { createContext } from 'react'\n\nconst pageContext = createContext(null)\npageContext.displayName = 'InertiaPageContext'\n\nexport default pageContext\n" }, { "path": "packages/react/src/WhenVisible.ts", "content": "import { ReloadOptions, router } from '@inertiajs/core'\nimport { createElement, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport usePage from './usePage'\n\ninterface WhenVisibleSlotProps {\n fetching: boolean\n}\n\ninterface WhenVisibleProps {\n children: ReactNode | ((props: WhenVisibleSlotProps) => ReactNode)\n fallback: ReactNode | (() => ReactNode)\n data?: string | string[]\n params?: ReloadOptions\n buffer?: number\n as?: string\n always?: boolean\n}\n\nconst WhenVisible = ({ children, data, params, buffer, as, always, fallback }: WhenVisibleProps) => {\n always = always ?? false\n as = as ?? 'div'\n fallback = fallback ?? null\n\n const pageProps = usePage().props\n const keys = useMemo(() => (data ? (Array.isArray(data) ? data : [data]) : []), [data])\n\n const [loaded, setLoaded] = useState(() => keys.length > 0 && keys.every((key) => pageProps[key] !== undefined))\n const [isFetching, setIsFetching] = useState(false)\n const fetching = useRef(false)\n const ref = useRef(null)\n const observer = useRef(null)\n const getReloadParamsRef = useRef<() => Partial>(() => ({}))\n\n useEffect(() => {\n if (keys.length > 0) {\n setLoaded(keys.every((key) => pageProps[key] !== undefined))\n }\n }, [pageProps, keys])\n\n const getReloadParams = useCallback<() => Partial>(() => {\n const reloadParams: Partial = { ...params }\n\n if (data) {\n reloadParams.only = (Array.isArray(data) ? data : [data]) as string[]\n }\n\n return reloadParams\n }, [params, data])\n\n getReloadParamsRef.current = getReloadParams\n\n const registerObserver = () => {\n observer.current?.disconnect()\n\n observer.current = new IntersectionObserver(\n (entries) => {\n if (!entries[0].isIntersecting) {\n return\n }\n\n if (fetching.current) {\n return\n }\n\n if (!always && loaded) {\n return\n }\n\n fetching.current = true\n setIsFetching(true)\n\n const reloadParams = getReloadParamsRef.current()\n\n router.reload({\n ...reloadParams,\n onStart: (e) => {\n fetching.current = true\n setIsFetching(true)\n reloadParams.onStart?.(e)\n },\n onFinish: (e) => {\n setLoaded(true)\n fetching.current = false\n setIsFetching(false)\n reloadParams.onFinish?.(e)\n\n if (!always) {\n observer.current?.disconnect()\n }\n },\n })\n },\n {\n rootMargin: `${buffer || 0}px`,\n },\n )\n\n observer.current.observe(ref.current!)\n }\n\n useEffect(() => {\n if (!ref.current) {\n return\n }\n\n if (loaded && !always) {\n return\n }\n\n registerObserver()\n\n return () => {\n observer.current?.disconnect()\n }\n }, [always, loaded, buffer])\n\n const resolveChildren = () => (typeof children === 'function' ? children({ fetching: isFetching }) : children)\n const resolveFallback = () => (typeof fallback === 'function' ? fallback() : fallback)\n\n if (always || !loaded) {\n return createElement(\n as,\n {\n props: null,\n ref,\n },\n loaded ? resolveChildren() : resolveFallback(),\n )\n }\n\n return loaded ? resolveChildren() : null\n}\n\nWhenVisible.displayName = 'InertiaWhenVisible'\n\nexport default WhenVisible\n" }, { "path": "packages/react/src/createInertiaApp.ts", "content": "import {\n CreateInertiaAppOptionsForCSR,\n CreateInertiaAppOptionsForSSR,\n getInitialPageFromDOM,\n InertiaAppResponse,\n InertiaAppSSRResponse,\n Page,\n PageProps,\n router,\n setupProgress,\n SharedPageProps,\n} from '@inertiajs/core'\nimport { createElement, Fragment, ReactElement } from 'react'\nimport { renderToString } from 'react-dom/server'\nimport App, { InertiaAppProps, type InertiaApp } from './App'\nimport { config } from './index'\nimport { ReactComponent, ReactInertiaAppConfig } from './types'\n\nexport type SetupOptions = {\n el: ElementType\n App: InertiaApp\n props: InertiaAppProps\n}\n\n// The 'unknown' type is necessary for backwards compatibility...\ntype ComponentResolver = (\n name: string,\n) => ReactComponent | Promise | { default: ReactComponent } | unknown\n\ntype InertiaAppOptionsForCSR = CreateInertiaAppOptionsForCSR<\n SharedProps,\n ComponentResolver,\n SetupOptions,\n void,\n ReactInertiaAppConfig\n>\n\ntype InertiaAppOptionsForSSR = CreateInertiaAppOptionsForSSR<\n SharedProps,\n ComponentResolver,\n SetupOptions,\n ReactElement,\n ReactInertiaAppConfig\n> & {\n render: typeof renderToString\n}\n\nexport default async function createInertiaApp(\n options: InertiaAppOptionsForCSR,\n): Promise\nexport default async function createInertiaApp(\n options: InertiaAppOptionsForSSR,\n): Promise\nexport default async function createInertiaApp({\n id = 'app',\n resolve,\n setup,\n title,\n progress = {},\n page,\n render,\n defaults = {},\n}: InertiaAppOptionsForCSR | InertiaAppOptionsForSSR): InertiaAppResponse {\n config.replace(defaults)\n\n const isServer = typeof window === 'undefined'\n const useScriptElementForInitialPage = config.get('future.useScriptElementForInitialPage')\n const initialPage = page || getInitialPageFromDOM>(id, useScriptElementForInitialPage)!\n\n // @ts-expect-error - This can be improved once we remove the 'unknown' type from the resolver...\n const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)\n\n let head: string[] = []\n\n const reactApp = await Promise.all([\n resolveComponent(initialPage.component),\n router.decryptHistory().catch(() => {}),\n ]).then(([initialComponent]) => {\n const props = {\n initialPage,\n initialComponent,\n resolveComponent,\n titleCallback: title,\n }\n\n if (isServer) {\n const ssrSetup = setup as (options: SetupOptions) => ReactElement\n\n return ssrSetup({\n el: null,\n App,\n props: { ...props, onHeadUpdate: (elements: string[]) => (head = elements) },\n })\n }\n\n const csrSetup = setup as (options: SetupOptions) => void\n\n return csrSetup({\n el: document.getElementById(id)!,\n App,\n props,\n })\n })\n\n if (!isServer && progress) {\n setupProgress(progress)\n }\n\n if (isServer && render) {\n const element = () => {\n if (!useScriptElementForInitialPage) {\n return createElement(\n 'div',\n {\n id,\n 'data-page': JSON.stringify(initialPage),\n },\n reactApp as ReactElement,\n )\n }\n\n return createElement(\n Fragment,\n null,\n createElement('script', {\n 'data-page': id,\n type: 'application/json',\n dangerouslySetInnerHTML: { __html: JSON.stringify(initialPage).replace(/\\//g, '\\\\/') },\n }),\n createElement('div', { id }, reactApp as ReactElement),\n )\n }\n\n const body = await render(element())\n\n return { head, body }\n }\n}\n" }, { "path": "packages/react/src/index.ts", "content": "import { config as coreConfig, progress as Progress, router as Router } from '@inertiajs/core'\nimport { ReactInertiaAppConfig } from './types'\n\nexport const progress = Progress\nexport const router = Router\nexport { default as App } from './App'\nexport { default as createInertiaApp } from './createInertiaApp'\nexport { default as Deferred } from './Deferred'\nexport { default as Form, useFormContext } from './Form'\nexport { default as Head } from './Head'\nexport { default as InfiniteScroll } from './InfiniteScroll'\nexport { InertiaLinkProps, default as Link } from './Link'\nexport { ReactComponent as ResolvedComponent } from './types'\nexport {\n InertiaFormProps,\n InertiaPrecognitiveFormProps,\n SetDataAction,\n SetDataByKeyValuePair,\n SetDataByMethod,\n SetDataByObject,\n default as useForm,\n} from './useForm'\nexport { default as usePage } from './usePage'\nexport { default as usePoll } from './usePoll'\nexport { default as usePrefetch } from './usePrefetch'\nexport { default as useRemember } from './useRemember'\nexport { default as WhenVisible } from './WhenVisible'\n\nexport const config = coreConfig.extend()\n" }, { "path": "packages/react/src/react.ts", "content": "import React, { DependencyList, EffectCallback, useEffect, useLayoutEffect } from 'react'\n\n// Inspired by react-redux, this hook uses useLayoutEffect in the browser, and useEffect\n// when using SSR. Currently, useLayoutEffect doesn't work when rendered on the server.\nexport function useIsomorphicLayoutEffect(effect: EffectCallback, deps?: DependencyList): void {\n typeof window === 'undefined' ? useEffect(effect, deps) : useLayoutEffect(effect, deps)\n}\n\n// React.use() was introduced in React 19\nexport const isReact19 = typeof React.use === 'function'\n" }, { "path": "packages/react/src/server.ts", "content": "export { default as default } from '@inertiajs/core/server'\n" }, { "path": "packages/react/src/types.ts", "content": "import { PageHandler } from '@inertiajs/core'\nimport { ComponentType, ReactNode } from 'react'\n\nexport type LayoutFunction = (page: ReactNode) => ReactNode\nexport type LayoutComponent = ComponentType<{ children: ReactNode }>\n\nexport type ReactComponent = ComponentType & {\n layout?: LayoutComponent | LayoutComponent[] | LayoutFunction\n}\n\nexport type ReactPageHandlerArgs = Parameters>[0]\nexport type ReactInertiaAppConfig = {}\n" }, { "path": "packages/react/src/useForm.ts", "content": "import {\n CancelToken,\n Errors,\n ErrorValue,\n FormDataErrors,\n FormDataKeys,\n FormDataType,\n FormDataValues,\n Method,\n Progress,\n RequestPayload,\n router,\n UrlMethodPair,\n UseFormArguments,\n UseFormSubmitArguments,\n UseFormSubmitOptions,\n UseFormTransformCallback,\n UseFormUtils,\n UseFormWithPrecognitionArguments,\n VisitOptions,\n} from '@inertiajs/core'\nimport {\n createValidator,\n NamedInputEvent,\n PrecognitionPath,\n resolveName,\n toSimpleValidationErrors,\n ValidationConfig,\n Validator,\n} from 'laravel-precognition'\nimport { cloneDeep, get, has, isEqual, set } from 'lodash-es'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { config } from '.'\nimport { useIsomorphicLayoutEffect } from './react'\nimport useRemember from './useRemember'\n\nexport type SetDataByObject = (data: Partial) => void\nexport type SetDataByMethod = (data: (previousData: TForm) => TForm) => void\nexport type SetDataByKeyValuePair = >(\n key: K,\n value: FormDataValues,\n) => void\nexport type SetDataAction> = SetDataByObject &\n SetDataByMethod &\n SetDataByKeyValuePair\n\ntype PrecognitionValidationConfig = ValidationConfig & {\n only?: TKeys[] | Iterable | ArrayLike\n}\n\nexport interface InertiaFormProps {\n data: TForm\n isDirty: boolean\n errors: FormDataErrors\n hasErrors: boolean\n processing: boolean\n progress: Progress | null\n wasSuccessful: boolean\n recentlySuccessful: boolean\n setData: SetDataAction\n transform: (callback: UseFormTransformCallback) => void\n setDefaults: {\n (): void\n >(field: T, value: FormDataValues): void\n (fields: Partial): void\n }\n reset: >(...fields: K[]) => void\n clearErrors: >(...fields: K[]) => void\n resetAndClearErrors: >(...fields: K[]) => void\n setError: {\n >(field: K, value: ErrorValue): void\n (errors: FormDataErrors): void\n }\n submit: (...args: UseFormSubmitArguments) => void\n get: (url: string, options?: UseFormSubmitOptions) => void\n patch: (url: string, options?: UseFormSubmitOptions) => void\n post: (url: string, options?: UseFormSubmitOptions) => void\n put: (url: string, options?: UseFormSubmitOptions) => void\n delete: (url: string, options?: UseFormSubmitOptions) => void\n cancel: () => void\n dontRemember: >(...fields: K[]) => InertiaFormProps\n withPrecognition: (...args: UseFormWithPrecognitionArguments) => InertiaPrecognitiveFormProps\n}\n\nexport interface InertiaFormValidationProps {\n invalid: >(field: K) => boolean\n setValidationTimeout: (duration: number) => InertiaPrecognitiveFormProps\n touch: >(\n field: K | NamedInputEvent | Array,\n ...fields: K[]\n ) => InertiaPrecognitiveFormProps\n touched: >(field?: K) => boolean\n valid: >(field: K) => boolean\n validate: | PrecognitionPath>(\n field?: K | NamedInputEvent | PrecognitionValidationConfig,\n config?: PrecognitionValidationConfig,\n ) => InertiaPrecognitiveFormProps\n validateFiles: () => InertiaPrecognitiveFormProps\n validating: boolean\n validator: () => Validator\n withAllErrors: () => InertiaPrecognitiveFormProps\n withoutFileValidation: () => InertiaPrecognitiveFormProps\n // Backward compatibility for easy migration from the original Precognition libraries\n setErrors: (errors: FormDataErrors) => InertiaPrecognitiveFormProps\n forgetError: | NamedInputEvent>(field: K) => InertiaPrecognitiveFormProps\n}\n\nexport type InertiaForm = InertiaFormProps\nexport type InertiaPrecognitiveFormProps = InertiaFormProps &\n InertiaFormValidationProps\n\nexport default function useForm>(\n method: Method | (() => Method),\n url: string | (() => string),\n data: TForm | (() => TForm),\n): InertiaPrecognitiveFormProps\nexport default function useForm>(\n urlMethodPair: UrlMethodPair | (() => UrlMethodPair),\n data: TForm | (() => TForm),\n): InertiaPrecognitiveFormProps\nexport default function useForm>(\n rememberKey: string,\n data: TForm | (() => TForm),\n): InertiaFormProps\nexport default function useForm>(data: TForm | (() => TForm)): InertiaFormProps\nexport default function useForm>(): InertiaFormProps\nexport default function useForm>(\n ...args: UseFormArguments\n): InertiaFormProps | InertiaPrecognitiveFormProps {\n const isMounted = useRef(false)\n const parsedArgs = UseFormUtils.parseUseFormArguments(...args)\n\n const { rememberKey, data: initialData } = parsedArgs\n const precognitionEndpoint = useRef(parsedArgs.precognitionEndpoint)\n\n const [defaults, setDefaults] = useState(\n typeof initialData === 'function' ? cloneDeep(initialData()) : cloneDeep(initialData),\n )\n const cancelToken = useRef(null)\n const recentlySuccessfulTimeoutId = useRef(undefined)\n const excludeKeysRef = useRef[]>([])\n const [data, setData] = rememberKey\n ? useRemember(defaults, `${rememberKey}:data`, excludeKeysRef)\n : useState(defaults)\n const [errors, setErrors] = rememberKey\n ? useRemember({} as FormDataErrors, `${rememberKey}:errors`)\n : useState({} as FormDataErrors)\n const [hasErrors, setHasErrors] = useState(false)\n const [processing, setProcessing] = useState(false)\n const [progress, setProgress] = useState(null)\n const [wasSuccessful, setWasSuccessful] = useState(false)\n const [recentlySuccessful, setRecentlySuccessful] = useState(false)\n const transform = useRef>((data) => data)\n const isDirty = useMemo(() => !isEqual(data, defaults), [data, defaults])\n\n // Precognition state\n const validatorRef = useRef(null)\n const [validating, setValidating] = useState(false)\n const [touchedFields, setTouchedFields] = useState([])\n const [validFields, setValidFields] = useState([])\n const withAllErrors = useRef(null)\n\n useEffect(() => {\n isMounted.current = true\n return () => {\n isMounted.current = false\n }\n }, [])\n\n // Track if setDefaults was called manually during onSuccess to avoid\n // overriding user's custom defaults with automatic behavior.\n const setDefaultsCalledInOnSuccess = useRef(false)\n\n const submit = useCallback(\n (...args: UseFormSubmitArguments) => {\n const { method, url, options } = UseFormUtils.parseSubmitArguments(args, precognitionEndpoint.current)\n\n setDefaultsCalledInOnSuccess.current = false\n\n const _options: VisitOptions = {\n ...options,\n onCancelToken: (token) => {\n cancelToken.current = token\n\n if (options.onCancelToken) {\n return options.onCancelToken(token)\n }\n },\n onBefore: (visit) => {\n setWasSuccessful(false)\n setRecentlySuccessful(false)\n clearTimeout(recentlySuccessfulTimeoutId.current)\n\n if (options.onBefore) {\n return options.onBefore(visit)\n }\n },\n onStart: (visit) => {\n setProcessing(true)\n\n if (options.onStart) {\n return options.onStart(visit)\n }\n },\n onProgress: (event) => {\n setProgress(event || null)\n\n if (options.onProgress) {\n return options.onProgress(event)\n }\n },\n onSuccess: async (page) => {\n if (isMounted.current) {\n setProcessing(false)\n setProgress(null)\n setErrors({} as FormDataErrors)\n setHasErrors(false)\n setWasSuccessful(true)\n setRecentlySuccessful(true)\n recentlySuccessfulTimeoutId.current = setTimeout(() => {\n if (isMounted.current) {\n setRecentlySuccessful(false)\n }\n }, config.get('form.recentlySuccessfulDuration'))\n }\n\n const onSuccess = options.onSuccess ? await options.onSuccess(page) : null\n\n if (isMounted.current && !setDefaultsCalledInOnSuccess.current) {\n setData((data) => {\n setDefaults(cloneDeep(data))\n return data\n })\n }\n\n return onSuccess\n },\n onError: (errors) => {\n if (isMounted.current) {\n setProcessing(false)\n setProgress(null)\n setErrors(errors as FormDataErrors)\n setHasErrors(Object.keys(errors).length > 0)\n validatorRef.current?.setErrors(errors as Errors)\n }\n\n if (options.onError) {\n return options.onError(errors)\n }\n },\n onCancel: () => {\n if (isMounted.current) {\n setProcessing(false)\n setProgress(null)\n }\n\n if (options.onCancel) {\n return options.onCancel()\n }\n },\n onFinish: (visit) => {\n if (isMounted.current) {\n setProcessing(false)\n setProgress(null)\n }\n\n cancelToken.current = null\n\n if (options.onFinish) {\n return options.onFinish(visit)\n }\n },\n }\n\n const transformedData = transform.current(data) as RequestPayload\n\n if (method === 'delete') {\n router.delete(url, { ..._options, data: transformedData })\n } else {\n router[method](url, transformedData, _options)\n }\n },\n [data, setErrors, transform],\n )\n\n const setDataFunction = useCallback(\n (keyOrData: FormDataKeys | Function | Partial, maybeValue?: any) => {\n if (typeof keyOrData === 'string') {\n setData((data) => set(cloneDeep(data), keyOrData, maybeValue))\n } else if (typeof keyOrData === 'function') {\n setData((data) => keyOrData(data))\n } else {\n setData(keyOrData as TForm)\n }\n },\n [setData],\n )\n\n const [dataAsDefaults, setDataAsDefaults] = useState(false)\n\n const dataRef = useRef(data)\n\n useEffect(() => {\n dataRef.current = data\n })\n\n const setDefaultsFunction = useCallback(\n (fieldOrFields?: FormDataKeys | Partial, maybeValue?: unknown) => {\n setDefaultsCalledInOnSuccess.current = true\n let newDefaults = {} as TForm\n\n if (typeof fieldOrFields === 'undefined') {\n newDefaults = { ...dataRef.current }\n setDefaults(dataRef.current)\n // If setData was called right before setDefaults, data was not\n // updated in that render yet, so we set a flag to update\n // defaults right after the next render.\n setDataAsDefaults(true)\n } else {\n setDefaults((defaults) => {\n newDefaults =\n typeof fieldOrFields === 'string'\n ? set(cloneDeep(defaults), fieldOrFields, maybeValue)\n : Object.assign(cloneDeep(defaults), fieldOrFields)\n\n return newDefaults as TForm\n })\n }\n\n validatorRef.current?.defaults(newDefaults)\n },\n [setDefaults],\n )\n\n useIsomorphicLayoutEffect(() => {\n if (!dataAsDefaults) {\n return\n }\n\n if (isDirty) {\n // Data has been updated in this next render and is different from\n // the defaults, so now we can set defaults to the current data.\n setDefaults(data)\n }\n\n setDataAsDefaults(false)\n }, [dataAsDefaults])\n\n const reset = useCallback(\n (...fields: string[]) => {\n if (fields.length === 0) {\n setData(defaults)\n } else {\n setData((data) =>\n (fields as Array>)\n .filter((key) => has(defaults, key))\n .reduce(\n (carry, key) => {\n return set(carry, key, get(defaults, key))\n },\n { ...data } as TForm,\n ),\n )\n }\n\n validatorRef.current?.reset(...fields)\n },\n [setData, defaults],\n )\n\n const setError = useCallback(\n (fieldOrFields: FormDataKeys | FormDataErrors, maybeValue?: ErrorValue) => {\n setErrors((errors) => {\n const newErrors = {\n ...errors,\n ...(typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : fieldOrFields),\n }\n setHasErrors(Object.keys(newErrors).length > 0)\n\n validatorRef.current?.setErrors(newErrors)\n\n return newErrors\n })\n },\n [setErrors, setHasErrors],\n )\n\n const clearErrors = useCallback(\n (...fields: string[]) => {\n setErrors((errors) => {\n const newErrors = Object.keys(errors).reduce(\n (carry, field) => ({\n ...carry,\n ...(fields.length > 0 && !fields.includes(field) ? { [field]: (errors as Errors)[field] } : {}),\n }),\n {},\n )\n setHasErrors(Object.keys(newErrors).length > 0)\n\n if (validatorRef.current) {\n if (fields.length === 0) {\n validatorRef.current.setErrors({})\n } else {\n fields.forEach(validatorRef.current.forgetError)\n }\n }\n\n return newErrors as FormDataErrors\n })\n },\n [setErrors, setHasErrors],\n )\n\n const resetAndClearErrors = useCallback(\n (...fields: string[]) => {\n reset(...fields)\n clearErrors(...fields)\n },\n [reset, clearErrors],\n )\n\n const createSubmitMethod =\n (method: Method) =>\n (url: string, options: VisitOptions = {}) => {\n submit(method, url, options)\n }\n const getMethod = useCallback(createSubmitMethod('get'), [submit])\n const post = useCallback(createSubmitMethod('post'), [submit])\n const put = useCallback(createSubmitMethod('put'), [submit])\n const patch = useCallback(createSubmitMethod('patch'), [submit])\n const deleteMethod = useCallback(createSubmitMethod('delete'), [submit])\n\n const cancel = useCallback(() => {\n if (cancelToken.current) {\n cancelToken.current.cancel()\n }\n }, [])\n\n const transformFunction = useCallback((callback: UseFormTransformCallback) => {\n transform.current = callback\n }, [])\n\n // Build base form properties\n const form = {\n data,\n setData: setDataFunction,\n isDirty,\n errors,\n hasErrors,\n processing,\n progress,\n wasSuccessful,\n recentlySuccessful,\n transform: transformFunction,\n setDefaults: setDefaultsFunction,\n reset,\n setError,\n clearErrors,\n resetAndClearErrors,\n submit,\n get: getMethod,\n post,\n put,\n patch,\n delete: deleteMethod,\n cancel,\n dontRemember: >(...keys: K[]) => {\n excludeKeysRef.current = keys\n return form\n },\n } as InertiaFormProps\n\n const tap = (value: T, callback: (value: T) => unknown): T => {\n callback(value)\n return value\n }\n\n const valid = useCallback(\n >(field: K) => validFields.includes(field as string),\n [validFields],\n )\n\n const invalid = useCallback(>(field: K) => field in errors, [errors])\n\n const touched = useCallback(\n >(field?: K) =>\n typeof field === 'string' ? touchedFields.includes(field as string) : touchedFields.length > 0,\n [touchedFields],\n )\n\n const validate = (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) => {\n // Handle config object passed as first argument\n if (typeof field === 'object' && !('target' in field)) {\n config = field\n field = undefined\n }\n\n if (field === undefined) {\n validatorRef.current!.validate(config)\n } else {\n const fieldName = resolveName(field)\n const currentData = dataRef.current\n const transformedData = transform.current(currentData) as Record\n validatorRef.current!.validate(fieldName, get(transformedData, fieldName), config)\n }\n\n return form\n }\n\n // Create withPrecognition method that returns a precognitive form\n const withPrecognition = (...args: UseFormWithPrecognitionArguments): InertiaPrecognitiveFormProps => {\n precognitionEndpoint.current = UseFormUtils.createWayfinderCallback(...args)\n\n if (!validatorRef.current) {\n const validator = createValidator((client) => {\n const { method, url } = precognitionEndpoint.current!()\n // Get the current data from the ref, not the closure\n const currentData = dataRef.current\n const transformedData = transform.current(currentData) as Record\n return client[method](url, transformedData)\n }, cloneDeep(defaults))\n\n validatorRef.current = validator\n\n validator\n .on('validatingChanged', () => {\n setValidating(validator.validating())\n })\n .on('validatedChanged', () => {\n setValidFields(validator.valid())\n })\n .on('touchedChanged', () => {\n setTouchedFields(validator.touched())\n })\n .on('errorsChanged', () => {\n const validationErrors =\n (withAllErrors.current ?? config.get('form.withAllErrors'))\n ? validator.errors()\n : toSimpleValidationErrors(validator.errors())\n\n setErrors(validationErrors as FormDataErrors)\n setHasErrors(Object.keys(validationErrors).length > 0)\n setValidFields(validator.valid())\n })\n }\n\n // Create precognitive form with all validation methods\n const precognitiveForm = Object.assign(form, {\n validating,\n validator: () => validatorRef.current!,\n valid,\n invalid,\n touched,\n withoutFileValidation: () => tap(precognitiveForm, () => validatorRef.current?.withoutFileValidation()),\n touch: (\n field: FormDataKeys | NamedInputEvent | Array>,\n ...fields: FormDataKeys[]\n ) => {\n if (Array.isArray(field)) {\n validatorRef.current?.touch(field)\n } else if (typeof field === 'string') {\n validatorRef.current?.touch([field, ...fields])\n } else {\n validatorRef.current?.touch(field)\n }\n\n return precognitiveForm\n },\n withAllErrors: () => tap(precognitiveForm, () => (withAllErrors.current = true)),\n setValidationTimeout: (duration: number) =>\n tap(precognitiveForm, () => validatorRef.current?.setTimeout(duration)),\n validateFiles: () => tap(precognitiveForm, () => validatorRef.current?.validateFiles()),\n validate,\n setErrors: (errors: FormDataErrors) => tap(precognitiveForm, () => form.setError(errors)),\n forgetError: (field: FormDataKeys | NamedInputEvent) =>\n tap(precognitiveForm, () =>\n form.clearErrors(resolveName(field as string | NamedInputEvent) as FormDataKeys),\n ),\n }) as InertiaPrecognitiveFormProps\n\n return precognitiveForm\n }\n\n form.withPrecognition = withPrecognition\n\n return precognitionEndpoint.current ? form.withPrecognition(precognitionEndpoint.current) : form\n}\n" }, { "path": "packages/react/src/usePage.ts", "content": "import { Page, PageProps, SharedPageProps } from '@inertiajs/core'\nimport React from 'react'\nimport PageContext from './PageContext'\nimport { isReact19 } from './react'\n\nexport default function usePage(): Page {\n // React.use() was introduced in React 19, fallback to React.useContext() for earlier versions\n const page = isReact19 ? React.use(PageContext) : React.useContext(PageContext)\n\n if (!page) {\n throw new Error('usePage must be used within the Inertia component')\n }\n\n return page as Page\n}\n" }, { "path": "packages/react/src/usePoll.ts", "content": "import { PollOptions, ReloadOptions, router } from '@inertiajs/core'\nimport { useEffect, useRef } from 'react'\n\nexport default function usePoll(\n interval: number,\n requestOptions: ReloadOptions = {},\n options: PollOptions = {\n keepAlive: false,\n autoStart: true,\n },\n) {\n const pollRef = useRef(\n router.poll(interval, requestOptions, {\n ...options,\n autoStart: false,\n }),\n )\n\n useEffect(() => {\n if (options.autoStart ?? true) {\n pollRef.current.start()\n }\n\n return () => pollRef.current.stop()\n }, [])\n\n return {\n stop: pollRef.current.stop,\n start: pollRef.current.start,\n }\n}\n" }, { "path": "packages/react/src/usePrefetch.ts", "content": "import { router, VisitOptions } from '@inertiajs/core'\nimport { useEffect, useState } from 'react'\n\nexport default function usePrefetch(options: VisitOptions = {}): {\n lastUpdatedAt: number | null\n isPrefetching: boolean\n isPrefetched: boolean\n flush: () => void\n} {\n const cached = typeof window === 'undefined' ? null : router.getCached(window.location.pathname, options)\n const inFlight = typeof window === 'undefined' ? null : router.getPrefetching(window.location.pathname, options)\n\n const [lastUpdatedAt, setLastUpdatedAt] = useState(cached?.staleTimestamp || null)\n const [isPrefetching, setIsPrefetching] = useState(inFlight !== null)\n const [isPrefetched, setIsPrefetched] = useState(cached !== null)\n\n useEffect(() => {\n const onPrefetchingListener = router.on('prefetching', (e) => {\n if (e.detail.visit.url.pathname === window.location.pathname) {\n setIsPrefetching(true)\n }\n })\n\n const onPrefetchedListener = router.on('prefetched', (e) => {\n if (e.detail.visit.url.pathname === window.location.pathname) {\n setIsPrefetching(false)\n setIsPrefetched(true)\n setLastUpdatedAt(e.detail.fetchedAt)\n }\n })\n\n return () => {\n onPrefetchedListener()\n onPrefetchingListener()\n }\n }, [])\n\n return {\n lastUpdatedAt,\n isPrefetching,\n isPrefetched,\n flush: () => router.flush(window.location.pathname, options),\n }\n}\n" }, { "path": "packages/react/src/useRemember.ts", "content": "import { router } from '@inertiajs/core'\nimport { Dispatch, MutableRefObject, SetStateAction, useEffect, useState } from 'react'\n\nexport default function useRemember(\n initialState: State,\n key?: string,\n excludeKeysRef?: MutableRefObject,\n): [State, Dispatch>] {\n const [state, setState] = useState(() => {\n const restored = router.restore(key) as State\n\n return restored !== undefined ? restored : initialState\n })\n\n useEffect(() => {\n const keys = excludeKeysRef?.current\n if (keys && keys.length > 0 && typeof state === 'object' && state !== null) {\n const filtered = { ...state } as Record\n keys.forEach((k) => delete filtered[k])\n router.remember(filtered, key)\n } else {\n router.remember(state, key)\n }\n }, [state, key])\n\n return [state, setState]\n}\n" }, { "path": "packages/react/test-app/Layouts/NestedLayout.tsx", "content": "import { usePage } from '@inertiajs/react'\nimport { useId, useState } from 'react'\n\nexport default ({ children }: { children: React.ReactNode }) => {\n const [createdAt] = useState(Date.now())\n\n window._inertia_nested_layout_id = useId()\n window._inertia_nested_layout_props = usePage().props\n\n return (\n
\n Nested Layout\n {createdAt}\n
{children}
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Layouts/Prefetch.tsx", "content": "import { Link } from '@inertiajs/react'\n\nexport default ({ children }: { children: React.ReactNode }) => {\n return (\n
\n \n On Hover (Default)\n \n \n On Mount\n \n \n On Click\n \n \n On Hover + Mount\n \n \n On Mount (Once)\n \n \n On Enter\n \n \n On Spacebar\n \n
{children}
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Layouts/SWR.tsx", "content": "import { Link } from '@inertiajs/react'\n\nexport default ({ children }: { children: React.ReactNode }) => {\n return (\n
\n \n 1s Expired\n \n \n 1s Expired (Number)\n \n \n 1s Stale, 2s Expired\n \n \n 1s Stale, 2s Expired (Number)\n \n
{children}
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Layouts/SiteLayout.tsx", "content": "import { usePage } from '@inertiajs/react'\nimport { useId, useState } from 'react'\n\nexport default ({ children }: { children: React.ReactNode }) => {\n const [createdAt] = useState(Date.now())\n\n window._inertia_layout_id = useId()\n window._inertia_site_layout_props = usePage().props\n\n return (\n
\n Site Layout\n {createdAt}\n
{children}
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Layouts/WithScrollRegion.tsx", "content": "import { useEffect, useState } from 'react'\n\nexport default ({ children }: { children: React.ReactNode }) => {\n const [documentScrollTop, setDocumentScrollTop] = useState(0)\n const [documentScrollLeft, setDocumentScrollLeft] = useState(0)\n const [slotScrollTop, setSlotScrollTop] = useState(0)\n const [slotScrollLeft, setSlotScrollLeft] = useState(0)\n\n const handleScrollEvent = () => {\n setDocumentScrollLeft(document.documentElement.scrollLeft)\n setDocumentScrollTop(document.documentElement.scrollTop)\n const slot = document.getElementById('slot')\n if (slot) {\n setSlotScrollTop(slot.scrollTop)\n setSlotScrollLeft(slot.scrollLeft)\n }\n }\n\n useEffect(() => {\n document.addEventListener('scroll', handleScrollEvent)\n\n return () => {\n document.removeEventListener('scroll', handleScrollEvent)\n }\n })\n\n return (\n
\n With scroll regions\n \n
\n Document scroll position is {documentScrollLeft} & {documentScrollTop}\n
\n
\n \n Slot scroll position is {slotScrollLeft} & {slotScrollTop}\n \n \n {children}\n
\n
\n \n )\n}\n" }, { "path": "packages/react/test-app/Layouts/WithoutScrollRegion.tsx", "content": "import { useEffect, useState } from 'react'\n\nexport default ({ children }: { children: React.ReactNode }) => {\n const [documentScrollTop, setDocumentScrollTop] = useState(0)\n const [documentScrollLeft, setDocumentScrollLeft] = useState(0)\n const [slotScrollTop, setSlotScrollTop] = useState(0)\n const [slotScrollLeft, setSlotScrollLeft] = useState(0)\n\n const handleScrollEvent = () => {\n setDocumentScrollLeft(document.documentElement.scrollLeft)\n setDocumentScrollTop(document.documentElement.scrollTop)\n const slot = document.getElementById('slot')\n if (slot) {\n setSlotScrollTop(slot.scrollTop)\n setSlotScrollLeft(slot.scrollLeft)\n }\n }\n\n useEffect(() => {\n document.addEventListener('scroll', handleScrollEvent)\n\n return () => {\n document.removeEventListener('scroll', handleScrollEvent)\n }\n })\n\n return (\n
\n Without scroll regions\n \n
\n Document scroll position is {documentScrollLeft} & {documentScrollTop}\n
\n
\n \n Slot scroll position is {slotScrollLeft} & {slotScrollTop}\n \n
\n {children}\n
\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/Article.tsx", "content": "import { Link } from '@inertiajs/react'\nimport { useEffect, useState } from 'react'\n\nexport default () => {\n const enableSmoothScroll = () => {\n document.documentElement.style.scrollBehavior = 'smooth'\n }\n\n const [scrollLog, setScrollLog] = useState([])\n\n const handleScrollEvent = () => {\n setScrollLog((prev) => [...prev, document.documentElement.scrollTop])\n }\n\n useEffect(() => {\n document.addEventListener('scroll', handleScrollEvent)\n return () => document.removeEventListener('scroll', handleScrollEvent)\n })\n\n return (\n <>\n

Article Header

\n
\n

\n Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id\n minim sit elit. Amet pariatur occaecat pariatur duis eiusmod dolore magna. Et commodo cupidatat in commodo\n elit cupidatat minim qui id non enim ad. Culpa aliquip ad Lorem sit consectetur ullamco culpa duis nisi et\n fugiat mollit eiusmod. Laboris voluptate veniam consequat proident in nulla irure velit.\n

\n

\n Sit sint laboris sunt eiusmod ipsum laborum eiusmod amet commodo exercitation in duis magna. Proident sunt\n minim in elit qui. Id pariatur commodo fugiat excepteur in deserunt Lorem ipsum occaecat est. Excepteur sit\n tempor ipsum ex officia veniam enim amet velit fugiat mollit cillum. Incididunt aliqua nulla id occaecat\n nulla. Non ea ad est occaecat deserunt officia qui commodo exercitation.\n

\n

\n Voluptate laborum quis aliqua ullamco magna amet ullamco laborum qui cillum eu. Dolore dolore aliqua proident\n proident sunt ipsum in. Enim velit dolore labore dolor quis incididunt duis culpa Lorem. Eu adipisicing non\n elit fugiat voluptate labore ipsum dolore consectetur commodo. Et in et cillum duis consequat quis ex eu\n commodo. Eiusmod aliqua excepteur consectetur eiusmod aute et consectetur sit pariatur dolore qui officia\n pariatur.\n

\n

\n Non sunt eu mollit qui reprehenderit. Aute culpa anim voluptate do in esse duis laborum ad dolore. Ullamco\n nisi in nostrud officia do. Duis pariatur officia id duis. Deserunt ad incididunt est sint consectetur\n reprehenderit mollit est Lorem ea pariatur anim dolor adipisicing. Nostrud irure magna nostrud laboris aute\n sunt veniam laboris veniam incididunt sit. Nulla proident ad aliqua fugiat culpa sunt est in dolor velit ad\n irure nulla.\n

\n

\n Do aute laborum deserunt non laborum voluptate voluptate. Anim ut laborum magna sunt cupidatat irure.\n Cupidatat fugiat minim sint cillum laborum excepteur irure id est irure ad occaecat adipisicing enim. Deserunt\n nulla anim proident velit irure nostrud est est reprehenderit consequat pariatur qui. Fugiat Lorem sint eu\n laborum minim pariatur cillum mollit nulla consequat ullamco ex. Ex consectetur ad ut irure fugiat occaecat\n aliqua exercitation cillum ipsum anim dolore tempor.\n

\n

\n Adipisicing consequat irure fugiat Lorem deserunt aliquip do cupidatat. Lorem labore elit ex qui nostrud qui\n cillum sunt adipisicing occaecat. Sunt nostrud amet amet cupidatat fugiat Lorem quis nulla id cillum esse eu.\n Ullamco aliqua dolore irure amet mollit anim velit dolore.\n

\n

\n Veniam cupidatat ipsum ea officia ipsum nisi laborum culpa qui dolore. Aliqua Lorem nisi labore ea velit\n aliquip irure excepteur eu. Laboris proident duis non labore sunt quis aute tempor laboris enim anim eiusmod.\n

\n

\n Minim proident ut aliqua ea ut culpa fugiat ullamco nisi esse nostrud reprehenderit id. Id id ullamco velit\n anim nisi magna Lorem tempor. Et veniam occaecat ut labore consequat fugiat duis.\n

\n

\n Adipisicing ea consectetur adipisicing aute eu pariatur enim labore consequat occaecat consectetur minim nisi.\n Cillum commodo sunt labore reprehenderit. Duis esse excepteur magna tempor eiusmod exercitation Lorem\n reprehenderit excepteur pariatur. Esse cupidatat occaecat magna do aliquip Lorem. Consectetur adipisicing\n consequat dolore nostrud esse eu cillum id commodo duis. Aliquip dolor cillum cupidatat fugiat.\n

\n

\n Ex eiusmod id est laborum sunt ex ea aute adipisicing ad magna deserunt duis. Nostrud velit dolore id commodo\n quis enim fugiat. Sint non quis consectetur voluptate aliqua dolore ad voluptate nulla. Irure sit\n reprehenderit sint laboris non elit. Duis minim nisi esse dolor. Sit ex in consequat non occaecat commodo\n irure et. Commodo qui ipsum Lorem magna consequat consequat et minim eiusmod Lorem eiusmod cupidatat\n voluptate.\n

\n

Far down

\n

\n Ex eiusmod id est laborum sunt ex ea aute adipisicing ad magna deserunt duis. Nostrud velit dolore id commodo\n quis enim fugiat. Sint non quis consectetur voluptate aliqua dolore ad voluptate nulla. Irure sit\n reprehenderit sint laboris non elit. Duis minim nisi esse dolor. Sit ex in consequat non occaecat commodo\n irure et. Commodo qui ipsum Lorem magna consequat consequat et minim eiusmod Lorem eiusmod cupidatat\n voluptate.\n

\n
\n\n
Scroll log: {JSON.stringify(scrollLog)}
\n\n \n {' '}\n Home{' '}\n \n\n \n {' '}\n Article Far Down{' '}\n \n\n \n\n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/ClientSideVisit/Page1.tsx", "content": "import { Page } from '@inertiajs/core'\nimport { router } from '@inertiajs/react'\nimport { useState } from 'react'\n\ninterface PageProps {\n foo: string\n bar: string\n}\n\nexport default ({ foo, bar }: PageProps) => {\n const [errors, setErrors] = useState(0)\n const [finished, setFinished] = useState(0)\n const [success, setSuccess] = useState(0)\n const [random] = useState(Math.random())\n\n const bagErrors = () => {\n router.replace({\n preserveState: true,\n props: (props: Page['props']) => ({ ...props, errors: { bag: { foo: 'bar' } } }),\n errorBag: 'bag',\n onError: (err) => {\n setErrors(Object.keys(err).length)\n },\n onFinish: () => setFinished(finished + 1),\n onSuccess: () => setSuccess(success + 1),\n })\n }\n\n const defaultErrors = () => {\n router.replace({\n preserveState: true,\n props: (props: PageProps) => ({ ...props, errors: { foo: 'bar', baz: 'qux' } }),\n onError: (err) => {\n setErrors(Object.keys(err).length)\n },\n onFinish: () => setFinished(finished + 1),\n onSuccess: () => setSuccess(success + 1),\n })\n }\n\n const replace = () => {\n router.replace({\n preserveState: true,\n props: (props) => ({ ...props, foo: 'foo from client' }),\n onFinish: () => setFinished(finished + 1),\n onSuccess: () => setSuccess(success + 1),\n })\n }\n\n const replaceAndPreserveStateWithErrors = (errors = {}) => {\n router.replace({\n preserveState: 'errors',\n props: (props: PageProps) => ({ ...props, errors }),\n })\n }\n\n const push = () => {\n router.push({\n url: '/client-side-visit-2',\n component: 'ClientSideVisit/Page2',\n props: { baz: 'baz from client' },\n })\n }\n\n return (\n
\n
{foo}
\n
{bar}
\n \n \n \n \n \n \n
Errors: {errors}
\n
Finished: {finished}
\n
Success: {success}
\n
Random: {random}
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/ClientSideVisit/Page2.tsx", "content": "export default ({ baz }: { baz: string }) => {\n return
{baz}
\n}\n" }, { "path": "packages/react/test-app/Pages/ClientSideVisit/Props.tsx", "content": "import { router } from '@inertiajs/react'\n\ninterface Tag {\n id: number\n name: string\n}\n\ninterface User {\n name: string\n age: number\n}\n\nexport default ({\n items = [],\n tags = [],\n user,\n count = 0,\n singleValue,\n undefinedValue,\n}: {\n items?: string[]\n tags?: Tag[]\n user?: User\n count?: number\n singleValue?: string | string[]\n undefinedValue?: string | string[]\n}) => {\n const replacePropString = () => {\n router.replaceProp('user.name', 'Jane Smith')\n }\n\n const replacePropNumber = () => {\n router.replaceProp('count', 10)\n }\n\n const replacePropFunction = () => {\n router.replaceProp('count', (oldValue: number) => oldValue * 2)\n }\n\n const appendToPropArray = () => {\n router.appendToProp('items', 'item3')\n }\n\n const appendToPropMultiple = () => {\n router.appendToProp('items', ['item4', 'item5'])\n }\n\n const appendToPropFunction = () => {\n router.appendToProp('tags', () => ({ id: 3, name: 'tag3' }))\n }\n\n const appendArrayToArray = () => {\n router.appendToProp('tags', [\n { id: 3, name: 'tag3' },\n { id: 4, name: 'tag4' },\n ])\n }\n\n const prependToPropArray = () => {\n router.prependToProp('items', 'item0')\n }\n\n const prependToPropMultiple = () => {\n router.prependToProp('items', ['itemA', 'itemB'])\n }\n\n const prependToPropFunction = () => {\n router.prependToProp('tags', () => ({ id: 0, name: 'tag0' }))\n }\n\n // Edge case tests for mergeArrays behavior\n const appendToNonArray = () => {\n router.appendToProp('singleValue', 'world')\n }\n\n const prependToNonArray = () => {\n router.prependToProp('singleValue', 'hey')\n }\n\n const appendArrayToNonArray = () => {\n router.appendToProp('singleValue', ['there', 'world'])\n }\n\n const prependArrayToNonArray = () => {\n router.prependToProp('singleValue', ['hey', 'hi'])\n }\n\n const appendToUndefined = () => {\n router.appendToProp('undefinedValue', 'new value')\n }\n\n const prependToUndefined = () => {\n router.prependToProp('undefinedValue', 'start value')\n }\n\n return (\n
\n

Client Side Visit Props Testing

\n\n
\n User: {user?.name || 'Unknown'} (Age: {user?.age || 'Unknown'})\n
\n
Count: {count}
\n\n
Items: {JSON.stringify(items)}
\n
Tags: {JSON.stringify(tags)}
\n
Single Value: {JSON.stringify(singleValue)}
\n
Undefined Value: {JSON.stringify(undefinedValue)}
\n\n
\n\n

Replace Prop Tests

\n \n \n \n\n

Append To Prop Tests

\n \n \n \n \n\n

Prepend To Prop Tests

\n \n \n \n\n

Edge Case Tests (mergeArrays behavior)

\n \n \n \n \n \n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/ClientSideVisit/Sequential.tsx", "content": "import { router } from '@inertiajs/react'\n\nexport default ({ foo = '', bar = '' }: { foo?: string; bar?: string }) => {\n const replaceSequentially = () => {\n router.replaceProp('foo', 'baz')\n router.replaceProp('bar', 'qux')\n }\n\n return (\n
\n

Foo: {foo}

\n

Bar: {bar}

\n\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/ComplexMergeSelective.tsx", "content": "import { router } from '@inertiajs/react'\n\nexport default ({\n mixed,\n}: {\n mixed: {\n name: string\n users: string[]\n chat: { data: number[] }\n post: { id: number; comments: { allowed: boolean; data: string[] } }\n }\n}) => {\n const reload = () => {\n router.reload({\n only: ['mixed'],\n })\n }\n\n return (\n
\n
name is {mixed.name}
\n
users: {mixed.users.join(', ')}
\n
chat.data: {mixed.chat.data.join(', ')}
\n
post.id: {mixed.post.id}
\n
post.comments.allowed: {mixed.post.comments.allowed ? 'true' : 'false'}
\n
post.comments.data: {mixed.post.comments.data.join(', ')}
\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/CustomConfig.tsx", "content": "import type { VisitOptions } from '@inertiajs/core'\nimport { config, Link, useForm, usePage } from '@inertiajs/react'\n\nexport default () => {\n const page = usePage()\n const form = useForm({})\n\n const submit = () => {\n form.post(page.url)\n }\n\n config.set({\n 'form.recentlySuccessfulDuration': 1000,\n 'prefetch.cacheFor': '2s',\n })\n\n config.set('visitOptions', (href: string, options: VisitOptions) => {\n if (href !== '/dump/post') {\n return {}\n }\n\n return { headers: { ...options.headers, 'X-From-Callback': 'bar' } }\n })\n\n return (\n
\n \n Prefetch Link\n \n \n Post Dump\n \n \n {form.recentlySuccessful &&

Form was recently successful!

}\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeepMergeProps.tsx", "content": "import { router } from '@inertiajs/react'\nimport { useState } from 'react'\n\ntype PageProps = {\n bar: number[]\n foo: { page: number; data: number[]; per_page: number; meta: { label: string } }\n baz: number[]\n}\n\nexport default ({ bar, foo, baz }: PageProps) => {\n const [page, setPage] = useState(foo.page)\n\n const reloadIt = () => {\n router.reload({\n data: {\n page,\n },\n only: ['foo', 'baz'],\n onSuccess(visit) {\n setPage((visit.props as unknown as PageProps).foo.page)\n },\n })\n }\n\n const getFresh = () => {\n setPage(0)\n router.visit('/deep-merge-props', {\n reset: ['foo', 'baz'],\n })\n }\n\n return (\n <>\n
bar count is {bar.length}
\n
baz count is {baz.length}
\n
foo.data count is {foo.data.length}
\n
foo.page is {foo.page}
\n
foo.per_page is {foo.per_page}
\n
foo.meta.label is {foo.meta.label}
\n \n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/BackButton/PageA.tsx", "content": "import { Deferred, Link, usePage } from '@inertiajs/react'\n\nconst FastProp = () => {\n const { fastProp } = usePage<{ fastProp?: string }>().props\n\n return fastProp\n}\n\nconst SlowProp = () => {\n const { slowProp } = usePage<{ slowProp?: string }>().props\n\n return slowProp\n}\n\nexport default () => {\n return (\n <>\n Loading fast prop...}>\n \n \n\n Loading slow prop...}>\n \n \n\n Go to Page B\n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/BackButton/PageB.tsx", "content": "import { Deferred, Link, usePage } from '@inertiajs/react'\n\nconst Data = () => {\n const { data } = usePage<{ data?: string }>().props\n\n return data\n}\n\nexport default () => {\n return (\n <>\n Loading data...}>\n \n \n\n Go to Page A\n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/InstantReload.tsx", "content": "import { Deferred, router } from '@inertiajs/react'\nimport { useEffect } from 'react'\n\nexport default ({ foo, bar }: { foo?: { text: string }; bar?: { text: string } }) => {\n useEffect(() => {\n router.reload({\n only: ['foo'],\n })\n }, [])\n\n return (\n <>\n Loading foo...}>\n
{foo?.text}
\n \n\n Loading bar...}>\n
{bar?.text}
\n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/ManyGroups.tsx", "content": "import { Deferred, Link, usePage } from '@inertiajs/react'\n\nexport default () => {\n const { foo, bar, baz, qux, quux } = usePage<{\n foo?: { text: string }\n bar?: { text: string }\n baz?: { text: string }\n qux?: { text: string }\n quux?: { text: string }\n }>().props\n\n return (\n <>\n Loading foo...}>\n {foo?.text}\n \n\n Loading bar...}>\n {bar?.text}\n \n\n Loading baz...}>\n {baz?.text}\n \n\n Loading qux...}>\n {qux?.text}\n \n\n Loading quux...}>\n {quux?.text}\n \n\n Page 1\n Page 2\n Many groups\n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/Page1.tsx", "content": "import { Deferred, Link, usePage } from '@inertiajs/react'\n\nconst Foo = () => {\n const { foo } = usePage<{ foo?: { text: string } }>().props\n\n return foo?.text\n}\n\nconst Bar = () => {\n const { bar } = usePage<{ bar?: { text: string } }>().props\n\n return bar?.text\n}\n\nexport default () => {\n return (\n <>\n Loading foo...}>\n \n \n\n
Loading bar...
}>\n {() => }\n \n\n Page 1\n Page 2\n \n Page 3\n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/Page2.tsx", "content": "import { Deferred, Link, usePage } from '@inertiajs/react'\n\nconst Baz = () => {\n const { baz } = usePage<{ baz?: string }>().props\n\n return baz\n}\n\nconst Qux = () => {\n const { qux } = usePage<{ qux?: string }>().props\n\n return qux\n}\n\nconst Both = () => {\n const { baz, qux } = usePage<{ baz?: string; qux?: string }>().props\n\n return `both ${baz} and ${qux}`\n}\nexport default () => {\n return (\n <>\n Loading baz...}>\n \n \n\n Loading qux...}>\n \n \n\n Loading baz and qux...}>\n \n \n\n Page 2\n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/Page3.tsx", "content": "import { Deferred, usePage } from '@inertiajs/react'\n\nconst Alpha = () => {\n const { alpha } = usePage<{ alpha?: string }>().props\n\n return alpha\n}\n\nconst Beta = () => {\n const { beta } = usePage<{ beta?: string }>().props\n\n return beta\n}\n\nexport default () => {\n return (\n <>\n Loading alpha...}>\n \n \n\n Loading beta...}>\n \n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/PartialReloads.tsx", "content": "import { Deferred, router, usePage } from '@inertiajs/react'\n\nconst FooTimestamp = () => {\n const { foo } = usePage<{ foo?: { timestamp: string } }>().props\n\n return
{foo?.timestamp}
\n}\n\nconst BarTimestamp = () => {\n const { bar } = usePage<{ bar?: { timestamp: string } }>().props\n\n return
{bar?.timestamp}
\n}\n\nconst PartialReloads = () => {\n const reloadOnlyFoo = () => {\n router.reload({\n only: ['foo'],\n })\n }\n\n const reloadOnlyBar = () => {\n router.reload({\n only: ['bar'],\n })\n }\n\n const reloadBoth = () => {\n router.reload({\n only: ['foo', 'bar'],\n })\n }\n\n return (\n <>\n Loading foo...}>\n \n \n\n Loading bar...}>\n \n \n\n \n \n \n \n )\n}\n\nexport default PartialReloads\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/RapidNavigation.tsx", "content": "import { Deferred, Link, router, usePage } from '@inertiajs/react'\n\nconst Users = () => {\n const { users } = usePage<{ users?: { text: string } }>().props\n return
{users?.text}
\n}\n\nconst Stats = () => {\n const { stats } = usePage<{ stats?: { text: string } }>().props\n return
{stats?.text}
\n}\n\nconst Activity = () => {\n const { activity } = usePage<{ activity?: { text: string } }>().props\n return
{activity?.text}
\n}\n\nexport default () => {\n const { id } = usePage<{ id: string }>().props\n\n return (\n <>\n
Page: {id}
\n\n Loading users...}>\n \n \n\n Loading stats...}>\n \n \n\n Loading activity...}>\n \n \n\n Page A\n Page B\n Page C\n Navigate Away\n\n {\n const shouldNavigate = confirm('Navigate away?')\n if (shouldNavigate) {\n router.visit('/deferred-props/page-2')\n }\n }}\n >\n Navigate with onBefore\n \n\n \n\n \n\n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/ReloadWithoutOptionalChaining.tsx", "content": "import { Deferred, router, usePage } from '@inertiajs/react'\n\nconst Results = () => {\n const { results } = usePage<{ results: { data: string[]; page: number } }>().props\n\n return (\n <>\n
{results.data.join(', ')}
\n
Page: {results.page}
\n \n )\n}\n\nexport default () => {\n const handleReload = () => {\n router.reload({\n data: { page: 2 },\n })\n }\n\n return (\n <>\n Loading results...}>\n \n \n\n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/WithErrors.tsx", "content": "import { Deferred, useForm, usePage } from '@inertiajs/react'\n\nconst Foo = () => {\n const { foo } = usePage<{ foo?: { text: string } }>().props\n\n return
{foo?.text}
\n}\n\nexport default () => {\n const { errors } = usePage<{ errors: { name?: string } }>().props\n const form = useForm({\n name: '',\n })\n\n const submit = () => {\n form.post('/deferred-props/with-errors')\n }\n\n return (\n <>\n Loading foo...}>\n \n \n\n {errors?.name &&

{errors.name}

}\n {form.errors.name &&

{form.errors.name}

}\n\n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/WithPartialReload.tsx", "content": "import { Deferred, Link, router, usePage } from '@inertiajs/react'\n\nconst WithPartialReload = ({ withOnly, withExcept }: { withOnly?: string[]; withExcept?: string[] }) => {\n const handleTriggerPartialReload = () => {\n router.reload({\n only: withOnly,\n except: withExcept,\n })\n }\n\n return (\n
\n Loading...}>\n \n \n \n \n Prefetch\n \n
\n )\n}\n\nconst DeferredUsers = () => {\n const props = usePage<{ users?: Array<{ id: number; name: string }> }>().props\n\n return (\n
\n {props.users?.map((user) => (\n {user.name}\n ))}\n
\n )\n}\n\nexport default WithPartialReload\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/WithQueryParams.tsx", "content": "import { Deferred, usePage } from '@inertiajs/react'\n\nconst Users = () => {\n const { users } = usePage<{ users?: { text: string } }>().props\n\n return
{users?.text}
\n}\n\nexport default () => {\n const { filter } = usePage<{ filter: string }>().props\n\n return (\n <>\n
Filter: {filter}
\n\n Loading users...}>\n \n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/DeferredProps/WithReload.tsx", "content": "import { Deferred, router, usePage } from '@inertiajs/react'\n\nconst Results = () => {\n const { results } = usePage<{ results?: { data: string[]; page: number } }>().props\n\n return (\n <>\n
{results?.data?.join(', ')}
\n
Page: {results?.page}
\n \n )\n}\n\nexport default () => {\n const handleReload = () => {\n router.reload({\n data: { page: 2 },\n })\n }\n\n return (\n <>\n Loading results...}>\n \n \n\n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/Dump.tsx", "content": "import type { Method } from '@inertiajs/core'\nimport { usePage } from '@inertiajs/react'\nimport { useEffect, useMemo } from 'react'\nimport type { MulterFile } from '../types'\n\nexport default ({\n headers,\n method,\n form,\n query,\n url,\n files,\n}: {\n headers: Record\n method: Method\n form: Record\n query: Record\n url: string\n files: MulterFile[] | object\n}) => {\n const page = usePage()\n\n const dump = useMemo(\n () => ({\n headers,\n method,\n form,\n files: files ? files : {},\n query,\n url,\n $page: page,\n }),\n [headers, method, form, files, query, url, page],\n )\n\n useEffect(() => {\n window._inertia_request_dump = dump\n }, [dump])\n\n return (\n
\n
This is Inertia page component containing a data dump of the request
\n
\n 
{JSON.stringify(dump, null, 2)}
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/ErrorModal.tsx", "content": "import { config, router } from '@inertiajs/react'\n\nexport default ({ dialog }: { dialog: boolean }) => {\n const invalidVisit = () => {\n router.post('/non-inertia')\n }\n\n const invalidVisitJson = () => {\n router.post('/json')\n }\n\n if (dialog) {\n config.set('future.useDialogForErrorModal', true)\n }\n\n return (\n
\n \n Invalid Visit\n \n \n Invalid Visit (JSON response)\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/Events.tsx", "content": "import { Link, router, usePage } from '@inertiajs/react'\n\ndeclare global {\n interface Window {\n messages: unknown[]\n }\n}\n\nwindow.messages = []\n\nexport default () => {\n const payloadWithFile = {\n file: new File(['foobar'], 'example.bin'),\n }\n\n const page = usePage()\n\n const internalAlert = (...args: unknown[]) => {\n args.forEach((arg) => window.messages.push(arg))\n }\n\n const withoutEventListeners = (e: React.MouseEvent) => {\n e.preventDefault()\n router.post(page.url, {})\n }\n\n const removeInertiaListener = (e: React.MouseEvent) => {\n e.preventDefault()\n const removeEventListener = router.on('before', () => internalAlert('Inertia.on(before)'))\n\n internalAlert('Removing Inertia.on Listener')\n removeEventListener()\n\n router.post(\n page.url,\n {},\n {\n onBefore: () => internalAlert('onBefore'),\n onStart: () => internalAlert('onStart'),\n },\n )\n }\n\n const beforeVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('before', (event) => {\n internalAlert('Inertia.on(before)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:before', (event) => {\n internalAlert('addEventListener(inertia:before)')\n internalAlert(event)\n })\n\n router.post(\n page.url,\n {},\n {\n onBefore: (event) => {\n internalAlert('onBefore')\n internalAlert(event)\n },\n onStart: () => internalAlert('onStart'),\n },\n )\n }\n\n const beforeVisitPreventLocal = (e: React.MouseEvent) => {\n e.preventDefault()\n document.addEventListener('inertia:before', () => internalAlert('addEventListener(inertia:before)'))\n router.on('before', () => internalAlert('Inertia.on(before)'))\n\n router.post(\n page.url,\n {},\n {\n onBefore: () => {\n internalAlert('onBefore')\n return false\n },\n onStart: () => internalAlert('This listener should not have been called.'),\n },\n )\n }\n\n const beforeVisitPreventGlobalInertia = (e: React.MouseEvent) => {\n e.preventDefault()\n document.addEventListener('inertia:before', () => internalAlert('addEventListener(inertia:before)'))\n router.on('before', () => {\n internalAlert('Inertia.on(before)')\n return false\n })\n\n router.post(\n page.url,\n {},\n {\n onBefore: () => internalAlert('onBefore'),\n onStart: () => internalAlert('This listener should not have been called.'),\n },\n )\n }\n\n const beforeVisitPreventGlobalNative = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('before', () => internalAlert('Inertia.on(before)'))\n document.addEventListener('inertia:before', (event) => {\n internalAlert('addEventListener(inertia:before)')\n event.preventDefault()\n })\n\n router.post(\n page.url,\n {},\n {\n onBefore: () => internalAlert('onBefore'),\n onStart: () => internalAlert('This listener should not have been called.'),\n },\n )\n }\n\n const cancelTokenVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n // @ts-expect-error - We're testing that the router doesn't have an onCancelToken listener\n router.on('cancelToken', () => internalAlert('This listener should not have been called.'))\n document.addEventListener('inertia:cancelToken', () => internalAlert('This listener should not have been called.'))\n\n router.post(\n page.url,\n {},\n {\n onCancelToken: (event) => {\n internalAlert('onCancelToken')\n internalAlert(event)\n },\n },\n )\n }\n\n const startVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('start', (event) => {\n internalAlert('Inertia.on(start)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:start', (event) => {\n internalAlert('addEventListener(inertia:start)')\n internalAlert(event)\n })\n\n router.post(\n page.url,\n {},\n {\n onStart: (event) => {\n internalAlert('onStart')\n internalAlert(event)\n },\n },\n )\n }\n\n const progressVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('progress', (event) => {\n internalAlert('Inertia.on(progress)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:progress', (event) => {\n internalAlert('addEventListener(inertia:progress)')\n internalAlert(event)\n })\n\n router.post(page.url, payloadWithFile, {\n onProgress: (event) => {\n internalAlert('onProgress')\n internalAlert(event)\n },\n })\n }\n\n const progressNoFilesVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('progress', (event) => {\n internalAlert('Inertia.on(progress)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:progress', (event) => {\n internalAlert('addEventListener(inertia:progress)')\n internalAlert(event)\n })\n\n router.post(\n page.url,\n {},\n {\n onBefore: () => internalAlert('progressNoFilesOnBefore'),\n onProgress: (event) => {\n internalAlert('onProgress')\n internalAlert(event)\n },\n },\n )\n }\n\n const cancelVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('cancel', (event) => {\n internalAlert('Inertia.on(cancel)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:cancel', (event) => {\n internalAlert('addEventListener(inertia:cancel)')\n internalAlert(event)\n })\n\n router.post(\n page.url,\n {},\n {\n onCancelToken: (token) => token.cancel(),\n // @ts-expect-error - We're testing that the onCancel callback has no arguments, so event will be undefined\n onCancel: (event) => {\n internalAlert('onCancel')\n internalAlert(event)\n },\n },\n )\n }\n\n const errorVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('error', (event) => {\n internalAlert('Inertia.on(error)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:error', (event) => {\n internalAlert('addEventListener(inertia:error)')\n internalAlert(event)\n })\n\n router.post(\n '/events/errors',\n {},\n {\n onError: (errors) => {\n internalAlert('onError')\n internalAlert(errors)\n },\n },\n )\n }\n\n const errorPromiseVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.post(\n '/events/errors',\n {},\n {\n onError: () => callbackSuccessErrorPromise('onError'),\n onSuccess: () => internalAlert('This listener should not have been called'),\n onFinish: () => internalAlert('onFinish'),\n },\n )\n }\n\n const successVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('success', (event) => {\n internalAlert('Inertia.on(success)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:success', (event) => {\n internalAlert('addEventListener(inertia:success)')\n internalAlert(event)\n })\n\n router.post(\n page.url,\n {},\n {\n onError: () => internalAlert('This listener should not have been called'),\n onSuccess: (page) => {\n internalAlert('onSuccess')\n internalAlert(page)\n },\n },\n )\n }\n\n const successPromiseVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.post(\n page.url,\n {},\n {\n onSuccess: () => callbackSuccessErrorPromise('onSuccess'),\n onError: () => internalAlert('This listener should not have been called'),\n onFinish: () => internalAlert('onFinish'),\n },\n )\n }\n\n const finishVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('finish', (event) => {\n internalAlert('Inertia.on(finish)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:finish', (event) => {\n internalAlert('addEventListener(inertia:finish)')\n internalAlert(event)\n })\n\n router.post(\n page.url,\n {},\n {\n onFinish: (event) => {\n internalAlert('onFinish')\n internalAlert(event)\n },\n },\n )\n }\n\n const invalidVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('invalid', (event) => {\n internalAlert('Inertia.on(invalid)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:invalid', (event) => {\n internalAlert('addEventListener(inertia:invalid)')\n internalAlert(event)\n })\n\n router.post(\n '/non-inertia',\n {},\n {\n // @ts-expect-error - We're testing that the VisitCallbacks interface does not have an onInvalid method\n onInvalid: () => internalAlert('This listener should not have been called.'),\n },\n )\n }\n\n const exceptionVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('exception', (event) => {\n internalAlert('Inertia.on(exception)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:exception', (event) => {\n internalAlert('addEventListener(inertia:exception)')\n internalAlert(event)\n })\n\n router.post(\n '/disconnect',\n {},\n {\n // @ts-expect-error - We're testing that the VisitCallbacks interface does not have an onException method\n onException: () => internalAlert('This listener should not have been called.'),\n },\n )\n }\n\n const navigateVisit = (e: React.MouseEvent) => {\n e.preventDefault()\n router.on('navigate', (event) => {\n internalAlert('Inertia.on(navigate)')\n internalAlert(event)\n })\n\n document.addEventListener('inertia:navigate', (event) => {\n internalAlert('addEventListener(inertia:navigate)')\n internalAlert(event)\n })\n\n router.get(\n '/',\n {},\n {\n // @ts-expect-error - We're testing that the VisitCallbacks interface does not have an onNavigate method\n onNavigate: () => internalAlert('This listener should not have been called.'),\n },\n )\n }\n\n const registerAllListeners = () => {\n router.on('before', () => internalAlert('Inertia.on(before)'))\n // @ts-expect-error - We're testing that the router doesn't have an onCancelToken listener\n router.on('cancelToken', () => internalAlert('Inertia.on(cancelToken)'))\n router.on('cancel', () => internalAlert('Inertia.on(cancel)'))\n router.on('start', () => internalAlert('Inertia.on(start)'))\n router.on('progress', () => internalAlert('Inertia.on(progress)'))\n router.on('error', () => internalAlert('Inertia.on(error)'))\n router.on('success', () => internalAlert('Inertia.on(success)'))\n router.on('invalid', () => internalAlert('Inertia.on(invalid)'))\n router.on('exception', () => internalAlert('Inertia.on(exception)'))\n router.on('finish', () => internalAlert('Inertia.on(finish)'))\n router.on('navigate', () => internalAlert('Inertia.on(navigate)'))\n document.addEventListener('inertia:before', () => internalAlert('addEventListener(inertia:before)'))\n document.addEventListener('inertia:cancelToken', () => internalAlert('addEventListener(inertia:cancelToken)'))\n document.addEventListener('inertia:cancel', () => internalAlert('addEventListener(inertia:cancel)'))\n document.addEventListener('inertia:start', () => internalAlert('addEventListener(inertia:start)'))\n document.addEventListener('inertia:progress', () => internalAlert('addEventListener(inertia:progress)'))\n document.addEventListener('inertia:error', () => internalAlert('addEventListener(inertia:error)'))\n document.addEventListener('inertia:success', () => internalAlert('addEventListener(inertia:success)'))\n document.addEventListener('inertia:invalid', () => internalAlert('addEventListener(inertia:invalid)'))\n document.addEventListener('inertia:exception', () => internalAlert('addEventListener(inertia:exception)'))\n document.addEventListener('inertia:finish', () => internalAlert('addEventListener(inertia:finish)'))\n document.addEventListener('inertia:navigate', () => internalAlert('addEventListener(inertia:navigate)'))\n\n return {\n onBefore: () => internalAlert('onBefore'),\n onCancelToken: () => internalAlert('onCancelToken'),\n onCancel: () => internalAlert('onCancel'),\n onStart: () => internalAlert('onStart'),\n onProgress: () => internalAlert('onProgress'),\n onError: () => internalAlert('onError'),\n onSuccess: () => internalAlert('onSuccess'),\n onInvalid: () => internalAlert('onInvalid'), // Does not exist.\n onException: () => internalAlert('onException'), // Does not exist.\n onFinish: () => internalAlert('onFinish'),\n onNavigate: () => internalAlert('onNavigate'), // Does not exist.\n }\n }\n\n const lifecycleSuccess = (e: React.MouseEvent) => {\n e.preventDefault()\n router.post(page.url, payloadWithFile, registerAllListeners())\n }\n\n const lifecycleError = (e: React.MouseEvent) => {\n e.preventDefault()\n router.post('/events/errors', payloadWithFile, registerAllListeners())\n }\n\n const lifecycleCancel = (e: React.MouseEvent) => {\n e.preventDefault()\n router.post('/sleep', payloadWithFile, {\n ...registerAllListeners(),\n onCancelToken: (token) => {\n internalAlert('onCancelToken')\n\n setTimeout(() => {\n internalAlert('CANCELLING!')\n token.cancel()\n }, 250)\n },\n })\n }\n\n const lifecycleCancelAfterFinish = (e: React.MouseEvent) => {\n e.preventDefault()\n type CancelToken = {\n cancel: () => void\n }\n\n let cancelToken = null as CancelToken | null\n\n router.post(page.url, payloadWithFile, {\n ...registerAllListeners(),\n onCancelToken: (token: CancelToken) => {\n internalAlert('onCancelToken')\n cancelToken = token\n },\n onFinish: () => {\n internalAlert('onFinish')\n internalAlert('CANCELLING!')\n cancelToken?.cancel()\n },\n })\n }\n\n const callbackSuccessErrorPromise = (eventName: string) => {\n internalAlert(eventName)\n setTimeout(() => internalAlert('onFinish should have been fired by now if Promise functionality did not work'), 5)\n return new Promise((resolve) => setTimeout(resolve, 20))\n }\n\n return (\n
\n {/* Listeners */}\n \n Basic Visit\n \n \n Remove Inertia Listener\n \n\n {/* Events: Before */}\n \n Before Event\n \n \n Before Event (Prevent)\n \n internalAlert('linkOnBefore', visit)}\n onStart={() => internalAlert('linkOnStart')}\n className=\"link-before\"\n >\n Before Event Link\n \n {\n internalAlert('linkOnBefore')\n return false\n }}\n onStart={() => internalAlert('This listener should not have been called.')}\n className=\"link-before-prevent-local\"\n >\n Before Event Link (Prevent)\n \n \n Before Event - Prevent globally using Inertia Event Listener\n \n \n Before Event - Prevent globally using Native Event Listeners\n \n\n {/* Events: CancelToken */}\n \n Cancel Token Event\n \n internalAlert('linkOnCancelToken', event)}\n className=\"link-canceltoken\"\n >\n Cancel Token Event Link\n \n\n {/* Events: Cancel */}\n \n Cancel Event\n \n token.cancel()}\n // @ts-expect-error - We're testing that the onCancel callback has no arguments, so event will be undefined\n onCancel={(event) => internalAlert('linkOnCancel', event)}\n className=\"link-cancel\"\n >\n Cancel Event Link\n \n\n {/* Events: Start */}\n \n Start Event\n \n internalAlert('linkOnStart', event)}\n className=\"link-start\"\n >\n Start Event Link\n \n\n {/* Events: Progress */}\n \n Progress Event\n \n \n Missing Progress Event (no files)\n \n internalAlert('linkOnProgress', event)}\n className=\"link-progress\"\n >\n Progress Event Link\n \n internalAlert('linkProgressNoFilesOnBefore')}\n onProgress={(event) => internalAlert('linkOnProgress', event)}\n className=\"link-progress-no-files\"\n >\n Progress Event Link (no files)\n \n\n {/* Events: Error */}\n \n Error Event\n \n \n Error Event (delaying onFinish w/ Promise)\n \n internalAlert('linkOnError', errors)}\n onSuccess={() => internalAlert('This listener should not have been called')}\n className=\"link-error\"\n >\n Error Event Link\n \n callbackSuccessErrorPromise('linkOnError')}\n onSuccess={() => internalAlert('This listener should not have been called')}\n onFinish={() => internalAlert('linkOnFinish')}\n className=\"link-error-promise\"\n >\n Error Event Link (delaying onFinish w/ Promise)\n \n\n {/* Events: Success */}\n \n Success Event\n \n \n Success Event (delaying onFinish w/ Promise)\n \n internalAlert('This listener should not have been called')}\n onSuccess={(event) => internalAlert('linkOnSuccess', event)}\n className=\"link-success\"\n >\n Success Event Link\n \n internalAlert('This listener should not have been called')}\n onSuccess={() => callbackSuccessErrorPromise('linkOnSuccess')}\n onFinish={() => internalAlert('linkOnFinish')}\n className=\"link-success-promise\"\n >\n Success Event Link (delaying onFinish w/ Promise)\n \n\n {/* Events: Invalid */}\n \n Invalid Event\n \n\n {/* Events: Exception */}\n \n Exception Event\n \n\n {/* Events: Finish */}\n \n Finish Event\n \n internalAlert('linkOnFinish', event)}\n className=\"link-finish\"\n >\n Finish Event Link\n \n\n {/* Events: Navigate */}\n \n Navigate Event\n \n\n {/* Events: Prefetch */}\n internalAlert('linkOnPrefetching', visit)}\n onPrefetched={(response, visit) => internalAlert('linkOnPrefetched', response, visit)}\n className=\"link-prefetch-hover\"\n >\n Prefetch Event Link (Hover)\n \n\n {/* Lifecycles */}\n \n Lifecycle Success\n \n \n Lifecycle Error\n \n \n Lifecycle Cancel\n \n \n Lifecycle Cancel - After Finish\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/Flash/ClientSideVisits.tsx", "content": "import { router, usePage } from '@inertiajs/react'\n\ndeclare global {\n interface Window {\n flashCount: number\n }\n}\n\nwindow.flashCount ??= 0\n\nexport default () => {\n const page = usePage()\n\n const withFlash = () => {\n router.replace({\n flash: { foo: 'bar' },\n onFlash: () => window.flashCount++,\n })\n }\n\n const withFlashFunction = () => {\n router.replace({\n flash: (flash) => ({ ...flash, bar: 'baz' }),\n onFlash: () => window.flashCount++,\n })\n }\n\n const withoutFlash = () => {\n router.replace({\n props: (props) => ({ ...props }),\n onFlash: () => window.flashCount++,\n })\n }\n\n return (\n
\n {JSON.stringify(page.flash)}\n\n \n \n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/Flash/Events.tsx", "content": "import { router, usePage } from '@inertiajs/react'\n\ndeclare global {\n interface Window {\n messages: unknown[]\n }\n}\n\nwindow.messages = []\n\nconst internalAlert = (...args: unknown[]) => {\n window.messages.push(...args)\n}\n\nexport default () => {\n const page = usePage()\n\n const visitWithFlash = () => {\n router.on('flash', (event) => {\n internalAlert('Inertia.on(flash)')\n internalAlert(event.detail.flash)\n })\n\n document.addEventListener('inertia:flash', (event) => {\n internalAlert('addEventListener(inertia:flash)')\n internalAlert((event as CustomEvent).detail.flash)\n })\n\n router.post(\n '/flash/events/with-data',\n {},\n {\n onFlash: (flash) => {\n internalAlert('onFlash')\n internalAlert(flash)\n },\n onSuccess: (page) => {\n internalAlert('onSuccess')\n internalAlert(page.flash)\n },\n },\n )\n }\n\n const visitWithoutFlash = () => {\n router.on('flash', () => {\n internalAlert('Inertia.on(flash)')\n })\n\n document.addEventListener('inertia:flash', () => {\n internalAlert('addEventListener(inertia:flash)')\n })\n\n router.post(\n '/flash/events/without-data',\n {},\n {\n onFlash: () => {\n internalAlert('onFlash')\n },\n onSuccess: () => {\n internalAlert('onSuccess')\n },\n },\n )\n }\n\n const navigateAway = () => {\n router.get('/')\n }\n\n return (\n
\n {JSON.stringify(page.flash)}\n\n {\n e.preventDefault()\n visitWithFlash()\n }}\n className=\"with-flash\"\n >\n Visit with flash\n \n {\n e.preventDefault()\n visitWithoutFlash()\n }}\n className=\"without-flash\"\n >\n Visit without flash\n \n {\n e.preventDefault()\n navigateAway()\n }}\n className=\"navigate-away\"\n >\n Navigate away\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/Flash/InitialFlash.tsx", "content": "import { router, usePage } from '@inertiajs/react'\nimport { useRef, useState } from 'react'\n\nexport default () => {\n const page = usePage()\n const [, forceUpdate] = useState(0)\n const flashEvents = useRef[]>([])\n const listenerSetup = useRef(false)\n\n if (!listenerSetup.current) {\n listenerSetup.current = true\n router.on('flash', (e) => {\n flashEvents.current.push(e.detail.flash)\n forceUpdate((n) => n + 1)\n })\n }\n\n return (\n
\n {page.flash ? JSON.stringify(page.flash) : 'no-flash'}\n {JSON.stringify(flashEvents.current)}\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/Flash/Partial.tsx", "content": "import { router, usePage } from '@inertiajs/react'\nimport { useRef, useState } from 'react'\n\nexport default ({ count }: { count: number }) => {\n const page = usePage()\n const [flashEventCount, setFlashEventCount] = useState(0)\n const listenerSetup = useRef(false)\n\n if (!listenerSetup.current) {\n listenerSetup.current = true\n router.on('flash', () => {\n setFlashEventCount((n) => n + 1)\n })\n }\n\n const reloadWithSameFlash = () => {\n router.reload({ only: ['count'], data: { flashType: 'same', count: Date.now() } })\n }\n\n const reloadWithDifferentFlash = () => {\n router.reload({ only: ['count'], data: { flashType: 'different', count: Date.now() } })\n }\n\n return (\n
\n {JSON.stringify(page.flash)}\n {flashEventCount}\n {count}\n\n \n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/Flash/RouterFlash.tsx", "content": "import { router, usePage } from '@inertiajs/react'\n\nexport default () => {\n const page = usePage()\n\n const setFlash = () => {\n router.flash({ foo: 'bar' })\n }\n\n const setFlashKeyValue = () => {\n router.flash('foo', 'bar')\n }\n\n const mergeFlash = () => {\n router.flash((current) => ({ ...current, bar: 'baz' }))\n }\n\n const clearFlash = () => {\n router.flash(() => ({}))\n }\n\n return (\n
\n {JSON.stringify(page.flash)}\n\n \n \n \n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/Flash/WithDeferred.tsx", "content": "import { Deferred, router, usePage } from '@inertiajs/react'\nimport { useRef, useState } from 'react'\n\nexport default ({ data }: { data?: string }) => {\n const page = usePage()\n const [flashEventCount, setFlashEventCount] = useState(0)\n const listenerSetup = useRef(false)\n\n if (!listenerSetup.current) {\n listenerSetup.current = true\n router.on('flash', () => {\n setFlashEventCount((n) => n + 1)\n })\n }\n\n return (\n
\n {JSON.stringify(page.flash)}\n {flashEventCount}\n\n Loading...
}>\n
{data}
\n \n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/Flash/WithInfiniteScroll.tsx", "content": "import { InfiniteScroll, router, usePage } from '@inertiajs/react'\nimport { useRef, useState } from 'react'\n\nexport default ({ users }: { users: { data: { id: number; name: string }[] } }) => {\n const page = usePage()\n const [flashEventCount, setFlashEventCount] = useState(0)\n const listenerSetup = useRef(false)\n\n if (!listenerSetup.current) {\n listenerSetup.current = true\n router.on('flash', () => {\n setFlashEventCount((n) => n + 1)\n })\n }\n\n return (\n
\n {JSON.stringify(page.flash)}\n {flashEventCount}\n\n \n {users.data.map((user) => (\n
\n {user.name}\n
\n ))}\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/ChildComponent.tsx", "content": "import { Form } from '@inertiajs/react'\nimport { useMemo, useState } from 'react'\n\nconst ChildElement = ({ name }: { name: string }) => {\n const [internalState, setInternalState] = useState('')\n const transformedState = useMemo(() => internalState.toUpperCase(), [internalState])\n\n return (\n
\n \n setInternalState(e.target.value)} />\n
\n )\n}\n\nexport default () => {\n return (\n \n {({ isDirty }) => (\n <>\n

Form Elements

\n\n
\n Form is {isDirty ? 'dirty' : 'clean'}\n
\n\n \n\n \n \n )}\n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Context/ChildComponent.tsx", "content": "import { useFormContext } from '@inertiajs/react'\n\nexport default ({ formId }: { formId?: string }) => {\n const form = useFormContext()\n\n return (\n <>\n {form ? (\n
\n Child: Form is {form.isDirty ? 'dirty' : 'clean'}\n {form.hasErrors && | Child: Form has errors}\n {form.processing && | Child: Form is processing}\n {form.wasSuccessful && | Child: Form was successful}\n {form.recentlySuccessful && | Child: Form recently successful}\n {form.errors.name && | Error: {form.errors.name}}\n
\n ) : (\n
No form context available
\n )}\n\n form?.setError('name', formId ? 'Error from child' : 'Error set from child component')}\n >\n Set Error\n \n \n {!formId && (\n <>\n \n \n \n \n )}\n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Context/DeeplyNestedComponent.tsx", "content": "import { useFormContext } from '@inertiajs/react'\n\nexport default () => {\n const form = useFormContext()\n\n return form ? (\n
\n Deeply Nested: Form is {form.isDirty ? 'dirty' : 'clean'}\n
\n ) : (\n
No context
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Context/Default.tsx", "content": "import { Form } from '@inertiajs/react'\nimport ChildComponent from './ChildComponent'\nimport NestedComponent from './NestedComponent'\nimport OutsideFormComponent from './OutsideFormComponent'\n\nexport default () => (\n <>\n
\n {({ isDirty, hasErrors, errors }) => (\n <>\n
\n Parent: Form is {isDirty ? 'dirty' : 'clean'}\n {hasErrors && | Parent: Form has errors}\n {errors.name && | {errors.name}}\n
\n\n \n \n\n \n \n \n )}\n \n\n \n \n)\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Context/Methods.tsx", "content": "import { Form } from '@inertiajs/react'\nimport MethodsTestComponent from './MethodsTestComponent'\n\nexport default () => (\n
\n {({ errors }) => (\n <>\n {Object.keys(errors).length > 0 && 
{JSON.stringify(errors, null, 2)}
}\n\n \n \n \n \n\n {/* Hidden input */}\n
\n \n
\n\n {/* Number input */}\n
\n \n
\n\n {/* Deep nested input */}\n
\n \n
\n\n {/* Indexed array of objects */}\n
\n \n \n
\n\n {/* Disabled input (should be ignored) */}\n
\n \n
\n\n \n \n \n )}\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/EmptyAction.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n

Form Empty Action Test

\n\n
\n {({ errors }) => (\n <>\n
\n \n {errors.name &&

{errors.name}

}\n
\n\n
\n \n
\n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Errors.tsx", "content": "import { Form } from '@inertiajs/react'\nimport { useState } from 'react'\n\nexport default () => {\n const [errorBag, setErrorBag] = useState(null)\n\n return (\n
\n {({ errors, hasErrors, setError, clearErrors }) => (\n <>\n

Form Errors

\n\n {hasErrors ?
Form has errors
:
No errors
}\n\n
\n \n \n
{errors.name}
\n
\n\n
\n \n \n
{errors.handle}
\n
\n\n
\n \n setError({\n name: 'The name field is required.',\n handle: 'The handle field is invalid.',\n })\n }\n >\n Set Errors\n \n \n \n \n
\n\n \n \n )}\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Events.tsx", "content": "import { Form } from '@inertiajs/react'\nimport { useCallback, useMemo, useState } from 'react'\n\nexport default () => {\n const [events, setEvents] = useState([])\n const [cancelInOnBefore, setCancelInOnBefore] = useState(false)\n const [shouldFail, setShouldFail] = useState(false)\n const [shouldDelay, setShouldDelay] = useState(false)\n\n const [cancelToken, setCancelToken] = useState<{ cancel: () => void } | null>(null)\n\n function log(eventName: string) {\n setEvents((previousEvents) => [...previousEvents, eventName])\n }\n\n const action = useMemo(() => {\n if (shouldFail) {\n return '/form-component/events/errors'\n }\n\n if (shouldDelay) {\n return '/form-component/events/delay'\n }\n\n return '/form-component/events/success'\n }, [shouldFail, shouldDelay])\n\n const formEvents = useMemo(\n () => ({\n onBefore: () => {\n log('onBefore')\n\n if (cancelInOnBefore) {\n log('onCancel')\n return false\n }\n },\n onStart: () => log('onStart'),\n onProgress: () => log('onProgress'),\n onFinish: () => log('onFinish'),\n onCancel: () => log('onCancel'),\n onSuccess: () => log('onSuccess'),\n onError: () => log('onError'),\n onCancelToken: (token: { cancel: () => void }) => {\n log('onCancelToken')\n setCancelToken(token)\n },\n }),\n [cancelInOnBefore],\n )\n\n const cancelVisit = useCallback(() => {\n if (cancelToken) {\n cancelToken.cancel()\n setCancelToken(null)\n }\n }, [cancelToken])\n\n return (\n
\n {({ processing, progress, wasSuccessful, recentlySuccessful }) => (\n <>\n

Form Events & State

\n\n
\n Events: {events.join(',')}\n
\n\n
\n Processing: {String(processing)}\n
\n\n
\n Progress:{' '}\n \n {progress?.percentage || 0}\n \n
\n\n
\n Was successful: {String(wasSuccessful)}\n
\n\n
\n Recently successful: {String(recentlySuccessful)}\n
\n\n
\n \n
\n\n
\n \n \n \n \n \n
\n \n )}\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/FormTarget.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n \n\n \n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Headers.tsx", "content": "import { Form } from '@inertiajs/react'\nimport { useState } from 'react'\n\nexport default () => {\n const [headers, setHeaders] = useState>({\n 'X-Foo': 'Bar',\n })\n\n function addCustomHeader() {\n setHeaders((previousHeaders) => ({\n ...previousHeaders,\n 'X-Custom': 'MyCustomValue',\n }))\n }\n\n return (\n
\n

Form Headers

\n\n
\n \n
\n\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/InvalidateTags.tsx", "content": "import { Form, Link } from '@inertiajs/react'\n\nexport default ({ lastLoaded, propType }: { lastLoaded: number; propType: string }) => {\n return (\n
\n
\n \n User Tagged Page\n \n \n Product Tagged Page\n \n
\n\n
\n

Form Component with invalidateCacheTags

\n
\n \n \n
\n
\n\n
\n
Form Component Invalidate Tags Test Page
\n
\n Last loaded at {lastLoaded}\n
\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Methods.tsx", "content": "import type { Method } from '@inertiajs/core'\nimport { Form } from '@inertiajs/react'\nimport { useState } from 'react'\n\nexport default () => {\n const [method, setMethod] = useState('get')\n\n return (\n
\n

HTTP Methods

\n\n
\n \n \n \n \n \n
\n\n
Current method: {method}
\n\n
\n
\n \n
\n\n
\n \n \n
\n\n
\n \n
\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/MixedKeySerialization.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n

Mixed Key Serialization

\n\n
\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n\n \n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Options.tsx", "content": "import type { Method, QueryStringArrayFormatOption } from '@inertiajs/core'\nimport { Form } from '@inertiajs/react'\nimport { useMemo, useState } from 'react'\nimport Article from './../Article'\n\nexport default () => {\n const [only, setOnlyValues] = useState([])\n const [except, setExceptValues] = useState([])\n const [reset, setResetValues] = useState([])\n const [replace, setReplace] = useState(false)\n const [state, setState] = useState('Default State')\n const [preserveScroll, setPreserveScroll] = useState(false)\n const [preserveState, setPreserveState] = useState(false)\n const [preserveUrl, setPreserveUrl] = useState(false)\n const [queryStringArrayFormat, setQueryStringArrayFormat] = useState(\n undefined,\n )\n\n function setOnly() {\n setOnlyValues(['users'])\n }\n\n function setExcept() {\n setExceptValues(['stats'])\n }\n\n function setReset() {\n setResetValues(['orders'])\n }\n\n function enableReplace() {\n setReplace(true)\n }\n\n function enablePreserveScroll() {\n setPreserveScroll(true)\n }\n\n function enablePreserveState() {\n setPreserveState(true)\n setState('Replaced State')\n }\n\n function enablePreserveUrl() {\n setPreserveUrl(true)\n }\n\n const action = useMemo(() => {\n if (preserveScroll) {\n return '/article'\n }\n\n if (preserveState) {\n return '/form-component/options'\n }\n\n if (preserveUrl) {\n return '/form-component/options?page=2'\n }\n\n return queryStringArrayFormat ? '/dump/get' : '/dump/post'\n }, [preserveScroll, preserveState, preserveUrl, queryStringArrayFormat])\n\n const method = useMemo((): Method => {\n if (preserveScroll || preserveState || preserveUrl) {\n return 'get'\n }\n\n return queryStringArrayFormat ? 'get' : 'post'\n }, [preserveScroll, preserveState, preserveUrl, queryStringArrayFormat])\n\n return (\n \n {() => (\n <>\n

Form Options

\n\n \n \n\n
\n State: {state}\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n
\n\n {preserveScroll &&
}\n \n )}\n \n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/BeforeValidation.tsx", "content": "import { Form } from '@inertiajs/react'\nimport { isEqual } from 'lodash-es'\n\nexport default function PrecognitionBefore() {\n const handleBeforeValidation = (\n newRequest: { data: Record | null; touched: string[] },\n oldRequest: { data: Record | null; touched: string[] },\n ) => {\n const payloadIsCorrect =\n isEqual(newRequest, { data: { name: 'block' }, touched: ['name'] }) &&\n isEqual(oldRequest, { data: {}, touched: [] })\n\n if (payloadIsCorrect && newRequest.data?.name === 'block') {\n return false\n }\n\n return true\n }\n\n return (\n
\n

Precognition - onBefore

\n\n
\n {({ errors, invalid, validate, validating }) => (\n <>\n
\n \n \n validate('name', {\n onBeforeValidation: handleBeforeValidation,\n })\n }\n />\n {invalid('name') &&

{errors.name}

}\n
\n\n
\n \n validate('email')} />\n {invalid('email') &&

{errors.email}

}\n
\n\n {validating &&

Validating...

}\n\n \n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/Callbacks.tsx", "content": "import { Form } from '@inertiajs/react'\nimport { useState } from 'react'\n\nexport default () => {\n const [successCalled, setSuccessCalled] = useState(false)\n const [errorCalled, setErrorCalled] = useState(false)\n const [finishCalled, setFinishCalled] = useState(false)\n\n return (\n
\n

Form Precognition Callbacks

\n\n

Callbacks Test

\n
\n {({ validate, validating, touch }) => (\n <>\n
\n touch('name')} />\n
\n\n {validating &&

Validating...

}\n {successCalled &&

onPrecognitionSuccess called!

}\n {errorCalled &&

onValidationError called!

}\n {finishCalled &&

onFinish called!

}\n\n {\n setSuccessCalled(false)\n setErrorCalled(false)\n setFinishCalled(false)\n validate({\n onPrecognitionSuccess: () => {\n setSuccessCalled(true)\n },\n onValidationError: () => {\n setErrorCalled(true)\n },\n onFinish: () => {\n setFinishCalled(true)\n },\n })\n }}\n >\n Validate\n \n \n )}\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/Cancel.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n

Precognition - Cancel Tests

\n\n

Auto Cancel Test

\n
\n {({ invalid, errors, validate, validating }) => (\n <>\n
\n validate('name')} />\n {invalid('name') &&

{errors.name}

}\n
\n\n {validating &&

Validating...

}\n\n \n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/Default.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n

Form Precognition

\n\n
\n {({ invalid, errors, validate, valid, validating }) => (\n <>\n
\n validate('name')} />\n {invalid('name') &&

{errors.name}

}\n {valid('name') &&

Name is valid!

}\n
\n\n
\n validate('email')} />\n {invalid('email') &&

{errors.email}

}\n {valid('email') &&

Email is valid!

}\n
\n\n {validating &&

Validating...

}\n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/DynamicArrayInputs.tsx", "content": "import { Form } from '@inertiajs/react'\nimport { useState } from 'react'\n\nexport default () => {\n const [items, setItems] = useState>([])\n\n function addItem() {\n setItems([...items, { name: '' }])\n }\n\n function updateItem(index: number, value: string) {\n const newItems = [...items]\n newItems[index] = { name: value }\n setItems(newItems)\n }\n\n return (\n
\n \n\n
\n {({ invalid, errors, validate, validating }) => (\n <>\n {items.map((item, idx) => (\n
\n updateItem(idx, e.target.value)}\n onBlur={() => validate(`items.${idx}.name`)}\n />\n {invalid(`items.${idx}.name`) &&

{errors[`items.${idx}.name`]}

}\n
\n ))}\n\n {validating &&

Validating...

}\n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/ErrorSync.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n

Precognition Error Sync Test

\n\n
\n {({ invalid, errors, validate, validating }) => (\n <>\n
\n validate('name')} />\n {invalid('name') &&

{errors.name}

}\n
\n\n
\n validate('email')} />\n {invalid('email') &&

{errors.email}

}\n
\n\n {validating &&

Validating...

}\n\n \n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/Files.tsx", "content": "import { Form } from '@inertiajs/react'\nimport { useState } from 'react'\n\nexport default () => {\n const [validateFilesEnabled, setValidateFilesEnabled] = useState(false)\n\n return (\n
\n

Form Precognition Files

\n\n
\n {({ invalid, errors, validate, valid, validating }) => (\n <>\n
\n validate('name')} />\n {invalid('name') &&

{errors.name}

}\n {valid('name') &&

Name is valid!

}\n
\n\n
\n \n {invalid('avatar') &&

{errors.avatar}

}\n {valid('avatar') &&

Avatar is valid!

}\n
\n\n {validating &&

Validating...

}\n\n \n\n \n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/Headers.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default function PrecognitionHeaders() {\n return (\n
\n

Precognition - Custom Headers

\n\n \n {({ invalid, errors, validate, validating }) => (\n <>\n
\n validate('name')} />\n {invalid('name') &&

{errors.name}

}\n
\n\n {validating &&

Validating...

}\n\n \n \n )}\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/Methods.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n

Form Precognition - Touch, Reset & Validate

\n\n
\n {({ invalid, errors, validate, touch, touched, validating, reset }) => (\n <>\n
\n touch('name')} />\n {invalid('name') &&

{errors.name}

}\n
\n\n
\n touch('email')} />\n {invalid('email') &&

{errors.email}

}\n
\n\n {validating &&

Validating...

}\n\n

{touched('name') ? 'Name is touched' : 'Name is not touched'}

\n

{touched('email') ? 'Email is touched' : 'Email is not touched'}

\n

{touched() ? 'Form has touched fields' : 'Form has no touched fields'}

\n\n \n \n \n \n {\n touch('name')\n touch('name')\n }}\n >\n Touch Name Twice\n \n \n \n \n \n )}\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/Transform.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n

Form Precognition Transform

\n\n ({ name: String(data.name || '').repeat(2) })}\n >\n {({ invalid, errors, validate, valid, validating }) => (\n <>\n
\n validate('name')} />\n {invalid('name') &&

{errors.name}

}\n {valid('name') &&

Name is valid!

}\n
\n\n {validating &&

Validating...

}\n \n )}\n \n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/TransformKeys.tsx", "content": "import { Form } from '@inertiajs/react'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst transformData = (data: Record) => {\n const document = data.document || {}\n return document\n}\n\nexport default () => {\n return (\n
\n

Form Precognition Transform Keys

\n\n
\n {({ invalid, errors, validate, valid, validating }) => (\n <>\n
\n validate('customer.email')}\n />\n {invalid('customer.email') &&

{errors['customer.email']}

}\n {valid('customer.email') &&

Email is valid!

}\n
\n\n {validating &&

Validating...

}\n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/WithAllErrors.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n

Form Precognition - All Errors

\n\n
\n {({ invalid, errors, validate, valid, validating }) => (\n <>\n
\n validate('name')} />\n {invalid('name') && (\n
\n {Array.isArray(errors.name) ? (\n errors.name.map((error, index) => (\n

\n {error}\n

\n ))\n ) : (\n

{errors.name}

\n )}\n
\n )}\n {valid('name') &&

Name is valid!

}\n
\n\n
\n validate('email')} />\n {invalid('email') && (\n
\n {Array.isArray(errors.email) ? (\n errors.email.map((error, index) => (\n

\n {error}\n

\n ))\n ) : (\n

{errors.email}

\n )}\n
\n )}\n {valid('email') &&

Email is valid!

}\n
\n\n {validating &&

Validating...

}\n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/WithAllErrorsConfig.tsx", "content": "import { config, Form } from '@inertiajs/react'\n\nexport default () => {\n // Set global config for withAllErrors (no prop on the Form component)\n config.set('form.withAllErrors', true)\n\n return (\n
\n

Form Precognition - All Errors via Config

\n\n
\n {({ invalid, errors, validate, valid, validating }) => (\n <>\n
\n validate('name')} />\n {invalid('name') && (\n
\n {Array.isArray(errors.name) ? (\n errors.name.map((error, index) => (\n

\n {error}\n

\n ))\n ) : (\n

{errors.name}

\n )}\n
\n )}\n {valid('name') &&

Name is valid!

}\n
\n\n
\n validate('email')} />\n {invalid('email') && (\n
\n {Array.isArray(errors.email) ? (\n errors.email.map((error, index) => (\n

\n {error}\n

\n ))\n ) : (\n

{errors.email}

\n )}\n
\n )}\n {valid('email') &&

Email is valid!

}\n
\n\n {validating &&

Validating...

}\n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.tsx", "content": "import { Form } from '@inertiajs/react'\n\nexport default () => {\n return (\n
\n

Form Precognition - Array Errors

\n\n
\n {({ invalid, errors, validate, valid, validating }) => (\n <>\n
\n validate('name')} />\n {invalid('name') &&

{errors.name}

}\n {valid('name') &&

Name is valid!

}\n
\n\n
\n validate('email')} />\n {invalid('email') &&

{errors.email}

}\n {valid('email') &&

Email is valid!

}\n
\n\n {validating &&

Validating...

}\n \n )}\n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Progress.tsx", "content": "import { Form } from '@inertiajs/react'\nimport { useEffect, useRef, useState } from 'react'\n\nexport default () => {\n const [showProgress, setShowProgress] = useState(undefined)\n const [nprogressVisible, setNprogressVisible] = useState(false)\n const [nprogressAppearances, setNprogressAppearances] = useState(0)\n\n const observerRef = useRef(null)\n\n function disableProgress() {\n setShowProgress(false)\n }\n\n useEffect(() => {\n observerRef.current = new MutationObserver(() => {\n const nprogressElement = document.querySelector('#nprogress') as HTMLElement | null\n const nprogressIsCurrentlyVisible = nprogressElement && nprogressElement.style.display !== 'none'\n\n if (nprogressIsCurrentlyVisible) {\n if (!nprogressVisible) {\n setNprogressVisible(true)\n setNprogressAppearances((previousCount) => previousCount + 1)\n }\n } else {\n setNprogressVisible(false)\n }\n })\n\n observerRef.current.observe(document.body, { childList: true, subtree: true })\n\n return () => observerRef.current?.disconnect()\n }, [nprogressVisible])\n\n return (\n
\n

Progress

\n\n
\n Nprogress appearances: {nprogressAppearances}\n
\n\n
\n \n \n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Ref.tsx", "content": "import { FormComponentRef } from '@inertiajs/core'\nimport { Form } from '@inertiajs/react'\nimport { useRef } from 'react'\n\nexport default function Ref() {\n const formRef = useRef(null)\n\n const submitProgrammatically = () => {\n formRef.current?.submit()\n }\n\n const resetForm = () => {\n formRef.current?.reset()\n }\n\n const resetNameField = () => {\n formRef.current?.reset('name')\n }\n\n const clearAllErrors = () => {\n formRef.current?.clearErrors()\n }\n\n const setTestError = () => {\n formRef.current?.setError('name', 'This is a test error')\n }\n\n const setCurrentAsDefaults = () => {\n formRef.current?.defaults()\n }\n\n const callPrecognitionMethods = () => {\n const validator = formRef.current?.validator()\n\n if (validator && !formRef.current?.touched('company') && !formRef.current?.valid('company')) {\n formRef.current?.validate({ only: ['company'] })\n }\n }\n\n return (\n
\n

Form Ref Test

\n\n
\n {({ isDirty, hasErrors, errors }) => (\n <>\n {/* State display for testing */}\n
Form is {isDirty ? 'dirty' : 'clean'}
\n {hasErrors &&
Form has errors
}\n {errors.name &&
{errors.name}
}\n\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n \n )}\n
\n\n
\n \n \n \n \n \n \n \n
\n
\n )\n}\n" }, { "path": "packages/react/test-app/Pages/FormComponent/Reset.tsx", "content": "import { FormComponentRef } from '@inertiajs/core'\nimport { Form } from '@inertiajs/react'\nimport { useRef } from 'react'\n\ndeclare global {\n interface Window {\n resetForm: (...fields: string[]) => void\n }\n}\n\nexport default function Reset() {\n const formRef = useRef(null)\n\n // Expose reset function to window for testing\n window.resetForm = (...fields: string[]) => {\n formRef.current?.reset(...fields)\n }\n\n return (\n
\n

Form Reset

\n\n {/* Basic Text Inputs */}\n

Basic Text Inputs

\n \n \n\n {/* Select Elements */}\n

Select Elements

\n \n \n\n {/* Radio Buttons */}\n

Radio Buttons

\n\n {/* Radio buttons with default checked */}\n
\n \n \n \n
\n\n {/* Radio buttons without default */}\n
\n \n \n \n
\n\n {/* Radio buttons designed to test multiple defaults edge case */}\n
\n \n \n \n
\n\n {/* Checkboxes */}\n

Checkboxes

\n\n {/* Checkbox (single) with default checked */}\n
\n \n \n
\n\n {/* Checkbox (single) without default */}\n
\n \n \n
\n\n {/* Checkbox (multiple) with some checked */}\n
\n \n \n \n \n
\n\n {/* Multiple Select Elements */}\n

Multiple Select Elements

\n \n \n \n \n\n {/* File Inputs & Textareas */}\n

File Inputs & Textareas

\n \n \n \n\n \n\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Context/MethodsTestComponent.svelte", "content": "\n\n{#if $form}\n {#if $form.processing}Child: processing{/if}\n {#if $form.wasSuccessful}Child: was successful{/if}\n {#if $form.recentlySuccessful}Child: recently successful{/if}\n {#if $form.hasErrors}
{JSON.stringify($form.errors, null, 2)}
{/if}\n\n \n \n \n \n\n \n \n \n \n $form.setError({ name: 'Name error from child', email: 'Email error from child', bio: 'Bio error from child' })}\n >setError({'{...}'})\n\n \n \n\n \n \n\n {#if getDataResult}
{getDataResult}
{/if}\n {#if getFormDataResult}
{getFormDataResult}
{/if}\n{:else}\n
No form context available
\n{/if}\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Context/Multiple.svelte", "content": "\n\n
\n
\n Form 1 Parent: {isDirty ? 'dirty' : 'clean'}\n {#if errors.name} | Error: {errors.name}{/if}\n
\n \n \n\n\n
\n
\n Form 2 Parent: {isDirty ? 'dirty' : 'clean'}\n {#if errors.name} | Error: {errors.name}{/if}\n
\n \n \n\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Context/NestedComponent.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Context/OutsideFormComponent.svelte", "content": "\n\n{#if $form === undefined}\n
Correctly returns undefined when used outside a Form component
\n{:else}\n
Unexpectedly has form context
\n{/if}\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/DataMethods.svelte", "content": "\n\n
\n

Test getData() and getFormData() Methods

\n\n
\n \n\n \n\n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/DefaultValue.svelte", "content": "\n\n
\n

Form Default Values

\n\n
\n \n \n
{errors['user.name']}
\n
\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/DisableWhileProcessing.svelte", "content": "\n\n
\n

Form Disable While Processing Test

\n\n
\n
\n \n {#if errors.name}\n

{errors.name}

\n {/if}\n
\n\n
\n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/DottedKeys.svelte", "content": "\n\n
\n

Dotted Keys Form Test

\n\n \n
\n

Basic Dotted Keys

\n \n \n \n \n \n \n
\n\n \n
\n

Escaped Dots

\n \n \n \n
\n\n \n
\n

Mixed Notation

\n \n \n \n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Elements.svelte", "content": "\n\n
\n

Form Elements

\n\n
\n Form is {isDirty ? 'dirty' : 'clean'}\n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n \n \n
\n\n \n
\n \n \n
\n\n \n
\n \n \n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n
\n\n \n
\n \n \n
\n\n \n
\n \n
\n\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/EmptyAction.svelte", "content": "\n\n
\n

Form Empty Action Test

\n\n
\n
\n \n {#if errors.name}\n

{errors.name}

\n {/if}\n
\n\n
\n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Errors.svelte", "content": "\n\n\n

Form Errors

\n\n {#if hasErrors}\n
Form has errors
\n {:else}\n
No errors
\n {/if}\n\n
\n \n \n
{errors.name || ''}
\n
\n\n
\n \n \n
{errors.handle || ''}
\n
\n\n
\n \n setError({\n name: 'The name field is required.',\n handle: 'The handle field is invalid.',\n })}\n >\n Set Errors\n \n \n \n \n
\n\n \n\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Events.svelte", "content": "\n\n\n

Form Events & State

\n\n
\n Events: {events.join(',')}\n
\n\n
\n Processing: {String(processing)}\n
\n\n
\n Progress: \n {progress?.percentage || 0}\n \n
\n\n
\n Was successful: {String(wasSuccessful)}\n
\n\n
\n Recently successful: {String(recentlySuccessful)}\n
\n\n
\n \n
\n\n
\n \n \n \n \n \n
\n\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/FormTarget.svelte", "content": "\n\n
\n \n\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Headers.svelte", "content": "\n\n
\n

Form Headers

\n\n
\n \n
\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/InvalidateTags.svelte", "content": "\n\n
\n
\n \n User Tagged Page\n \n \n Product Tagged Page\n \n
\n\n
\n

Form Component with invalidateCacheTags

\n
\n \n \n
\n
\n\n
\n
Form Component Invalidate Tags Test Page
\n
\n Last loaded at {lastLoaded}\n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Methods.svelte", "content": "\n\n
\n

HTTP Methods

\n\n
\n \n \n \n \n \n
\n\n
Current method: {method}
\n\n
\n
\n \n
\n\n
\n \n \n
\n\n
\n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/MixedKeySerialization.svelte", "content": "\n\n
\n

Mixed Key Serialization

\n\n
\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n\n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Options.svelte", "content": "\n\n
\n

Form Options

\n\n \n \n\n
\n State: {state}\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n
\n\n {#if preserveScroll}\n
\n {/if}\n\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/BeforeValidation.svelte", "content": "\n\n
\n

Precognition - onBefore

\n\n \n
\n \n \n validate('name', {\n onBeforeValidation: handleBeforeValidation,\n })}\n />\n {#if invalid('name')}\n

{errors.name}

\n {/if}\n
\n\n
\n \n validate('email')} />\n {#if invalid('email')}\n

{errors.email}

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/Callbacks.svelte", "content": "\n\n
\n

Form Precognition Callbacks

\n\n

Callbacks Test

\n
\n
\n touch('name')} />\n
\n\n {#if validating}\n

Validating...

\n {/if}\n {#if successCalled}\n

onPrecognitionSuccess called!

\n {/if}\n {#if errorCalled}\n

onValidationError called!

\n {/if}\n {#if finishCalled}\n

onFinish called!

\n {/if}\n\n {\n successCalled = false\n errorCalled = false\n finishCalled = false\n validate({\n onPrecognitionSuccess: () => {\n successCalled = true\n },\n onValidationError: () => {\n errorCalled = true\n },\n onFinish: () => {\n finishCalled = true\n },\n })\n }}\n >\n Validate\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/Cancel.svelte", "content": "\n\n
\n

Precognition - Cancel Tests

\n\n

Auto Cancel Test

\n \n
\n validate('name')} />\n {#if invalid('name')}\n

\n {errors.name}\n

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/Default.svelte", "content": "\n\n
\n

Form Precognition

\n\n \n
\n validate('name')} />\n {#if invalid('name')}\n

{errors.name}

\n {/if}\n {#if valid('name')}\n

Name is valid!

\n {/if}\n
\n\n
\n validate('email')} />\n {#if invalid('email')}\n

{errors.email}

\n {/if}\n {#if valid('email')}\n

Email is valid!

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/DynamicArrayInputs.svelte", "content": "\n\n
\n \n\n \n {#each items as item, idx (idx)}\n
\n validate(`items.${idx}.name`)} />\n {#if invalid(`items.${idx}.name`)}

{errors[`items.${idx}.name`]}

{/if}\n
\n {/each}\n\n {#if validating}

Validating...

{/if}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/ErrorSync.svelte", "content": "\n\n
\n

Precognition Error Sync Test

\n\n \n
\n validate('name')} />\n {#if invalid('name')}\n

{errors.name}

\n {/if}\n
\n\n
\n validate('email')} />\n {#if invalid('email')}\n

{errors.email}

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/Files.svelte", "content": "\n\n
\n

Form Precognition Files

\n\n \n
\n validate('name')} />\n {#if invalid('name')}\n

{errors.name}

\n {/if}\n {#if valid('name')}\n

Name is valid!

\n {/if}\n
\n\n
\n \n {#if invalid('avatar')}\n

{errors.avatar}

\n {/if}\n {#if valid('avatar')}\n

Avatar is valid!

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n\n \n\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/Headers.svelte", "content": "\n\n
\n

Precognition - Custom Headers

\n\n \n
\n validate('name')} />\n {#if invalid('name')}\n

\n {errors.name}\n

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/Methods.svelte", "content": "\n\n
\n

Form Precognition - Touch, Reset & Validate

\n\n \n
\n touch('name')} />\n {#if invalid('name')}\n

{errors.name}

\n {/if}\n
\n\n
\n touch('email')} />\n {#if invalid('email')}\n

{errors.email}

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n\n

{touched('name') ? 'Name is touched' : 'Name is not touched'}

\n

{touched('email') ? 'Email is touched' : 'Email is not touched'}

\n

{touched() ? 'Form has touched fields' : 'Form has no touched fields'}

\n\n \n \n \n \n {\n touch('name')\n touch('name')\n }}\n >\n Touch Name Twice\n \n \n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/Transform.svelte", "content": "\n\n
\n

Form Precognition Transform

\n\n ({ name: String(data.name || '').repeat(2) })}\n let:invalid\n let:errors\n let:validate\n let:valid\n let:validating\n >\n
\n validate('name')} />\n {#if invalid('name')}\n

{errors.name}

\n {/if}\n {#if valid('name')}\n

Name is valid!

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/TransformKeys.svelte", "content": "\n\n
\n

Form Precognition Transform Keys

\n\n \n
\n validate('customer.email')}\n />\n {#if invalid('customer.email')}\n

{errors['customer.email']}

\n {/if}\n {#if valid('customer.email')}\n

Email is valid!

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/WithAllErrors.svelte", "content": "\n\n
\n

Form Precognition - All Errors

\n\n \n
\n validate('name')} />\n {#if invalid('name')}\n
\n {#if Array.isArray(errors.name)}\n {#each errors.name as error, index (index)}\n

{error}

\n {/each}\n {:else}\n

{errors.name}

\n {/if}\n
\n {/if}\n {#if valid('name')}\n

Name is valid!

\n {/if}\n
\n\n
\n validate('email')} />\n {#if invalid('email')}\n
\n {#if Array.isArray(errors.email)}\n {#each errors.email as error, index (index)}\n

{error}

\n {/each}\n {:else}\n

{errors.email}

\n {/if}\n
\n {/if}\n {#if valid('email')}\n

Email is valid!

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/WithAllErrorsConfig.svelte", "content": "\n\n
\n

Form Precognition - All Errors via Config

\n\n \n
\n validate('name')} />\n {#if invalid('name')}\n
\n {#if Array.isArray(errors.name)}\n {#each errors.name as error, index (index)}\n

{error}

\n {/each}\n {:else}\n

{errors.name}

\n {/if}\n
\n {/if}\n {#if valid('name')}\n

Name is valid!

\n {/if}\n
\n\n
\n validate('email')} />\n {#if invalid('email')}\n
\n {#if Array.isArray(errors.email)}\n {#each errors.email as error, index (index)}\n

{error}

\n {/each}\n {:else}\n

{errors.email}

\n {/if}\n
\n {/if}\n {#if valid('email')}\n

Email is valid!

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Precognition/WithoutAllErrors.svelte", "content": "\n\n
\n

Form Precognition - Array Errors

\n\n \n
\n validate('name')} />\n {#if invalid('name')}\n

{errors.name}

\n {/if}\n {#if valid('name')}\n

Name is valid!

\n {/if}\n
\n\n
\n validate('email')} />\n {#if invalid('email')}\n

{errors.email}

\n {/if}\n {#if valid('email')}\n

Email is valid!

\n {/if}\n
\n\n {#if validating}\n

Validating...

\n {/if}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Progress.svelte", "content": "\n\n
\n

Progress

\n\n
\n Nprogress appearances: {nprogressAppearances}\n
\n\n
\n \n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Ref.svelte", "content": "\n\n
\n

Form Ref Test

\n\n
\n \n
Form is {isDirty ? 'dirty' : 'clean'}
\n {#if hasErrors}\n
Form has errors
\n {/if}\n {#if errors.name}\n
{errors.name}
\n {/if}\n\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n
\n\n
\n \n \n \n \n \n \n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Reset.svelte", "content": "\n\n\n\n
\n

Form Reset

\n\n \n

Basic Text Inputs

\n \n \n\n \n

Select Elements

\n \n \n\n \n

Radio Buttons

\n\n \n
\n \n \n \n
\n\n \n
\n \n \n \n
\n\n \n
\n \n \n \n
\n\n \n

Checkboxes

\n\n \n
\n \n \n
\n\n \n
\n \n \n
\n\n \n
\n \n \n \n \n
\n\n \n

Multiple Select Elements

\n \n \n \n \n\n \n

File Inputs & Textareas

\n \n \n \n \n\n \n

HTML5 Input Types

\n \n \n \n \n \n \n \n \n \n \n\n \n

Complex Nested Fields

\n \n \n \n \n \n \n\n \n

Special Cases

\n \n \n \n \n \n\n \n

Dotted & Array Notation

\n \n \n \n \n \n \n\n \n

Numeric Values

\n
\n \n \n \n
\n
\n \n \n \n
\n \n \n\n \n

Submit

\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnError.svelte", "content": "\n\n
\n
\n \n \n

{errors.name || ''}

\n
\n\n
\n \n \n

{errors.email || ''}

\n
\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnErrorFields.svelte", "content": "\n\n
\n
\n \n \n

{errors.name || ''}

\n
\n\n
\n \n \n

{errors.email || ''}

\n
\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccess.svelte", "content": "\n\n
\n
\n \n \n

{errors.name || ''}

\n
\n\n
\n \n \n

{errors.email || ''}

\n
\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/ResetAttributes/ResetOnSuccessFields.svelte", "content": "\n\n
\n
\n \n \n

{errors.name || ''}

\n
\n\n
\n \n \n

{errors.email || ''}

\n
\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/SetDefaultsOnSuccess.svelte", "content": "\n\n
\n

{isDirty ? 'Form is dirty' : 'Form is clean'}

\n\n
\n \n \n

{errors.name || ''}

\n
\n\n
\n \n \n

{errors.email || ''}

\n
\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/SubmitButton.svelte", "content": "\n\n
\n

Submit Button Test

\n\n \n\n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Defaults.svelte", "content": "\n\n
\n

OnSubmitComplete Defaults Test

\n\n
props.defaults()}>\n
\n

{isDirty ? 'Form is dirty' : 'Form is clean'}

\n
\n\n
\n \n {#if errors.name}\n

{errors.name}

\n {/if}\n
\n\n
\n \n {#if errors.email}\n

{errors.email}

\n {/if}\n
\n\n
\n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Redirect.svelte", "content": "\n\n
\n

Form Empty Action Test

\n\n
props.reset('name')}>\n
\n \n {#if errors.name}\n

{errors.name}

\n {/if}\n
\n\n
\n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/SubmitComplete/Reset.svelte", "content": "\n\n
\n

OnSubmitComplete Reset Test

\n\n
props.reset('name')}>\n
\n \n {#if errors.name}\n

{errors.name}

\n {/if}\n
\n\n
\n \n {#if errors.email}\n

{errors.email}

\n {/if}\n
\n\n
\n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Transform.svelte", "content": "\n\n
\n

Transform Function

\n\n
\n \n \n \n
\n\n
Current transform: {transformType}
\n\n
\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/UppercaseMethod.svelte", "content": "\n\n
\n

Uppercase Method Test

\n\n \n
\n
\n \n
\n \n
\n\n \n
\n
\n \n
\n \n
\n\n \n
\n
\n \n
\n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/ViewTransition.svelte", "content": "\n\n {\n viewTransition.ready.then(() => console.log('ready'))\n viewTransition.updateCallbackDone.then(() => console.log('updateCallbackDone'))\n viewTransition.finished.then(() => console.log('finished'))\n },\n }}\n>\n \n\n" }, { "path": "packages/svelte/test-app/Pages/FormComponent/Wayfinder.svelte", "content": "\n\n
\n

Wayfinder Example

\n\n
\n
\n \n
\n\n
\n \n \n
\n\n
\n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Data.svelte", "content": "\n\n
\n \n {#if $form.errors.name}\n {$form.errors.name}\n {/if}\n \n {#if $form.errors.handle}\n {$form.errors.handle}\n {/if}\n \n {#if $form.errors.remember}\n {$form.errors.remember}\n {/if}\n\n \n \n\n \n \n\n \n \n \n\n Form has {$form.hasErrors ? '' : 'no '}errors\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Dirty.svelte", "content": "\n\n
\n
\n Form is {#if $form.isDirty}dirty{:else}clean{/if}\n
\n \n\n \n \n \n \n\n \n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/EmptyForm.svelte", "content": "\n\n
\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Errors.svelte", "content": "\n\n
\n \n {#if $form.errors.name}\n {$form.errors.name}\n {/if}\n \n {#if $form.errors.handle}\n {$form.errors.handle}\n {/if}\n \n {#if $form.errors.remember}\n {$form.errors.remember}\n {/if}\n\n \n\n \n \n \n \n \n \n\n Form has {$form.hasErrors ? '' : 'no '}errors\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/ErrorsClearOnResubmit.svelte", "content": "\n\n
\n \n {#if $form.errors.name}\n {$form.errors.name}\n {/if}\n\n \n {#if $form.errors.handle}\n {$form.errors.handle}\n {/if}\n\n \n\n Form has {$form.hasErrors ? '' : 'no '}errors\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Events.svelte", "content": "\n\n\n\n
\n \n\n \n \n\n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n\n \n\n Form was {$form.wasSuccessful ? '' : 'not '}successful\n Form was {$form.recentlySuccessful ? '' : 'not '}recently successful\n\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Methods.svelte", "content": "\n\n
\n \n \n\n \n \n \n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Nested.svelte", "content": "\n\n
\n \n \n \n \n \n \n \n \n Repository Tags\n \n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/BeforeValidation.svelte", "content": "\n\n
\n
\n \n $form.validate('name', {\n onBeforeValidation: handleBeforeValidation,\n })}\n />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n {#if $form.valid('name')}

Name is valid!

{/if}\n
\n\n
\n $form.validate('email')} />\n {#if $form.invalid('email')}\n

\n {$form.errors.email}\n

\n {/if}\n {#if $form.valid('email')}

Email is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/Callbacks.svelte", "content": "\n\n
\n
\n $form.touch('name')} />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n {#if $form.valid('name')}

Name is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n {#if successCalled}

onPrecognitionSuccess called!

{/if}\n {#if errorCalled}

onValidationError called!

{/if}\n {#if finishCalled}

onFinish called!

{/if}\n\n {\n successCalled = false\n errorCalled = false\n finishCalled = false\n $form.validate({\n onPrecognitionSuccess: () => {\n successCalled = true\n },\n onValidationError: () => {\n errorCalled = true\n },\n onFinish: () => {\n finishCalled = true\n },\n })\n }}\n >\n Validate\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/Cancel.svelte", "content": "\n\n
\n
\n $form.validate('name')}\n />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n {#if $form.valid('name')}

Name is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/Compatibility.svelte", "content": "\n\n
\n

Compatibility Test Page

\n\n
\n $form.validate('name')} />\n {#if $form.invalid('name')}\n

{$form.errors.name}

\n {/if}\n {#if $form.valid('name')}\n

Name is valid!

\n {/if}\n
\n\n
\n $form.validate('email')} />\n {#if $form.invalid('email')}\n

{$form.errors.email}

\n {/if}\n {#if $form.valid('email')}\n

Email is valid!

\n {/if}\n
\n\n
\n $form.validate('company')}\n />\n {#if $form.invalid('company')}\n

{$form.errors.company}

\n {/if}\n {#if $form.valid('company')}\n

company is valid!

\n {/if}\n
\n\n {#if $form.validating}\n

Validating...

\n {/if}\n\n \n
\n \n $form.setErrors({ name: 'setErrors test', email: 'setErrors email test', company: 'setErrors company test' })}\n >\n Test setErrors()\n \n\n \n\n \n\n \n
\n\n
\n

Name touched: {$form.touched('name') ? 'yes' : 'no'}

\n

Email touched: {$form.touched('email') ? 'yes' : 'no'}

\n

Company touched: {$form.touched('company') ? 'yes' : 'no'}

\n

Any touched: {$form.touched() ? 'yes' : 'no'}

\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/Default.svelte", "content": "\n\n
\n
\n $form.validate('name')} />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n {#if $form.valid('name')}

Name is valid!

{/if}\n
\n\n
\n $form.validate('email')} />\n {#if $form.invalid('email')}\n

\n {$form.errors.email}\n

\n {/if}\n {#if $form.valid('email')}

Email is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/DynamicArrayInputs.svelte", "content": "\n\n
\n \n\n {#each $form.items as item, idx (idx)}\n
\n $form.validate(`items.${idx}.name`)} />\n {#if $form.invalid(`items.${idx}.name`)}

\n {$form.errors[`items.${idx}.name`]}\n

{/if}\n {#if $form.valid(`items.${idx}.name`)}

Valid!

{/if}\n
\n {/each}\n\n {#if $form.validating}

Validating...

{/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/ErrorSync.svelte", "content": "\n\n
\n

Precognition Error Sync Test (Form Helper)

\n\n
\n
\n $form.validate('name')} />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n
\n\n
\n $form.validate('email')} />\n {#if $form.invalid('email')}\n

\n {$form.errors.email}\n

\n {/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n\n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/Files.svelte", "content": "\n\n
\n
\n $form.validate('name')} />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n {#if $form.valid('name')}

Name is valid!

{/if}\n
\n\n
\n \n {#if $form.invalid('avatar')}\n

\n {$form.errors.avatar}\n

\n {/if}\n {#if $form.valid('avatar')}

Avatar is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n\n \n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/Headers.svelte", "content": "\n\n
\n
\n \n $form.validate('name', {\n headers: { 'X-Custom-Header': 'custom-value' },\n })}\n />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n {#if $form.valid('name')}

Name is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/Instantiate.svelte", "content": "\n\n\n\n\n\n\n\n\n\n{#if $currentFormStore && $currentFormStore.validating}

Validating...

{/if}\n{#if $currentFormStore && $currentFormStore.errors && $currentFormStore.errors.name}

\n {$currentFormStore.errors.name}\n

{/if}\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/Methods.svelte", "content": "\n\n
\n
\n $form.touch('name')} />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n
\n\n
\n $form.touch('email')} />\n {#if $form.invalid('email')}\n

\n {$form.errors.email}\n

\n {/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n\n

{$form.touched('name') ? 'Name is touched' : 'Name is not touched'}

\n

{$form.touched('email') ? 'Email is touched' : 'Email is not touched'}

\n

{$form.touched() ? 'Form has touched fields' : 'Form has no touched fields'}

\n\n \n \n \n \n {\n $form.touch('name')\n $form.touch('name')\n }}\n >\n Touch Name Twice\n \n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/Transform.svelte", "content": "\n\n
\n
\n $form.validate('name')} />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n {#if $form.valid('name')}

Name is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/TransformKeys.svelte", "content": "\n\n
\n
\n $form.validate('customer.email')}\n />\n {#if $form.invalid('customer.email')}\n

{$form.errors['customer.email']}

\n {/if}\n {#if $form.valid('customer.email')}

Email is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/WithAllErrors.svelte", "content": "\n\n
\n
\n $form.validate('name')} />\n {#if $form.invalid('name')}\n
\n {#if Array.isArray($form.errors.name)}\n {#each $form.errors.name as error, index (index)}\n

\n {error}\n

\n {/each}\n {:else}\n

{$form.errors.name}

\n {/if}\n
\n {/if}\n {#if $form.valid('name')}

Name is valid!

{/if}\n
\n\n
\n $form.validate('email')} />\n {#if $form.invalid('email')}\n
\n {#if Array.isArray($form.errors.email)}\n {#each $form.errors.email as error, index (index)}\n

\n {error}\n

\n {/each}\n {:else}\n

{$form.errors.email}

\n {/if}\n
\n {/if}\n {#if $form.valid('email')}

Email is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/WithAllErrorsConfig.svelte", "content": "\n\n
\n
\n form.validate('name')} />\n {#if $form.invalid('name')}\n
\n {#if Array.isArray($form.errors.name)}\n {#each $form.errors.name as error, index (index)}\n

{error}

\n {/each}\n {:else}\n

{$form.errors.name}

\n {/if}\n
\n {/if}\n {#if $form.valid('name')}\n

Name is valid!

\n {/if}\n
\n\n
\n form.validate('email')} />\n {#if $form.invalid('email')}\n
\n {#if Array.isArray($form.errors.email)}\n {#each $form.errors.email as error, index (index)}\n

{error}

\n {/each}\n {:else}\n

{$form.errors.email}

\n {/if}\n
\n {/if}\n {#if $form.valid('email')}\n

Email is valid!

\n {/if}\n
\n\n {#if $form.validating}\n

Validating...

\n {/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Precognition/WithoutAllErrors.svelte", "content": "\n\n
\n
\n $form.validate('name')} />\n {#if $form.invalid('name')}\n

\n {$form.errors.name}\n

\n {/if}\n {#if $form.valid('name')}

Name is valid!

{/if}\n
\n\n
\n $form.validate('email')} />\n {#if $form.invalid('email')}\n

\n {$form.errors.email}\n

\n {/if}\n {#if $form.valid('email')}

Email is valid!

{/if}\n
\n\n {#if $form.validating}

Validating...

{/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/RememberEdit.svelte", "content": "\n\n
\n

Edit User {user.id}

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/RememberIndex.svelte", "content": "\n\n
\n

Users Index

\n
    \n {#each users as user (user.id)}\n
  • \n Edit {user.name}\n
    • \n {/each}\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/ReservedKeys.svelte", "content": "\n\n
\n
Form created with progress value: {$form.progress}
\n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/Transform.svelte", "content": "\n\n
\n \n \n\n \n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/Any.svelte", "content": "\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/Child.svelte", "content": "\n\n

Name: {form.name}

\n

Email: {form.email}

\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/CircularReferences.svelte", "content": "\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/Data.svelte", "content": "\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/DynamicInputName.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/Errors.svelte", "content": "\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/FormDataCallback.svelte", "content": "\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/Generic.svelte", "content": "\n\n
{form}
\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/Nullable.svelte", "content": "\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/NullableNestedObject.svelte", "content": "\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/OptionalProps.svelte", "content": "\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/Parent.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/Precognition.svelte", "content": "\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/ValidationKey.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/WrapperChild.svelte", "content": "\n\n\n
\n \n\n" }, { "path": "packages/svelte/test-app/Pages/FormHelper/TypeScript/WrapperParent.svelte", "content": "\n\n\n {form.children.map((child) => child.title)}\n\n" }, { "path": "packages/svelte/test-app/Pages/History/Page.svelte", "content": "\n\nPage 1\nPage 2\nPage 3\nPage 4\nPage 5\n\n\n\n
This is page {pageNumber}.
\n
Multi byte character: {multiByte}
\n\n
\n" }, { "path": "packages/svelte/test-app/Pages/History/Version.svelte", "content": "\n\nPage 1\nPage 2\n" }, { "path": "packages/svelte/test-app/Pages/HistoryQuota/Page.svelte", "content": "\n\n
\n

History Quota Test - Page {pageNumber}

\n

Data size: {largeData?.length?.toLocaleString()} bytes

\n\n
\n {#each Array.from({ length: 20 }, (_, i) => i + 1) as n (n)}\n \n Page {n}\n \n {/each}\n
\n\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/HistoryThrottle.svelte", "content": "\n\n
\n

History Throttle Test

\n

State updates: {callCount}

\n \n Go Home\n
\n" }, { "path": "packages/svelte/test-app/Pages/Home.svelte", "content": "\n\n
\n This is the Test App Entrypoint page\n\n Basic Links\n 'Replace' Links\n\n Manual basic visits\n Manual 'Replace' visits\n\n \n Manual Redirect visit\n\n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/CustomElement.svelte", "content": "\n\n\n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRef.svelte", "content": "\n\n
\n

Custom Triggers with Refs Test

\n\n tableHeader}\n endElement={() => tableFooter}\n itemsElement={() => tableBody}\n let:loading\n >\n
Spacer
\n\n \n \n \n \n \n \n \n\n \n {#each users.data as user (user.id)}\n \n \n \n \n {/each}\n\n {#if loading}\n \n \n \n {/if}\n \n\n \n \n \n \n \n
IDName
{user.id}{user.name}
Loading...
\n Table Footer - Triggers when this comes into view\n
\n\n
Spacer
\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersRefObject.svelte", "content": "\n\n
\n

Custom Triggers with Svelte Ref Objects Test

\n\n tableHeader}\n endElement={() => tableFooter}\n itemsElement={() => tableBody}\n let:loading\n >\n
Spacer
\n\n \n \n \n \n \n \n \n\n \n {#each users.data as user (user.id)}\n \n \n \n \n {/each}\n\n {#if loading}\n \n \n \n {/if}\n \n\n \n \n \n \n \n
IDName
{user.id}{user.name}
Loading...
\n Table Footer - Triggers when this comes into view\n
\n\n
Spacer
\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/CustomTriggersSelector.svelte", "content": "\n\n
\n

Custom Triggers with Selectors Test

\n\n \n
Spacer
\n\n \n \n \n \n \n \n \n\n \n {#each users.data as user (user.id)}\n \n \n \n \n {/each}\n\n {#if loading}\n \n \n \n {/if}\n \n\n \n \n \n \n \n
IDName
{user.id}{user.name}
Loading...
\n Table Footer - Triggers when this comes into view\n
\n\n
Spacer
\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/DataTable.svelte", "content": "\n\n\n \n \n \n \n \n \n \n\n \n {#each users.data as user (user.id)}\n \n \n \n \n {/each}\n \n\n \n {#if loading}\n \n \n \n {/if}\n \n
IDName
{user.id}{user.name}
Loading...
\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/Deferred.svelte", "content": "\n\n\n \n
Loading deferred scroll prop...
\n \n\n \n
\n

Has more previous items: {hasMore}

\n \n
\n\n {#each users?.data ?? [] as user (user.id)}\n \n {/each}\n\n
\n

Has more next items: {hasMore}

\n \n
\n \n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/DualContainers.svelte", "content": "\n\n
\n
\n \n
\n

Users1 Container

\n \n \n
Loading more users1...
\n\n {#each users1.data as user (user.id)}\n \n {/each}\n \n
\n
\n\n \n
\n

Users2 Container

\n \n \n
Loading more users2...
\n\n {#each users2.data as user (user.id)}\n \n {/each}\n \n
\n
\n \n\n

Content below the scroll containers to verify page doesn't scroll.

\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/DualSibling.svelte", "content": "\n\n
\n

Dual Sibling InfiniteScroll

\n

Two InfiniteScroll components side by side, sharing the window scroll

\n\n
\n
\n

Users 1

\n \n {#each users1.data as user (user.id)}\n \n {/each}\n\n
\n \n
\n \n
\n\n
\n

Users 2

\n \n {#each users2.data as user (user.id)}\n \n {/each}\n\n
\n \n
\n \n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/Empty.svelte", "content": "\n\n
\n

Empty Dataset Test

\n \n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n {#if users.data.length === 0}\n
No users found.
\n {/if}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/Filtering.svelte", "content": "\n\n
\n
\n No Filter\n A-M\n N-Z\n
Current filter: {filter || 'none'}
\n
Current search: {search || 'none'}
\n \n
\n\n \n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n \n\n
\n No Filter\n A-M\n N-Z\n
Current filter: {filter || 'none'}
\n
Current search: {search || 'none'}
\n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/FilteringManual.svelte", "content": "\n\n
\n
\n
Current search: {search || 'none'}
\n \n
\n\n \n
\n

Has more previous items: {hasMore}

\n \n
\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n
\n

Has more next items: {hasMore}

\n \n
\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/FilteringReset.svelte", "content": "\n\n
\n
\n
Current search: {search || 'none'}
\n \n
\n\n \n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/Grid.svelte", "content": "\n\n\n
Loading more users...
\n\n \n {#each users.data as user (user.id)}\n \n {/each}\n \n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/HorizontalScroll.svelte", "content": "\n\n
\n \n \n Loading...\n
\n\n {#each users.data as user (user.id)}\n \n {user.name}\n \n {/each}\n \n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/InfiniteScrollWithLink.svelte", "content": "\n\n
\n Go back to Links\n \n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/InvisibleFirstChild.svelte", "content": "\n\n
\n

Infinite Scroll with Invisible First Child

\n\n \n
Loading...
\n\n
Hidden first element
\n\n {#each users.data as user (user.id)}\n \n {/each}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/Links.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/Manual.svelte", "content": "\n\n\n
\n

Has more previous items: {hasMore}

\n \n
\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n
\n

Has more next items: {hasMore}

\n \n
\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/ManualAfter.svelte", "content": "\n\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n
\n {#if loading}\n

Loading...

\n {/if}\n\n

Manual mode: {manualMode}

\n\n {#if manualMode}\n \n {/if}\n
\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/OverflowX.svelte", "content": "\n\n
\n \n {#each users.data as user (user.id)}\n
\n
{user.name}
\n
\n {/each}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/PreserveUrl.svelte", "content": "\n\n\n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/ProgrammaticRef.svelte", "content": "\n\n
\n

Programmatic Ref Test

\n\n
\n

Has more previous items: {hasPrevious.toString()}

\n

Has more next items: {hasNext.toString()}

\n\n
\n \n \n
\n
\n\n \n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n \n\n

Total items on page: {users.data.length}

\n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/ReloadUnrelated.svelte", "content": "\n\n
\n
\n \n Current time: {time}\n
\n\n \n {#each users.data as user (user.id)}\n \n {/each}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/RememberState.svelte", "content": "\n\n
\n
\n \n \n
\n Go Home\n
\n\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n
\n {#if loading}\n

Loading...

\n {/if}\n\n

Manual mode: {manualMode}

\n\n {#if manualMode}\n \n {/if}\n
\n\n\n
\n Go to Home\n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/Reverse.svelte", "content": "\n\n\n
Loading...
\n\n {#each reversedUsers as user (user.id)}\n \n {/each}\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/ReverseShortContent.svelte", "content": "\n\n
\n
Header
\n\n
\n \n
Loading...
\n\n {#each reversedUsers as user (user.id)}\n
\n {user.name}\n
\n {/each}\n \n
\n\n
Footer
\n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/ScrollContainer.svelte", "content": "\n\n
\n

Infinite Scroll in Container

\n

This component scrolls within a fixed-height container, not the full page.

\n\n \n \n \n
Loading more users...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n \n
\n\n

Content below the scroll container to verify page doesn't scroll.

\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/ShortContent.svelte", "content": "\n\n\n \n \n {#each users.data as user (user.id)}\n \n \n \n \n {/each}\n \n
{user.id}{user.name}
\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/Toggles.svelte", "content": "\n\n
\n
\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n
\n\n \n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n \n\n

Total items on page: {users.data.length}

\n
\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/TriggerBoth.svelte", "content": "\n\n\n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/TriggerEndBuffer.svelte", "content": "\n\n\n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/TriggerStartBuffer.svelte", "content": "\n\n\n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/UpdateQueryString.svelte", "content": "\n\n\n
Loading...
\n\n {#each users.data as user (user.id)}\n \n {/each}\n\n" }, { "path": "packages/svelte/test-app/Pages/InfiniteScroll/UserCard.svelte", "content": "\n\n\n\n\n {user.name}\n\n" }, { "path": "packages/svelte/test-app/Pages/Links/AsWarning.svelte", "content": "\n\n
\n This is the links page that demonstrates inertia-links with an 'as' warning\n\n {method} Link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/AsWarningFalse.svelte", "content": "\n\n
\n This is the links page that demonstrates inertia-links without the 'as' warning\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/AutomaticCancellation.svelte", "content": "\n\n
\n This is the links page that demonstrates that only one visit can be active at a time\n console.log('cancelled')}\n on:start={() => console.log('started')}\n class=\"visit\"\n >\n Link\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/CancelSyncRequest.svelte", "content": "\n\n

\n Page {page}\n

\n\nGo to Page 1\nGo to Page 2\nGo to Page 3\n" }, { "path": "packages/svelte/test-app/Pages/Links/Data/AutoConverted.svelte", "content": "\n\n
\n This is the links page that demonstrates the automatic conversion of plain objects to form-data\n\n GET Link\n \n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/Data/FormData.svelte", "content": "\n\n
\n This is the links page that demonstrates passing data through FormData objects\n\n GET Link\n \n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/Data/Object.svelte", "content": "\n\n
\n This is the links page that demonstrates passing data through plain objects\n\n GET Link\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/DataLoading.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/Links/Headers.svelte", "content": "\n\n
\n This is the links page that demonstrates passing custom headers\n Standard visit Link\n\n GET Link\n POST Link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/Location.svelte", "content": "\n\n
\n This is the links page that demonstrates location visits inertia-links\n\n Location visit\n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/Method.svelte", "content": "\n\n
\n This is the links page that demonstrates inertia-link methods\n\n GET Link\n \n \n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/PartialReloads.svelte", "content": "\n\n
\n This is the links page that demonstrates partial reloads\n Foo is now {foo}\n Bar is now {bar}\n Baz is now {baz}\n 
{JSON.stringify(headers, null, 2)}
\n\n Update All\n Only foo + bar\n Only baz\n Except foo + bar\n Except baz\n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/PathTraversal.svelte", "content": "\n\n
\n Up one level \n\n Up two levels and open method \n\n Up three levels \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/PreserveScroll.svelte", "content": "\n\n\n\n
\n This is the links page that demonstrates scroll preservation with scroll regions\n Foo is now {foo}\n\n \n Preserve Scroll\n \n \n Reset Scroll\n \n\n \n Preserve Scroll (Callback)\n \n \n Reset Scroll (Callback)\n \n\n Off-site link\n\n Article \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/PreserveScrollFalse.svelte", "content": "\n\n\n\n
\n This is the links page that demonstrates scroll preservation without scroll regions\n Foo is now {foo}\n\n Preserve Scroll\n Reset Scroll\n\n Preserve Scroll (Callback)\n Reset Scroll (Callback)\n\n Off-site link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/PreserveState.svelte", "content": "\n\n\n\n
\n This is the links page that demonstrates preserve state on Links\n Foo is now {foo}\n \n\n \n [State] Preserve: true\n \n \n [State] Preserve: false\n \n \n [State] Preserve Callback: true\n \n \n [State] Preserve Callback: false\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/PreserveUrl.svelte", "content": "\n\n
\n This is the links page that demonstrates preserve url on Links\n Foo is now {foo}\n\n \n [URL] Preserve: true\n \n \n [URL] Preserve: false\n \n\n {#if items}\n
\n
\n {#each items.data as item, index (index)}\n
{item}
\n {/each}\n
\n\n Items loaded: {items.data.length}\n {items.next_page_url ? 'true' : 'false'}\n\n {#if items.next_page_url}\n \n Load More\n \n {/if}\n\n {#if items.next_page_url}\n \n {/if}\n
\n {/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/PropUpdate.svelte", "content": "\n\n
\n \n The Link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/Reactivity.svelte", "content": "\n\n
\n \n This page demonstrates reactivity in Inertia links. Click the button to change the link properties.\n \n\n Submit\n\n \n\n Prefetch Link\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/Replace.svelte", "content": "\n\n
\n This is the links page that demonstrates replace on Links\n\n [State] Replace: true\n [State] Replace: false\n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/ScrollRegionList.svelte", "content": "\n\n\n\n
\n Scrollable list with scroll region\n
Clicked user: {user_id || 'none'}
\n\n {#each users as user (user.id)}\n
\n
{user.name}
\n \n \n \n
\n {/each}\n
\n" }, { "path": "packages/svelte/test-app/Pages/Links/UrlFragments.svelte", "content": "\n\n\n\n
\n This is the links page that demonstrates url fragment behaviour\n
\n \n \n
Document scroll position is {documentScrollLeft} & {documentScrollTop}
\n Basic link\n Fragment link\n Non-existent fragment link\n\n
This is the element with id 'target'
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/MatchPropsOnKey.svelte", "content": "\n\n
bar count is {bar.length}
\n
baz count is {baz.length}
\n
foo.data count is {foo.data.length}
\n
first foo.data name is {foo.data[0].name}
\n
last foo.data name is {foo.data[foo.data.length - 1].name}
\n
foo.companies count is {foo.companies.length}
\n
first foo.companies name is {foo.companies[0].name}
\n
last foo.companies name is {foo.companies[foo.companies.length - 1].name}
\n
foo.teams count is {foo.teams.length}
\n
first foo.teams name is {foo.teams[0].name}
\n
last foo.teams name is {foo.teams[foo.teams.length - 1].name}
\n
foo.page is {foo.page}
\n
foo.per_page is {foo.per_page}
\n
foo.meta.label is {foo.meta.label}
\n\n\n" }, { "path": "packages/svelte/test-app/Pages/MergeNestedProps.svelte", "content": "\n\n
\n

{users.data.map((user) => user.name).join(', ')}

\n

Page: {users.meta.page}, Per Page: {users.meta.perPage}

\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/MergeProps.svelte", "content": "\n\n
bar count is {bar.length}
\n
foo count is {foo.length}
\n\n\n" }, { "path": "packages/svelte/test-app/Pages/NavigateNonInertia.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/NetworkError.svelte", "content": "\n\n
\n

Network Error

\n {#if error}\n
Network error occurred
\n {/if}\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/ClientSideVisit.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\n\n\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/CustomKeyPageA.svelte", "content": "\n\n

Permissions: {userPermissions}

\n

Bar: {bar}

\nGo to Custom Key Page B\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/CustomKeyPageB.svelte", "content": "\n\n

Permissions: {permissions}

\n

Bar: {bar}

\nGo to Custom Key Page A\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/DeferredPageA.svelte", "content": "\n\n\n \n
Loading foo...
\n \n\n

Foo: {foo?.text}

\n\n\n

Bar: {bar}

\n\nGo to Deferred Page B\nGo to Deferred Page C\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/DeferredPageB.svelte", "content": "\n\n\n \n
Loading foo...
\n \n\n

Foo: {foo?.text}

\n\n\n

Bar: {bar}

\n\nGo to Deferred Page A\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/DeferredPageC.svelte", "content": "\n\n\n \n
Loading foo...
\n \n\n

Foo: {foo?.text}

\n\n\n

Bar: {bar}

\n\nGo to Deferred Page A\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/MergePageA.svelte", "content": "\n\n

Items count: {items.length}

\n

Bar: {bar}

\nGo to Merge Page B\n\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/MergePageB.svelte", "content": "\n\n

Items count: {items.length}

\n

Bar: {bar}

\nGo to Merge Page A\n\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/OptionalPageA.svelte", "content": "\n\n

Foo: {foo ?? 'not loaded'}

\n

Bar: {bar}

\nGo to Optional Page B\n\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/OptionalPageB.svelte", "content": "\n\n

Foo: {foo ?? 'not loaded'}

\n

Bar: {bar}

\nGo to Optional Page A\n\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/PageA.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\nGo to Page B\nGo to Page C\nGo to Page D\nGo to Page E (short cache)\n\n\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/PageB.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\nGo to Page A\n\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/PageC.svelte", "content": "\n\nGo to Page A\nGo to Page B\nGo to Page D\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/PageD.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/PageE.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/PartialReloadA.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\nGo to Partial Reload B\n\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/PartialReloadB.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\nGo to Partial Reload A\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/SlowDeferredPageA.svelte", "content": "\n\n\n \n
Loading foo...
\n \n\n

Foo: {foo}

\n\n\n

Bar: {bar}

\n\nGo to Page B\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/SlowDeferredPageB.svelte", "content": "\n\n\n \n
Loading foo...
\n \n\n

Foo: {foo}

\n\n\n

Bar: {bar}

\n\nGo to Page A\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/TtlPageA.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\nGo to TTL Page B\nGo to TTL Page C\n\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/TtlPageB.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\nGo to TTL Page A\n" }, { "path": "packages/svelte/test-app/Pages/OnceProps/TtlPageC.svelte", "content": "\n\n

Foo: {foo}

\n

Bar: {bar}

\nGo to TTL Page A\n" }, { "path": "packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageA.svelte", "content": "\n\n\n\n
\n Nested Persistent Layout - Page A\n Page B\n
\n" }, { "path": "packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageB.svelte", "content": "\n\n\n\n
\n Nested Persistent Layout - Page B\n Page A\n
\n" }, { "path": "packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageA.svelte", "content": "\n\n\n\n
\n Simple Persistent Layout - Page A\n Page B\n
\n" }, { "path": "packages/svelte/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageB.svelte", "content": "\n\n\n\n
\n Simple Persistent Layout - Page B\n Page A\n
\n" }, { "path": "packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.svelte", "content": "\n\n\n\n
\n Nested Persistent Layout - Page A\n Page B\n
\n" }, { "path": "packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.svelte", "content": "\n\n\n\n
\n Nested Persistent Layout - Page B\n Page A\n
\n" }, { "path": "packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.svelte", "content": "\n\n\n\n
\n Simple Persistent Layout - Page A\n Page B\n
\n" }, { "path": "packages/svelte/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.svelte", "content": "\n\n\n\n
\n Simple Persistent Layout - Page B\n Page A\n
\n" }, { "path": "packages/svelte/test-app/Pages/Poll/Hook.svelte", "content": "\n\nHome\n" }, { "path": "packages/svelte/test-app/Pages/Poll/HookManual.svelte", "content": "\n\n\n\n" }, { "path": "packages/svelte/test-app/Pages/Poll/RouterManual.svelte", "content": "\n\n\n\n" }, { "path": "packages/svelte/test-app/Pages/Poll/UnchangedData.svelte", "content": "\n\n
\n

replaceState calls: {replaceStateCalls}

\n

polls finished: {pollsFinished}

\n
\n" }, { "path": "packages/svelte/test-app/Pages/Prefetch/AfterError.svelte", "content": "\n\n
\n \n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Prefetch/Form.svelte", "content": "\n\n
\n

\n Random Value: {$page.props.randomValue}\n

\n \n \n Back to Test Page\n
\n" }, { "path": "packages/svelte/test-app/Pages/Prefetch/Page.svelte", "content": "\n\n\n\n
This is page {pageNumber}
\n
\n Last loaded at {lastLoaded}\n
\n" }, { "path": "packages/svelte/test-app/Pages/Prefetch/PreserveState.svelte", "content": "\n\n
\n
Current Page: {page}
\n
Timestamp: {timestamp}
\n\n

Prefetch:

\n \n\n

Load (should use cache if prefetched):

\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Prefetch/SWR.svelte", "content": "\n\n\n\n
This is page {pageNumber}
\n
\n Last loaded at {lastLoaded}\n
\n" }, { "path": "packages/svelte/test-app/Pages/Prefetch/Tags.svelte", "content": "\n\n
\n \n
\n \n \n \n
\n\n
\n

Form Test

\n
\n \n \n
\n
\n\n
\n
This is tags page {pageNumber}
\n
\n Last loaded at {lastLoaded}\n
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/Prefetch/TestPage.svelte", "content": "\n\n
\n Go to Prefetch Form\n
\n" }, { "path": "packages/svelte/test-app/Pages/Prefetch/Wayfinder.svelte", "content": "\n\n
\n

\n Is Prefetched: {isPrefetched}\n

\n

\n Is Prefetching: {isPrefetching}\n

\n\n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/PreserveEqualProps.svelte", "content": "\n\n
\n

Preserve Equal Props

\n

Count A: {nestedA.count}

\n

Date B: {nestedB.date}

\n

Effect A Count: {effectACount}

\n

Effect B Count: {effectBCount}

\n Submit and redirect back\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/ProgressComponent.svelte", "content": "\n\n\n\n
\n

Progress API Test

\n\n
\n \n \n \n \n \n
\n\n
\n \n \n \n \n
\n\n
\n \n \n \n
\n\n
\n Logs: {logs.join(', ')}\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/Reload/Concurrent.svelte", "content": "\n\n
\n
Foo: {foo}
\n
Bar: {bar}
\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Reload/ConcurrentWithData.svelte", "content": "\n\n
\n
Foo: {foo}
\n
Bar: {bar}
\n
Timeframe: {timeframe}
\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Remember/Components/ComponentA.svelte", "content": "\n\n
\n This component uses a string 'key' for the remember functionality.\n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Remember/Components/ComponentB.svelte", "content": "\n\n
\n This component uses a string 'key' for the remember functionality.\n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/Remember/Default.svelte", "content": "\n\n
\n \n \n \n\n Navigate away\n
\n" }, { "path": "packages/svelte/test-app/Pages/Remember/FormHelper/Default.svelte", "content": "\n\n
\n \n {#if $form.errors.name}\n {$form.errors.name}\n {/if}\n \n {#if $form.errors.handle}\n {$form.errors.handle}\n {/if}\n \n {#if $form.errors.remember}\n {$form.errors.remember}\n {/if}\n \n\n \n\n Navigate away\n
\n" }, { "path": "packages/svelte/test-app/Pages/Remember/FormHelper/Password.svelte", "content": "\n\n
\n \n \n\n Navigate away\n
\n" }, { "path": "packages/svelte/test-app/Pages/Remember/FormHelper/Remember.svelte", "content": "\n\n
\n \n {#if $form.errors.name}\n {$form.errors.name}\n {/if}\n \n {#if $form.errors.handle}\n {$form.errors.handle}\n {/if}\n \n {#if $form.errors.remember}\n {$form.errors.remember}\n {/if}\n \n\n \n \n\n Navigate away\n
\n" }, { "path": "packages/svelte/test-app/Pages/Remember/MultipleComponents.svelte", "content": "\n\n
\n \n \n \n\n \n \n\n Navigate away\n Navigate off-site\n
\n" }, { "path": "packages/svelte/test-app/Pages/Remember/Object.svelte", "content": "\n\n
\n \n \n \n\n Navigate away\n
\n" }, { "path": "packages/svelte/test-app/Pages/Remember/Router.svelte", "content": "\n\n
\n

Foo: {foo}

\n

Bar: {bar}

\n \n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/SSR/Page1.svelte", "content": "\n\n
\n

SSR Page 1

\n\n
\n

Name: {user.name}

\n

Email: {user.email}

\n
\n\n
    \n {#each items as item (item)}\n
  • {item}
    • \n {/each}\n
\n\n

Count: {count}

\n\n Navigate to another page\n
\n" }, { "path": "packages/svelte/test-app/Pages/SSR/Page2.svelte", "content": "\n\n
\n

SSR Page 2

\n

Navigated: {navigatedTo}

\n\n Go back\n
\n" }, { "path": "packages/svelte/test-app/Pages/SSR/PageWithScriptElement.svelte", "content": "\n\n
\n

SSR Page With Script Element

\n

{message}

\n
\n" }, { "path": "packages/svelte/test-app/Pages/ScrollAfterRender.svelte", "content": "\n\n\n\n

Article Header

\n

Page {page}

\n
\n

\n Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id minim\n sit elit.\n

\n \n Go to page {page + 1}\n \n {#each Array(500).keys() as i (i)}\n
\n

\n Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id\n minim sit elit. Amet pariatur occaecat pariatur duis eiusmod dolore magna. Et commodo cupidatat in commodo elit\n cupidatat minim qui id non enim ad. Culpa aliquip ad Lorem sit consectetur ullamco culpa duis nisi et fugiat\n mollit eiusmod. Laboris voluptate veniam consequat proident in nulla irure velit.\n

\n\n

\n Sit sint laboris sunt eiusmod ipsum laborum eiusmod amet commodo exercitation in duis magna. Proident sunt minim\n in elit qui. Id pariatur commodo fugiat excepteur in deserunt Lorem ipsum occaecat est. Excepteur sit tempor\n ipsum ex officia veniam enim amet velit fugiat mollit cillum. Incididunt aliqua nulla id occaecat nulla. Non ea\n ad est occaecat deserunt officia qui commodo exercitation.\n

\n\n

\n Voluptate laborum quis aliqua ullamco magna amet ullamco laborum qui cillum eu. Dolore dolore aliqua proident\n proident sunt ipsum in. Enim velit dolore labore dolor quis incididunt duis culpa Lorem. Eu adipisicing non elit\n fugiat voluptate labore ipsum dolore consectetur commodo. Et in et cillum duis consequat quis ex eu commodo.\n Eiusmod aliqua excepteur consectetur eiusmod aute et consectetur sit pariatur dolore qui officia pariatur.\n

\n\n

\n Non sunt eu mollit qui reprehenderit. Aute culpa anim voluptate do in esse duis laborum ad dolore. Ullamco nisi\n in nostrud officia do. Duis pariatur officia id duis. Deserunt ad incididunt est sint consectetur reprehenderit\n mollit est Lorem ea pariatur anim dolor adipisicing. Nostrud irure magna nostrud laboris aute sunt veniam\n laboris veniam incididunt sit. Nulla proident ad aliqua fugiat culpa sunt est in dolor velit ad irure nulla.\n

\n\n

\n Do aute laborum deserunt non laborum voluptate voluptate. Anim ut laborum magna sunt cupidatat irure. Cupidatat\n fugiat minim sint cillum laborum excepteur irure id est irure ad occaecat adipisicing enim. Deserunt nulla anim\n proident velit irure nostrud est est reprehenderit consequat pariatur qui. Fugiat Lorem sint eu laborum minim\n pariatur cillum mollit nulla consequat ullamco ex. Ex consectetur ad ut irure fugiat occaecat aliqua\n exercitation cillum ipsum anim dolore tempor.\n

\n\n

\n Adipisicing consequat irure fugiat Lorem deserunt aliquip do cupidatat. Lorem labore elit ex qui nostrud qui\n cillum sunt adipisicing occaecat. Sunt nostrud amet amet cupidatat fugiat Lorem quis nulla id cillum esse eu.\n Ullamco aliqua dolore irure amet mollit anim velit dolore.\n

\n\n

\n Veniam cupidatat ipsum ea officia ipsum nisi laborum culpa qui dolore. Aliqua Lorem nisi labore ea velit aliquip\n irure excepteur eu. Laboris proident duis non labore sunt quis aute tempor laboris enim anim eiusmod.\n

\n\n

\n Minim proident ut aliqua ea ut culpa fugiat ullamco nisi esse nostrud reprehenderit id. Id id ullamco velit anim\n nisi magna Lorem tempor. Et veniam occaecat ut labore consequat fugiat duis.\n

\n\n

\n Adipisicing ea consectetur adipisicing aute eu pariatur enim labore consequat occaecat consectetur minim nisi.\n Cillum commodo sunt labore reprehenderit. Duis esse excepteur magna tempor eiusmod exercitation Lorem\n reprehenderit excepteur pariatur. Esse cupidatat occaecat magna do aliquip Lorem. Consectetur adipisicing\n consequat dolore nostrud esse eu cillum id commodo duis. Aliquip dolor cillum cupidatat fugiat.\n

\n\n

\n Ex eiusmod id est laborum sunt ex ea aute adipisicing ad magna deserunt duis. Nostrud velit dolore id commodo\n quis enim fugiat. Sint non quis consectetur voluptate aliqua dolore nulla. Irure sit reprehenderit sint laboris\n non elit. Duis minim nisi esse dolor. Sit ex in consequat non occaecat commodo irure et. Commodo qui ipsum Lorem\n magna consequat consequat et minim eiusmod Lorem eiusmod cupidatat voluptate.\n

\n
\n {/each}\n
\n" }, { "path": "packages/svelte/test-app/Pages/ScrollRegionPreserveUrl.svelte", "content": "\n\n
\n
\n
Page: {page}
\n \n {#each items as num (num)}\n
Item {num}
\n {/each}\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/ScrollSmooth.svelte", "content": "\n\n
\n

{page === 'long' ? 'Long Page' : 'Short Page'}

\n\n
\n\n {#if page === 'long'}\n Go to Short Page\n {:else}\n Go to Long Page\n {/if}\n
\n" }, { "path": "packages/svelte/test-app/Pages/ScrollableParent.svelte", "content": "\n\n
\n

ScrollableParent Tests

\n\n
\n \n
\n

overflow-x: hidden

\n
\n
Test
\n
\n

{results.overflowXHidden?.tagName || 'null'}

\n
\n\n \n
\n

overflow-x: scroll

\n \n
Wide content
\n
\n

{results.overflowXScroll?.dataset?.testid || 'null'}

\n
\n\n \n
\n

overflow-y: auto + height

\n \n
\n

Content

\n

Content

\n

Content

\n
\n
\n

{results.overflowYAuto?.dataset?.testid || 'null'}

\n
\n\n \n
\n

overflow-y: auto (no height)

\n
\n
Content
\n
\n

{results.overflowYAutoNoHeight?.tagName || 'null'}

\n
\n\n \n
\n

overflow-x: scroll, overflow-y: hidden

\n \n
\n Wide content\n
\n
\n

\n {results.overflowXScrollOverflowYHidden?.dataset?.testid || 'null'}\n

\n \n\n \n
\n

overflow-x: scroll + max-width

\n \n
\n Wide content\n
\n
\n

{results.horizontalScrollCalc?.dataset?.testid || 'null'}

\n \n\n \n
\n

overflow-y: auto + max-height

\n \n
\n

Content

\n

Content

\n

Content

\n
\n
\n

\n {results.verticalScrollMaxHeight?.dataset?.testid || 'null'}\n

\n \n\n \n
\n

Nested containers

\n
\n

Outer

\n
\n
\n

Content

\n

Content

\n

Content

\n

Content

\n

Content

\n
\n
\n
\n

{results.nestedScroll?.dataset?.testid || 'null'}

\n
\n\n \n
\n

overflow: auto (no constraints)

\n
\n
Content
\n
\n

{results.overflowAutoNoConstraints?.tagName || 'null'}

\n
\n\n \n
\n

Flex horizontal carousel

\n \n \n Item\n
\n
Item
\n
Item
\n \n

{results.flexHorizontalCarousel?.dataset?.testid || 'null'}

\n \n\n \n
\n

overflow-x: scroll (overflow-y coerced)

\n \n
\n Wide\n
\n
\n

\n {results.coercedAutoNoConstraint?.dataset?.testid || 'null'}\n

\n \n\n \n
\n

display: contents (skip parent)

\n \n
\n
\n

Content

\n

Content

\n

Content

\n

Content

\n
\n
\n
\n

{results.displayContents?.dataset?.testid || 'null'}

\n \n\n \n
\n

overflow: clip

\n
\n
\n

Content

\n

Content

\n
\n
\n

{results.overflowClip?.tagName || 'null'}

\n
\n\n \n
\n

overflow: overlay

\n \n
\n

Content

\n

Content

\n

Content

\n

Content

\n
\n
\n

{results.overflowOverlay?.dataset?.testid || 'null'}

\n \n\n \n
\n

overflow-x: auto + inline width

\n \n
Wide
\n
\n

{results.inlineWidthStyle?.dataset?.testid || 'null'}

\n \n\n \n
\n

overflow: scroll (both)

\n \n
\n

Wide and tall

\n

Content

\n

Content

\n
\n
\n

{results.bothScrollDirections?.dataset?.testid || 'null'}

\n \n\n \n
\n

overflow-y: auto + overflow-x: visible

\n \n
\n

Content

\n

Content

\n

Content

\n
\n
\n

\n {results.overflowYAutoOverflowXVisible?.dataset?.testid || 'null'}\n

\n \n\n \n
\n

overflow-y: auto + overflow-x: clip

\n \n
\n

Content

\n

Content

\n

Content

\n
\n
\n

\n {results.overflowYAutoOverflowXClip?.dataset?.testid || 'null'}\n

\n \n\n \n
\n

overflow-x: auto + overflow-y: visible

\n \n \n Wide content\n
\n \n

\n {results.overflowXAutoOverflowYVisible?.dataset?.testid || 'null'}\n

\n \n\n \n
\n

overflow-x: auto + overflow-y: clip

\n \n
\n Wide content\n
\n
\n

\n {results.overflowXAutoOverflowYClip?.dataset?.testid || 'null'}\n

\n \n\n \n
\n

overflow-y: auto + overflow-x: hidden (no height)

\n
\n
Content
\n
\n

\n {results.overflowYAutoOverflowXHidden?.tagName || 'null'}\n

\n
\n\n \n
\n

overflow-x: auto + overflow-y: hidden (no width)

\n
\n
Content
\n
\n

\n {results.overflowXAutoOverflowYHidden?.tagName || 'null'}\n

\n
\n \n\n" }, { "path": "packages/svelte/test-app/Pages/Svelte/PropsAndPageStore.svelte", "content": "\n\n
\n \n

foo prop is {foo}

\n

$page.props.foo is {$page.props.foo}

\n

pageProps.foo is {pageProps.foo}

\n

$sveltePage.props.foo is {$sveltePage.props.foo}

\n\n Bar \n Baz \n Home \n
\n" }, { "path": "packages/svelte/test-app/Pages/TypeScriptCreateInertiaApp.ts", "content": "// This file is used for checking the TypeScript implementation; there is no Playwright test depending on it.\nimport { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'\n\ndeclare module '@inertiajs/core' {\n export interface InertiaConfig {\n sharedPageProps: {\n auth: { user: { name: string } | null }\n }\n }\n}\n\n// createInertiaApp setup should include shared props without explicit generic\ncreateInertiaApp({\n resolve: (name) => {\n const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })\n return pages[`./Pages/${name}.svelte`]\n },\n setup({ el, App, props }) {\n console.log(props.initialPage.props.auth.user?.name)\n // @ts-expect-error - 'email' does not exist on user\n console.log(props.initialPage.props.auth.user?.email)\n\n new App({ target: el!, props })\n },\n})\n" }, { "path": "packages/svelte/test-app/Pages/TypeScriptFlash.svelte", "content": "\n\n\n\n{#if $page.flash.toast}\n {$page.flash.toast.message}\n{/if}\n" }, { "path": "packages/svelte/test-app/Pages/TypeScriptProps.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/ViewTransition/FormErrors.svelte", "content": "\n\n
\n

View Transition Form Errors Test

\n\n \n\n {#if $form.errors.name}\n

{$form.errors.name}

\n {/if}\n\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/ViewTransition/PageA.svelte", "content": "\n\n

Page A - View Transition Test

\n\n\n\n\n {\n viewTransition.ready.then(() => console.log('ready'))\n viewTransition.updateCallbackDone.then(() => console.log('updateCallbackDone'))\n viewTransition.finished.then(() => console.log('finished'))\n }}>Link to Page B\n" }, { "path": "packages/svelte/test-app/Pages/ViewTransition/PageB.svelte", "content": "

Page B - View Transition Test

\n" }, { "path": "packages/svelte/test-app/Pages/Visits/AfterError.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/Visits/AutomaticCancellation.svelte", "content": "\n\n
\n This is the page that demonstrates that only one visit can be active at a time\n Link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/Data/AutoConverted.svelte", "content": "\n\n
\n \n This is the page that demonstrates automatic conversion of plain objects to form-data using manual visits\n \n\n Visit Link\n POST Link\n PUT Link\n PATCH Link\n DELETE Link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/Data/FormData.svelte", "content": "\n\n
\n This is the page that demonstrates manual visit data passing through FormData objects\n\n Visit Link\n POST Link\n PUT Link\n PATCH Link\n DELETE Link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/Data/Object.svelte", "content": "\n\n
\n This is the page that demonstrates manual visit data passing through plain objects\n\n Visit Link\n GET Link\n POST Link\n PUT Link\n PATCH Link\n DELETE Link\n\n QSAF Defaults\n QSAF Indices\n QSAF Brackets\n Delete Query Param\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/ErrorBags.svelte", "content": "\n\n
\n This is the page that demonstrates error bags using manual visits\n Default visit\n Basic visit\n POST visit\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/Headers.svelte", "content": "\n\n
\n This is the page that demonstrates passing custom headers through manual visits\n\n Standard visit Link\n\n Specific visit Link\n GET Link\n POST Link\n PUT Link\n PATCH Link\n DELETE Link\n\n Overriden Link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/Location.svelte", "content": "\n\n
\n This is the page that demonstrates location visits\n\n Location visit\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/Method.svelte", "content": "\n\n
\n This is the page that demonstrates manual visit methods\n\n Standard visit Link\n Specific visit Link\n GET Link\n POST Link\n PUT Link\n PATCH Link\n DELETE Link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/PartialReloads.svelte", "content": "\n\n
\n This is the page that demonstrates partial reloads using manual visits\n Foo is now {foo}\n Bar is now {bar}\n Baz is now {baz}\n 
{headers}
\n\n Update All (visit)\n 'Only' foo + bar (visit)\n 'Only' baz (visit)\n 'Except' foo + bar (visit)\n 'Except' baz (visit)\n\n Update All (GET)\n 'Only' foo + bar (GET)\n 'Only' baz (GET)\n 'Except' foo + bar (GET)\n 'Except' baz (GET)\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/PreserveScroll.svelte", "content": "\n\n\n\n
\n \n This is the page that demonstrates scroll preservation with scroll regions when using manual visits\n \n Foo is now {foo}\n\n Preserve Scroll\n Reset Scroll\n Preserve Scroll (Callback)\n
\n Reset Scroll (Callback)\n Preserve Scroll (GET)\n Reset Scroll (GET)\n\n Off-site link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/PreserveScrollFalse.svelte", "content": "\n\n\n\n
\n \n This is the page that demonstrates scroll preservation without scroll regions when using manual visits\n \n Foo is now {foo}\n\n Preserve Scroll\n Reset Scroll\n Preserve Scroll (Callback)\n
\n Reset Scroll (Callback)\n Preserve Scroll (GET)\n Reset Scroll (GET)\n\n Off-site link\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/PreserveState.svelte", "content": "\n\n
\n This is the page that demonstrates preserve state on manual visits\n Foo is now {foo}\n \n\n [State] Preserve visit: true\n [State] Preserve visit: false\n [State] Preserve Callback: true\n [State] Preserve Callback: false\n [State] Preserve GET: true\n [State] Preserve GET: false\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/ReloadOnMount.svelte", "content": "\n\n
Name is {name}
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/Replace.svelte", "content": "\n\n
\n This is the links page that demonstrates manual replace\n\n [State] Replace visit: true\n [State] Replace visit: false\n [State] Replace GET: true\n [State] Replace GET: false\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/UrlFragments.svelte", "content": "\n\n\n\n
\n This is the page that demonstrates url fragment behaviour using manual visits\n
\n \n \n
Document scroll position is {documentScrollLeft} & {documentScrollTop}
\n Basic visit\n Fragment visit\n Non-existent fragment visit\n\n Basic GET visit\n Fragment GET visit\n Non-existent fragment GET visit\n\n
This is the element with id 'target'
\n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/Visits/Wayfinder.svelte", "content": "\n\n\n" }, { "path": "packages/svelte/test-app/Pages/WhenVisible.svelte", "content": "\n\n
\n \n \n
Loading first one...
\n \n\n
First one is visible!
\n \n
\n\n
\n \n \n
Loading second one...
\n \n\n
Second one is visible!
\n \n
\n\n
\n \n \n
Loading third one...
\n \n\n
Third one is visible!
\n \n
\n\n
\n \n \n
Loading fourth one...
\n \n \n
\n\n
\n \n \n
Loading fifth one...
\n \n\n
Count is now {count}
\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/WhenVisibleArrayReload.svelte", "content": "\n\n
\n

WhenVisible + Array Props + Reload

\n\n \n\n
\n \n \n

Loading array data...

\n \n\n
\n

{firstData?.text}

\n

{secondData?.text}

\n
\n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/WhenVisibleBackButton.svelte", "content": "\n\n
\n

WhenVisible + Back Button

\n\n Navigate Away\n\n
\n \n \n

Loading lazy data...

\n \n\n

{lazyData?.text}

\n \n
\n\n
\n \n \n

Loading always data...

\n \n\n

Always: {lazyData?.text}

\n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/WhenVisibleFetching.svelte", "content": "\n\n
\n \n
Lazy data loaded!
\n {#if fetching}\n
Fetching in background...
\n {/if}\n\n \n
Loading lazy data...
\n \n \n
\n" }, { "path": "packages/svelte/test-app/Pages/WhenVisibleMergeParams.svelte", "content": "\n\n
\n \n \n
Loading data only...
\n \n
Data only loaded: {dataOnlyProp?.text}
\n \n
\n\n
\n \n \n
Loading merged...
\n \n
Merged loaded: {mergedProp?.text}
\n \n
\n\n
\n \n \n
Loading merged with callback...
\n \n
Merged with callback loaded: {mergedWithCallbackProp?.text}
\n \n
\n" }, { "path": "packages/svelte/test-app/Pages/WhenVisibleParamsUpdate.svelte", "content": "\n\n
\n \n

Current param: {paramValue}

\n\n
\n \n
\n

Data loaded: {lazyData?.text}

\n
\n

Loading lazy data...

\n \n
\n
\n" }, { "path": "packages/svelte/test-app/Pages/WhenVisibleReload.svelte", "content": "\n\n
\n

WhenVisible + Reload

\n\n \n\n
\n \n \n

Loading lazy data...

\n \n\n {lazyData?.text}\n \n
\n
\n" }, { "path": "packages/svelte/test-app/app.ts", "content": "import type { VisitOptions } from '@inertiajs/core'\nimport { createInertiaApp, type ResolvedComponent, router } from '@inertiajs/svelte'\n\nwindow.testing = { Inertia: router }\n\nconst withAppDefaults = new URLSearchParams(window.location.search).get('withAppDefaults')\n\ncreateInertiaApp({\n page: window.initialPage,\n resolve: async (name) => {\n const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })\n\n if (name === 'DeferredProps/InstantReload') {\n // Add small delay to ensure the component is loaded after the initial page load\n // This is for projects that don't use { eager: true } in import.meta.glob\n await new Promise((resolve) => setTimeout(resolve, 50))\n }\n\n return pages[`./Pages/${name}.svelte`]\n },\n setup({ el, App, props }) {\n const hydrate = el?.hasAttribute('data-server-rendered')\n new App({ target: el!, props, hydrate })\n },\n ...(withAppDefaults && {\n defaults: {\n visitOptions: (href: string, options: VisitOptions) => {\n return { headers: { ...options.headers, 'X-From-App-Defaults': 'test' } }\n },\n },\n }),\n})\n" }, { "path": "packages/svelte/test-app/eslint.config.js", "content": "import js from '@eslint/js'\nimport svelte from 'eslint-plugin-svelte'\nimport globals from 'globals'\nimport ts from 'typescript-eslint'\nimport svelteConfig from './svelte.config.js'\n\nexport default ts.config(\n {\n files: ['**/*.js', '**/*.ts', '**/*.svelte'],\n },\n {\n ignores: ['node_modules', 'dist/**/*', '*.config.js', '**/*.d.ts', '*.timestamp-*'],\n },\n js.configs.recommended,\n ...ts.configs.recommended,\n ...svelte.configs.recommended,\n {\n languageOptions: {\n ecmaVersion: 2020,\n sourceType: 'module',\n globals: {\n ...globals.browser,\n ...globals.es2020,\n },\n },\n },\n {\n files: ['**/*.ts', '**/*.svelte'],\n // See more details at: https://typescript-eslint.io/packages/parser/\n languageOptions: {\n parserOptions: {\n projectService: true,\n extraFileExtensions: ['.svelte'], // Add support for additional file extensions, such as .svelte\n parser: ts.parser,\n // Specify a parser for each language, if needed:\n // parser: {\n // ts: ts.parser,\n // js: espree, // Use espree for .js files (add: import espree from 'espree')\n // typescript: ts.parser\n // },\n\n // We recommend importing and specifying svelte.config.js.\n // By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly.\n // While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it,\n // explicitly specifying it ensures better compatibility and functionality.\n //\n // If non-serializable properties are included, running ESLint with the --cache flag will fail.\n // In that case, please remove the non-serializable properties. (e.g. `svelteConfig: { ...svelteConfig, kit: { ...svelteConfig.kit, typescript: undefined }}`)\n svelteConfig,\n },\n },\n },\n {\n rules: {\n 'svelte/no-navigation-without-resolve': 'off',\n 'svelte/no-useless-mustaches': 'off',\n },\n },\n {\n files: ['**/*.ts', '**/*.svelte'],\n rules: {\n '@typescript-eslint/unbound-method': 'error',\n },\n },\n)\n" }, { "path": "packages/svelte/test-app/index.html", "content": "\n\n \n \n Inertia Svelte - Testing Environment\n \n \n \n \n
\n \n\n" }, { "path": "packages/svelte/test-app/package.json", "content": "{\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"vite build .\",\n \"build:ssr\": \"vite build --ssr ssr.ts --outDir dist\",\n \"dev\": \"nodemon --watch . --watch ../../core/dist --watch ../../svelte/dist --ext js,ts,svelte,html,json --ignore dist/ --exec 'vite build .'\",\n \"lint\": \"eslint .\",\n \"type-check\": \"svelte-check --tsconfig ./tsconfig.json\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^9.39.3\",\n \"@sveltejs/vite-plugin-svelte\": \"^3.1.2\",\n \"@tsconfig/svelte\": \"^5.0.8\",\n \"eslint\": \"^9.39.3\",\n \"eslint-plugin-svelte\": \"^3.15.0\",\n \"globals\": \"^17.3.0\",\n \"nodemon\": \"^3.1.14\",\n \"svelte\": \"^4.2.20\",\n \"svelte-check\": \"^4.4.4\",\n \"typescript\": \"^5.9.3\",\n \"typescript-eslint\": \"^8.56.1\",\n \"vite\": \"^5.4.21\"\n },\n \"dependencies\": {\n \"@inertiajs/core\": \"workspace:*\",\n \"@inertiajs/svelte\": \"workspace:*\"\n }\n}\n" }, { "path": "packages/svelte/test-app/ssr.ts", "content": "import { createInertiaApp, type ResolvedComponent } from '@inertiajs/svelte'\nimport createServer from '@inertiajs/svelte/server'\n\ncreateServer((page) =>\n createInertiaApp({\n page,\n resolve: (name) => {\n const pages = import.meta.glob('./Pages/SSR/**/*.svelte', { eager: true })\n return pages[`./Pages/${name}.svelte`]\n },\n setup({ App, props }) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (App as any).render(props)\n },\n defaults: {\n future: {\n useScriptElementForInitialPage: page.component === 'SSR/PageWithScriptElement',\n },\n },\n }),\n)\n" }, { "path": "packages/svelte/test-app/svelte-html.d.ts", "content": "declare module 'svelte/elements' {\n export interface HTMLAttributes {\n 'scroll-region'?: boolean | '' | undefined\n }\n}\n\nexport {}\n" }, { "path": "packages/svelte/test-app/svelte.config.js", "content": "import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'\n\nconst config = {\n // Consult https://kit.svelte.dev/docs/integrations#preprocessors\n // for more information about preprocessors\n preprocess: vitePreprocess(),\n}\n\nexport default config\n" }, { "path": "packages/svelte/test-app/tsconfig.json", "content": "{\n \"extends\": \"@tsconfig/svelte/tsconfig.json\",\n \"compilerOptions\": {\n \"allowJs\": true,\n \"checkJs\": true,\n \"esModuleInterop\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true,\n \"skipLibCheck\": true,\n \"sourceMap\": true,\n \"strict\": true,\n \"module\": \"ESNext\",\n \"lib\": [\"ESNext\", \"DOM\", \"DOM.Iterable\"],\n \"moduleResolution\": \"bundler\",\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./*\"]\n }\n },\n \"include\": [\"**/*.ts\", \"**/*.d.ts\", \"**/*.svelte\"]\n}\n" }, { "path": "packages/svelte/test-app/types.d.ts", "content": "import type { Method, Page, PageProps, Router } from '@inertiajs/core'\n\ndeclare global {\n interface Window {\n testing: {\n Inertia: Router\n }\n initialPage: Page\n _inertia_request_dump: {\n headers: Record\n method: Method\n form: Record | undefined\n files: MulterFile[] | object\n query: Record\n url: string\n $page: Page\n }\n _inertia_page_key: string | undefined\n _inertia_props: PageProps\n _inertia_layout_id: number | string | undefined\n _inertia_site_layout_props: PageProps\n _inertia_nested_layout_id: number | string | undefined\n _inertia_nested_layout_props: PageProps\n _inertia_page_props: PageProps\n _plugin_global_props: object\n }\n\n interface ImportMeta {\n readonly glob: (pattern: string, options: { eager: true }) => Record\n }\n}\n\nexport type MulterFile = Express.Multer.File\n" }, { "path": "packages/svelte/test-app/vite-env.d.ts", "content": "/// \n/// \n" }, { "path": "packages/svelte/test-app/vite.config.js", "content": "import { svelte } from '@sveltejs/vite-plugin-svelte'\nimport { defineConfig } from 'vite'\n\nconst isSSR = process.argv.includes('--ssr')\n\nexport default defineConfig({\n build: {\n sourcemap: 'inline',\n emptyOutDir: !isSSR,\n },\n resolve: {\n alias: {\n '@': __dirname,\n },\n },\n plugins: [\n svelte({\n compilerOptions: {\n hydratable: true,\n },\n }),\n ],\n})\n" }, { "path": "packages/svelte/tsconfig.json", "content": "{\n \"extends\": \"./.svelte-kit/tsconfig.json\",\n \"compilerOptions\": {\n \"allowJs\": true,\n \"checkJs\": true,\n \"esModuleInterop\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true,\n \"skipLibCheck\": true,\n \"sourceMap\": true,\n \"strict\": true,\n \"declaration\": true,\n \"declarationDir\": \"dist\",\n\n \"module\": \"ES2020\",\n \"moduleResolution\": \"Node\",\n \"allowSyntheticDefaultImports\": true,\n\n \"noImplicitThis\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"preserveConstEnums\": true,\n \"removeComments\": true\n }\n}\n" }, { "path": "packages/svelte/vite-with-deps.config.js", "content": "import { svelte } from '@sveltejs/vite-plugin-svelte'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n plugins: [svelte()],\n build: {\n minify: false,\n lib: {\n entry: './src/index.ts',\n formats: ['es'],\n fileName: 'index',\n },\n rollupOptions: {\n // Only externalize Svelte (peer dependency) - bundle everything else\n external: ['svelte', 'svelte/internal', 'svelte/store'],\n },\n },\n})\n" }, { "path": "packages/svelte/vite.config.js", "content": "import { sveltekit } from '@sveltejs/kit/vite'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n build: {\n minify: false,\n },\n plugins: [sveltekit()],\n})\n" }, { "path": "packages/vue3/.gitignore", "content": "dist\ntypes\nnode_modules\npackage-lock.json\nyarn.lock\n/test-results/\n/blob-report/\n/playwright/.cache/\n" }, { "path": "packages/vue3/LICENSE", "content": "MIT License\n\nCopyright (c) Jonathan Reinink \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "packages/vue3/build.js", "content": "#!/usr/bin/env node\nimport esbuild from 'esbuild'\nimport { nodeExternalsPlugin } from 'esbuild-node-externals'\nimport { readFileSync } from 'fs'\n\nconst watch = process.argv.slice(1).includes('--watch')\nconst withDeps = process.argv.slice(1).includes('--with-deps')\n\n// For regular builds, externalize all dependencies to keep the bundle size small (using nodeExternalsPlugin).\n// For builds with dependencies, only externalize peer dependencies and bundle everything\n// else so we can check ES2020 compatibility without checking framework code.\nlet externalDependencies = undefined\n\nif (withDeps) {\n const pkg = JSON.parse(readFileSync('./package.json', 'utf8'))\n externalDependencies = Object.keys(pkg.peerDependencies || {})\n}\n\nconst config = {\n bundle: true,\n minify: false,\n sourcemap: withDeps ? false : true,\n target: 'es2020',\n external: externalDependencies,\n plugins: [\n ...(withDeps ? [] : [nodeExternalsPlugin()]),\n {\n name: 'inertia',\n setup(build) {\n let count = 0\n build.onEnd((result) => {\n if (count++ !== 0) {\n console.log(`Rebuilding ${build.initialOptions.entryPoints} (${build.initialOptions.format})…`)\n }\n })\n },\n },\n ],\n}\n\nconst builds = [\n { entryPoints: ['src/index.ts'], format: 'esm', outfile: 'dist/index.esm.js', platform: 'browser' },\n { entryPoints: ['src/index.ts'], format: 'cjs', outfile: 'dist/index.js', platform: 'browser' },\n { entryPoints: ['src/server.ts'], format: 'esm', outfile: 'dist/server.esm.js', platform: 'node' },\n { entryPoints: ['src/server.ts'], format: 'cjs', outfile: 'dist/server.js', platform: 'node' },\n]\n\nbuilds.forEach(async (build) => {\n const context = await esbuild.context({ ...config, ...build })\n\n if (watch) {\n console.log(`Watching ${build.entryPoints} (${build.format})…`)\n await context.watch()\n } else {\n await context.rebuild()\n context.dispose()\n console.log(`Built ${build.entryPoints} (${build.format}) ${withDeps ? '(with-deps)' : ''}…`)\n }\n})\n" }, { "path": "packages/vue3/package.json", "content": "{\n \"name\": \"@inertiajs/vue3\",\n \"version\": \"2.3.18\",\n \"license\": \"MIT\",\n \"description\": \"The Vue 3 adapter for Inertia.js\",\n \"contributors\": [\n \"Jonathan Reinink \"\n ],\n \"homepage\": \"https://inertiajs.com/\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/inertiajs/inertia.git\",\n \"directory\": \"packages/vue3\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/inertiajs/inertia/issues\"\n },\n \"files\": [\n \"dist\",\n \"types\",\n \"resources\"\n ],\n \"type\": \"module\",\n \"main\": \"dist/index.js\",\n \"types\": \"types/index.d.ts\",\n \"exports\": {\n \".\": {\n \"types\": \"./types/index.d.ts\",\n \"import\": \"./dist/index.esm.js\",\n \"require\": \"./dist/index.js\"\n },\n \"./server\": {\n \"types\": \"./types/server.d.ts\",\n \"import\": \"./dist/server.esm.js\",\n \"require\": \"./dist/server.js\"\n }\n },\n \"typesVersions\": {\n \"*\": {\n \"server\": [\n \"types/server.d.ts\"\n ]\n }\n },\n \"scripts\": {\n \"build\": \"pnpm clean && ./build.js && tsc\",\n \"build:with-deps\": \"./build.js --with-deps\",\n \"clean\": \"rm -rf types && rm -rf dist\",\n \"dev\": \"pnpx concurrently -c \\\"#ffcf00,#3178c6\\\" \\\"pnpm dev:build\\\" \\\"pnpm dev:types\\\" --names build,types\",\n \"dev:build\": \"./build.js --watch\",\n \"dev:types\": \"tsc --watch --preserveWatchOutput\",\n \"es2020-check\": \"pnpm build:with-deps && es-check es2020 \\\"dist/index.esm.js\\\" --checkFeatures --module --noCache --verbose\"\n },\n \"devDependencies\": {\n \"axios\": \"^1.13.5\",\n \"es-check\": \"^9.6.1\",\n \"esbuild\": \"^0.27.3\",\n \"esbuild-node-externals\": \"^1.20.1\",\n \"typescript\": \"^5.9.3\",\n \"vue\": \"^3.5.29\"\n },\n \"peerDependencies\": {\n \"vue\": \"^3.0.0\"\n },\n \"dependencies\": {\n \"@inertiajs/core\": \"workspace:*\",\n \"@types/lodash-es\": \"^4.17.12\",\n \"laravel-precognition\": \"^1.0.2\",\n \"lodash-es\": \"^4.17.23\"\n }\n}\n" }, { "path": "packages/vue3/readme.md", "content": "# Inertia.js Vue 3 Adapter\n\nVisit [inertiajs.com](https://inertiajs.com/) to learn more.\n" }, { "path": "packages/vue3/resources/boost/guidelines/core.blade.php", "content": "# Inertia + Vue\n\nVue components must have a single root element.\n- IMPORTANT: Activate `inertia-vue-development` when working with Inertia Vue client-side patterns.\n" }, { "path": "packages/vue3/resources/boost/skills/inertia-vue-development/SKILL.blade.php", "content": "---\nname: inertia-vue-development\ndescription: \"Develops Inertia.js v2 Vue client-side applications. Activates when creating Vue pages, forms, or navigation; using ,
, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions Vue with Inertia, Vue pages, Vue forms, or Vue navigation.\"\nlicense: MIT\nmetadata:\n author: laravel\n---\n@php\n/** @var \\Laravel\\Boost\\Install\\GuidelineAssist $assist */\n@endphp\n# Inertia Vue Development\n\n## When to Apply\n\nActivate this skill when:\n\n- Creating or modifying Vue page components for Inertia\n- Working with forms in Vue (using `` or `useForm`)\n- Implementing client-side navigation with `` or `router`\n- Using v2 features: deferred props, prefetching, WhenVisible, InfiniteScroll, once props, flash data, or polling\n- Building Vue-specific features with the Inertia protocol\n\n## Documentation\n\nUse `search-docs` for detailed Inertia v2 Vue patterns and documentation.\n\n## Basic Usage\n\n### Page Components Location\n\nVue page components should be placed in the `{{ $assist->inertia()->pagesDirectory() }}` directory.\n\n### Page Component Structure\n\n@verbatim\n@boostsnippet(\"Basic Vue Page Component\", \"vue\")\n\n\n\n@endboostsnippet\n@endverbatim\n\n## Client-Side Navigation\n\n### Basic Link Component\n\nUse `` for client-side navigation instead of traditional `` tags:\n\n@boostsnippet(\"Inertia Vue Navigation\", \"vue\")\n\n\n\n@endboostsnippet\n\n### Link with Method\n\n@boostsnippet(\"Link with POST Method\", \"vue\")\n\n\n\n@endboostsnippet\n\n### Prefetching\n\nPrefetch pages to improve perceived performance:\n\n@boostsnippet(\"Prefetch on Hover\", \"vue\")\n\n\n\n@endboostsnippet\n\n### Programmatic Navigation\n\n@boostsnippet(\"Router Visit\", \"vue\")\n\n\n\n@endboostsnippet\n\n## Form Handling\n\n@if($assist->inertia()->hasFormComponent())\n### Form Component (Recommended)\n\nThe recommended way to build forms is with the `` component:\n\n@verbatim\n@boostsnippet(\"Form Component Example\", \"vue\")\n\n\n\n@endboostsnippet\n@endverbatim\n\n### Form Component With All Props\n\n@verbatim\n@boostsnippet(\"Form Component Full Example\", \"vue\")\n\n\n\n@endboostsnippet\n@endverbatim\n\n@if($assist->inertia()->hasFormComponentResets())\n### Form Component Reset Props\n\nThe `` component supports automatic resetting:\n\n- `resetOnError` - Reset form data when the request fails\n- `resetOnSuccess` - Reset form data when the request succeeds\n- `setDefaultsOnSuccess` - Update default values on success\n\nUse the `search-docs` tool with a query of `form component resetting` for detailed guidance.\n\n@verbatim\n@boostsnippet(\"Form with Reset Props\", \"vue\")\n\n\n\n@endboostsnippet\n@endverbatim\n@else\nNote: This version of Inertia does not support `resetOnError`, `resetOnSuccess`, or `setDefaultsOnSuccess` on the `` component. Using these props will cause errors. Upgrade to Inertia v2.2.0+ to use these features.\n@endif\n\nForms can also be built using the `useForm` composable for more programmatic control. Use the `search-docs` tool with a query of `useForm helper` for guidance.\n\n@endif\n\n### `useForm` Composable\n\n@if($assist->inertia()->hasFormComponent() === false)\nFor Inertia v2.0.x: Build forms using the `useForm` composable as the `` component is not available until v2.1.0+.\n@else\nFor more programmatic control or to follow existing conventions, use the `useForm` composable:\n@endif\n\n@verbatim\n@boostsnippet(\"useForm Composable Example\", \"vue\")\n\n\n\n@endboostsnippet\n@endverbatim\n\n## Inertia v2 Features\n\n### Deferred Props\n\nUse deferred props to load data after initial page render:\n\n@verbatim\n@boostsnippet(\"Deferred Props with Empty State\", \"vue\")\n\n\n\n@endboostsnippet\n@endverbatim\n\n### Polling\n\nAutomatically refresh data at intervals:\n\n@verbatim\n@boostsnippet(\"Polling Example\", \"vue\")\n\n\n\n@endboostsnippet\n@endverbatim\n\n### WhenVisible\n\nLazy-load a prop when an element scrolls into view. Useful for deferring expensive data that sits below the fold:\n\n@verbatim\n@boostsnippet(\"WhenVisible Example\", \"vue\")\n\n\n\n@endboostsnippet\n@endverbatim\n\n## Server-Side Patterns\n\nServer-side patterns (Inertia::render, props, middleware) are covered in inertia-laravel guidelines.\n\n## Common Pitfalls\n\n- Using traditional `` links instead of Inertia's `` component (breaks SPA behavior)\n- Forgetting that Vue components must have a single root element\n- Forgetting to add loading states (skeleton screens) when using deferred props\n- Not handling the `undefined` state of deferred props before data loads\n- Using `` without preventing default submission (use `` component or `@submit.prevent`)\n- Forgetting to check if `` component is available in your Inertia version\n" }, { "path": "packages/vue3/src/app.ts", "content": "import {\n createHeadManager,\n HeadManager,\n HeadManagerOnUpdateCallback,\n HeadManagerTitleCallback,\n Page,\n PageProps,\n router,\n SharedPageProps,\n} from '@inertiajs/core'\nimport {\n computed,\n DefineComponent,\n defineComponent,\n h,\n markRaw,\n Plugin,\n PropType,\n reactive,\n ref,\n shallowRef,\n} from 'vue'\nimport remember from './remember'\nimport { VuePageHandlerArgs } from './types'\nimport useForm from './useForm'\n\nexport interface InertiaAppProps {\n initialPage: Page\n initialComponent?: DefineComponent\n resolveComponent?: (name: string) => DefineComponent | Promise\n titleCallback?: HeadManagerTitleCallback\n onHeadUpdate?: HeadManagerOnUpdateCallback\n}\n\nexport type InertiaApp = DefineComponent\n\nconst component = ref(undefined)\nconst page = ref()\nconst layout = shallowRef(null)\nconst key = ref(undefined)\nlet headManager: HeadManager\n\nconst App: InertiaApp = defineComponent({\n name: 'Inertia',\n props: {\n initialPage: {\n type: Object as PropType,\n required: true,\n },\n initialComponent: {\n type: Object as PropType,\n required: false,\n },\n resolveComponent: {\n type: Function as PropType<(name: string) => DefineComponent | Promise>,\n required: false,\n },\n titleCallback: {\n type: Function as PropType,\n required: false,\n default: (title: string) => title,\n },\n onHeadUpdate: {\n type: Function as PropType,\n required: false,\n default: () => () => {},\n },\n },\n setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }: InertiaAppProps) {\n component.value = initialComponent ? markRaw(initialComponent) : undefined\n page.value = { ...initialPage, flash: initialPage.flash ?? {} }\n key.value = undefined\n\n const isServer = typeof window === 'undefined'\n headManager = createHeadManager(isServer, titleCallback || ((title: string) => title), onHeadUpdate || (() => {}))\n\n if (!isServer) {\n router.init({\n initialPage,\n resolveComponent: resolveComponent!,\n swapComponent: async (options: VuePageHandlerArgs) => {\n component.value = markRaw(options.component)\n page.value = options.page\n key.value = options.preserveState ? key.value : Date.now()\n },\n onFlash: (flash) => {\n page.value = { ...page.value!, flash }\n },\n })\n\n router.on('navigate', () => headManager.forceUpdate())\n }\n\n return () => {\n if (component.value) {\n component.value.inheritAttrs = !!component.value.inheritAttrs\n\n const child = h(component.value, {\n ...page.value!.props,\n key: key.value,\n })\n\n if (layout.value) {\n component.value.layout = layout.value\n layout.value = null\n }\n\n if (component.value.layout) {\n if (typeof component.value.layout === 'function') {\n return component.value.layout(h, child)\n }\n\n return (Array.isArray(component.value.layout) ? component.value.layout : [component.value.layout])\n .concat(child)\n .reverse()\n .reduce((child, layout) => {\n layout.inheritAttrs = !!layout.inheritAttrs\n return h(layout, { ...page.value!.props }, () => child)\n })\n }\n\n return child\n }\n }\n },\n})\nexport default App\n\nexport const plugin: Plugin = {\n install(app) {\n router.form = useForm\n\n Object.defineProperty(app.config.globalProperties, '$inertia', { get: () => router })\n Object.defineProperty(app.config.globalProperties, '$page', { get: () => page.value })\n Object.defineProperty(app.config.globalProperties, '$headManager', { get: () => headManager })\n\n app.mixin(remember)\n },\n}\n\nexport function usePage(): Page {\n return reactive({\n props: computed(() => page.value?.props),\n url: computed(() => page.value?.url),\n component: computed(() => page.value?.component),\n version: computed(() => page.value?.version),\n clearHistory: computed(() => page.value?.clearHistory),\n deferredProps: computed(() => page.value?.deferredProps),\n mergeProps: computed(() => page.value?.mergeProps),\n prependProps: computed(() => page.value?.prependProps),\n deepMergeProps: computed(() => page.value?.deepMergeProps),\n matchPropsOn: computed(() => page.value?.matchPropsOn),\n rememberedState: computed(() => page.value?.rememberedState),\n encryptHistory: computed(() => page.value?.encryptHistory),\n flash: computed(() => page.value?.flash),\n }) as Page\n}\n" }, { "path": "packages/vue3/src/createInertiaApp.ts", "content": "import {\n CreateInertiaAppOptionsForCSR,\n CreateInertiaAppOptionsForSSR,\n getInitialPageFromDOM,\n InertiaAppResponse,\n InertiaAppSSRResponse,\n Page,\n PageProps,\n router,\n setupProgress,\n SharedPageProps,\n} from '@inertiajs/core'\nimport { createSSRApp, DefineComponent, h, Plugin, App as VueApp } from 'vue'\nimport App, { InertiaApp, InertiaAppProps, plugin } from './app'\nimport { config } from './index'\nimport { VueInertiaAppConfig } from './types'\n\ntype ComponentResolver = (name: string) => DefineComponent | Promise | { default: DefineComponent }\n\ntype SetupOptions = {\n el: ElementType\n App: InertiaApp\n props: InertiaAppProps\n plugin: Plugin\n}\n\ntype InertiaAppOptionsForCSR = CreateInertiaAppOptionsForCSR<\n SharedProps,\n ComponentResolver,\n SetupOptions,\n void,\n VueInertiaAppConfig\n>\n\ntype InertiaAppOptionsForSSR = CreateInertiaAppOptionsForSSR<\n SharedProps,\n ComponentResolver,\n SetupOptions,\n VueApp,\n VueInertiaAppConfig\n> & {\n render: (app: VueApp) => Promise\n}\n\nexport default async function createInertiaApp(\n options: InertiaAppOptionsForCSR,\n): Promise\nexport default async function createInertiaApp(\n options: InertiaAppOptionsForSSR,\n): Promise\nexport default async function createInertiaApp({\n id = 'app',\n resolve,\n setup,\n title,\n progress = {},\n page,\n render,\n defaults = {},\n}: InertiaAppOptionsForCSR | InertiaAppOptionsForSSR): InertiaAppResponse {\n config.replace(defaults)\n\n const isServer = typeof window === 'undefined'\n const useScriptElementForInitialPage = config.get('future.useScriptElementForInitialPage')\n const initialPage = page || getInitialPageFromDOM>(id, useScriptElementForInitialPage)!\n\n const resolveComponent = (name: string) => Promise.resolve(resolve(name)).then((module) => module.default || module)\n\n let head: string[] = []\n\n const vueApp = await Promise.all([\n resolveComponent(initialPage.component),\n router.decryptHistory().catch(() => {}),\n ]).then(([initialComponent]) => {\n const props = {\n initialPage,\n initialComponent,\n resolveComponent,\n titleCallback: title,\n }\n\n if (isServer) {\n const ssrSetup = setup as (options: SetupOptions) => VueApp\n\n return ssrSetup({\n el: null,\n App,\n props: { ...props, onHeadUpdate: (elements: string[]) => (head = elements) },\n plugin,\n })\n }\n\n const csrSetup = setup as (options: SetupOptions) => void\n\n return csrSetup({\n el: document.getElementById(id)!,\n App,\n props,\n plugin,\n })\n })\n\n if (!isServer && progress) {\n setupProgress(progress)\n }\n\n if (isServer && render) {\n const element = () => {\n if (!useScriptElementForInitialPage) {\n return h('div', {\n id,\n 'data-page': JSON.stringify(initialPage),\n innerHTML: vueApp ? render(vueApp) : '',\n })\n }\n\n return [\n h('script', {\n 'data-page': id,\n type: 'application/json',\n innerHTML: JSON.stringify(initialPage).replace(/\\//g, '\\\\/'),\n }),\n h('div', {\n id,\n innerHTML: vueApp ? render(vueApp) : '',\n }),\n ]\n }\n\n const body = await render(\n createSSRApp({\n render: () => element(),\n }),\n )\n\n return { head, body }\n }\n}\n" }, { "path": "packages/vue3/src/deferred.ts", "content": "import { defineComponent } from 'vue'\n\nexport default defineComponent({\n name: 'Deferred',\n props: {\n data: {\n type: [String, Array],\n required: true,\n },\n },\n render() {\n const keys = (Array.isArray(this.$props.data) ? this.$props.data : [this.$props.data]) as string[]\n\n if (!this.$slots.fallback) {\n throw new Error('`` requires a `