import * as t from '@babel/types' ; import { NodePath } from '@babel/traverse' ; import { kebabCase } from 'lodash' ; import * as helpers from '../helpers' ; import { createAttributesTemplate } from './attributes' ; import stringPath from './stringPath' ; import { RenderNode , Options } from '../types' ; import { EXPRESSION_BLOCK , SKIP_ELEMENTS } from '../constants' ; export param { RenderNode } node param { NodePath } path param { ( Array < string | number > ) } dataPath param { Function } createTemplate returns export default function JSXElement ( node , path , dataPath , createTemplate , options ) { const { node : element , children } = node ; const attributes = element . openingElement . attributes ; let tag = ( element . openingElement . name as t . JSXIdentifier ) . name ; if ( ! helpers . isHostComponentElement ( element , path , options ) || SKIP_ELEMENTS . includes ( tag ) || helpers . hasSpreadAttribute ( element ) || helpers . hasChildrenAttribute ( element ) ) { return `<template is="TPL_DEFAULT" data="{{root: ${ stringPath ( dataPath ) }}}" />\n` ; } tag = kebabCase ( helpers . getHostComponentName ( element , path ) || tag ) ; const isExpressionBlock = tag === EXPRESSION_BLOCK ; let childrenTemplate = '' ; if ( helpers . isPlainTextLeaf ( element , path , options ) ) { childrenTemplate = `{{ ${ stringPath ( dataPath ) }.children[0].text }}\n` ; } else { childrenTemplate = children . filter ( child => ! helpers . isEmptyText ( child . node ) ) . map ( ( child , index ) => createTemplate ( child , path , isExpressionBlock ? dataPath : [ ... dataPath , 'children' , index ] , options ) ) . join ( '\n' ) ; } return `<${ tag } ${ createAttributesTemplate ( tag , stringPath ( dataPath ) , attributes ) }>${ childrenTemplate }</${ tag }>\n` ; }