recipes: Add initial package json resource

packages/gatsby/src/recipes/cli.js

@@ -25,12 +25,13 @@ const parser = require(`./parser`)
 
 const PlanDescribe = ({ resourceName }) => {
   const { planForNextStep = [] } = usePlan()
+  log('step plan', planForNextStep)
   const plans = planForNextStep.filter(p => p.resourceName === resourceName)
 
   return (
     <Box>
       {plans.map((stepPlan, i) => (
-        <Text key={i}>{stepPlan.describe}</Text>
+        <Text key={i}>{stepPlan.describe || resourceName}</Text>
       ))}
     </Box>
   )
@@ -48,13 +49,13 @@ const components = {
   h5: props => <Text bold underline {...props} />,
   h6: props => <Text bold underline {...props} />,
   a: ({ href, children }) => {
-    log(`Link`, { href, children })
+    //log(`Link`, { href, children })
     return <Link url={href}>{children}</Link>
   },
   strong: props => <Text bold {...props} />,
   em: props => <Text italic {...props} />,
   p: props => {
-    log(`paragraph`, { props })
+    //log(`paragraph`, { props })
     return (
       <Box
         width="100%"
@@ -66,12 +67,21 @@ const components = {
     )
   },
   li: props => {
-    log(`li`, { props })
+    //log(`li`, { props })
     return <Text>* {props.children}</Text>
   },
   Config: () => null,
   GatsbyPlugin: () => <PlanDescribe resourceName="GatsbyPlugin" />,
-  NPMPackage: () => <PlanDescribe resourceName="NPMPackage" />,
+  NPMPackageJson: () => <PlanDescribe resourceName="NPMPackageJson" />,
+  NPMPackage: ({ name }) => {
+    // const { planForNextStep = [] } = usePlan()
+
+    return (
+      <Box>
+        <Text>{name}</Text>
+    </Box>
+    )
+  },
   File: () => <PlanDescribe resourceName="File" />,
   ShadowFile: () => <PlanDescribe resourceName="ShadowFile" />,
 }
@@ -139,8 +149,7 @@ module.exports = ({ recipe, projectRoot }) => {
 
   const {
     commands: allCommands,
-    stepsAsMdx: stepsAsMDX,
-    stepsAsMdxWithoutJsx: stepsAsMDXNoJSX,
+    stepsAsMdx: stepsAsMDX
   } = parser(recipeSrc)
 
   const Div = props => (

packages/gatsby/src/recipes/graphql.js

@@ -23,6 +23,7 @@ const gatsbyPluginResource = require(`./providers/gatsby/plugin`)
 const gatsbyShadowFileResource = require(`./providers/gatsby/shadow-file`)
 const npmPackageResource = require(`./providers/npm/package`)
 const npmPackageScriptResource = require(`./providers/npm/script`)
+const npmPackageJsonResource = require('./providers/npm/package-json')
 
 const SITE_ROOT = process.cwd()
 
@@ -48,6 +49,7 @@ const componentResourceMapping = {
   Config: configResource,
   NPMPackage: npmPackageResource,
   NPMScript: npmPackageScriptResource,
+  NPMPackageJson: npmPackageJsonResource,
 }
 
 let queue = new Queue(async (action, cb) => {
@@ -61,7 +63,7 @@ queue.on(`task_finish`, async () => {
     queue.pause()
   }
 
-  const nextId = queue._store._queue[0]
+  const nextId = queue._store._queue[1]
   const task = queue._store._tasks[nextId]
   const { plan, ...cmds } = task
 
@@ -74,7 +76,7 @@ queue.on(`task_finish`, async () => {
 
     if (resource && resource.config && resource.config.batch) {
       const cmdPlan = await resource.plan(context, val)
-      planForNextStep.push({ resourceName: key, cmdPlan })
+      planForNextStep.push({ resourceName: key, ...cmdPlan })
     } else {
       await asyncForEach(cmds[key], async cmd => {
         try {
@@ -88,6 +90,8 @@ queue.on(`task_finish`, async () => {
   })
 
   await Promise.all(commandPlans)
+  console.log('full operation', JSON.stringify(plan, null, 2))
+  console.log('step plan', JSON.stringify(planForNextStep, null, 2))
 
   emitOperation(`progress`, plan, planForNextStep)
 })
@@ -115,7 +119,6 @@ const applyStep = async ({ plan, ...step }) => {
   const commandsForStep = Object.keys(step).map(async key => {
     const resource = componentResourceMapping[key]
     if (resource && resource.config && resource.config.batch) {
-      console.log(`resource.create`, { context, step: step[key] })
       await resource.create(context, step[key])
 
       step[key].map((_, i) => {

packages/gatsby/src/recipes/prettier-git-hook.mdx

@@ -0,0 +1,59 @@
+# Prettier Git Hook
+
+Make sure all of your code is run through prettier when you commit it to git.
+We achieve this by configuring prettier to run on git hooks using husky and
+lint-staged.
+
+---
+
+Install packages.
+
+<NPMPackage name="husky" />
+<NPMPackage name="prettier" />
+<NPMPackage name="lint-staged" />
+
+---
+
+Implement git hooks for prettier.
+
+<NPMPackageJson
+  name="husky"
+  value={{
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }}
+/>
+<NPMPackageJson
+  name="lint-staged"
+  value={{
+    "*.{js,md,mdx,json}": [
+      "prettier --write"
+    ]
+  }}
+/>
+
+---
+
+Write prettier config files.
+
+<File
+  path=".prettierrc"
+  content={`{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none"
+}`}
+/>
+<File
+  path=".prettierignore"
+  content={`.cache
+public
+node_modules
+`}
+/>
+
+---
+
+Prettier, husky, and lint-staged are now installed! You can edit your `.prettierrc`
+if you'd like to change your prettier configuration.

packages/gatsby/src/recipes/providers/npm/fixtures/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "test"
+}

packages/gatsby/src/recipes/providers/npm/package-json.js

@@ -0,0 +1,48 @@
+const fs = require(`fs`)
+const path = require(`path`)
+const { promisify } = require(`util`)
+
+const readFile = promisify(fs.readFile)
+const writeFile = promisify(fs.writeFile)
+
+const readPackageJson = async root => {
+  const fullPath = path.join(root, `package.json`)
+  const contents = await readFile(fullPath, `utf8`)
+  const obj = JSON.parse(contents)
+  return obj
+}
+
+const writePackageJson = async (root, obj) => {
+  const fullPath = path.join(root, `package.json`)
+  const contents = JSON.stringify(obj, null, 2)
+  await writeFile(fullPath, contents)
+}
+
+const create = async ({ root }, { name, value }) => {
+  const pkg = await readPackageJson(root)
+  pkg[name] = value
+  await writePackageJson(root, pkg)
+}
+
+const read = async ({ root }, { name }) => {
+  const pkg = await readPackageJson(root)
+
+  return {
+    name,
+    value: pkg[name],
+  }
+}
+
+const destroy = async ({ root }, { name }) => {
+  const pkg = await readPackageJson(root)
+  delete pkg[name]
+  await writePackageJson(root, pkg)
+}
+
+module.exports.create = create
+module.exports.update = create
+module.exports.read = read
+module.exports.destroy = destroy
+module.exports.config = {
+  serial: true,
+}

packages/gatsby/src/recipes/providers/npm/package-json.test.js

@@ -0,0 +1,23 @@
+const path = require('path')
+const pkgJson = require(`./package-json`)
+
+const root = path.join(__dirname, 'fixtures')
+
+const name = "husky"
+const value = {
+  "hooks": {
+    "pre-commit": "lint-staged"
+  }
+}
+
+describe('package-json', () => {
+  test(`create a config object`, async () => {
+    await pkgJson.create({ root }, { name, value })
+
+    const result = await pkgJson.read({ root }, { name, value })
+
+    expect(result).toEqual({ name, value })
+
+    await pkgJson.destroy({ root }, { name, value })
+  })
+})