-
-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7c9d9bd
commit d7b1f41
Showing
18 changed files
with
163 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# Technical Design | ||
|
||
This is a space to go into a little more detail about the technical design of some of the more interesting parts of Phlex. This is worth reading if you’re interested in understanding how Phlex works and maybe considering contributing to the project. |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
# Upgrading to v2 | ||
|
||
While we’ve tried to keep breaking changes to a minimum, there are a few things you will need to be aware of when upgrading from Phlex v1 to v2. | ||
|
||
The latest version of v1 contains a number of deprecations, so we recommend upgrading to the latest version of v1 first. | ||
|
||
## Breaking changes | ||
|
||
### `template` → `view_template` | ||
|
||
Instead of defining the `template` method for your component templates, you should instead define `view_template`. | ||
|
||
### `template_tag` → `template` | ||
|
||
To render [`<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) elements in a `Phlex::HTML` component, you need to call the `template` method instead of the original `template_tag` method. | ||
|
||
### We removed `tokens` and `classes` | ||
|
||
If you need these back, you can always copy their original implementation from here, paste them into a helper module and include it in your `ApplicationComponent`. | ||
|
||
However, we recommend using the new standard capabilities of attributes. | ||
|
||
## New features | ||
|
||
### Kits | ||
|
||
Originally previewed in v1, kits are now out of beta and fully supported in v2. Kits are a way to package up a set of components into a module. | ||
|
||
### Selective rendering | ||
|
||
### A better cache | ||
|
||
Phlex v2 introduces a new attribute cache that caches more things. We wrote about some of the technical details [here](/design/caching). |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,23 @@ | ||
# HTML | ||
# `Phlex::HTML` < [`Phlex::SGML`](sgml.md) | ||
|
||
## Instance methods | ||
|
||
We’re not going to list them all here, but `Phlex::HTML` defines an instance method for every non-deprecated HTML element. See the MDN Web Docs for a [complete list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). | ||
|
||
### `#doctype` | ||
|
||
This outputs an [HTML5 doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) declaration: | ||
|
||
``` | ||
<!doctype html> | ||
``` | ||
|
||
### `#svg` | ||
|
||
The `#svg` method is special because it yields an instance of [`Phlex::SVG`](svg.md) to the block. This allows you to create SVG content directly in your HTML: | ||
|
||
```ruby | ||
svg do |svg| | ||
svg.circle cx: 50, cy: 50, r: 40, fill: "red" | ||
end | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
# Reference |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,65 @@ | ||
# SGML | ||
# `Phlex::SGML` | ||
|
||
`Phlex::SGML` (which stands for [Standard Generalized Markup Language](https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language)) is the superclass of `Phlex::HTML` and `Phlex::SVG`. It provides a common interface for both HTML and SVG components. | ||
|
||
You can use this interface by subclassing either `Phlex::HTML` or `Phlex::SVG` with your own component class. | ||
|
||
## Class methods | ||
|
||
### `.new` | ||
|
||
It’s worth noting that `Phlex::SGML` overrides `.new` in order to capture the block during instantiation. This block will not be passed on to your `#initialize` method. Instead, it is passed to your `#view_template` method when the component is rendered. | ||
|
||
### `.register_element` | ||
|
||
Allows you to define a custom element that can be used in your templates. Since this defines an instance method, it’s inherited by subclasses. | ||
|
||
```ruby{2,5} | ||
class MyComponent < Phlex::HTML | ||
register_element :trix_editor | ||
def view_template | ||
trix_editor | ||
end | ||
end | ||
``` | ||
|
||
## Instance methods | ||
|
||
### `#after_template` | ||
|
||
### `#around_template` | ||
|
||
### `#await` | ||
|
||
### `#before_template` | ||
|
||
### `#call` | ||
|
||
### `#capture` | ||
|
||
### `#comment` | ||
|
||
### `#comment` | ||
|
||
### `#context` | ||
|
||
### `#flush` | ||
|
||
### `#format_object` | ||
|
||
### `#plain` | ||
|
||
### `#render?` | ||
|
||
### `#render` | ||
|
||
### `#tag` | ||
|
||
### `#unsafe_raw` | ||
|
||
### `#unsafe_tag` | ||
|
||
### `#vanish` | ||
|
||
### `#whitespace` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,5 @@ | ||
# SVG | ||
# `Phlex::SVG` < [`Phlex::SGML`](sgml.md) | ||
|
||
## Instance methods | ||
|
||
We’re not going to list them all here, but `Phlex::SVG` defines an instance method for every non-deprecated SVG element. See the MDN Web Docs for a [complete list](https://developer.mozilla.org/en-US/docs/Web/SVG). |