[legacy-framework] Update new apps dependencies, format files, improve readmes

packages/generator/templates/app/.prettierignore

@@ -6,4 +6,6 @@ db/migrations
 .next
 .blitz
 .yarn
-.pnp*
+.pnp.*
+node_modules
+.blitz.config.compiled.js

packages/generator/templates/app/README.md

@@ -66,65 +66,65 @@ Here is the starting structure of your app.
 ```
 __name__
 ├── app/
-│   ├── api/
-│   ├── auth/
-│   │   ├── components/
-│   │   │   ├── LoginForm.tsx
-│   │   │   └── SignupForm.tsx
-│   │   ├── mutations/
-│   │   │   ├── changePassword.ts
-│   │   │   ├── forgotPassword.test.ts
-│   │   │   ├── forgotPassword.ts
-│   │   │   ├── login.ts
-│   │   │   ├── logout.ts
-│   │   │   ├── resetPassword.test.ts
-│   │   │   ├── resetPassword.ts
-│   │   │   └── signup.ts
-│   │   ├── pages/
-│   │   │   ├── forgot-password.tsx
-│   │   │   ├── login.tsx
-│   │   │   ├── reset-password.tsx
-│   │   │   └── signup.tsx
-│   │   └── validations.ts
-│   ├── core/
-│   │   ├── components/
-│   │   │   ├── Form.tsx
-│   │   │   └── LabeledTextField.tsx
-│   │   ├── hooks/
-│   │   │   └── useCurrentUser.ts
-│   │   └── layouts/
-│   │       └── Layout.tsx
-│   ├── pages/
-│   │   ├── 404.tsx
-│   │   ├── _app.tsx
-│   │   ├── _document.tsx
-│   │   ├── index.test.tsx
-│   │   └── index.tsx
-│   └── users/
-│       └── queries/
-│           └── getCurrentUser.ts
+│   ├── api/
+│   ├── auth/
+│   │   ├── components/
+│   │   │   ├── LoginForm.tsx
+│   │   │   └── SignupForm.tsx
+│   │   ├── mutations/
+│   │   │   ├── changePassword.ts
+│   │   │   ├── forgotPassword.test.ts
+│   │   │   ├── forgotPassword.ts
+│   │   │   ├── login.ts
+│   │   │   ├── logout.ts
+│   │   │   ├── resetPassword.test.ts
+│   │   │   ├── resetPassword.ts
+│   │   │   └── signup.ts
+│   │   ├── pages/
+│   │   │   ├── forgot-password.tsx
+│   │   │   ├── login.tsx
+│   │   │   ├── reset-password.tsx
+│   │   │   └── signup.tsx
+│   │   └── validations.ts
+│   ├── core/
+│   │   ├── components/
+│   │   │   ├── Form.tsx
+│   │   │   └── LabeledTextField.tsx
+│   │   ├── hooks/
+│   │   │   └── useCurrentUser.ts
+│   │   └── layouts/
+│   │       └── Layout.tsx
+│   ├── pages/
+│   │   ├── _app.tsx
+│   │   ├── _document.tsx
+│   │   ├── 404.tsx
+│   │   ├── index.test.tsx
+│   │   └── index.tsx
+│   └── users/
+│       └── queries/
+│           └── getCurrentUser.ts
 ├── db/
-│   ├── index.ts
-│   ├── schema.prisma
-│   └── seeds.ts
+│   ├── migrations/
+│   ├── index.ts
+│   ├── schema.prisma
+│   └── seeds.ts
 ├── integrations/
 ├── mailers/
-│   └── forgotPasswordMailer.ts
+│   └── forgotPasswordMailer.ts
 ├── public/
-│   ├── favicon.ico*
-│   └── logo.png
+│   ├── favicon.ico
+│   └── logo.png
 ├── test/
-│   ├── setup.ts
-│   └── utils.tsx
-├── README.md
+│   ├── setup.ts
+│   └── utils.tsx
+├── .eslintrc.js
 ├── babel.config.js
-├── blitz.config.js
-├── jest.config.js
+├── blitz.config.ts
+├── jest.config.ts
 ├── package.json
+├── README.md
 ├── tsconfig.json
-├── types.d.ts
-├── types.ts
-└── yarn.lock
+└── types.ts
 ```
 
 These files are:
@@ -143,9 +143,9 @@ These files are:
 
 - `tsconfig.json` is our recommended setup for TypeScript.
 
-- `.babelrc.js`, `.env`, etc. ("dotfiles") are configuration files for various bits of JavaScript tooling.
+- `.babel.config.js`, `.eslintrc.js`, `.env`, etc. ("dotfiles") are configuration files for various bits of JavaScript tooling.
 
