How to internationalize javascript with import modules dynamically using the import() function?

sage
, ,
1

Previously I could internationalize javascript with sage 10.0.0-beta.1 and Log1x/acf-composer 2.0：

# app/Blocks/Example.php

<?php

namespace App\Blocks;

use Log1x\AcfComposer\Block;
use Roots\Acorn\Application;
use StoutLogic\AcfBuilder\FieldsBuilder;
use function Roots\asset;

class Example extends Block {

...

	/**
	 * Assets to be enqueued when rendering the block.
	 *
	 * @return void
	 */
	public function enqueue()
	{

		wp_enqueue_script(
			'example',
			asset('scripts/example.js')->uri(),
			['wp-i18n']
		);
		wp_set_script_translations(
			'example',
			'sage',
			get_template_directory() . '/resources/lang'
		);
	}
}

# webpack.mix.js

...

mix
  .js('resources/scripts/app.js', 'scripts')
  .js('resources/scripts/customizer.js', 'scripts')
  .js('resources/scripts/example.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({ jquery: ['$', 'window.jQuery'] })
  .extract();

...

# resources/scripts/example.js

import { __ } from '@wordpress/i18n';

document.addEventListener('DOMContentLoaded', function() {
 
  const __ = wp.i18n.__

  alert( __( 'Hello!', 'sage' ) )

}

# resources/lang/sage-ja-example.json

{
  "translation-revision-date": "2021-07-17 10:34+0800",
  "generator": "WP-CLI\/2.4.0",
  "source": "resources\/scripts\/example.js",
  "domain": "messages",
  "locale_data": {
    "messages": {
      "": {
        "domain": "messages",
        "lang": "ja",
        "plural-forms": "nplurals=1; plural=0;"
      },
      "Hello!": [
        "\u3053\u3093\u306b\u3061\u306f\uff01"
      ]
    }
  }
}

I am trying to upgrade to sage 10 v10.8.1, and import modules dynamically using the import() function. However internationalize javascript can’t work:

# app/Blocks/Example.php

<?php

namespace App\Blocks;

use Log1x\AcfComposer\Block;
use Roots\Acorn\Application;
use StoutLogic\AcfBuilder\FieldsBuilder;
use function Roots\asset;

class Example extends Block {

...

	/**
	 * Assets to be enqueued when rendering the block.
	 *
	 * @return void
	 */
	public function enqueue()
	{

		// wp_enqueue_script(
		//	'example',
		//	asset('scripts/example.js')->uri(),
		//	['wp-i18n']
		//);
		wp_set_script_translations(
			'example',
			'sage',
			get_template_directory() . '/resources/lang'
		);
	}
}

# bud.config.js

export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/reference/bud.entry}
   * @see {@link https://bud.js.org/reference/bud.assets}
   */
  app
    .entry({
      app: {
        import: ["@scripts/app", "@styles/app"],
      },
    })
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

...

# resources/scripts/app.js

import domReady from '@roots/sage/client/dom-ready';

...

/**
 * Application entrypoint
 */
domReady(async (err) => {
  // ...
  if (err) {
    console.error(err);
  }

  const app = async () => {
    if (document.querySelector('.example')) {
      const { example } = await import('./example.js');
      example();
    }

...

# resources/scripts/example.js

import { __ } from '@wordpress/i18n';

export const example = async (err) => {
  if (err) {
    console.error(err);
  }
 
  const __ = wp.i18n.__

  alert( __( 'Hello!', 'sage' ) )

}

# resources/lang/sage-ja-example.json

{
  "translation-revision-date": "2022-01-14 16:27+08000",
  "generator": "WP-CLI\/2.9.0",
  "source": "resources\/scripts\/example.js",
  "domain": "messages",
  "locale_data": {
    "messages": {
      "": {
        "domain": "messages",
        "lang": "ja",
        "plural-forms": "nplurals=1; plural=0;"
      },
      "Hello!": [
        "\u3053\u3093\u306b\u3061\u306f\uff01"
      ]
    }
  }
}

Would be great if you could give me some hints to point me in the right direction.

Thanks in advance!

2

Acorn v4 supports setting wp_set_script_translations:

bundle('app')->translate('sage', get_template_directory() . '/resources/lang/')

3

It still can’t work even if without import modules dynamically using the import() function:

# app/Blocks/Example.php
<?php

namespace App\Blocks;

use Log1x\AcfComposer\Block;
use Log1x\AcfComposer\AcfComposer;
use Log1x\AcfComposer\Builder;
use function Roots\bundle;

class Example extends Block
{
  ...
    /**
     * Assets to be enqueued when rendering the block.
     *
     * @return void
     */
    public function assets($block)
    {
        bundle('example')->enqueue();
        bundle('example')->translate('sage', get_template_directory() . '/resources/lang/');
    }
...
}

# bud.config.js

export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/reference/bud.entry}
   * @see {@link https://bud.js.org/reference/bud.assets}
   */
  app
    .entry({
      app: ["@scripts/app", "@styles/app"],
      example: ["@scripts/example", "@styles/example"],
    })
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

...

# resources/scripts/app.js

import domReady from '@roots/sage/client/dom-ready';

...

/**
 * Application entrypoint
 */
domReady(async (err) => {
  // ...
  // if (err) {
  //   console.error(err);
  // }

  // const app = async () => {
    // if (document.querySelector('.example')) {
    //   const { example } = await import('./example.js');
    //   example();
    // }

...

# resources/scripts/example.js

import { __ } from '@wordpress/i18n';

// export const example = async (err) => {
//  if (err) {
//    console.error(err);
//  }
document.addEventListener('DOMContentLoaded', function() { 
  const __ = wp.i18n.__

  alert( __( 'Hello!', 'sage' ) )

});

# resources/lang/sage-ja-example.json

{
  "translation-revision-date": "2022-01-14 16:27+08000",
  "generator": "WP-CLI\/2.9.0",
  "source": "resources\/scripts\/example.js",
  "domain": "messages",
  "locale_data": {
    "messages": {
      "": {
        "domain": "messages",
        "lang": "ja",
        "plural-forms": "nplurals=1; plural=0;"
      },
      "Hello!": [
        "\u3053\u3093\u306b\u3061\u306f\uff01"
      ]
    }
  }
}

It only work with these functions of wordpress core:

# app/Blocks/Example.php
<?php

namespace App\Blocks;

use Log1x\AcfComposer\Block;
use Log1x\AcfComposer\AcfComposer;
use Log1x\AcfComposer\Builder;
// use function Roots\bundle;
// use function Roots\asset;

class Example extends Block
{
  ...
    /**
     * Assets to be enqueued when rendering the block.
     *
     * @return void
     */
    public function assets($block)
    {
      wp_enqueue_script(
        'example',
        asset('example.js'),
        'wp-i18n']
      );
      wp_set_script_translations(
        'example',
        'sage',
        get_template_directory() . '/resources/lang'
      );
      wp_enqueue_style(
        'example',
        asset('example.css'),
        false,
        null
     );
   }
...
}

Am I missing something here? I using Acorn v4.0.3, Sage v10.8.2, ACF Composer v3.

Thanks again for both y’alls support and workaround so far. Really appreciate it.