Skip to content

Fixing relative README links and adding link to demo #107

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Jun 22, 2021
Merged

Fixing relative README links and adding link to demo #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/LiveComponent/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
**EXPERIMENTAL** This component is currently experimental and is
likely to change, or even change drastically.

Live components work with the [TwigComponent](../TwigComponent)
Live components work with the [TwigComponent](https://github.com/symfony/ux-twig-component)
library to give you the power to automatically update your
Twig components on the frontend as the user interacts with them.
Inspired by [Livewire](https://laravel-livewire.com/) and
Expand Down Expand Up @@ -62,6 +62,8 @@ class ProductSearchComponent implements LiveComponentInterface
As a user types into the box, the component will automatically
re-render and show the new results!

Want a demo? Check out https://github.com/weaverryan/live-demo.

## Installation

Let's get started! Install the library with:
Expand Down Expand Up @@ -94,7 +96,7 @@ That's it! We're ready!

## Making your Component "Live"

If you haven't already, check out the [Twig Component](../TwigComponent)
If you haven't already, check out the [Twig Component](https://github.com/symfony/ux-twig-component)
documentation to get the basics of Twig components.

Suppose you've already built a basic Twig component:
Expand Down Expand Up @@ -220,7 +222,7 @@ be set when rendering. Most properties will be LiveProps, with
common exceptions being properties that hold services (these don't
need to be stateful because they will be autowired each time before
the component is rendered) and
[properties used for computed properties](../TwigComponent/README.md#computed-properties).
[properties used for computed properties](https://github.com/symfony/ux-twig-component/blob/main/README.md#computed-properties).

## data-action="live#update": Re-rendering on LiveProp Change

Expand Down
8 changes: 5 additions & 3 deletions src/TwigComponent/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,14 @@ Done! Now render it wherever you want:

Enjoy your new component!

![Example of the AlertComponent](./alert-example.png)
![Example of the AlertComponent](https://github.com/symfony/ux-twig-component/blob/main/alert-example.png?raw=true)

This brings the familiar "component" system from client-side frameworks
into Symfony. Combine this with [Live Components](../LiveComponent),
into Symfony. Combine this with [Live Components](https://github.com/symfony/ux-live-component),
to create an interactive frontend with automatic, Ajax-powered rendering.

Want a demo? Check out https://github.com/weaverryan/live-demo.

## Installation

Let's get this thing installed! Run:
Expand Down Expand Up @@ -271,7 +273,7 @@ method and called that from the template via `this.products`.
This was done because, as a general rule, you should make your components
as _lazy_ as possible and store only the information you need on its
properties (this also helps if you convert your component to a
[live component](../LiveComponent)) later. With this setup, the
[live component](https://github.com/symfony/ux-live-component)) later. With this setup, the
query is only executed if and when the `getProducts()` method
is actually called. This is very similar to the idea of
"computed properties" in frameworks like [Vue](https://v3.vuejs.org/guide/computed.html).
Expand Down