babel-plugin-wallace 0.0.2 → 0.0.6

package/lib/_config/loader.js

@@ -1,43 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const {directives} = require('./directives');
-
-
-const config = {
-  options: {
-    inlineDelimiters: ['{', '}']
-  },
-  aliases: {
-    '': 'watch'
-  },
-  directives: directives
-}
-
-// Use custom config file if there is one.
-const customConfigFile = path.join(process.cwd(), 'wallace.config.js')
-
-
-if (fs.existsSync(customConfigFile)) {
-
-  var customConfig = require(customConfigFile)
-  if (customConfig.directives) {
-    Object.assign(config.directives, customConfig.directives)
-  }
-  // TODO: check options are valid.
-  if (customConfig.options) {
-    Object.assign(config.options, customConfig.options)
-  }
-}
-
-for (const key of Object.keys(config.directives)) {
-  if (key.toLowerCase().startsWith("on") && key !== "on") {
-    throw new Error(`Directive "${key}" may not start with 'on' as this is reserved for event handlers.`)
-  }
-}
-
-// const directives = config.directives
-// for (const [key, value] of Object.entries(config.aliases)) {
-//   directives[':' + key] = directives[':' + value]
-// }
-
-module.exports = {config}

package/lib/_config/parse_directives.js

@@ -1,63 +0,0 @@
-/**
- * This module deals with parsing the directives in the config file,
- * and helping them parse arguments.
- */
-
-const {isFunc, isUnd, splitTrim} = require('../utils/misc')
-
-/**
- * Used internally to 
- * 
- * @param {string} directiveName 
- * @param {*} directive 
- * @param {*} attVal 
- */
-const processDirective = (nodeData, directiveName, directive, attVal) => {
-  if (!isFunc(directive.handle)) {
-    throw new Error('handle must be a function')
-  }
-  let args = attVal
-  if (directive.hasOwnProperty('params')) {
-    let params = splitTrim(directive.params, ',')
-    args = parseDirectiveArguments(params, attVal)
-    directive.handle.apply(nodeData, args)
-  } else {
-    directive.handle.apply(nodeData, [args])
-  }
-}
-
-/**
- * Return array of args based on definitions
- *
- * @param {Array} params The parameters as strings
- * @param {String} attVal The raw attribute value.
- */
-const parseDirectiveArguments = (params, attVal) => {
-  const args = []
-  const chunks = splitTrim(attVal, '|')
-  for (let i=0, il=params.length; i<il; i++) {
-    let param = params[i]
-    let raw = chunks[i]
-    let value = parseArgValue(param, raw, i)
-    args.push(value)
-  }
-  return args
-}
-
-const parseArgValue = (param, raw, i) => {
-  if ((!param.endsWith('?')) && (isUnd(raw))) {
-    throw new Error(`Argument ${param} is required`)
-  }
-  return raw
-}
-
-const extractDocumentation = (name, directive) => {
-  return {
-    name: name,
-    params: directive.params
-  }
-}
-
-
-
-module.exports = {processDirective, extractDocumentation}

package/lib/config.js

