add browser-wasm example

repeat-space · Jan 25, 2020 · 5bc49fb · 5bc49fb
1 parent c24ce62
commit 5bc49fb
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 0 deletions.
diff --git a/examples/browser-wasm/.gitignore b/examples/browser-wasm/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+bundle.js
+sql-wasm.wasm
+yarn.lock
diff --git a/examples/browser-wasm/index.html b/examples/browser-wasm/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>anki-apkg-export demo</title>
+</head>
+<body>
+  <button id="buttonSimple">simple</button>
+  <button id="buttonAjax">ajax</button>
+  <input type="file" />
+
+  <script src="/bundle.js"></script>
+</body>
+</html>
diff --git a/examples/browser-wasm/index.js b/examples/browser-wasm/index.js
@@ -0,0 +1,59 @@
+import AnkiExport from 'anki-apkg-export';
+import { saveAs } from 'file-saver';
+import initSqlJs from 'sql.js';
+
+(async () => {
+  const sql = await initSqlJs();
+
+  document.querySelector('#buttonSimple').addEventListener('click', () => {
+    handleSimple(sql);
+  });
+
+  document.querySelector('#buttonAjax').addEventListener('click', () => {
+    handleAjax(sql);
+  });
+
+  document.querySelector('input').addEventListener('change', e => {
+    handleInput(sql, e.target.files[0]);
+  });
+})();
+
+async function handleSimple(sql) {
+  const apkg = new AnkiExport('deck-name', {}, sql);
+
+  apkg.addCard('card #1 front', 'card #1 back');
+  apkg.addCard('card #2 front', 'card #2 back');
+
+  const zip = await apkg.save();
+  saveAs(zip, 'output.apkg');
+}
+
+async function handleAjax(sql) {
+  const apkg = new AnkiExport('deck-name-ajax', {}, sql);
+
+  const response = await fetch('https://raw.githubusercontent.com/ewnd9/anki-apkg-export/39ebdd664ab23b5237eee95b7dd88c457e263a20/example/assets/anki.png');
+  const myBlob = await response.blob();
+
+  apkg.addMedia('anki.png', myBlob);
+  apkg.addCard('card #1 with image <img src="anki.png" />', 'card #1 back');
+
+  const zip = await apkg.save()
+  saveAs(zip, 'output.apkg');
+}
+
+async function handleInput(sql, file) {
+  const apkg = new AnkiExport('deck-name', {}, sql);
+  const reader = new FileReader();
+
+  reader.onload = async e => {
+    const file = e.target.result;
+
+    apkg.addMedia('anki.png', file);
+    apkg.addCard('card #1 with image <img src="anki.png" />', 'card #1 back');
+
+    const zip = await apkg.save()
+    saveAs(zip, 'output.apkg');
+  };
+
+  reader.readAsArrayBuffer(file);
+}
diff --git a/examples/browser-wasm/package.json b/examples/browser-wasm/package.json
@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "anki-apkg-export": "file:../../",
+    "file-saver": "^2.0.2"
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "^5.1.1",
+    "script-loader": "^0.7.2",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
+  }
+}
diff --git a/examples/browser-wasm/webpack.config.js b/examples/browser-wasm/webpack.config.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  entry: './index.js',
+  output: {
+    path: __dirname,
+    filename: 'bundle.js'
+  },
+  node: {
+    fs: 'empty'
+  },
+  plugins: [
+    new CopyPlugin([
+      { from: require.resolve('sql.js/dist/sql-wasm.wasm') },
+    ]),
+  ],
+};