The attached compiler() function below applies JavaScript behavior to matching HTML elements as they enter the DOM. This works like an Unpoly compiler for apps that don't use Unpoly...
...Custom Elements or any other mechanism that pairs JavaScript with HTML elements. The compiler() function is also a lightweight replacement for our legacy $.unobtrusive() helper (no jQuery required).
Quick reference for passing data from Rails to JavaScript via Unpoly compilers. Haml Attribute Syntax # Ising hash rockets and string symbols (method calls) = form.text_field :name, 'date-picker': true
Compiling Sass is probably the slowest part of your build, so this is worth a try if you're using Sass. If you're using the sass npm package...
...to compile your SASS/SCSS, consider switching to sass-embedded. It should be a drop-in replacement in a large app and it's around 50% faster than using the deprecated...
Quick guide for frequently used compiler selector patterns of Unpoly. 1. BEM Component Pattern When: Reusable UI components with multiple child elements Examples: toggleable.js, collapsible.js, searchable_select.js up.compiler('.toggleable', (toggleable) => {
...to single element, attribute clutter, no nesting convention See Unpoly: Passing Data to Unpoly Compilers for detailed guide on passing configuration data 4. Generic Element Pattern When: Universal enhancements for...
Usually, Unpoly compiler destructors are returned from the compiler function. However, when using async compiler functions, you can not register destructors via return. This will not work: up.compiler('my-example...
Remember How to skip Sprockets asset compile during Capistrano deployment and Automatically skipping asset compilation when assets have not changed? Turns out there is an even better way to speed...
...up Capistrano deployments with asset compilation – and it's even simpler. Adding the asset cache directory to symlinked directories Popular asset managers for Rails are Sprockets and Webpacker. Both keep...
...We're using it in our latest Rails applications. For tests, we want to compile assets like for production. For parallel tests, we want to avoid 8 workers compiling the...
When assets did not change, we do not want to spend time compiling them. Here is our solution for all that. Its concept should work for all test...
Webpack builds can take a long time, so we only want to compile when needed. This card shows what will cause Webpacker (the Rails/Webpack integration) to compile your assets.
...it is recommended to boot a webpack dev server using bin/webpack-dev-server. The dev server compiles once when booted. When you access your page on localhost before the initial compilation, the...
Use the compile function to change the original DOM (template element) before AngularJS creates an instance of it and before a scope is created. Use the pre-link function to...
...implement logic that runs when AngularJS has already compiled the child elements, but before any of the child element's post-link functions have been called. Use the post-link...
...OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through...
...This significantly speeds up installation of the gem, as Nokogiri no longer needs to compile libxml2. However, this also means that for each security issue with libxml2, Nokogiri maintainers have...
...libraries because of that. # Quick check Nokogiri::VersionInfo.instance.libxml2_using_system? Instructions Nokogiri can compile its C extensions against system libraries, but if any matching pre-built binaries are available...
For applications coming with lots of stylesheets and scripts, asset compilation might take quite long. This can be annoying when deploying a release that does not actually change assets.
...your app uses Sprockets, you can simply skip asset compilation and re-use the previous release's assets. [1] That is especially easy via Capistrano. Capistrano will automatically symlink your...
...target attribute may be fetched from the database/your record. This results in the following compiler (when using Unpoly): import StreetMap from 'street_map' up.compiler('.map', function(map) { let targetLocation = map.getAttr...
...and why we used modules in the first place. We "copy" (parts of) the compiler function by creating a new StreetMap instead of using the existing instance of our map...
...a common example: Clear Search The HTML above is being activated with an Unpoly compiler like this: up.compiler('[filter]', function(filterForm) { const resetButton = filterForm.querySelector('[filter--reset]') const queryInput = filterForm.querySelector('[filter...
...will announce it as a "button" when focused: Clear Search Now change your Unpoly compiler to activate the button on keydown in addition to click: up.compiler('[filter]', function(filterForm) {
...basically uses structural typing, which is conceptually quite similar to duck typing, but with static compile-time type checking. We'll explore what this means in practice. TypeScript is a...
...superset of JavaScript, meaning TypeScript compiles down to native JavaScript syntax and checks type consistency only at compile time. Idea of Structural Typing TypeScript only wants to know whether the...
var player = flowplayer($element) player.play() Framework activation layers (like Angular directives, Unpoly compilers, React components, $.unobtrusive()) are all layer 3. It's simpler to just have one layer...
...In the future library developers will no longer ship JavaScript as Angular directives, Unpoly compilers or anything framework-specific. It will all be Custom Elements. Custom elements let you teach...
...your code aware of feature-flags For this example we will use an Unpoly compiler to build a [poll] attribute. This attribute causes an element to be reloaded from the...
%button(file-input-clear) Clear file Now we can the define an Unpoly compiler (or any other UJS mechanism) to look for a file-input attribute and run code...
...is easily doable by using the asynchronous import function. Say we have an unpoly compiler that sets up TinyMCE like this (code is somewhat simplified): // TinyMCE as part of the...
...AJAX, and resolve a promise as soon as the JavaScript has been loaded. The compiler above can thus be rewritten like this: // TinyMCE is a separate bundle! import 'tinymce/skins/ui/oxide/skin.min.css' // CSS...
...functions with the right HTML elements. Some common ways to do this are: Our compiler() helper Unpoly compilers Custom Elements MutationObserver AngularJS directives React components We recommend using the compiler...
Count items Now make a component for the container instead of the button: compiler('.countable', function(countable) { const button = ... const items = ... button.addEventListener('click', ...) }) Spoilers Add an optional "plot summary...
Unpoly's [up-observe], [up-autosubmit] and [up-validate] as well as their programmatic variants up.observe() and up.autosubmit...
Webpack(er): Serving identical assets from all servers. Capistrano: Speeding up asset compile during deploy . Only compiling production packs on the server Asset compilation takes quite some time...
...and slows down deployments. Let's only compile packs that are relevant, then. No need for specs and other development packs on the servers. Create a directory "packs_production" right...
This card describes four variants, that add a more intuitive workflow when working with nested attributes in Rails + Unpoly:
...wider adaption instead of building yet another ZIP upload form. Below is a simple compiler that i used to evaluate this feature. %button(up-folder-upload) %span Select Folder to...