@@ -1,263 +0,0 @@
-const {alwaysUpdate, componentRefVariable} = require('./definitions/constants')
-
-/**
- * Constructor for the single config instance.
- */
-function Config(directives) {
-  this.directives = {}
-  for (const [key, value] of Object.entries(directives)) {
-    this.directives[key] = applyDirectiveDefaults(value)
-  }
-}
-
-/**
- * This allows the user to configure the single config instance.
- */
-Config.prototype.configure = function(customConfig) {
-  if (customConfig.directives) {
-    // TODO: validate case, format etc...
-    Object.assign(this.directives, customConfig.directives)
-  }
-}
-
-// Move to types
-const callData = {
-  value: "str", // if type str
-  args: "str", // if type expr
-  qualifier: "str|undefined", // foo:qualifier
-}
-
-
-const schema = {
-  help: "str",
-  allow: "str|expr|null",
-  qualifier: "yes|no|optional",
-  handle: "function(nodeData, callData)",
-  args: "array", // only if type "expr"
-  argSets: "array", // in case it allows multiple args
-}
-
-const applyDirectiveDefaults = (directive) => {
-  const defaults = {
-    allow: "expr",
-    qualifier: "no",
-    handle: "function(nodeData, callData)"
-  }
-  Object.assign(defaults, directive)
-  return defaults
-}
-
-
-const directives = {
-  att: {
-    help: `
-    Sets an HTML attribute on the element:
-    
-    /h <div _att:hidden="x > 3"></div>
-    `,
-    allow: "expr",
-    qualifier: "yes",
-    handle: function(nodeData, attInfo) {
-      nodeData.addWatch(attInfo.args[0], attInfo.args[1], `@${attInfo.qualifier}`)
-    }
-
-  },
-  call: {
-    help: `
-    Watch a value and call a wrapper method if it changes.
-    
-    /h <div _call:method={watch, tranform}></div>
-    
-    Variables for watch: c, p
-    Variables for callback: c, p, n, o, w
-    `,
-    allow: "expr",
-    qualifier: "yes",
-    handle: function(nodeData, attInfo) {
-      nodeData.addWatch(attInfo.args[0], attInfo.args[1], attInfo.qualifier)
-    }
-  },
-  // checked: {
-  //   help: `
-  //   Sets the "checked" status of the element:
-    
-  //   /h <input _checked={c.active} type="checkbox"/>
-  //   `,
-  //   allow: "expr",
-  //   handle: function(nodeData, attInfo) {
-  //     nodeData.addWatch(attInfo.args[0], undefined, 'checked')
-  //   }
-  // },
-  // disabled: {
-  //   help: `
-  //     Sets the "disabled" status of the element:
-
-  //     /h <button _disabled={!c.active}>...</button>
-  //   `,
-  //   allowedTypes: "expr",
-  //   handle: function(nodeData, attInfo) {
-  //     nodeData.addWatch(attInfo.args[0], undefined, 'disabled')
-  //   }
-  // },
-  // class: {
-  //   help: `
-  //   Sets the "checked" status of the element:
-    
-  //   /h <input _checked={c.active} type="checkbox"/>
-  //   `,
-  //   allow: "expr",
-  //   handle: function(nodeData, attInfo) {
-  //     nodeData.addWatch(attInfo.args[0], undefined, 'className')
-  //   }
-  // },
-  el: {
-    help: `
-    Gives the wrapper for this element a name so it can be accessed later:
-    
-    /h <div el:user></div>
-    
-    /j c.el.user.text("Wallace")
-    `,
-    allow: "null",
-    qualifier: "yes",
-    handle: function(nodeData, attInfo) {
-      nodeData.saveAs = attInfo.qualifier
-    }
-  },
-  repeat: {
-    help: `
-    Repeats a nested component:
-    
-    /h  <div>
-    /h    <Child repeat={c.items|id} />
-    /h  </div>
-    
-    `,
-    allow: "expr",
-    handle: function(nodeData, attInfo) {
-      const parent = nodeData.parentNodeData
-      if (parent === undefined) {
-        // TODO: throw better error, and assert parent has no other children.
-        throw Error("For must be used under a parent.")
-      }
-      const componentDef = nodeData.nestedClass
-      const data = attInfo.args[0]
-      const key = attInfo.args[1]
-      parent.chainedCalls.push(`pool(${parent.buildPoolInit(componentDef, key)})`)
-      parent.addWatch(alwaysUpdate, data, 'items', componentRefVariable)
-      nodeData.isRepeat = true
-    }
-  },
-  hidden: {
-    help: `
-    Hides an element:
-    
-    /h <div hidden={x > 10}></div>
-    
-    Available args are: c, p
-    `,
-    allow: "expr",
-    handle: function(nodeData, attInfo) {
-      nodeData.shieldQuery = attInfo.args[0]
-    }
-  },
-  on: {
-    help: `
-    Creates an event handler:
-    
-    /h <div on:click={alert('hello')}></div>
-    
-    Available args are: w, e
-    `,
-    allow: "expr",
-    qualifier: "yes",
-    handle: function(nodeData, attInfo) {
-      nodeData.addEventListener(attInfo.qualifier, attInfo.args[0])
-    }
-  },
-
-  // TODO: change this because we may use a special wrapper?
-  pool: {
-    help: `
-    Specify a pool object for repeat items:
-    
-    /h <div pool={poolObject}></div>
-    
-    `,
-    allow: "expr",
-    handle: function(nodeData, attInfo) {
-      nodeData.chainedCalls.push(`pool(${attInfo.args[0]})`)
-    }
-  },
-  props: {
-    help: `
-    Specify props for a nested component:
-    
-    /h <NestedComponent props={{foo: 'bar'}} />
-    
-    `,
-    allow: "expr",
-    handle: function(nodeData, attInfo) {
-      nodeData.props = nodeData.expandProps(attInfo.args[0])
-    }
-  },
-  show: {
-    help: `
-    Shows an element:
-    
-    /h <div show={x > 10}></div>
-    
-    Variables are: c, p
-    `,
-    allow: "expr",
-    handle: function(nodeData, attInfo) {
-      nodeData.shieldQuery = attInfo.args[0]
-      nodeData.reverseShield = 1
-    }
-  },
-  style: {
-    help: `
-    Sets the style directive:
-    
-    /h <div style:color={p.color}></div>
-    
-    Variables are: c, p
-    `,
-    allow: "expr",
-    qualifier: "yes",
-    handle: function(nodeData, attInfo) {
-      nodeData.addWatch(attInfo.args[0], undefined, 'style', `'${attInfo.qualifier}'`)
-    }
-  },
-  watch: {
-    help: `
-    Watch a value and call
-    
-    /h <div watch={watch, callback}></div>
-    
-    Variables for watch: c, p
-    Variables for callback: c, p, n, o, w
-    `,
-    allow: "expr",
-    handle: function(nodeData, attInfo) {
-      nodeData.addWatch(...attInfo.args)
-    }
-  },
-  wrapper: {
-    help: `
-    Specify an alternative wrapper class:
-    
-    /h <div wrapper={MyCustomWrapper}></div>
-    
-    Available args are: c, p
-    `,
-    allow: "expr",
-    handle: function(nodeData, attInfo) {
-      nodeData.customWrapperClass = attInfo.args[0]
-    }
-  },
-}
-
-const config = new Config(directives)
-
-module.exports = {config}

