Skip to content

Commit 46b254c

Browse files
Scott DoverScott Dover
Scott Dover
authored and
Scott Dover
committed
chore: load translations statically
Signed-off-by: Scott Dover <[email protected]>
1 parent 0d927da commit 46b254c

File tree

5 files changed

+35
-49
lines changed

5 files changed

+35
-49
lines changed

‎client/src/panels/DataViewer.ts‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,15 @@ class DataViewer extends WebView {
3636
`script-src ${this.panel.webview.cspSource};`,
3737
`style-src ${this.panel.webview.cspSource};`,
3838
];
39+
const messages = {
40+
"Ascending (add to sorting)": l10n.t("Ascending (add to sorting)"),
41+
Ascending: l10n.t("Ascending"),
42+
"Descending (add to sorting)": l10n.t("Descending (add to sorting)"),
43+
Descending: l10n.t("Descending"),
44+
"Remove all sorting": l10n.t("Remove all sorting"),
45+
"Remove sorting": l10n.t("Remove sorting"),
46+
Sort: l10n.t("Sort"),
47+
};
3948
this.panel.webview.html = `
4049
<!DOCTYPE html>
4150
<html lang="en">
@@ -57,6 +66,7 @@ class DataViewer extends WebView {
5766
this._extensionUri,
5867
"DataViewer.js",
5968
)}"></script>
69+
<script type="application/json" id="l10n-messages">${JSON.stringify(messages)}</script>
6070
</body>
6171
</html>
6272
`;
@@ -95,23 +105,6 @@ class DataViewer extends WebView {
95105
data: await this._fetchColumns(),
96106
});
97107
break;
98-
case "request:loadMessages":
99-
this.panel.webview.postMessage({
100-
key: event.key,
101-
command: "response:loadMessages",
102-
data: {
103-
"Ascending (add to sorting)": l10n.t("Ascending (add to sorting)"),
104-
Ascending: l10n.t("Ascending"),
105-
"Descending (add to sorting)": l10n.t(
106-
"Descending (add to sorting)",
107-
),
108-
Descending: l10n.t("Descending"),
109-
"Remove all sorting": l10n.t("Remove all sorting"),
110-
"Remove sorting": l10n.t("Remove sorting"),
111-
Sort: l10n.t("Sort"),
112-
},
113-
});
114-
break;
115108
default:
116109
break;
117110
}

‎client/src/webview/ColumnMenu.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
import { AgColumn, ColumnState, GridApi } from "ag-grid-community";
44

55
import GridMenu from "./GridMenu";
6+
import localize from "./localize";
67

78
export interface ColumnMenuProps {
89
column: AgColumn;
910
dismissMenu: () => void;
1011
hasSort: boolean;
1112
left: number;
12-
messages?: Record<string, string>;
1313
removeAllSorting: () => void;
1414
removeFromSort: () => void;
1515
sortColumn: (direction: "asc" | "desc") => void;
@@ -85,17 +85,16 @@ const ColumnMenu = ({
8585
sortColumn,
8686
theme,
8787
top,
88-
messages: t,
8988
}: ColumnMenuProps) => {
9089
const menuItems = [
9190
{
92-
name: t.Sort,
91+
name: localize("Sort"),
9392
children: [
9493
{
9594
name:
9695
hasSort && !column.sort
97-
? t["Ascending (add to sorting)"]
98-
: t.Ascending,
96+
? localize("Ascending (add to sorting)")
97+
: localize("Ascending"),
9998
checked: column.sort === "asc",
10099
onPress: () => {
101100
sortColumn("asc");
@@ -105,8 +104,8 @@ const ColumnMenu = ({
105104
{
106105
name:
107106
hasSort && !column.sort
108-
? t["Descending (add to sorting)"]
109-
: t.Descending,
107+
? localize("Descending (add to sorting)")
108+
: localize("Descending"),
110109
checked: column.sort === "desc",
111110
onPress: () => {
112111
sortColumn("desc");
@@ -115,15 +114,15 @@ const ColumnMenu = ({
115114
},
116115
"separator",
117116
{
118-
name: t["Remove sorting"],
117+
name: localize("Remove sorting"),
119118
onPress: () => {
120119
removeFromSort();
121120
dismissMenu();
122121
},
123122
disabled: !hasSort || !column.sort,
124123
},
125124
{
126-
name: t["Remove all sorting"],
125+
name: localize("Remove all sorting"),
127126
onPress: () => {
128127
removeAllSorting();
129128
dismissMenu();

‎client/src/webview/DataViewer.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const DataViewer = () => {
3535
return "ag-theme-alpine-dark";
3636
}
3737
}, []);
38-
const { columns, onGridReady, columnMenu, messages, dismissMenu } =
38+
const { columns, onGridReady, columnMenu, dismissMenu } =
3939
useDataViewer(theme);
4040

4141
const handleKeydown = useCallback(
@@ -54,15 +54,13 @@ const DataViewer = () => {
5454
};
5555
}, [handleKeydown]);
5656

57-
if (columns.length === 0 || !messages) {
57+
if (columns.length === 0) {
5858
return null;
5959
}
6060

6161
return (
6262
<div className="data-viewer">
63-
{columnMenu && (
64-
<ColumnMenu theme={theme} messages={messages} {...columnMenu} />
65-
)}
63+
{columnMenu && <ColumnMenu {...columnMenu} />}
6664
<div
6765
className={`ag-grid-wrapper ${theme}`}
6866
style={gridStyles}

‎client/src/webview/localize.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
let localizedTerms = null;
2+
const localize = (term: string) => {
3+
if (!localizedTerms) {
4+
try {
5+
localizedTerms = JSON.parse(
6+
document.querySelector("#l10n-messages").textContent,
7+
);
8+
} catch (e) {}
9+
}
10+
return localizedTerms[term] ?? term;
11+
};
12+
13+
export default localize;

‎client/src/webview/useDataViewer.tsx‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -110,23 +110,6 @@ const useDataViewer = (theme: string) => {
110110
columnMenuRef.current = columnMenu;
111111
}, [columnMenu]);
112112

113-
const [messages, setMessages] = useState<
114-
Record<string, string> | undefined
115-
>();
116-
useEffect(() => {
117-
vscode.postMessage({ command: "request:loadMessages" });
118-
const loadMessages = (event) => {
119-
if (event.data.command === "response:loadMessages") {
120-
window.removeEventListener("message", loadMessages);
121-
}
122-
setMessages(event.data.data);
123-
};
124-
window.addEventListener("message", loadMessages);
125-
return () => {
126-
window.removeEventListener("message", loadMessages);
127-
};
128-
}, []);
129-
130113
const onGridReady = useCallback(
131114
(event: GridReadyEvent) => {
132115
const dataSource = {
@@ -195,7 +178,7 @@ const useDataViewer = (theme: string) => {
195178

196179
const dismissMenu = () => setColumnMenu(undefined);
197180

198-
return { columns, onGridReady, columnMenu, messages, dismissMenu };
181+
return { columns, onGridReady, columnMenu, dismissMenu };
199182
};
200183

201184
export default useDataViewer;

0 commit comments

Comments
 (0)