update browser example

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

Hide file tree

Showing 19 changed files with 99 additions and 252 deletions.
diff --git a/README.md b/README.md
@@ -41,70 +41,35 @@ const { default: AnkiExport } = require('anki-apkg-export');
 
 ```
 
-### Browser
+### Browser (Webpack)
 
-Intended to be used with [`webpack`](https://github.com/webpack/webpack)
+[`script-loader`](https://github.com/webpack/script-loader) is required
 
 ```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';
+import { saveAs } from 'file-saver';
+import 'script-loader!sql.js/dist/sql-asm';
 
-const apkg = new AnkiExport('deck-name');
+(async () => {
+  const sql = await window.initSqlJs();
+  const apkg = new AnkiExport('deck-name', {}, sql);
 
-// 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);
+  // could be a File from <input /> or a Blob from fetch
+  apkg.addMedia('anki.png', file);
 
-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.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 => {
-    saveAs(zip, 'output.apkg');
-  })
-  .catch(err => console.log(err.stack || err));
+  const zip = await apkg.save()
+  saveAs(zip, '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), 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/.babelrc b/examples/browser/.babelrc
diff --git a/examples/browser/.gitignore b/examples/browser/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 bundle.js
+yarn.lock
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -1 +1,16 @@
-<script src="/bundle.js"></script>
+<!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/index.js b/examples/browser/index.js
@@ -1,16 +1,59 @@
-import { saveAs } from 'file-saver';
-
-import AnkiExport from '../../src';
-// import AnkiExport from 'anki-apkg-export';
-
-const apkg = new AnkiExport('deck-name');
-
-apkg.addCard('card #1 front', 'card #1 back');
-apkg.addCard('card #2 front', 'card #2 back');
-
-apkg
-  .save()
-  .then(zip => {
-    saveAs(zip, 'output.apkg');
-  })
-  .catch(err => console.log(err.stack || err));
+import AnkiExport from 'anki-apkg-export';
+import { saveAs } from 'file-saver';
+import 'script-loader!sql.js/dist/sql-asm';
+
+(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/package.json b/examples/browser/package.json
@@ -1,16 +1,15 @@
 {
   "private": true,
   "scripts": {
-    "build": "webpack"
+    "build": "webpack --mode production"
   },
   "dependencies": {
-    "anki-apkg-export": "^3.0.1",
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.6.0",
-    "file-saver": "^1.3.3"
+    "anki-apkg-export": "file:../../",
+    "file-saver": "^2.0.2"
   },
   "devDependencies": {
-    "script-loader": "^0.6.1",
-    "webpack": "^1.12.14"
+    "script-loader": "^0.7.2",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
   }
 }