-
+ use RegularPHP;
+ use Htmx;
+
+ public function __construct(private Headers $headers, private StreamingCompiler $compiler)
+ {
+ }
+
+ /**
+ * In real life, you would probably do a lot more in here. But this just show how it works.
+ *
+ * @param int $count The current count
+ * @return string The rendered HTML
+ */
+ #[Route(Method::POST, '/api/count/add')]
+ public function add(int $count): string
+ {
+ // we want to place the fragment in the #count div
+ $this->retarget('#count');
+ // now rerender the component but only the fragment with the id count-from
+ return $this->renderFragment('count-form', $this->render($count + 1));
+ }
+
+ public function render(int $count = 0)
+ {
+ $this->begin();
+ ?>
+
+
+
+
+
- end();
- }
+ end();
+ }
+
+ #[Route(Method::POST, '/api/count/sub')]
+ public function sub(int $count): string
+ {
+ $this->retarget('#count');
+ return $this->renderFragment('count-form', $this->render($count - 1));
+ }
}
```
## What is this?
The Swytch Framework was created out of frustration with having to create a front-end and back-end for every project.
-Why not write it once? This framework will allow you to write you front-end and back-end in the same language, provide
-an API for non-browser clients, and allow you to deliver value faster than ever.
+Why not write it once in the same language? This framework will allow you to write you front-end and back-end in not
+Javascript, provide an API for non-browser clients, and allow you to deliver value faster than ever.
## How does it work?
Unlike other PHP frameworks with a dedicated templating language, the Swytch Framework's templatating language is HTML5.
-Thus you can take advantage of PHP's built-in templating functionality to create your app. The browser side is powered
+Thus, you can take advantage of PHP's built-in templating functionality to create your app. The browser side is powered
by [htmx](https://htmx.org/).
## Escaping, CSRF, and Security
@@ -137,16 +145,16 @@ the framework in action or [view the source](https://github.com/bottledcode/once
## Routing
For components, routing is performed very similar to how you might expect it to work in a Javascript framework with JSX.
-The Swytch Framework uses a built-in `Route` and `DefaultRoute` component to perform routing.
+The Swytch Framework uses a built-in `swytch:Route` and `swytch:DefaultRoute` component to perform routing.
```html
-
+
-
-
+
+
-
+
```
The built-in `Route` component is also a `DataProvider` component that allows you to inject the value of route
@@ -154,9 +162,9 @@ parameters:
```html
-
+
-
+
```
For API endpoints, routing is performed using the `#[Route]` attribute:
@@ -169,12 +177,13 @@ class Example {
}
```
-API endpoints also use the Symfony serializer so you can accept complex types as parameters that are composed via route
-parameters and body parameters.
+API endpoints also use the Symfony serializer, so you can accept complex types as parameters that are composed via route
+parameters and body parameters. Note that API endpoints are expected to begin with `/api/`. This is currently a
+hard-coded requirement; please open an issue if you have a use-case that requires this to be configurable.
## Context-Aware Escaping
-The Swytch Framework automatically escapes all output inside `{` brackets `}` in your HTML. It is fully context-aware,
+The Swytch Framework automatically escapes all output inside `{` brackets `}` in your output. It is fully context-aware,
so it automatically knows to escape Javascript inside `
-
-
-
-
-
-
-
-