v0.29.7

(recipe)

.eslintrc.js

@@ -51,7 +51,12 @@ module.exports = {
       },
     ],
   },
-  ignorePatterns: ["packages/cli/", "packages/generator/templates", ".eslintrc.js"],
+  ignorePatterns: [
+    "packages/cli/",
+    "packages/generator/templates",
+    ".eslintrc.js",
+    "recipes/*/templates",
+  ],
   overrides: [
     {
       files: ["examples/**", "packages/gui/**", "recipes/**"],

.gitignore

@@ -24,3 +24,4 @@ dist
 .tsbuildinfo
 .nvmrc
 **/.test*
+examples/auth2

examples/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/auth",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "scripts": {
     "start": "blitz start",
     "studio": "blitz prisma studio",
@@ -40,7 +40,7 @@
   "dependencies": {
     "@prisma/cli": "2.14.0",
     "@prisma/client": "2.14.0",
-    "blitz": "0.29.2",
+    "blitz": "0.29.7",
     "final-form": "4.20.1",
     "passport-auth0": "1.4.0",
     "passport-github2": "0.1.12",

examples/custom-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/custom-server",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "scripts": {
     "start": "nodemon --watch server.js --exec 'blitz start'",
     "build": "blitz build",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@prisma/cli": "2.14.0",
     "@prisma/client": "2.14.0",
-    "blitz": "0.29.2",
+    "blitz": "0.29.7",
     "final-form": "4.20.1",
     "react": "0.0.0-experimental-4ead6b530",
     "react-dom": "0.0.0-experimental-4ead6b530",

examples/fauna/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/fauna",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "scripts": {
     "start": "blitz start",
     "studio": "blitz prisma studio",
@@ -27,7 +27,7 @@
     ]
   },
   "dependencies": {
-    "blitz": "0.29.2",
+    "blitz": "0.29.7",
     "final-form": "4.20.1",
     "graphql": "15.4.0",
     "graphql-request": "3.4.0",

examples/no-prisma/package.json

@@ -1,6 +1,6 @@
 {
   "name": "no-prisma",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "scripts": {
     "start": "blitz start",
     "build": "blitz build",
@@ -26,7 +26,7 @@
     ]
   },
   "dependencies": {
-    "blitz": "0.29.2",
+    "blitz": "0.29.7",
     "knex": "0.21.15",
     "react": "0.0.0-experimental-3310209d0",
     "react-dom": "0.0.0-experimental-3310209d0",

examples/plain-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/plain-js",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "scripts": {
     "start": "blitz start",
     "build": "blitz prisma migrate deploy --preview-feature && blitz build",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@prisma/cli": "2.14.0",
     "@prisma/client": "2.14.0",
-    "blitz": "0.29.2",
+    "blitz": "0.29.7",
     "react": "0.0.0-experimental-3310209d0",
     "react-dom": "0.0.0-experimental-3310209d0"
   },

examples/store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/store",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "private": true,
   "scripts": {
     "build": "blitz prisma migrate deploy --preview-feature && blitz build",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@prisma/cli": "2.14.0",
     "@prisma/client": "2.14.0",
-    "blitz": "0.29.2",
+    "blitz": "0.29.7",
     "final-form": "4.20.1",
     "react": "0.0.0-experimental-3310209d0",
     "react-dom": "0.0.0-experimental-3310209d0",

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.29.2",
+  "version": "0.29.7",
   "packages": ["packages/*"],
   "npmClient": "yarn",
   "useWorkspaces": true,

packages/blitz/package.json

@@ -1,7 +1,7 @@
 {
   "name": "blitz",
   "description": "Blitz is a Rails-like framework for monolithic, full-stack React apps — built on Next.js",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist",
@@ -40,13 +40,13 @@
     "url": "https://github.com/blitz-js/blitz"
   },
   "dependencies": {
-    "@blitzjs/cli": "0.29.2",
-    "@blitzjs/config": "0.29.2",
-    "@blitzjs/core": "0.29.2",
-    "@blitzjs/display": "0.29.2",
-    "@blitzjs/generator": "0.29.2",
-    "@blitzjs/installer": "0.29.2",
-    "@blitzjs/server": "0.29.2",
+    "@blitzjs/cli": "0.29.7",
+    "@blitzjs/config": "0.29.7",
+    "@blitzjs/core": "0.29.7",
+    "@blitzjs/display": "0.29.7",
+    "@blitzjs/generator": "0.29.7",
+    "@blitzjs/installer": "0.29.7",
+    "@blitzjs/server": "0.29.7",
     "envinfo": "^7.7.3",
     "os-name": "^4.0.0",
     "pkg-dir": "^5.0.0",

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/cli",
   "description": "Blitz.js CLI",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "license": "MIT",
   "scripts": {
     "b": "./bin/run",
@@ -30,8 +30,8 @@
     "/lib"
   ],
   "dependencies": {
-    "@blitzjs/display": "0.29.2",
-    "@blitzjs/repl": "0.29.2",
+    "@blitzjs/display": "0.29.7",
+    "@blitzjs/repl": "0.29.7",
     "@oclif/command": "1.8.0",
     "@oclif/config": "1.17.0",
     "@oclif/plugin-autocomplete": "0.3.0",
@@ -60,9 +60,9 @@
     "v8-compile-cache": "2.2.0"
   },
   "devDependencies": {
-    "@blitzjs/generator": "0.29.2",
-    "@blitzjs/installer": "0.29.2",
-    "@blitzjs/server": "0.29.2",
+    "@blitzjs/generator": "0.29.7",
+    "@blitzjs/installer": "0.29.7",
+    "@blitzjs/server": "0.29.7",
     "@oclif/dev-cli": "1.26.0",
     "@oclif/test": "1.2.8",
     "@prisma/cli": "2.14.0",

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/config",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "Loads the blitz app config",
   "license": "MIT",
   "scripts": {

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/core",
   "description": "Blitz.js core functionality",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist",
@@ -40,7 +40,7 @@
     "url": "https://github.com/blitz-js/blitz"
   },
   "dependencies": {
-    "@blitzjs/display": "0.29.2",
+    "@blitzjs/display": "0.29.7",
     "@types/secure-password": "3.1.0",
     "b64-lite": "^1.4.0",
     "bad-behavior": "^1.0.1",
@@ -50,7 +50,7 @@
     "passport": "0.4.1",
     "react-query": "2.5.12",
     "secure-password": "4.0.0",
-    "superjson": "1.4.1"
+    "superjson": "1.5.2"
   },
   "gitHead": "d3b9fce0bdd251c2b1890793b0aa1cd77c1c0922"
 }

packages/display/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/display",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "Display package for the Blitz CLI",
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "url": "git+https://github.com/blitz-js/blitz.git"
   },
   "dependencies": {
-    "@blitzjs/display": "0.29.2",
+    "@blitzjs/display": "0.29.7",
     "chalk": "^4.1.0",
     "console-table-printer": "^2.7.5",
     "ora": "^5.2.0",
-    "tslog": "^3.0.5"
+    "tslog": "^3.1.0"
   }
 }

packages/file-pipeline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/file-pipeline",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "Display package for the Blitz CLI",
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "url": "git+https://github.com/blitz-js/blitz.git"
   },
   "dependencies": {
-    "@blitzjs/display": "0.29.2",
+    "@blitzjs/display": "0.29.7",
     "chalk": "^4.1.0",
     "chokidar": "3.4.3",
     "flush-write-stream": "2.0.0",

packages/generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/generator",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "File generation for the Blitz CLI",
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "license": "MIT",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@babel/core": "7.12.10",
     "@babel/plugin-transform-typescript": "7.12.1",
-    "@blitzjs/display": "0.29.2",
+    "@blitzjs/display": "0.29.7",
     "@types/jscodeshift": "0.7.2",
     "chalk": "^4.1.0",
     "cross-spawn": "7.0.3",

packages/installer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/installer",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "Package installation for the Blitz CLI",
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "license": "MIT",
@@ -36,9 +36,9 @@
   "dependencies": {
     "@babel/core": "7.12.10",
     "@babel/plugin-transform-typescript": "7.12.1",
-    "@blitzjs/config": "0.29.2",
-    "@blitzjs/display": "0.29.2",
-    "@blitzjs/generator": "0.29.2",
+    "@blitzjs/config": "0.29.7",
+    "@blitzjs/display": "0.29.7",
+    "@blitzjs/generator": "0.29.7",
     "@types/jscodeshift": "0.7.2",
     "cross-spawn": "7.0.3",
     "diff": "5.0.0",

packages/installer/src/executors/add-dependency-executor.tsx

@@ -47,42 +47,25 @@ const DependencyList = ({
   devDepsLoading?: boolean
   packages: NpmPackage[]
 }) => {
+  const prodPackages = packages.filter((p) => !p.isDevDep)
+  const devPackages = packages.filter((p) => p.isDevDep)
   return (
     <Box flexDirection="column">
       <Text>{lede}</Text>
       <Newline />
-      <Text>Dependencies to be installed:</Text>
-      {packages
-        .filter((p) => !p.isDevDep)
-        .map((pkg) => (
-          <Package key={pkg.name} pkg={pkg} loading={depsLoading} />
-        ))}
+      {prodPackages.length ? <Text>Dependencies to be installed:</Text> : null}
+      {prodPackages.map((pkg) => (
+        <Package key={pkg.name} pkg={pkg} loading={depsLoading} />
+      ))}
       <Newline />
-      <Text>Dev Dependencies to be installed:</Text>
-      {packages
-        .filter((p) => p.isDevDep)
-        .map((pkg) => (
-          <Package key={pkg.name} pkg={pkg} loading={devDepsLoading} />
-        ))}
+      {devPackages.length ? <Text>Dev Dependencies to be installed:</Text> : null}
+      {devPackages.map((pkg) => (
+        <Package key={pkg.name} pkg={pkg} loading={devDepsLoading} />
+      ))}
     </Box>
   )
 }
 
-export const Propose: Executor["Propose"] = ({cliArgs, step, onProposalAccepted}) => {
-  useEnterToContinue(onProposalAccepted)
-
-  if (!isAddDependencyExecutor(step)) {
-    onProposalAccepted()
-    return null
-  }
-  return (
-    <DependencyList
-      lede={"Adding some shiny new dependencies.\nIf this list looks good, press ENTER to install."}
-      packages={getExecutorArgument(step.packages, cliArgs)}
-    />
-  )
-}
-
 /**
  * Exported for unit testing purposes
  */
@@ -151,6 +134,12 @@ export const Commit: Executor["Commit"] = ({cliArgs, step, onChangeCommitted}) =
     installDevDeps()
   }, [cliArgs, depsInstalled, step])
 
+  React.useEffect(() => {
+    if (depsInstalled && devDepsInstalled) {
+      handleChangeCommitted()
+    }
+  }, [depsInstalled, devDepsInstalled, handleChangeCommitted])
+
   if (!isAddDependencyExecutor(step)) {
     onChangeCommitted()
     return null
@@ -158,16 +147,11 @@ export const Commit: Executor["Commit"] = ({cliArgs, step, onChangeCommitted}) =
   return (
     <>
       <DependencyList
-        lede={"Hang tight! Fetching the latest dependencies..."}
+        lede={"Hang tight! Installing dependencies..."}
         depsLoading={!depsInstalled}
         devDepsLoading={!devDepsInstalled}
         packages={getExecutorArgument(step.packages, cliArgs)}
       />
-      {depsInstalled && devDepsInstalled ? (
-        <Box paddingTop={1}>
-          <Text>Dependencies installed! Press ENTER to continue</Text>
-        </Box>
-      ) : null}
     </>
   )
 }

packages/installer/src/executors/executor.tsx

@@ -12,7 +12,7 @@ export interface ExecutorConfig {
 
 export interface Executor {
   type: string
-  Propose: React.FC<{step: ExecutorConfig; onProposalAccepted: (data?: any) => void; cliArgs: any}>
+  Propose?: React.FC<{step: ExecutorConfig; onProposalAccepted: (data?: any) => void; cliArgs: any}>
   Commit: React.FC<{
     step: ExecutorConfig
     proposalData?: any
@@ -48,7 +48,9 @@ export function Frontmatter({executor}: {executor: ExecutorConfig}) {
           {verticalBorder}
         </Text>
       </Box>
-      <Text bold>{executor.explanation}</Text>
+      <Text color="gray" italic>
+        {executor.explanation}
+      </Text>
     </Box>
   )
 }

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

@@ -4,7 +4,14 @@ import {Box, Text} from "ink"
 import Spinner from "ink-spinner"
 import * as React from "react"
 import {Newline} from "../components/newline"
-import {processFile, transform, Transformer, TransformStatus} from "../utils/transform"
+import {
+  processFile,
+  stringProcessFile,
+  StringTransformer,
+  transform,
+  Transformer,
+  TransformStatus,
+} from "../utils/transform"
 import {useEnterToContinue} from "../utils/use-enter-to-continue"
 import {Executor, executorArgument, ExecutorConfig, getExecutorArgument} from "./executor"
 import {filePrompt} from "./file-prompt"
@@ -12,11 +19,15 @@ import {filePrompt} from "./file-prompt"
 export interface Config extends ExecutorConfig {
   selectTargetFiles?(cliArgs: any): any[]
   singleFileSearch?: executorArgument<string>
-  transform: Transformer
+  transform?: Transformer
+  transformPlain?: StringTransformer
 }
 
 export function isFileTransformExecutor(executor: ExecutorConfig): executor is Config {
-  return (executor as Config).transform !== undefined
+  return (
+    (executor as Config).transform !== undefined ||
+    (executor as Config).transformPlain !== undefined
+  )
 }
 
 export const type = "file-transform"
@@ -34,7 +45,9 @@ export const Propose: Executor["Propose"] = ({cliArgs, onProposalAccepted, step}
       })
       filePathRef.current = fileToTransform
       const originalFile = fs.readFileSync(fileToTransform).toString("utf-8")
-      const newFile = processFile(originalFile, (step as Config).transform)
+      const newFile = (step as Config).transformPlain
+        ? stringProcessFile(originalFile, (step as Config).transformPlain!)
+        : processFile(originalFile, (step as Config).transform!)
       return createPatch(fileToTransform, originalFile, newFile)
     }
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -73,30 +86,26 @@ export const Propose: Executor["Propose"] = ({cliArgs, onProposalAccepted, step}
           )
         })}
       <Newline />
