feat(api): run Prettier after templates generation (#398)

algolia · Apr 11, 2019 · cd1f404 · cd1f404
1 parent 8d186a4
commit cd1f404
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 49 deletions.
diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap
@@ -2923,11 +2923,11 @@ search.addWidget(
     container: '#hits',
     templates: {
       item: \`
-        <article>
-          <h1>{{{_highlightResult.attribute1.value}}}</h1>
-          <p>{{{_highlightResult.attribute2.value}}}</p>
-        </article>
-      \`,
+<article>
+  <h1>{{{_highlightResult.attribute1.value}}}</h1>
+  <p>{{{_highlightResult.attribute2.value}}}</p>
+</article>
+\`,
     },
   })
 );
@@ -3222,10 +3222,7 @@ exports[`Templates InstantSearch.js File content: src/app.css 1`] = `
 exports[`Templates InstantSearch.js File content: src/app.js 1`] = `
 "/* global algoliasearch instantsearch */
 
-const searchClient = algoliasearch(
-  'appId',
-  'apiKey'
-);
+const searchClient = algoliasearch('appId', 'apiKey');
 
 const search = instantsearch({
   indexName: 'indexName',
@@ -3244,11 +3241,11 @@ search.addWidget(
     container: '#hits',
     templates: {
       item: \`
-        <article>
-          <h1>{{#helpers.highlight}}{ \\"attribute\\": \\"attribute1\\" }{{/helpers.highlight}}</h1>
-          <p>{{#helpers.highlight}}{ \\"attribute\\": \\"attribute2\\" }{{/helpers.highlight}}</p>
-        </article>
-      \`,
+<article>
+  <h1>{{#helpers.highlight}}{ \\"attribute\\": \\"attribute1\\" }{{/helpers.highlight}}</h1>
+  <p>{{#helpers.highlight}}{ \\"attribute\\": \\"attribute2\\" }{{/helpers.highlight}}</p>
+</article>
+\`,
     },
   })
 );
@@ -3517,7 +3514,7 @@ exports[`Templates JavaScript Client File content: src/app.css 1`] = `
   display: grid;
 }
 
-#searchBox input[type=\\"search\\"] {
+#searchBox input[type='search'] {
   width: 100%;
   padding: 12px;
   font: inherit;
@@ -3825,7 +3822,7 @@ exports[`Templates JavaScript Helper File content: src/app.css 1`] = `
   display: grid;
 }
 
-#searchBox input[type=\\"search\\"] {
+#searchBox input[type='search'] {
   width: 100%;
   padding: 12px;
   font: inherit;
@@ -4149,10 +4146,7 @@ import {
 import PropTypes from 'prop-types';
 import './App.css';
 
-const searchClient = algoliasearch(
-  'appId',
-  'apiKey'
-);
+const searchClient = algoliasearch('appId', 'apiKey');
 
 class App extends Component {
   render() {

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "metalsmith-ignore": "1.0.0",
     "metalsmith-in-place": "4.2.0",
     "metalsmith-rename": "1.0.0",
+    "prettier": "1.16.4",
     "semver": "6.0.0",
     "validate-npm-package-name": "3.0.0"
   },
@@ -64,7 +65,6 @@
     "eslint-plugin-prettier": "3.0.1",
     "jest": "24.7.1",
     "jest-image-snapshot": "2.8.1",
-    "prettier": "1.16.4",
     "release-it": "7.6.3",
     "walk-sync": "1.1.3"
   },

diff --git a/src/tasks/node/teardown.js b/src/tasks/node/teardown.js
@@ -1,18 +1,42 @@
 const path = require('path');
+const { execSync } = require('child_process');
 const chalk = require('chalk');
 const { isYarnAvailable } = require('../../utils');
 
 module.exports = function teardown(config) {
+  const hasYarn = isYarnAvailable();
+  const currentDirectory = process.cwd();
+  const cdPath =
+    path.join(currentDirectory, config.name) === config.path
+      ? config.name
+      : config.path;
+
+  try {
+    const command = hasYarn ? 'yarn' : 'npx';
+
+    // This runs the Prettier dependency from Create InstantSearch App (not the template itself)
+    // with the template's Prettier configuration.
+    // We use the "global" Prettier dependency because it is installed for sure at this step,
+    // while the template's Prettier dependency might not be installed if `config.installation`
+    // is `false`.
+    execSync(
+      `${command} prettier "${cdPath}/src/**/*.{json,html,css,js,vue,ts,tsx}" --write --config "${cdPath}/.prettierrc"`,
+      {
+        stdio: 'ignore',
+      }
+    );
+  } catch (error) {
+    // We swallow Prettier's errors because we're not totally in control of what might happen.
+    // Besides, prettifying the files in not necessary in the app generation lifecycle.
+    // Prettier might throw for these known reasons:
+    //  - there's no `.prettierrc` file in the template
+  }
+
   if (!config.silent) {
     try {
-      const hasYarn = isYarnAvailable();
-      const installCommand = hasYarn ? 'yarn' : 'npm install';
-      const startCommand = hasYarn ? 'yarn start' : 'npm start';
-      const currentDirectory = process.cwd();
-      const cdPath =
-        path.join(currentDirectory, config.name) === config.path
-          ? config.name
-          : config.path;
+      const command = hasYarn ? 'yarn' : 'npm';
+      const installCommand = `${command} install`;
+      const startCommand = `${command} start`;
 
       console.log();
       console.log(

diff --git a/src/templates/InstantSearch.js 2/src/app.js.hbs b/src/templates/InstantSearch.js 2/src/app.js.hbs
@@ -22,15 +22,15 @@ search.addWidget(
     {{#if attributesToDisplay}}
     templates: {
       item: `
-        <article>
-          <h1>\{{{_highlightResult.{{attributesToDisplay.[0]}}.value}}}</h1>
-          {{#each attributesToDisplay}}
-          {{#unless @first}}
-          <p>\{{{_highlightResult.{{this}}.value}}}</p>
-          {{/unless}}
-          {{/each}}
-        </article>
-      `,
+<article>
+  <h1>\{{{_highlightResult.{{attributesToDisplay.[0]}}.value}}}</h1>
+  {{#each attributesToDisplay}}
+  {{#unless @first}}
+  <p>\{{{_highlightResult.{{this}}.value}}}</p>
+  {{/unless}}
+  {{/each}}
+</article>
+`,
     },
     {{/if}}
   })

diff --git a/src/templates/InstantSearch.js/src/app.js.hbs b/src/templates/InstantSearch.js/src/app.js.hbs
@@ -25,15 +25,15 @@ search.addWidget(
     {{#if attributesToDisplay}}
     templates: {
       item: `
-        <article>
-          <h1>\{{#helpers.highlight}}{ "attribute": "{{attributesToDisplay.[0]}}" }\{{/helpers.highlight}}</h1>
-          {{#each attributesToDisplay}}
-          {{#unless @first}}
-          <p>\{{#helpers.highlight}}{ "attribute": "{{this}}" }\{{/helpers.highlight}}</p>
-          {{/unless}}
-          {{/each}}
-        </article>
-      `,
+<article>
+  <h1>\{{#helpers.highlight}}{ "attribute": "{{attributesToDisplay.[0]}}" }\{{/helpers.highlight}}</h1>
+  {{#each attributesToDisplay}}
+  {{#unless @first}}
+  <p>\{{#helpers.highlight}}{ "attribute": "{{this}}" }\{{/helpers.highlight}}</p>
+  {{/unless}}
+  {{/each}}
+</article>
+`,
     },
     {{/if}}
   })

diff --git a/src/templates/JavaScript Client/src/app.css b/src/templates/JavaScript Client/src/app.css
@@ -42,7 +42,7 @@ em {
   display: grid;
 }
 
-#searchBox input[type="search"] {
+#searchBox input[type='search'] {
   width: 100%;
   padding: 12px;
   font: inherit;

diff --git a/src/templates/JavaScript Helper/src/app.css b/src/templates/JavaScript Helper/src/app.css
@@ -42,7 +42,7 @@ em {
   display: grid;
 }
 
-#searchBox input[type="search"] {
+#searchBox input[type='search'] {
   width: 100%;
   padding: 12px;
   font: inherit;

diff --git a/yarn.lock b/yarn.lock
@@ -5301,6 +5301,7 @@ prettier-linter-helpers@^1.0.0:
 prettier@1.16.4:
   version "1.16.4"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
+  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
 pretty-format@^24.7.0:
   version "24.7.0"