jmas

Stimulus cheatsheet

• Website: https://stimulusjs.org/
• GitHub repo: https://github.com/stimulusjs/stimulus
• Handbook: https://stimulusjs.org/handbook/introduction
• Discourse: https://discourse.stimulusjs.org/

Lifecycle callbacks

• initialize: once, when the controller is first instantiated
• connect: anytime the controller is connected to the DOM

jmas

<my-list of="counters">
    <template>
        <my-counter index></my-counter>
    </template>
</my-list>

<p>
    <my-action on="click">
        <button data-action="addCounter">

jmas

Error classes

Can't parse

Broken JSON from backend.

General error

Contain errors._general key.

jmas

const edit = {
  initialState: null,
  actions: {
    edit: something => state => something
  },
  view: (state, dispatch, connect) => (
    <div>
      Editing: {JSON.stringify(state)}
      <button onClick={() => dispatch(edit.actions.edit({ name: 'Name!' }))}>Edit!</button>
    </div>

jmas

const actions = createActionCreators({
  createJob: (payload, actions) => async dispatch => {
    dispatch(actions.createJobRequest())
    const job = parseData(payload)
    try {
      const response = await api.jobs.create(job)
      const body = await response.json()
      if (response.status !== 200) {
        throw new Error('Something went wrong')
      }

jmas

import { h } from 'hyperapp';

export const BUTTON_VARIANT_PRIMARY = 'primary';
export const BUTTON_VARIANT_SECONDARY = 'secondary';
export const BUTTON_VARIANT_SUCCESS = 'success';
export const BUTTON_VARIANT_DANGER = 'danger';
export const BUTTON_VARIANT_WARNING = 'warning';
export const BUTTON_VARIANT_INFO = 'info';
export const BUTTON_VARIANT_LIGHT = 'light';
export const BUTTON_VARIANT_DARK = 'dark';

jmas

function processLoadingActions(loads, fails, successes, state, action) { 
  if (loads.indexOf(action.type) !== -1) {
    return { ...state, isLoading: true };
  }
  if (fails.indexOf(action.type) !== -1) {
    return { ...state, isLoading: false, error: action.error };
  }
  if (successes.indexOf(action.type) !== -1) {
    return { ...state, isLoading: false, payload: action.payload };
  }

jmas

1. Install NodeJS from https://nodejs.org/uk/ (apt-get, brew)
2. Should be shure that you have installed NPM
3. npm install -g create-react-app
4. create-react-app my-app
5. cd ./my-app

jmas

// utils

function listenMessage(fromWhat, handler) {
  fromWhat.addEventListener('message', ({data}) => {
      const {type, payload} = data;
      handler(type, payload);
  });
}

function createFrame({

jmas

const withState = ({
  initialState={},
  actions={},
  handleBeforeAction=null,
  handleAfterAction=null,
}) => Component => (
  class extends PureComponent {
    state = initalState,
    
    render() {