v0.27.1

Co-authored-by: Brandon Bayer <b@bayer.ws> (recipe)

README.md

@@ -459,6 +459,7 @@ Thanks to these wonderful people ([emoji key](https://allcontributors.org/docs/e
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

examples/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/auth",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "scripts": {
     "start": "blitz start",
     "studio": "blitz db studio",
@@ -40,7 +40,7 @@
   "dependencies": {
     "@prisma/cli": "2.12.0",
     "@prisma/client": "2.12.0",
-    "blitz": "0.27.0",
+    "blitz": "0.27.1",
     "final-form": "4.20.1",
     "passport-auth0": "1.3.3",
     "passport-github2": "0.1.11",

examples/fauna/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/fauna",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "scripts": {
     "start": "blitz start",
     "studio": "blitz db studio",
@@ -27,7 +27,7 @@
     ]
   },
   "dependencies": {
-    "blitz": "0.27.0",
+    "blitz": "0.27.1",
     "final-form": "4.20.1",
     "graphql": "15.3.0",
     "graphql-request": "3.1.0",

examples/no-prisma/package.json

@@ -1,6 +1,6 @@
 {
   "name": "no-prisma",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "scripts": {
     "start": "blitz start",
     "build": "blitz build",
@@ -26,7 +26,7 @@
     ]
   },
   "dependencies": {
-    "blitz": "0.27.0",
+    "blitz": "0.27.1",
     "knex": "0.21.2",
     "react": "0.0.0-experimental-4ead6b530",
     "react-dom": "0.0.0-experimental-4ead6b530",

examples/plain-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/plain-js",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "scripts": {
     "start": "blitz start",
     "build": "blitz db migrate && blitz build",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@prisma/cli": "2.12.0",
     "@prisma/client": "2.12.0",
-    "blitz": "0.27.0",
+    "blitz": "0.27.1",
     "react": "0.0.0-experimental-4ead6b530",
     "react-dom": "0.0.0-experimental-4ead6b530"
   },

examples/store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/store",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "private": true,
   "scripts": {
     "build": "blitz db migrate && blitz build",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@prisma/cli": "2.12.0",
     "@prisma/client": "2.12.0",
-    "blitz": "0.27.0",
+    "blitz": "0.27.1",
     "final-form": "4.19.1",
     "react": "0.0.0-experimental-4ead6b530",
     "react-dom": "0.0.0-experimental-4ead6b530",

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0",
+  "version": "0.27.1",
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist",
@@ -40,13 +40,13 @@
     "url": "https://github.com/blitz-js/blitz"
   },
   "dependencies": {
-    "@blitzjs/cli": "0.27.0",
-    "@blitzjs/config": "0.27.0",
-    "@blitzjs/core": "0.27.0",
-    "@blitzjs/display": "0.27.0",
-    "@blitzjs/generator": "0.27.0",
-    "@blitzjs/installer": "0.27.0",
-    "@blitzjs/server": "0.27.0",
+    "@blitzjs/cli": "0.27.1",
+    "@blitzjs/config": "0.27.1",
+    "@blitzjs/core": "0.27.1",
+    "@blitzjs/display": "0.27.1",
+    "@blitzjs/generator": "0.27.1",
+    "@blitzjs/installer": "0.27.1",
+    "@blitzjs/server": "0.27.1",
     "envinfo": "7.7.2",
     "os-name": "3.1.0",
     "pkg-dir": "4.2.0",

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/cli",
   "description": "Blitz.js CLI",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "license": "MIT",
   "scripts": {
     "b": "./bin/run",
@@ -30,8 +30,8 @@
     "/lib"
   ],
   "dependencies": {
-    "@blitzjs/display": "0.27.0",
-    "@blitzjs/repl": "0.27.0",
+    "@blitzjs/display": "0.27.1",
+    "@blitzjs/repl": "0.27.1",
     "@oclif/command": "1.5.20",
     "@oclif/config": "1.15.1",
     "@oclif/plugin-autocomplete": "0.2.0",
@@ -59,9 +59,9 @@
     "v8-compile-cache": "2.1.1"
   },
   "devDependencies": {
-    "@blitzjs/generator": "0.27.0",
-    "@blitzjs/installer": "0.27.0",
-    "@blitzjs/server": "0.27.0",
+    "@blitzjs/generator": "0.27.1",
+    "@blitzjs/installer": "0.27.1",
+    "@blitzjs/server": "0.27.1",
     "@oclif/dev-cli": "1.22.2",
     "@oclif/test": "1.2.5",
     "@prisma/cli": "2.12.0",

packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/config",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0",
+  "version": "0.27.1",
   "license": "MIT",
   "scripts": {
     "clean": "rimraf dist",
@@ -40,7 +40,7 @@
     "url": "https://github.com/blitz-js/blitz"
   },
   "dependencies": {
-    "@blitzjs/display": "0.27.0",
+    "@blitzjs/display": "0.27.1",
     "b64-lite": "1.4.0",
     "bad-behavior": "1.0.1",
     "cookie-session": "1.4.0",

packages/display/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/display",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "description": "Display package for the Blitz CLI",
   "homepage": "https://github.com/blitz-js/blitz#readme",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "url": "git+https://github.com/blitz-js/blitz.git"
   },
   "dependencies": {
-    "@blitzjs/display": "0.27.0",
+    "@blitzjs/display": "0.27.1",
     "chalk": "4.0.0",
     "ora": "4.0.4",
     "tslog": "2.9.1"

packages/file-pipeline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/file-pipeline",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0",
+    "@blitzjs/display": "0.27.1",
     "chalk": "4.0.0",
     "chokidar": "3.4.2",
     "flush-write-stream": "2.0.0",

packages/generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/generator",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.9.0",
     "@babel/plugin-transform-typescript": "7.9.4",
-    "@blitzjs/display": "0.27.0",
+    "@blitzjs/display": "0.27.1",
     "@types/jscodeshift": "0.7.1",
     "chalk": "4.0.0",
     "cross-spawn": "7.0.3",

packages/generator/templates/app/package.json

@@ -31,8 +31,8 @@
     ]
   },
   "dependencies": {
-    "@prisma/cli": "2.x",
-    "@prisma/client": "2.x",
+    "@prisma/cli": "~2.12",
+    "@prisma/client": "~2.12",
     "blitz": "canary",
     "react": "0.0.0-experimental-4ead6b530",
     "react-dom": "0.0.0-experimental-4ead6b530",

packages/installer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/installer",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.9.0",
     "@babel/plugin-transform-typescript": "7.9.4",
-    "@blitzjs/config": "0.27.0",
-    "@blitzjs/display": "0.27.0",
-    "@blitzjs/generator": "0.27.0",
+    "@blitzjs/config": "0.27.1",
+    "@blitzjs/display": "0.27.1",
+    "@blitzjs/generator": "0.27.1",
     "@types/jscodeshift": "0.7.1",
     "chokidar": "3.4.2",
     "cross-spawn": "7.0.3",

packages/repl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/repl",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0",
+  "version": "0.27.1",
   "license": "MIT",
   "bin": {
     "next-patched": "./bin/next-patched"
@@ -34,7 +34,7 @@
     ]
   },
   "dependencies": {
-    "@blitzjs/file-pipeline": "0.27.0",
+    "@blitzjs/file-pipeline": "0.27.1",
     "b64-lite": "1.4.0",
     "cookie": "0.4.1",
     "cross-spawn": "7.0.3",
@@ -71,7 +71,7 @@
     "vinyl-fs": "3.0.3"
   },
   "devDependencies": {
-    "@blitzjs/core": "0.27.0",
+    "@blitzjs/core": "0.27.1",
     "next-transpile-modules": "3.2.0"
   },
   "gitHead": "d3b9fce0bdd251c2b1890793b0aa1cd77c1c0922"

packages/server/src/with-blitz.ts

@@ -25,13 +25,13 @@ export function withBlitz(nextConfig: any) {
           config.module = config.module || {}
           config.module.rules = config.module.rules || []
           const excluded = [
-            /db/,
-            /@blitzjs[\\/]display/,
-            /@blitzjs[\\/]config/,
-            /@prisma[\\/]client/,
-            /passport/,
-            /cookie-session/,
-            /secure-password/,
+            path.resolve("./db"),
+            /node_modules[\\/]@blitzjs[\\/]display/,
+            /node_modules[\\/]@blitzjs[\\/]config/,
+            /node_modules[\\/]@prisma[\\/]client/,
+            /node_modules[\\/]passport/,
+            /node_modules[\\/]cookie-session/,
+            /node_modules[\\/]secure-password/,
             /blitz[\\/]packages[\\/]config/,
             /blitz[\\/]packages[\\/]display/,
           ]

recipes/base-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-base-web",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0",
+    "@blitzjs/installer": "0.27.1",
     "jscodeshift": "0.10.0"
   },
   "devDependencies": {

recipes/chakra/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-chakra",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0",
+    "@blitzjs/installer": "0.27.1",
     "jscodeshift": "0.10.0"
   },
   "devDependencies": {

recipes/emotion/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-emotion",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0",
+    "@blitzjs/installer": "0.27.1",
     "jscodeshift": "0.10.0"
   },
   "devDependencies": {

recipes/material-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-material-ui",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0",
+    "@blitzjs/installer": "0.27.1",
     "jscodeshift": "0.10.0"
   },
   "devDependencies": {

recipes/reflexjs/index.ts

@@ -0,0 +1,152 @@
+import {addImport, paths, RecipeBuilder} from "@blitzjs/installer"
+import {NodePath} from "ast-types/lib/node-path"
+import j from "jscodeshift"
+import {Collection} from "jscodeshift/src/Collection"
+import {join} from "path"
+
+function wrapComponentWithThemeProvider(program: Collection<j.Program>) {
+  program
+    .find(j.JSXElement)
+    .filter(
+      (path) =>
+        path.parent?.parent?.parent?.value?.id?.name === "App" &&
+        path.parent?.value.type === j.ReturnStatement.toString(),
+    )
+    .forEach((path: NodePath) => {
+      const {node} = path
+      path.replace(
+        j.jsxElement(
+          j.jsxOpeningElement(j.jsxIdentifier("ThemeProvider"), [
+            j.jsxAttribute(
+              j.jsxIdentifier("theme"),
+              j.jsxExpressionContainer(j.identifier("theme")),
+            ),
+          ]),
+          j.jsxClosingElement(j.jsxIdentifier("ThemeProvider")),
+          [j.jsxText("\n"), node, j.jsxText("\n")],
+        ),
+      )
+    })
+
+  return program
+}
+
+function injectInitializeColorMode(program: Collection<j.Program>) {
+  program.find(j.JSXElement, {openingElement: {name: {name: "body"}}}).forEach((path) => {
+    const {node} = path
+    path.replace(
+      j.jsxElement(
+        j.jsxOpeningElement(j.jsxIdentifier("body")),
+        j.jsxClosingElement(j.jsxIdentifier("body")),
+        [
+          j.literal("\n"),
+          j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier("InitializeColorMode"), [], true)),
+          ...node.children,
+        ],
+      ),
+    )
+  })
+
+  return program
+}
+
+function findModuleExportsExpressions(program: Collection<j.Program>) {
+  return program.find(j.AssignmentExpression).filter((path) => {
+    return (
+      path.value.left.type === "MemberExpression" &&
+      (path.value.left.object as any).name === "module" &&
+      (path.value.left.property as any).name === "exports" &&
+      path.value.right.type === "ObjectExpression"
+    )
+  })
+}
+
+function addBabelPreset(program: Collection<j.Program>, name: string) {
+  findModuleExportsExpressions(program).forEach((moduleExportsExpression) => {
+    j(moduleExportsExpression)
+      .find(j.ObjectProperty, {key: {name: "presets"}})
+      .forEach((path) => {
+        // TODO: figure out if there's a better way to type plugins.node.value
+        const presets = path.node.value as j.ArrayExpression
+        presets.elements.push(j.literal(name))
+      })
+  })
+
+  return program
+}
+
+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.",
+  )
+  .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.",
+    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",
+    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.",
+    singleFileSearch: paths.app(),
+
+    transform(program: Collection<j.Program>) {
+      const providerImport = j.importDeclaration(
+        [j.importSpecifier(j.identifier("ThemeProvider"))],
+        j.literal("reflexjs"),
+      )
+
+      const baseThemeImport = j.importDeclaration(
+        [j.importDefaultSpecifier(j.identifier("theme"))],
+        j.literal("app/theme"),
+      )
+
+      addImport(program, providerImport)
+      addImport(program, baseThemeImport)
+      return wrapComponentWithThemeProvider(program)
+    },
+  })
+  .addTransformFilesStep({
+    stepId: "importInitializeColorMode",
+    stepName: "Add `InitializeColorMode` component to document body",
+    explanation:
+      "Add the `InitializeColorMode` component to the document body to support Reflexjs color mode features.",
+    singleFileSearch: paths.document(),
+
+    transform(program: Collection<j.Program>) {
+      const initializeColorModeImport = j.importDeclaration(
+        [j.importSpecifier(j.identifier("InitializeColorMode"))],
+        j.literal("reflexjs"),
+      )
+
+      addImport(program, initializeColorModeImport)
+      return injectInitializeColorMode(program)
+    },
+  })
+  .addTransformFilesStep({
+    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.",
+    singleFileSearch: paths.babelConfig(),
+
+    transform(program: Collection<j.Program>) {
+      console.log("here")
+      return addBabelPreset(program, "reflexjs/babel")
+    },
+  })
+  .build()

