Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
Falieson committed Feb 15, 2019
1 parent 02b4d46 commit a8e6217
Show file tree
Hide file tree
Showing 42 changed files with 1,007 additions and 206 deletions.
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env"]
}
13 changes: 13 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# ==============================================================================
# This is an example environment configuration file. You can create your own
# .env implementation or pass them via the CLI.
#
# You could also decide to supply some of your environment variables from a .env
# file, and others via the CLI. This allows you to easily store "safe"
# environment variables within this file, and then manage your more sensitive
# environment variables seperately.

# NOTE: all values enabled in .env.example are required .env settings
# ==============================================================================

NODE_ENV = "dev"
49 changes: 47 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,48 @@
# Environment Configuration
.env
.env.[!example]*

# Build output folders
dist/
node_modules/
package-lock.json

# Logs
logs
*.log

# Runtime data
db/
pids
*.pid
*.seed

# Coverage directory used by tools like istanbul
coverage

# node-waf configuration
.lock-wscript

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
node_modules

# Speed up installs w/ this file, Unfortunately, causes too many issues.
# https://github.com/npm/npm/issues/16991
package-lock.json

# Debug log from npm
npm-debug.log

# IntelliJ IDE ignore
.idea

# Visual Studio Code
.history

# Happypack
.happypack

# OSX Files
.DS_Store

# Notes
.reference
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
8.11.2
11.9.0
103 changes: 103 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
{
"files.exclude": {
// DOT FILES
".babelrc": true,
".gitignore": true,
".npmignore": true,
".npmrc": true,
".nvmrc": true,
"jest.config.js": true,
"nodemon.json": true,
"package-scripts.js": true,
"tsconfig.jest.json": true,
"tsconfig.json": true,
"tslint.json": true,

// FOLDERS
"**/.netlify": true,
"**/.vscode": true,
"**/bin": true,
"**/build": true,
"**/dist": true,
"**/db": true,
"**/jest": true,
"**/lib": true,
"**/node_modules": true, // hide all folders that doesn't start with '@t'
"**/node_modules/.*": true,
"**/node_modules/[abcdefghijklmnopqrstuvwxyz]*": true,
"**/node_modules/@[abcdefghijklmnopqrsuvwxyz]*": true,
"**/webpack": true,
},
"search.exclude": {
// DOT FILES
".babelrc": false,
".gitignore": false,
".npmignore": false,
".npmrc": false,
".nvmrc": false,
"jest.config.js": false,
"nodemon.json": false,
"package-scripts.js": false,
"tsconfig.jest.json": false,
"tsconfig.json": false,
"tslint.json": false,

// FOLDERS
"**/.netlify": false,
"**/.vscode": false,
"**/bin": true,
"**/build": true,
"**/dist": true,
"**/db": true,
// "**/jest": true,
"**/lib": true,
"**/node_modules": false, // hide all folders that doesn't start with '@t'
"**/node_modules/.*": true,
"**/node_modules/[abcdefghijklmnopqrstuvwxyz]*": true,
"**/node_modules/@[abcdefghijklmnopqrsuvwxyz]*": true,
// "**/webpack": true,
},

// ToDos:
// https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
"todohighlight.isEnable": true,
"todohighlight.isCaseSensitive": true,
"todohighlight.keywords": [
{
"text": "NOTE:",
"color": "#ff0000",
"backgroundColor": "yellow",
"overviewRulerColor": "grey"
},
{
"text": "ISSUE:",
"color": "#FFFFFF",
"backgroundColor": "red",
"overviewRulerColor": "grey"
},
],
"todohighlight.include": [
"**/*.js",
"**/*.jsx",
"**/*.json5",
"**/*.ts",
"**/*.tsx",
"**/*.html",
"**/*.css",
"**/*.scss"
],
"todohighlight.exclude": [
"**/node_modules/**",
"**/bower_components/**",
"**/dist/**",
"**/build/**",
"**/.vscode/**",
"**/.github/**",
"**/_output/**",
"**/*.min.*",
"**/*.map",
"**/.next/**"
],
"todohighlight.maxFilesForSearch": 5120,
"todohighlight.toggleURI": false,
}
98 changes: 77 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,25 @@
<h1 align='center'>Typescript Module w/ Definitions (TGRStack)</h1>
</p>

