Gutenberg block JavaScript localisation on Polyglots does not work

Question

I can successfully translate my plugin using wordpress.org for all php strings. Everything is fine. I can even see the strings that needs translation on https://translate.wordpress.org/projects/wp-plugins/simpletoc/stable/de/default/ In this case it is "Update table of contents":

https://plugins.trac.wordpress.org/browser/simpletoc/tags/1.8/build/index.js#L111

So I translated them and waited 24 hours. I could translate new php strings but still the JavaScript translations wont show up. And of course I downloaded the newest translations from wordpress.org =/

Here is the relevant php code

add_action('init', __NAMESPACE__ . '\\init');
add_action('init', __NAMESPACE__ . '\\register_block');

function init() {

    wp_register_script(
    'simpletoc',
    plugins_url('build/index.js', __FILE__),
    [ 'wp-i18n', 'wp-blocks', 'wp-editor', 'wp-element', 'wp-server-side-render'],
    filemtime(plugin_dir_path(__FILE__) . 'build/index.js')
    );

    wp_register_style(
    'simpletoc-editor',
    plugins_url('editor.css', __FILE__),
    array( 'wp-edit-blocks' ),
    filemtime(plugin_dir_path(__FILE__) . 'editor.css')
    );

        if (function_exists('wp_set_script_translations')) {
                /**
                 * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
                 * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
                 * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
                 */
                wp_set_script_translations('simpletoc-js', 'simpletoc');
        }

}

Here is the index.js

const { __ } = wp.i18n;
const el = wp.element.createElement;
const registerBlockType = wp.blocks.registerBlockType;
const BlockControls = wp.blockEditor.BlockControls;
const ServerSideRender = wp.serverSideRender;
const Toolbar = wp.components.Toolbar;
const IconButton = wp.components.Button;
const simpletocicon = wp.element.createElement('svg', { width: 20, height: 20 },
  el('path', {
    d: "M5.5 7C4.67 7 4 6.33 4 5.5 4 4.68 4.67 4 5.5 4 6.32 4 7 4.68 7 5.5 7 6.33 6.32 7 5.5 7zM8 5h9v1H8V5zm-2.5 7c-.83 0-1.5-.67-1.5-1.5C4 9.68 4.67 9 5.5 9c.82 0 1.5.68 1.5 1.5 0 .83-.68 1.5-1.5 1.5zM8 10h9v1H8v-1zm-2.5 7c-.83 0-1.5-.67-1.5-1.5 0-.82.67-1.5 1.5-1.5.82 0 1.5.68 1.5 1.5 0 .83-.68 1.5-1.5 1.5zM8 15h9v1H8v-1z"
  })
);

function sendfakeAttribute(props) {
  // this acuallty triggers the ServerSideRender again ¯\_(ツ)_/¯
  props.setAttributes({ updated: Date.now()});
}

registerBlockType('simpletoc/toc', {
  title: __('SimpleTOC', 'simpletoc'),
  icon: simpletocicon,
  category: 'layout',
  edit: function(props) {
    return [
      el(
        BlockControls, { key: 'controls' },
        el( Toolbar, null,
          el(
            IconButton, {
              className: 'components-icon-button components-toolbar__control',
              label: __('Update table of contents', 'simpletoc'),
              onClick: function() {
                sendfakeAttribute(props)
              },
              icon: 'update'
            }
          )
        )
      ),
      el(
        'p', { className: props.className },
        el(
          ServerSideRender, {
            block: props.name,
            attributes: props.attributes
          }
        )
      )
    ];
  },
  save: props => {
    return null;
  },
});

The whole plugin can be found here: https://github.com/mtoensing/simpletoc

Any idea why this label: __('Update table of contents', 'simpletoc'), gets not translated but everything php does?

Answer 1

The first argument $handle of wp_set_script_translations() expects the script handle the text domain will be attached to. In your case it's simpletoc and not simpletoc-js.
The correct call would be:

wp_set_script_translations( 'simpletoc', 'simpletoc' );

Another note: wp_set_script_translations() is available since WordPress 5.0 thus the function_exists() check isn't necessary.