recipes/reflexjs/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@blitzjs/recipe-reflexjs",
+  "private": true,
+  "version": "0.27.1",
+  "description": "The Blitz Recipe for installing Reflexjs",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"No tests yet\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blitz-js/blitz.git"
+  },
+  "keywords": [
+    "blitz",
+    "blitzjs",
+    "theme-ui"
+  ],
+  "author": "tundera <stackshuffle@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/blitz-js/blitz/issues"
+  },
+  "homepage": "https://github.com/blitz-js/blitz#readme",
+  "dependencies": {
+    "@blitzjs/installer": "0.27.1",
+    "jscodeshift": "0.10.0"
+  },
+  "devDependencies": {
+    "@types/jscodeshift": "0.7.1"
+  }
+}

recipes/reflexjs/templates/theme/theme/index.ts

@@ -0,0 +1,494 @@
+export default {
+  breakpoints: ["640px", "768px", "1024px", "1280px"],
+  colors: {
+    text: "#111",
+    heading: "#111",
+    background: "#fff",
+    primary: "#06f",
+    gray: "#6c6c6c",
+    border: "#eaeaea",
+    muted: "#f7f7f8",
+    prism: {
+      text: "#d6deeb",
+      lineNumber: "#88a0d6",
+      background: "#031528",
+      comment: "#93b4b4",
+      string: "#addb67",
+      var: "#d6deeb",
+      number: "#f78c6c",
+      constant: "#82aaff",
+      punctuation: "#c792ea",
+      className: "#ffcb8b",
+      tag: "#7fdbca",
+      boolean: "#ff5874",
+      property: "#80cbc4",
+      namespace: "#b2ccd6",
+      highlight: "#243E73",
+      file: "#92B5B2",
+    },
+    modes: {
+      dark: {
+        text: "#a0aec0",
+        heading: "#fff",
+        background: "#1a202c",
+        primary: "#fb559a",
+        border: "#2d3748",
+        gray: "#718096",
+        muted: "#2d3748",
+      },
+    },
+  },
+  fonts: {
+    serif: "Lora, serif",
+    sans: "Inter, -apple-system, BlinkMacSystemFont, Helvetica Neue, sans-serif",
+    monospace:
+      "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "4rem",
+  },
+  fontWeights: {
+    hairline: "100",
+    thin: "200",
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900",
+  },
+  lineHeights: {
+    none: "1",
+    tight: "1.25",
+    snug: "1.375",
+    normal: "1.5",
+    relaxed: "1.625",
+    loose: "2",
+    3: ".75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+  },
+  letterSpacings: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+  },
+  space: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    12: "3rem",
+    14: "3.5rem",
+    16: "4rem",
+    18: "4.5rem",
+    20: "5rem",
+    22: "5.5rem",
+    24: "6rem",
+    26: "6.5rem",
+    28: "7rem",
+    30: "7.5rem",
+    32: "8rem",
+    36: "9rem",
+    40: "10rem",
+    48: "12rem",
+    56: "14rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+  },
+  sizes: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    12: "3rem",
+    14: "3.5rem",
+    16: "4rem",
+    18: "4.5rem",
+    20: "5rem",
+    22: "5.5rem",
+    24: "6rem",
+    26: "6.5rem",
+    28: "7rem",
+    30: "7.5rem",
+    32: "8rem",
+    36: "9rem",
+    40: "10rem",
+    48: "12rem",
+    56: "14rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+    auto: "auto",
+    half: "50%",
+    full: "100%",
+    screen: "100vw",
+  },
+  borders: [
+    0,
+    "1px solid",
+    "2px solid",
+    "3px solid",
+    "4px solid",
+    "5px solid",
+    "6px solid",
+    "7px solid",
+    "8px solid",
+    "9px solid",
+    "10px solid",
+  ],
+  radii: {
+    none: "0",
+    sm: "0.125rem",
+    md: "0.25rem",
+    lg: "0.375rem",
+    xl: "0.5rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    "4xl": "2rem",
+    full: "9999px",
+  },
+  shadows: {
+    none: "none",
+    xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    md: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+    lg: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    xl: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    "2xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    "3xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+    outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
+  },
+  gridTemplateColumns: {
+    none: "none",
+    1: "repeat(1, minmax(0, 1fr))",
+    2: "repeat(2, minmax(0, 1fr))",
+    3: "repeat(3, minmax(0, 1fr))",
+    4: "repeat(4, minmax(0, 1fr))",
+    5: "repeat(5, minmax(0, 1fr))",
+    6: "repeat(6, minmax(0, 1fr))",
+    7: "repeat(7, minmax(0, 1fr))",
+    8: "repeat(8, minmax(0, 1fr))",
+    9: "repeat(9, minmax(0, 1fr))",
+    10: "repeat(10, minmax(0, 1fr))",
+    11: "repeat(11, minmax(0, 1fr))",
+    12: "repeat(12, minmax(0, 1fr))",
+  },
+  gridTemplateRows: {
+    none: "none",
+    1: "repeat(1, minmax(0, 1fr))",
+    2: "repeat(2, minmax(0, 1fr))",
+    3: "repeat(3, minmax(0, 1fr))",
+    4: "repeat(4, minmax(0, 1fr))",
+    5: "repeat(5, minmax(0, 1fr))",
+    6: "repeat(6, minmax(0, 1fr))",
+  },
+  styles: {
+    global: {
+      "*": {
+        m: 0,
+        p: 0,
+      },
+      html: {
+        fontFamily: "sans",
+        fontSize: ["14px", "16px"],
+        lineHeight: "normal",
+        fontFeatureSettings: "'kern'",
+        textRendering: "optimizeLegibility",
+      },
+      hr: {
+        borderBottomWidth: 1,
+        my: 6,
+      },
+    },
+    root: {
+      "*": {
+        listStyle: "none",
+        border: "0 solid",
+        borderColor: "border",
+      },
+    },
+  },
+  container: {
+    px: "6|4|4",
+    maxW: 1024,
+    mx: "auto",
+
+    sm: {
+      maxW: 680,
+    },
+  },
+
+  text: {
+    lead: {
+      fontFamily: "serif",
+      fontSize: "2xl",
+      lineHeight: "normal",
+      fontWeight: "normal",
+    },
+
+    paragraph: {
+      fontFamily: "serif",
+      fontSize: "xl",
+      my: 8,
+      lineHeight: 8,
+    },
+
+    pre: {
+      color: "prism.text",
+      backgroundColor: "prism.background",
+      fontFamily: "monospace",
+      fontSize: "md",
+      lineHeight: 7,
+      tabSize: 2,
+      hyphens: "none",
+      my: 8,
+      py: 4,
+      overflow: "auto",
+      borderRadius: "md",
+      whiteSpace: "pre-wrap",
+      ".plain": {
+        minHeight: "1ch",
+        display: "inline-block",
+      },
+      ".attr-name": {
+        fontStyle: "italic",
+      },
+      ".comment": {
+        color: "prism.comment",
+      },
+      ".attr-name, .string, .url": {
+        color: "prism.string",
+      },
+      ".variable": {
+        color: "prism.var",
+      },
+      ".number": {
+        color: "prism.number",
+      },
+      ".builtin, .char, .constant, .function": {
+        color: "prism.constant",
+      },
+      ".punctuation, .selector, .doctype": {
+        color: "prism.punctuation",
+      },
+      ".class-name": {
+        color: "prism.className",
+      },
+      ".operator, .keyword": {
+        color: "prism.tag",
+      },
+      ".boolean": {
+        color: "prism.boolean",
+      },
+      ".property": {
+        color: "prism.property",
+      },
+      ".namespace": {
+        color: "prism.namespace",
+      },
+      ".highlight": {
+        bg: "prism.highlight",
+      },
+    },
+  },
+
+  heading: {
+    color: "heading",
+    fontFamily: "sans",
+    fontWeight: "semibold",
+    lineHeight: "tight",
+    letterSpacing: "tight",
+
+    h1: {
+      fontSize: "5xl|6xl",
+      fontWeight: "black",
+    },
+    h2: {
+      fontSize: "2xl|3xl|4xl",
+    },
+    h3: {
+      fontSize: "xl|2xl|3xl",
+    },
+    h4: {
+      fontSize: "lg|xl|2xl",
+    },
+    title: {
+      variant: "heading.h1",
+      fontSize: "4xl|5xl|6xl",
+    },
+  },
+
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "text",
+    bg: "muted",
+    fontFamily: "sans",
+    fontSize: "md",
+    lineHeight: "none",
+    textDecoration: "none",
+    border: "1px solid",
+    borderColor: "border",
+    borderRadius: "md",
+    px: 4,
+    py: 3,
+    cursor: "pointer",
+    transition: "all .15s ease-in",
+
+    ":hover, :focus": {
+      transform: "translateY(-2px)",
+      boxShadow: "lg",
+    },
+
+    sm: {
+      px: 3,
+      py: 2,
+      fontSize: "sm",
+    },
+
+    lg: {
+      px: 5,
+      py: 4,
+      fontSize: "xl",
+    },
+
+    primary: {
+      bg: "primary",
+      color: "white",
+      borderColor: "primary",
+
+      "&:hover, &:focus": {
+        bg: "primaryHover",
+        color: "white",
+        borderColor: "primaryHover",
+        transform: "translateY(-2px)",
+        boxShadow: "lg",
+      },
+    },
+
+    secondary: {
+      bg: "secondary",
+      color: "white",
+      borderColor: "secondary",
+
+      "&:hover, &:focus": {
+        bg: "secondaryHover",
+        color: "white",
+        borderColor: "secondaryHover",
+        transform: "translateY(-2px)",
+        boxShadow: "lg",
+      },
+    },
+
+    accent: {
+      bg: "accent",
+      color: "white",
+      borderColor: "accent",
+
+      "&:hover, &:focus": {
+        bg: "accentHover",
+        color: "white",
+        borderColor: "accentHover",
+        transform: "translateY(-2px)",
+        boxShadow: "lg",
+      },
+    },
+
+    link: {
+      bg: "transparent",
+      color: "text",
+      borderColor: "transparent",
+
+      "&:hover, &:focus": {
+        bg: "transparent",
+        borderColor: "transparent",
+        transform: "translateY(-2px)",
+        boxShadow: "none",
+        color: "primary",
+      },
+    },
+
+    icon: {
+      bg: "transparent",
+      p: 2,
+      borderColor: "transparent",
+
+      ":hover, :focus": {
+        transform: "none",
+        boxShadow: "none",
+        color: "primary",
+      },
+    },
+  },
+
+  list: {
+    variant: "text.paragraph",
+    my: 6,
+    ml: 6,
+
+    li: {
+      mb: 4,
+    },
+
+    unordered: {
+      li: {
+        listStyle: "disc",
+      },
+    },
+
+    ordered: {
+      li: {
+        listStyle: "decimal",
+      },
+    },
+  },
+
+  icons: {
+    clipboard: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>`,
+    check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><path d="M20 6L9 17l-5-5"/></svg>`,
+    sun: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>`,
+    moon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>`,
+    arrow: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>`,
+    code: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg>`,
+    search: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>`,
+    swatch: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>`,
+    users: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>`,
+    chart: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>`,
+  },
+}

