feat: revamp next generator according to new dynamic routing

Author: Gregcop1

package.json

@@ -41,7 +41,6 @@
     "handlebars-helpers": "^0.10.0",
     "isomorphic-fetch": "^2.2.1",
     "mkdirp": "^0.5.1",
-    "recast": "^0.18.1",
     "sprintf-js": "^1.1.1"
   },
   "scripts": {

src/generators/BaseGenerator.js

@@ -121,7 +121,11 @@ export default class {
 
   getType(field) {
     if (field.reference) {
-      return field.reference.title;
+      if (field.maxCardinality !== 1) {
+        return "string[]";
+      }
+
+      return "string";
     }
 
     switch (field.range) {

src/generators/NextGenerator.js

@@ -1,7 +1,5 @@
 import chalk from "chalk";
-import fs from "fs";
 import BaseGenerator from "./BaseGenerator";
-import { parse, print, types } from "recast";
 
 export default class NextGenerator extends BaseGenerator {
   constructor(params) {
@@ -23,86 +21,22 @@ export default class NextGenerator extends BaseGenerator {
       "interfaces/foo.ts",
 
       // pages
-      "pages/foo.tsx",
-      "pages/foos.tsx",
+      "pages/foos/[id].tsx",
+      "pages/foos/index.tsx",
 
       // utils
       "utils/dataAccess.ts"
     ]);
   }
 
-  checkDependencies(dir, serverPath) {
-    const dependencies = this.getTargetDependencies(dir);
-
-    if (!dependencies.length) {
-      return;
-    }
-
-    if (!dependencies.includes("@zeit/next-typescript")) {
-      console.log(
-        chalk.yellow(
-          "It seems next-typescript is not installed but generator needs typescript to work efficiently."
-        )
-      );
-    }
-
-    if (!dependencies.includes("express")) {
-      console.log(
-        chalk.yellow(
-          "It seems express is not installed but generator needs a custom express server to work efficiently."
-        )
-      );
-    }
-
-    if (serverPath) {
-      if (!fs.existsSync(serverPath)) {
-        console.log(chalk.red("Express server file doesn't exists."));
-        return;
-      }
-
-      const { mode } = fs.statSync(serverPath);
-      if ("200" !== (mode & parseInt("200", 8)).toString(8)) {
-        console.log(chalk.red("Express server file is not writable."));
-      }
-    }
-  }
-
-  checkImports(directory, imports, extension = ".ts") {
-    imports.forEach(({ file }) => {
-      if (fs.existsSync(directory + file + extension)) {
-        return;
-      }
-
-      console.log(
-        chalk.yellow(
-          'An import for the file  "%s" has been generated but the file doesn\'t exists.'
-        ),
-        file
-      );
-    });
-  }
-
-  help(resource, dir) {
+  help(resource) {
     console.log(
       chalk.green('Code for the "%s" resource type has been generated!'),
       resource.title
     );
-
-    // missing import
-    const { imports } = this.parseFields(resource);
-    this.checkImports(`${dir}/interfaces/`, imports);
-
-    // server route configuration
-    if (!this.routeAddedtoServer) {
-      const lc = resource.title.toLowerCase();
-      console.log(
-        "Paste the following route to your server configuration file:"
-      );
-      console.log(chalk.green(this.getShowRoute(lc)));
-    }
   }
 
-  generate(api, resource, dir, serverPath) {
+  generate(api, resource, dir) {
     const lc = resource.title.toLowerCase();
     const ucf = this.ucFirst(resource.title);
     const { fields, imports } = this.parseFields(resource);
@@ -113,7 +47,7 @@ export default class NextGenerator extends BaseGenerator {
       uc: resource.title.toUpperCase(),
       ucf,
       fields,
-      formFields: this.buildFields(resource.writableFields),
+      formFields: this.buildFields(fields),
       imports,
       hydraPrefix: this.hydraPrefix,
       title: resource.title
@@ -132,15 +66,16 @@ export default class NextGenerator extends BaseGenerator {
 
     // copy with patterned name
     this.createDir(`${dir}/components/${context.lc}`);
+    this.createDir(`${dir}/pages/${context.lc}s`);
     [
       // components
       "components/%s/List.tsx",
       "components/%s/ListItem.tsx",
       "components/%s/Show.tsx",
 
       // pages
-      "pages/%s.tsx",
-      "pages/%ss.tsx"
+      "pages/%ss/[id].tsx",
+      "pages/%ss/index.tsx"
     ].forEach(pattern =>
       this.createFileFromPattern(pattern, dir, context.lc, context)
     );
@@ -169,48 +104,6 @@ export default class NextGenerator extends BaseGenerator {
 
     // API config
     this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.ts`);
-
-    if (serverPath) {
-      this.createExpressRoute(serverPath, lc, this.getShowRoute(lc));
-    }
-  }
-
-  getShowRoute(name) {
-    return `server.get('/${name}/:id', (req, res) => {
-  return app.render(req, res, '/${name}', { id: req.params.id })
-});`;
-  }
-
-  createExpressRoute(path, resourceName, toInsert) {
-    const content = fs.readFileSync(path, "utf-8");
-    const code = parse(content);
-    const { namedTypes } = types;
-
-    types.visit(code, {
-      visitExpressionStatement: function(path) {
-        const args = path.value.expression.arguments;
-        if (
-          2 === args.length &&
-          namedTypes.Literal.check(args[0]) &&
-          "*" === args[0].value &&
-          namedTypes.ArrowFunctionExpression.check(args[1])
-        ) {
-          // insert route before "*" route
-          path.parent.value.body.splice(path.name, 0, toInsert);
-
-          return false;
-        }
-
-        this.traverse(path);
-      }
-    });
-
-    fs.writeFileSync(path, print(code).code);
-    console.log(
-      chalk.green("'Show' route for %s has been added to your server"),
-      resourceName
-    );
-    this.routeAddedtoServer = true;
   }
 
   getDescription(field) {

src/generators/NextGenerator.test.js

@@ -14,37 +14,6 @@ afterEach(() => {
   jest.resetAllMocks();
 });
 
-describe("checkDependencies", () => {
-  let getDependenciesSpy;
-  let consoleSpy;
-
-  beforeEach(() => {
-    getDependenciesSpy = jest
-      .spyOn(generator, "getTargetDependencies")
-      .mockReturnValue(["express", "@zeit/next-typescript"]);
-    consoleSpy = jest.spyOn(console, "log").mockImplementation(() => null);
-  });
-
-  test("should not warn if dependencies are installed", () => {
-    generator.checkDependencies("");
-    expect(consoleSpy).not.toHaveBeenCalled();
-  });
-
-  test("should warn if express is not installed", () => {
-    getDependenciesSpy.mockReturnValue(["@zeit/next-typescript"]);
-    generator.checkDependencies("");
-    expect(consoleSpy).toHaveBeenCalledTimes(1);
-    expect(consoleSpy.mock.calls[0][0]).toContain("express");
-  });
-
-  test("should warn if typescript is not installed", () => {
-    getDependenciesSpy.mockReturnValue(["express"]);
-    generator.checkDependencies("");
-    expect(consoleSpy).toHaveBeenCalledTimes(1);
-    expect(consoleSpy.mock.calls[0][0]).toContain("typescript");
-  });
-});
-
 describe("generate", () => {
   test("Generate a Next app", () => {
     const tmpobj = tmp.dirSync({ unsafeCleanup: true });
@@ -80,8 +49,8 @@ describe("generate", () => {
       "/error/SubmissionError.ts",
       "/interfaces/Abc.ts",
       "/interfaces/Collection.ts",
-      "/pages/abc.tsx",
-      "/pages/abcs.tsx",
+      "/pages/abcs/[id].tsx",
+      "/pages/abcs/index.tsx",
       "/utils/dataAccess.ts"
     ].forEach(file => expect(fs.existsSync(tmpobj.name + file)).toBe(true));
 

src/generators/TypescriptInterfaceGenerator.test.js

@@ -50,12 +50,10 @@ test("Generate a typescript interface", () => {
 
   expect(fs.existsSync(tmpobj.name + "/interfaces/foo.ts")).toBe(true);
 
-  const res = `import { FooBar } from "./foobar";
-
-export interface Foo {
+  const res = `export interface Foo {
   '@id'?: string;
   foo: any;
-  foobar?: FooBar;
+  foobar?: string[];
   readonly bar: string;
   id?: string;
 }

templates/next/components/common/ReferenceLinks.tsx

@@ -1,14 +1,12 @@
-import { NextFunctionComponent } from 'next';
 import Link from 'next/link';
-import { Fragment } from 'react';
-import { btoa } from '../../utils/dataAccess';
+import { Fragment, FunctionComponent } from 'react';
 
 interface Props {
   items: string|string[];
   type: string;
   useIcon?: boolean
 }
-export const ReferenceLinks: NextFunctionComponent<Props> = ({items, type, useIcon = false}) => {
+export const ReferenceLinks: FunctionComponent<Props> = ({items, type, useIcon = false}) => {
   if (Array.isArray(items)) {
     return (
       <Fragment>
@@ -19,12 +17,8 @@ export const ReferenceLinks: NextFunctionComponent<Props> = ({items, type, useIc
     );
   }
 
-  // to avoid routes like "/book/books/d4s5s1-qd5sd5d-qsd5qsd4sd" we prefer enconding it
-  const id = btoa(items);
-  const resourceName = type.toLowerCase();
-
   return (
-    <Link href={`/${resourceName}?id=${id}`} as={`/${resourceName}/${id}`}><a>
+    <Link href={items}><a>
       {useIcon ? (
         <Fragment>
           <span className="fa fa-search" aria-hidden="true" />

templates/next/components/foo/List.tsx

@@ -1,12 +1,12 @@
-import { NextFunctionComponent } from 'next';
+import { FunctionComponent } from 'react';
 import { ListItem } from './ListItem';
 import { {{{ucf}}} } from '../../interfaces/{{{ucf}}}';
 
 interface Props {
   {{{name}}}: {{{ucf}}}[];
 }
 
-export const List: NextFunctionComponent<Props> = ({ {{{name}}} }) => (
+export const List: FunctionComponent<Props> = ({ {{{name}}} }) => (
   <div>
     <h1>{{{ucf}}} List</h1>
     <table className="table table-responsive table-striped table-hover">

templates/next/components/foo/ListItem.tsx

@@ -1,12 +1,12 @@
-import { NextFunctionComponent } from 'next';
+import { FunctionComponent } from 'react';
 import { {{{ucf}}} } from '../../interfaces/{{{ucf}}}';
 import { ReferenceLinks } from '../common/ReferenceLinks';
 
 interface Props {
   {{{lc}}}: {{{ucf}}}
 }
 
-export const ListItem: NextFunctionComponent<Props> = ({ {{{lc}}} }: Props) => (
+export const ListItem: FunctionComponent<Props> = ({ {{{lc}}} }: Props) => (
   <tr>
     <th scope="row"><ReferenceLinks items={ {{{lc}}}['@id'] } type="{{{lc}}}" /></th>
 {{#each fields}}

templates/next/components/foo/Show.tsx

@@ -1,4 +1,4 @@
-import { NextFunctionComponent } from 'next';
+import { FunctionComponent } from 'react';
 import Link from 'next/link';
 import { ReferenceLinks } from '../common/ReferenceLinks';
 import { {{{ucf}}} } from '../../interfaces/{{{ucf}}}';
@@ -7,7 +7,7 @@ interface Props {
   {{{lc}}}: {{{ucf}}};
 }
 
-export const Show: NextFunctionComponent<Props> = ({ {{{lc}}} }) => (
+export const Show: FunctionComponent<Props> = ({ {{{lc}}} }) => (
   <div>
     <h1>Show { {{{lc}}}['@id'] }</h1>
     <table className="table table-responsive table-striped table-hover">
@@ -18,10 +18,6 @@ export const Show: NextFunctionComponent<Props> = ({ {{{lc}}} }) => (
       </tr>
       </thead>
       <tbody>
-        <tr>
-          <th scope="row">title</th>
-          <td>{ {{{lc}}}.title }</td>
-        </tr>
 {{#each fields}}
         <tr>
           <th scope="row">{{name}}</th>

templates/next/interfaces/foo.ts

@@ -1,9 +1,3 @@
-{{#each imports}}
-import { {{type}} } from "{{file}}";
-{{/each}}
-{{#if imports.length}}
-
-{{/if}}
 export interface {{{ucf}}} {
   '@id'?: string;
   id?: string;