Stimulus Discourse

Post your examples or open source projects

Hey there.

I’m going to use Stimulus in my open-source app:

  1. Name: Skyderby
  2. Github repo: https://github.com/skyderby/skyderby
  3. Link to Live app: https://skyderby.ru
  4. Is it a project in production? : Yes
  5. Comments: as of March, 3, 2018 it only first step made in PR #/96 for 2 small features, but I really like this experience and going to migrate project to Stimulus and finally drop Backbone + Underscore dependency
  6. I’m Owner
4 Likes

Name : Stimulus with Turbolinks, select2 and formValidation
Github repo : https://github.com/dstull/stimulus-formvalidation/tree/master
Link to Live app : https://stimulus-formvalidation.herokuapp.com/cars
Is it a project in production? : No Demo only
Comments: https://dev.to/dstull/stimulus-with-turbolinks-select2-and-formvalidation-1i7l
Owner

1 Like

Name : A simple Stimulus table filter demo
Github repo : https://github.com/dstull/stimulus-demo/
Link to Live app : https://stimulus-demo.herokuapp.com/
Is it a project in production? : No Demo only
Comments: https://dev.to/dstull/a-simple-stimulus-table-filter-demo-3gmb
Owner

1 Like

Name : hickory-cricket
Github repo : n/a, https://glitch.com/edit/#!/hickory-cricket
Link to Live app : https://hickory-cricket.glitch.me/
Is it a project in production? : Demo only
Comments: Javascript selection via CSS
Owner: true

1 Like

I :heart::heart::heart: Stimulus!

Here is the demo of uploading progress using rails-ujs + Stimulus.

Source code can be found here: https://github.com/skyderby/skyderby/blob/2d78ddabe28835f887bd5990d8419c7365867b7e/app/javascript/controllers/upload_progress_controller.js

It is as simple as it should be.

5 Likes

Name : Stimulus Controllers for Mapbox-GL
Github repo : https://github.com/ayudo/stimulus-mapbox-gl
Link to Live app : no, sorry : )
Is it a project in production? : not yet, buit it will
Owner : me / $dayjob

:slight_smile:

2 Likes
  • Name : Sticky Table Headers
  • Github repo : https://github.com/johnbeatty/stimulus-sticky-table-header#readme
  • Link to Live app : It’s only in the admin section of a private app I run. I have a blog post about it here and it’s on NPM here.
  • Is it a project in production? : Yes
  • Comments: This is a small port of a JQuery plugin I was using. I have a couple pages with a lot of records, so it’s nice to keep those headers as context for what all the data means. Please submit bugs if you find any, I’m sure there are a lot of missing edge cases.
  • Owner: me
1 Like

Name : StimulusJS with Rails Action Cable and a bit of Sidekiq
Github repo : https://github.com/dstull/sidekiq-actioncable-stimulus-demo
Link to Live app : n/a
Is it a project in production? : No Demo only - version of it is in prod internally used
Comments: https://dev.to/dstull/stimulusjs-with-rails-action-cable-and-a-bit-of-sidekiq-i0a
Owner

1 Like
  1. Name: Conway’s Game Of Life on Rails with Stimulus.js
  2. Github repo: https://github.com/DonSchado/game-of-life
  3. Link to Live app: https://game-of-life-turbo.herokuapp.com/
  4. Is it a project in production? : It’s a Demo :wink:
  5. Comments: Even if the architecture is kind of ridiculous, I’m really impressed with the result.
  6. Owner: Me :slight_smile:
3 Likes
  1. alonetone
  2. https://github.com/sudara/alonetone
  3. https://alonetone.com
  4. Open source production rails app since 2007 (!!), stimulus app since 2018
  5. Comments: I finally migrated a bunch of old js behavior hanging around from 2008 to a handful of stimulus controllers. All playback wrangling and js sugar is done with stimulus. The core part of the mp3 player is playback_controller.js and inherited by the other flavors of playback behavior on the site: https://github.com/sudara/alonetone/tree/master/app/javascript/controllers
3 Likes

You haven’t updated in six months! I’m also building something like this also :slight_smile:

not great but this is my first stimulus controller:

  1. name: parameters
  2. repo: none
  3. url: none
  4. prod?: kind of but not really
  5. comments: from an hash (spec) and initial parameters, it will create form inputs dynamically depending on some other input (handles default, autocomplete, types, deepness of the spec, etc.)
  6. owner: me
