fix(lint): format globs; bump Typescript to 3.8 (#324 by @bryanstearns)

We weren't actually reformatting a lot of our source files! * Quote (and slightly simplify) format globs (in main project & boilerplate) * Add .prettierignore to suppress reformatting of our template files * Run `yarn format` to clean things up * Fix eslint errors by bumping typescript & @typescript-eslint/* versions * Improve integration test failure logging; reenable test cleanup
infinitered · Mar 17, 2020 · 3a343bb · 3a343bb
1 parent e500b5b
commit 3a343bb
Show file tree

Hide file tree

Showing 18 changed files with 95 additions and 78 deletions.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -1,6 +1,5 @@
 # Contributing to Ignite CLI
 
-
 We welcome all contributors to Ignite Bowser! This contributing guide will help you get up and running to submit your first pull request.
 
 Before submitting a pull request, you will want to make sure that your branch meets the following requirements:
@@ -34,7 +33,6 @@ $ ignite new <YOUR_BOILERPLATE_NAME> -b /full/path/to/boilerplate
 
 Now you're ready to check out a new branch and get hacking on Ignite Bowser!
 
-
 ## How to Build and Run App
 
 Refer to [this guide](https://github.com/infinitered/ignite/blob/master/.github/CONTRIBUTING.md#how-to-build-and-run-app)
@@ -49,7 +47,6 @@ To run tests from the ignite-bowser folder:
 $ yarn test
 ```
 
-
 ## ⛔ Make sure lint passes.
 
 Our CI enforces lint to pass, so we suggest you enable linting to keep your project compliant during development.
@@ -71,4 +68,4 @@ If you have to bypass lint for a special commit that you will come back and clea
 
 **Understanding Linting Errors**
 
-The linting rules can be found in the package.json's `eslintConfig`. [Regular JS errors can be found with descriptions here](http://eslint.org/docs/rules/), while [React errors and descriptions can be found here](https://github.com/yannickcr/eslint-plugin-react).
+The linting rules can be found in the package.json's `eslintConfig`. [Regular JS errors can be found with descriptions here](http://eslint.org/docs/rules/), while [React errors and descriptions can be found here](https://github.com/yannickcr/eslint-plugin-react).
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 ### Hey there! Ignite Bowser seems to be having a problem, eh?
@@ -18,10 +17,13 @@ get some help. If you've identified that it's really an Ignite Bowser issue, the
 - Delete these instructions! We don't want to look at them. ;)
 
 ---
+
 What's going on?
 
 ---
+
 Steps to reproduce
 
 ---
+
 `ignite doctor` results:
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+# Since prettier doesn't understand the templating mechanism, don't let it
+# reformat templated files
+*.ejs
diff --git a/boilerplate/app/config/env.js b/boilerplate/app/config/env.js
@@ -1,3 +1 @@
-module.exports = __DEV__
-  ? require("./env.dev")
-  : require("./env.prod")
+module.exports = __DEV__ ? require("./env.dev") : require("./env.prod")
diff --git a/boilerplate/app/screens/index.ts b/boilerplate/app/screens/index.ts
@@ -1,2 +1,2 @@
 export * from "./welcome-screen/welcome-screen"
-export * from "./demo-screen/demo-screen"
+export * from "./demo-screen/demo-screen"
diff --git a/boilerplate/app/theme/fonts/index.ts b/boilerplate/app/theme/fonts/index.ts
@@ -2,7 +2,7 @@ import * as Font from "expo-font"
 
 export const initFonts = async () => {
   await Font.loadAsync({
-    "Montserrat": require("./Montserrat-Regular.ttf"),
+    Montserrat: require("./Montserrat-Regular.ttf"),
     "Montserrat-Regular": require("./Montserrat-Regular.ttf"),
   })
 }
diff --git a/boilerplate/e2e/README.md b/boilerplate/e2e/README.md
@@ -8,16 +8,17 @@ To get your Detox tests up and running, you'll need to install some global depen
 2. Make sure you have Node installed (at least 8.6.0). If you don't:
 
 If you use NVM:
+
 ```bash
 nvm install node
 ```
 
 Or if you'd prefer to install directly from Homebrew
+
 ```bash
 brew update && brew install node
 ```
 
-
 3. Install `applesimutils, which will allow Detox to communicate with the iOS simulator:
 
 ```bash
@@ -58,4 +59,4 @@ yarn build:e2e
 yarn test:e2e
 ```
 
-For more information, make sure to check out the official [Detox Docs](https://github.com/wix/Detox/blob/master/docs/README.md)
+For more information, make sure to check out the official [Detox Docs](https://github.com/wix/Detox/blob/master/docs/README.md)
diff --git a/boilerplate/e2e/config.json b/boilerplate/e2e/config.json
@@ -1,4 +1,4 @@
 {
-    "setupFilesAfterEnv": ["./init.js"],
-    "testEnvironment": "node"
-}
+  "setupFilesAfterEnv": ["./init.js"],
+  "testEnvironment": "node"
+}
diff --git a/boilerplate/e2e/init.js b/boilerplate/e2e/init.js
@@ -1,6 +1,6 @@
-const detox = require('detox')
-const config = require('../package.json').detox
-const adapter = require('detox/runners/jest/adapter')
+const detox = require("detox")
+const config = require("../package.json").detox
+const adapter = require("detox/runners/jest/adapter")
 
 jest.setTimeout(120000)
 jasmine.getEnv().addReporter(adapter)

diff --git a/boilerplate/package.json.ejs b/boilerplate/package.json.ejs
@@ -11,10 +11,10 @@
 <% } -%>
     "compile": "tsc --noEmit -p . --pretty",
     "format": "npm-run-all format:*",
-    "format:js": "prettier --write {.,**}/*.js",
-    "format:json": "prettier --write {.,**}/*.json",
-    "format:md": "prettier --write {.,**}/*.md",
-    "format:ts": "prettier --write {.,**}/*.{ts,tsx}",
+    "format:js": "prettier --write '**/*.js'",
+    "format:json": "prettier --write '**/*.json'",
+    "format:md": "prettier --write '**/*.md'",
+    "format:ts": "prettier --write '**/*.ts{,x}'",
     "hack:types-react-navigation": "rimraf node_modules/@types/react-navigation/node_modules/@types",
     "hack:types-react-native": "rimraf node_modules/@types/react-native/node_modules/@types",
     "hack:types-react-test-renderer": "rimraf node_modules/@types/react-test-renderer/node_modules/@types",
@@ -65,8 +65,8 @@
     "@types/react": "16.8.24",
     "@types/react-native": "0.60.19",
     "@types/react-test-renderer": "16.8.3",
-    "@typescript-eslint/eslint-plugin": "^2.11.0",
-    "@typescript-eslint/parser": "^2.11.0",
+    "@typescript-eslint/eslint-plugin": "^2.24.0",
+    "@typescript-eslint/parser": "^2.24.0",
 <% if (props.includeDetox) { -%>
     "detox": "^14.0.1",
 <% } -%>
@@ -92,7 +92,7 @@
     "react-powerplug": "1.0.0",
     "rimraf": "2.6.3",
     "solidarity": "2.3.1",
-    "typescript": "3.7.3"
+    "typescript": "3.8.3"
   },
   "jest": {
 <% if (!props.useExpo) { -%>

diff --git a/package.json b/package.json
@@ -20,10 +20,10 @@
   },
   "scripts": {
     "format": "npm-run-all format:*",
-    "format:js": "prettier --write '{.,**}/*.js'",
-    "format:json": "prettier --write '{.,**}/*.json'",
-    "format:md": "prettier --write '{.,**}/*.md'",
-    "format:ts": "prettier --write '{.,**}/*.{ts,tsx}'",
+    "format:js": "prettier --write '**/*.js'",
+    "format:json": "prettier --write '**/*.json'",
+    "format:md": "prettier --write '**/*.md'",
+    "format:ts": "prettier --write '**/*.ts{,x}'",
     "lint": "eslint src test --ext .ts --fix",
     "test": "yarn build && jest --runInBand && yarn lint && yarn clean",
     "watch": "jest --runInBand --watch",

diff --git a/readme.md b/readme.md
@@ -25,11 +25,11 @@ Or watch a [live coding demo](https://www.youtube.com/watch?v=Pb8MWkQ9GOc) at Re
 
 ## Quick Start
 
-Prerequisites: 
+Prerequisites:
 
 - For classic React Native: [install the React Native CLI](https://facebook.github.io/react-native/docs/getting-started) -- choose React Native CLI
 - For Expo: [install the Expo CLI](https://facebook.github.io/react-native/docs/getting-started) -- choose Expo CLI
-  - *Note:* Expo support is experimental.
+  - _Note:_ Expo support is experimental.
 
 First, install Ignite CLI globally:
 
@@ -77,7 +77,7 @@ ignite generate component awesome-component
 
 - Creates the component/function
 - Creates a style file
-- Creates a storybook test  
+- Creates a storybook test
 - Will make the required additions to configuration files.
 
 You can also bypass the choice by providing which component type you want to create:
@@ -92,7 +92,7 @@ Or
 ignite generate component awesome-component --stateless-function
 ```
 
-### Screen generator 
+### Screen generator
 
 Generates a "hooks enabled" screen.
 
@@ -113,7 +113,7 @@ ignite generate navigator awesome-navigator
 
 - Creates the navigator
 - Will make the required additions to configuration files.
-  
+
 ### Model generator
 
 Creates a Mobx-State-Tree model.
@@ -131,7 +131,7 @@ ignite generate model awesome-model
 The built in generators aren't enough? Fret not, you can create your own generators that suit your project/company. These generators can live with the default ignite-bowser generators.
 
 Please refer to the [documentation on how to create your own generators.](https://github.com/infinitered/ignite/blob/master/docs/advanced-guides/creating-generators.md)
- 
+
 ## Explanation of folder structure
 
 The Ignite Bowser boilerplate project's structure will look similar to this:
@@ -326,4 +326,5 @@ If you are new to TypeScript, here are some of our favorite resources:
 [Ignite CLI](https://infinite.red/ignite), [Ignite Andross](https://github.com/infinitered/ignite-andross), and [Ignite Bowser](https://github.com/infinitered/ignite-bowser), as open source projects, are free to use and always will be. [Infinite Red](https://infinite.red/) offers premium Ignite CLI support and general mobile app design/development services. Email us at [hello@infinite.red](mailto:hello@infinite.red) to get in touch with us for more details.
 
 ## Contribute
+
 #### [Contribute to Ignite Bowser](https://github.com/infinitered/ignite-bowser/blob/master/.github/CONTRIBUTING.md) - Getting up and running for your first pull request
diff --git a/src/commands/generate/component.ts b/src/commands/generate/component.ts
@@ -8,7 +8,7 @@ export const run = async function(toolbox: GluegunToolbox) {
 
   // validation
   if (isBlank(parameters.first)) {
-    print.info('A name is required.')
+    print.info("A name is required.")
     print.info(`ignite generate component <name>\n`)
     return
   }
@@ -18,11 +18,11 @@ export const run = async function(toolbox: GluegunToolbox) {
     const componentTypes = [
       {
         name: "functionComponent",
-        message: "React.FunctionComponent, aka \"hooks component\"",
+        message: 'React.FunctionComponent, aka "hooks component"',
       },
       {
         name: "statelessFunction",
-        message: "Stateless function, aka the \"classic\" ignite-bowser component",
+        message: 'Stateless function, aka the "classic" ignite-bowser component',
       },
     ]
 
@@ -44,29 +44,25 @@ export const run = async function(toolbox: GluegunToolbox) {
 
   const jobs = [
     {
-      template: 'component.story.tsx.ejs',
-      target: `app/components/${name}/${name}.story.tsx`
+      template: "component.story.tsx.ejs",
+      target: `app/components/${name}/${name}.story.tsx`,
     },
     {
-      template: 'styles.ts.ejs',
-      target: `app/components/${name}/${name}.styles.ts`
-    }
+      template: "styles.ts.ejs",
+      target: `app/components/${name}/${name}.styles.ts`,
+    },
   ]
 
   if (componentType === "functionComponent" || parameters.options["function-component"]) {
-    jobs.push(
-      {
-        template: 'function-component.tsx.ejs',
-        target: `app/components/${name}/${name}.tsx`
-      }
-    )
+    jobs.push({
+      template: "function-component.tsx.ejs",
+      target: `app/components/${name}/${name}.tsx`,
+    })
   } else if (componentType === "statelessFunction" || parameters.options["stateless-function"]) {
-    jobs.push(
-      {
-        template: 'component.tsx.ejs',
-        target: `app/components/${name}/${name}.tsx`
-      }
-    )
+    jobs.push({
+      template: "component.tsx.ejs",
+      target: `app/components/${name}/${name}.tsx`,
+    })
   }
 
   await ignite.copyBatch(toolbox, jobs, props)
@@ -77,16 +73,16 @@ export const run = async function(toolbox: GluegunToolbox) {
 
   if (!filesystem.exists(barrelExportPath)) {
     const msg =
-    `No '${barrelExportPath}' file found. Can't export component.` +
-    `Export your new component manually.`
+      `No '${barrelExportPath}' file found. Can't export component.` +
+      `Export your new component manually.`
     print.warning(msg)
     process.exit(1)
   }
   await patching.append(barrelExportPath, exportToAdd)
 
   // wire up example
   await patching.prepend(
-    './storybook/storybook-registry.ts',
-    `require("../app/components/${name}/${name}.story")\n`
+    "./storybook/storybook-registry.ts",
+    `require("../app/components/${name}/${name}.story")\n`,
   )
 }
diff --git a/src/commands/generate/generate.ts b/src/commands/generate/generate.ts
@@ -5,7 +5,7 @@
  *
  * We mainly want this command to allow for the "ignite g" alias.
  */
-export const alias = ['g']
+export const alias = ["g"]
 export const run = () => {
   throw new Error(`
     Error with "ignite generate" in ignite-bowser

diff --git a/src/commands/generate/navigator.ts b/src/commands/generate/navigator.ts
@@ -95,8 +95,7 @@ export const run = async function(toolbox: GluegunToolbox) {
   }
 
   // which screens to include in navigator?
-  let pascalNavigators =
-    parameters.options.navigators && parameters.options.navigators.split(",")
+  let pascalNavigators = parameters.options.navigators && parameters.options.navigators.split(",")
   if (!pascalNavigators) {
     const allKebabNavigators = list(`${process.cwd()}/app/navigation/`).filter(
       n => n.includes("-navigator.") && !n.includes("stateful-") && !n.includes("root-"),

diff --git a/src/commands/generate/screen.ts b/src/commands/generate/screen.ts
@@ -45,8 +45,8 @@ export const run = async function(toolbox: GluegunToolbox) {
 
   if (!filesystem.exists(barrelExportPath)) {
     const msg =
-    `No '${barrelExportPath}' file found. Can't export screen.` +
-    `Export your new screen manually.`
+      `No '${barrelExportPath}' file found. Can't export screen.` +
+      `Export your new screen manually.`
     print.warning(msg)
     process.exit(1)
   }