Skip to content

Commit b86dfd4

Browse files
acidlakeacidlake
committed
updated documentation
1 parent 157ba41 commit b86dfd4

2 files changed

Lines changed: 63 additions & 55 deletions

File tree

‎core-concepts.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -597,7 +597,7 @@ <h2 class="text-2xl font-bold text-gray-900 mb-4">Components</h2>
597597
templates. They are lightning-fast to render and easy to organize.
598598
</p>
599599

600-
<h4 class="text-lg font-semibold mb-3 text-gray-900">Component Locations</h4>
600+
<h3 class="text-lg font-semibold mb-3 text-gray-900">Component Locations</h3>
601601
<p class="text-gray-600 mb-4">
602602
Forge resolutions components from several standard locations:
603603
</p>
@@ -611,7 +611,7 @@ <h4 class="text-lg font-semibold mb-3 text-gray-900">Component Locations</h4>
611611
</li>
612612
</ul>
613613

614-
<h4 class="text-lg font-semibold mb-3 text-gray-900">Creating a Component</h4>
614+
<h3 class="text-lg font-semibold mb-3 text-gray-900">Creating a Component</h3>
615615
<p class="text-gray-600 mb-4">
616616
A component is just a PHP file. Variables passed as props are automatically
617617
extracted for use in the template.
@@ -623,7 +623,7 @@ <h4 class="text-lg font-semibold mb-3 text-gray-900">Creating a Component</h4>
623623
&lt;/div&gt;</code></pre>
624624
</div>
625625

626-
<h4 class="text-lg font-semibold mb-3 text-gray-900">Using Components</h4>
626+
<h3 class="text-lg font-semibold mb-3 text-gray-900">Using Components</h3>
627627
<p class="text-gray-600 mb-4">
628628
Use the global <code>component()</code> helper to render your UI pieces anywhere.
629629
</p>
@@ -643,7 +643,7 @@ <h4 class="text-lg font-semibold mb-3 text-gray-900">Using Components</h4>
643643
?&gt;</code></pre>
644644
</div>
645645

646-
<h4 class="text-lg font-semibold mb-3 text-gray-900">Automatic Data Extraction</h4>
646+
<h3 class="text-lg font-semibold mb-3 text-gray-900">Automatic Data Extraction</h3>
647647
<p class="text-gray-600 mb-4">
648648
Forge's view engine is smart. If you pass an array, it extracts its keys. If you
649649
pass an <strong>object</strong>, it automatically extracts all its public properties
@@ -665,7 +665,7 @@ <h4 class="text-lg font-semibold mb-3 text-gray-900">Automatic Data Extraction</
665665
&lt;/div&gt;</code></pre>
666666
</div>
667667

668-
<h4 class="text-lg font-semibold mb-3 text-gray-900">Key Benefits</h4>
668+
<h3 class="text-lg font-semibold mb-3 text-gray-900">Key Benefits</h3>
669669
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
670670
<li><strong>Pure PHP:</strong> No new syntax to learn, full IDE support.</li>
671671
<li><strong>No Overheard:</strong> No base component classes or complex lifecycles

‎forge-wire.html‎

Lines changed: 58 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -272,19 +272,19 @@ <h3 class="text-lg font-semibold mb-3">#[Reactive]</h3>
272272
Applied to the class. Enables ForgeWire to monitor this controller. Controllers without this
273273
attribute are ignored by the reactive engine for security.
274274
</p>
275+
</section>
275276

277+
<section id="state-management" class="section-anchor mb-12">
278+
<h2 class="text-2xl font-bold text-gray-900 mb-4">State Management</h2>
276279
<h3 class="text-lg font-semibold mb-3">#[State]</h3>
277280
<p class="text-gray-600 mb-4">
278281
Applied to public properties. Tells ForgeWire to persist this value between requests in the
279282
session. Supports scalars (int, string, bool) and arrays.
280283
</p>
284+
</section>
281285

282-
<h3 class="text-lg font-semibold mb-3">#[Action]</h3>
283-
<p class="text-gray-600 mb-4">
284-
Applied to methods. Marks the method as "safe" to be called from the browser. ForgeWire will
285-
refuse to call any method not explicitly marked as an action.
286-
</p>
287-
286+
<section id="complex-data" class="section-anchor mb-12">
287+
<h2 class="text-2xl font-bold text-gray-900 mb-4">Complex Data Types</h2>
288288
<h3 class="text-lg font-semibold mb-3">#[Model] & #[DTO]</h3>
289289
<p class="text-gray-600 mb-4">
290290
Use these for complex data types. ForgeWire will handle the serialization/unserialization
@@ -300,7 +300,7 @@ <h3 class="text-lg font-semibold mb-3">#[Model] & #[DTO]</h3>
300300
</section>
301301

