repeat-space · ewnd9 · Jan 25, 2020 · Jan 25, 2020 · Jan 25, 2020 · Jan 25, 2020
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
-/node_modules/
-/dist/
+node_modules/
+dist/
 *.log
-play.js
diff --git a/.npmignore b/.npmignore
diff --git a/README.md b/README.md
@@ -8,99 +8,45 @@ Port of the Ruby gem https://github.com/albertzak/anki2
 
 ## Install
 
-```
+```sh
 $ npm install anki-apkg-export --save
+# or
+$ yarn add anki-apkg-export
 ```
 
 ## Usage
 
-### server
-
 ```js
 const fs = require('fs');
-const AnkiExport = require('anki-apkg-export').default;
-
-const apkg = new AnkiExport('deck-name');
-
-apkg.addMedia('anki.png', fs.readFileSync('anki.png'));
-
-apkg.addCard('card #1 front', 'card #1 back');
-apkg.addCard('card #2 front', 'card #2 back', { tags: ['nice', 'better card'] });
-apkg.addCard('card #3 with image <img src="anki.png" />', 'card #3 back');
-
-apkg
-  .save()
-  .then(zip => {
-    fs.writeFileSync('./output.apkg', zip, 'binary');
-    console.log(`Package has been generated: output.pkg`);
-  })
-  .catch(err => console.log(err.stack || err));
-```
-
-### browser
+const initSqlJs = require('sql.js');
+const { default: AnkiExport } = require('anki-apkg-export');
 
-Intended to be used with [`webpack`](https://github.com/webpack/webpack)
-
-```js
-const webpack = require('webpack');
-
-module.exports = {
-  entry: './index.js',
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel'
-      },
-    ]
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
-      },
-    })
-  ],
-  output: {
-    path: __dirname,
-    filename: 'bundle.js'
-  }
-};
-```
-
-Required loaders:
-
-- [`script-loader`](https://github.com/webpack/script-loader)
-
-```js
-import { saveAs } from 'file-saver';
-import AnkiExport from 'anki-apkg-export';
+(async () => {
+  const sql = await initSqlJs();
+  const apkg = new AnkiExport({
+    deckName: 'deck-name-node',
+    template: {},
+    sql
+  });
 
-const apkg = new AnkiExport('deck-name');
+  apkg.addMedia('anki.png', fs.readFileSync('../assets/anki.png'));
 
-// could be a File from <input /> or a Blob from fetch
-// take a look at the example folder for a complete overview
-apkg.addMedia('anki.png', file);
+  apkg.addCard('card #1 front', 'card #1 back');
+  apkg.addCard('card #2 front', 'card #2 back');
+  apkg.addCard('card #3 with image <img src="anki.png" />', 'card #3 back');
 
-apkg.addCard('card #1 front', 'card #1 back');
-apkg.addCard('card #2 front', 'card #2 back', { tags: ['nice', 'better card'] });
-apkg.addCard('card #3 with image <img src="anki.png" />', 'card #3 back');
+  const zip = await apkg.save();
 
-apkg
-  .save()
-  .then(zip => {
-    saveAs(zip, 'output.apkg');
-  })
-  .catch(err => console.log(err.stack || err));
+  fs.writeFileSync('./output.apkg', zip, 'binary');
+  console.log(`Package has been generated: output.apkg`);
+})();
 ```
 
 ## Examples
 
-- [server from above](examples/server)
-- [browser from above](examples/browser)
-- [browser usage with media attachments via ajax](examples/browser-media-ajax)
-- [browser usage with media attachments via <form />](examples/browser-media-file-input)
+- [Node.js](examples/server)
+- [Browser/webpack/asm, with ajax and input media attachments](examples/browser)
+- [Browser/webpack/wasm, with ajax and input media attachments](examples/browser)
 
 ## Changelog
 

diff --git a/examples/browser-media-ajax/.babelrc b/examples/browser-media-ajax/.babelrc
diff --git a/examples/browser-media-ajax/.gitignore b/examples/browser-media-ajax/.gitignore
diff --git a/examples/browser-media-ajax/index.html b/examples/browser-media-ajax/index.html
diff --git a/examples/browser-media-ajax/index.js b/examples/browser-media-ajax/index.js
diff --git a/examples/browser-media-ajax/package.json b/examples/browser-media-ajax/package.json
diff --git a/examples/browser-media-ajax/webpack.config.js b/examples/browser-media-ajax/webpack.config.js
diff --git a/examples/browser-media-file-input/.babelrc b/examples/browser-media-file-input/.babelrc
diff --git a/examples/browser-media-file-input/.gitignore b/examples/browser-media-file-input/.gitignore
diff --git a/examples/browser-media-file-input/index.html b/examples/browser-media-file-input/index.html
diff --git a/examples/browser-media-file-input/index.js b/examples/browser-media-file-input/index.js
diff --git a/examples/browser-media-file-input/package.json b/examples/browser-media-file-input/package.json
diff --git a/examples/browser-media-file-input/webpack.config.js b/examples/browser-media-file-input/webpack.config.js
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"
+  }
+}