feature: example app

halimath · halimath · commit 6922f5600244 · 2021-05-01T19:48:23.000+02:00
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,12 @@
+# i18n Example
+
+This directory contains a very simple web application that renders a welcome message
+based on messages loaded from JSON files via `fetch`.
+
+The example demonstrates how to bootstrap a SPA after messages have been loaded.
+
+The file [`i18n.js`](./i18n.js) contains a typical setup. It exports a function
+`m` which simply delegates to `MessageResolver.m` (in a real world setup also create
+a function `mpl` that delegates to `MessageResolver.mpl`). It also exports a 
+`Promise` which is used to delay the application initialization to ensure, that 
+all messages have been loaded.
diff --git a/example/i18n.js b/example/i18n.js
@@ -0,0 +1,8 @@
+import * as i18n from "../weccoframework-i18n.es5.js"
+
+let messageResolver
+
+export const loadingPromise = i18n.MessageResolver.create(new i18n.JsonMessageLoader(i18n.fetchJsonSource("./messages")))
+    .then(mr => messageResolver = mr)
+
+export const m = (key, ...args) => messageResolver.m(key, ...args)
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>i18n example</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="index.js"></script>
+    </body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,10 @@
+"use strict"
+
+import { m, loadingPromise } from "./i18n.js"
+
+document.addEventListener("DOMContentLoaded", async () => {
+    await loadingPromise
+
+    const h1 = document.querySelector("#app").appendChild(document.createElement("h1"))
+    h1.innerText = m("greeting")
+})
diff --git a/example/messages/de.json b/example/messages/de.json
@@ -0,0 +1,3 @@
+{
+    "greeting": "hallo, Welt"
+}
diff --git a/example/messages/default.json b/example/messages/default.json
@@ -0,0 +1,3 @@
+{
+    "greeting": "hello, world"
+}
diff --git a/example/weccoframework-i18n.es5.js b/example/weccoframework-i18n.es5.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "greeting": "hallo, Welt"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "greeting": "hello, world"`
	`3`	`+}`