A set of PHP & JavaScript packages to solve every day frontend problems featuring Stimulus and Turbo.
$ composer require symfony/webpack-encore-bundle
$ npm install
$ npm run watch
Stimulus Controllers
templates/anything.html.twig
<div {{ stimulus_controller('markdown') }}>
<textarea
{{ stimulus_target('markdown', 'input') }}
>Writing JavaScript is a **dream** with Stimulus 🤩</textarea>
<button {{ stimulus_action('markdown', 'render') }}>
Convert
</button>
<div {{ stimulus_target('markdown', 'preview') }} ></div>
</div>
assets/controllers/markdown_controller.js
import { Controller } from '@hotwired/stimulus';
import snarkdown from 'snarkdown';
export default class extends Controller {
static targets = ['input', 'preview'];
render(event) {
const rendered = snarkdown(this.inputTarget.value);
this.previewTarget.innerHTML = rendered;
}
}
Components