302302
<!-- Frontend Directives -->
303-
<section id="frontend" class="section-anchor mb-12">
303+
<section id="directives" class="section-anchor mb-12">
304304
<h2 class="text-2xl font-bold text-gray-900 mb-4">Frontend Directives</h2>
305305
<p class="text-gray-600 mb-6">
306306
ForgeWire uses HTML attributes (directives) to bind your UI to your controller.
@@ -354,31 +354,40 @@ <h2 class="text-2xl font-bold text-gray-900 mb-4">Security: The Sandbox</h2>
354354
path to prevent "component injection" or cross-page state reuse.</li>
355355
</ul>
356356
</section>
357-
The <code class="bg-gray-100 px-2 py-1 rounded">input()</code> action is built-in and handles
358-
wire:model updates:
359-
</p>
360-
<div class="code-block p-6 text-white rounded-lg mb-6">
361-
<pre><code class="language-php">// Automatically called for wire:model
357+
<section id="actions" class="section-anchor mb-12">
358+
<h2 class="text-2xl font-bold text-gray-900 mb-4">Actions & Methods</h2>
359+
<h3 class="text-lg font-semibold mb-3">The #[Action] Attribute</h3>
360+
<p class="text-gray-600 mb-4">
361+
Applied to methods. Marks the method as "safe" to be called from the browser. ForgeWire will
362+
refuse to call any method not explicitly marked as an action.
363+
</p>
364+
<p class="text-gray-600 mb-4">
365+
The <code class="bg-gray-100 px-2 py-1 rounded">input()</code> action is built-in and
366+
handles
367+
<code>fw:model</code> updates:
368+
</p>
369+
<div class="code-block p-6 text-white rounded-lg mb-6">
370+
<pre><code class="language-php">// Automatically called for fw:model
362371
#[Action]
363372
public function input(...$keys): void
364373
{
365-
// Called when wire:model values change
374+
// Called when fw:model values change
366375
// $keys contains which properties changed
367376
}</code></pre>
368-
</div>
377+
</div>
369378

370-
<h3 class="text-lg font-semibold mb-3">Calling Actions from Frontend</h3>
371-
<div class="code-block p-6 text-white rounded-lg mb-6">
372-
<pre><code class="language-html"><!-- wire:click -->
373-
<button wire:click="increment">+</button>
374-
<button wire:click="update(5, 'New Name')">Update</button>
375-
376-
<!-- wire:submit -->
377-
<form wire:submit="save">
378-
<input wire:model="name" type="text">
379-
<button type="submit">Save</button>
380-
</form></code></pre>
381-
</div>
379+
<h3 class="text-lg font-semibold mb-3">Calling Actions from Frontend</h3>
380+
<div class="code-block p-6 text-white rounded-lg mb-6">
381+
<pre><code class="language-html">&lt;!-- fw:click --&gt;
382+
&lt;button fw:click="increment"&gt;+&lt;/button&gt;
383+
&lt;button fw:click="update(5, 'New Name')"&gt;Update&lt;/button&gt;
384+
385+
&lt;!-- fw:submit --&gt;
386+
&lt;form fw:submit="save"&gt;
387+
&lt;input fw:model="name" type="text"&gt;
388+
&lt;button type="submit"&gt;Save&lt;/button&gt;
389+
&lt;/form&gt;</code></pre>
390+
</div>
382391
</section>
383392

384393
<!-- Computed Properties -->
@@ -431,52 +440,51 @@ <h2 class="text-2xl font-bold text-gray-900 mb-4">Validation</h2>
431440
</p>
432441
</section>
433442

434-
<!-- Frontend Integration -->
435443
<section id="frontend" class="section-anchor mb-12">
436444
<h2 class="text-2xl font-bold text-gray-900 mb-4">Frontend Integration</h2>
437445
<p class="text-gray-600 mb-6">
438446
ForgeWire's JavaScript client handles all frontend interactions automatically.
439447
</p>
440448

