feat: add various es module and CommonJS examples

uuidjs · Oct 25, 2019 · b238510 · b238510
1 parent a3f078f
commit b238510
Show file tree

Hide file tree

Showing 27 changed files with 4,527 additions and 0 deletions.
diff --git a/examples/browser-esmodules/README.md b/examples/browser-esmodules/README.md
@@ -0,0 +1,8 @@
+# uuid example Browser with native ECMAScript Modules
+
+```
+npm install
+npm test
+```
+
+Then navigate to `example.html`.
diff --git a/examples/browser-esmodules/example.html b/examples/browser-esmodules/example.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<title>UUID esmodule native example</title>
+<p>Please open the Developer Console to view output</p>
+<script type="module" src="example.js"></script>
diff --git a/examples/browser-esmodules/example.js b/examples/browser-esmodules/example.js
@@ -0,0 +1,43 @@
+import {v1 as uuidv1, v4 as uuidv4, v3 as uuidv3, v5 as uuidv5} from './node_modules/uuid/esm-browser/index.js';
+import * as uuid from './node_modules/uuid/esm-browser/index.js';
+
+console.log('uuidv1()', uuidv1());
+
+console.log('uuidv4()', uuidv4());
+
+// ... using predefined DNS namespace (for domain names)
+console.log('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
+
+// ... using predefined URL namespace (for, well, URLs)
+console.log('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
+
+// ... using a custom namespace
+//
+// Note: Custom namespaces should be a UUID string specific to your application!
+// E.g. the one here was generated using this modules `uuid` CLI.
+const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
+console.log('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
+
+// ... using predefined DNS namespace (for domain names)
+console.log('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
+
+// ... using predefined URL namespace (for, well, URLs)
+console.log('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
+
+// ... using a custom namespace
+//
+// Note: Custom namespaces should be a UUID string specific to your application!
+// E.g. the one here was generated using this modules `uuid` CLI.
+// const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
+console.log('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
+
+console.log('Same with default export');
+
+console.log('uuid.v1()', uuid.v1());
+console.log('uuid.v4()', uuid.v4());
+console.log('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
+console.log('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
+console.log('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
+console.log('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
+console.log('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
+console.log('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));
diff --git a/examples/browser-esmodules/package-lock.json b/examples/browser-esmodules/package-lock.json
diff --git a/examples/browser-esmodules/package.json b/examples/browser-esmodules/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "uuid-example-browser-esmodules",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "test": "npx http-server . -o"
+  },
+  "dependencies": {
+    "uuid": "github:ctavan/uuid-esm#master"
+  }
+}
diff --git a/examples/browser-rollup/.gitignore b/examples/browser-rollup/.gitignore
@@ -0,0 +1 @@
+dist/
diff --git a/examples/browser-rollup/README.md b/examples/browser-rollup/README.md
@@ -0,0 +1,17 @@
+# uuid example Browser with rollup.js
+
+```
+npm install
+npm test
+```
+
+Then navigate to `example.html`.
+
+The `example-v{1,4}.js` demonstrate that treeshaking works as expected:
+
+```
+$ du -sh dist/*
+ 20K  dist/all.js
+8.0K  dist/v1.js
+4.0K  dist/v4.js
+```
diff --git a/examples/browser-rollup/example-all.js b/examples/browser-rollup/example-all.js
@@ -0,0 +1,43 @@
+import {v1 as uuidv1, v4 as uuidv4, v3 as uuidv3, v5 as uuidv5} from 'uuid';
+import * as uuid from 'uuid';
+
+console.log('uuidv1()', uuidv1());
+
+console.log('uuidv4()', uuidv4());
+
+// ... using predefined DNS namespace (for domain names)
+console.log('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
+
+// ... using predefined URL namespace (for, well, URLs)
+console.log('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
+
+// ... using a custom namespace
+//
+// Note: Custom namespaces should be a UUID string specific to your application!
+// E.g. the one here was generated using this modules `uuid` CLI.
+const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
+console.log('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
+
+// ... using predefined DNS namespace (for domain names)
+console.log('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
+
+// ... using predefined URL namespace (for, well, URLs)
+console.log('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
+
+// ... using a custom namespace
+//
+// Note: Custom namespaces should be a UUID string specific to your application!
+// E.g. the one here was generated using this modules `uuid` CLI.
+// const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
+console.log('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
+
+console.log('Same with default export');
+
+console.log('uuid.v1()', uuid.v1());
+console.log('uuid.v4()', uuid.v4());
+console.log('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
+console.log('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
+console.log('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
+console.log('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
+console.log('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
+console.log('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));
diff --git a/examples/browser-rollup/example-v1.js b/examples/browser-rollup/example-v1.js
@@ -0,0 +1,3 @@
+import {v1 as uuidv1} from 'uuid';
+
+console.log('uuidv1()', uuidv1());
diff --git a/examples/browser-rollup/example-v4.js b/examples/browser-rollup/example-v4.js
@@ -0,0 +1,3 @@
+import {v4 as uuidv4} from 'uuid';
+
+console.log('uuidv4()', uuidv4());
diff --git a/examples/browser-rollup/example.html b/examples/browser-rollup/example.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<title>UUID esmodule webpack example</title>
+<p>Please open the Developer Console to view output</p>
+<script type="text/javascript" src="./dist/v1.js"></script>
+<script type="text/javascript" src="./dist/v4.js"></script>
+<script type="text/javascript" src="./dist/all.js"></script>
diff --git a/examples/browser-rollup/package-lock.json b/examples/browser-rollup/package-lock.json
diff --git a/examples/browser-rollup/package.json b/examples/browser-rollup/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "uuid-example-browser-rollup",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "test": "rm -rf dist && rollup -c && npx http-server . -o"
+  },
+  "dependencies": {
+    "uuid": "github:ctavan/uuid-esm#master"
+  },
+  "devDependencies": {
+    "rollup": "^1.24.0",
+    "rollup-plugin-node-resolve": "^5.2.0"
+  }
+}
diff --git a/examples/browser-rollup/rollup.config.js b/examples/browser-rollup/rollup.config.js
@@ -0,0 +1,27 @@
+const resolve = require('rollup-plugin-node-resolve');
+
+const plugins = [
+  resolve(),
+];
+module.exports = [{
+  input: './example-all.js',
+  output: {
+    file: 'dist/all.js',
+    format: 'iife'
+  },
+  plugins,
+}, {
+  input: './example-v1.js',
+  output: {
+    file: 'dist/v1.js',
+    format: 'iife'
+  },
+  plugins,
+}, {
+  input: './example-v4.js',
+  output: {
+    file: 'dist/v4.js',
+    format: 'iife'
+  },
+  plugins,
+}];
diff --git a/examples/browser-webpack/.gitignore b/examples/browser-webpack/.gitignore
@@ -0,0 +1 @@
+dist/
diff --git a/examples/browser-webpack/README.md b/examples/browser-webpack/README.md
@@ -0,0 +1,17 @@
+# uuid example Browser with Webpack
+
+```
+npm install
+npm test
+```
+
+Then navigate to `example.html`.
+
+The `example-v{1,4}.js` demonstrate that treeshaking works as expected (webpack output below):
+
+```
+ Asset      Size  Chunks             Chunk Names
+all.js  8.54 KiB       0  [emitted]  all
+ v1.js   2.6 KiB       1  [emitted]  v1
+ v4.js     2 KiB       2  [emitted]  v4
+```
diff --git a/examples/browser-webpack/example-all.js b/examples/browser-webpack/example-all.js
@@ -0,0 +1,43 @@
+import {v1 as uuidv1, v4 as uuidv4, v3 as uuidv3, v5 as uuidv5} from 'uuid';
+import * as uuid from 'uuid';
+
+console.log('uuidv1()', uuidv1());
+
+console.log('uuidv4()', uuidv4());
+
+// ... using predefined DNS namespace (for domain names)
+console.log('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
+
+// ... using predefined URL namespace (for, well, URLs)
+console.log('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
+
+// ... using a custom namespace
+//
+// Note: Custom namespaces should be a UUID string specific to your application!
+// E.g. the one here was generated using this modules `uuid` CLI.
+const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
+console.log('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
+
+// ... using predefined DNS namespace (for domain names)
+console.log('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
+
+// ... using predefined URL namespace (for, well, URLs)
+console.log('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
+
+// ... using a custom namespace
+//
+// Note: Custom namespaces should be a UUID string specific to your application!
+// E.g. the one here was generated using this modules `uuid` CLI.
+// const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
+console.log('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
+
+console.log('Same with default export');
+
+console.log('uuid.v1()', uuid.v1());
+console.log('uuid.v4()', uuid.v4());
+console.log('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
+console.log('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
+console.log('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
+console.log('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
+console.log('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
+console.log('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));
diff --git a/examples/browser-webpack/example-v1.js b/examples/browser-webpack/example-v1.js
@@ -0,0 +1,3 @@
+import {v1 as uuidv1} from 'uuid';
+
+console.log('uuidv1()', uuidv1());
diff --git a/examples/browser-webpack/example-v4.js b/examples/browser-webpack/example-v4.js
@@ -0,0 +1,3 @@
+import {v4 as uuidv4} from 'uuid';
+
+console.log('uuidv4()', uuidv4());
diff --git a/examples/browser-webpack/example.html b/examples/browser-webpack/example.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<title>UUID esmodule webpack example</title>
+<p>Please open the Developer Console to view output</p>
+<script type="text/javascript" src="./dist/v1.js"></script>
+<script type="text/javascript" src="./dist/v4.js"></script>
+<script type="text/javascript" src="./dist/all.js"></script>