Merge pull request #262 from zapier/zapier-build-hook

feat(cli) Add custom build hook to zapier commands

docs/index.html

@@ -4531,13 +4531,14 @@ <h2 id="using-transpilers">Using Transpilers</h2>
 </div><div class="row">
   <div class="row-height">
     <div class="col-md-5 col-sm-12 col-height  docs-primary">
-      <p>We do not yet support transpilers out of the box, but if you would like to use <code>babel</code> or similar, we recommend creating a custom wrapper on <code>zapier push</code> like this in your <code>package.json</code>:</p>
+      <p>If you would like to use a transpiler like <code>babel</code>, you can add a script named <code>_zapier-build</code> to your <code>package.json</code>, which will be run during <code>zapier build</code>,
+<code>zapier push</code>, and <code>zapier upload</code>.  See the following example:</p>
     </div>
     <div class="col-md-7 col-sm-12 col-height  docs-code">
       <pre><code class="lang-json">{
   <span class="hljs-attr">&quot;scripts&quot;</span>: {
     <span class="hljs-attr">&quot;zapier-dev&quot;</span>: <span class="hljs-string">&quot;babel src --out-dir lib --watch&quot;</span>,
-    <span class="hljs-attr">&quot;zapier-push&quot;</span>: <span class="hljs-string">&quot;babel src --out-dir lib &amp;&amp; zapier push&quot;</span>
+    <span class="hljs-attr">&quot;_zapier-build&quot;</span>: <span class="hljs-string">&quot;babel src --out-dir lib&quot;</span>
   }
 }
 </code></pre>
@@ -4546,7 +4547,7 @@ <h2 id="using-transpilers">Using Transpilers</h2>
 </div><div class="row">
   <div class="row-height">
     <div class="col-md-5 col-sm-12 col-height  docs-primary">
