Add Mercure support in React and React Native generators + various improvements

.travis.yml

@@ -1,8 +1,8 @@
 language: node_js
 node_js:
+- '11'
 - '10'
 - '8'
-- '6'
 
 cache:
   directories:
@@ -13,6 +13,7 @@ script:
 - yarn test
 - yarn lint
 - yarn test-gen
+- yarn test-gen-cs
 - yarn test-gen-env
 - yarn check
 

package.json

@@ -51,6 +51,7 @@
     "build": "babel src -d lib --ignore '*.test.js'",
     "watch": "babel --watch src -d lib --ignore '*.test.js'",
     "test-gen": "rm -rf ./tmp && npm run build && ./lib/index.js  https://demo.api-platform.com ./tmp/react && ./lib/index.js https://demo.api-platform.com ./tmp/react-native -g react-native && ./lib/index.js https://demo.api-platform.com ./tmp/vue -g vue && ./lib/index.js https://demo.api-platform.com ./tmp/admin-on-rest -g admin-on-rest",
+    "test-gen-cs": "./node_modules/.bin/prettier --single-quote -l \"./tmp/react/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "test-gen-swagger": "rm -rf ./tmp && npm run build && ./lib/index.js  https://demo.api-platform.com/docs.json ./tmp/react -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/react-native -g react-native -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/vue -g vue -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/admin-on-rest -g admin-on-rest -f swagger",
     "test-gen-env": "rm -rf ./tmp && npm run build && API_PLATFORM_CLIENT_GENERATOR_ENTRYPOINT=https://demo.api-platform.com API_PLATFORM_CLIENT_GENERATOR_OUTPUT=./tmp ./lib/index.js"
   },

src/generators/AdminOnRestGenerator.js

@@ -64,6 +64,6 @@ export default class extends BaseGenerator {
 
     this.appendFile("resource-import.js", `${dir}/resource-import.js`, context);
 
-    this.createEntrypoint(api.entrypoint, `${dir}/config/_entrypoint.js`);
+    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.js`);
   }
 }

src/generators/AdminOnRestGenerator.test.js

@@ -34,11 +34,9 @@ test("Generate a Admin On Rest app", () => {
   });
   generator.generate(api, resource, tmpobj.name);
 
-  [
-    "/config/_entrypoint.js",
-    "/resources/abc.js",
-    "/resource-import.js"
-  ].forEach(file => expect(fs.existsSync(tmpobj.name + file)).toBe(true));
+  ["/config/entrypoint.js", "/resources/abc.js", "/resource-import.js"].forEach(
+    file => expect(fs.existsSync(tmpobj.name + file)).toBe(true)
+  );
 
   ["/components/abc.js", "/config/abc.js"].forEach(file => {
     expect(fs.existsSync(tmpobj.name + file)).toBe(true);

src/generators/BaseGenerator.js

@@ -10,7 +10,7 @@ export default class {
     this.hydraPrefix = hydraPrefix;
     this.templateDirectory = templateDirectory;
 
-    this.registerTemplates("", ["_entrypoint.js"]);
+    this.registerTemplates("", ["entrypoint.js"]);
   }
 
   registerTemplates(basePath, paths) {
@@ -52,7 +52,7 @@ export default class {
   }
 
   createEntrypoint(entrypoint, dest) {
-    this.createFile("_entrypoint.js", dest, { entrypoint }, false);
+    this.createFile("entrypoint.js", dest, { entrypoint }, false);
   }
 
   getHtmlInputTypeFromField(field) {
@@ -88,17 +88,11 @@ export default class {
     }
   }
 
-  buildFields(apiFields) {
-    let fields = [];
-    for (let apiField of apiFields) {
-      let field = this.getHtmlInputTypeFromField(apiField);
-      field.required = apiField.required;
-      field.name = apiField.name;
-      field.description = apiField.description.replace(/"/g, "'"); // fix for Form placeholder description
-
-      fields.push(field);
-    }
-
-    return fields;
+  buildFields(fields) {
+    return fields.map(field => ({
+      ...field,
+      ...this.getHtmlInputTypeFromField(field),
+      description: field.description.replace(/"/g, "'") // fix for Form placeholder description
+    }));
   }
 }

src/generators/ReactGenerator.js

@@ -5,7 +5,7 @@ export default class extends BaseGenerator {
   constructor(params) {
     super(params);
 
-    this.registerTemplates(`react-common/`, [
+    this.registerTemplates("react-common/", [
       // actions
       "actions/foo/create.js",
       "actions/foo/delete.js",
@@ -14,7 +14,7 @@ export default class extends BaseGenerator {
       "actions/foo/show.js",
 
       // utils
-      "utils/fetch.js",
+      "utils/dataAccess.js",
 
       // reducers
       "reducers/foo/create.js",
@@ -35,10 +35,7 @@ export default class extends BaseGenerator {
       "components/foo/Show.js",
 
       // routes
-      "routes/foo.js",
-
-      // utils
-      "utils/helpers.js"
+      "routes/foo.js"
     ]);
   }
 
@@ -61,7 +58,7 @@ import ${titleLc} from './reducers/${titleLc}/';
 import ${titleLc}Routes from './routes/${titleLc}';
 
 // Add the reducer
-combineReducers(${titleLc},{/* ... */}),
+combineReducers({ ${titleLc},/* ... */ }),
 
 // Add routes to <Switch>
 { ${titleLc}Routes }
@@ -87,19 +84,17 @@ combineReducers(${titleLc},{/* ... */}),
 
     // Create directories
     // These directories may already exist
-    for (let dir of [`${dir}/utils`, `${dir}/config`, `${dir}/routes`]) {
-      this.createDir(dir, false);
-    }
+    [`${dir}/utils`, `${dir}/config`, `${dir}/routes`].forEach(dir =>
+      this.createDir(dir, false)
+    );
 
-    for (let dir of [
+    [
       `${dir}/actions/${lc}`,
       `${dir}/components/${lc}`,
       `${dir}/reducers/${lc}`
-    ]) {
-      this.createDir(dir);
-    }
+    ].forEach(dir => this.createDir(dir));
 
-    for (let pattern of [
+    [
       // actions
       "actions/%s/create.js",
       "actions/%s/delete.js",
@@ -125,15 +120,16 @@ combineReducers(${titleLc},{/* ... */}),
 
       // routes
       "routes/%s.js"
-    ]) {
-      this.createFileFromPattern(pattern, dir, lc, context);
-    }
+    ].forEach(pattern => this.createFileFromPattern(pattern, dir, lc, context));
 
     // utils
-    for (let file of ["utils/helpers.js", "utils/fetch.js"]) {
-      this.createFile(file, `${dir}/${file}`, context, false);
-    }
+    this.createFile(
+      "utils/dataAccess.js",
+      `${dir}/utils/dataAccess.js`,
+      context,
+      false
+    );
 
-    this.createEntrypoint(api.entrypoint, `${dir}/config/_entrypoint.js`);
+    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.js`);
   }
 }