441-
<h3 class="text-lg font-semibold mb-3">Wire Directives</h3>
449+
<h3 class="text-lg font-semibold mb-3">Directives Reference</h3>
442450
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
443-
<li><code class="bg-gray-100 px-2 py-1 rounded">wire:click="method"</code> — Call action on
451+
<li><code class="bg-gray-100 px-2 py-1 rounded">fw:click="method"</code> — Call action on
444452
click</li>
445-
<li><code class="bg-gray-100 px-2 py-1 rounded">wire:model="property"</code> — Two-way
453+
<li><code class="bg-gray-100 px-2 py-1 rounded">fw:model="property"</code> — Two-way
446454
binding (immediate)</li>
447-
<li><code class="bg-gray-100 px-2 py-1 rounded">wire:model.lazy</code> — Update on
455+
<li><code class="bg-gray-100 px-2 py-1 rounded">fw:model.lazy</code> — Update on
448456
blur/change</li>
449-
<li><code class="bg-gray-100 px-2 py-1 rounded">wire:model.debounce</code> — Debounced
457+
<li><code class="bg-gray-100 px-2 py-1 rounded">fw:model.debounce</code> — Debounced
450458
updates (600ms default)</li>
451-
<li><code class="bg-gray-100 px-2 py-1 rounded">wire:model.debounce.300ms</code> — Custom
459+
<li><code class="bg-gray-100 px-2 py-1 rounded">fw:model.debounce.300ms</code> — Custom
452460
debounce time</li>
453-
<li><code class="bg-gray-100 px-2 py-1 rounded">wire:submit="method"</code> — Form
461+
<li><code class="bg-gray-100 px-2 py-1 rounded">fw:submit="method"</code> — Form
454462
submission</li>
455-
<li><code class="bg-gray-100 px-2 py-1 rounded">wire:poll</code> — Auto-refresh every 2
463+
<li><code class="bg-gray-100 px-2 py-1 rounded">fw:poll</code> — Auto-refresh every 2
456464
seconds</li>
457-
<li><code class="bg-gray-100 px-2 py-1 rounded">wire:poll.5s</code> — Custom poll interval
465+
<li><code class="bg-gray-100 px-2 py-1 rounded">fw:poll.5s</code> — Custom poll interval
458466
</li>
459467
</ul>
460468

461469
<h3 class="text-lg font-semibold mb-3">Example HTML</h3>
462470
<div class="code-block p-6 text-white rounded-lg mb-6">
463-
<pre><code class="language-html"><div wire:id="fw-0b4c5e3d9e83" wire:component="App\Components\Wire\Counter">
464-
<div class="counter">
465-
<button wire:click="decrement">–</button>
466-
<span>2 (even)</span>
467-
<button wire:click="increment">+</button>
468-
</div>
469-
</div></code></pre>
471+
<pre><code class="language-html">&lt;div fw:id="fw-0b4c5e3d9e83" fw:controller="App\Controllers\CounterController"&gt;
472+
&lt;div class="counter"&gt;
473+
&lt;button fw:click="decrement"&gt;–&lt;/button&gt;
474+
&lt;span&gt;2 (even)&lt;/span&gt;
475+
&lt;button fw:click="increment"&gt;+&lt;/button&gt;
476+
&lt;/div&gt;
477+
&lt;/div&gt;</code></pre>
470478
</div>
471479

472480
<h3 class="text-lg font-semibold mb-3">Polling with IntersectionObserver</h3>
473481
<p class="text-gray-600 mb-4">
474482
Components only poll when visible on screen (performance optimization):
475483
</p>
476484
<div class="code-block p-6 text-white rounded-lg mb-6">
477-
<pre><code class="language-html"><div wire:id="..." wire:component="..." wire:poll.5s>
478-
<!-- Only polls when visible -->
479-
</div></code></pre>
485+
<pre><code class="language-html">&lt;div fw:id="..." fw:controller="..." fw:poll.5s&gt;
486+
&lt;!-- Only polls when visible --&gt;
487+
&lt;/div&gt;</code></pre>
480488
</div>
481489
</section>
482490

@@ -491,7 +499,7 @@ <h3 class="text-lg font-semibold mb-3">Request Format</h3>
491499
<div class="code-block p-6 text-white rounded-lg mb-6">
492500
<pre><code class="language-json">{
493501
"id": "fw-0b4c5e3d9e83",
494-
"component": "App\\Components\\Wire\\Counter",
502+
"controller": "App\\Components\\Wire\\Counter",
495503
"action": "increment",
496504
"args": [],
497505
"dirty": {},
@@ -505,7 +513,7 @@ <h3 class="text-lg font-semibold mb-3">Request Format</h3>
505513
<h3 class="text-lg font-semibold mb-3">Response Format</h3>
506514
<div class="code-block p-6 text-white rounded-lg mb-6">
507515
<pre><code class="language-json">{
508-
"html": "<div wire:id=\"fw-0b4c5e3d9e83\"...>...</div>",
516+
"html": "&lt;div fw:id=\"fw-0b4c5e3d9e83\"...&gt;...&lt;/div&gt;",
509517
"state": {},
510518
"checksum": "632b5d500042bb4361657ea9f2991132d8a18208d0e38bf6a801f127f48f4e8c",
511519
"events": [],
@@ -737,8 +745,8 @@ <h3 class="font-semibold text-lg mb-3 text-green-600">Things That Often Help</h3
737745
<li>• Use #[Service] for dependency injection</li>
738746
<li>• Keep components focused and single-purpose</li>
739747
<li>• Use computed properties for derived values</li>
740-
<li>• Leverage wire:model.debounce for search inputs</li>
741-
<li>• Use wire:poll sparingly (only when needed)</li>
748+
<li>• Leverage fw:model.debounce for search inputs</li>
749+
<li>• Use fw:poll sparingly (only when needed)</li>
742750
</ul>
743751
</div>
744752

0 commit comments

Comments
 (0)