I am starting this thread where we can post relevant examples of projects using Stimulus. Hopefully, this can help people get started with more curated list of examples. Also maybe we can extract out of it some common patterns and good practice to help us all.
For each project/example we post, I would like to suggest that we follow this template (all items being optional):
Name :
Github repo :
Link to Live app :
Is it a project in production? : Yes/No Demo only
Comments: features, pattern, good practice, Language, trick, performance etc… being demonstrated by this project
Owner / Hunter (you can hunt and post someone else project/repo that you find relevant to this thread)
Q/A and discussion around a project are welcome of course.
Comments:
A modest attempt to implement the famous TodoMVC with Rails/TurboLinks and Stimulus. This project has been very helpful for me to get up to speed with Stimulus but more generally with Turbolinks and Rails-ujs.
Todos are stored in the DB, so one of the feature demonstrated with the demo is the ability to Post message with Rails-ujs in a Stimulus controller and use Rails strong params in your controller.
Most actions are done client side with stimulus controller to get the real time feeling of client side UI. Adding a new todo is still done server side with a Turbolinks refresh (work in progress : potential solutions).
It uses two Controllers : todoList and todoItems. todoItem will send notifications to update to the main todoList controller. This part can probably be optimized when controller communication is fully part of Stimulus API (data-outlet?)
Owner / Hunter? : Owner (comments welcome, I am a modest developper)
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
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
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.
Open source production rails app since 2007 (!!), stimulus app since 2018
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
not great but this is my first stimulus controller:
name: parameters
repo: none
url: none
prod?: kind of but not really
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.)
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)
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
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.
