add lit-html and render component with new API

opral · Mar 20, 2024 · 25e4591 · 25e4591
1 parent 41fc62b
commit 25e4591
Showing 1 changed file with 40 additions and 28 deletions.
diff --git a/inlang/source-code/ide-extension/src/utilities/settings/settingsView.ts b/inlang/source-code/ide-extension/src/utilities/settings/settingsView.ts
@@ -22,36 +22,48 @@ function getWebviewContent(args: {
 	context: vscode.ExtensionContext
 	webview: vscode.Webview
 }): string {
-	const scriptUri = args.webview.asWebviewUri(
-		vscode.Uri.joinPath(
-			args.context.extensionUri,
-			"node_modules",
-			"@inlang",
-			"settings-component",
-			"dist",
-			"index.mjs"
+    const scriptUri = args.webview.asWebviewUri(
+			vscode.Uri.joinPath(
+				args.context.extensionUri,
+				"node_modules",
+				"@inlang",
+				"settings-component",
+				"dist",
+				"index.mjs"
+			)
 		)
-	)
 
-	return `<!DOCTYPE html>
-            <html lang="en">
-            <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>Settings</title>
-            </head>
-            <body>
-                <inlang-settings settings=${JSON.stringify(
-									state().project.settings()
-								)}></inlang-settings>
-                <script type="module" src="${scriptUri}"></script>
-				<script>
-					document.querySelector('inlang-settings').addEventListener('onSetSettings', (settings) => {
-						console.log("save", settings);
-					});
-				</script>
-            </body>
-            </html>`
+		const litHtmlUri = args.webview.asWebviewUri(
+			vscode.Uri.joinPath(args.context.extensionUri, "node_modules", "lit-html", "lit-html.js")
+		)
+
+		const project = state().project
+
+		return `<!DOCTYPE html>
+				<html lang="en">
+					<head>
+						<meta charset="UTF-8">
+						<meta name="viewport" content="width=device-width, initial-scale=1.0">
+						<title>Settings</title>
+						<script type="module" src="${litHtmlUri}"></script>
+						<script type="module" src="${scriptUri}"></script>
+					</head>
+					<body>
+						<div id="settings-container"></div>
+						<script type="module">
+							import {html, render} from '${litHtmlUri}';
+							const settingsContainer = document.getElementById('settings-container');
+							const settingsTemplate = html\`
+								<inlang-settings .project=${project}></inlang-settings>
+							\`;
+							render(settingsTemplate, settingsContainer);
+
+							document.querySelector('inlang-settings').addEventListener('onSetSettings', (settings) => {
+								console.log("save", settings);
+							});
+						</script>
+					</body>
+				</html>`
 }
 
 export async function settingsView(args: { context: vscode.ExtensionContext }) {