babel-plugin-wallace 0.0.1 → 0.0.2

package/lib/index.js

@@ -1,12 +1,46 @@
+require('./polyfills')
+const {config} = require('./config')
+const {jsxContextClasses} = require('./jsx/contexts')
+const {importChecker} = require('./import-checker')
 
-module.exports = () => {
+
+module.exports = ({ types: t }) => {
   return {
     visitor: {
+      Program: {
+        enter(path, state) {
+          config.configure(state.opts)
+        },
+        exit(path) {
+          importChecker.addMissingImports(path, t)
+        }
+      },
+      ImportDeclaration(path) {
+        // Maybe use this to identify files with Component import so it's not imported twice?
+        // importChecker.hasComponentImport(path.hub.file.opts.filename)
+      },
+      /**
+       * This node will be removed by handling code, which means:
+       *   - We only ever catch the root JSXElement here.
+       *   - We need to be mindful if we decide to add more visitors.
+       */ 
       JSXElement(path) {
-        var openingElement = path.node.openingElement;  
-        var tagName = openingElement.name.name;
-        console.log('JSXElement', path.node)
-        path.replaceWithSourceString("'I found JSX!")
+        const contextMatches = jsxContextClasses.map(cls => new cls(path)).filter(context => context.matches())
+        if (contextMatches.length  == 1) {
+          contextMatches[0].handle()
+        }
+        if (contextMatches.length === 0) {
+          throw path.buildCodeFrameError("Found JSX in a place Wallace doesn't know how to handle.")
+        }
+        if (contextMatches.length > 1) {
+          const contextNames = contextMatches.map(cls => cls.name)
+          throw path.buildCodeFrameError(
+            `JSX matches multiple contexts (${contextNames}). Please report this to wallace!`
+          )
+        }
+        // TODO: can I just use path.hub?
+        const program = path.findParent((path) => path.type == 'Program')
+        importChecker.requiresComponentImport(program.hub.file.opts.filename)
       }
     }
   }

package/lib/jsx/component_dom.js

@@ -0,0 +1,40 @@
+const {stripHtml, preprocessHTML} = require('../utils/dom')
+const {escapeSingleQuotes} = require('../utils/misc')
+
+/**
+ * Build the component's DOM as the JSX is parsed, tracking the address of the current
+ * node.
+ */ 
+class ComponentDOM {
+  constructor() {
+    // The address of the current node processed e.g. [1, 3, 0]
+    this._nodeTreeAddress = []
+    this._rootElement = undefined
+  }
+  attach (element) {
+    if (this._rootElement) {
+      const relativePath = this._nodeTreeAddress.slice(0, -1)
+      const parentNode = relativePath.reduce((acc, index) => acc.childNodes[index], this._rootElement)
+      parentNode.appendChild(element)
+    } else {
+      this._rootElement = element
+    }
+  }
+  getHtmlString() {
+    return escapeSingleQuotes(stripHtml(preprocessHTML(this._rootElement.outerHTML)))
+  }
+  getCurrentAddress () {
+    return this._nodeTreeAddress.slice()
+  }
+  push(i) {
+    if (i !== undefined) {
+      this._nodeTreeAddress.push(i)
+    }
+  }
+  pop() {
+    this._nodeTreeAddress.pop()
+  }
+}
+
+
+module.exports = {ComponentDOM}

package/lib/jsx/contexts.js

@@ -0,0 +1,121 @@
+/**
+ * Classes for processing JSX in allowed contexts. 
+ * Each context is handled by a different subclass.
+ * Each class is responsible for modifying the surrounding code.
+ */
+const { convertJSX } = require('../convert.js')
+const { insertStatementsAfter } = require('../utils/babel')
+
+
+class BaseJSXContextHandler {
+  constructor(path) {
+    this.path = path
+  }
+  matches() {
+    // TODO create internal wallace error.
+    throw new Error('Not implemented')
+  }
+  handle() {
+    throw new Error('Not implemented')
+  }
+}
+
+
+/**
+ * Handles JSX as direct assignment:
+ * 
+ *   const MyComponent = <div>...</div>
+ */ 
+class JSXInDirectAssignment extends BaseJSXContextHandler {
+  matches() {
+    return this.path.parent?.type === 'VariableDeclarator'
+  }
+  handle() {
+    const nodeToInsertAfter = this.path.parentPath.parentPath
+    const componentName = this.path.parentPath.node.id.name
+    const statements = convertJSX(this.path, componentName)
+    this.path.replaceWithSourceString(`Component.extend({})`)
+    insertStatementsAfter(nodeToInsertAfter, statements)
+  }
+}
+
+
+/**
+ * Handles JSXElement in call to Component.extend:
+ * 
+ *   const MyComponent = Component.extend(JSXElement)
+ *   const MyComponent = Component.extend({...}, JSXElement)
+ * 
+ */ 
+class JSXInComponentDefineCallArg extends BaseJSXContextHandler {
+  matches() {
+    const parent = this.path.parent
+    if (
+      parent?.type == 'CallExpression' &&
+      parent.callee?.type == 'MemberExpression' &&
+      parent.callee?.object?.name == 'Component' &&
+      parent.callee?.property?.name == 'extend'
+    ) {
+      return true
+    }
+    return false
+  }
+  handle() {
+    const JSXElementPath = this.path
+    const CallExpressionPath = JSXElementPath.parentPath
+    const VariableDeclaratorPath = CallExpressionPath.parentPath
+    const nodeToInsertAfter = VariableDeclaratorPath.parentPath
+    const componentName = VariableDeclaratorPath.node.id.name
+
+    // TODO: change to extend({}, internalOpts)
+    const statements = convertJSX(this.path, componentName)
+    if (CallExpressionPath.node.arguments.length == 1) {
+      JSXElementPath.replaceWithSourceString('{}')
+    } else {
+      JSXElementPath.remove()
+    }
+    insertStatementsAfter(nodeToInsertAfter, statements)
+  }
+}
+
+
+/**
+ * Handles JSX in a class definition:
+ * 
+ *   class Foo extends Component {
+ *     html = <div>...</div>
+ *   }
+ */ 
+class JSXInClassDefinition extends BaseJSXContextHandler {
+  matches() {
+    const parent = this.path.parent
+    return (
+      parent?.type == 'CallExpression' &&
+      parent.callee?.type == "Identifier" &&
+      parent.callee.name == "_defineProperty" &&
+      parent.arguments[1]?.value == "html"
+    )
+  }
+  handle() {
+    const JSXElementPath = this.path
+    const CallExpressionPath = JSXElementPath.parentPath
+    const ExpressionStatement = CallExpressionPath.parentPath
+    const BlockStatement = ExpressionStatement.parentPath
+    const FunctionDeclaration = BlockStatement.parentPath
+    const componentName = FunctionDeclaration.node.id.name
+    const nodeToInsertAfter = FunctionDeclaration.parentPath.parentPath.parentPath.parentPath.parentPath
+    // console.log(ExpressionStatement.node)
+    ExpressionStatement.remove()
+    const statements = convertJSX(this.path, componentName)
+    insertStatementsAfter(nodeToInsertAfter, statements)
+  }
+}
+
+
+module.exports = {
+  jsxContextClasses: [
+    JSXInDirectAssignment,
+    JSXInComponentDefineCallArg,
+    JSXInClassDefinition,
+  ]
+}

package/lib/jsx/extract.js

@@ -0,0 +1,214 @@
+const {JSDOM} = require( 'jsdom')
+const {readCode} = require('../utils/babel')
+const {config} = require('../config')
+const {NodeData} = require('../definitions/node_data')
+const {addInlineWatches} = require('../parse/inline_directives')
+
+const dom = new JSDOM('<!DOCTYPE html>')
+const doc = dom.window.document
+const splitter = "-----"
+const directives = config.directives
+const isCapitalized = word => word[0] === word[0].toUpperCase()
+const onlyHas = (arr, item) => arr.length === 0 || arr.length === 1 && arr[0] === item
+
+
+class BaseConverter {
+  constructor(componentName, path, astNode, parentNodeData, nodeTreeAddress) {
+    this.componentName = componentName
+    this.path = path
+    this.astNode = astNode
+    this.parentNodeData = parentNodeData
+    this.nodeTreeAddress = nodeTreeAddress
+    this.nodeData = new NodeData(componentName, path, parentNodeData, nodeTreeAddress)
+    this.element = undefined
+  }
+  readCode(astNode) {
+    return readCode(this.path, astNode)
+  }
+}
+
+
+class JSXTextConverter extends BaseConverter {
+  convert() {
+    // expressions in text become JSXExpressionContainers, so there is never dynamic 
+    // data inside JSText.
+    // Except that's currently not true due to how we squash. TODO: fix this.
+    const text = this.astNode.value
+    this.element = doc.createTextNode(text)
+    // console.log(text)
+    addInlineWatches(this.nodeData, text, 'text', true)
+  }
+}
+
+
+class JSXExpressionConverter extends BaseConverter {
+  convert() {
+    // This only treats expressions in innerText, not attribute values.
+    this.element = doc.createElement('text')
+    this.element.textContent = '.'
+    const code = this.readCode(this.astNode.expression)
+    addInlineWatches(this.nodeData, `{${code}}`, 'text', true)
+  }
+}
+
+
+class JSXElementConverter extends BaseConverter {
+  convert() {
+    const openingElement = this.astNode.openingElement
+    let tagName = this.getTagName()
+
+    // Can't put error against attribute. Maybe I need to visit?
+    this.nodeData.attributes = openingElement.attributes.map(attr => new AttributeInfo(this.path, attr))
+    this.nodeData.attributeNames = this.nodeData.attributes.map(attr => attr.name)
+    
+    this.element = doc.createElement(tagName)
+
+    if (isCapitalized(tagName) || tagName.includes(".")) {
+      this.nodeData.nestedClass = tagName
+    }
+
+    this.nodeData.attributes.forEach(attr => this.processAttribute(attr))
+
+    // TODO: check siblings and children here or in directive (or NodeData.assertXYZ()..)
+    if (this.nodeData.nestedClass) {
+      if (this.nodeData.isRepeat) {
+        this.element = null
+      } else {
+        this.element = doc.createElement("br")
+        this.nodeData.replaceWith = tagName
+      }
+    }
+  }
+  getTagName() {
+    // could be 'JSXMemberExpression' or 'JSXIdentifier', so just read as string.
+    return this.readCode(this.astNode.openingElement.name)
+  }
+  processAttribute = (attr) => {
+    const {argType, name, value} = attr
+    const nameLowerCase = name.toLowerCase()
+    const directive = directives.hasOwnProperty(nameLowerCase) && directives[nameLowerCase]
+    if (directive && ! attr.escaped) {
+      this.processDirective(directive, nameLowerCase, attr)
+    } else {
+      switch (argType) {
+        case "expr":
+          addInlineWatches(this.nodeData, value, `@${attr.fullName}`, false)
+          break
+        case "null":
+          // TODO: this shows as <div disabled=""></div> which works in Chrome etc...
+          // but its annoying for tests and compactness. Seems to be a JSDOM issue?
+          this.element.setAttribute(attr.fullName, "")
+          // this.element.setAttribute(name, null)
+          // this.element[name] = true
+          break
+        case "str":
+          this.element.setAttribute(attr.fullName, value)
+          break
+      }
+    }
+  }
+  processDirective = (directive, directiveName, attr) => {
+    const allowedArgTypes = directive.allow.split("|")
+    if (!allowedArgTypes.includes(attr.argType)) {
+      throw this.path.buildCodeFrameError(
+        `Directive [${directiveName}] does not allow argument type: "${attr.argType}"`
+      )
+    }
+    if (directive.qualifier === "no" && attr.qualifier) {
+      throw this.path.buildCodeFrameError(
+        `Directive [${directiveName}] does not allow a qualifier.`
+      )
+    }
+    if (directive.qualifier === "yes" && !attr.qualifier) {
+      throw this.path.buildCodeFrameError(
+        `Directive [${directiveName}] requires a qualifier.`
+      )
+    }
+    // TODO: parse args better.
+    directive.handle(this.nodeData, attr)
+  }
+}
+
+
+/**
+ * An attribute could look like:
+ * 
+ *   <div name>
+ *   <div name="value">
+ *   <div name={expr}>
+ *   <div namespace:name>
+ *   <div _name>
+ * 
+ */
+class AttributeInfo {
+  constructor(path, attr) {
+    this.path = path
+    this.astAttribute = attr
+    this.name = undefined
+    this.nestedClass = undefined
+    this.qualifier = undefined
+    this.escaped = false
+    this.argType = undefined
+    this.value = undefined
+    this.arg = undefined
+    this.args = undefined
+    this.processName()
+    this.processValue()
+  }
+  processName() {
+    const name = this.astAttribute.name
+    if (name.type === "JSXIdentifier") {
+      this.name = name.name
+    } else if (name.type === "JSXNamespacedName") {
+      this.name = name.namespace.name
+      this.qualifier = name.name.name
+    } else {
+      throw this.path.buildCodeFrameError(`Unknown attribute name type: ${name.type}`)
+    }
+    if (this.name.startsWith("_")) {
+      this.name = this.name.slice(1)
+      this.escaped = true
+    }
+    this.fullName = this.name + (this.qualifier ? `:${this.qualifier}` : "")
+  }
+  processValue() {
+    const value = this.astAttribute.value
+    if (value === null) {
+      this.arg = null
+      this.argType = "null"
+    }
+    else if (value.type === "StringLiteral") {
+      this.value = value.value
+      this.argType = "str"
+    }
+    else if (value.type === "JSXExpressionContainer") {
+      this.argType = "expr"
+      // Detecting BinaryExpression through AST is a PITA. Strings are much simpler.
+      const code = readCode(this.path, value.expression).replaceAll("||", splitter)
+      this.args = code.split("|").map(x => x.replaceAll(splitter, "||").trim())
+      this.arg = this.args[0]
+      this.value = `{${readCode(this.path, value.expression)}}`
+    }
+  }
+}
+
+
+const converterClasses = {
+  JSXText: JSXTextConverter,
+  JSXExpressionContainer: JSXExpressionConverter,
+  JSXElement: JSXElementConverter
+}
+
+
+const extractNodeData = (componentName, path, astNode, parentNodeData, nodeTreeAddress) => {
+  const cls = converterClasses[astNode.type]
+  if (!cls) {
+    throw this.path.buildCodeFrameError(`Unexpected node type: ${astNode.type}`)
+  }
+  const converter = new cls(componentName, path, astNode, parentNodeData, nodeTreeAddress)
+  converter.convert()
+  return {element: converter.element, nodeData: converter.nodeData}
+}
+
+
+module.exports = {extractNodeData}

package/lib/jsx/parse.js

@@ -0,0 +1,98 @@
+const { JSXText } = require('@babel/types')
+const {readCode} = require('../utils/babel')
+const {extractNodeData} = require('./extract')
+const {ComponentDOM} = require('./component_dom')
+
+
+/**
+ * This parses the JSX code to collect dynamicNodes and the html string.
+ */
+class JSXParser {
+  constructor(path, componentName) {
+    this._path = path
+    this._componentName = componentName
+    this._dom = new ComponentDOM()
+    this._nodes = []
+    this.dynamicNodes = []
+    this.html = undefined
+  }
+  parse() {
+    this._walkJSXTree(this._path.node, undefined)
+    // Determine this at the end rather than as we go, as directives may turn parent nodes dynamic.
+    this.dynamicNodes = this._nodes.filter(node => node.isDynamic())
+    this.html = this._dom.getHtmlString()
+  }
+  _walkJSXTree(astNode, i, parentNodeData) {
+    this._dom.push(i)
+    const {element, nodeData} = extractNodeData(
+      this._componentName, 
+      this._path,
+      astNode,
+      parentNodeData,
+      this._dom.getCurrentAddress()
+    )
+    if (element) {
+      this._dom.attach(element)
+    }
+    this._nodes.push(nodeData)
+    const childAstNodes = this._squashChildren(astNode)
+    childAstNodes.forEach((node, i) => this._walkJSXTree(node, i, nodeData))
+    this._dom.pop()
+  }
+  _squashChildren(astNode) {
+    if (astNode.type != 'JSXElement') {
+      return []
+    }
+    const children = []
+    const sequence = []
+
+    const flush = () => {
+      if (sequence.length === 1) {
+        const node = sequence[0]
+        if (node.type == 'JSXExpressionContainer') {
+          const text = readCode(this._path, node)
+          children.push(JSXText(text))
+        } else {
+          children.push(node)
+        }
+      } else {
+        children.push(...sequence)
+      }
+      sequence.length = 0
+    }
+
+    astNode.children.forEach(child => {
+      switch (child.type) {
+        case 'JSXText':
+          if (child.value.trim()?.length) {
+            sequence.push(child)
+          }
+          break
+        case 'JSXExpressionContainer':
+          sequence.push(child)
+          break
+        case 'JSXElement':
+          flush()
+          children.push(child)
+          break
+        default:
+          throw new Error('Unexpected node type: ' + child.type)
+      }
+    })
+    flush()
+    return children
+  }  
+}
+
+
+const parseJSX = (path, componentName) => {
+  const parser = new JSXParser(path, componentName)
+  parser.parse()
+  return {
+    componentName: componentName,
+    html: parser.html,
+    dynamicNodes: parser.dynamicNodes
+  }
+}
+
+module.exports = {parseJSX}

package/lib/parse/component_templates.js

@@ -0,0 +1,44 @@
+/**
+ * Feature temporarily disabled 
+ * 
+ * This relates to using HTML template files instead of HTML string.
+ */
+
+const fs = require("fs")
+const path = require('path')
+const {parseHTML, stripHtml} = require('../utils/dom')
+
+/**
+ * A pool of component templates by path. These are files, typically called components.html
+ * which contain the HTML for components.
+ */
+class ComponentTemplatePool {
+  constructor() {
+    this._filePools = {}
+  }
+  getHtml(filepath, className) {
+    const dir = path.dirname(filepath)
+    const templateFile = path.join(dir, 'components.html')
+    if (fs.existsSync(templateFile)) {
+      let pooldComponents = this._filePools[templateFile]
+      if (pooldComponents === undefined) {
+        pooldComponents = this.addToPool(templateFile)
+      }
+      return pooldComponents[className]
+    }
+  }
+  addToPool(templateFile) {
+    const contents = fs.readFileSync(templateFile, {encoding:'utf8', flag:'r'})
+    const dom = parseHTML(stripHtml(contents)) // Must strip!
+    const filePool = {}
+    const childNodes = Array.from(dom.childNodes)
+    childNodes.forEach(n => {
+      filePool[n.tagName] = n.childNodes[0].outerHTML
+    })
+    this._filePools[templateFile] = filePool
+    return filePool
+  }
+}
+
+const componentTemplates = new ComponentTemplatePool()
+module.exports = {componentTemplates}