[legacy-framework] (newapp) Add .editorconfig and .vscode extension recomendations

package.json

@@ -62,6 +62,7 @@
     "@babel/preset-env": "7.13.5",
     "@babel/preset-react": "7.12.13",
     "@babel/preset-typescript": "7.13.0",
+    "@juanm04/cpx": "2.0.0",
     "@manypkg/cli": "0.17.0",
     "@preconstruct/cli": "2.0.5",
     "@preconstruct/next": "2.0.0",
@@ -81,7 +82,6 @@
     "@types/flush-write-stream": "1.0.0",
     "@types/from2": "2.3.0",
     "@types/fs-extra": "9.0.6",
-    "@types/fs-readdir-recursive": "1.0.0",
     "@types/gulp-if": "0.0.33",
     "@types/htmlescape": "^1.1.1",
     "@types/ink-spinner": "3.0.0",
@@ -122,7 +122,6 @@
     "babel-plugin-tester": "10.0.0",
     "babel-plugin-transform-inline-environment-variables": "0.4.3",
     "concurrently": "6.0.0",
-    "cpx": "1.5.0",
     "cross-env": "7.0.3",
     "cypress": "6.2.1",
     "debug": "4.3.1",

packages/generator/.gitignore

@@ -13,3 +13,4 @@ tmp
 _app
 
 !templates/**/.env*
+!templates/**/.vscode

packages/generator/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "dev": "yarn build:templates --watch",
     "buildpkg": "yarn build:templates",
-    "build:templates": "cpx --clean \"templates/**/{.*,*}\" dist/templates",
+    "build:templates": "cpx --clean --include-hidden \"templates/**\" dist/templates",
     "test": "jest",
     "test:watch": "jest --watch"
   },
@@ -40,7 +40,6 @@
     "diff": "5.0.0",
     "enquirer": "2.3.6",
     "fs-extra": "^9.1.0",
-    "fs-readdir-recursive": "1.1.0",
     "got": "^11.8.1",
     "jscodeshift": "0.11.0",
     "mem-fs": "1.2.0",

packages/generator/src/generator.ts

@@ -5,7 +5,6 @@ import {log} from "@blitzjs/display"
 import Enquirer from "enquirer"
 import {EventEmitter} from "events"
 import * as fs from "fs-extra"
-import readDirRecursive from "fs-readdir-recursive"
 import j from "jscodeshift"
 import {Collection} from "jscodeshift/src/Collection"
 import {create as createStore, Store} from "mem-fs"
@@ -15,6 +14,7 @@ import getBabelOptions, {Overrides} from "recast/parsers/_babel_options"
 import * as babelParser from "recast/parsers/babel"
 import {ConflictChecker} from "./conflict-checker"
 import {pipe} from "./utils/pipe"
