stimulus-rails 0.2.4 → 0.6.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/MIT-LICENSE +1 -1
- data/README.md +11 -22
- data/app/assets/javascripts/{stimulus/loaders/autoloader.js → stimulus-autoloader.js} +2 -2
- data/app/assets/javascripts/stimulus-importmap-autoloader.js +25 -0
- data/app/assets/javascripts/stimulus.js +1926 -0
- data/lib/generators/stimulus/USAGE +15 -0
- data/lib/generators/stimulus/stimulus_generator.rb +16 -0
- data/lib/generators/stimulus/templates/controller.js.tt +7 -0
- data/lib/install/app/javascript/controllers/application.js +10 -0
- data/lib/install/app/{assets/javascripts → javascript}/controllers/hello_controller.js +1 -1
- data/lib/install/app/javascript/controllers/index_for_importmap.js +5 -0
- data/lib/install/app/javascript/controllers/index_for_node.js +7 -0
- data/lib/install/stimulus_with_importmap.rb +19 -0
- data/lib/install/stimulus_with_node.rb +18 -0
- data/lib/stimulus/engine.rb +1 -17
- data/lib/stimulus/manifest.rb +27 -0
- data/lib/stimulus/version.rb +1 -1
- data/lib/tasks/stimulus_tasks.rake +32 -9
- metadata +21 -22
- data/app/assets/javascripts/stimulus/libraries/es-module-shims.js +0 -1
- data/app/assets/javascripts/stimulus/libraries/es-module-shims@0.7.1.js +0 -475
- data/app/assets/javascripts/stimulus/libraries/stimulus.js +0 -1
- data/app/assets/javascripts/stimulus/libraries/stimulus@2.js +0 -1699
- data/app/assets/javascripts/stimulus/manifest.js +0 -2
- data/app/helpers/stimulus/stimulus_helper.rb +0 -10
- data/lib/install/app/assets/javascripts/controllers/index.js +0 -9
- data/lib/install/app/assets/javascripts/importmap.json.erb +0 -5
- data/lib/install/application.js +0 -1
- data/lib/install/stimulus_with_asset_pipeline.rb +0 -23
- data/lib/install/stimulus_with_webpacker.rb +0 -10
- data/lib/stimulus/importmap_helper.rb +0 -33
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: eacb867e3e29fcedd7fadfd3237d8a92ffce70ef4ba2a7e8c10a8e5cf04c35dd
|
|
4
|
+
data.tar.gz: 226b6e7bf8dfa7e4c0b458e78e1a429ec6e506139c7f963425437dc0a269b51d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 52bc59f17f3c6aa1489ae0d37c82986a5cb3ab8568392a0b1d7a69b9bbd80d931ce00bb1b73619f9c63e4f3b5a07c6121ec2c74b6499575a355210d76f9668ef
|
|
7
|
+
data.tar.gz: f2b95322e53658d445a5d7bb66bdead2f712e13efe823d2178df99c85d3a6fb88ab4560d06c7d2cdfd3e8ce6a512487a64f53ce3e485a335c554717c9eaf0ddc
|
data/MIT-LICENSE
CHANGED
data/README.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
# Stimulus for Rails
|
|
2
2
|
|
|
3
|
-
[Stimulus](https://stimulus.
|
|
3
|
+
[Stimulus](https://stimulus.hotwired.dev) is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbo to provide a complete solution for fast, compelling applications with a minimal amount of effort. Together they form the core of [Hotwire](https://hotwired.dev).
|
|
4
4
|
|
|
5
|
-
Stimulus for Rails makes it easy to use this modest framework with the asset pipeline and ES6/ESM in the browser. It
|
|
5
|
+
Stimulus for Rails makes it easy to use this modest framework with the asset pipeline and ES6/ESM in the browser. It relies on either `importmap-rails` to make Stimulus available via ESM or a node-capable Rails (like via `jsbundling-rails`) to include Stimulus in the bundle. Make sure to install one of these first!
|
|
6
6
|
|
|
7
|
-
If you want to use Stimulus with a bundler, you should use [Webpacker](https://github.com/rails/webpacker) instead. This gem is purely intended for those who wish to use Stimulus with the asset pipeline using ESM in the browser.
|
|
8
7
|
|
|
9
8
|
## Installation
|
|
10
9
|
|
|
@@ -12,30 +11,24 @@ If you want to use Stimulus with a bundler, you should use [Webpacker](https://g
|
|
|
12
11
|
2. Run `./bin/bundle install`.
|
|
13
12
|
3. Run `./bin/rails stimulus:install`
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
The installer will automatically detect whether you're using an [import map](https://github.com/rails/importmap-rails) or [JavaScript bundler](https://github.com/rails/jsbundling-rails) to manage your application's JavaScript. If you're using an import map, the Stimulus dependencies will be pinned to the versions of the library included with this gem. If you're using node, yarn will add the dependencies to your `package.json` file.
|
|
16
15
|
|
|
17
|
-
1. Create an example controller in `app/assets/javascripts/controllers/hello_controller.js`.
|
|
18
|
-
2. Append the include tags to the `<head>` of your `app/views/layouts/application.html.erb`.
|
|
19
|
-
3. Initialize your `importmap.json` in `app/assets/javascripts/importmap.json.erb`.
|
|
20
|
-
4. Ensure JavaScript is included in your `app/assets/config/manifest.js` file for compilation.
|
|
21
|
-
|
|
22
|
-
If using Webpacker to manage JavaScript, the last command will:
|
|
23
|
-
|
|
24
|
-
1. Import the controllers directory in the application pack.
|
|
25
|
-
2. Create a controllers directory at `app/javascripts/controllers`.
|
|
26
|
-
3. Create an example controller in `app/javascripts/controllers/hello_controller.js`.
|
|
27
|
-
4. Install the Stimulus NPM package.
|
|
28
16
|
|
|
29
17
|
## Usage
|
|
30
18
|
|
|
31
|
-
|
|
19
|
+
The installer amends your JavaScript entry point at `app/javascript/application.js` to import the `app/javascript/controllers/index.js` file, which is responsible for setting up your Stimulus application and registering your controllers.
|
|
20
|
+
|
|
21
|
+
With an import-mapped application, controllers are automatically pinned and registered based on the file structure. With a node application, controllers need to be imported and registered directly in the index.js file, but this is done automatically using either the Stimulus generator (`./bin/rails generate stimulus [controller]`) or the dedicated `stimulus:manifest:update` task. Either will overwrite the `controllers/index.js` file.
|
|
32
22
|
|
|
33
|
-
|
|
23
|
+
You're encouraged to use the generator to add new controllers like so:
|
|
34
24
|
|
|
35
25
|
```javascript
|
|
26
|
+
// Run "./bin/rails g stimulus hello" to create the file and update the index, then amend:
|
|
27
|
+
|
|
36
28
|
// app/assets/javascripts/controllers/hello_controller.js
|
|
37
|
-
import { Controller } from "stimulus"
|
|
29
|
+
import { Controller } from "@hotwired/stimulus"
|
|
38
30
|
|
|
31
|
+
// Connects with data-controller="hello"
|
|
39
32
|
export default class extends Controller {
|
|
40
33
|
static targets = [ "name", "output" ]
|
|
41
34
|
|
|
@@ -62,10 +55,6 @@ And it'll be activated and registered automatically when encountering the data-c
|
|
|
62
55
|
|
|
63
56
|
That's it!
|
|
64
57
|
|
|
65
|
-
You can add additional libraries needed by your controllers in `app/assets/javascripts/libraries` using the `library@1.0.0.js` naming convention. These libraries will be added to the dynamically generated [importmap](https://github.com/WICG/import-maps) (a shim is included with the `stimulus_include_tags`), so you can reference `cookies@0.5.6.js` as `import Cookie from "cookies"`.
|
|
66
|
-
|
|
67
|
-
The libraries must be made for ESM. See https://skypack.dev where you can either directly reference libraries or download them and use them with the ESM conversion.
|
|
68
|
-
|
|
69
58
|
|
|
70
59
|
## License
|
|
71
60
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Application } from "stimulus"
|
|
1
|
+
import { Application } from "@hotwired/stimulus"
|
|
2
2
|
|
|
3
3
|
const application = Application.start()
|
|
4
4
|
const { controllerAttribute } = application.schema
|
|
@@ -23,7 +23,7 @@ function loadController(name) {
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
function controllerFilename(name) {
|
|
26
|
-
return
|
|
26
|
+
return `controllers/${name.replace(/--/g, "/").replace(/-/g, "_")}_controller`
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
function registerController(name, module) {
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// FIXME: es-module-shim won't shim the dynamic import without this explicit import
|
|
2
|
+
import "@hotwired/stimulus"
|
|
3
|
+
|
|
4
|
+
export function registerControllersFrom(under, application) {
|
|
5
|
+
const paths = Object.keys(parseImportmapJson())
|
|
6
|
+
.filter(path => path.match(new RegExp(`^${under}/.*_controller$`)))
|
|
7
|
+
|
|
8
|
+
paths.forEach(path => registerControllerFromPath(path, under, application))
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export function parseImportmapJson() {
|
|
12
|
+
return JSON.parse(document.querySelector("script[type=importmap]").text).imports
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function registerControllerFromPath(path, under, application) {
|
|
16
|
+
const name = path
|
|
17
|
+
.replace(new RegExp(`^${under}/`), "")
|
|
18
|
+
.replace("_controller", "")
|
|
19
|
+
.replace(/\//g, "--")
|
|
20
|
+
.replace(/_/g, "-")
|
|
21
|
+
|
|
22
|
+
import(path)
|
|
23
|
+
.then(module => application.register(name, module.default))
|
|
24
|
+
.catch(error => console.log(`Failed to register controller: ${name} (${path})`, error))
|
|
25
|
+
}
|