MailPoet.

MailPoet done the right way.

Install.

• Install system dependencies:

php
nodejs
wordpress

• Clone the repo in wp-content/plugins.

• Install composer.

$ curl -sS https://getcomposer.org/installer | php
$ ./composer.phar install

• Install dependencies.

$ ./do install

• Update dependencies when needed.

$ ./do update

• Copy .env.sample to .env.

$ cp .env.sample .env

• Compile assets.

$ ./do compile:all

Tests.

• Unit tests (using verify):

$ ./do test:unit

• Debug tests:

$ ./do test:debug

CSS

• Stylus
• Nib extension

assets/css/src -> place your *.styl files here

Watch for changes and recompile

$ ./do watch

Module loading and organization

Our JS modules are stored in assets/js/ folder. Modules should follow AMD module definition style:

define('moduleName', ['dependency1', 'dependency2'], function(dependency1, dependency2){
  // Module code here

  return {
    // Module exports here
  };
})

Module loader will look for dependency1 in node_modules/ dependencies, as well as in assets/js. So you can use dependencies, defined in package.json, without the need of providing an absolute path to it. Once found, dependencies will be injected into your module via function arguments.

When it comes to loading modules on a real page, WebPack uses "entry points" to create different bundles. In order for the module to be included in a specific bundle, it must be reachable from that bundle's entry point. A good example on WebPack's website.

Once javascript is compiled with ./do compile:javascript, your module will be placed into a bundle. Including that bundle in a webpage will give provide you access to your module.

Handlebars (views/*.hbs)

<!-- use the `templates` block -->
<% block templates %>
  <!-- include a .hbs template -->
  <%= partial('my_template_1', 'form/templates/toolbar/fields.hbs') %>

  <!-- include a .hbs template and register it as a partial -->
  <%= partial('my_template_2', 'form/templates/blocks.hbs', '_my_partial') %>

  <!-- custom partial using partial defined above -->
  <script id="my_template_3" type="text/x-handlebars-template">
    {{> _my_partial }}
  </script>
<% endblock %>

i18n

• Use the regular WordPress functions in PHP and Twig:

__()
_n()

<p>
  <%= __('Click %shere%s!') | format('<a href="#">', '</a>') | raw %>
</p>

<p>
  <%= _n('deleted %d message', 'deleted %d messages', count) | format(count) %>
  <!-- count === 1 -> "deleted 1 message" -->
  <!-- count > 1 -> "deleted $count messages" -->
</p>

• Handlebars.

You can use Twig i18n functions in Handlebars, just load your template from a Twig view.