Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inertia page generator #734

Merged
merged 2 commits into from
Jan 8, 2025

Conversation

nicodevs
Copy link
Contributor

@nicodevs nicodevs commented Jan 7, 2025

Given the introduction of the inertia statement to indicate that the controller should return Inertia::render, it would be great if Blueprint could generate Inertia page components for the appropriate adapter (Vue, React, Svelte), similar to how the render statement triggers the generation of Blade templates.

Changes

This PR implements that feature by introducing an InertiaPageGenerator.

  • It determines the adapter (Vue, React, Svelte) by reading the dependencies listed in package.json.
  • If no adapter is found, it will not generate page components.
  • If an adapter is detected, it iterates through the controller and statements, generating a page component using a stub appropriate for the adapter.
  • It populates the stub with the statement data as props for the page component.

The stubs are fairly minimal and are based on the examples provided in the Inertia documentation.

Example

Given the following draft:

controllers:
  Customer:
    index:
      query: all
      inertia: Customer/Index with:customers
    show:
      inertia: Customer/Show with:customer,foo,bar

And having this dependency in package.json:

{
    "dependencies": {
        "@inertiajs/vue3":"^2.0.0",
        // more dependencies...
    }
}

Blueprint will generate these page components:

  • resources/js/Pages/Customer/Index.vue
<script setup>
import { Head } from '@inertiajs/vue3'

defineProps(["customers"])
</script>

<template>
  <Head title="Customer Index" />
  <h1>Customer Index</h1>
</template>
  • resources/js/Pages/Customer/Show.vue
<script setup>
import { Head } from '@inertiajs/vue3'

defineProps(["customer","foo","bar"])
</script>

<template>
  <Head title="Customer Show" />
  <h1>Customer Show</h1>
</template>

Testing

This PR adds tests to check the output for the three adapters (Vue, React, Svelte).

If this doesn’t align with the goals of Blueprint, I can convert it into a plugin. Thank you for taking the time to review it!

Copy link
Collaborator

@jasonmccreary jasonmccreary left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. But quick question on naming as I don't use Inertia.

@jasonmccreary jasonmccreary merged commit 3463db7 into laravel-shift:master Jan 8, 2025
25 checks passed
@nicodevs
Copy link
Contributor Author

nicodevs commented Jan 8, 2025

Thank you @jasonmccreary!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants