fix(example): adds example code for the browser and cleans up the com…

…pilation configuration
KenEucker · Dec 30, 2021 · 07911ce · 07911ce
1 parent d168e73
commit 07911ce
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -35,16 +35,17 @@ import { ImgurClient } from 'imgur';
 // CommonJS syntax
 const { ImgurClient } = require('imgur');
 
-let client;
+// browser script include
+const client = new imgur({ clientId: env.CLIENT_ID });
 
 // if you already have an access token acquired
-client = new ImgurClient({ accessToken: process.env.ACCESS_TOKEN });
+const client = new ImgurClient({ accessToken: process.env.ACCESS_TOKEN });
 
 // or your client ID
-client = new ImgurClient({ clientId: process.env.CLIENT_ID });
+const client = new ImgurClient({ clientId: process.env.CLIENT_ID });
 
 // or your username/password/client id to retrieve an access token automatically:
-client = new ImgurClient({
+const client = new ImgurClient({
   username: process.env.USERNAME,
   password: process.env.PASSWORD,
   clientId: process.env.CLIENT_ID,

diff --git a/example/env.js b/example/env.js
@@ -0,0 +1,5 @@
+const env = {
+    "CLIENT_ID": "YOUR-CLIENT-ID",
+    "ACCESS_TOKEN": "YOUR-ACCESS-TOKEN",
+    "ALBUM": "YOUR-ALBUM"
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,48 @@
+<html>
+
+<head>
+
+    <meta charset="utf-8">
+    <meta name="referrer" content="no-referrer" />
+    <meta type="title" content="Imgur API test">
+    <title>Imgur API test</title>
+    <script src="../dist/imgur.js"></script>
+    <script src="env.js"></script>
+
+</head>
+
+<body>
+
+    <img id="image" src="small.jpg">
+    <video id="video" src="small.mp4" controls>
+
+    <script defer>
+        const init = () => {
+            function getImageStream(img) {
+                const canvas = document.createElement("canvas");
+                canvas.width = canvas.height = 100;
+                const ctx = canvas.getContext("2d");
+                ctx.drawImage(img, 0, 0)
+                return canvas.toDataURL();
+            }
+
+            const album = env.ALBUM;
+            const client = new imgur({
+                accessToken: env.ACCESS_TOKEN,
+                clientId: env.CLIENT_ID,
+            });
+
+            const image = document.getElementById('image')
+            const imageStream = getImageStream(image)
+            client.upload({ album, image: imageStream, type: 'stream' }).then(console.log);
+
+            const video = document.getElementById('video')
+            const videoStream = getImageStream(video)
+            client.upload({ album, image: videoStream, type: 'stream' }).then(console.log);
+        }
+        init()
+    </script>
+
+</body>
+
+</html>
diff --git a/example/node.js → example/index.js b/example/node.js → example/index.js
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "test": "jest --verbose",
     "test:dev": "jest --silent=false",
     "test:ci": "jest --ci --coverage --maxWorkers=2",
+    "run:dev": "node example/node",
     "build:dev": "npm run build && npm run compile",
     "build": "tsc",
     "build:prod": "echo 'webpack handles the compilation process ✅'",

diff --git a/tsconfig.json b/tsconfig.json
@@ -2,22 +2,15 @@
   "include": ["src/**/*"],
   "exclude": ["src/coverage/", "src/mocks/", "src/**/*.test.ts"],
   "compilerOptions": {
+    "experimentalDecorators": true,
     "moduleResolution": "node",
-    "module": "CommonJS",
-    "target": "ES2020",
-    "lib": ["ES2020", "dom"],
+    "module": "es6",
+    "target": "es6",
+    "typeRoots": ["@types", "./node_modules/@types"],
     "rootDir": "./src",
     "outDir": "lib",
-    "importHelpers": true,
     "esModuleInterop": true,
-    "declaration": true,
-    "sourceMap": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true
+    "importHelpers": true,
+    "declaration": true
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,6 +3,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 
 const generalConfig = {
+  devtool: false,
   watchOptions: {
     aggregateTimeout: 600,
     ignored: /node_modules/,
@@ -24,6 +25,10 @@ const generalConfig = {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
+    fallback: {
+      stream: require.resolve('stream-browserify'),
+      crypto: require.resolve('crypto-browserify'),
+    },
   },
 };
 
@@ -53,15 +58,16 @@ const browserConfig = {
 };
 
 module.exports = (env, argv) => {
+  Object.assign(nodeConfig, generalConfig);
+  Object.assign(browserConfig, generalConfig);
+
   if (argv.mode === 'development') {
-    generalConfig.devtool = 'cheap-module-source-map';
+    nodeConfig.devtool = 'cheap-module-source-map';
+    browserConfig.devtool = 'cheap-module-source-map';
   } else if (argv.mode === 'production') {
   } else {
     throw new Error('Specify env');
   }
 
-  Object.assign(nodeConfig, generalConfig);
-  Object.assign(browserConfig, generalConfig);
-
   return [nodeConfig, browserConfig];
 };