Hello Stimulus <3 #1244

ytbryan · 2018-02-03T10:37:04Z

This is merged at #1255

Use Rails 5 API when available, making easier to drop support of Rails 4.2 in future.

javan · 2018-02-04T18:36:24Z

lib/install/examples/stimulus/hello_stimulus.js

+  hello.setAttribute("data-controller", "hello")
+  hello.setAttribute("data-target", "hello.output")
+  document.body.appendChild(hello)
+})


Creating an element with JavaScript isn't a very good introduction to Stimulus since you'll almost always be working with server-rendered HTML. Let's ditch this file and start people out right by appending the setup code to app/javascript/packs/application.js:

import { Application } from "stimulus" import { definitionsFromContext } from "stimulus/webpack-helpers" const application = Application.start() const context = require.context("controllers", true, /\.js$/) application.load(definitionsFromContext(context))

👌 ok, ready for another look.

Appended the setup code to app/javascript/packs/application.js and ditched the previous file.

…egrity-config Add line break after check_yarn_integrity template config

From CI "Use the new Ruby 1.9 hash syntax. inject_into_file "#{Webpacker.config.source_entry_path}/application.js", :after => "console.log('Hello World from Webpacker')" do"

javan · 2018-02-05T15:07:30Z

lib/install/stimulus.rb

@@ -0,0 +1,12 @@
+say "Appending Stimulus setup code to #{Webpacker.config.source_entry_path}/application.js"
+inject_into_file "#{Webpacker.config.source_entry_path}/application.js", after: "console.log('Hello World from Webpacker')" do


Injecting after console.log('Hello World from Webpacker') feels kind of brittle. Maybe just append to the end?

javan · 2018-02-05T15:09:53Z

lib/install/examples/stimulus/setup.js

@@ -0,0 +1,8 @@
+
+


Let's rename this file to application.js since that's the file it ends up in. And move this leading whitespace to the injection.

javan · 2018-02-05T15:10:09Z

lib/install/examples/stimulus/controllers/hello_controller.js

+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "output" ]


javan · 2018-02-05T15:10:26Z

lib/tasks/webpacker.rake

  "webpacker:install:erb"             => "Installs Erb loader with an example",
  "webpacker:install:coffee"          => "Installs CoffeeScript loader with an example",
  "webpacker:install:typescript"      => "Installs Typescript loader with an example"
+


javan · 2018-02-05T15:14:48Z

lib/install/examples/stimulus/controllers/hello_controller.js

