Giter Site home page Giter Site logo

adam16 / stimulus Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hotwired/stimulus

0.0 1.0 0.0 3.46 MB

A modest JavaScript framework for the HTML you already have

Home Page: https://stimulus.hotwired.dev/

License: MIT License

JavaScript 2.03% TypeScript 97.97%

stimulus's Introduction

Stimulus Stimulus

A modest JavaScript framework for the HTML you already have

Stimulus 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.

How does it work? Sprinkle your HTML with controller, target, and action attributes:

<div data-controller="hello">
  <input data-hello-target="name" type="text">

  <button data-action="click->hello#greet">Greet</button>

  <span data-hello-target="output"></span>
</div>

Then write a compatible controller. Stimulus brings it to life automatically:

// hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "name", "output" ]

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

Stimulus continuously watches the page, kicking in as soon as attributes appear or disappear. It works with any update to the DOM, regardless of whether it comes from a full page load, a Turbo page change, or an Ajax request. Stimulus manages the whole lifecycle.

You can write your first controller in five minutes by following along in the Stimulus Handbook.

You can read more about why we created this new framework in The Origin of Stimulus.

Installing Stimulus

You can use Stimulus with any asset packaging systems. And if you prefer no build step at all, just drop a <script> tag on the page and get right down to business.

See the Installation Guide for detailed instructions.

Getting Help

Looking for the docs? Once you've read through the Handbook, consult the Stimulus Reference for API details.

Have a question about Stimulus? Connect with other Stimulus developers on the Hotwire Discourse community forum.

Contributing Back

Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!

We expect all Stimulus contributors to abide by the terms of our Code of Conduct.

Development

  • Fork the project locally
  • yarn install
  • yarn start - to run the local dev server with examples
  • yarn test - to run the unit tests
  • yarn lint - to run the linter with ESLint
  • yarn format - to format changes with Prettier

Acknowledgments

Stimulus is MIT-licensed open-source software from Basecamp, the creators of Ruby on Rails.

Continuous integration VMs generously provided by Sauce Labs.


© 2023 Basecamp, LLC.

stimulus's People

Contributors

adrienpoly avatar alexander-schranz avatar dependabot[bot] avatar dhh avatar epszaw avatar firedev avatar ghiculescu avatar holdenrehg avatar javan avatar jeremy avatar kihaya avatar lb- avatar leastbad avatar lesykos avatar lsparlin avatar marcoroth avatar matt17r avatar myers avatar nakajimatakuya avatar nlangowitz avatar olimart avatar peterfaiman avatar radiantshaw avatar rik avatar seanpdoyle avatar searls avatar sstephenson avatar sub-xaero avatar sunnyrjuneja avatar vastray avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.