[Resolved] registerFileUrl() register package.nls.[lang].json is ok, but l10n failed

[yswang0927]

I use registerExtension() to register my extension, how to config l10n and nls ?

vscode extension supports config l10n: './l10n' and package.nls.[lang].json, our monaco-vscode-api how to supports it?

import { ExtensionHostKind, registerExtension } from '@codingame/monaco-vscode-api/extensions'

const { getApi } = registerExtension(
  {
    name: 'tsml-extension',
    publisher: 'mycoder',
    version: '1.0.0',
    engines: {
      vscode: '*'
    },
    l10n: "./l10n"  # vscode extension config this, monaco-vscode-api supports it ?
  }
);

Thanks!

========= Success! Update =========

const { getApi, registerFileUrl } = registerExtension(
  {
    name: 'tsml-extension',
    publisher: 'mycoder',
    version: '1.0.0',
    browser: 'extension.js',  // 👈 Important to supports l10n
    l10n: './l10n',   // 👈
    engines: {
      vscode: '^1.100.0'
    },
    contributes: {
      commands: [
        {
          command: 'tsml.run',
          title: '%tsml.run.title%',  // 👈
          icon: '$(play)'
        },
        {
          command: 'tsml.newFile',
          title: '%tsml.newFile.title%',  // 👈
          icon: '$(new-file)'
        }
      ]
    }
  }
);

// Important to supports l10n
registerFileUrl('./extension.js', 'data:text/javascript;base64,' + window.btoa('// nothing'));  // 👈

registerFileUrl('package.nls.json', new URL('./package.nls.json', import.meta.url).href);
registerFileUrl('package.nls.zh-cn.json', new URL('./package.nls.zh-cn.json', import.meta.url).href);
registerFileUrl('./l10n/bundle.l10n.zh-cn.json', new URL('./l10n/bundle.l10n.zh-cn.json', import.meta.url).href);

void getApi().then(async (api) => {

   api.commands.registerCommand('tsml.newFile', (dirUri: vscode.Uri) => {
    api.window.showInputBox({
      placeHolder: api.l10n.t('Input tsml file name'),   // 👈
      ignoreFocusOut: true,
      validateInput: (value) => {
        if (!value || value.trim().length === 0) {
          return api.l10n.t('File name cannot be empty');  // 👈
        }
        if (value.includes('/') || value.includes('\\')) {
          return api.l10n.t('File name cannot contain path separators');  // 👈
        }
        return null;
      }
    }).then(async (name) => {
      // ...
    });

});

[CGNonofr]

It works the same way

The only difference is you have to register each file individually using the returned registerFileUrl function

[yswang0927]

It works the same way

The only difference is you have to register each file individually using the returned registerFileUrl function

Ok, I will try it, thank you!

[yswang0927]

I configured these:

const { getApi, registerFileUrl } = registerExtension(
  {
    name: 'tsml-extension',
    publisher: 'mycoder',
    version: '1.0.0',
    l10n: './l10n',          // 👈
    engines: {
      vscode: '^1.100.0'
    },
    contributes: {
      commands: [
        {
          command: 'tsml.run',
          title: '%tsml.run.title%',  // 👈
          icon: '$(play)'
        },
        {
          command: 'tsml.newFile',
          title: '%tsml.newFile.title%',  // 👈
          icon: '$(new-file)'
        }
      ]
    }
  }
);

// package.nls.[lang].json is ok  👈
registerFileUrl('package.nls.json', new URL('./package.nls.json', import.meta.url).href);
registerFileUrl('package.nls.zh-cn.json', new URL('./package.nls.zh-cn.json', import.meta.url).href);

// l10n failed  👈
registerFileUrl('./l10n/bundle.l10n.zh-cn.json', new URL('./l10n/bundle.l10n.zh-cn.json', import.meta.url).href);

void getApi().then(async (api) => {

   api.commands.registerCommand('tsml.newFile', (dirUri: vscode.Uri) => {
    api.window.showInputBox({
      placeHolder: vscode.l10n.t('Input tsml file name'),   // 👈
      ignoreFocusOut: true,
      validateInput: (value) => {
        if (!value || value.trim().length === 0) {
          return vscode.l10n.t('File name cannot be empty');  // 👈
        }
        if (value.includes('/') || value.includes('\\')) {
          return vscode.l10n.t('File name cannot contain path separators');  // 👈
        }
        return null;
      }
    }).then(async (name) => {
      // ...
    });

});

bundle.l10n.zh-cn.json

{
    "Input tsml file name": "输入 TSML 文件名",
    "File name cannot be empty": "文件名不能为空",
    "File name cannot contain path separators": "文件名不能包含路径分隔符"
}

package.nls.[lang].json is ok, but ./l10n/bundle.l10n.zh-cn.json has no effect.

[CGNonofr]

I'm not sure the bundles work for the local extension host 🤔 can you try running your extension in the worker extension host?

[yswang0927]

I'm not sure the bundles work for the local extension host 🤔 can you try running your extension in the worker extension host?

I changed to ExtensionHostKind.LocalWebWorker , but it still didn't work.

const { whenReady, registerFileUrl } = registerExtension({...}, ExtensionHostKind.LocalWebWorker);

registerFileUrl('package.nls.json', new URL('./package.nls.json', import.meta.url).href);
registerFileUrl('package.nls.zh-cn.json', new URL('./package.nls.zh-cn.json', import.meta.url).href);
registerFileUrl('./l10n/bundle.l10n.zh-cn.json', new URL('./l10n/bundle.l10n.zh-cn.json', import.meta.url).href);

await whenReady();

// .... some vscode.l10n.t('xxx')

[CGNonofr]

I mean, you should test it from the extension code itself: declare a browser field in the extension manifest, with referenced a valid commonjs file that runs vscode.l10n.t

[yswang0927]

I mean, you should test it from the extension code itself: declare a browser field in the extension manifest, with referenced a valid commonjs file that runs vscode.l10n.t

Success! Thank you!

Configuration as follows:

const { getApi, registerFileUrl } = registerExtension(
    {
        browser: 'extension.js',  // 👈
        l10n: './l10n',
        ...
    },
    ExtensionHostKind.LocalProcess
);

// and this
registerFileUrl('./extension.js', 'data:text/javascript;base64,' + window.btoa('// nothing'));  // 👈

registerFileUrl('package.nls.json', new URL('./package.nls.json', import.meta.url).href);
registerFileUrl('package.nls.zh-cn.json', new URL('./package.nls.zh-cn.json', import.meta.url).href);
registerFileUrl('./l10n/bundle.l10n.zh-cn.json', new URL('./l10n/bundle.l10n.zh-cn.json', import.meta.url).href);

void getApi().then(async (api) => { ... });