diff --git a/README.md b/README.md index 3c3ca6d..c869c22 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ So we can have nice things: ## Get started -Before you start, consider configuring or switching to an [editor with good typescript support](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support). +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/). To see how this starter can be used, check out the [`examples`](./examples) folder. diff --git a/examples/browser/package.json b/examples/browser/package.json index 9d53a1e..3389f72 100644 --- a/examples/browser/package.json +++ b/examples/browser/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "license": "MIT", "scripts": { - "start": "http-server ./build/ -o", + "start": "http-server -c-1 ./build/ -o", "build": "rollup -c && cpy src/index.html build/" }, "devDependencies": { diff --git a/examples/browser/src/index.html b/examples/browser/src/index.html index d39bce9..ff76b7e 100644 --- a/examples/browser/src/index.html +++ b/examples/browser/src/index.html @@ -1,3 +1,10 @@ -
- - + + + + + + + + + + diff --git a/examples/browser/src/test.ts b/examples/browser/src/test.ts index 5d3af5e..0715cfb 100644 --- a/examples/browser/src/test.ts +++ b/examples/browser/src/test.ts @@ -1,10 +1,24 @@ // Note: we're not using the double method, so it should be excluded from the bundle import { power, asyncABC } from '../../../' -if (power(3,4) === 81) { - console.log('✔ power(3,4) === 81') -} else { - console.error('The "power" method seems to be broken.') +let output = '' + +function log(str: string) { + console.log(str) + output += str + '\n' } -asyncABC().then( abc => console.log('✔ asyncABC returned:', abc) ) +function logAndAlert(data: string[]) { + log('✔ asyncABC returned: ' + data) + window.alert(output) +} + +log('Output:') + +if (power(3,4) === 81) { + log('✔ power(3,4) === 81') +} else { + log('The "power" method seems to be broken.') +} + +asyncABC().then( abc => logAndAlert(abc) ) diff --git a/examples/browser/tsconfig.json b/examples/browser/tsconfig.json index 1230960..4e8f488 100644 --- a/examples/browser/tsconfig.json +++ b/examples/browser/tsconfig.json @@ -2,9 +2,12 @@ "extends": "../../tsconfig", "compilerOptions": { "outDir": "build", - "module": "ES6", + "module": "es6", "declaration": false, - "removeComments": true + "removeComments": true, + "lib": [ + "dom" + ] }, "include": [ "src/*.ts" diff --git a/examples/readme.md b/examples/readme.md index fd95f3d..6021162 100644 --- a/examples/readme.md +++ b/examples/readme.md @@ -1,27 +1,55 @@ -# `es7-typescript-starter` Usage Examples +# Usage Examples -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`.) +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`.) ## Node (Vanilla) +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. + ```bash +# build es7-typescript-starter first yarn build + cd examples/node-vanilla -node test.js + +# run the example +node test.js ``` ## Node (Typescript) +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/). + ```bash +# build es7-typescript-starter first yarn build + cd examples/node-typescript -yarn && yarn build && yarn start + + # install the dependencies +yarn +# type-check and build the example +yarn build +# run the example +yarn start ``` -## Browser (Rollup, Tree-shaking) +## Browser (tree-shaking with Rollup) + +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). + +To demonstrate, this example doesn't minify or remove comments. You can see where some javascript has been excluded from the bundle. ```bash +# build es7-typescript-starter first yarn build + cd examples/browser -yarn && yarn build && yarn start + +# install the dependencies +yarn +# build the javascript bundle +yarn build +# start a server and open the test in a browser +yarn start ```