-- `blitz.config.js` is for advanced custom configuration of Blitz. It extends [`next.config.js`](https://nextjs.org/docs/api-reference/next.config.js/introduction).
+- `blitz.config.ts` is for advanced custom configuration of Blitz. [Here you can learn how to use it](https://blitzjs.com/docs/blitz-config).
 
 - `jest.config.js` contains config for Jest tests. You can [customize it if needed](https://jestjs.io/docs/en/configuration).
 
@@ -155,18 +155,18 @@ You can read more about it in the [File Structure](https://blitzjs.com/docs/file
 
 Blitz comes with a set of tools that corrects and formats your code, facilitating its future maintenance. You can modify their options and even uninstall them.
 
-- **ESLint**: It lints your code: searches for bad practices and tell you about it. You can customize it via the `.eslintrc.js`, and you can install (or even write) plugins to have it the way you like it. It already comes with the [`blitz`](https://github.com/blitz-js/blitz/tree/canary/packages/eslint-config) config, but you can remove it safely. [Learn More](https://eslint.org).
-- **Husky**: It adds [githooks](https://git-scm.com/docs/githooks), little pieces of code that get executed when certain Git events are triggerd. For example, `pre-commit` is triggered just before a commit is created. You can see the current hooks inside `.husky/`. If are having problems commiting and pushing, check out ther [troubleshooting](https://typicode.github.io/husky/#/?id=troubleshoot) guide. [Learn More](https://typicode.github.io/husky).
-- **Prettier**: It formats your code to look the same everywhere. You can configure it via the `.prettierrc` file. The `.prettierignore` contains the files that should be ignored by Prettier; useful when you have large files or when you want to keep a custom formatting. [Learn More](https://prettier.io).
+- **ESLint**: It lints your code: searches for bad practices and tell you about it. You can customize it via the `.eslintrc.js`, and you can install (or even write) plugins to have it the way you like it. It already comes with the [`blitz`](https://github.com/blitz-js/blitz/tree/canary/packages/eslint-config) config, but you can remove it safely. [Learn More](https://blitzjs.com/docs/eslint-config).
+- **Husky**: It adds [githooks](https://git-scm.com/docs/githooks), little pieces of code that get executed when certain Git events are triggerd. For example, `pre-commit` is triggered just before a commit is created. You can see the current hooks inside `.husky/`. If are having problems commiting and pushing, check out ther [troubleshooting](https://typicode.github.io/husky/#/?id=troubleshoot) guide. [Learn More](https://blitzjs.com/docs/husky-config).
+- **Prettier**: It formats your code to look the same everywhere. You can configure it via the `.prettierrc` file. The `.prettierignore` contains the files that should be ignored by Prettier; useful when you have large files or when you want to keep a custom formatting. [Learn More](https://blitzjs.com/docs/prettier-config).
 
 ## Learn more
 
 Read the [Blitz.js Documentation](https://blitzjs.com/docs/getting-started) to learn more.
 
 The Blitz community is warm, safe, diverse, inclusive, and fun! Feel free to reach out to us in any of our communication channels.
 
-- [Website](https://blitzjs.com/)
-- [Discord](https://discord.blitzjs.com/)
+- [Website](https://blitzjs.com)
+- [Discord](https://blitzjs.com/discord)
 - [Report an issue](https://github.com/blitz-js/blitz/issues/new/choose)
 - [Forum discussions](https://github.com/blitz-js/blitz/discussions)
 - [How to Contribute](https://blitzjs.com/docs/contributing)

packages/generator/templates/app/app/pages/_document.tsx

@@ -1,4 +1,4 @@
-import {Document, Html, DocumentHead, Main, BlitzScript /*DocumentContext*/} from 'blitz'
+import { Document, Html, DocumentHead, Main, BlitzScript /*DocumentContext*/ } from "blitz"
 
 class MyDocument extends Document {
   // Only uncomment if you need to customize this behaviour

packages/generator/templates/app/package.js.json

@@ -32,13 +32,13 @@
   },
   "devDependencies": {
     "eslint": "7.x",
-    "husky": "6.x",
-    "lint-staged": "10.x",
-    "prettier-plugin-prisma": "0.x",
+    "husky": "7.x",
+    "lint-staged": "11.x",
+    "prettier-plugin-prisma": "3.x",
     "prettier": "2.x",
     "pretty-quick": "3.x",
     "preview-email": "3.x",
     "prisma": "3.x"
   },
   "private": true
-}
+}

packages/generator/templates/app/package.ts.json

@@ -34,14 +34,14 @@
     "@types/preview-email": "2.x",
     "@types/react": "17.x",
     "eslint": "7.x",
-    "husky": "6.x",
-    "lint-staged": "10.x",
-    "prettier-plugin-prisma": "0.x",
+    "husky": "7.x",
+    "lint-staged": "11.x",
+    "prettier-plugin-prisma": "3.x",
     "prettier": "2.x",
     "pretty-quick": "3.x",
     "preview-email": "3.x",
     "prisma": "3.x",
-    "typescript": "~4.3"
+    "typescript": "~4.4"
   },
   "private": true
-}
+}

packages/generator/templates/app/test/utils.tsx

@@ -24,7 +24,10 @@ export * from "@testing-library/react"
 //   router: { pathname: '/my-custom-pathname' },
 // });
 // --------------------------------------------------
-export function render(ui: RenderUI, { wrapper, router, dehydratedState, ...options }: RenderOptions = {}) {
+export function render(
+  ui: RenderUI,
+  { wrapper, router, dehydratedState, ...options }: RenderOptions = {}
+) {
   if (!wrapper) {
     // Add a default context wrapper if one isn't supplied from the test
     wrapper = ({ children }) => (
@@ -51,7 +54,7 @@ export function render(ui: RenderUI, { wrapper, router, dehydratedState, ...opti
 // --------------------------------------------------
 export function renderHook(
   hook: RenderHook,
-  { wrapper, router, dehydratedState,...options }: RenderHookOptions = {}
+  { wrapper, router, dehydratedState, ...options }: RenderHookOptions = {}
 ) {
   if (!wrapper) {
     // Add a default context wrapper if one isn't supplied from the test
@@ -66,7 +69,7 @@ export function renderHook(
   return defaultRenderHook(hook, { wrapper, ...options })
 }
 
-export const mockRouter: BlitzRouter =     {
+export const mockRouter: BlitzRouter = {
   basePath: "",
   pathname: "/",
   route: "/",
@@ -92,8 +95,11 @@ export const mockRouter: BlitzRouter =     {
 
 type DefaultParams = Parameters<typeof defaultRender>
 type RenderUI = DefaultParams[0]
-type RenderOptions = DefaultParams[1] & { router?: Partial<BlitzRouter>, dehydratedState?: unknown }
+type RenderOptions = DefaultParams[1] & { router?: Partial<BlitzRouter>; dehydratedState?: unknown }
 
 type DefaultHookParams = Parameters<typeof defaultRenderHook>
 type RenderHook = DefaultHookParams[0]
-type RenderHookOptions = DefaultHookParams[1] & { router?: Partial<BlitzRouter>, dehydratedState?: unknown }
+type RenderHookOptions = DefaultHookParams[1] & {
+  router?: Partial<BlitzRouter>
+  dehydratedState?: unknown
+}

packages/generator/templates/minimalapp/.prettierignore

@@ -4,3 +4,7 @@
 *.lock
 .next
 .blitz
+.yarn
+.pnp.*
+node_modules
+.blitz.config.compiled.js

packages/generator/templates/minimalapp/README.md

@@ -52,27 +52,26 @@ Here is the starting structure of your app.
 ```
 __name__
 ├── app/
-│   ├── pages/
-│   │   ├── 404.tsx
-│   │   ├── _app.tsx
-│   │   ├── _document.tsx
-│   │   ├── index.test.tsx
-│   │   └── index.tsx
+│   ├── pages/
+│   │   ├── _app.tsx
+│   │   ├── _document.tsx
+│   │   ├── 404.tsx
+│   │   ├── index.test.tsx
+│   │   └── index.tsx
 ├── public/
-│   ├── favicon.ico*
-│   └── logo.png
+│   ├── favicon.ico
+│   └── logo.png
 ├── test/
-│   ├── setup.ts
-│   └── utils.tsx
-├── README.md
+│   ├── setup.ts
+│   └── utils.tsx
+├── .eslintrc.js
 ├── babel.config.js
-├── blitz.config.js
-├── jest.config.js
+├── blitz.config.ts
+├── jest.config.ts
 ├── package.json
+├── README.md
 ├── tsconfig.json
-├── types.d.ts
-├── types.ts
-└── yarn.lock
+└── types.ts
 ```
 
 These files are:
@@ -87,9 +86,9 @@ These files are:
 
 - `tsconfig.json` is our recommended setup for TypeScript.
 
-- `.babelrc.js`, `.env`, etc. ("dotfiles") are configuration files for various bits of JavaScript tooling.
+- `.babel.config.js`, `.eslintrc.js`, `.env`, etc. ("dotfiles") are configuration files for various bits of JavaScript tooling.
 
-- `blitz.config.js` is for advanced custom configuration of Blitz. It extends [`next.config.js`](https://nextjs.org/docs/api-reference/next.config.js/introduction).
+- `blitz.config.ts` is for advanced custom configuration of Blitz. [Here you can learn how to use it](https://blitzjs.com/docs/blitz-config).
 
 - `jest.config.js` contains config for Jest tests. You can [customize it if needed](https://jestjs.io/docs/en/configuration).
 
@@ -99,18 +98,18 @@ You can read more about it in the [File Structure](https://blitzjs.com/docs/file
 
 Blitz comes with a set of tools that corrects and formats your code, facilitating its future maintenance. You can modify their options and even uninstall them.
 
-- **ESLint**: It lints your code: searches for bad practices and tell you about it. You can customize it via the `.eslintrc.js`, and you can install (or even write) plugins to have it the way you like it. It already comes with the [`blitz`](https://github.com/blitz-js/blitz/tree/canary/packages/eslint-config) config, but you can remove it safely. [Learn More](https://eslint.org).
-- **Husky**: It adds [githooks](https://git-scm.com/docs/githooks), little pieces of code that get executed when certain Git events are triggerd. For example, `pre-commit` is triggered just before a commit is created. You can see the current hooks inside `.husky/`. If are having problems commiting and pushing, check out ther [troubleshooting](https://typicode.github.io/husky/#/?id=troubleshoot) guide. [Learn More](https://typicode.github.io/husky).
-- **Prettier**: It formats your code to look the same everywhere. You can configure it via the `.prettierrc` file. The `.prettierignore` contains the files that should be ignored by Prettier; useful when you have large files or when you want to keep a custom formatting. [Learn More](https://prettier.io).
+- **ESLint**: It lints your code: searches for bad practices and tell you about it. You can customize it via the `.eslintrc.js`, and you can install (or even write) plugins to have it the way you like it. It already comes with the [`blitz`](https://github.com/blitz-js/blitz/tree/canary/packages/eslint-config) config, but you can remove it safely. [Learn More](https://blitzjs.com/docs/eslint-config).
+- **Husky**: It adds [githooks](https://git-scm.com/docs/githooks), little pieces of code that get executed when certain Git events are triggerd. For example, `pre-commit` is triggered just before a commit is created. You can see the current hooks inside `.husky/`. If are having problems commiting and pushing, check out ther [troubleshooting](https://typicode.github.io/husky/#/?id=troubleshoot) guide. [Learn More](https://blitzjs.com/docs/husky-config).
+- **Prettier**: It formats your code to look the same everywhere. You can configure it via the `.prettierrc` file. The `.prettierignore` contains the files that should be ignored by Prettier; useful when you have large files or when you want to keep a custom formatting. [Learn More](https://blitzjs.com/docs/prettier-config).
 
 ## Learn more
 
 Read the [Blitz.js Documentation](https://blitzjs.com/docs/getting-started) to learn more.
 
 The Blitz community is warm, safe, diverse, inclusive, and fun! Feel free to reach out to us in any of our communication channels.
 
-- [Website](https://blitzjs.com/)
-- [Discord](https://discord.blitzjs.com/)
+- [Website](https://blitzjs.com)
+- [Discord](https://blitzjs.com/discord)
 - [Report an issue](https://github.com/blitz-js/blitz/issues/new/choose)
 - [Forum discussions](https://github.com/blitz-js/blitz/discussions)
 - [How to Contribute](https://blitzjs.com/docs/contributing)

packages/generator/templates/minimalapp/app/pages/_document.tsx

@@ -1,4 +1,4 @@
-import {Document, Html, DocumentHead, Main, BlitzScript /*DocumentContext*/} from 'blitz'
+import { Document, Html, DocumentHead, Main, BlitzScript /*DocumentContext*/ } from "blitz"
 
 class MyDocument extends Document {
   // Only uncomment if you need to customize this behaviour

packages/generator/templates/minimalapp/package.js.json

@@ -26,11 +26,11 @@
   },
   "devDependencies": {
     "eslint": "7.x",
-    "husky": "6.x",
-    "lint-staged": "10.x",
-    "prettier-plugin-prisma": "0.x",
+    "husky": "7.x",
+    "lint-staged": "11.x",
+    "prettier-plugin-prisma": "3.x",
     "prettier": "2.x",
     "pretty-quick": "3.x"
   },
   "private": true
-}
+}

packages/generator/templates/minimalapp/package.ts.json

@@ -27,12 +27,12 @@
   "devDependencies": {
     "@types/react": "17.x",
     "eslint": "7.x",
-    "husky": "6.x",
-    "lint-staged": "10.x",
-    "prettier-plugin-prisma": "0.x",
+    "husky": "7.x",
+    "lint-staged": "11.x",
+    "prettier-plugin-prisma": "3.x",
     "prettier": "2.x",
     "pretty-quick": "3.x",
-    "typescript": "~4.3"
+    "typescript": "~4.4"
   },
   "private": true
-}
+}