src/generators/ReactGenerator.test.js

@@ -35,9 +35,8 @@ test("Generate a React app", () => {
   generator.generate(api, resource, tmpobj.name);
 
   [
-    "/utils/fetch.js",
-    "/utils/helpers.js",
-    "/config/_entrypoint.js",
+    "/utils/dataAccess.js",
+    "/config/entrypoint.js",
 
     "/actions/abc/create.js",
     "/actions/abc/delete.js",

src/generators/ReactNativeGenerator.js

@@ -22,7 +22,7 @@ export default class extends BaseGenerator {
       "actions/foo/show.js",
 
       // utils
-      "utils/fetch.js",
+      "utils/dataAccess.js",
 
       // reducers
       "reducers/foo/create.js",
@@ -68,7 +68,7 @@ export default class extends BaseGenerator {
 import ${titleLc} from './reducers/${titleLc}/';
 
 // Add the reducer
-combineReducers(${titleLc},{/* ... */}),
+combineReducers({ ${titleLc}, /* ... */ }),
 `)
     );
   }
@@ -91,19 +91,17 @@ combineReducers(${titleLc},{/* ... */}),
 
     // Create directories
     // These directories may already exist
-    for (let dir of [`${dir}/utils`, `${dir}/config`, `${dir}/routes`]) {
-      this.createDir(dir, false);
-    }
+    [`${dir}/utils`, `${dir}/config`, `${dir}/routes`].forEach(dir =>
+      this.createDir(dir, false)
+    );
 
-    for (let dir of [
+    [
       `${dir}/actions/${lc}`,
       `${dir}/components/${lc}`,
       `${dir}/reducers/${lc}`
-    ]) {
-      this.createDir(dir);
-    }
+    ].forEach(dir => this.createDir(dir));
 
-    for (let pattern of [
+    [
       // actions
       "actions/%s/create.js",
       "actions/%s/delete.js",
@@ -129,19 +127,15 @@ combineReducers(${titleLc},{/* ... */}),
 
       // routes
       "routes/%s.js"
-    ]) {
-      this.createFileFromPattern(pattern, dir, lc, context);
-    }
+    ].forEach(pattern => this.createFileFromPattern(pattern, dir, lc, context));
 
-    for (let file of [
-      "utils/fetch.js",
+    [
+      "utils/dataAccess.js",
       "utils/helpers.js",
       "components/Spinner.js",
       "components/Confirm.js"
-    ]) {
-      this.createFile(file, `${dir}/${file}`);
-    }
+    ].forEach(file => this.createFile(file, `${dir}/${file}`));
 
-    this.createEntrypoint(api.entrypoint, `${dir}/config/_entrypoint.js`);
+    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.js`);
   }
 }

src/generators/ReactNativeGenerator.test.js

@@ -35,8 +35,8 @@ test("Generate a React app", () => {
   generator.generate(api, resource, tmpobj.name);
 
   [
-    "/utils/fetch.js",
-    "/config/_entrypoint.js",
+    "/utils/dataAccess.js",
+    "/config/entrypoint.js",
 
     "/actions/abc/create.js",
     "/actions/abc/delete.js",

src/generators/VueGenerator.js

@@ -177,7 +177,7 @@ export const store = new Vuex.Store({
       false
     );
 
-    this.createEntrypoint(api.entrypoint, `${dir}/config/_entrypoint.js`);
+    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.js`);
     this.createFile(
       "utils/fetch.js",
       `${dir}/utils/fetch.js`,

src/generators/VueGenerator.test.js

@@ -40,7 +40,7 @@ test("Generate a Vue app", () => {
   expect(fs.existsSync(tmpobj.name + "/components/foo/Show.vue")).toBe(true);
   expect(fs.existsSync(tmpobj.name + "/components/foo/Update.vue")).toBe(true);
 
-  expect(fs.existsSync(tmpobj.name + "/config/_entrypoint.js")).toBe(true);
+  expect(fs.existsSync(tmpobj.name + "/config/entrypoint.js")).toBe(true);
 
   expect(fs.existsSync(tmpobj.name + "/error/SubmissionError.js")).toBe(true);
 

templates/admin-on-rest/config/foo.js

@@ -1,7 +1,7 @@
 export const configList = {
   '@id': true,
 {{#each fields}}
-  {{{ name }}}: true,
+  {{{name}}}: true,
 {{/each}}
   buttons: {
     show: true,
@@ -15,7 +15,7 @@ export const configList = {
 export const configEdit = {
   '@id': true,
 {{#each fields}}
-  {{{ name }}}: true,
+  {{{name}}}: true,
 {{/each}}
   buttons: {
     show: true,
@@ -28,7 +28,7 @@ export const configEdit = {
 export const configCreate = {
   '@id': true,
 {{#each fields}}
-  {{{ name }}}: true,
+  {{{name}}}: true,
 {{/each}}
   buttons: {
     list: true,
@@ -38,7 +38,7 @@ export const configCreate = {
 export const configShow = {
   '@id': true,
 {{#each fields}}
-  {{{ name }}}: true,
+  {{{name}}}: true,
 {{/each}}
   buttons: {
     edit: true,

templates/entrypoint.js

@@ -0,0 +1 @@
+export const ENTRYPOINT = '{{{entrypoint}}}';

templates/react-common/actions/foo/create.js

@@ -1,29 +1,29 @@
 import { SubmissionError } from 'redux-form';
-import fetch from '../../utils/fetch';
+import { fetch } from '../../utils/dataAccess';
 
 export function error(error) {
-  return {type: '{{{ uc }}}_CREATE_ERROR', error};
+  return { type: '{{{uc}}}_CREATE_ERROR', error };
 }
 
 export function loading(loading) {
-  return {type: '{{{ uc }}}_CREATE_LOADING', loading};
+  return { type: '{{{uc}}}_CREATE_LOADING', loading };
 }
 
 export function success(created) {
-  return {type: '{{{ uc }}}_CREATE_SUCCESS', created};
+  return { type: '{{{uc}}}_CREATE_SUCCESS', created };
 }
 
 export function create(values) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(loading(true));
 
-    return fetch('/{{{ name }}}', {method: 'POST', body: JSON.stringify(values)})
+    return fetch('/{{{name}}}', { method: 'POST', body: JSON.stringify(values) })
       .then(response => {
         dispatch(loading(false));
 
         return response.json();
       })
-      .then(data => dispatch(success(data)))
+      .then(retrieved => dispatch(success(retrieved)))
       .catch(e => {
         dispatch(loading(false));
 
@@ -36,3 +36,10 @@ export function create(values) {
       });
   };
 }
+
+export function reset() {
+  return dispatch => {
+    dispatch(loading(false));
+    dispatch(error(null));
+  };
+}