Skip to content

Commit b238510

Browse files
ctavanctavan
committed
feat: add various es module and CommonJS examples
1 parent a3f078f commit b238510

27 files changed

+4527
-0
lines changed

‎examples/browser-esmodules/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# uuid example Browser with native ECMAScript Modules
2+
3+
```
4+
npm install
5+
npm test
6+
```
7+
8+
Then navigate to `example.html`.

‎examples/browser-esmodules/example.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!DOCTYPE html>
2+
<title>UUID esmodule native example</title>
3+
<p>Please open the Developer Console to view output</p>
4+
<script type="module" src="example.js"></script>

‎examples/browser-esmodules/example.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {v1 as uuidv1, v4 as uuidv4, v3 as uuidv3, v5 as uuidv5} from './node_modules/uuid/esm-browser/index.js';
2+
import * as uuid from './node_modules/uuid/esm-browser/index.js';
3+
4+
console.log('uuidv1()', uuidv1());
5+
6+
console.log('uuidv4()', uuidv4());
7+
8+
// ... using predefined DNS namespace (for domain names)
9+
console.log('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
10+
11+
// ... using predefined URL namespace (for, well, URLs)
12+
console.log('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
13+
14+
// ... using a custom namespace
15+
//
16+
// Note: Custom namespaces should be a UUID string specific to your application!
17+
// E.g. the one here was generated using this modules `uuid` CLI.
18+
const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
19+
console.log('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
20+
21+
// ... using predefined DNS namespace (for domain names)
22+
console.log('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
23+
24+
// ... using predefined URL namespace (for, well, URLs)
25+
console.log('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
26+
27+
// ... using a custom namespace
28+
//
29+
// Note: Custom namespaces should be a UUID string specific to your application!
30+
// E.g. the one here was generated using this modules `uuid` CLI.
31+
// const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
32+
console.log('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
33+
34+
console.log('Same with default export');
35+
36+
console.log('uuid.v1()', uuid.v1());
37+
console.log('uuid.v4()', uuid.v4());
38+
console.log('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
39+
console.log('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
40+
console.log('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
41+
console.log('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
42+
console.log('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
43+
console.log('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));

‎examples/browser-esmodules/package-lock.json

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/browser-esmodules/package.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "uuid-example-browser-esmodules",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"test": "npx http-server . -o"
7+
},
8+
"dependencies": {
9+
"uuid": "github:ctavan/uuid-esm#master"
10+
}
11+
}

‎examples/browser-rollup/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist/

‎examples/browser-rollup/README.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# uuid example Browser with rollup.js
2+
3+
```
4+
npm install
5+
npm test
6+
```
7+
8+
Then navigate to `example.html`.
9+
10+
The `example-v{1,4}.js` demonstrate that treeshaking works as expected:
11+
12+
```
13+
$ du -sh dist/*
14+
20K dist/all.js
15+
8.0K dist/v1.js
16+
4.0K dist/v4.js
17+
```

‎examples/browser-rollup/example-all.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {v1 as uuidv1, v4 as uuidv4, v3 as uuidv3, v5 as uuidv5} from 'uuid';
2+
import * as uuid from 'uuid';
3+
4+
console.log('uuidv1()', uuidv1());
5+
6+
console.log('uuidv4()', uuidv4());
7+
8+
// ... using predefined DNS namespace (for domain names)
9+
console.log('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
10+
11+
// ... using predefined URL namespace (for, well, URLs)
12+
console.log('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
13+
14+
// ... using a custom namespace
15+
//
16+
// Note: Custom namespaces should be a UUID string specific to your application!
17+
// E.g. the one here was generated using this modules `uuid` CLI.
18+
const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
19+
console.log('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
20+
21+
// ... using predefined DNS namespace (for domain names)
22+
console.log('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
23+
24+
// ... using predefined URL namespace (for, well, URLs)
25+
console.log('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
26+
27+
// ... using a custom namespace
28+
//
29+
// Note: Custom namespaces should be a UUID string specific to your application!
30+
// E.g. the one here was generated using this modules `uuid` CLI.
31+
// const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
32+
console.log('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
33+
34+
console.log('Same with default export');
35+
36+
console.log('uuid.v1()', uuid.v1());
37+
console.log('uuid.v4()', uuid.v4());
38+
console.log('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
39+
console.log('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
40+
console.log('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
41+
console.log('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
42+
console.log('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
43+
console.log('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));

‎examples/browser-rollup/example-v1.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {v1 as uuidv1} from 'uuid';
2+
3+
console.log('uuidv1()', uuidv1());

‎examples/browser-rollup/example-v4.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {v4 as uuidv4} from 'uuid';
2+
3+
console.log('uuidv4()', uuidv4());

‎examples/browser-rollup/example.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!DOCTYPE html>
2+
<title>UUID esmodule webpack example</title>
3+
<p>Please open the Developer Console to view output</p>
4+
<script type="text/javascript" src="./dist/v1.js"></script>
5+
<script type="text/javascript" src="./dist/v4.js"></script>
6+
<script type="text/javascript" src="./dist/all.js"></script>

‎examples/browser-rollup/package-lock.json

+105
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/browser-rollup/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "uuid-example-browser-rollup",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"test": "rm -rf dist && rollup -c && npx http-server . -o"
7+
},
8+
"dependencies": {
9+
"uuid": "github:ctavan/uuid-esm#master"
10+
},
11+
"devDependencies": {
12+
"rollup": "^1.24.0",
13+
"rollup-plugin-node-resolve": "^5.2.0"
14+
}
15+
}

‎examples/browser-rollup/rollup.config.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const resolve = require('rollup-plugin-node-resolve');
2+
3+
const plugins = [
4+
resolve(),
5+
];
6+
module.exports = [{
7+
input: './example-all.js',
8+
output: {
9+
file: 'dist/all.js',
10+
format: 'iife'
11+
},
12+
plugins,
13+
}, {
14+
input: './example-v1.js',
15+
output: {
16+
file: 'dist/v1.js',
17+
format: 'iife'
18+
},
19+
plugins,
20+
}, {
21+
input: './example-v4.js',
22+
output: {
23+
file: 'dist/v4.js',
24+
format: 'iife'
25+
},
26+
plugins,
27+
}];

‎examples/browser-webpack/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist/

‎examples/browser-webpack/README.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# uuid example Browser with Webpack
2+
3+
```
4+
npm install
5+
npm test
6+
```
7+
8+
Then navigate to `example.html`.
9+
10+
The `example-v{1,4}.js` demonstrate that treeshaking works as expected (webpack output below):
11+
12+
```
13+
Asset Size Chunks Chunk Names
14+
all.js 8.54 KiB 0 [emitted] all
15+
v1.js 2.6 KiB 1 [emitted] v1
16+
v4.js 2 KiB 2 [emitted] v4
17+
```

‎examples/browser-webpack/example-all.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {v1 as uuidv1, v4 as uuidv4, v3 as uuidv3, v5 as uuidv5} from 'uuid';
2+
import * as uuid from 'uuid';
3+
4+
console.log('uuidv1()', uuidv1());
5+
6+
console.log('uuidv4()', uuidv4());
7+
8+
// ... using predefined DNS namespace (for domain names)
9+
console.log('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
10+
11+
// ... using predefined URL namespace (for, well, URLs)
12+
console.log('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
13+
14+
// ... using a custom namespace
15+
//
16+
// Note: Custom namespaces should be a UUID string specific to your application!
17+
// E.g. the one here was generated using this modules `uuid` CLI.
18+
const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
19+
console.log('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
20+
21+
// ... using predefined DNS namespace (for domain names)
22+
console.log('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
23+
24+
// ... using predefined URL namespace (for, well, URLs)
25+
console.log('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
26+
27+
// ... using a custom namespace
28+
//
29+
// Note: Custom namespaces should be a UUID string specific to your application!
30+
// E.g. the one here was generated using this modules `uuid` CLI.
31+
// const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
32+
console.log('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
33+
34+
console.log('Same with default export');
35+
36+
console.log('uuid.v1()', uuid.v1());
37+
console.log('uuid.v4()', uuid.v4());
38+
console.log('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
39+
console.log('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
40+
console.log('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
41+
console.log('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
42+
console.log('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
43+
console.log('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));

‎examples/browser-webpack/example-v1.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {v1 as uuidv1} from 'uuid';
2+
3+
console.log('uuidv1()', uuidv1());

‎examples/browser-webpack/example-v4.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {v4 as uuidv4} from 'uuid';
2+
3+
console.log('uuidv4()', uuidv4());

‎examples/browser-webpack/example.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!DOCTYPE html>
2+
<title>UUID esmodule webpack example</title>
3+
<p>Please open the Developer Console to view output</p>
4+
<script type="text/javascript" src="./dist/v1.js"></script>
5+
<script type="text/javascript" src="./dist/v4.js"></script>
6+
<script type="text/javascript" src="./dist/all.js"></script>

0 commit comments

Comments
 (0)