This are the steps I needed to do to add esbuild to an application that used the vanilla rails asset...
...set it on an tag's src attribute: $('img').attr('src', URL.createObjectURL(this.files[0])) Unpoly Compiler As an Unpoly compiler, it looks like this: up.compiler '[image_preview]', (element, img_selector...
...tag will either contain an existing image (rendered by Rails) or be overwritten by Unpoly with an image preview. Testing Here's a Cucumber step to check the existence of...
...event.preventDefault()) You may want to adapt this to the event listening mechanism you use (Unpoly's up.on, jQuery's .on, ...) and wrap the element selection into a compiler function...
...Register an event listener with delegation .on('click', selector, handlerFn) use a library like Unpoly Read an attribute .attr(name) .getAttribute(name) Write an attribute .attr(name, value) .setAttribute(name...
When your app also uses Unpoly you will find some utility functions for DOM manipulation and traversal in the up.element module. Further reading JavaScript without jQuery (presentation from...
...href: '/path', data: { method: 'delete', confirm: 'Really delete?' }} Label This compiles to: Label Example: Unpoly attributes You might also want to use this to define multiple Unpoly attributes, which are...
...We have another card: Webpack: How to split your bundles Webpack documentation: Code Splitting Unpoly: Loading large libraries on-demand
...message on click with an event listener like this is enough (implemented with an Unpoly compiler): up.compiler('[custom-dialog-abort]', (element) => { element.addEventListener('click', (event) => { event.preventDefault() window.parent.postMessage({ mceAction: 'close' }); }) })
...both objects into a new object literal: let merged = { ...a, ...b } When you have Unpoly let merged = up.util.merge(a, b) When you only have ES5 let merged = Object.assign({}, a, b...
...So I had to come up with my own. The Solution: I wrote an unpoly compiler that crawls the document and replaces all occurencies of certain word and puts a...
import 'brace/mode/html' import 'brace/theme/monokai' let editor = ace.edit(element) ... Full-fledged example for an Unpoly compiler that will improve your : import ace from 'brace' import 'brace/mode/html' import 'brace/theme/monokai' up.compiler('[html...
...useful to later select it from JavaScript or to update a fragment with an Unpoly. Haml lets you use square brackets ([]) to generate a unique class name and ID from...
The generated application now has a sleek, simple design based on Bootstrap Employing Unpoly New application model DSL shortcut crud for "create a model and a web UI with...
...params from a url. You can use this library (not tested): jquery-deparam Use Unpoly and the following code snippet
...this also works for any other hash attribute. Consider an Angular directive or an Unpoly compiler that is configured by several attributes. Usually you'd prefix them with the directive/compiler...
= gallery_form.submit Javascript Now to the dynamic part. I built it with an Unpoly compiler, but the code will work without as well. up.compiler '[gallery-form]', (element) -> imageTemplate = element.find...
...up responses for XHRs that want to load something else (like HTML views in Unpoly). Your actions should choose the response format via the respond_to method: def show # ...
...without leading slash. Make to employ the fix as noted above. If you use Unpoly you may also use up.util.parseUrl(), which implements the technique in this card with tests and...
...browsers will not execute Javascript for some combinations of modifiers. This was extracted from Unpoly...