Full & fast typescript support

.fixtures/test-app-ts/src/components/App.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+// text mapbox-gl and uglify ❤️
+import mapboxgl from 'mapbox-gl'
+// test packages written for newer node version
+import ky from 'ky'
+import { ReactComponent as Logo } from 'images/logo.svg'
+import mmm from 'images/mmmpiselli.jpg'
+import styles from './App.module.css'
+
+// test decorators
+@observer
+export class App extends React.Component {
+  // test class properties
+  state = {}
+
+  render() {
+    // test object spread
+    const { ...props } = this.props
+
+    // Test delicate modules
+    console.log(mapboxgl, ky)
+
+    return (
+      <div {...props}>
+        {/* test svgs */}
+        <Logo className="w5" />
+
+        {/* test images */}
+        <img src={mmm} className="fixed top-0 right-0" />
+
+        {/* test css modules */}
+        <div className={styles.text}>Hello world</div>
+      </div>
+    )
+  }
+}

.fixtures/test-app/package.json

@@ -12,30 +12,32 @@
   "browserslist": {
     "production": [
       ">0.25%",
-      "ie 11",
+      "not ie 11",
       "not op_mini all"
     ],
     "development": [
-      "last 1 Chrome version"
+      "last 1 Chrome version",
+      "last 1 Firefox version",
+      "last 1 Safari version"
     ]
   },
   "devDependencies": {
-    "accurapp-scripts": "/Users/accurat_mf/Code/accurapp/packages/accurapp-scripts",
-    "babel-preset-accurapp": "/Users/accurat_mf/Code/accurapp/packages/babel-preset-accurapp",
-    "eslint-config-accurapp": "/Users/accurat_mf/Code/accurapp/packages/eslint-config-accurapp",
-    "webpack-preset-accurapp": "/Users/accurat_mf/Code/accurapp/packages/webpack-preset-accurapp"
+    "accurapp-scripts": "file:../packages/accurapp-scripts",
+    "babel-preset-accurapp": "file:../packages/babel-preset-accurapp",
+    "eslint-config-accurapp": "file:../packages/eslint-config-accurapp",
+    "webpack-preset-accurapp": "file:../packages/webpack-preset-accurapp"
   },
   "dependencies": {
     "@accurat/tachyons-lite": "^1.0.4",
-    "d3": "^5.7.0",
-    "ky": "^0.4.1",
+    "d3": "^5.9.2",
+    "ky": "^0.9.0",
     "lodash": "^4.17.11",
-    "mapbox-gl": "^0.50.0",
+    "mapbox-gl": "^0.53.1",
     "mobx": "^5.5.1",
     "mobx-react": "^5.3.2",
     "modern-normalize": "^0.5.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "tachyons-extra": "^1.0.3"
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
+    "tachyons-extra": "^1.1.3"
   }
 }

.fixtures/test-app/src/components/App.js

@@ -10,7 +10,7 @@ import styles from './App.module.css'
 
 // test decorators
 @observer
