add browser demo

maxlath · maxlath · commit 803af445cb7c · 2024-03-11T13:39:04.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,6 @@
 node_modules
 config/local.js
 assets
+pnpm-lock.yaml
+browser-demo/wikibase-edit.js
 
diff --git a/browser-demo/README.md b/browser-demo/README.md
@@ -0,0 +1,9 @@
+# wikibase-edit browser demo
+
+To run wikibase-edit in the browser, you need a bundler. In this demo we use `esbuild` (see [`build.sh`](./build.sh)).
+```sh
+cd browser-demo
+./build.sh
+```
+
+You can then use a file server to serve the files in this directory and test wikibase-edit in the browser. Note that the edit will only work if the page is served under HTTPS.
diff --git a/browser-demo/build.sh b/browser-demo/build.sh
@@ -0,0 +1 @@
+esbuild ../lib/index.js --bundle --outfile=./wikibase-edit.js --format=esm
diff --git a/browser-demo/index.html b/browser-demo/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Test wikibase-edit in the browser</title>
+  <script type="module" src="./main.js" async></script>
+  <style>
+    input, button{
+      padding: 0.5em;
+      margin: 0.5em 0;
+    }
+  </style>
+</head>
+<body>
+  <h1>Test wikibase-edit in the browser</h1>
+  <label>
+    Add an English Alias to <a href="https://www.wikidata.org/entity/Q112795079">Wikidata Sandbox 4 : Q112795079</a>
+    <br>
+    <input id="text" type="text" placeholder="foo" />
+  </label>
+  <button>Add</button>
+  <pre id="response"></pre>
+</body>
+</html>
diff --git a/browser-demo/main.js b/browser-demo/main.js
@@ -0,0 +1,25 @@
+import WbEdit from './wikibase-edit.js'
+
+console.log('hillo')
+
+const wbEdit = WbEdit({
+  instance: 'https://www.wikidata.org',
+  credentials: {
+    browserSession: true,
+  },
+})
+
+document.addEventListener('click', async e => {
+  if (e.target.tagName === 'BUTTON' && document.getElementById('text').value) {
+    try {
+      const res = await wbEdit.alias.add({
+        id: 'Q112795079',
+        language: 'fr',
+        value: document.getElementById('text').value,
+      })
+      document.getElementById('response').innerText = JSON.stringify(res, null, 2)
+    } catch (err) {
+      document.getElementById('response').innerText = err.stack || err.toString()
+    }
+  }
+})
diff --git a/browser-demo/package.json b/browser-demo/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "browser-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "esbuild": "^0.20.1"
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+esbuild ../lib/index.js --bundle --outfile=./wikibase-edit.js --format=esm`