Skip to content

Commit

Permalink
feat: add various es module and CommonJS examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@ctavan
ctavan committed Oct 25, 2019
1 parent a3f078f commit b238510
Show file tree
Hide file tree
Showing 27 changed files with 4,527 additions and 0 deletions.
8 changes: 8 additions & 0 deletions examples/browser-esmodules/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# uuid example Browser with native ECMAScript Modules

```
npm install
npm test
```

Then navigate to `example.html`.
4 changes: 4 additions & 0 deletions examples/browser-esmodules/example.html
View file
Original file line number Diff line number Diff line change
@@ -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>
43 changes: 43 additions & 0 deletions examples/browser-esmodules/example.js
View file
Original file line number Diff line number Diff line change
@@ -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));
12 changes: 12 additions & 0 deletions examples/browser-esmodules/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions examples/browser-esmodules/package.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}
}
1 change: 1 addition & 0 deletions examples/browser-rollup/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
dist/
17 changes: 17 additions & 0 deletions examples/browser-rollup/README.md
View file
Original file line number Diff line number Diff line change
@@ -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
```
43 changes: 43 additions & 0 deletions examples/browser-rollup/example-all.js
View file
Original file line number Diff line number Diff line change
@@ -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));
3 changes: 3 additions & 0 deletions examples/browser-rollup/example-v1.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import {v1 as uuidv1} from 'uuid';

console.log('uuidv1()', uuidv1());
3 changes: 3 additions & 0 deletions examples/browser-rollup/example-v4.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import {v4 as uuidv4} from 'uuid';

console.log('uuidv4()', uuidv4());
6 changes: 6 additions & 0 deletions examples/browser-rollup/example.html
View file
Original file line number Diff line number Diff line change
@@ -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>
105 changes: 105 additions & 0 deletions examples/browser-rollup/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions examples/browser-rollup/package.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}
}
27 changes: 27 additions & 0 deletions examples/browser-rollup/rollup.config.js
View file
Original file line number Diff line number Diff line change
@@ -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,
}];
1 change: 1 addition & 0 deletions examples/browser-webpack/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
dist/
17 changes: 17 additions & 0 deletions examples/browser-webpack/README.md
View file
Original file line number Diff line number Diff line change
@@ -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
```
43 changes: 43 additions & 0 deletions examples/browser-webpack/example-all.js
View file
Original file line number Diff line number Diff line change
@@ -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));
3 changes: 3 additions & 0 deletions examples/browser-webpack/example-v1.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import {v1 as uuidv1} from 'uuid';

console.log('uuidv1()', uuidv1());
3 changes: 3 additions & 0 deletions examples/browser-webpack/example-v4.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import {v4 as uuidv4} from 'uuid';

console.log('uuidv4()', uuidv4());
6 changes: 6 additions & 0 deletions examples/browser-webpack/example.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit b238510

Please sign in to comment.