@api-platform/client-generator/lib/generators/ReactGenerator.js

Generate apps built with Next, Nuxt, Quasar, React, React Native, Vue or Vuetify for any API documented using Hydra or OpenAPI

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import chalk from "chalk";
import handlebars from "handlebars";
import hbhComparison from "handlebars-helpers/lib/comparison.js";
import BaseGenerator from "./BaseGenerator.js";

var ReactGenerator = /*#__PURE__*/function (_BaseGenerator) {
  _inherits(ReactGenerator, _BaseGenerator);

  var _super = _createSuper(ReactGenerator);

  function ReactGenerator(params) {
    var _this;

    _classCallCheck(this, ReactGenerator);

    _this = _super.call(this, params);

    _this.registerTemplates("react/", [// utils
    "utils/dataAccess.ts", "utils/types.ts", // hooks
    "hooks/create.ts", "hooks/delete.ts", "hooks/fetch.ts", "hooks/index.ts", "hooks/list.ts", "hooks/mercure.ts", "hooks/retrieve.ts", "hooks/update.ts", "hooks/show.ts", // interfaces
    "interfaces/Collection.ts", "interfaces/foo.ts", // components
    "components/foo/Create.tsx", "components/foo/Form.tsx", "components/foo/index.ts", "components/foo/List.tsx", "components/foo/Update.tsx", "components/foo/type.ts", "components/foo/Show.tsx", "components/Field.tsx", "components/Links.tsx", "components/Pagination.tsx", // routes
    "routes/foo.tsx"]);

    handlebars.registerHelper("compare", hbhComparison.compare);
    return _this;
  }

  _createClass(ReactGenerator, [{
    key: "help",
    value: function help(resource) {
      var titleLc = resource.title.toLowerCase();
      console.log('Code for the "%s" resource type has been generated!', resource.title);
      console.log("Paste the following definitions in your application configuration (`client/src/index.tsx` by default):");
      console.log(chalk.green("\n// import routes\nimport ".concat(titleLc, "Routes from './routes/").concat(titleLc, "';\n\n// Add routes to <Routes>\n{ ").concat(titleLc, "Routes }\n")));
    }
  }, {
    key: "generate",
    value: function generate(api, resource, dir) {
      var _this2 = this;

      var lc = resource.title.toLowerCase();
      var ucf = this.ucFirst(resource.title);
      var fields = this.parseFields(resource);
      var context = {
        name: resource.name,
        lc: lc,
        uc: resource.title.toUpperCase(),
        ucf: ucf,
        fields: fields,
        formFields: this.buildFields(fields),
        hasRelations: fields.some(function (field) {
          return field.reference || field.embedded;
        }),
        hasManyRelations: fields.some(function (field) {
          return field.isReferences || field.isEmbeddeds;
        }),
        hydraPrefix: this.hydraPrefix,
        title: resource.title
      }; // Create directories
      // These directories may already exist

      ["".concat(dir, "/utils"), "".concat(dir, "/config"), "".concat(dir, "/interfaces"), "".concat(dir, "/routes"), "".concat(dir, "/components/").concat(lc), "".concat(dir, "/hooks")].forEach(function (dir) {
        return _this2.createDir(dir, false);
      });
      [// components
      "components/%s/Create.tsx", "components/%s/Form.tsx", "components/%s/index.ts", "components/%s/List.tsx", "components/%s/Update.tsx", "components/%s/type.ts", "components/%s/Show.tsx", // routes
      "routes/%s.tsx"].forEach(function (pattern) {
        return _this2.createFileFromPattern(pattern, dir, lc, context);
      }); // interface pattern should be camel cased

      this.createFile("interfaces/foo.ts", "".concat(dir, "/interfaces/").concat(context.ucf, ".ts"), context); // copy with regular name

      [// interfaces
      "interfaces/Collection.ts", // components
      "components/Field.tsx", "components/Links.tsx", "components/Pagination.tsx", // hooks
      "hooks/create.ts", "hooks/delete.ts", "hooks/fetch.ts", "hooks/index.ts", "hooks/list.ts", "hooks/mercure.ts", "hooks/retrieve.ts", "hooks/update.ts", "hooks/show.ts", // utils
      "utils/dataAccess.ts", "utils/types.ts"].forEach(function (file) {
        return _this2.createFile(file, "".concat(dir, "/").concat(file), context, false);
      }); // API config

      this.createEntrypoint(api.entrypoint, "".concat(dir, "/config/entrypoint.ts"));
    }
  }, {
    key: "getDescription",
    value: function getDescription(field) {
      return field.description ? field.description.replace(/"/g, "'") : "";
    }
  }, {
    key: "parseFields",
    value: function parseFields(resource) {
      var _this3 = this;

      var fields = [].concat(_toConsumableArray(resource.writableFields), _toConsumableArray(resource.readableFields)).reduce(function (list, field) {
        if (list[field.name]) {
          return list;
        }

        var isReferences = field.reference && field.maxCardinality !== 1;
        var isEmbeddeds = field.embedded && field.maxCardinality !== 1;
        return _objectSpread(_objectSpread({}, list), {}, _defineProperty({}, field.name, _objectSpread(_objectSpread({}, field), {}, {
          type: _this3.getType(field),
          description: _this3.getDescription(field),
          readonly: false,
          isReferences: isReferences,
          isEmbeddeds: isEmbeddeds,
          isRelations: isEmbeddeds || isReferences
        })));
      }, {});
      return Object.values(fields);
    }
  }, {
    key: "ucFirst",
    value: function ucFirst(target) {
      return target.charAt(0).toUpperCase() + target.slice(1);
    }
  }]);

  return ReactGenerator;
}(BaseGenerator);

export { ReactGenerator as default };