package/lib/convert.js

@@ -1,27 +0,0 @@
-const { parseJSX } = require('./jsx/parse.js')
-const { CodeGenerator } = require('./generate/code_generator')
-const {allVariableLetters} = require('./definitions/constants')
-
-const generatecomponentDefinitionArgs = (componentDefinition) => {
-
-  const {componentName, html, dynamicNodes} = componentDefinition
-  const generator = new CodeGenerator(componentName, html)
-  dynamicNodes.forEach(node => {
-    generator.processNodeWithDirectives(node)
-  })
-  return generator.buildStatements()
-}
-
-
-const convertJSX = (path, componentName) => {
-  const parsedData = parseJSX(path, componentName)
-  for (const letter of allVariableLetters) {
-    delete path.scope.globals[letter]
-  }
-  return generatecomponentDefinitionArgs(parsedData)
-}
-
-
-module.exports = {
-  convertJSX
-}

package/lib/definitions/constants.js

@@ -1,73 +0,0 @@
-const EOL = require('os').EOL
-const wallaceDefs = ['__html__', '__clone__', '__stubs__']
-
-/**
- * The character on which to split attributes and inlines
- */
-const splitter = '|'
-
-/**
- * The args string for watch callbacks.
- */
-const watchArgs = '(n, o)'
-
-/**
- * The parameters for various callback functions.
- * The letters mean:
- * 
- *  newValue
- *  oldValue
- *  wrapper
- *  props
- *  component
- *  event
- */
-const allVariableLetters = ['n', 'o', 'w', 'p', 'c', 'e']
-const watchCallbackArgsWithValue = 'n, o, w, p, c'
-const watchCallbackArgsWithoutValue = 'w, p, c'
-const lookupCallbackArgs = 'c, p'
-const propsCallbackArgs = 'c, p'
-const eventCallbackArgs = 'w, e'
-
-// The component itself still needs to see this as '*'
-const lookupAlwaysUpdate = "*"; 
-const alwaysUpdate = 'A'; 
-const neverUpdate = 'N';
-
-/**
- * The name of the arg representing the component in the buildComponent method.
- */
-const componentRefInBuild = 'component'
-const callableWatchArgs = `${componentRefInBuild}, props`
-const componentRefVariable = 'c'; // The variable name by which the component will be known.
-
-function FrameworkError (msg) {
-  this.msg = msg
-}
-
-function RequestsHelp (topic) {
-  this.topic = topic
-}
-
-FrameworkError.prototype = new Error();
-
-module.exports = {
-  allVariableLetters,
-  EOL,
-  callableWatchArgs,
-  componentRefVariable,
-  alwaysUpdate,
-  neverUpdate,
-  lookupAlwaysUpdate,
-  FrameworkError,
-  eventCallbackArgs,
-  wallaceDefs, 
-  splitter,
-  componentRefInBuild,
-  lookupCallbackArgs,
-  propsCallbackArgs,
-  RequestsHelp,
-  watchArgs,
-  watchCallbackArgsWithValue,
-  watchCallbackArgsWithoutValue
-}

