Can save 1.2kb per bundle through tree shaking

[kadamwhite]

When working on a single-file bundle, we identified today that the HMR scaffolding cost about 1.19kb which remains in the production build if following the README verbatim. None of the HMR code is needed in a non-hotloading environment, so switching from this:

import { autoloadBlocks } from '@humanmade/webpack-helpers/hmr';

autoloadBlocks(
	{
		getContext: () => require.context( './', false, /block.js/ ),
	},
	( context, loadModules ) => {
		if ( module.hot ) {
			module.hot.accept( context.id, loadModules );
		}
	}
);

to this:

import { registerBlockType } from '@wordpress/blocks';

import blockSettings from './block';

if ( ! module.hot ) {
	registerBlockType( blockSettings );
} else {
	require( '@humanmade/webpack-helpers/hmr' ).autoloadBlocks(
		{
			getContext: () => require.context( './', false, /block.js/ ),
		},
		( context, loadModules ) => {
			if ( module.hot ) {
				module.hot.accept( context.id, loadModules );
			}
		}
	);
}

results (in our test app) in 1.19kb less code per output bundle. Particularly when setting up a plugin which registers individual scripts per-block, that dead weight code will add up.

The example above only works with a single file, but we could potentially expose different top-level functions in hot mode versus normal mode to achieve the same result for multi-block bundles.

The core library could possibly be changed to alter what gets output in a non-HMR space.

[kadamwhite]

The best boilerplate I've been able to slim down using the library as-is:

block-hmr.js

import * as hmr from 'block-editor-hmr';
​
/**
 * Export structure expected by block-editor-hmr library.
 * @typedef {object} BlockModule
 * @property {string} name     Name of block
 * @property {object} settings Block settings object
 */
​
/**
 * Convert normal block object to BlockModule format expected by the
 * block-editor-hmr helper library. Used as a compatibility shim until
 * HMR library is updated to not expect a { name, settings } export.
 *
 * @param {object} block      Block definition object.
 * @param {string} block.name Block name.
 * @returns {?BlockModule} Block module-formatted block.
 */
const toBlockModule = ( block ) => ( {
	name: block.name,
	settings: block,
} );
​
/**
 * Orchestrate the swap from an old block module to the new one, for a singular
 * individual block.
 *
 * Attempts to further abstract this resulted in non-operable HMR.
 *
 * @param {object|BlockModule} block    New block being accepted
 * @param {object|BlockModule} oldBlock Block being replaced
 * @returns {BlockModule} New block
 */
export function updateBlock( block, oldBlock ) {
	if ( ! oldBlock ) {
		hmr.registerBlock( toBlockModule( block ) );
		return block;
	}
	hmr.beforeUpdateBlocks();
	hmr.unregisterBlock( toBlockModule( oldBlock ) );
	hmr.registerBlock( toBlockModule( block ) );
	hmr.afterUpdateBlocks( [ oldBlock, block ].map( toBlockModule ).filter( Boolean ) );
	return block;
}

Each block file

import { registerBlockType } from '@wordpress/blocks';

import metadata from './block.json';
import EditBlock from './EditBlock';
import SaveBlock from './SaveBlock';

const block = {
    ...metadata,
    edit: EditBlock,
    save: SaveBlock,
};

// Registration boilerplate
if ( module.hot ) {
    const { updateBlock } = require( '../block-hmr' );
    const registeredBlock = updateBlock( block, module.hot.data?.value );
    module.hot.dispose( ( data ) => {
        data.value = block;
    }
    module.hot.accept();
} else {
    registerBlockType( block );
}

See

• HMR docs on accept (self)
• HMR docs on dispose