-      <Text>
-        The above diff will be applied. If it looks okay to you, hit ENTER to apply the changes!
-      </Text>
+      <Text bold>The above changes will be made. Press ENTER to continue</Text>
     </Box>
   )
 }
 export const Commit: Executor["Commit"] = ({onChangeCommitted, proposalData: filePath, step}) => {
-  const transformFn = (step as Config).transform
-
   const [loading, setLoading] = React.useState(true)
 
-  const handleChangeCommitted = React.useCallback(() => {
-    onChangeCommitted(`Modified 1 file: ${filePath}`)
-  }, [filePath, onChangeCommitted])
-
-  useEnterToContinue(handleChangeCommitted, !loading)
-
   React.useEffect(() => {
-    const results = transform(transformFn, [filePath])
+    const results = transform(
+      (original) =>
+        (step as Config).transformPlain
+          ? stringProcessFile(original, (step as Config).transformPlain!)
+          : processFile(original, (step as Config).transform!),
+      [filePath],
+    )
     if (results.some((r) => r.status === TransformStatus.Failure)) {
       console.error(results)
     }
     setLoading(false)
-  }, [filePath, transformFn])
+  }, [filePath, step])
 
   if (loading) {
     return (
@@ -106,11 +115,7 @@ export const Commit: Executor["Commit"] = ({onChangeCommitted, proposalData: fil
       </Box>
     )
   }
-  return (
-    <Box paddingBottom={1} flexDirection="column">
-      {/* Stop ESlint from complaining about the emoji */}
-      {/* eslint-disable-next-line */}
-      <Text>📝 File changes applied! Press ENTER to continue</Text>
-    </Box>
-  )
+
+  onChangeCommitted(`Modified file: ${filePath}`)
+  return null
 }

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

@@ -1,6 +1,5 @@
 import {Generator, GeneratorOptions} from "@blitzjs/generator"
 import {Box, Text} from "ink"
-import Spinner from "ink-spinner"
 import {useEffect, useState} from "react"
 import * as React from "react"
 import {Newline} from "../components/newline"
@@ -48,49 +47,6 @@ class TempGenerator extends Generator<TempGeneratorOptions> {
   }
 }
 