recipes/render/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-render",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0"
+    "@blitzjs/installer": "0.27.1"
   }
 }

recipes/tailwind/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-tailwind",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.27.1",
   "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.27.0",
+    "@blitzjs/installer": "0.27.1",
     "jscodeshift": "0.10.0"
   },
   "devDependencies": {

recipes/theme-ui/index.ts

@@ -121,6 +121,31 @@ function wrapComponentWithThemeProvider(program: Collection<j.Program>) {
   return program
 }
 
+function updateBlitzConfigProperty(program: Collection<j.Program>, property: string) {
+  return program
+    .find(j.AssignmentExpression, {
+      operator: "=",
+      left: {object: {name: "module"}, property: {name: "exports"}},
+      right: {type: "ObjectExpression"},
+    })
+    .forEach((path) => {
+      const configProperty = j.objectProperty(
+        j.identifier(property),
+        j.arrayExpression([
+          j.literal("js"),
+          j.literal("jsx"),
+          j.literal("ts"),
+          j.literal("tsx"),
+          j.literal("md"),
+          j.literal("mdx"),
+        ]),
+      )
+
+      const properties = path.get(0).node.right.properties
+      path.get(0).node.right.properties = [...properties, configProperty]
+    })
+}
+
 function injectInitializeColorMode(program: Collection<j.Program>) {
   program.find(j.JSXElement, {openingElement: {name: {name: "body"}}}).forEach((path) => {
     const {node} = path
@@ -153,6 +178,7 @@ export default RecipeBuilder()
     explanation: `First, we'll install the dependencies needed to use Theme UI in our Blitz app.`,
     packages: [
       {name: "theme-ui", version: "0.x"},
+      {name: "@theme-ui/prism", version: "0.x"},
       {name: NEXT_MDX_PLUGIN_MODULE, version: "10.x"},
       {name: "@mdx-js/loader", version: "1.x"},
     ],
@@ -168,6 +194,7 @@ export default RecipeBuilder()
 
       addRequire(program, NEXT_MDX_PLUGIN_NAME, NEXT_MDX_PLUGIN_MODULE)
       initializeRequire(program, NEXT_MDX_PLUGIN_NAME, NEXT_MDX_PLUGIN_MODULE, initExpression)
+      updateBlitzConfigProperty(program, "pageExtensions")
       return wrapBlitzConfigWithNextMdxPlugin(program)
     },
   })
@@ -225,11 +252,20 @@ export default RecipeBuilder()
   })
   .addNewFilesStep({
     stepId: "addMdxLayout",
-    stepName: "Create a layout MDX pages",
+    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",
     templatePath: join(__dirname, "templates", "layouts"),
     templateValues: {},
   })
