Files

root 1b46c5270c Add skills documentation and misc updates

Add form value persistence across cache revalidation re-renders

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-12-29 04:38:06 +00:00

3.5 KiB

Executable File

Raw Blame History

name, description

name	description
blade-views	Creating Blade views and server-rendered pages in RSX. Use when building SEO pages, login/auth pages, server-rendered content, working with @rsx_id, @rsx_page_data, or Blade-specific patterns.

RSX Blade Views

Note: SPA pages are the preferred standard. Use Blade only for:

SEO-critical public pages
Authentication flows (login, password reset)
Marketing/landing pages

Basic View Structure

Every Blade view starts with @rsx_id:

@rsx_id('Frontend_Index')

<body class="{{ rsx_body_class() }}">
    @section('content')
        <h1>Welcome</h1>
    @endsection
</body>

@rsx_id('View_Name') - Required first line, identifies the view
rsx_body_class() - Adds view class for CSS scoping

View Rules

NO inline styles - Use companion .scss files
NO inline scripts - Use companion .js files
NO inline event handlers - Use on_app_ready() pattern
jqhtml components work fully in Blade (but no slots)

JavaScript for Blade Pages

Unlike SPA actions (which use component lifecycle), Blade pages use static on_app_ready():

class My_Page {
    static on_app_ready() {
        // Guard required - fires for ALL pages in bundle
        if (!$('.My_Page').exists()) return;

        // Page initialization code
        $('.My_Page .btn').on('click', () => {
            // Handle click
        });
    }
}

The guard (if (!$('.My_Page').exists()) return;) is essential because on_app_ready() fires for every page in the bundle.

Passing Data to JavaScript

Use @rsx_page_data for data needed by JavaScript:

@rsx_page_data(['user_id' => $user->id, 'mode' => 'edit', 'config' => $config])

@section('content')
    <div class="Editor">...</div>
@endsection

Access in JavaScript:

class Editor {
    static on_app_ready() {
        if (!$('.Editor').exists()) return;

        const user_id = window.rsxapp.page_data.user_id;
        const mode = window.rsxapp.page_data.mode;
        const config = window.rsxapp.page_data.config;
    }
}

Use when data doesn't belong in DOM attributes
Multiple calls merge together
Available after page load in window.rsxapp.page_data

Using jqhtml Components in Blade

jqhtml components work in Blade templates:

<Dashboard>
    <Stats_Panel $user_id="{{ $user->id }}" />
    <Recent_Activity $limit="10" />
</Dashboard>

Note: Blade slots (@slot) don't work with jqhtml components. Use component attributes instead.

Controller Pattern for Blade Routes

Use standard #[Route] controllers with Blade templates:

/**
 * @auth-exempt Login routes are public
 */
class Login_Controller extends Rsx_Controller_Abstract {
    #[Route('/login', methods: ['GET', 'POST'])]
    public static function index(Request $request, array $params = []) {
        if ($request->is_post()) {
            // Handle form submission
        }
        return rsx_view('Login_Index', ['data' => $data]);
    }
}

Key points:

GET/POST in same method
Returns rsx_view('Template_Name', $data)
jqhtml works but not server-rendered for SEO

Converting Blade to SPA

When converting server-rendered Blade pages to SPA actions:

php artisan rsx:man blade_to_spa

The process involves:

Creating Action classes with @route decorators
Converting templates from Blade to jqhtml syntax
Moving data loading from controller to on_load()

More Information

Details: php artisan rsx:man blade

3.5 KiB Executable File Raw Blame History