+import {readdirRecursive} from "./utils/readdir-recursive"
 const debug = require("debug")("blitz:generator")
 
 export const customTsParser = {
@@ -33,6 +33,11 @@ export interface GeneratorOptions {
   useTs?: boolean
 }
 
+export interface SourceRootType {
+  type: "template" | "absolute"
+  path: string
+}
+
 const alwaysIgnoreFiles = [".blitz", ".DS_Store", ".git", ".next", ".now", "node_modules"]
 const ignoredExtensions = [".ico", ".png", ".jpg"]
 const tsExtension = /\.(tsx?)$/
@@ -132,7 +137,14 @@ export abstract class Generator<
   unsafe_disableConflictChecker = false
   returnResults: boolean = false
 
-  abstract sourceRoot: string
+  /**
+   * When `type: 'absolute'`, it's an absolute path
+   * When `type: 'template'`, is the path type `templates/`.
+   *
+   * @example {type: 'absolue', path: './src/app'} => `./src/app`
+   * @example {type: 'template', path: 'app'} => `templates/app`
+   */
+  abstract sourceRoot: SourceRootType
 
   constructor(protected readonly options: T) {
     super()
@@ -229,7 +241,7 @@ export abstract class Generator<
 
   async write(): Promise<void> {
     debug("Generator.write...")
-    const paths = readDirRecursive(this.sourcePath(), (name) => {
+    const paths = await readdirRecursive(this.sourcePath(), (name) => {
       const additionalFilesToIgnore = this.filesToIgnore()
       return ![...alwaysIgnoreFiles, ...additionalFilesToIgnore].includes(name)
     })
@@ -270,8 +282,22 @@ export abstract class Generator<
     // expose postWrite hook, no default implementation
   }
 
+  preventFileFromLogging(_file: string): boolean {
+    // no default implementation
+    return false
+  }
+
   sourcePath(...paths: string[]): string {
-    return path.join(this.sourceRoot, ...paths)
+    if (this.sourceRoot.type === "absolute") {
+      return path.join(this.sourceRoot.path, ...paths)
+    } else {
+      return path.join(
+        __dirname,
+        process.env.NODE_ENV === "test" ? "../templates" : "./templates",
+        this.sourceRoot.path,
+        ...paths,
+      )
+    }
   }
 
   destinationPath(...paths: string[]): string {
@@ -316,9 +342,16 @@ export abstract class Generator<
     }
 
     if (!this.returnResults) {
-      this.performedActions.sort().forEach((action) => {
-        console.log(action)
-      })
+      this.performedActions
+        .sort()
+        .filter((action) => {
+          // Each action is something like this:
+          // "\u001b[32mCREATE   \u001b[39m .env"
+          const actionSplitted = action.split(/ +/g)
+          const filename = actionSplitted[actionSplitted.length - 1]
+          return !this.preventFileFromLogging(filename)
+        })
+        .forEach((action) => console.log(action))
     }
 
     if (!this.options.dryRun) {

packages/generator/src/generators/app-generator.ts

@@ -2,9 +2,9 @@ import {log} from "@blitzjs/display"
 import chalk from "chalk"
 import spawn from "cross-spawn"
 import {readJSONSync, writeJson} from "fs-extra"
-import {join, resolve} from "path"
+import {join} from "path"
 import username from "username"
-import {Generator, GeneratorOptions} from "../generator"
+import {Generator, GeneratorOptions, SourceRootType} from "../generator"
 import {fetchLatestVersionsFor} from "../utils/fetch-latest-version-for"
 import {getBlitzDependencyVersion} from "../utils/get-blitz-dependency-version"
 
@@ -24,7 +24,7 @@ export interface AppGeneratorOptions extends GeneratorOptions {
 }
 
 export class AppGenerator extends Generator<AppGeneratorOptions> {
-  sourceRoot: string = resolve(__dirname, "./templates/app")
+  sourceRoot: SourceRootType = {type: "template", path: "app"}
   // Disable file-level prettier because we manually run prettier at the end
   prettierDisabled = true
   packageInstallSuccess: boolean = false
@@ -232,6 +232,10 @@ export class AppGenerator extends Generator<AppGeneratorOptions> {
     }
   }
 
+  preventFileFromLogging(file: string): boolean {
+    return file.startsWith(".vscode") || file === ".editorconfig" || file.endsWith("/.keep")
+  }
+
   commitChanges() {
     const commitSpinner = log.spinner(log.withBrand("Committing your app")).start()
     const commands: Array<[string, string[], object]> = [

packages/generator/src/generators/form-generator.ts

@@ -1,5 +1,4 @@
-import {join} from "path"
-import {Generator, GeneratorOptions} from "../generator"
+import {Generator, GeneratorOptions, SourceRootType} from "../generator"
 import {camelCaseToKebabCase} from "../utils/inflector"
 
 export interface FormGeneratorOptions extends GeneratorOptions {
@@ -15,7 +14,7 @@ export interface FormGeneratorOptions extends GeneratorOptions {
 
 export class FormGenerator extends Generator<FormGeneratorOptions> {
   static subdirectory = "queries"
-  sourceRoot = join(__dirname, "./templates/form")
+  sourceRoot: SourceRootType = {type: "template", path: "form"}
 
   private getId(input: string = "") {
     if (!input) return input

packages/generator/src/generators/model-generator.ts

@@ -2,7 +2,7 @@ import {log} from "@blitzjs/display"
 import {spawn} from "cross-spawn"
 import which from "npm-which"
 import path from "path"
-import {Generator, GeneratorOptions} from "../generator"
+import {Generator, GeneratorOptions, SourceRootType} from "../generator"
 import {Field} from "../prisma/field"
 import {Model} from "../prisma/model"
 import {matchBetween} from "../utils/match-between"
@@ -15,7 +15,7 @@ export interface ModelGeneratorOptions extends GeneratorOptions {
 export class ModelGenerator extends Generator<ModelGeneratorOptions> {
   // default subdirectory is /app/[name], we need to back out of there to generate the model
   static subdirectory = "../.."
-  sourceRoot: string = ""
+  sourceRoot: SourceRootType = {type: "absolute", path: ""}
   unsafe_disableConflictChecker = true
 
   async getTemplateValues() {}

packages/generator/src/generators/mutation-generator.ts

@@ -1,5 +1,4 @@
-import {join} from "path"
-import {Generator, GeneratorOptions} from "../generator"
+import {Generator, GeneratorOptions, SourceRootType} from "../generator"
 import {camelCaseToKebabCase} from "../utils/inflector"
 
 export interface MutationGeneratorOptions extends GeneratorOptions {
@@ -9,7 +8,7 @@ export interface MutationGeneratorOptions extends GeneratorOptions {
 
 export class MutationGenerator extends Generator<MutationGeneratorOptions> {
   static subdirectory = "mutation"
-  sourceRoot = join(__dirname, "./templates/mutation")
+  sourceRoot: SourceRootType = {type: "template", path: "mutation"}
 
   // eslint-disable-next-line require-await
   async getTemplateValues() {

packages/generator/src/generators/mutations-generator.ts

@@ -1,5 +1,4 @@
-import {join} from "path"
-import {Generator, GeneratorOptions} from "../generator"
+import {Generator, GeneratorOptions, SourceRootType} from "../generator"
 import {camelCaseToKebabCase} from "../utils/inflector"
 
 export interface MutationsGeneratorOptions extends GeneratorOptions {
@@ -15,7 +14,7 @@ export interface MutationsGeneratorOptions extends GeneratorOptions {
 
 export class MutationsGenerator extends Generator<MutationsGeneratorOptions> {
   static subdirectory = "mutations"
-  sourceRoot = join(__dirname, "./templates/mutations")
+  sourceRoot: SourceRootType = {type: "template", path: "mutations"}
 
   private getId(input: string = "") {
     if (!input) return input

packages/generator/src/generators/page-generator.ts

@@ -1,5 +1,4 @@
-import {join} from "path"
-import {Generator, GeneratorOptions} from "../generator"
+import {Generator, GeneratorOptions, SourceRootType} from "../generator"
 import {camelCaseToKebabCase} from "../utils/inflector"
 
 export interface PageGeneratorOptions extends GeneratorOptions {
@@ -15,7 +14,7 @@ export interface PageGeneratorOptions extends GeneratorOptions {
 
 export class PageGenerator extends Generator<PageGeneratorOptions> {
   static subdirectory = "pages"
-  sourceRoot = join(__dirname, "./templates/page")
+  sourceRoot: SourceRootType = {type: "template", path: "page"}
 
   private getId(input: string = "") {
     if (!input) return input

packages/generator/src/generators/queries-generator.ts

@@ -1,5 +1,4 @@
-import {join} from "path"
-import {Generator, GeneratorOptions} from "../generator"
+import {Generator, GeneratorOptions, SourceRootType} from "../generator"
 import {camelCaseToKebabCase} from "../utils/inflector"
 
 export interface QueriesGeneratorOptions extends GeneratorOptions {
@@ -15,7 +14,7 @@ export interface QueriesGeneratorOptions extends GeneratorOptions {
 
 export class QueriesGenerator extends Generator<QueriesGeneratorOptions> {
   static subdirectory = "queries"
-  sourceRoot = join(__dirname, "./templates/queries")
+  sourceRoot: SourceRootType = {type: "template", path: "queries"}
 
   private getId(input: string = "") {
     if (!input) return input

packages/generator/src/generators/query-generator.ts

@@ -1,5 +1,4 @@
-import {join} from "path"
-import {Generator, GeneratorOptions} from "../generator"
+import {Generator, GeneratorOptions, SourceRootType} from "../generator"
 import {camelCaseToKebabCase} from "../utils/inflector"
 
 export interface QueryGeneratorOptions extends GeneratorOptions {
@@ -9,7 +8,7 @@ export interface QueryGeneratorOptions extends GeneratorOptions {
 
 export class QueryGenerator extends Generator<QueryGeneratorOptions> {
   static subdirectory = "query"
-  sourceRoot = join(__dirname, "./templates/query")
+  sourceRoot: SourceRootType = {type: "template", path: "query"}
 
   // eslint-disable-next-line require-await
   async getTemplateValues() {

packages/generator/src/utils/readdir-recursive.ts

@@ -0,0 +1,24 @@
+import {promises as fs} from "fs"
+import path from "path"
+
+type Filter = (name: string, dir: string) => boolean
+
+export async function readdirRecursive(root: string, filter?: Filter, dir = ""): Promise<string[]> {
+  const absoluteDir = path.resolve(root, dir)
+  const dirStats = await fs.stat(absoluteDir)
+
+  if (dirStats.isDirectory()) {
+    let entries = await fs.readdir(absoluteDir)
+
+    if (filter) {
+      entries = entries.filter((name) => filter(name, dir))
+    }
+
+    const recursiveList = await Promise.all(
+      entries.map((name) => readdirRecursive(root, filter, path.join(dir, name))),
+    )
+    return recursiveList.flat(Infinity) as string[]
+  } else {
+    return [dir]
+  }
+}

packages/generator/templates/app/.editorconfig

@@ -0,0 +1,11 @@
+# https://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

packages/generator/templates/app/.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "mikestead.dotenv",
+    "mgmcdermott.vscode-language-babel",
+    "orta.vscode-jest",
+    "prisma.prisma"
+  ],
+  "unwantedRecommendations": []
+}

packages/generator/templates/app/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

packages/installer/src/executors/new-file-executor.tsx

@@ -1,4 +1,4 @@
-import {Generator, GeneratorOptions} from "@blitzjs/generator"
+import {Generator, GeneratorOptions, SourceRootType} from "@blitzjs/generator"
 import {Box, Text} from "ink"
 import {useEffect, useState} from "react"
 import * as React from "react"
@@ -26,14 +26,14 @@ interface TempGeneratorOptions extends GeneratorOptions {
 }
 
 class TempGenerator extends Generator<TempGeneratorOptions> {
-  sourceRoot: string
+  sourceRoot: SourceRootType
   targetDirectory: string
   templateValues: any
   returnResults = true
 
   constructor(options: TempGeneratorOptions) {
     super(options)
-    this.sourceRoot = options.templateRoot
+    this.sourceRoot = {type: "absolute", path: options.templateRoot}
     this.templateValues = options.templateValues
     this.targetDirectory = options.targetDirectory || "."
   }