+  static targets = [ "output" ]
+  connect() {
+    this.outputTarget.textContent =
+    `Hello Stimulus!`


No need for the \n here or the interpolated string: this.outputTarget.textContent = 'Hello Stimulus!'

`warn` messages are silenced when `$VERBOSE=nil` (verbosity level 0). We're well beyond casual warning territory here and refusing to boot with an error.

Fix typo in the hello_* examples

add whitespace

remove whitespace

this.outputTarget.textContent = 'Hello Stimulus!'

ytbryan · 2018-02-06T02:26:22Z

👌 ready

javan · 2018-02-06T14:40:56Z

lib/install/examples/stimulus/application.js

+import { definitionsFromContext } from "stimulus/webpack-helpers"
+
+const application = Application.start()
+const context = require.context("./controllers", true, /.js$/)


Does "./controllers" work? That's not the relative path to the controllers directory. When I tested, "controllers" worked as expected since webpacker adds all root app/javascript/ directories to the load path.

Thanks for pointing this out. I uninstalled the old webpacker and now, it's working for me 🤷‍♂️

javan · 2018-02-06T14:42:02Z

lib/install/examples/stimulus/controllers/hello_controller.js

@@ -0,0 +1,12 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction


It would be nice to show the HTML this controller expects in the comments here.

Othmano2399

Is this Related??

javan · 2018-02-06T16:49:33Z

Can you update the PR description, please? Just need to describe the webpacker changes and link to Stimulus where appropriate.

javan · 2018-02-06T17:06:10Z

lib/install/examples/stimulus/controllers/hello_controller.js

+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This controller is expecting the following HTML. Paste it with the javascript_pack_tag helper. 


How about:

// This example controller works with specially annotated HTML like: // // <div data-controller="hello> // <h1 data-target="hello.output"></h1> // </div>

javan · 2018-02-06T17:07:23Z

lib/install/examples/stimulus/controllers/hello_controller.js

+  static targets = [ "output" ]
+
+  connect() {
+    this.outputTarget.textContent = 'Hello Stimulus!'


-'Hello Stimulus!' +'Hello, Stimulus!'

javan · 2018-02-06T17:08:07Z

lib/install/examples/stimulus/controllers/hello_controller.js

+// <div data-controller="hello" data-target="hello.output">
+// </div>
+
+


✂️extra newline

ytbryan · 2018-02-06T17:23:55Z

Updated description and pushed in the updated commit. If there are new reviews, I will push in tomorrow morning. Thanks for reviewing!

javan · 2018-02-06T18:52:23Z

lib/install/stimulus.rb

+end
+
+say "Creating controllers directory"
+directory "#{__dir__}/examples/stimulus/controllers", "#{Webpacker.config.source_entry_path}/controllers"


We should create an app/javascript/controllers/ directory here, not app/javascript/packs/controllers/. So use Webpacker.config.source_path instead of Webpacker.config.source_entry_path.

That's why #1244 (comment) worked for me and not you.

javan · 2018-02-06T18:53:54Z

Once #1244 (comment) is fixed, please squash your commits and then we're good to go.

webpacker:install:stimulus added controllers directory and hello_controller.js HELLO stimulus! Wrapping it up with stimulus.rb include stimulus in README.md Remove hello_stimulus.js Append setup code to application.js 👮‍♂️Satisfy robocop From CI "Use the new Ruby 1.9 hash syntax. inject_into_file "#{Webpacker.config.source_entry_path}/application.js", :after => "console.log('Hello World from Webpacker')" do" use append_to_file instead of inject_into_file add whitespace rename setup.js to application.js remove whitespace added a \n this.outputTarget.textContent = 'Hello Stimulus!' ✂️ ✂️ to appease robocop fix: cannot find module "controllers" revert back to "controllers" Added the expectant HTML in comments. 🤰 ✂️, Edit comments, and changed to 'Hello, Stimulus!' Use source_path instead of source_entry_path missing "

ytbryan · 2018-02-07T00:32:52Z

Good to go 👍🏻

javan · 2018-02-07T13:38:14Z

It looks like you merged master. Can you rebase and squash instead, please? There's a linked guide in my last comment.

m5o · 2018-02-07T22:49:22Z

lib/tasks/webpacker.rake

@@ -11,6 +11,7 @@ tasks = {
  "webpacker:install:vue"             => "Installs and setup example Vue component",
  "webpacker:install:angular"         => "Installs and setup example Angular component",
  "webpacker:install:elm"             => "Installs and setup example Elm component",
+  "webpacker:install:stimulus"        => "Install and setup Stimulus component",


-"Install and setup Stimulus component +"Installs and setup example Stimulus component

Is more consistent to the rest od task description.

ytbryan · 2018-02-08T00:55:01Z

@javan Sorry for the trouble. Will this work instead? #1255

I guess the problem lies with me working on my master branch, dork

update: I tried to rebase and squash again but couldn't get it to work. do you think merging #1255 is easier? sorry about this.

javan · 2018-02-08T13:44:06Z

#1255

iv-mexx and others added 8 commits January 31, 2018 10:55

Fix typo in the hello_* examples

defb174

Add line break after check_yarn_integrity template config

47c3642

Use Rails 5 API when available, making easier to drop support of Rails 4.2 in future.

include stimulus into installers.rake

ff141b9

webpacker:install:stimulus

3721af2

added controllers directory and hello_controller.js

ceb336e

HELLO stimulus!

8d198d7

Wrapping it up with stimulus.rb

c0f0423

include stimulus in README.md

660b0e3

javan suggested changes Feb 4, 2018

View reviewed changes

guilleiguaran and others added 4 commits February 4, 2018 13:58

Merge pull request #1241 from guigs/fix-blank-line-for-check_yarn_int…

9c019e1

…egrity-config Add line break after check_yarn_integrity template config

Remove hello_stimulus.js

fb3a72f

Append setup code to application.js

8647850

👮‍♂️Satisfy robocop

975d57d

From CI "Use the new Ruby 1.9 hash syntax. inject_into_file "#{Webpacker.config.source_entry_path}/application.js", :after => "console.log('Hello World from Webpacker')" do"

javan reviewed Feb 5, 2018

View reviewed changes

javan and others added 8 commits February 5, 2018 15:53

Ensure yarn integrity errors are displayed

7509275

`warn` messages are silenced when `$VERBOSE=nil` (verbosity level 0). We're well beyond casual warning territory here and refusing to boot with an error.

Merge pull request #1238 from iv-mexx/feature/fix_hello_templates

52a7b99

Fix typo in the hello_* examples

use append_to_file instead of inject_into_file

7e30c7d

add whitespace

rename setup.js to application.js

88e72fd

remove whitespace

added a \n

70c582c

this.outputTarget.textContent = 'Hello Stimulus!'

✂️

102235a

✂️ to appease robocop

2b9be4b

fix: cannot find module "controllers"

99bbc11

javan reviewed Feb 6, 2018

View reviewed changes

Othmano2399 reviewed Feb 6, 2018

View reviewed changes

ytbryan added 2 commits February 7, 2018 00:45

revert back to "controllers"

51dcaeb

Added the expectant HTML in comments. 🤰

34349ce

javan reviewed Feb 6, 2018

View reviewed changes

✂️, Edit comments, and changed to 'Hello, Stimulus!'

2c4c360

rails deleted a comment from Othmano2399 Feb 6, 2018

javan reviewed Feb 6, 2018

View reviewed changes

ytbryan added 4 commits February 7, 2018 07:47

Use source_path instead of source_entry_path

d0766b3

missing "

63b3891

Merge branch 'master' of https://github.com/ytbryan/webpacker

6aca5d5

m5o reviewed Feb 7, 2018

View reviewed changes

be consistent

ea93bb7

javan closed this Feb 8, 2018

		@@ -0,0 +1,12 @@
		say "Appending Stimulus setup code to #{Webpacker.config.source_entry_path}/application.js"
		inject_into_file "#{Webpacker.config.source_entry_path}/application.js", after: "console.log('Hello World from Webpacker')" do

		@@ -0,0 +1,12 @@
		// Visit The Stimulus Handbook for more details
		// https://stimulusjs.org/handbook/introduction

		// <div data-controller="hello" data-target="hello.output">
		// </div>

Hello Stimulus <3 #1244

Hello Stimulus <3 #1244

Uh oh!

Conversation

ytbryan commented Feb 3, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ytbryan commented Feb 6, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Othmano2399 left a comment

Choose a reason for hiding this comment

Uh oh!

javan commented Feb 6, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ytbryan commented Feb 6, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

javan commented Feb 6, 2018

Uh oh!

ytbryan commented Feb 7, 2018

Uh oh!

javan commented Feb 7, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ytbryan commented Feb 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

javan commented Feb 8, 2018

Uh oh!

Uh oh!

ytbryan commented Feb 3, 2018 •

edited

Loading

ytbryan commented Feb 6, 2018 •

edited

Loading

ytbryan commented Feb 8, 2018 •

edited

Loading