-      <p>And then you can have your fancy ES7 code in <code>src/*</code> and a root <code>index.js</code> like this:</p>
+      <p>Then, you can have your fancy ES7 code in <code>src/*</code> and a root <code>index.js</code> like this:</p>
     </div>
     <div class="col-md-7 col-sm-12 col-height  docs-code">
       <pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./lib&apos;</span>);
@@ -4566,7 +4567,7 @@ <h2 id="using-transpilers">Using Transpilers</h2>
 zapier <span class="hljs-built_in">test</span>
 
 <span class="hljs-comment"># every build ensures a fresh build</span>
-npm run zapier-push
+zapier push
 </code></pre>
     </div>
   </div>

example-apps/babel/.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 node_js:
   - 8.10.0
-before_script: 'npm install -g zapier-platform-cli && npm run zapier-build'
+before_script: 'npm install -g zapier-platform-cli && zapier build'
 script: 'zapier test'
 notifications:
   email: false

example-apps/babel/README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.org/zapier/zapier-platform-example-app-babel.svg?branch=master)](https://travis-ci.org/zapier/zapier-platform-example-app-babel)
 
-A barebones app that has a resource defined. This is mainly a proof-of-concept for using features not yet available in node v6.x.
+A barebones app that has a resource defined. This is mainly a proof-of-concept for using features not yet available in node v12.x.
 
 Run this:
 
@@ -11,16 +11,6 @@ npm run zapier-dev # compiles live
 zapier test
 ```
 
-There's also a non- watch command:
-
-```bash
-npm run zapier-build
-```
-
-To push, instead of `zapier push`, we do:
-
-```bash
-npm run zapier-push # compiles first
-```
+`zapier build` works as a non-watch command that calls the `npm run _zapier-build` hook, and `zapier push` will make a fresh build using that hook as well.
 
 > We recommend using the zapier-platform-cli and `zapier init . --template=babel` to create an app.

example-apps/babel/package.json

@@ -10,10 +10,10 @@
   "scripts": {
     "zapier-build": "rm -rf lib && babel src --out-dir lib",
     "zapier-dev": "rm -rf lib && babel src --out-dir lib --watch",
-    "zapier-push": "npm run zapier-build && zapier push",
     "prepare": "npm run zapier-build",
     "pretest": "npm run zapier-build",
-    "test": "mocha --recursive lib/test --require babel-polyfill"
+    "test": "mocha --recursive lib/test --require babel-polyfill",
+    "_zapier-build": "npm run zapier-build"
   },
   "engines": {
     "node": ">=8.10.0",

example-apps/typescript/package.json

@@ -7,7 +7,8 @@
     "test": "npm run build && jest --testTimeout 10000 --rootDir ./lib/test",
     "build": "npm run clean && tsc",
     "clean": "rimraf ./lib ./build",
-    "watch": "npm run clean && tsc --watch"
+    "watch": "npm run clean && tsc --watch",
+    "_zapier-build": "npm run build"
   },
   "dependencies": {
     "zapier-platform-core": "10.0.1"

packages/cli/README-source.md

@@ -1546,18 +1546,19 @@ Now you should be able to run `docker-compose run pusher` and see the build and
 
 ## Using Transpilers
 
-We do not yet support transpilers out of the box, but if you would like to use `babel` or similar, we recommend creating a custom wrapper on `zapier push` like this in your `package.json`:
+If you would like to use a transpiler like `babel`, you can add a script named `_zapier-build` to your `package.json`, which will be run during `zapier build`,
+`zapier push`, and `zapier upload`.  See the following example:
 
 ```json
 {
   "scripts": {
     "zapier-dev": "babel src --out-dir lib --watch",
-    "zapier-push": "babel src --out-dir lib && zapier push"
+    "_zapier-build": "babel src --out-dir lib"
   }
 }
 ```
 
-And then you can have your fancy ES7 code in `src/*` and a root `index.js` like this:
+Then, you can have your fancy ES7 code in `src/*` and a root `index.js` like this:
 
 ```js
 module.exports = require('./lib');
@@ -1573,7 +1574,7 @@ npm run zapier-dev
 zapier test
 
 # every build ensures a fresh build
-npm run zapier-push
+zapier push
 ```
 
 There are a lot of details left out - check out the full example app for a working setup.

packages/cli/README.md

@@ -2759,18 +2759,19 @@ Now you should be able to run `docker-compose run pusher` and see the build and
 
 ## Using Transpilers
 
-We do not yet support transpilers out of the box, but if you would like to use `babel` or similar, we recommend creating a custom wrapper on `zapier push` like this in your `package.json`:
+If you would like to use a transpiler like `babel`, you can add a script named `_zapier-build` to your `package.json`, which will be run during `zapier build`,
+`zapier push`, and `zapier upload`.  See the following example:
 
 ```json
 {
   "scripts": {
     "zapier-dev": "babel src --out-dir lib --watch",
-    "zapier-push": "babel src --out-dir lib && zapier push"
+    "_zapier-build": "babel src --out-dir lib"
   }
 }
 ```
 
-And then you can have your fancy ES7 code in `src/*` and a root `index.js` like this:
+Then, you can have your fancy ES7 code in `src/*` and a root `index.js` like this:
 
 ```js
 module.exports = require('./lib');
@@ -2786,7 +2787,7 @@ npm run zapier-dev
 zapier test
 
 # every build ensures a fresh build
-npm run zapier-push
+zapier push
 ```
 
 There are a lot of details left out - check out the full example app for a working setup.

packages/cli/docs/index.html

@@ -4531,13 +4531,14 @@ <h2 id="using-transpilers">Using Transpilers</h2>
 </div><div class="row">
   <div class="row-height">
     <div class="col-md-5 col-sm-12 col-height  docs-primary">
-      <p>We do not yet support transpilers out of the box, but if you would like to use <code>babel</code> or similar, we recommend creating a custom wrapper on <code>zapier push</code> like this in your <code>package.json</code>:</p>
+      <p>If you would like to use a transpiler like <code>babel</code>, you can add a script named <code>_zapier-build</code> to your <code>package.json</code>, which will be run during <code>zapier build</code>,
+<code>zapier push</code>, and <code>zapier upload</code>.  See the following example:</p>
     </div>
     <div class="col-md-7 col-sm-12 col-height  docs-code">
       <pre><code class="lang-json">{
   <span class="hljs-attr">&quot;scripts&quot;</span>: {
     <span class="hljs-attr">&quot;zapier-dev&quot;</span>: <span class="hljs-string">&quot;babel src --out-dir lib --watch&quot;</span>,
-    <span class="hljs-attr">&quot;zapier-push&quot;</span>: <span class="hljs-string">&quot;babel src --out-dir lib &amp;&amp; zapier push&quot;</span>
+    <span class="hljs-attr">&quot;_zapier-build&quot;</span>: <span class="hljs-string">&quot;babel src --out-dir lib&quot;</span>
   }
 }
 </code></pre>
@@ -4546,7 +4547,7 @@ <h2 id="using-transpilers">Using Transpilers</h2>
 </div><div class="row">
   <div class="row-height">
     <div class="col-md-5 col-sm-12 col-height  docs-primary">
-      <p>And then you can have your fancy ES7 code in <code>src/*</code> and a root <code>index.js</code> like this:</p>
+      <p>Then, you can have your fancy ES7 code in <code>src/*</code> and a root <code>index.js</code> like this:</p>
     </div>
     <div class="col-md-7 col-sm-12 col-height  docs-code">
       <pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./lib&apos;</span>);
@@ -4566,7 +4567,7 @@ <h2 id="using-transpilers">Using Transpilers</h2>
 zapier <span class="hljs-built_in">test</span>
 
 <span class="hljs-comment"># every build ensures a fresh build</span>
-npm run zapier-push
+zapier push
 </code></pre>
     </div>
   </div>

packages/cli/scripts/validate-app-templates.js

@@ -13,7 +13,6 @@ const appTemplates = require('../src/app-templates');
 const validateAppTemplate = (template, rootTmpDir) => {
   // const appDir = path.resolve(rootTmpDir, template);
   const zapierCmd = path.resolve(__dirname, '../src/bin/run');
-  const extraCmd = template === 'babel' ? ' && npm run zapier-build' : '';
 
   const logFile = path.resolve(__dirname, '..', `${template}.log`);
   const logStream = fse.createWriteStream(logFile);
@@ -25,8 +24,8 @@ const validateAppTemplate = (template, rootTmpDir) => {
     .ensureFile(logFile)
     .then(() => {
       return new Promise((resolve, reject) => {
-        const cmd = `${zapierCmd} init ${template} --template=${template} --debug && cd ${template} && npm install ${extraCmd} && ${zapierCmd} validate && export CLIENT_ID=1234 CLIENT_SECRET=asdf && ${zapierCmd} test --timeout=5000`;
-        const child = childProcess.exec(cmd, { cwd: rootTmpDir }, err => {
+        const cmd = `${zapierCmd} init ${template} --template=${template} --debug && cd ${template} && npm install && ${zapierCmd} validate && export CLIENT_ID=1234 CLIENT_SECRET=asdf && ${zapierCmd} test --timeout=5000`;
+        const child = childProcess.exec(cmd, { cwd: rootTmpDir }, (err) => {
           if (err) {
             console.log('error starting child process:', err);
             reject(err);
@@ -53,12 +52,12 @@ const rootTmpDir = tmp.tmpNameSync();
 fse.removeSync(rootTmpDir);
 fse.ensureDirSync(rootTmpDir);
 
-const tasks = _.map(appTemplates, template =>
+const tasks = _.map(appTemplates, (template) =>
   validateAppTemplate(template, rootTmpDir)
 );
 
-Promise.all(tasks).then(results => {
-  const failures = _.filter(results, result => result !== null);
+Promise.all(tasks).then((results) => {
+  const failures = _.filter(results, (result) => result !== null);
   if (failures.length) {
     console.error(
       'these app templates failed to validate:',

packages/cli/src/tests/utils/build.js

@@ -296,4 +296,13 @@ describe('build (runs slowly)', () => {
         should.not.exist(environmentFile);
       });
   });
+
+  it('should run the zapier-build script', async () => {
+    runCommand('npm', ['run', 'clean'], { cwd: tmpDir });
+
+    await build.maybeRunBuildScript({ cwd: tmpDir });
+
+    const buildExists = await fs.pathExists(path.join(tmpDir, 'lib'));
+    should.equal(buildExists, true);
+  });
 });

packages/cli/src/utils/build.js

@@ -290,6 +290,24 @@ const maybeNotifyAboutOutdated = () => {
   }
 };
 
+const maybeRunBuildScript = async (options = {}) => {
+  const ZAPIER_BUILD_KEY = '_zapier-build';
+
+  // Make sure we don't accidentally call the Zapier build hook inside itself
+  if (process.env.npm_lifecycle_event !== ZAPIER_BUILD_KEY) {
+    const pJson = require(path.resolve(
+      options.cwd || process.cwd(),
+      'package.json'
+    ));
+
+    if (_.get(pJson, 'scripts', ZAPIER_BUILD_KEY)) {
+      startSpinner(`Running ${ZAPIER_BUILD_KEY} script`);
+      await runCommand('npm', ['run', ZAPIER_BUILD_KEY], options);
+      endSpinner();
+    }
+  }
+};
+
 const _buildFunc = async ({
   skipNpmInstall = false,
   disableDependencyDetection = false,
@@ -306,6 +324,8 @@ const _buildFunc = async ({
 
   maybeNotifyAboutOutdated();
 
+  await maybeRunBuildScript();
+
   // make sure our directories are there
   await ensureDir(tmpDir);
   await ensureDir(constants.BUILD_DIR);
@@ -462,4 +482,5 @@ module.exports = {
   makeSourceZip,
   listFiles,
   requiredFiles,
+  maybeRunBuildScript,
 };