Skip to content

Commit c8199e7

Browse files
bitjsonbitjson
committed
feat(examples): improve browser usage example
1 parent 5f18048 commit c8199e7

File tree

6 files changed

+68
-16
lines changed

6 files changed

+68
-16
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ So we can have nice things:
1616

1717
## Get started
1818

19-
Before you start, consider configuring or switching to an [editor with good typescript support](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support).
19+
Before you start, consider configuring or switching to an [editor with good typescript support](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support)like [vscode](https://code.visualstudio.com/).
2020

2121
To see how this starter can be used, check out the [`examples`](./examples) folder.
2222

‎examples/browser/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "1.0.0",
44
"license": "MIT",
55
"scripts": {
6-
"start": "http-server ./build/ -o",
6+
"start": "http-server -c-1 ./build/ -o",
77
"build": "rollup -c && cpy src/index.html build/"
88
},
99
"devDependencies": {

‎examples/browser/src/index.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1-
<html><body>
2-
<script src="test.js" />
3-
</body></html>
1+
<html>
2+
3+
<head>
4+
<script src="test.js"></script>
5+
</head>
6+
7+
<body>
8+
</body>
9+
10+
</html>

‎examples/browser/src/test.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
// Note: we're not using the double method, so it should be excluded from the bundle
22
import { power, asyncABC } from '../../../'
33

4+
let output = ''
5+
6+
function log(str: string) {
7+
console.log(str)
8+
output += str + '\n'
9+
}
10+
11+
function logAndAlert(data: string[]) {
12+
log('✔ asyncABC returned: ' + data)
13+
window.alert(output)
14+
}
15+
16+
log('Output:')
17+
418
if (power(3,4) === 81) {
5-
console.log('✔ power(3,4) === 81')
19+
log('✔ power(3,4) === 81')
620
} else {
7-
console.error('The "power" method seems to be broken.')
21+
log('The "power" method seems to be broken.')
822
}
923

10-
asyncABC().then( abc => console.log('✔ asyncABC returned:', abc) )
24+
asyncABC().then( abc => logAndAlert(abc) )

‎examples/browser/tsconfig.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22
"extends": "../../tsconfig",
33
"compilerOptions": {
44
"outDir": "build",
5-
"module": "ES6",
5+
"module": "es6",
66
"declaration": false,
7-
"removeComments": true
7+
"removeComments": true,
8+
"lib": [
9+
"dom"
10+
]
811
},
912
"include": [
1013
"src/*.ts"

‎examples/readme.md

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,55 @@
1-
# `es7-typescript-starter` Usage Examples
1+
# Usage Examples
22

3-
This directory (`/examples`) can be deleted when forking this project. It contains some simple examples of how forks of this starter can be used by other projects. (Usually you'll want to provide these instructions in your root `readme.md`.)
3+
This directory (`/examples`) can be deleted when forking this project. It contains some simple examples of how forks of `es7-typescript-starter` can be used by other projects. (Usually you'll want to provide these instructions in your root `readme.md`.)
44

55
## Node (Vanilla)
66

7+
This shows the simplest use case – a quick, hacked-together Node.js project with no type safety, and no pre-processing. This is the way most of the Node.js ecosystem currently expects to import a node modules.
8+
79
```bash
10+
# build es7-typescript-starter first
811
yarn build
12+
913
cd examples/node-vanilla
10-
node test.js
14+
15+
# run the example
16+
node test.js
1117
```
1218

1319
## Node (Typescript)
1420

21+
This is for larger and more established Node.js projects which use Typescript for type safety. You'll notice that the type declarations and inline documentation from `es7-typescript-starter` are accessible to [Typescript-compatible editors](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support) like [vscode](https://code.visualstudio.com/).
22+
1523
```bash
24+
# build es7-typescript-starter first
1625
yarn build
26+
1727
cd examples/node-typescript
18-
yarn && yarn build && yarn start
28+
29+
# install the dependencies
30+
yarn
31+
# type-check and build the example
32+
yarn build
33+
# run the example
34+
yarn start
1935
```
2036

21-
## Browser (Rollup, Tree-shaking)
37+
## Browser (tree-shaking with Rollup)
38+
39+
This project imports the `power` and `asyncABC` functions from the ES6 output of `es7-typescript-starter`, without importing the `double` function. This allows for the `double` method to be completely excluded from output via [Rollup's tree-shaking](http://rollupjs.org/), making the final javascript bundle potentially much smaller, even before using a minifier like [Uglify](https://github.com/mishoo/UglifyJS2).
40+
41+
To demonstrate, this example doesn't minify or remove comments. You can see where some javascript has been excluded from the bundle.
2242

2343
```bash
44+
# build es7-typescript-starter first
2445
yarn build
46+
2547
cd examples/browser
26-
yarn && yarn build && yarn start
48+
49+
# install the dependencies
50+
yarn
51+
# build the javascript bundle
52+
yarn build
53+
# start a server and open the test in a browser
54+
yarn start
2755
```

0 commit comments

Comments
 (0)