jsnajdr

const globby = require( 'globby' );
const fs = require( 'fs' );

function list_dirs( glob ) {
	return globby.sync( glob, { onlyDirectories: true } );
}

const dirs = [ '.', './client', ...list_dirs( './apps/*' ), ...list_dirs( './packages/*' ) ];

function pkg_name( dir ) {

jsnajdr

Aligning the JavaScript Coding Standards With Prettier

Across the JavaScript community, the Prettier code formatter has become immensely popular over that last three years since it was originally released. It automatically performs high-quality formatting of your JavaScript code: when you press Save, your code is instantly formatted. This removes a distraction for contributors who write or review code, and allows them to focus on the more valuable aspects of their work without having to discuss the JavaScript WordPress Coding Standards so often. That's why we'd like to adopt it in the WordPress JavaScript code bases, too.

The official Prettier formatter is very opinionated and has very few options. The reasons are both technical and cultural. The complexity of the formatting algorithm would explode exponentially with too many options and their combinations, and a part of the project vision is to establish an unified JavaScript formattin

jsnajdr

Post Editor Redux

Post is a bag of attributes like title, content, metadata or terms. Some are primitive values, others are complex objects.

Post reducer data

The copy of the post saved on server is part of the common post state tree at state.posts.queries. In the UI code known as currentPost or savedPost.

Local edits are stored in state.posts.edits. Modified attributes only, diff from the saved post.

jsnajdr

Be aware of where your code goes

• which chunk does it live in?
• is it loaded only when it's needed?
• how large your libraries are?

Understand how code splitting works

Section chunks

• loaded during routing

jsnajdr

Anti-Patterns

• too many rerenders, mostly because of inefficient selectors
• computing something just to throw it away
• initializing everything during Calypso boot

Be aware how Redux update cycle works

• action dispatch calls reducer
• reducer produces a new state (almost always)

jsnajdr

Prettier and Calypso

• What is Prettier?
• How it works?
• Why is there a Calypso fork?
• How do I use it?
• Is the whole Calypso code base formatted?
• How do we ensure that formatted files remain formatted?

jsnajdr

/* eslint-disable no-console */
export default function transformer( file, api ) {
	const j = api.jscodeshift;
	const ReactUtils = require( 'react-codemod/transforms/utils/ReactUtils' )( j );
	const root = j( file.source );

	ReactUtils.findReactES6ClassDeclaration( root ).forEach( checkEventHandlers );

	function checkEventHandlers( classPath ) {
		// Find JSX attributes whose value is an expression container