achilles 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +36 -0
- data/CODE_OF_CONDUCT.md +46 -0
- data/CONTRIBUTING.md +122 -0
- data/MAINTAINERS.md +53 -0
- data/README.md +248 -14
- data/SECURITY.md +50 -0
- data/app/javascript/achilles/application/application.js +40 -3
- data/app/javascript/achilles/application/dom-mutation-observer/observer.js +11 -1
- data/app/javascript/achilles/application/hooks-manager/turbo.js +28 -7
- data/app/javascript/achilles/components/component_base.js +19 -2
- data/app/javascript/achilles/components/component_parser.js +22 -2
- data/app/javascript/achilles/components/components_registry.js +34 -14
- data/docs/core-js-gaps.md +26 -0
- data/docs/release-checklist.md +42 -23
- data/docs/releases/v1.1.0.md +74 -0
- data/docs/releases/v1.1.1.md +46 -0
- data/docs/upgrading-to-1.1.0.md +144 -0
- data/docs/upgrading.md +31 -0
- data/lib/achilles/version.rb +1 -1
- data/lib/achilles.rb +1 -0
- metadata +10 -1
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
# Upgrading To 1.1.0
|
|
2
|
+
|
|
3
|
+
This guide covers application-facing changes in Achilles `1.1.0`.
|
|
4
|
+
|
|
5
|
+
## Application Startup
|
|
6
|
+
|
|
7
|
+
Achilles applications must now be started explicitly.
|
|
8
|
+
|
|
9
|
+
Before:
|
|
10
|
+
|
|
11
|
+
```js
|
|
12
|
+
import { Application } from "achilles/application/application";
|
|
13
|
+
import { MenuComponent } from "components/menu_component";
|
|
14
|
+
|
|
15
|
+
const achilles = new Application();
|
|
16
|
+
achilles.componentsClassMapper.addComponentClass("MenuComponent", MenuComponent);
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
After:
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
import { Application } from "achilles/application/application";
|
|
23
|
+
import { MenuComponent } from "components/menu_component";
|
|
24
|
+
|
|
25
|
+
const achilles = new Application();
|
|
26
|
+
achilles.componentsClassMapper.addComponentClass("MenuComponent", MenuComponent);
|
|
27
|
+
achilles.start();
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Call `start()` after registering component classes. This lets applications
|
|
31
|
+
control when Achilles parses the DOM and attaches Turbo lifecycle hooks.
|
|
32
|
+
|
|
33
|
+
## Stopping An Application
|
|
34
|
+
|
|
35
|
+
Applications that create temporary Achilles instances can now call:
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
achilles.stop();
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
`stop()` removes Turbo lifecycle hooks and stops observing DOM mutations.
|
|
42
|
+
|
|
43
|
+
Most Rails applications only need one long-lived Achilles instance and do not
|
|
44
|
+
need to call `stop()` manually.
|
|
45
|
+
|
|
46
|
+
## Search Checklist
|
|
47
|
+
|
|
48
|
+
In each application, search for Achilles construction:
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
rg "new Application"
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
For every application instance, confirm component classes are registered before
|
|
55
|
+
calling `start()`.
|
|
56
|
+
|
|
57
|
+
## Component Root Ids
|
|
58
|
+
|
|
59
|
+
Every element with `data-component-class` must have a non-empty `id`.
|
|
60
|
+
|
|
61
|
+
Before:
|
|
62
|
+
|
|
63
|
+
```erb
|
|
64
|
+
<div data-component-class="MenuComponent"></div>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
After:
|
|
68
|
+
|
|
69
|
+
```erb
|
|
70
|
+
<div id="menu" data-component-class="MenuComponent"></div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Achilles uses component root ids as registry keys. Components without ids are
|
|
74
|
+
skipped and reported in the browser console.
|
|
75
|
+
|
|
76
|
+
Search for component roots without ids:
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
rg "data-component-class"
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Nested Components
|
|
83
|
+
|
|
84
|
+
Achilles now builds the component tree from DOM ancestry.
|
|
85
|
+
|
|
86
|
+
- `Page` remains the single synthetic root component.
|
|
87
|
+
- A component's parent is its nearest ancestor element with
|
|
88
|
+
`data-component-class`.
|
|
89
|
+
- If no component ancestor exists, the parent is `Page`.
|
|
90
|
+
|
|
91
|
+
For example:
|
|
92
|
+
|
|
93
|
+
```erb
|
|
94
|
+
<div id="dashboard" data-component-class="DashboardComponent">
|
|
95
|
+
<div id="filters" data-component-class="FiltersComponent"></div>
|
|
96
|
+
</div>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
The component tree is:
|
|
100
|
+
|
|
101
|
+
```text
|
|
102
|
+
Page
|
|
103
|
+
dashboard
|
|
104
|
+
filters
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Teardown Order
|
|
108
|
+
|
|
109
|
+
Component teardown now runs from children to parents.
|
|
110
|
+
|
|
111
|
+
Before this change, a parent component's `teardown()` could run before its child
|
|
112
|
+
components. Now child components clean up first, and the parent cleans up after
|
|
113
|
+
its subtree.
|
|
114
|
+
|
|
115
|
+
Review parent components whose `teardown()` removes DOM nodes, shared event
|
|
116
|
+
targets, third-party widgets, or state that child components also use during
|
|
117
|
+
cleanup.
|
|
118
|
+
|
|
119
|
+
## Strict Lifecycle Errors
|
|
120
|
+
|
|
121
|
+
By default, Achilles logs `setup()` and `teardown()` errors and keeps the page
|
|
122
|
+
running.
|
|
123
|
+
|
|
124
|
+
Tests and development environments can opt into strict lifecycle errors:
|
|
125
|
+
|
|
126
|
+
```js
|
|
127
|
+
const achilles = new Application();
|
|
128
|
+
achilles.strictLifecycleErrors = true;
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
When strict mode is enabled, `setup()` and `teardown()` errors are still logged
|
|
132
|
+
and then re-raised.
|
|
133
|
+
|
|
134
|
+
## Manual Test Checklist
|
|
135
|
+
|
|
136
|
+
After updating an application:
|
|
137
|
+
|
|
138
|
+
- boot the app
|
|
139
|
+
- open a page with Achilles components
|
|
140
|
+
- confirm component `setup()` methods run
|
|
141
|
+
- navigate with Turbo to another page and back
|
|
142
|
+
- confirm `teardown()` still runs before Turbo renders a new page
|
|
143
|
+
- insert any dynamic component markup the app supports
|
|
144
|
+
- check the browser console for Achilles errors
|
data/docs/upgrading.md
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# Upgrading Achilles
|
|
2
|
+
|
|
3
|
+
Use this page as the entry point for application upgrades.
|
|
4
|
+
|
|
5
|
+
Achilles should have an upgrade note for every release that changes application
|
|
6
|
+
setup, component markup, lifecycle behavior, or public APIs.
|
|
7
|
+
|
|
8
|
+
## Current Upgrade Notes
|
|
9
|
+
|
|
10
|
+
- [Upgrading to 1.1.0](upgrading-to-1.1.0.md)
|
|
11
|
+
- [Migrating from 0.1.3 to v1](migrating-from-0.1.3-to-v1.md)
|
|
12
|
+
|
|
13
|
+
## Release Notes
|
|
14
|
+
|
|
15
|
+
- [Achilles 1.1.1](releases/v1.1.1.md)
|
|
16
|
+
- [Achilles 1.1.0](releases/v1.1.0.md)
|
|
17
|
+
|
|
18
|
+
## Upgrade Policy
|
|
19
|
+
|
|
20
|
+
Before upgrading an existing application:
|
|
21
|
+
|
|
22
|
+
1. Read the guide for the target version.
|
|
23
|
+
2. Upgrade one application first.
|
|
24
|
+
3. Run the application's test suite.
|
|
25
|
+
4. Visit pages with Achilles components.
|
|
26
|
+
5. Verify Turbo navigation and dynamically inserted components.
|
|
27
|
+
6. Check the browser console for lifecycle, missing component class, or duplicate
|
|
28
|
+
id errors.
|
|
29
|
+
|
|
30
|
+
For breaking changes, prefer testing a release candidate in a real application
|
|
31
|
+
before upgrading every project.
|
data/lib/achilles/version.rb
CHANGED
data/lib/achilles.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: achilles
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.1.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jey Geethan
|
|
@@ -60,9 +60,13 @@ extensions: []
|
|
|
60
60
|
extra_rdoc_files: []
|
|
61
61
|
files:
|
|
62
62
|
- CHANGELOG.md
|
|
63
|
+
- CODE_OF_CONDUCT.md
|
|
64
|
+
- CONTRIBUTING.md
|
|
65
|
+
- MAINTAINERS.md
|
|
63
66
|
- MIT-LICENSE
|
|
64
67
|
- README.md
|
|
65
68
|
- Rakefile
|
|
69
|
+
- SECURITY.md
|
|
66
70
|
- app/assets/config/achilles/manifest.js
|
|
67
71
|
- app/assets/stylesheets/achilles/application.css
|
|
68
72
|
- app/controllers/achilles/application_controller.rb
|
|
@@ -83,8 +87,13 @@ files:
|
|
|
83
87
|
- app/views/layouts/achilles/application.html.erb
|
|
84
88
|
- config/importmap.rb
|
|
85
89
|
- config/routes.rb
|
|
90
|
+
- docs/core-js-gaps.md
|
|
86
91
|
- docs/migrating-from-0.1.3-to-v1.md
|
|
87
92
|
- docs/release-checklist.md
|
|
93
|
+
- docs/releases/v1.1.0.md
|
|
94
|
+
- docs/releases/v1.1.1.md
|
|
95
|
+
- docs/upgrading-to-1.1.0.md
|
|
96
|
+
- docs/upgrading.md
|
|
88
97
|
- docs/v1-roadmap.md
|
|
89
98
|
- lib/achilles.rb
|
|
90
99
|
- lib/achilles/engine.rb
|