[![TypeScript](https://img.shields.io/badge/TypeScript-2.8.1-blue.svg?style=flat-square)](https://github.com/Microsoft/TypeScript)
<!-- [![styled with TSLint](https://img.shields.io/badge/styled_with-TSLint-ff69b4.svg?style=flat-square)](https://github.com/palantir/tslint/) -->
<!-- [![WebPack](https://img.shields.io/badge/WebPack-4.5.0-blue.svg?style=flat-square)](https://github.com/Microsoft/TypeScript) -->
[![Node](https://img.shields.io/badge/Node-8.11.2-blue.svg?style=flat-square)](https://github.com/Microsoft/TypeScript)
[![Known Vulnerabilities](https://snyk.io/test/github/TGRstack/typescript-module/badge.svg)](https://snyk.io/test/github/TGRstack/typescript-module)

**Development and Production Ready |⸰| [VSCode Extensions](https://marketplace.visualstudio.com/search?term=tgrstack&target=VSCode&category=All%20categories&sortBy=Relevance)**

[![TypeScript](https://img.shields.io/badge/TypeScript-3.0.1-blue.svg?style=flat-square)](https://github.com/Microsoft/TypeScript)
[![TSLint](https://img.shields.io/badge/TS_Lint-5.11.0-8400ff.svg?style=flat-square)](https://github.com/palantir/tslint/)
[![TS-Jest](https://img.shields.io/badge/TS_Jest-22.4.6-8400ff.svg?style=flat-square)](https://github.com/kulshekhar/ts-jest)

[![WebPack](https://img.shields.io/badge/WebPack-4.12.2-blue.svg?style=flat-square)](https://github.com/webpack/webpack/)
[![Node](https://img.shields.io/badge/Node-11.4.0-blue.svg?style=flat-square)](https://nodejs.org/en/)

[![NPS friendly](https://img.shields.io/badge/NPS-friendly-brightgreen.svg?style=flat-square)](https://github.com/kentcdodds/nps)
[![Commitizen friendly](https://img.shields.io/badge/Commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)
[![Semver friendly](https://img.shields.io/badge/semver-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)
[![Commitizen friendly](https://img.shields.io/badge/Commitizen-friendly-brightgreen.svg?style=flat-square)](https://commitizen.github.io/cz-cli/)
[![Semver friendly](https://img.shields.io/badge/SemVer-friendly-brightgreen.svg?style=flat-square)](https://docs.npmjs.com/about-semantic-versioning)

## About

**Expose all the knobs |⸰| As lean as a racehorse can get |⸰| Fork and keep as an upstream, then create your own modules**

This starter kit is a launching point for ts/js module development (not React). Running the build script compiles the typescript code into a distribution that is ready to be published to a registry like NPM, and can easily be consumed by other TS modules. This module is part of a collection of uniformly built starter-kits designed for large-scale application development with TypeScript, GraphQL, and React. Find these, articles, and examplse at [www.TGRStack.com](http://www.TGRStack.com). Skip to the bottom for links to a series of tutorials that walkthrough the creation of this module.

## Commands - READ THIS
Expand All @@ -30,30 +38,41 @@ This starter kit is a launching point for ts/js module development (not React).

### Core

- [ ] 🚀 ES2018+ support syntax that is stage-3 or later in the TC39 process.
- [ ] 🔥 Hot development restarts dev-server when your src changes
- [ ] 🎛 Preconfigured to support development and optimized production builds
- [x] 🚀 ES2018+ support syntax that is stage-3 or later in the TC39 process.
- [x] 🎛 Preconfigured to support development and optimized production builds
- [x] 🎶 `typescript` incremental returns reducing development bugs
- [ ] 🚦 `tslint` configured for strict, consistent, code style

### Style

- [x] 🚦 `tslint` configured for strict, consistent, code style
- [ ] 🚦 `ts-prettier` for some of that code-consistancy that's missing from tslint
- [ ] 🚦 `SonarTS` Static code analyzer detects bugs and suspicious patterns

### Tests

- [ ] 🎭 `jest` as the test framework.
- [ ] 🎭 `ts-jest` configured to test TS files, uses tsconfig.jest.json, and skip babel.
- [x] 🎭 `jest` as the test framework.
- [x] 🎭 `ts-jest` configured to test TS files, uses tsconfig.jest.json, and skip babel.
- [x] 🎭 `enzyme` makes it easier to assert, manipulate, and traverse components.

### Build (w/ Webpack)

- [ ] 📦 All source is bundled using Webpack v4
- [ ] 🌟 webpack for dev, prod, common
- [ ] 🚦 `ts-loader` for compiling typescript
- [ ] 💦 babel-loader for additional polyfills (browser support)
- [ ] 😎 HappyPack
- [ ] 🤖 Auto generated Vendor DLL for smooth development experiences
- [ ] 🍃 Tree-shaking
- [x] 📦 All source is bundled using Webpack v4
- [x] 🌟 webpack for dev, prod, common
- [x] 🚦 `ts-loader` for compiling typescript
- [ ] 🚦 `webpack-graphql-loader` for separating gql from ts files
- [x] 💦 babel-loader for additional polyfills (browser support)
- [ ] 😎 `HappyPack` for ts-loader
- [x] 🤖 code chunking for better production performance
- [x] 🤖 Vendor.js for better developer experience
- [ ] 🤖 Vendor DLL for better performance
- [x] 🎄 Tree-shaking
- [x] 👻 DotEnv w/ friendly features [docs: DotEnv](#docs-dotenv)
- [x] ⛷ Module Aliasing [docs: Module Aliasing](#docs-module-aliases)
- [x]`terser-webpack-plugin` instead of `uglifyJS`

### Utils

- [x] 🎮 `nps` node-package-scripts removes the limitation of package.json enabling JS & //comments . Modify `/package-scripts.js` and use `nps <command>` instead of `npm run <command>`.
- [x] 🎮 `nps` npm scripts w/o a bloated package.json and limits of json [docs: NPS](#docs-nps).
- [x] 🙌 `commitizen` to help us generate beautifully formatted and consistent commit messages.
- [x] 😹 `cz-emoji` is a plugin for commitizen that adds emoji to the commit template.
- [x] 🏆 `standard-version` is a replacement for `npm version` with automatic CHANGELOG generation
Expand All @@ -74,11 +93,11 @@ nps
```

Open package.json and reset following fields:

```text
- name
- version ( It is recommended to start from 1.0.0 )
- description
- main ( "umd/typescript-lib-starter.js" => "umd/{name}.js" )
- repository.url
- author
- license ( use whatever you want )
Expand All @@ -87,10 +106,47 @@ Open package.json and reset following fields:
Now go make some changes to `src/index.ts` to see the tooling in action.

## Docs

- [HowTo make a TS Module w/ Declarations](http://www.tgrstack.com/#ts-module_articles)
- [Changelog](/CHANGELOG.md)

### docs-dotenv

Webpack is configured to use a DotEnv plugin and uses DotEnv files in specific ways.

1. Everything in `.env.example` is considered a required .env field (compiler complains)
2. `.env.development` will be used if `.env` is missing
3. In production just use .env, this is ignored by git (as it should be!)

### docs-module-aliases

Module aliases are defined in 2 places because of an issue w/ [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin/issues/34)

- Aliasing for typescript, ts-node, ts-jest, the IDE are defined in `tsconfig.json` as expected.
- Since the webpack plugin isn't working, aliases are duplicated in `./webpack/config.js`.

**Any changes to one requires a change to the other!**

### docs-nps

`node-package-scripts` removes the limitation of package.json enabling Javascript and //comments.

To change scripts modify `/scripts/` and use `nps <command>` instead of `npm run <command>`.
The entry point for nps is `./package-scripts.js` which routes to `scripts/index.js` which routes to the friendlier `scripts/__index.js`.

## FAQ

### Where are all the files in my IDE?

You must be using vscode! I have configured vscode workspace settings to hide everything from the filebrowser that you're unlikely to touch in day-to-day development.

Many files are still accessible through search (ctrl+p), such as the `./vscode/settings.json` file where you can comment/uncomment my decisions and make everything your own.

P.S. you may like the tgrstack snippets extension since its formatted following the linting preferneces here.

## References

- [Falieson's 2018 TS Lib Starter](https://github.com/falieson/2018-typescript-module)
- [Hotell's TS Lib Starter](https://github.com/Hotell/typescript-lib-starter)
- [AlexJoverm's TS Lib Starter](https://github.com/alexjoverm/typescript-library-starter)
- [Basarat's TS Lib STarter](https://github.com/basarat/ts-npm-module)
40 changes: 40 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
require('autostrip-json-comments');
const tsconfig = require("./tsconfig.json")
const moduleNameMapper = (() => {
const tsModuleNames = require("tsconfig-paths-jest")(tsconfig)
delete tsModuleNames['(.*)']

return tsModuleNames
})()

module.exports = {
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"setupFilesAfterEnv": [
"<rootDir>/jest/jest.setup.js",
],
"testURL": 'http://localhost',
"testPathIgnorePatterns": ["/node_modules/", "/.reference/", "/build/", "/scripts/"],
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec)s?)\\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"moduleDirectories": [
"node_modules",
"<rootDir>/src/"
],
"globals": {
"ts-jest": {
"diagnostics": false,
"babelConfig": true,
"tsConfig": "tsconfig.jest.json"
}
},
moduleNameMapper,
}
2 changes: 2 additions & 0 deletions jest/jest.setup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// setup file
crypto = require('@trust/webcrypto')
3 changes: 3 additions & 0 deletions jest/mocks/fileMock.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// __mocks__/fileMock.js

module.exports = 'test-file-stub';

0 comments on commit a8e6217

Please sign in to comment.