@teleporthq/teleport-plugin-common 0.27.2 → 0.27.3-alpha.2

package/src/utils/ast-utils.ts

@@ -1,7 +1,21 @@
 import * as types from '@babel/types'
+import { parse, traverse } from '@babel/core'
 import ParsedASTNode from './parsed-ast'
 import { StringUtils } from '@teleporthq/teleport-shared'
-import { UIDLStateDefinition, UIDLPropDefinition, UIDLRawValue } from '@teleporthq/teleport-types'
+import {
+  UIDLStateDefinition,
+  UIDLPropDefinition,
+  UIDLRawValue,
+  Resource,
+  ResourceValue,
+  ResourceUrlParams,
+  UIDLStaticValue,
+  UIDLDynamicReference,
+  ResourceUrlValues,
+  UIDLExpressionValue,
+} from '@teleporthq/teleport-types'
+import { JSXGenerationOptions, JSXGenerationParams } from '../node-handlers/node-to-jsx/types'
+import { createDynamicValueExpression } from '../node-handlers/node-to-jsx/utils'
 /**
  * Adds a class definition string to an existing string of classes
  */
@@ -80,6 +94,7 @@ const getClassAttribute = (
 
 /**
  * Makes `${name}={${prefix}.${value}}` happen in AST
+ * doesn't handle ctx or expr referenceType
  */
 export const addDynamicAttributeToJSXTag = (
   jsxASTNode: types.JSXElement,
@@ -98,6 +113,103 @@ export const addDynamicAttributeToJSXTag = (
   )
 }
 
+/**
+ * Makes `${name}={${ContextName}.${path}}` happen in AST
+ */
+export const addDynamicCtxAttributeToJSXTag = (params: {
+  jsxASTNode: types.JSXElement
+  name: string
+  attrValue: UIDLDynamicReference
+  options: JSXGenerationOptions
+  generationParams: JSXGenerationParams
+  t?: typeof types
+}) => {
+  const { jsxASTNode, name, t = types, attrValue, options, generationParams } = params
+
+  const content = createDynamicValueExpression(attrValue, options, t, generationParams)
+
+  jsxASTNode.openingElement.attributes.push(
+    t.jsxAttribute(t.jsxIdentifier(name), t.jsxExpressionContainer(content))
+  )
+}
+
+/**
+ * Make code expressions happen in AST
+ * Replace variables that are found in AST with
+ * the corresponding value from the contexts for now
+ * and in the future with other sources.
+ */
+export const addDynamicExpressionAttributeToJSXTag = (
+  jsxASTNode: types.JSXElement,
+  dynamicRef: UIDLDynamicReference,
+  params: JSXGenerationParams,
+  t = types
+) => {
+  const dynamicContent = dynamicRef.content
+  if (dynamicContent.referenceType !== 'expr') {
+    throw new Error(`This method only works with dynamic nodes that have code expressions`)
+  }
+
+  const code = dynamicContent.expression
+  const options = {
+    sourceType: 'module' as const,
+  }
+
+  const ast = parse(code, options)
+
+  replaceIdentifiersWithScopes(ast, dynamicContent.scope, (_, name) => {
+    const entityToResolve = dynamicContent.scope[name]
+    if (entityToResolve.type === 'dynamic') {
+      const { projectContexts } = params
+      const contextMeta = projectContexts[entityToResolve.content.ctxId]
+      const nameOfContext = StringUtils.camelize(contextMeta.providerName)
+
+      return nameOfContext
+    }
+    return name
+  })
+
+  if (!('program' in ast)) {
+    throw new Error(
+      `The AST does not have a program node in the expression inside addDynamicExpressionAttributeToJSXTag`
+    )
+  }
+
+  const theStatementOnlyWihtoutTheProgram = ast.program.body[0]
+
+  if (theStatementOnlyWihtoutTheProgram.type !== 'ExpressionStatement') {
+    throw new Error(`Expr dynamic attribute only support expressions statements at the moment.`)
+  }
+
+  jsxASTNode.openingElement.attributes.push(
+    t.jsxAttribute(
+      t.jsxIdentifier('href'),
+      t.jsxExpressionContainer(theStatementOnlyWihtoutTheProgram.expression)
+    )
+  )
+}
+
+type ReplacementCallback = (path: babel.NodePath<types.Identifier>, name: string) => string
+type ExpressionScopes = Record<string, UIDLStaticValue | UIDLDynamicReference>
+
+function replaceIdentifiersWithScopes(
+  node: babel.Node,
+  scopes: ExpressionScopes,
+  callback: ReplacementCallback
+) {
+  const visitor = {
+    Identifier(path: babel.NodePath<types.Identifier>) {
+      const { name } = path.node
+      if (scopes[name]) {
+        const newName = callback(path, name)
+        if (newName !== name) {
+          path.replaceWith(types.identifier(newName))
+        }
+      }
+    },
+  }
+  traverse(node, visitor)
+}
 /*
   Use, when we need to add a mix of dynamic and static values to
   the same attribute at the same time.
@@ -409,9 +521,14 @@ export const createPureComponent = (
   name: string,
   stateDefinitions: Record<string, UIDLStateDefinition>,
   jsxTagTree: types.JSXElement,
+  windowImports: Record<string, types.ExpressionStatement> = {},
   t = types
 ): types.VariableDeclaration => {
-  const arrowFunctionBody = createReturnExpressionSyntax(stateDefinitions, jsxTagTree)
+  const arrowFunctionBody = createReturnExpressionSyntax(
+    stateDefinitions,
+    jsxTagTree,
+    windowImports
+  )
   const arrowFunction = t.arrowFunctionExpression([t.identifier('props')], arrowFunctionBody)
 
   const declarator = t.variableDeclarator(t.identifier(name), arrowFunction)
@@ -423,6 +540,7 @@ export const createPureComponent = (
 export const createReturnExpressionSyntax = (
   stateDefinitions: Record<string, UIDLStateDefinition>,
   jsxTagTree: types.JSXElement,
+  windowImports: Record<string, types.ExpressionStatement> = {},
   t = types
 ) => {
   const returnStatement = t.returnStatement(jsxTagTree)
@@ -431,7 +549,7 @@ export const createReturnExpressionSyntax = (
     createStateHookAST(stateKey, stateDefinitions[stateKey])
   )
 
-  return t.blockStatement([...stateHooks, returnStatement] || [])
+  return t.blockStatement([...stateHooks, ...Object.values(windowImports), returnStatement] || [])
 }
 
 /**
@@ -450,13 +568,361 @@ export const createStateHookAST = (
   return t.variableDeclaration('const', [
     t.variableDeclarator(
       t.arrayPattern([
-        t.identifier(stateKey),
-        t.identifier(`set${StringUtils.capitalize(stateKey)}`),
+        t.identifier(StringUtils.createStateOrPropStoringValue(stateKey)),
+        t.identifier(StringUtils.createStateStoringFunction(stateKey)),
       ]),
       t.callExpression(t.identifier('useState'), [defaultValueArgument])
     ),
   ])
 }
 
+export const generateDynamicWindowImport = (
+  hookName = 'useEffect',
+  dependency: string
+): types.ExpressionStatement => {
+  return types.expressionStatement(
+    types.callExpression(types.identifier(hookName), [
+      types.arrowFunctionExpression(
+        [],
+        types.callExpression(types.identifier('import'), [types.stringLiteral(dependency)])
+      ),
+      types.arrayExpression([]),
+    ])
+  )
+}
+
 export const wrapObjectPropertiesWithExpression = (properties: types.ObjectProperty[]) =>
   types.objectExpression(properties)
+
+export const generateRemoteResourceASTs = (
+  resource: Resource,
+  propsPrefix: string = '',
+  extraUrlParamsGenerator?: () => types.ObjectProperty[]
+) => {
+  const fetchUrl = computeFetchUrl(resource)
+  const authHeaderAST = computeAuthorizationHeaderAST(resource)
+
+  const queryParams = generateURLParamsAST(
+    resource.urlParams as ResourceUrlParams,
+    propsPrefix,
+    extraUrlParamsGenerator
+  )
+
+  const fetchUrlQuasis = fetchUrl.quasis
+  const queryParamsQuasis = queryParams.quasis
+
+  if (queryParams.expressions.length > 0) {
+    fetchUrlQuasis[fetchUrlQuasis.length - 1].value.raw =
+      fetchUrlQuasis[fetchUrlQuasis.length - 1].value.raw + '?'
+
+    fetchUrlQuasis[fetchUrlQuasis.length - 1].value.cooked =
+      fetchUrlQuasis[fetchUrlQuasis.length - 1].value.cooked + '?'
+
+    queryParamsQuasis.pop()
+  }
+
+  const url = queryParams
+    ? types.templateLiteral(
+        [...fetchUrlQuasis, ...queryParamsQuasis],
+        [...fetchUrl.expressions.concat(queryParams.expressions)]
+      )
+    : fetchUrl
+
+  const fetchAST = types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier('data'),
+      types.awaitExpression(
+        types.callExpression(types.identifier('fetch'), [
+          url,
+          types.objectExpression([
+            types.objectProperty(
+              types.identifier('headers'),
+              types.objectExpression([
+                types.objectProperty(
+                  types.identifier('"Content-Type"'),
+                  types.stringLiteral('application/json'),
+                  false,
+                  false
+                ),
+                authHeaderAST,
+              ])
+            ),
+          ]),
+        ])
+      )
+    ),
+  ])
+
+  const responseJSONAST = types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier('response'),
+      types.awaitExpression(
+        types.callExpression(
+          types.memberExpression(types.identifier('data'), types.identifier('json'), false),
+          []
+        )
+      )
+    ),
+  ])
+
+  return [fetchAST, responseJSONAST]
+}
+
+export const generateMemberExpressionASTFromBase = (
+  base: types.MemberExpression | types.Identifier,
+  path: string[]
+): types.MemberExpression => {
+  if (path.length === 1) {
+    return types.memberExpression(base, types.identifier(path[0]), false)
+  }
+
+  const pathClone = [...path]
+  pathClone.pop()
+
+  return types.memberExpression(
+    generateMemberExpressionASTFromBase(base, pathClone),
+    types.identifier(path[path.length - 1]),
+    false
+  )
+}
+
+export const generateMemberExpressionASTFromPath = (
+  path: string[]
+): types.MemberExpression | types.Identifier => {
+  const pathClone = [...path]
+  if (path.length === 1) {
+    return types.identifier(path[0])
+  }
+
+  pathClone.pop()
+
+  return types.memberExpression(
+    generateMemberExpressionASTFromPath(pathClone),
+    types.identifier(path[path.length - 1]),
+    false
+  )
+}
+
+const generateURLParamsAST = (
+  urlParams: ResourceUrlParams,
+  propsPrefix?: string,
+  extraUrlParamsGenerator?: () => types.ObjectProperty[]
+) => {
+  const queryString: Record<string, types.Expression> = {}
+  Object.keys(urlParams).forEach((key) => {
+    resolveDynamicValuesFromUrlParams(urlParams[key], queryString, key, propsPrefix)
+  })
+
+  const urlObject = types.objectExpression([
+    ...Object.keys(queryString).map((key) => {
+      return types.objectProperty(types.stringLiteral(`${key}`), queryString[key])
+    }),
+    ...(extraUrlParamsGenerator ? extraUrlParamsGenerator() : []),
+  ])
+
+  return types.templateLiteral(
+    [
+      types.templateElement({ raw: '', cooked: '' }, false),
+      types.templateElement({ raw: '', cooked: '' }, true),
+    ],
+    [types.newExpression(types.identifier('URLSearchParams'), [urlObject])]
+  )
+}
+
+const resolveDynamicValuesFromUrlParams = (
+  field: ResourceUrlValues,
+  query: Record<string, types.Expression>,
+  prefix: string = null,
+  propsPrefix: string = ''
+) => {
+  if (Array.isArray(field)) {
+    const arrayValues = field.map((value) => {
+      return resolveUrlParamsValue(value, propsPrefix)
+    })
+    query[prefix] = types.arrayExpression(arrayValues)
+    return
+  }
+
+  if (field.type === 'dynamic' || field.type === 'static' || field.type === 'expr') {
+    query[prefix] = resolveUrlParamsValue(field, propsPrefix)
+    return
+  }
+
+  Object.keys(field).forEach((key) => {
+    const value = field[key]
+    const newPrefix = prefix ? `${prefix}[${key}]` : key
+
+    if (typeof value === 'object') {
+      resolveDynamicValuesFromUrlParams(value, query, newPrefix, propsPrefix)
+      return
+    }
+
+    query[newPrefix] = resolveUrlParamsValue(value, propsPrefix)
+  })
+}
+
+const resolveUrlParamsValue = (
+  urlParams: UIDLStaticValue | UIDLDynamicReference | UIDLExpressionValue,
+  propsPrefix: string = ''
+) => {
+  if (urlParams.type === 'static') {
+    return types.stringLiteral(`${urlParams.content}`)
+  }
+
+  if (urlParams.type === 'expr') {
+    return types.identifier(urlParams.content)
+  }
+
+  if (urlParams.content.referenceType !== 'prop') {
+    throw new Error('Only prop references are supported for url params')
+  }
+
+  const paramPath = [...(propsPrefix ? [propsPrefix] : []), ...(urlParams.content.path || [])]
+  const templateLiteralElements = paramPath
+    .map((_, index) => {
+      if (index === paramPath.length - 1) {
+        return null
+      }
+
+      const isTail = index === paramPath.length - 2
+      return types.templateElement(
+        {
+          cooked: '',
+          raw: '',
+        },
+        isTail
+      )
+    })
+    .filter((el) => el)
+
+  return types.templateLiteral(templateLiteralElements, [
+    generateMemberExpressionASTFromPath(paramPath),
+  ])
+}
+
+const computeAuthorizationHeaderAST = (resource: Resource) => {
+  const authToken = resolveResourceValue(resource.authToken)
+  if (!authToken) {
+    return null
+  }
+
+  const authTokenType = resource.authToken?.type
+
+  return types.objectProperty(
+    types.identifier('Authorization'),
+    types.templateLiteral(
+      [
+        types.templateElement(
+          {
+            cooked: authTokenType === 'static' ? `Bearer ${authToken}` : 'Bearer ',
+            raw: authTokenType === 'static' ? `Bearer ${authToken}` : 'Bearer ',
+          },
+          false
+        ),
+        ...(authTokenType === 'static'
+          ? []
+          : [
+              types.templateElement(
+                {
+                  cooked: '',
+                  raw: '',
+                },
+                true
+              ),
+            ]),
+      ],
+      [...(authTokenType === 'static' ? [] : [types.identifier(authToken)])]
+    ),
+    false,
+    false
+  )
+}
+
+const computeFetchUrl = (resource: Resource) => {
+  const fetchBaseUrl = resolveResourceValue(resource.baseUrl)
+  const resourceRoute = resolveResourceValue(resource.route)
+
+  const baseUrlType = resource.baseUrl?.type
+  const routeType = resource.route?.type
+
+  if (baseUrlType === 'static' && routeType === 'static') {
+    const stringsToJoin = [fetchBaseUrl, resourceRoute].filter((item) => item).join('/')
+    return types.templateLiteral(
+      [types.templateElement({ cooked: `${stringsToJoin}`, raw: `${stringsToJoin}` }, true)],
+      []
+    )
+  }
+
+  if (!routeType) {
+    return baseUrlType === 'static'
+      ? types.templateLiteral(
+          [types.templateElement({ cooked: `${fetchBaseUrl}`, raw: `${fetchBaseUrl}` }, true)],
+          []
+        )
+      : types.templateLiteral(
+          [
+            types.templateElement(
+              {
+                cooked: '',
+                raw: '',
+              },
+              false
+            ),
+            types.templateElement(
+              {
+                cooked: '',
+                raw: '',
+              },
+              true
+            ),
+          ],
+          [types.identifier(fetchBaseUrl)]
+        )
+  }
+
+  return types.templateLiteral(
+    [
+      types.templateElement(
+        {
+          cooked: '',
+          raw: '',
+        },
+        false
+      ),
+      types.templateElement(
+        {
+          cooked: routeType === 'static' ? `/${resourceRoute}` : '/',
+          raw: routeType === 'static' ? `/${resourceRoute}` : '/',
+        },
+        false
+      ),
+      ...(routeType === 'static'
+        ? []
+        : [
+            types.templateElement(
+              {
+                cooked: '',
+                raw: '',
+              },
+              false
+            ),
+          ]),
+    ],
+    [
+      types.identifier(fetchBaseUrl),
+      ...(routeType === 'static' ? [] : [types.identifier(resourceRoute)]),
+    ]
+  )
+}
+
+const resolveResourceValue = (value: ResourceValue) => {
+  if (!value) {
+    return ''
+  }
+
+  if (value.type === 'static') {
+    return value.value
+  }
+
+  return `process.env.${value.value}` || value.fallback
+}