Merge pull request #3 from placetopay-org/feature/improve-api-referen…

…ce-page

feat: auto add openapi refs from recma

package.json

@@ -55,6 +55,7 @@
     "constructs": "10.1.156",
     "eslint": "8.26.0",
     "eslint-config-next": "13.0.2",
+    "esprima": "^4.0.1",
     "prettier": "^2.8.7",
     "prettier-plugin-tailwindcss": "^0.2.6",
     "sst": "^2.19.1"

src/mdx/recma.mjs

@@ -1,5 +1,8 @@
 import { mdxAnnotations } from 'mdx-annotations'
 import recmaNextjsStaticProps from 'recma-nextjs-static-props'
+import esprima from 'esprima';
+import SwaggerParser from '@apidevtools/swagger-parser'
+import path from 'path'
 
 function recmaRemoveNamedExports() {
   return (tree) => {
@@ -12,8 +15,50 @@ function recmaRemoveNamedExports() {
   }
 }
 
+function recmaAddOpenapiRefsToStaticProps() {
+  return async (tree) => {
+    const filePath = path.join(process.cwd(), 'public', 'api-ES.yaml')
+    const api = await SwaggerParser.dereference(filePath);
+    let apiRefs = null;
+
+    tree.body = tree.body.map((node) => {
+      if (node.type === "VariableDeclaration" && node.declarations[0].id.name === 'apiRefs') {
+        const refs = node.declarations[0].init.elements
+        const apiRefsWithOpenapi = refs.reduce((acc, apiRef) => {
+          const apiRefValue = apiRef.value
+          return { ...acc, [apiRefValue]: api.paths[apiRefValue] }
+        }, {})
+
+        const ast = esprima.parseModule(`(${JSON.stringify(apiRefsWithOpenapi)})`, {
+          range: false,
+          loc: false,
+        });
+        apiRefs = ast.body[0].expression;
+      }
+
+      if (node.type === 'ExportNamedDeclaration' && node.declaration.declarations[0].id.name === 'getStaticProps' && apiRefs !== null) {
+        node.declaration.declarations[0].init.body.properties[0].value.arguments[0].arguments[0].properties = [
+          ...node.declaration.declarations[0].init.body.properties[0].value.arguments[0].arguments[0].properties,
+          {
+            type: 'Property',
+            method: false,
+            shorthand: false,
+            computed: false,
+            kind: 'init',
+            key: { type: 'Identifier', name: 'refs' },
+            value: apiRefs,
+          }
+        ]
+      }
+
+      return node
+    })
+  }
+}
+
 export const recmaPlugins = [
   mdxAnnotations.recma,
   recmaRemoveNamedExports,
   recmaNextjsStaticProps,
+  recmaAddOpenapiRefsToStaticProps,
 ]

src/contents/payment.mdx → src/pages/checkout/api-reference/payment.mdx

@@ -1,6 +1,8 @@
 export const description =
   'En esta página, nos sumergiremos en los diferentes puntos finales de un pago que puede usar para administrar los pagos mediante programación.'
 
+export const apiRefs = ['/api/reverse','/api/transaction']
+
 # Pago
 
 Se identifica como pago, a una transacción realizada por el usuario dentro de una sesión de pago. {{ className: 'lead' }}
@@ -16,7 +18,7 @@ Se identifica como pago, a una transacción realizada por el usuario dentro de u
         <ApiReader
             path="/api/reverse"
             method="post"
-            api={props.api}
+            api={props.refs}
         />
     </Col>
     <Col sticky>
@@ -165,7 +167,7 @@ Se identifica como pago, a una transacción realizada por el usuario dentro de u
         <ApiReader
             path="/api/transaction"
             method="post"
-            api={props.api}
+            api={props.refs}
         />
     </Col>
     <Col sticky>

src/contents/session.mdx → src/pages/checkout/api-reference/session.mdx

@@ -1,6 +1,8 @@
 export const description =
   'En esta página, nos sumergiremos en los diferentes puntos finales de la sesión que puede usar para administrar las sesiones de pago mediante programación.'
 
+export const apiRefs = ['/api/session','/api/session/{requestId}']
+
 # Sesión
 
 Se identifica como sesión, a la experiencia visual con el que interactuan los usuarios para completar un pago. {{ className: 'lead' }}
@@ -16,7 +18,7 @@ Se identifica como sesión, a la experiencia visual con el que interactuan los u
     <ApiReader
       path="/api/session"
       method="post"
-      api={props.api}
+      api={props.refs}
     />
 
   </Col>
@@ -92,7 +94,7 @@ Se identifica como sesión, a la experiencia visual con el que interactuan los u
     <ApiReader
       path="/api/session/{requestId}"
       method="post"
-      api={props.api}
+      api={props.refs}
     />
 
   </Col>

src/contents/token.mdx → src/pages/checkout/api-reference/token.mdx

@@ -1,6 +1,8 @@
 export const description =
   'En esta página, nos sumergiremos en los diferentes puntos finales relacionado con tokens que puede usar para administrar cobros.'
 
+export const apiRefs = ['/api/collect','/api/instrument/invalidate']
+
 # Token
 
 Se identifica como token, a la llave generada por un proceso de suscripción permitiendo generar cobros sin interacción del usuario. {{ className: 'lead' }}
@@ -16,7 +18,7 @@ Se identifica como token, a la llave generada por un proceso de suscripción per
     <ApiReader
       path="/api/collect"
       method="post"
-      api={props.api}
+      api={props.refs}
     />
   </Col>
   <Col sticky>
@@ -346,7 +348,7 @@ Se identifica como token, a la llave generada por un proceso de suscripción per
     <ApiReader
       path="/api/instrument/invalidate"
       method="post"
-      api={props.api}
+      api={props.refs}
     />
   </Col>
   <Col sticky>