added: the javascript parser for the tag logic

Author: GianlucaGuarini

.eslintignore

@@ -1,4 +1,4 @@
 **/coverage/
 **/dist/
 **/test/expected/
-**/test/fixtures/
+**/test/fixtures/

src/generators/css/index.js

@@ -15,7 +15,6 @@ function wrapOutput(code) {
   return `${CSS_EXPORT_PREFIX}${minifyString(code)}${CSS_EXPORT_POSTFIX}`
 }
 
-
 /**
  * Generate the component css
  * @param   { Object } sourceNode - node generated by the riot compiler

src/generators/javascript/constants.js

@@ -1,2 +1,3 @@
 export const IMPORT_DECLARATION = 'ImportDeclaration'
+export const DEFAULT_EXPORT_DECLARATION = 'ExportDefaultDeclaration'
 export const JS_EXPORT = 'export default (function tag() {})();'

src/generators/javascript/index.js

@@ -1,16 +1,28 @@
-import {IMPORT_DECLARATION, JS_EXPORT} from './constants'
+import {DEFAULT_EXPORT_DECLARATION, IMPORT_DECLARATION, JS_EXPORT} from './constants'
+import compose from '../../utils/compose'
 import getPreprocessorTypeByAttribute from '../../utils/get-preprocessor-type-by-attribute'
 import mergeOutputChunks from '../../utils/merge-output-chunks'
 import preprocess from '../../utils/preprocess-node'
 import recast from 'recast'
 
+const builders = recast.types.builders
+
 /**
  * Find all the import statements
- * @param   { Array } ast - tree structure containing the program code
+ * @param   { Array } body - tree structure containing the program code
  * @returns { Array } array containing only the import statements
  */
-function findImports(ast) {
-  return ast.filter(node => node.type === IMPORT_DECLARATION)
+function findImports(body) {
+  return body.filter(node => node.type === IMPORT_DECLARATION)
+}
+
+/**
+ * Find all the code in an ast program except for the import statements
+ * @param   { Array } body - tree structure containing the program code
+ * @returns { Array } array containing all the program code except the import expressions
+ */
+function filterNonImport(body) {
+  return body.filter(node => node.type !== IMPORT_DECLARATION)
 }
 
 /**
@@ -22,6 +34,51 @@ function getProgramBody(ast) {
   return ast.program.body
 }
 
+/**
+ * Find the `export default` expression
+ * @param   { Array } body - program ast
+ * @returns { Object } the content of the default export statement
+ */
+function getDefaultExportDeclaration(body) {
+  return body.find(node => node.type === DEFAULT_EXPORT_DECLARATION)
+}
+
+/**
+ * Get the body of an expression call function (() => )()
+ * @param   { Object } node node to parse
+ * @returns { Array } expression body
+ */
+function getCallExpressionBody(node) {
+  return node.declaration.callee.body.body
+}
+
+/**
+ * Get the path to the body array where we will inject the tag logic code
+ * @param   { Object } ast - ast program
+ * @returns { Array } the empty array where we will inject our tag logic
+ */
+function getOutputInnerBodyScope(ast) {
+  return compose(
+    getCallExpressionBody,
+    getDefaultExportDeclaration,
+    getProgramBody
+  )(ast)
+}
+
+/**
+ * Remap the content of an ast converting the default export declaration into a return statement
+ * @param   { Array } body - tree structure containing the program code
+ * @returns { Array } the body remapped containing the return statement
+ */
+function transformExportDefaultIntoReturn(body) {
+  return body.map(node => {
+    if (node.type === DEFAULT_EXPORT_DECLARATION)
+      return builders.returnStatement(node.declaration)
+
+    return node
+  })
+}
+
 /**
  * Generate the component javascript logic
  * @param   { Object } sourceNode - node generated by the riot compiler
@@ -36,10 +93,18 @@ export default async function javascript(sourceNode, source, options, { code, ma
   const preprocessorOutput = await preprocess('js', preprocessorName, options, source, javascriptNode)
   const outputAST = recast.parse(JS_EXPORT)
   const sourceAST = recast.parse(preprocessorOutput.code)
+  const sourceAstBody = getProgramBody(sourceAST)
+  const outputInnerBody = getOutputInnerBodyScope(outputAST)
+
+  // insert the code into the scoped context filtering the import statements
+  // and convert the export default into "return" statement
+  outputInnerBody.push(
+    ...compose(transformExportDefaultIntoReturn, filterNonImport)(sourceAstBody)
+  )
 
   // move the imports to the top of the output
   outputAST.program.body = [
-    ...findImports(getProgramBody(sourceAST)),
+    ...findImports(sourceAstBody),
     ...getProgramBody(outputAST)
   ]
 

src/utils/compose.js

@@ -0,0 +1,3 @@
+/* eslint-disable */
+// source: https://30secondsofcode.org/function#compose
+export default (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)))

test/generators/javascript.spec.js

@@ -29,6 +29,7 @@ describe('Generators - javascript', () => {
 
     expect(code).to.be.a('string')
     expect(code).to.have.string('import moment')
+    expect(code).to.have.string('return')
     expect(code.length).to.be.ok
   })
 })