@api coverage for Magento 2 Javascript According to this forum thread from one of Magento 2’s architects, it sounds like Magento 2.2 is going to bring @api style coverage to Magento’s RequireJS module. This is a positive step in that it will clarify which javascript functions we can rely on working version to version. This is [...]
astormThis entry is part 11 of 13 in the series Magento 2 UI Components. Earlier posts include Magento 2: Introducing UI Components, Magento 2: Simplest UI Component, Magento 2: Simplest UI Knockout Component, Magento 2: Simplest XSD Valid UI Component, Magento 2: ES6 Template Literals, Magento 2: uiClass Data Features, Magento 2: UI Component [...]
astormWrapping up our uiElement defaults, we have the registerNodes defaults #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js defaults:{ /* ... */ registerNodes: true, /* ... */ } This is another node that you don’t need to worry too much about. Magento uses this to identify the uiElement objects in the [...]
astormTwo defaults you don’t need to worry too much about are the containers and _requested defaults. #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js defaults: { _requesetd: {}, containers: [], /* ... */ } These are just properties that Magento’s initializing using the uiElement’s defaults [...]
astormThe name and ns defaults #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js defaults: { /* ... */ name: '', ns: '${ $.name.split(".")[0] }', /* ... */ } are another pair of defaults that don’t make a lot of sense in the context of a traditional programming object system. Like the provider default, the name [...]
astormThe next two defaults we’ll blitz through are the provider and source defaults. #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js defaults:{ /* ... */ provider: '', /* ... */ source: null, /* ... */ } We’re starting to get into the defaults that are tricky to understand since they involve both a [...]
astormThe next uiElement default we’re going to talk about is the statefull default. Before we begin, let us bask is the programmer’s glory of the misspelling of “stateful” making it into a production release. The statefull default allows you to create a uiElement object with properties that will be automatically [...]
astormEarlier, we described the modules defaults for Magento uiElement javascript constructor functions. If you look at the uiElement definition, you’ll see there’s one modules default already configured for all uiElements #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js modules: { storage: '${ [...]
astormOne Magento uiElement default you don’t need to worry about is the maps default, seen here in uiElement’s source file #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js defaults:{ /* ... */ maps: { imports: {}, exports: {} }, /* ... */ } This isn’t a magic default, it’s just the uiElement [...]
astormContinuing in our informal series of quickies explaining the more magical defaults properties of Magento uiElement objects, today we’ll explore the modules default. The modules default allows you to link a property in your new object with an object in Magento’s uiRegistry via the registry’s “async” feature. [...]
astormThis entry is part 1 of 6 in the series Magento 2: uiElement Internals. Later posts include Magento 2: Javascript Primer for uiElement Internals, Tracing Javascript's Prototype Chain, Magento 2: uiElement Standard Library Primer, Magento 2: Using the uiClass Object Constructor, and Magento 2: uiClass Internals. I was chatting with Vinai [...]
astormThis entry is part 10 of 13 in the series Magento 2 UI Components. Earlier posts include Magento 2: Introducing UI Components, Magento 2: Simplest UI Component, Magento 2: Simplest UI Knockout Component, Magento 2: Simplest XSD Valid UI Component, Magento 2: ES6 Template Literals, Magento 2: uiClass Data Features, Magento 2: UI Component [...]
astormAnother quick post on another defaults entry for Magento’s uiElement javascript class/constructor function. Before we can talk about listens though, we’ll need to quickly review imports. In your Magento backend, navigate to the customer listing grid at Customers -> All Customers in Magento’s backend. Then, in your [...]
astormEvery uiElement based object has an observe method. This method allows you to turn any value into a Knockout.js observable. UiElement = requirejs('uiElement'); object = new UiElement; object.foo = 'bar'; object.observe('foo'); console.log(object.foo()); As you can see from the above, we’ve turned the foo property, formerly a [...]
astormWhen Magento 2 creates a new constructor functions based on the uiElements constructor functions, Magento 2 will often use a links default return Element.extend({ defaults: { /* ... */ links: { value: '${ $.provider }:${ $.dataScope }' } /* ... */ }, /* ... */ The links property looks similar to the imports and exports feature, in that [...]
astormHere’s a quick run down on the javascript involved in placing a Magento 2 order. Once again, specifics here are Magento 2.1.1 but concepts should apply across versions. If you need to get started with Magento’s javascript my Advanced Javascript and UI Components tutorial series are great places to start. Also, a lot of the [...]
astormThis one’s a long winding journey through all the javascript code involved when Magento updates the Shipping Rates section of the checkout application. The specifics here are Magento 2.1.1 – and I know for a fact there are some small differences in the 2.0.x branch w/r/t to how the validation listeners get setup. Concepts [...]
astormThis entry is part 9 of 13 in the series Magento 2 UI Components. Earlier posts include Magento 2: Introducing UI Components, Magento 2: Simplest UI Component, Magento 2: Simplest UI Knockout Component, Magento 2: Simplest XSD Valid UI Component, Magento 2: ES6 Template Literals, Magento 2: uiClass Data Features, Magento 2: UI Component [...]
astormThis is more pure KnockoutJS than it is Magento 2, but since I’m neck deep in KnockoutJS right now, a quickie it becomes. I wrote about observables over on alanstorm.com because they’re a pretty important part of KnockoutJS, and Magento’s RequireJS programs use them like they were candy. I didn’t mention [...]
astormThis entry is part 5 of 6 in the series Magento 2: Advanced Javascript. Earlier posts include Magento 2: Javascript Init Scripts, KnockoutJS Primer for Magento Developers, Magento 2: KnockoutJS Integration, and The Curious Case of Magento 2 Mixins. Later posts include Modifying a jQuery Widget in Magento 2. The concept of [...]
astorm