class window.Parameters extends Stimulus.Controller
  @targets = ['spec', 'parameters', 'select', 'initial']

  connect: ->
    @spec = JSON.parse(@specTarget.textContent)
    @deepness = u.toI(@data.get('deepness'))
    @change(initial: true)

  change: (options = {}) ->
    @parametersTarget.innerHTML = @parametersHTML(options)
    @escapeValues()

  currentSpec: ->
    return unless @deepness and @value()

    if @deepness == 2
      service = @value().split(" ")[0]
      kind = @value().split(" ")[1]
      @spec[service][kind]
    else
      @spec[@value()]

  value: ->
    @selectTarget.value

  baseName: ->
    baseName = @selectTarget.attributes['name'].value
    baseName.split("[").slice(0, -1).join("[")

  nameFor: (key) ->
    "#{@baseName()}[parameters][#{key}]"

  initial: (key) ->
    JSON.parse(@initialTarget.textContent)[key]

  parametersHTML: (options = {}) ->
    u.map(@currentSpec(), (key, spec) =>
      if options.initial
        value = @initial(key) || spec.default || ""
      else
        value = spec.default || ""

      html = "<label><p>#{key}"
      html += "  <span class=\"form--hint\">#{spec.hint}</span>" if spec.hint
      html += "  <span class=\"form--hint\">"
      html += "     (#{u.toArray(spec.type).join(', ')})"
      html += "  </span>"
      html += "  </p><p>"
      html += "  <input list=\"parameters-#{key}\""
      html += "         name=\"#{@nameFor(key)}\""
      html += "         value=\"#{escape(value)}\""
      html += "         class=\"parameters--input\" />"
      html +  "</p></label>"
    ).join('')

  escapeValues: ->
    @parametersTarget.querySelectorAll('.parameters--input').forEach (input) ->
      input.value = unescape(input.value)

window.application.register 'parameters', window.Parameters

(not using webpack/npm, I prefer the assets pipeline)

1 Like
Name : CRUDLFA+
Github repo : github.com/yourlabs/crudlfap (mirror of yourlabs.io/oss/crudlfap)
Link to demo app : https://repl.it/@jpic/crudlfap
Is it a project in production? : Yes
Comments: A material design & modern admin for Django
Owner: jpic
1 Like

Name: Hacker News Progressive Web App
Link to demo app: https://hnpwa.johnbeatty.co
Is it a project in production?: Yes!
Comments: Written up here - https://johnbeatty.co/2019/05/06/hnpwa-with-rails-and-stimulus-introduction/
Owner: Me, but MIT Licensed. Enjoy!

2 Likes
  1. Partial page rendering with CakePHP
  2. GitHub repo: https://github.com/nico-amsterdam/cakephp-stimulus-example1
  3. Link to Live app: https://cakephp-stimulusjs.herokuapp.com
  4. Is it a project in production? : It’s an example :smirk:
  5. Comments: See repo README.
  6. Owner: Me. MIT Licensed.
1 Like

Not really a “project”, just a gist that shows how I was able to get the HelloController example working in my Sinatra app without a build system but with a Babel transpilation step.

Stimulus/Sinatra

3 Likes

name: Stimulus.js Demo
Githugb repo: https://github.com/tbreuss/stimulus-demo
Link to live: https://stimulusjs.demo.tebe.ch/
Production: no
Comments: This is a simple multi page demo application (MPA) with pre-rendered HTML using Stimulus.js.

Hope it helps!

1 Like
  1. Name: Telepub
  2. Github: https://github.com/kinnrot/telepub
  3. production: no!
  4. Comments: Please share feedback, do you need this? would you help ?
    thanks!
2 Likes

Nice example. Did you know though that instead of declaring getters for your targets that you can just access them with this.nameTarget?

  1. Cart Example - Stimulus (Building the Same UI Three Modest Ways)
  2. Github repo : https://github.com/pascallaliberte/examples.modestjs.works/tree/master/cart/stimulus
  3. Link to Live app : https://cart-stimulus.modestjs.works
  4. Is it a project in production? : Demo only
  5. Comments: I built the same sample Shopping Cart app UI using three different ways. This example is for the Stimulus version, and there are two other versions done in vanilla JS and using spot view-models (vue.js). Detailed in the chapter called Building the Same UI Three Modest Ways of a book I wrote called Modest JS Works.
  6. Owner : https://github.com/pascallaliberte
2 Likes