+  .addNewFilesStep({
+    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",
+    templatePath: join(__dirname, "templates", "layouts"),
+    templateValues: {},
+  })
   .build()

recipes/theme-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@blitzjs/recipe-theme-ui",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.27.1",
   "description": "The Blitz Recipe for installing Theme UI",
   "main": "index.ts",
   "scripts": {

recipes/theme-ui/templates/layouts/MdxLayout.tsx

@@ -2,12 +2,12 @@ import {Head} from "blitz"
 import {FC, ReactNode} from "react"
 import {Container} from "theme-ui"
 
-type LayoutProps = {
+type MdxLayoutProps = {
   title: string
   children: ReactNode
 }
 
-const Layout: FC<LayoutProps> = ({title, children}) => {
+const MdxLayout: FC<MdxLayoutProps> = ({title, children}) => {
   return (
     <>
       <Head>
@@ -19,4 +19,4 @@ const Layout: FC<LayoutProps> = ({title, children}) => {
   )
 }
 
-export default Layout
+export default MdxLayout

recipes/theme-ui/templates/pages/demo.mdx

@@ -0,0 +1,23 @@
+import MdxLayout from "app/layouts/MdxLayout"
+
+export default ({children}) => <MdxLayout title="MDX Demo">{children}</MdxLayout>
+
+# MDX Demo
+
+This page uses Theme UI markdown components defined in `app/theme/components.tsx`
+
+## Code Blocks
+
+We can define components to replace markdown specifiers like code blocks:
+
+```tsx
+import Prism from "@theme-ui/prism"
+import React from "react"
+
+const components = {
+  pre: ({children}) => <>{children}</>,
+  code: Prism,
+}
+
+export default components
+```

recipes/theme-ui/templates/theme/theme/index.ts

@@ -1,6 +1,6 @@
 import shadesOfPurple from "@theme-ui/prism/presets/shades-of-purple.json"
 
-export default {
+const theme = {
   initialColorModeName: "light",
   useColorSchemeMediaQuery: true,
   colors: {
@@ -17,6 +17,9 @@ export default {
       },
     },
   },
+  sizes: {
+    container: 768,
+  },
   fonts: {
     body:
       'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
@@ -41,12 +44,16 @@ export default {
       },
     },
     pre: {
+      borderRadius: "10px",
       ".highlight": {
         background: "hsla(0, 0%, 30%, .5)",
       },
     },
     code: {
+      padding: "20px",
       ...shadesOfPurple,
     },
   },
 }
+
+export default theme

yarn.lock

@@ -1812,6 +1812,64 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@blitzjs/display@0.25.1-canary.3":
+  version "0.25.1-canary.3"
+  resolved "https://registry.yarnpkg.com/@blitzjs/display/-/display-0.25.1-canary.3.tgz#ce21accdc6ac9f5832fd81111210a254be768d1e"
+  integrity sha512-kefdY0oxg3Y3I6dy2hGJ9GSIurpQYWNlqts0MIyHjlDdkVNWnhYK2ZvKYKbHXA/5JgapgMYq1+iNPmNCk24gLw==
+  dependencies:
+    chalk "4.0.0"
+    ora "4.0.4"
+    tslog "2.9.1"
+
+"@blitzjs/generator@0.25.1-canary.3":
+  version "0.25.1-canary.3"
+  resolved "https://registry.yarnpkg.com/@blitzjs/generator/-/generator-0.25.1-canary.3.tgz#b53c7a87f20d1c27a11725d1ba9f1adb54354851"
+  integrity sha512-VDnAy640f8mk5M8up1TtzIGnqtMg4rkMMy+O4nw2dRikLuiKyvRisf/1rD1gjZbJmvneRUFj4h+uZJUkUcDbBA==
+  dependencies:
+    "@babel/core" "7.9.0"
+    "@babel/plugin-transform-typescript" "7.9.4"
+    "@blitzjs/display" "0.25.1-canary.3"
+    "@types/jscodeshift" "0.7.1"
+    chalk "4.0.0"
+    cross-spawn "7.0.3"
+    diff "4.0.2"
+    enquirer "2.3.5"
+    fs-extra "9.0.0"
+    fs-readdir-recursive "1.1.0"
+    got "11.1.3"
+    jscodeshift "0.10.0"
+    mem-fs "1.1.3"
+    mem-fs-editor "6.0.0"
+    node-fetch "2.6.1"
+    pluralize "8.0.0"
+    recast "0.19.1"
+    username "5.1.0"
+    vinyl "2.2.0"
+
+"@blitzjs/installer@0.25.1-canary.3":
+  version "0.25.1-canary.3"
+  resolved "https://registry.yarnpkg.com/@blitzjs/installer/-/installer-0.25.1-canary.3.tgz#747771e560e201a88da1d59b2467dd9d54c58f45"
+  integrity sha512-2zOOhfk2EjPC+z8Od0XJQXjRLhCyBoDqKaa2hN7b75Rk1VS0hIPwLXq4Se4F13WHnEJnT+ZgrEXLZ6mE3pFlxw==
+  dependencies:
+    "@babel/core" "7.9.0"
+    "@babel/plugin-transform-typescript" "7.9.4"
+    "@blitzjs/display" "0.25.1-canary.3"
+    "@blitzjs/generator" "0.25.1-canary.3"
+    "@types/jscodeshift" "0.7.1"
+    chokidar "3.4.2"
+    cross-spawn "7.0.3"
+    diff "4.0.2"
+    enquirer "2.3.5"
+    fs-extra "9.0.0"
+    globby "11.0.0"
+    ink "3.0.7"
+    ink-link "2.0.0"
+    ink-spinner "4.0.1"
+    jscodeshift "0.10.0"
+    react "0.0.0-experimental-4ead6b530"
+    recast "0.19.1"
+    ts-node "8.9.1"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"