Lucky - StimulusJS

Template Source

Review the code before running this template on your machine.

def build_sample_controller(js_extension)
  if js_extension == "ts"
      create_file "src/js/controllers/hello_controller.ts" do<<~EOF
      import { Controller } from "stimulus";

      export default class extends Controller {
        // Defines a `this.testTarget` that you can use in your functions.
        // Attach to an element with `data-hello-target="test"`.
        static get targets(): Array<string> {
          return ["test"];
        }

        // Called whenever the controller is attached to an element on the page.
        // Attach this controller with something like `<div data-controller="hello"></div>`.
        initialize(): void {
          console.log("Hello! StimulusJS is working!");
        }

        // Can be called from within this file with `this.greet()`, or in an action in your HTML.
        // Call this on a button click with something like `<button data-action="click->hello#greet"></button>`.
        greet(): void {
          console.log("Hello! You're in a StimulusJS function!");
        }
      }
      EOF
    end
  else
    create_file "src/js/controllers/hello_controller.js" do<<~EOF
      import { Controller } from "stimulus";

      export default class extends Controller {
        // Defines a `this.testTarget` that you can use in your functions.
        // Attach to an element with `data-hello-target="test"`.
        static get targets() {
          return ["test"];
        }

        // Called whenever the controller is attached to an element on the page.
        // Attach this controller with something like `<div data-controller="hello"></div>`.
        initialize() {
          console.log("Hello! StimulusJS is working!");
        }

        // Can be called from within this file with `this.greet()`, or in an action in your HTML.
        // Call this on a button click with something like `<button data-action="click->hello#greet"></button>`.
        greet() {
          console.log("Hello! You're in a StimulusJS function!");
        }
      }
      EOF
    end
  end
end

def yarn(*packages)
  run("yarn add #{packages.join(" ")}")
end

js_extension = "js"

if yes? "Are you using TypeScript? [y/N]"
  js_extension = "ts"
end

# Add StimulusJS to package.json
yarn "stimulus"

append_to_file "src/js/app.#{js_extension}" do<<~EOF
  import { Application } from "stimulus";
  import { definitionsFromContext } from "stimulus/webpack-helpers";

  const application = Application.start();
  const context = require.context("./controllers", true, /\.#{js_extension}$/);
  application.load(definitionsFromContext(context));
  EOF
end

if yes?("Would you like to add a sample StimulusJS controller to verify things are working? [y/N]")
  build_sample_controller(js_extension)
end

Comments

Sign up or Login to leave a comment.