-export default class App extends React.Component {
+export class App extends React.Component {
   // test class properties
   state = {}
 

MIGRATION-GUIDE.md

@@ -1,15 +1,17 @@
-# Migrating to AccurApp v4.x
+# Migrating to Accurapp v4.x
 
-This is the migration guide for upgrading from AccurApp v3.x to v4.x. It is a major update with a couple of breaking changes.
+This is the migration guide for upgrading from Accurapp v3.x to v4.x. It is a major update with a couple of breaking changes.
 
 - The `webpack-preset-accurapp` changed its default export, this is the new basic `webpack.config.js`:
+
 ```js
 const { buildWebpackConfig } = require('webpack-preset-accurapp')
 
 module.exports = buildWebpackConfig()
 ```
 
 - You will need to explicitly set the browserslist in your `package.json`, this will affect Babel and Autoprefixer, this is the suggested config for example:
+
 ```json
   "browserslist": {
     "production": [
@@ -18,33 +20,58 @@ module.exports = buildWebpackConfig()
       "not op_mini all"
     ],
     "development": [
-      "last 1 Chrome version"
+      "last 1 Chrome version",
+      "last 1 Firefox version",
+      "last 1 Safari version"
     ]
   }
 ```
 
 - You can now configure Babel, make a new `.babelrc` in the project root with these contents
+
 ```json
 {
   "presets": ["accurapp"]
 }
 ```
+
 and run `yarn add --dev babel-preset-accurapp`
 
 - setting the `NODE_ENV` from the outside is being deprecated, it is preferred to use different Env variables or some argv arguments.
-So the previous CI script for staging
+  So the previous CI script for staging
+
 ```yml
-  script:
-    - NODE_ENV=staging yarn build
+script:
+  - NODE_ENV=staging yarn build
 ```
+
 now becomes
+
 ```yml
-  script:
-    - GENERATE_SOURCEMAP=true yarn build
+script:
+  - GENERATE_SOURCEMAP=true yarn build
 ```
+
 This is more explicit.
 
 - add the lint script to scripts section in the package.json:
+
 ```json
 "lint": "accurapp-scripts lint",
 ```
+
+# Migrating to Typescript in v4.1.x
+
+Migrate from the old way to use typescript to the new way
+
+- `rm tslint.json`
+- `yarn remove typescript webpack-blocks-ts`
+- remove the `typescript()` block from `webpack.config.js`, a simple webpack config should look something like this
+
+```js
+const { buildWebpackConfig } = require('webpack-preset-accurapp')
+module.exports = buildWebpackConfig()
+```
+
+- `yarn upgrade-interactive --latest` and upgrade accurapp
+- run `yarn start`, a new `tsconfig.json` and `types.d.ts` should be created

README.md

@@ -1,6 +1,6 @@
-## ![AccurApp](logo.png)
+## ![Accurapp](logo.png)
 
-**AccurApp** is a project kickstarter customized for the specific needs of [Accurat](http://accurat.it/).
+**Accurapp** is a project kickstarter customized for the specific needs of [Accurat](http://accurat.it/).
 
 It was originally forked from [create-react-app](https://github.com/facebookincubator/create-react-app/),
 but significant amounts of code were rewritten and simplified. Here are some shiny features:
@@ -21,7 +21,7 @@ but significant amounts of code were rewritten and simplified. Here are some shi
   - [Customizing Webpack](#customizing-webpack)
   - [Customizing Eslint](#customizing-eslint)
   - [Customizing Babel](#customizing-babel)
-  - [Setting Env Variables](#cetting-env-variables)
+  - [Setting Env Variables](#setting-env-variables)
   - [Customizing Env Variables](#customizing-env-variables)
 - [Available Env Variables](#available-env-variables)
 - [Project Scaffolding](#project-scaffolding)
@@ -45,9 +45,13 @@ but significant amounts of code were rewritten and simplified. Here are some shi
 ## Creating a new project
 Having installed node (`brew install node`), run this command in the directory where you want to create the `project-name` folder. This command will also handle the project scaffolding, the dependencies installation, and the git initialization with a first commit.
 ```sh
-npx --ignore-existing create-accurapp project-name
+npx create-accurapp project-name
 ```
-_(**Note**: if it says `npx: command not found` update your node version by running `brew upgrade node`)_
+
+> **Note**: if it says `npx: command not found` update your node version by running `brew upgrade node`
+
+> **Note:** If your project fails to start right after installing, npx may be using a cached version of `create-accurapp`.
+> Remove previously installed versions with `npm uninstall -g create-accurapp`
 
 Then you just `cd project-name`, run `yarn start` and start creating awesome stuff! 🎉
 
@@ -212,9 +216,11 @@ SECRET=djah7s9ihdias7hdsaodhoas8hd
 
 #### Customizing Env Variables
 Here are the available Env Variables for the **yarn start** script:
+- **BROWSER** - If it should open local url in the browser in `yarn start` (default `true`)
 - **HOST** - The host of the web server (default `localhost`)
 - **PORT** - The port of the web server (default `8000`)
 - **HTTPS** - Set this to `true` if you wish to use HTTPS in development (default `false`)
+- **CI** - Set this to true to skip the check for newer accurapp versions (default `false`)
 
 Here are instead the available Env Variables for the **yarn build** script:
 - **PUBLIC_URL** - Use this if the application is hosted on a subpath, it will be used to resolve assets (default `/`).
@@ -234,6 +240,7 @@ render() {
 
 ## Available Env Variables
 These are the Env Variables that Accurapp provides you, you cannot modify them directly:
+- **NODE_ENV** - It is equal to `'development'` in the `yarn start` command and `'production'` in the `yarn build` command
 - **LATEST_TAG** - The latest git tag you made, useful if you want to display a build version in your application
 - **LATEST_COMMIT** - The latest commit hash, useful if you want to display a more specific build version
 - **LATEST_COMMIT_TIMESTAMP** - The UTC timestamp of the latest commit, you can use it like this:
@@ -418,91 +425,37 @@ Furthermore it optimizes and minifies the svg using [svgo](https://github.com/sv
 <details>
 <summary>How do I enable TypeScript?</summary>
 
-TypesScript is not enabled by default in accurapp for now, this is what you have to do.
-
-Do `yarn add --dev webpack-blocks-ts`.
-
-Then, in `webpack.config.js` replace all content with:
-```js
-const { buildWebpackConfig } = require('webpack-preset-accurapp')
-const typescript = require('webpack-blocks-ts')
+TypesScript is not enabled by default in accurapp, to bootstrap a project with typescript you will have to run:
 
-module.exports = buildWebpackConfig([
-  typescript({ silent: true }),
-])
-```
-
-Then add a `tsconfig.json` in the project root, a default tsconfig looks like this:
-```json
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": ".",
-    "outDir": "build",
-    "module": "esnext",
-    "target": "es5",
-    "lib": ["es6", "es7", "es2017", "esnext", "dom"],
-    "sourceMap": true,
-    "allowJs": true,
-    "jsx": "react",
-    "moduleResolution": "node",
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": false,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": false,
-    "experimentalDecorators": true
-  },
-  "exclude": [
-    "node_modules",
-    "build",
-    "webpack.config.js"
-  ]
-}
-```
 
-If you really need it, you can also add the `allowSyntheticDefaultImports` flag and set it to `true`, and remove `ESNext` from the `lib` compiler option. See the [TypeScript compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more on this.
-
-Add as devDependencies typescript and the types of the libraries you're using, for example `yarn add --dev typescript @types/react @types/react-dom`
-
-Rename `index.js` to `main.tsx` and edit the first two imports like this:
-```js
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-```
-
-Add a new `index.js` file and simply add
-```js
-import 'main'
+```sh
+npx create-accurapp project-name --typescript
 ```
 
-Rename `src/components/App.js` to `src/components/App.tsx` and inside it, edit the `React` import like this:
+> **Note:** If your project fails to start right after installing, npx may be using a cached version of `create-accurapp`.
+> Remove previously installed versions with `npm uninstall -g create-accurapp`
 
-```js
-import * as React from 'react'
-```
+Otherwise, if you have an existing javascript project and want to switch to typescript, you will just have to rename the `index.js` to `index.tsx`. On the next `yarn start`, typescript will be installed as a dependency, a `tsconfig.json` and a `types.d.ts` will be created, and you will be able to do your magic in typescript! 🧙‍♂️
 
-Ready to go!
-
-Please remember that the first two items to annonate for class components are its props and local state. So to do it correctly you would need something along the lines of
+Here is how a basic typescript component should look like:
 
 ```ts
-type Props = {}
-type LocalState = {}
-// or
-// interface Props {}
-// interface LocalState {}
+interface Props {}
+interface State {}
+
+export class App extends React.Component<Props, State> {
+  state = {}
 
-export default class App extends React.Component<Props, LocalState> {
   render() {
     return <div>...</div>
   }
 }
 ```
 
 See the [Typescript JSX guide](https://www.typescriptlang.org/docs/handbook/jsx.html) for more info.
+
+> **Note**: Constant enums and namespaces are not supported.
+
 </details>
 
 <details>
@@ -569,7 +522,9 @@ First of all, we're sorry for you, IE is an asshole.
 
 You first need to edit the `package.json`'s `"browserslist"` field, and change `not ie 11` to `ie 11`. If you need to test in local you can also add `ie 11` to the development browsers.
 
-You will now have to provide polyfills for the newer apis you're using, for example [the fetch polyfill](https://github.com/github/fetch), or the [css variables ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill). Also make sure the tools you're using support IE11, for example MobX v5 has no support for IE11.
+You will now have to provide polyfills for the newer apis you're using, for example [the fetch polyfill](https://github.com/github/fetch), or the [css variables ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill). Or you can use [react-app-polyfill](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill) which is a collection of the most common polyfills.
+
+Also make sure the tools you're using support IE11, for example MobX v5 has no support for IE11.
 
 Now hopefully you will not have any js errors in IE11 (if not, call Dr. Fugaro).
 
@@ -742,6 +697,6 @@ Please, see [`@joshbuchea`'s head repo](https://gethead.info/).
 </details>
 
 ## Contributing
-If you make some edits and wish to test them locally you can run `yarn create-test-app` which creates a test app using the local packages.
+If you make some edits and wish to test them locally you can run `yarn test` for an end-to-end test, or `yarn create-test-app` which creates a test app using the local packages.
 
 To publish the updated packages, run `yarn run publish`, lerna will detect the packages you changed and ask you for the new version number.

lerna.json

@@ -1,5 +1,5 @@
 {
-  "lerna": "3.13.0",
+  "lerna": "3.13.1",
   "version": "independent",
   "npmClient": "yarn",
   "useWorkspaces": true

package.json

@@ -4,9 +4,10 @@
   "scripts": {
     "clean": "rm -rf node_modules; rm -rf packages/*/node_modules; rm yarn.lock; yarn cache clean",
     "lint": "node node_modules/eslint/bin/eslint.js packages",
-    "create-test-app": "rm -rf test-app; node packages/create-accurapp test-app --testing --no-install; cp -r .fixtures/test-app .; (cd test-app/; yarn)",
-    "create-test-app-build": "(yarn create-test-app; cd test-app/; yarn build)",
-    "create-test-app-start": "(yarn create-test-app; cd test-app/; yarn start)",
+    "test": "./test/e2e.sh",
+    "create-test-app": "./test/create-test-app.sh",
+    "create-test-app-build": "(yarn create-test-app && cd test-app/ && yarn build)",
+    "create-test-app-start": "(yarn create-test-app && cd test-app/ && BROWSER=false yarn start)",
     "publish": "is-git-status-clean && lerna publish"
   },
   "workspaces": [
@@ -19,6 +20,6 @@
   "devDependencies": {
     "eslint-config-accurapp": "./packages/eslint-config-accurapp",
     "is-git-status-clean": "1.0.0",
-    "lerna": "3.13.0"
+    "lerna": "3.13.1"
   }
 }

packages/accurapp-scripts/README.md

@@ -1,5 +1,5 @@
 # accurapp-scripts
 
-This package includes the executable scripts used by AccurApp.
+This package includes the executable scripts used by Accurapp.
 
 [For more info, checkout out the main documentation.](https://github.com/accurat/accurapp)