-export const Propose: Executor["Propose"] = ({cliArgs, onProposalAccepted, step}) => {
-  const generatorArgs = React.useMemo(
-    () => ({
-      destinationRoot: ".",
-      targetDirectory: getExecutorArgument((step as Config).targetDirectory, cliArgs),
-      templateRoot: getExecutorArgument((step as Config).templatePath, cliArgs),
-      templateValues: getExecutorArgument((step as Config).templateValues, cliArgs),
-      dryRun: true,
-    }),
-    [cliArgs, step],
-  )
-  useEnterToContinue(() => {
-    onProposalAccepted(generatorArgs)
-  })
-
-  const [dryRunOutput, setDryRunOutput] = useState("")
-
-  useEffect(() => {
-    async function proposeFileAdditions() {
-      if (!dryRunOutput) {
-        const dryRunGenerator = new TempGenerator(generatorArgs)
-        const results = ((await dryRunGenerator.run()) as unknown) as string
-        setDryRunOutput(results)
-      }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    proposeFileAdditions()
-  }, [dryRunOutput, generatorArgs])
-
-  return (
-    <Box flexDirection="column">
-      <Text>
-        Before creating any new files, we'll do a dry run. Here's a list of files that would be
-        created:
-      </Text>
-      <Newline />
-      {dryRunOutput ? <Text>{dryRunOutput}</Text> : null}
-      <Newline />
-      <Text>If this looks ok to you, press ENTER to create the files.</Text>
-    </Box>
-  )
-}
-
 export const Commit: Executor["Commit"] = ({cliArgs, onChangeCommitted, step}) => {
   const generatorArgs = React.useMemo(
     () => ({
@@ -127,19 +83,12 @@ export const Commit: Executor["Commit"] = ({cliArgs, onChangeCommitted, step}) =
 
   return (
     <Box flexDirection="column">
-      {!fileCreateOutput ? (
-        <Text>
-          <Spinner /> Creating files...
-        </Text>
-      ) : null}
       {fileCreateOutput ? (
         <>
           {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
-          <Text>The file generation is complete! 🎉 Here are the results:</Text>
-          <Newline />
           {fileCreateOutput ? <Text>{fileCreateOutput}</Text> : null}
           <Newline />
-          <Text>Once you've had a chance to confirm the changes, press ENTER to continue.</Text>
+          <Text bold>Press ENTER to continue</Text>
         </>
       ) : null}
     </Box>

packages/installer/src/recipe-executor.tsx

@@ -27,11 +27,10 @@ export class RecipeExecutor<Options extends RecipeMeta> {
     try {
       const {waitUntilExit} = render(
         <RecipeRenderer cliArgs={cliArgs} steps={this.steps} recipeMeta={this.options} />,
+        {exitOnCtrlC: false},
       )
       await waitUntilExit()
-      log.info(
-        `\n🎉 The recipe for ${this.options.name} completed successfully! Its functionality is now fully configured in your Blitz app.\n`,
-      )
+      log.info(`\n🎉 The ${this.options.name} recipe has been installed!\n`)
     } catch (e) {
       log.error(e)
       return

packages/installer/src/recipe-renderer.tsx

@@ -1,4 +1,4 @@
-import {Box, Static, Text, useApp} from "ink"
+import {Box, Text, useApp, useInput} from "ink"
 import React from "react"
 import {Newline} from "./components/newline"
 import * as AddDependencyExecutor from "./executors/add-dependency-executor"
@@ -76,18 +76,22 @@ const DispatchContext = React.createContext<React.Dispatch<{type: Action; data?:
 function WelcomeMessage({recipeMeta}: {recipeMeta: RecipeMeta}) {
   return (
     <Box flexDirection="column">
-      <Box flexDirection="column">
-        <Text color="#8a3df0" bold>
-          Welcome to the recipe for {recipeMeta.name}
-        </Text>
-        <Text color="#8a3df0" bold>
-          {recipeMeta.description}
-        </Text>
-      </Box>
-      <Text bold={false}>This recipe is authored and supported by {recipeMeta.owner}.</Text>
-      <Text>For additional documentation and support please visit {recipeMeta.repoLink}</Text>
+      <Text color="#8a3df0" bold>
+        Recipe: {recipeMeta.name}
+      </Text>
       <Newline />
-      <Text>Press ENTER to begin the recipe</Text>
+      <Text color="gray">
+        <Text italic>{recipeMeta.description}</Text>
+      </Text>
+      <Newline />
+      <Text color="gray">
+        Repo: <Text italic>{recipeMeta.repoLink}</Text>
+      </Text>
+      <Text color="gray">
+        Author: <Text italic>{recipeMeta.owner}</Text>
+      </Text>
+      <Newline />
+      <Text bold>Press ENTER to continue</Text>
     </Box>
   )
 }
@@ -125,15 +129,18 @@ function StepExecutor({
     } else if (status === Status.ReadyToCommit) {
       dispatch({type: Action.ApplyChange})
     }
-  }, [dispatch, status])
+    if (status === Status.Proposed && !Propose) {
+      dispatch({type: Action.CommitApproved})
+    }
+  }, [dispatch, status, Propose])
 
   return (
     <Box flexDirection="column">
       {status !== Status.Committed ? <Frontmatter executor={step} /> : null}
-      {[Status.Pending, Status.Proposed].includes(status) ? (
+      {[Status.Proposed].includes(status) && Propose ? (
         <Propose cliArgs={cliArgs} step={step} onProposalAccepted={handleProposalAccepted} />
       ) : null}
-      {[Status.ReadyToCommit, Status.Committing].includes(status) ? (
+      {[Status.Committing].includes(status) ? (
         <Commit
           cliArgs={cliArgs}
           proposalData={proposalData}
@@ -152,6 +159,13 @@ export function RecipeRenderer({cliArgs, steps, recipeMeta}: RecipeProps) {
     steps: steps.map((e) => ({executor: e, status: Status.Pending, successMsg: ""})),
   })
 
+  useInput((input, key) => {
+    if (input === "c" && key.ctrl) {
+      exit(new Error("You aborted installation"))
+      return
+    }
+  })
+
   useEnterToContinue(() => dispatch({type: Action.SkipStep}), state.current === -1)
 
   React.useEffect(() => {
@@ -167,13 +181,11 @@ export function RecipeRenderer({cliArgs, steps, recipeMeta}: RecipeProps) {
 
   return (
     <DispatchContext.Provider value={dispatch}>
-      <Static items={messages}>
-        {(msg) => (
-          <Text key={msg + Math.random()} color="green">
-            {msg === "\n" ? "" : "✅"} {msg}
-          </Text>
-        )}
-      </Static>
+      {messages.map((msg, index) => (
+        <Text key={msg + index} color="green">
+          {msg === "\n" ? "" : "✅"} {msg}
+        </Text>
+      ))}
       {state.current === -1 ? <WelcomeMessage recipeMeta={recipeMeta} /> : null}
       {state.current > -1 ? (
         <StepExecutor

packages/installer/src/utils/paths.ts

@@ -21,4 +21,7 @@ export const paths = {
   blitzConfig() {
     return "blitz.config.js"
   },
+  packageJson() {
+    return "package.json"
+  },
 }

packages/installer/src/utils/transform.ts

@@ -22,15 +22,21 @@ export interface TransformResult {
   filename: string
   error?: Error
 }
+
+export type StringTransformer = (program: string) => string
 export type Transformer = (program: Collection<j.Program>) => Collection<j.Program>
 
+export function stringProcessFile(original: string, transformerFn: StringTransformer): string {
+  return transformerFn(original)
+}
+
 export function processFile(original: string, transformerFn: Transformer): string {
   const program = j(original, {parser: customTsParser})
   return transformerFn(program).toSource()
 }
 
 export function transform(
-  transformerFn: Transformer,
+  processFile: (original: string) => string,
   targetFilePaths: string[],
 ): TransformResult[] {
   const results: TransformResult[] = []
@@ -45,7 +51,7 @@ export function transform(
     try {
       const fileBuffer = fs.readFileSync(filePath)
       const fileSource = fileBuffer.toString("utf-8")
-      const transformedCode = processFile(fileSource, transformerFn)
+      const transformedCode = processFile(fileSource)
       fs.writeFileSync(filePath, transformedCode)
       results.push({
         status: TransformStatus.Success,

packages/repl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/repl",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "Repl package for Blitz CLI",
   "homepage": "https://github.com/blitz-js/blitz/packages/repl/#readme",
   "license": "MIT",

packages/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/server",
   "description": "Blitz.js server functionality",
-  "version": "0.29.2",
+  "version": "0.29.7",
   "license": "MIT",
   "bin": {
     "next-patched": "./bin/next-patched"
@@ -34,7 +34,7 @@
     ]
   },
   "dependencies": {
-    "@blitzjs/file-pipeline": "0.29.2",
+    "@blitzjs/file-pipeline": "0.29.7",
     "b64-lite": "^1.4.0",
     "cookie": "^0.4.1",
     "cross-spawn": "7.0.3",
@@ -60,12 +60,12 @@
     "readable-stream": "3.6.0",
     "resolve-cwd": "3.0.0",
     "slash": "^3.0.0",
-    "superjson": "1.4.1",
+    "superjson": "1.5.2",
     "through2": "4.0.2",
     "vinyl": "2.2.1"
   },
   "devDependencies": {
-    "@blitzjs/core": "0.29.2",
+    "@blitzjs/core": "0.29.7",
     "next-transpile-modules": "6.0.0"
   },
   "gitHead": "d3b9fce0bdd251c2b1890793b0aa1cd77c1c0922"

packages/server/src/stages/pages/index.ts

@@ -10,7 +10,7 @@ export function pagesPathTransformer(path: string) {
 }
 
 export function apiPathTransformer(path: string) {
-  const regex = /(?:[\\/]?app[\\/].*?[\\/]?)(api[\\/].+)$/
+  const regex = /(?:[\\/]?app[\\/].*?[\\/]?)(api[\\/].+(?<!\.test))$/
   const matchedPath = (regex.exec(path) || [])[1]
   return matchedPath ? join("pages", matchedPath) : path
 }

packages/server/src/stages/relative/index.ts

@@ -6,7 +6,7 @@ const isJavaScriptFile = (filepath: string) => filepath.match(/\.(ts|tsx|js|jsx)
 
 const isInSpecialFolderInAppFolder = (s: string, cwd: string) => {
   const filepath = s.replace(cwd + path.sep, "")
-  return /^app[/\\].*(pages|queries|mutations)[/\\]/.test(filepath)
+  return /^app[/\\].*(pages|api|queries|mutations)[/\\]/.test(filepath)
 }
 
 /**

packages/server/src/stages/relative/relative.test.ts

@@ -58,6 +58,12 @@ import from '../thing/bar'`,
 import from "../thing/bar"
 import from '../thing/bar'`,
       },
+      {
+        path: normalize("/projects/blitz/blitz/app/auth/api/auth/foo.js"),
+        contents: `import {getFoo} from 'app/foo/bar';
+import from "../thing/bar"
+import from '../../thing/bar'`,
+      },
     ]
 
     const expected = [
@@ -113,6 +119,12 @@ import from 'app/thing/bar'`,
 import from "app/thing/bar"
 import from 'app/thing/bar'`,
       },
+      {
+        path: normalize("/projects/blitz/blitz/app/auth/api/auth/foo.js"),
+        contents: `import {getFoo} from 'app/foo/bar';
+import from "app/auth/api/thing/bar"
+import from 'app/auth/thing/bar'`,
+      },
     ]
     const {stream} = createStageRelative(mockStageArgs({cwd: normalize("/projects/blitz/blitz")}))
 

recipes/base-web/index.ts

@@ -5,15 +5,13 @@ import {join} from "path"
 
 export default RecipeBuilder()
   .setName("Base Web")
-  .setDescription(
-    `Configure your Blitz app's styling with Base Web. This recipe will install all necessary dependencies and configure Base Web for immediate use.`,
-  )
+  .setDescription(`This will install all necessary dependencies and configure Base Web for use.`)
   .setOwner("Konrad Kalemba <konrad@kale.mba>")
   .setRepoLink("https://github.com/blitz-js/blitz")
   .addAddDependenciesStep({
     stepId: "addDeps",
     stepName: "Add dependencies",
-    explanation: `We need to install 'baseui' which is Base Web's main package containing all components. We need to add Styletron as a dependency too -- it's a toolkit for CSS in JS styling which Base Web relies on.`,
+    explanation: `Add 'baseui' and Styletron as a dependency too -- it's a toolkit for CSS in JS styling which Base Web relies on.`,
     packages: [
       {name: "baseui", version: "latest"},
       {name: "styletron-engine-atomic", version: "latest"},
@@ -31,7 +29,7 @@ export default RecipeBuilder()
   .addTransformFilesStep({
     stepId: "addStyletronAndBaseProvidersToApp",
     stepName: "Import required providers and wrap the root of the app with them",
-    explanation: `Now we need to import StyletronProvider and BaseProvider components and then wrap the application with them. Additionally we supply StyletronProvider with 'value' and 'debug' props. BaseProvider requires a 'theme' prop we set with default Base Web's light theme.`,
+    explanation: `Additionally we supply StyletronProvider with 'value' and 'debug' props. BaseProvider requires a 'theme' prop we set with default Base Web's light theme.`,
     singleFileSearch: paths.app(),
     transform(program: Collection<j.Program>) {
       const styletronProviderImport = j.importDeclaration(

recipes/base-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-base-web",
   "private": true,
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "The Blitz Recipe for installing Base Web",
   "main": "index.ts",
   "scripts": {
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "dependencies": {
-    "@blitzjs/installer": "0.29.2",
+    "@blitzjs/installer": "0.29.7",
     "jscodeshift": "0.11.0"
   },
   "devDependencies": {

recipes/chakra/index.ts

@@ -27,15 +27,13 @@ function wrapComponentWithChakraProvider(program: Collection<j.Program>) {
 
 export default RecipeBuilder()
   .setName("Chakra UI")
-  .setDescription(
-    `Configure your Blitz app's styling with Chakra UI. This recipe will install all necessary dependencies and configure Chakra UI for immediate use.`,
-  )
+  .setDescription(`This will install all necessary dependencies and configure Chakra UI for use.`)
   .setOwner("zekan.fran369@gmail.com")
   .setRepoLink("https://github.com/blitz-js/blitz")
   .addAddDependenciesStep({
     stepId: "addDeps",
-    stepName: "Add npm dependencies",
-    explanation: `Chakra requires some other dependencies like emotion to work`,
+    stepName: "npm dependencies",
+    explanation: `Chakra UI requires some other dependencies like emotion to work`,
     packages: [
       {name: "@chakra-ui/react", version: "1.1.2"},
       {name: "@emotion/react", version: "11.1.4"},
@@ -46,7 +44,7 @@ export default RecipeBuilder()
   .addTransformFilesStep({
     stepId: "importProviderAndReset",
     stepName: "Import ChakraProvider component",
-    explanation: `We can import the chakra provider into _app, so it is accessible in the whole app`,
+    explanation: `Import the chakra-ui provider into _app, so it is accessible in the whole app`,
     singleFileSearch: paths.app(),
     transform(program: Collection<j.Program>) {
       const stylesImport = j.importDeclaration(

recipes/chakra/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-chakra",
   "private": true,
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "The Blitz Recipe for installing Chakra UI",
   "main": "index.ts",
   "scripts": {
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "dependencies": {
-    "@blitzjs/installer": "0.29.2",
+    "@blitzjs/installer": "0.29.7",
     "jscodeshift": "0.11.0"
   },
   "devDependencies": {

recipes/emotion/index.ts

@@ -77,16 +77,13 @@ function replaceBabelPreset(program: Collection<j.Program>) {
 
 export default RecipeBuilder()
   .setName("Emotion")
-  .setDescription(
-    `Configure your Blitz app's styling with Emotion CSS-in-JS. This recipe will install all necessary dependencies and configure Emotion for immediate use.`,
-  )
+  .setDescription(`This will install all necessary dependencies and configure Emotion for use.`)
   .setOwner("justin.r.hall+blitz@gmail.com")
   .setRepoLink("https://github.com/blitz-js/blitz")
   .addAddDependenciesStep({
     stepId: "addDeps",
-    stepName: "Add npm dependencies",
-    explanation: `Emotion requires a few dependencies to get up and running.
-  We'll install @emotion/react and @emotion/styled for general usage, and @emotion/babel-plugin to enable some advanced features.`,
+    stepName: "npm dependencies",
+    explanation: `We'll install @emotion/react and @emotion/styled for general usage, and @emotion/babel-plugin to enable some advanced features.`,
     packages: [
       {name: "@emotion/react", version: "11"},
       {name: "@emotion/styled", version: "11"},
@@ -96,20 +93,20 @@ export default RecipeBuilder()
   .addNewFilesStep({
     stepId: "createGlobalStyles",
     stepName: "Create global styles",
-    explanation: `First, we will create some styles. We'll provide some default global styles, but feel free to customize or even remove them as you see fit.`,
-    targetDirectory: "./app",
+    explanation: `Adding some default global styles, but feel free to customize or even remove them as you see fit.`,
+    targetDirectory: "./app/core",
     templatePath: join(__dirname, "templates", "styles"),
     templateValues: {},
   })
   .addTransformFilesStep({
     stepId: "addGlobalStyles",
-    stepName: "Apply global styles",
+    stepName: "Import global styles",
     explanation: `Next, we'll import and render the global styles.`,
     singleFileSearch: paths.app(),
     transform(program: Collection<j.Program>) {
       const stylesImport = j.importDeclaration(
         [j.importSpecifier(j.identifier("globalStyles"))],
-        j.literal("app/styles"),
+        j.literal("app/core/styles"),
       )
 
       addImport(program, stylesImport)
@@ -119,7 +116,7 @@ export default RecipeBuilder()
   .addTransformFilesStep({
     stepId: "updateBabelConfig",
     stepName: "Add Babel plugin and preset",
-    explanation: `Finally, we'll update the Babel configuration to use Emotion's plugin and preset to enable some advanced features.`,
+    explanation: `Update the Babel configuration to use Emotion's plugin and preset to enable some advanced features.`,
     singleFileSearch: paths.babelConfig(),
     transform(program: Collection<j.Program>) {
       addBabelPlugin(program)

recipes/emotion/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-emotion",
   "private": true,
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "The Blitz Recipe for installing Emotion",
   "main": "index.ts",
   "scripts": {
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "dependencies": {
-    "@blitzjs/installer": "0.29.2",
+    "@blitzjs/installer": "0.29.7",
     "jscodeshift": "0.11.0"
   },
   "devDependencies": {

recipes/material-ui/index.ts

@@ -5,13 +5,13 @@ import {Collection} from "jscodeshift/src/Collection"
 export default RecipeBuilder()
   .setName("Material-UI")
   .setDescription(
-    `Configure your Blitz app's styling with Material-UI. This recipe will install all necessary dependencies and configure a base Material-UI setup for immediate usage.
-    
-NOTE: Material-UI currently doesn't support concurrent mode. For the most part you can use @material-ui components without altering anything. But, you may face issues if you intend to use dynamic styling features like the Box component that wraps all the style functions provided as a component or pass props to the hooks created by the makeStyles utility to alter stylings during runtime. If you face any such issues, you can always opt out of the concurrent mode by adding the following to the blitz.config.js - 
-    
-module.exports = {    
+    `Configure your Blitz app's styling with Material-UI. This recipe will install all necessary dependencies and configure a base Material-UI setup for usage.
+
+NOTE: Material-UI currently doesn't support concurrent mode. For the most part you can use @material-ui components without altering anything. But, you may face issues if you intend to use dynamic styling features like the Box component that wraps all the style functions provided as a component or pass props to the hooks created by the makeStyles utility to alter stylings during runtime. If you face any such issues, you can always opt out of the concurrent mode by adding the following to the blitz.config.js -
+
+module.exports = {
   experimental: {
-    reactNode: "legacy"
+    reactMode: "legacy"
   },
 
   // keep the other parts of the config as is

recipes/material-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-material-ui",
   "private": true,
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "The Blitz Recipe for installing Material-UI",
   "main": "index.ts",
   "scripts": {
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "dependencies": {
-    "@blitzjs/installer": "0.29.2",
+    "@blitzjs/installer": "0.29.7",
     "jscodeshift": "0.11.0"
   },
   "devDependencies": {

recipes/quirrel/index.ts

@@ -0,0 +1,51 @@
+import {paths, RecipeBuilder} from "@blitzjs/installer"
+import path from "path"
+
+export default RecipeBuilder()
+  .setName("Quirrel")
+  .setDescription("Configure Quirrel locally and set it up for use.")
+  .setOwner("Simon Knott <info@quirrel.dev>")
+  .setRepoLink("https://quirrel.dev")
+  .addAddDependenciesStep({
+    stepId: "addQuirrelDep",
+    stepName: "Install Quirrel",
+    explanation:
+      "Installs the Quirrel NPM package and concurrently (useful for starting Quirrel together with Blitz).",
+    packages: [
+      {
+        name: "quirrel",
+        version: "latest",
+      },
+      {
+        name: "concurrently",
+        version: "latest",
+        isDevDep: true,
+      },
+    ],
+  })
+  .addTransformFilesStep({
+    stepId: "startWithBlitz",
+    stepName: 'Start Quirrel with "blitz start"',
+    explanation: "Make sure that your local Quirrel server runs when you need it.",
+    singleFileSearch: paths.packageJson(),
+    transformPlain(program) {
+      return program.replace(/("start":\s*")(.*)(")/, (_fullMatch, start, command: string, end) => {
+        if (command.includes("concurrently")) {
+          command += ` 'quirrel'`
+        } else {
+          command = `concurrently --raw '${command}' 'quirrel'`
+        }
+
+        return [start, command, end].join("")
+      })
+    },
+  })
+  .addNewFilesStep({
+    stepId: "addExamples",
+    stepName: "Add example files",
+    explanation: "Create one example Queue and CronJob that illustrate Quirrel usage.",
+    targetDirectory: "app",
+    templatePath: path.join(__dirname, "templates", "app"),
+    templateValues: {},
+  })
+  .build()

recipes/quirrel/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@blitzjs/recipe-quirrel",
+  "private": true,
+  "version": "0.29.7",
+  "description": "The Blitz Recipe for adding Quirrel",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"No tests yet\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blitz-js/blitz.git"
+  },
+  "keywords": [
+    "blitz",
+    "blitzjs"
+  ],
+  "author": "Simon Knott <info@quirrel.dev>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/blitz-js/blitz/issues"
+  },
+  "homepage": "https://github.com/blitz-js/blitz#readme",
+  "dependencies": {
+    "@blitzjs/installer": "0.29.2"
+  }
+}

recipes/quirrel/templates/app/api/greetingsQueue.ts

@@ -0,0 +1,13 @@
+import {Queue} from "quirrel/blitz"
+
+export interface Greetings {
+  to: string
+  message: string
+}
+
+export default Queue(
+  "api/greetingsQueue", // the path of this API route
+  async ({to, message}: Greetings) => {
+    console.log(`Greetings, ${to}! Thy ears shall hear: "${message}"`)
+  },
+)

recipes/quirrel/templates/app/api/hourlyCron.ts

@@ -0,0 +1,9 @@
+import {CronJob} from "quirrel/blitz"
+
+export default CronJob(
+  "api/hourlyCron", // the path of this API route
+  "@hourly", // cron schedule (see https://crontab.guru)
+  async () => {
+    console.log("A new hour has begun!")
+  },
+)

recipes/quirrel/templates/app/mutations/enqueueGreeting.ts

@@ -0,0 +1,8 @@
+import greetingsQueue from "app/api/greetingsQueue"
+
+export default async function enqueueGreeting() {
+  await greetingsQueue.enqueue({
+    to: "Sandy Cheeks",
+    message: "Howdy!",
+  })
+}

recipes/reflexjs/index.ts

@@ -77,31 +77,27 @@ function addBabelPreset(program: Collection<j.Program>, name: string) {
 
 export default RecipeBuilder()
   .setName("Reflexjs")
-  .setDescription(
-    "Configure your Blitz app's styling with Reflexjs. This recipe will install all necessary dependencies and configure Reflexjs for immediate use.",
-  )
+  .setDescription("This will install all necessary dependencies and configure Reflexjs for use.")
   .setOwner("tundera <stackshuffle@gmail.com>")
   .setRepoLink("https://github.com/blitz-js/blitz")
   .addAddDependenciesStep({
     stepId: "addDeps",
-    stepName: "Add npm dependencies",
-    explanation:
-      "First, install the `reflexjs` dependency needed to use Reflexjs in our Blitz app.",
+    stepName: "npm dependencies",
+    explanation: "",
     packages: [{name: "reflexjs", version: "1.x"}],
   })
   .addNewFilesStep({
     stepId: "createTheme",
-    stepName: "Define a theme",
-    explanation: "Define a theme definition in the `app/theme` directory.",
-    targetDirectory: "./app",
+    stepName: "Add theme",
+    explanation: "Adds a theme definition in the `app/core/theme` directory.",
+    targetDirectory: "./app/core",
     templatePath: join(__dirname, "templates", "theme"),
     templateValues: {},
   })
   .addTransformFilesStep({
     stepId: "importProviderAndBaseTheme",
     stepName: "Add ThemeProvider component and base theme",
-    explanation:
-      "Next, add the ThemeProvider component to `_app` and pass it the theme defined earlier.",
+    explanation: "Add ThemeProvider component to `_app` and pass it the theme we just created",
     singleFileSearch: paths.app(),
 
     transform(program: Collection<j.Program>) {
@@ -112,7 +108,7 @@ export default RecipeBuilder()
 
       const baseThemeImport = j.importDeclaration(
         [j.importDefaultSpecifier(j.identifier("theme"))],
-        j.literal("app/theme"),
+        j.literal("app/core/theme"),
       )
 
       addImport(program, providerImport)
@@ -141,7 +137,7 @@ export default RecipeBuilder()
     stepId: "updateBabelConfig",
     stepName: "Add Babel preset",
     explanation:
-      "Finally, we'll update the Babel configuration to use the Reflfexjs preset. This automatically sets the jsx pragma in your Blitz app so you won't need to import it in your files.",
+      "Finally, update the Babel configuration to use the Reflfexjs preset. This automatically sets the jsx pragma in your Blitz app so you won't need to import it in your files.",
     singleFileSearch: paths.babelConfig(),
 
     transform(program: Collection<j.Program>) {

recipes/reflexjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-reflexjs",
   "private": true,
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "The Blitz Recipe for installing Reflexjs",
   "main": "index.ts",
   "scripts": {
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "dependencies": {
-    "@blitzjs/installer": "0.29.2",
+    "@blitzjs/installer": "0.29.7",
     "jscodeshift": "0.11.0"
   },
   "devDependencies": {

recipes/render/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-render",
   "private": true,
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "The Blitz Recipe for adding render.yaml",
   "main": "index.ts",
   "scripts": {
@@ -22,6 +22,6 @@
   },
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "dependencies": {
-    "@blitzjs/installer": "0.29.2"
+    "@blitzjs/installer": "0.29.7"
   }
 }

recipes/tailwind/index.ts

@@ -5,16 +5,13 @@ import {join} from "path"
 
 export default RecipeBuilder()
   .setName("Tailwind CSS")
-  .setDescription(
-    `Configure your Blitz app's styling with Tailwind CSS. This recipe will install all necessary dependencies and configure Tailwind for immediate use.`,
-  )
+  .setDescription(`This will install all necessary dependencies and configure Tailwind for use.`)
   .setOwner("adam@markon.codes")
   .setRepoLink("https://github.com/blitz-js/blitz")
   .addAddDependenciesStep({
     stepId: "addDeps",
-    stepName: "Add npm dependencies",
-    explanation: `Tailwind CSS requires a couple of dependencies to get up and running.
-We'll install the Tailwind library itself, as well as PostCSS for removing unused styles from our production bundles.`,
+    stepName: "npm dependencies",
+    explanation: `Tailwind CSS requires a couple of dependencies including PostCSS for removing unused styles from the production bundle`,
     packages: [
       {name: "tailwindcss", version: "2"},
       {name: "autoprefixer", version: "10", isDevDep: true},
@@ -23,29 +20,27 @@ We'll install the Tailwind library itself, as well as PostCSS for removing unuse
   })
   .addNewFilesStep({
     stepId: "addConfig",
-    stepName: "Add Tailwind CSS and PostCSS config files",
-    explanation: `In order to set up Tailwind CSS properly, we need to include a few configuration files. We'll configure Tailwind CSS to know where your app's pages live, and PostCSS for elimination of unused styles.
-
-These config files can be extended for additional customization, but for now we'll just give the minimum required to get started.`,
+    stepName: "Config files",
+    explanation: `Adds config files to give you a good starting point`,
     targetDirectory: ".",
     templatePath: join(__dirname, "templates", "config"),
     templateValues: {},
   })
   .addNewFilesStep({
     stepId: "addStyles",
-    stepName: "Add base Tailwind CSS styles",
-    explanation: `Next, we need to actually create some stylesheets! These stylesheets can either be modified to include global styles for your app, or you can stick to just using classnames in your components.`,
-    targetDirectory: "./app",
+    stepName: "Stylesheet",
+    explanation: `Adds a root CSS stylesheet where Tailwind is imported and where you can add global styles`,
+    targetDirectory: "./app/core",
     templatePath: join(__dirname, "templates", "styles"),
     templateValues: {},
   })
   .addTransformFilesStep({
     stepId: "importStyles",
     stepName: "Import stylesheets",
-    explanation: `Finaly, we can import the stylesheets we just created into our application. For now we'll put them in document.tsx, but if you'd like to only style a part of your app with tailwind you could import the styles lower down in your component tree.`,
+    explanation: `Imports the stylesheet we just added into your app`,
     singleFileSearch: paths.app(),
     transform(program: Collection<j.Program>) {
-      const stylesImport = j.importDeclaration([], j.literal("app/styles/index.css"))
+      const stylesImport = j.importDeclaration([], j.literal("app/core/styles/index.css"))
       return addImport(program, stylesImport)
     },
   })

recipes/tailwind/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-tailwind",
   "private": true,
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "The Blitz Recipe for installing Tailwind CSS",
   "main": "index.ts",
   "scripts": {
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "dependencies": {
-    "@blitzjs/installer": "0.29.2",
+    "@blitzjs/installer": "0.29.7",
     "jscodeshift": "0.11.0"
   },
   "devDependencies": {

recipes/theme-ui/index.ts

@@ -167,15 +167,13 @@ function injectInitializeColorMode(program: Collection<j.Program>) {
 
 export default RecipeBuilder()
   .setName("Theme UI")
-  .setDescription(
-    `Configure your Blitz app's styling with Theme UI. This recipe will install all necessary dependencies and configure Theme UI for immediate use.`,
-  )
+  .setDescription(`This will install all necessary dependencies and configure Theme UI for use.`)
   .setOwner("tundera <stackshuffle@gmail.com>")
   .setRepoLink("https://github.com/blitz-js/blitz")
   .addAddDependenciesStep({
     stepId: "addDeps",
-    stepName: "Add npm dependencies",
-    explanation: `First, we'll install the dependencies needed to use Theme UI in our Blitz app.`,
+    stepName: "npm dependencies",
+    explanation: ``,
     packages: [
       {name: "theme-ui", version: "0.x"},
       {name: "@theme-ui/prism", version: "0.x"},
@@ -228,12 +226,12 @@ export default RecipeBuilder()
 
       const baseThemeImport = j.importDeclaration(
         [j.importDefaultSpecifier(j.identifier("theme"))],
-        j.literal("app/theme"),
+        j.literal("app/core/theme"),
       )
 
       const mdxComponentsImport = j.importDeclaration(
         [j.importDefaultSpecifier(j.identifier("components"))],
-        j.literal("app/theme/components"),
+        j.literal("app/core/theme/components"),
       )
 
       addImport(program, providerImport)
@@ -246,7 +244,7 @@ export default RecipeBuilder()
     stepId: "addStyles",
     stepName: "Add a base theme file",
     explanation: `Next, we need to actually create some stylesheets! These stylesheets can either be modified to include global styles for your app, or you can stick to just using classnames in your components.`,
-    targetDirectory: "./app",
+    targetDirectory: "./app/core",
     templatePath: join(__dirname, "templates", "theme"),
     templateValues: {},
   })
@@ -254,8 +252,8 @@ export default RecipeBuilder()
     stepId: "addMdxLayout",
     stepName: "Create a layout for MDX content",
     explanation:
-      "Now we add a layout component for MDX content. We'll add a layout called `MdxLayout.tsx` to the `app/layouts` directory. ",
-    targetDirectory: "./app/layouts",
+      "Now we add a layout component for MDX content. We'll add a layout called `MdxLayout.tsx` to the `app/core/layouts` directory. ",
+    targetDirectory: "./app/core/layouts",
     templatePath: join(__dirname, "templates", "layouts"),
     templateValues: {},
   })
@@ -263,8 +261,8 @@ export default RecipeBuilder()
     stepId: "addMdxLayout",
     stepName: "Add an MDX page",
     explanation:
-      "Finally, we'll add a page to `app/pages` called `demo.mdx`. Notice the MDX components defined in `apps/theme/components.tsx` appear in place of their corresponding markdown elements.",
-    targetDirectory: "./app/layouts",
+      "Finally, we'll add a page to `app/pages` called `demo.mdx`. Notice the MDX components defined in `apps/core/theme/components.tsx` appear in place of their corresponding markdown elements.",
+    targetDirectory: "./app/core/layouts",
     templatePath: join(__dirname, "templates", "layouts"),
     templateValues: {},
   })

recipes/theme-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-theme-ui",
   "private": true,
-  "version": "0.29.2",
+  "version": "0.29.7",
   "description": "The Blitz Recipe for installing Theme UI",
   "main": "index.ts",
   "scripts": {
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "dependencies": {
-    "@blitzjs/installer": "0.29.2",
+    "@blitzjs/installer": "0.29.7",
     "jscodeshift": "0.11.0"
   },
   "devDependencies": {

yarn.lock

@@ -12207,7 +12207,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.15, lodash-es@^4.17.20:
+lodash-es@^4.17.20:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.20.tgz#29f6332eefc60e849f869c264bc71126ad61e8f7"
   integrity sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA==
@@ -17120,13 +17120,10 @@ stylis@3.5.4:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
-superjson@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.4.1.tgz#c96501fc0cc32cc9cb25ecc3fb476db631eceba2"
-  integrity sha512-+PjOQNj7mW4I0t3KphIgwwQvQObd5Tc1DtUoIMj3iN7RXQyoWr2R8LXLtQw/UNEItSd0Al+qn0I/8yCnTXiAIw==
-  dependencies:
-    lodash "^4.17.20"
-    lodash-es "^4.17.15"
+superjson@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.5.2.tgz#bf8620adcc35dc77834d3fc69b2c929cb152f236"
+  integrity sha512-ko6wjKha8KwUdl6K9NwnRcRTsylW8bt3E7bp0ixIiO8nVJP+qzHzwLLZ1WARIxPmrqkxvEB79w4xLtis1QlT3g==
 
 supports-color@^2.0.0:
   version "2.0.0"
@@ -17830,10 +17827,10 @@ tslib@^1, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslog@^3.0.5:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/tslog/-/tslog-3.0.5.tgz#ea4243cde2bd64e5fbfedbec0a78d298b9504c46"
-  integrity sha512-WyI2zFa6rVzXja6bKIZ9VeRKwHceqlUzCCo2IMsi6X5oswij95s3GJKve1Pr5bdlVIUMTsWaT/wtBiL7MT4PLQ==
+tslog@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tslog/-/tslog-3.1.0.tgz#e169c974c297bdec160a17a4dc19acd86f65b4e8"
+  integrity sha512-q3Itu9GGBd9ijZ3HF+lUB6E4N+qlGxVpGxBTIIMuMSQbYDE3gg/TOCsywtKFxVtqvmS9aCyKw/xeUxfvrx+oMQ==
   dependencies:
     source-map-support "^0.5.19"