completed code generation for next.js

Author: tsully

app/src/components/main/DirectChildComponent.tsx

@@ -94,6 +94,9 @@ function DirectChildComponent({
         return (
           <IndirectChild
             // combine styles of instance and referenced component. instance styles have higher priority
+            key={
+              'indChild' + child.childId.toString() + child.typeId.toString()
+            }
             style={combinedStyle}
             placeHolder=""
             linkId={null}
@@ -121,12 +124,22 @@ function DirectChildComponent({
                 style={combinedStyle}
                 placeHolder={HTMLDefaultPlacholder}
                 linkId={null}
+                key={
+                  'indChild' +
+                  child.childId.toString() +
+                  child.typeId.toString()
+                }
               />
             ) : (
               <IndirectChild
                 style={combinedStyle}
                 placeHolder={HTMLDefaultPlacholder}
                 linkId={null}
+                key={
+                  'indChild' +
+                  child.childId.toString() +
+                  child.typeId.toString()
+                }
               >
                 {renderIndirectChildren(child)}
               </IndirectChild>
@@ -136,16 +149,24 @@ function DirectChildComponent({
       } else if (child.type === 'Route Link') {
         return (
           <IndirectChild
+            key={
+              'indChild' + child.childId.toString() + child.typeId.toString()
+            }
             style={combinedStyle}
-            placeHolder={''}
+            placeHolder=""
             linkId={child.typeId}
           />
         );
       }
     });
   };
   return (
-    <div onClick={onClickHandler} style={combinedStyle} ref={drag}>
+    <div
+      onClick={onClickHandler}
+      key={'childComp' + childId}
+      style={combinedStyle}
+      ref={drag}
+    >
       {renderIndirectChildren(referencedComponent)}
     </div>
   );

app/src/components/main/IndirectChild.tsx

@@ -24,12 +24,14 @@ function IndirectChild({ style, children, placeHolder, linkId }) {
     combinedStyle = combineStyles(combinedStyle, { color: 'blue' });
   }
 
+  console.log('children are ', children);
+  console.log('place holder is ', placeHolder);
   return (
     <div style={combinedStyle}>
       {linkId ? (
         <div onClick={onClickHandlerRoute}>{linkName}</div>
       ) : (
-        { placeHolder }
+        placeHolder
       )}
       {children}
     </div>

app/src/helperFunctions/generateCode.ts

@@ -1,16 +1,27 @@
+
 import { Component, State, ChildElement } from '../interfaces/InterfacesNew';
 import HTMLTypes from '../context/HTMLTypes';
 
+
 // generate code based on the component heirarchy
-const generateUnformattedCode = (comps: Component[], componentId: number) => {
+const generateUnformattedCode = (
+  comps: Component[],
+  componentId: number,
+  rootComponents: number[],
+  projectType: string
+) => {
   const components = [...comps];
   // find the component that we're going to generate code for
   const currentComponent = components.find(elem => elem.id === componentId);
   // find the unique components that we need to import into this component file
   let imports: any = [];
+  let links: boolean = false;
+
+  const isRoot = rootComponents.includes(componentId);
 
-  // get metadata for each child
+  // get metadata for each child (e.g. the name/tag of the component/elemnt)
   const getEnrichedChildren = (currentComponent: Component | ChildElement) => {
+    console.log('enriching component ', currentComponent);
     const enrichedChildren = currentComponent.children.map((elem: any) => {
       const child = { ...elem };
       if (child.type === 'Component') {
@@ -28,14 +39,22 @@ const generateUnformattedCode = (comps: Component[], componentId: number) => {
           child.children = getEnrichedChildren(child);
         }
         return child;
+      } else if (child.type === 'Route Link') {
+        links = true;
+        child.name = components.find(
+          (comp: Component) => comp.id === child.typeId
+        ).name;
+        return child;
       }
     });
     return enrichedChildren;
   };
 
+  // write all code that will be under the "return" of the component
   const writeNestedElements = (enrichedChildren: any) => {
     return `${enrichedChildren
       .map((child: any) => {
+        console.log('the child is ', child);
         if (child.type === 'Component') {
           return `<${child.name}${formatStyles(child.style)} />`;
         } else if (child.type === 'HTML Element') {
@@ -79,6 +98,12 @@ const generateUnformattedCode = (comps: Component[], componentId: number) => {
             return `<${child.tag}${formatStyles(child.style)}></${child.tag}>`;
           }
         }
+        // route links are only a next.js feature. if the user creates a rotue link and then switches projects, generate code for a normal link instead
+        else if (child.type === 'Route Link') {
+          return projectType === 'Next.js'
+            ? `<Link href="/${child.name}"><a>${child.name}</a></Link>`
+            : `<a>${child.name}</a>`;
+        }
       })
       .join('\n')}`;
   };
@@ -96,19 +121,35 @@ const generateUnformattedCode = (comps: Component[], componentId: number) => {
   const enrichedChildren: any = getEnrichedChildren(currentComponent);
 
   console.log(enrichedChildren);
+  const next = true;
+
+  // import statements differ between root (pages) and regular components (components)
+  const importsMapped =
+    projectType === 'Next.js'
+      ? imports
+          .map((comp: string) => {
+            return isRoot
+              ? `import ${comp} from '../components/${comp}'`
+              : `import ${comp} from './${comp}'`;
+          })
+          .join('\n')
+      : imports
+          .map((comp: string) => {
+            return `import ${comp} from './${comp}.tsx'`;
+          })
+          .join('\n');
 
   const stateful = true;
   const classBased = false;
 
-  return `
+  // create final component code. component code differs between classic react and next.js
+  // classic react code
+  if (projectType !== 'Next.js') {
+    return `
     ${stateful && !classBased ? `import React, {useState} from 'react';` : ''}
     ${classBased ? `import React, {Component} from 'react';` : ''}
     ${!stateful && !classBased ? `import React from 'react';` : ''}
-    ${imports
-      .map((comp: string) => {
-        return `import ${comp} from './${comp}.tsx'`;
-      })
-      .join('\n')}
+    ${importsMapped}
 
       ${
         classBased
@@ -131,23 +172,48 @@ const generateUnformattedCode = (comps: Component[], componentId: number) => {
 
       ${classBased ? `render(): JSX.Element {` : ``}
 
+      return (
+        <div className="${currentComponent.name}" style={props.style}>
+        ${writeNestedElements(enrichedChildren)}
+        </div>
+        );
+      }
+      ${classBased ? `}` : ``}
+      export default ${currentComponent.name};
+    `;
+  }
+  // next.js component code
+  else {
+    return `
+    import React, { useState } from 'react';
+    ${importsMapped}
+    import Head from 'next/head'
+    ${links ? `import Link from 'next/link'` : ``}
 
+      const ${currentComponent.name} = (props) => {
+      
+        const  [value, setValue] = useState("INITIAL VALUE");
       
       return (
+        <>
+        <Head>
+        <title>${currentComponent.name}</title>
+        </Head>
         <div className="${currentComponent.name}" style={props.style}>
         ${writeNestedElements(enrichedChildren)}
         </div>
+        </>
         );
       }
-      ${classBased ? `}` : ``}
+      
       export default ${currentComponent.name};
     `;
+  }
 };
 
 // formats code with prettier linter
 const formatCode = (code: string) => {
   return window.api.formatCode(code);
-  // return code;
   // return format(code, {
   //   singleQuote: true,
   //   trailingComma: 'es5',
@@ -158,10 +224,21 @@ const formatCode = (code: string) => {
 };
 
 // generate code based on component heirarchy and then return the rendered code
-const generateCode = (components: Component[], componentId: number) => {
-  return '';
-  // const code = generateUnformattedCode(components, componentId);
-  // return formatCode(code);
+const generateCode = (
+  components: Component[],
+  componentId: number,
+  rootComponents: number[],
+  projectType: string
+) => {
+  console.log('generating next.js code');
+  // return ''
+  const code = generateUnformattedCode(
+    components,
+    componentId,
+    rootComponents,
+    projectType
+  );
+  return formatCode(code);
 };
 
 export default generateCode;