Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve localization experience of WebViews #206547

Open
ykawakamy opened this issue Feb 25, 2024 · 2 comments
Open

Improve localization experience of WebViews #206547

ykawakamy opened this issue Feb 25, 2024 · 2 comments
Assignees
@TylerLeonhardt
Labels
feature-request Request for new features or functionality l10n-platform Localization platform issues (not wrong translations)
Milestone
Backlog

Comments

@ykawakamy
Copy link

I progress to develoment webview-panel using react.
(see. https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/frameworks/hello-world-react-vite )

Couldn't work l10n.t() in react app.
I think that don't load l10n/bundle.l10n.xx.json.

Can I initialize l10n in react app with the same locale as extension?

--
sorry, i'm not good at English.
@ykawakamy
Copy link
Author

ykawakamy commented Feb 26, 2024 •
edited
Loading

solved it myself.

my solution.

    // in Webview on my extension
    const bundleUrl = webview.asWebviewUri(vscode.l10n.uri!);

    return /*html*/ `<!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        
        <!-- // connect-src important -->
        <meta http-equiv="Content-Security-Policy" 
          content="default-src 'none'; style-src ${webview.cspSource}; font-src ${webview.cspSource}; script-src 'nonce-${nonce}'; connect-src ${webview.cspSource};">
      </head>
      <body>
        <div id="root"></div>
        <!-- // pass bundleUri to scriptUri module.  -->
        <script nonce="${nonce}">
          const bundleUri="${bundleUrl}";
        </script>
        <script nonce="${nonce}" src="${scriptUri}"></script>
      </body>
      </html>`;
  }

// in scriptUri module(typescript)
import { createRoot } from "react-dom/client";
import * as  l10n from "@vscode/l10n";

declare const bundleUri: string;

export async function l10nInitalize(){
  await l10n.config({uri:bundleUri});
}

const container = document.getElementById('root')!;
const root = createRoot(container);
l10nInitalize().then(()=>{
  root.render(<App/>);
}, 
(e)=>{ console.error(e);}
);

Please let me know if there is another better way.

@TylerLeonhardt TylerLeonhardt transferred this issue from microsoft/vscode-l10n Feb 29, 2024
@TylerLeonhardt
Copy link
Member

Yeah this is the best solution for this at the moment. Ideally this is loaded for you automatically.

This is related to #170919 which uses WebViews.

@TylerLeonhardt TylerLeonhardt self-assigned this Feb 29, 2024
@TylerLeonhardt TylerLeonhardt changed the title Can i use l10n.t() in WebviewPanel+react Improve localization experience of WebViews Feb 29, 2024
@TylerLeonhardt TylerLeonhardt added feature-request Request for new features or functionality l10n-platform Localization platform issues (not wrong translations) labels Feb 29, 2024
@TylerLeonhardt TylerLeonhardt added this to the Backlog milestone Feb 29, 2024
@gjsjohnmurray gjsjohnmurray mentioned this issue Mar 8, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@TylerLeonhardt TylerLeonhardt

Labels
feature-request Request for new features or functionality l10n-platform Localization platform issues (not wrong translations)
Projects
None yet
Milestone
Backlog
Development

No branches or pull requests
2 participants
@TylerLeonhardt @ykawakamy