package/lib/definitions/node_data.js

@@ -1,183 +0,0 @@
-const {eventCallbackArgs, componentRefInBuild} = require('./constants')
-const {replaceArgs} = require('../utils/misc')
-const {FrameworkError} = require('./constants')
-const {Watcher} = require('./watcher')
-
-/**
- * A NodeData object is created for every HTML node with directives.
- * Its data will be used to generate statements on the component.
- * It exposes methods which enable directives to set that data.
- * It also contains the directive syntax rules (expansion etc...) which we may
- * want to use in directives in config.
- */
-// ALternative names: DynamicNode, WrappedNode, SpecialNode
-class NodeData {
-  constructor(componentName, path, parentNodeData, nodeTreeAddress) {
-    this.componentName = componentName
-    this.path = path
-    this.parentNodeData = parentNodeData
-    this.nodeTreeAddress = nodeTreeAddress
-    this.processAsStub = false
-    this.stubName = undefined
-    this.nestedClass = undefined
-    this.isRepeat = false
-    this.saveAs = undefined
-    this.customWrapperClass = undefined
-    this.customWrapperArgs = undefined
-    this.props = undefined
-    this.shieldQuery = undefined
-    this.reverseShield = 0
-    this.replaceWith = undefined
-    this.chainedCalls = []
-    this.watches = []
-    this.beforeSave = []
-    this.afterSave = []
-    this.additionalLookups = {}
-    this.seq = 0
-  }
-  isDynamic() {
-    return (
-      this.watches.length > 0 || this.chainedCalls.length > 0 || this.beforeSave.length > 0 || this.afterSave.length > 0
-      || this.additionalLookups.length > 0 || this.props || this.shieldQuery || this.replaceWith || this.saveAs || 
-      this.customWrapperClass || this.customWrapperArgs 
-    )
-  }
-  /**
-   * Creates a watch on this node.
-   * 
-   * @param {string} watch - the field or function to watch.
-   * @param {string} [converter] - the value to pass to method, or free function call if no wrapperMethod supplied.
-   * @param {string} [wrapperMethod] - the method on the wrapper (may use "@attName" syntax).
-   * @param {string} [extraArg] - And extra argument to pass to the wrapperMethod
-   * @param {string} [lookup] - name of the lookup to use. 
-   */
-  addWatch(watch, converter, wrapperMethod, extraArg, lookup) {
-    this.watches.push(new Watcher(
-      this.expandValueSlot(watch), this.expandValueSlot(converter), wrapperMethod, extraArg, lookup
-    ))
-  }
-  /**
-   * Creates an event listener on this node.
-   * Slot will be expanded.
-   * 
-   * @param {string} event 
-   * @param {string} slot 
-   */
-  addEventListener(event, slot) {
-    const callback = this.buildEventListenerCallback(slot)
-    // TODO: don't create a wapper unless it is needed.
-    this.chainedCalls.push(`on('${event.toLowerCase()}', ${callback})`)
-  }
-  /**
-   * Builds the callback function for an event handler.
-   * Replaces c & p arguments with variables from the outer scope
-   * if present as these are not provided by the wrapper.
-   * 
-   * @param {string} slot 
-   */
-  buildEventListenerCallback(slot) {
-    // TODO: change this to detect which vars are used, and use constants.
-    const vars = "var c = component, p = component.props"
-    const body = [vars, slot].join(";")
-    return `function(${eventCallbackArgs}) {${body}}`
-  }
-  /**
-   * Adds an additional lookup, which is needed for certain situations like
-   * multiple inline directives in the same string.
-   * 
-   * @param {string} key - the lookup key
-   * @param {string} statement - the raw statement with value to return 
-   */
-  addLookup(key, statement){
-    this.additionalLookups[key] = statement
-  }
-  /**
-   * Builds the call to create a pool for child components.
-   * 
-   * @param {string} poolDef - the name of the component class to pool, or if it
-   * starts with @ then it is the path to a pool object (e.g. @..sharedPool ).
-   * @param {string} key - the field on the props to pool by.
-   */
-  buildPoolInit (poolDef, key){
-    let poolStatement
-    // if (poolDef.startsWith('@')) {
-    //   poolStatement = this.expandDots(poolDef.substr(1))
-    // } else {
-    // console.log(key)
-      if (key) {
-        const keyFn = `function(props) {return props.${key}}`
-        poolStatement = `component.pool(${poolDef}, ${keyFn})`
-      } else {
-        poolStatement = `component.pool(${poolDef})`
-      }
-    //}
-    return poolStatement
-  }
-  /**
-   * Expands a value slot.
-   * 
-   */
-  expandValueSlot(slot, inBuild=false) {
-    if (slot && (slot !== '')) {
-      // If it starts with () then we don't expand dots (treat as raw code).
-      if (slot.startsWith('(')) {
-        if (slot.endsWith(')')) {
-          return slot.substr(1, slot.length - 2)
-        } else {
-          throw 'Value slot starting with "(" must also end with ")"'
-        }
-      }
-      return this.expandDots(slot, inBuild)
-    }
-  }
-  /**
-   * Expands a value field's dots.
-   * Works differently if it is a callback in Build.
-   */
-  expandDots(field, inBuild=false) {
-    if (this.processAsStub) {
-      if (inBuild) {
-        if (field.startsWith('..')) {
-          return `${componentRefInBuild}.parent.props.` + field.substr(2)
-        } else if (field.startsWith('.')) {
-          return `${componentRefInBuild}.parent.` + field.substr(1)
-        }
-      } else {
-        if (field.startsWith('..')) {
-          return `c.parent.props.` + field.substr(2)
-        } else if (field.startsWith('.')) {
-          return `c.parent.` + field.substr(1)
-        }
-      }
-    } else {
-      if (inBuild) {
-        if (field.startsWith('..')) {
-          return `${componentRefInBuild}.props.` + field.substr(2)
-        } else if (field.startsWith('.')) {
-          return `${componentRefInBuild}.` + field.substr(1)
-        }
-      } else {
-        if (field.startsWith('..')) {
-          return `p.` + field.substr(2)
-        } else if (field.startsWith('.')) {
-          return `c.` + field.substr(1)
-        }
-      }
-    }
-    return field
-  }
-  /**
-   * Expands the props field.
-   * 
-   * @param {string} field 
-   */
-  expandProps(field) {
-    return this.expandDots(field)
-  }
-  getUniqueKey() {
-    this.seq ++
-    return '___zzz___' + this.seq
-  }
-}
-
-module.exports = {NodeData}

package/lib/definitions/watcher.js

@@ -1,26 +0,0 @@
-
-/**
- * Constructor for watcher object.
- * 
- * @param {string} watch - the field or wrapperMethod to watch.
- * @param {string} [converter] - the converter*
- * @param {string} [wrapperMethod] - the method on the wrapper* 
- * @param {string} [extraArg] - And extra argument to pass to the wrapperMethod
- * @param {string} [lookup] - name of the lookup to use. 
- * 
- * All arguments passed in must have dots expanded already.
- * 
- * - The converter will become a free function call if no wrapperMethod supplied.
- * - The wrapperMethod may use "@attName" syntax.
- * - Lookup and converter are mutually exclusive - only one must be supplied.
- * 
- */
-function Watcher(watch, converter, wrapperMethod, extraArg, lookup) {
-  this.watch = watch || ''
-  this.converter = converter
-  this.wrapperMethod = wrapperMethod
-  this.extraArg = extraArg
-  this.lookup = lookup
-}
-
-module.exports = {Watcher}