WIP

Author: GianlucaGuarini

Makefile

@@ -20,7 +20,7 @@ clean:
 
 test:
 	@ make build
-	@ $(ISTANBUL) cover $(MOCHA) -- test/runner.js
+	@ $(ISTANBUL) cover $(MOCHA) -- test/index.js
 
 lint:
 	@ $(ESLINT) src test

README.md

@@ -19,19 +19,28 @@ For example `my-tag.tag`:
     { message }
   </p>
 
-  <div if={ error }>
-    <p>{ error }</p>
-  </div>
+  {#if error}
+    <div>
+      <p>{ error }</p>
+    </div>
+  {#else}
+    no errors
+  {/if}
 
   <ul>
-    <li each={ item in items }>{ item.value }</li>
+    {#each item in items}
+      <li>{ item.value }</li>
+    {/each}
   </ul>
 </template>
 
 <script>
 export default {
+  error: 'this is an error',
+  message: 'nice message',
+  items: [{ value: 'one'}, { value: 'two'}]
   updateMessage(message) {
-    this.update({ message: 'goodbye', error: false })
+    this.update({ message, error: false })
   }
 }
 </script>
@@ -47,13 +56,11 @@ Will become:
 
 ```js
 riot.define('my-tag', {
-  store: {
-    message: 'click me',
-    error: 'i am an error',
-    items: [{ value: 'foo'}, { value: 'bar' }]
-  },
-  updateMessage() {
-    this.update({ message: 'goodbye', error: false })
+  error: 'this is an error',
+  message: 'nice message',
+  items: [{ value: 'one'}, { value: 'two'}],
+  updateMessage(message) {
+    this.update({ message, error: false })
   }
   get css() {
     return `
@@ -62,19 +69,21 @@ riot.define('my-tag', {
       }
     `
   },
-  render(h, store) {
+  render(h) {
     return h`
       <p onclick="${ this.updateMessage.bind(this, 'goodbye') }">
-        ${ store.message }
+        ${ this.message }
       </p>${
-        if (store.error) {
-          `<div>
-            <p>${ store.error }</p>
-          </div>`
-        }
+        this.error ? `
+          <div>
+            <p>${ this.error }</p>
+          </div>
+        ` : `no errors`
       }<ul>${
-          store.items.map((item) => {
-            return `<li>${ item.value }</li>`
+          Array.from(this.items).map((item) => {
+            return (`
+              <li>${ item.value }</li>
+            `)
           })
       }</ul>
     `;
@@ -97,6 +106,8 @@ Check for example [this demo](https://jsfiddle.net/gianlucaguarini/ed31q3qk/) to
 - The source code will be simplified a lot avoiding to maintain different forks for the browser/node versions
 - It will generate always sourcemaps
 - It will be simpler to validate the riot tags syntax due to a cleaner and unambigous structure
+- No need for `<virtual>` tags and other weird hacks
+- Allow the rendering of raw markup
 
 [travis-image]:  https://img.shields.io/travis/riot/compiler.svg?style=flat-square
 [travis-url]:    https://travis-ci.org/riot/compiler

package.json

@@ -24,13 +24,15 @@
     "compiler"
   ],
   "devDependencies": {
+    "chai": "^3.5.0",
     "coveralls": "^2.12.0",
     "eslint": "^3.17.1",
-    "esprima": "^3.1.3",
-    "expect.js": "^0.3.1",
     "istanbul": "^0.4.5",
     "mocha": "^3.2.0",
-    "rollup": "^0.41.5"
+    "rollup": "^0.41.5",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^2.0.0",
+    "shelljs": "^0.7.7"
   },
   "author": "Riot maintainers team + smart people from all over the world",
   "contributors": [

rollup.config.js

@@ -1,4 +1,14 @@
+import commonjs from 'rollup-plugin-commonjs'
+import nodeResolve from 'rollup-plugin-node-resolve'
+
 export default {
   moduleName: 'compiler',
-  banner: '/* Riot Compiler WIP, @license MIT */'
+  banner: '/* Riot Compiler WIP, @license MIT */',
+  plugins: [
+    nodeResolve(),
+    commonjs({
+      include: 'node_modules/**',
+      ignoreGlobal: true
+    })
+  ]
 }

src/index.js

@@ -9,10 +9,9 @@ import { parse } from './parser'
  * @returns { Object } output.code - the generated javascript code
  * @returns { Object } output.map  - source map
  */
-function compile(name, source, options) {
-  if (!name) throw `Please specify the name of the tag you want to compile`
-  const output = parse(source, options)
-  return output
+function compile(name, source, options = {}) {
+  if (!name) throw 'Please specify the name of the tag you want to compile'
+  return parse(name, source, options)
 }
 
 export default {

src/parser.js

@@ -1,7 +1,10 @@
 import { SourceMapGenerator } from 'source-map'
-import esprima from 'esprima'
+import { parse as parseTemplate } from './parsers/template'
+import { parse as parseJs } from './parsers/js'
+import { parse as parseCss } from './parsers/css'
+import { offset } from './util'
 
-// Riot tags fragments
+// Riot tags fragments regex
 const SCRIPT = /<script(\s+[^>]*)?>\n?([\S\s]*?)<\/script\s*>/gi
 const TEMPLATE = /<template(\s+[^>]*)?>\n?([\S\s]*?)<\/template\s*>/gi
 const STYLE = /<style(\s+[^>]*)?>\n?([\S\s]*?)<\/style\s*>/gi
@@ -21,8 +24,8 @@ function sourcemap(source, code, generated) {
  * @returns { String } output.type - the "type" attribute used on the current fragment
  * @returns { String } output.code - the code contained in this fragment
  */
-function getFragment(source, regExp) {
-  const match = regExp.exec(source)
+function fragment(source, regExp) {
+  const match = source ? regExp.exec(source) : null
   return match ? {
     // get the type="whathever" attribute
     type: match[1] ? TYPE_ATTR.exec(match[1])[2] : null,
@@ -31,30 +34,38 @@ function getFragment(source, regExp) {
 }
 
 /**
- * Generate the output code together with the sourcemap
- * @param   { String } source  - source code of the tag we will need to compile
- * @param   { Object } options - user options
- * @returns { Promise } output
- * @returns { String } output.code
- * @returns { String } output.map
- * @returns { String } output.fragments
+ * Generate the js output from the parsing result
+ * @param   { String } name - the component name
+ * @param   { String } head - additional javascript that could be added to the component
+ * @param   { String } template - the result of the template parsing
+ * @param   { String } exports - all the methods exported by the component
+ * @param   { String } css - component specific syles
+ * @returns { String } object that must be provided to the riot.define method
  */
-function generate(source, options) {
-  new Promise((resolve, reject) => {
-    const fragments = {
-      css: getFragment(STYLE),
-      js: getFragment(SCRIPT),
-      template: getFragment(TEMPLATE)
-    }
-
-    const map = sourcemap(options.src, source, options.dist)
-
-    resolve({
-      fragments,
-      code: '', // TODO: generate the output code
-      map
+export function generate(name, head, exports, template, css) {
+  return `
+    ${ head }
+    riot.define(${ name }, {
+      ${ exports ? `
+          ${ exports }
+        ` : ''
+      }
+      ${
+        css ? `
+        get css() {
+          return \`${ css }\`
+        }
+        ` : ''
+      }
+      ${
+        template ? `
+        render(h) {
+          return\`${ template }\`
+        }
+        ` : ''
+      }
     })
-  })
+  `
 }
 
 /**
@@ -66,12 +77,22 @@ function generate(source, options) {
  * @returns { String } output.fragments
  */
 export function parse(name, source, options) {
-  return generate(source, options)
-    .then(({code, map, fragments}) => {
-      return {
-        code: `riot.define(${ name }, ${ code })`,
-        fragments,
-        map
-      }
+  return new Promise((resolve, reject) => {
+    const fragments = {
+      css: fragment(source, STYLE),
+      js: fragment(source, SCRIPT),
+      template: fragment(source, TEMPLATE)
+    }
+
+    const map = options.src && options.dist ? sourcemap(options.src, source, options.dist) : ''
+    const js = parseJs(fragments.js, offset(source, '<script'))
+    const template = parseTemplate(fragments.template, offset(source, '<template'))
+    const css = parseCss(fragments.css, offset(source, '<style'))
+
+    resolve({
+      fragments,
+      code: generate(name, js.head, js.exports, template.code, css.code),
+      map
     })
+  })
 }

src/parsers/css.js

@@ -0,0 +1,3 @@
+export function parse(source, offset) {
+
+}

src/parsers/flow-expressions.js

@@ -0,0 +1,25 @@
+// match "item in items" or "item,i in items"
+export const EACH_EXPR = /((\w+)|(?:(\w+),(?:\s+)?(\w+))?)\s+in\s+([\w]+)/i
+
+export const each = {
+  start(str, value) {
+    const values = value.match(EACH_EXPR)
+    const item = values[2] || values[3]
+    const target = values[5]
+    const iterator = values[4]
+
+    return `${ target }.map(${ iterator ? `(${item}, ${iterator})` : `(${item})`} => { return (`
+  },
+  end() {
+    return '))}'
+  }
+}
+
+export const conditional = {
+  start(str, value) {
+
+  },
+  end(str, value) {
+
+  }
+}

src/parsers/js.js

@@ -0,0 +1,3 @@
+export function parse(source, offset) {
+
+}

src/parsers/template.js

@@ -0,0 +1,72 @@
+import { each, conditional } from './flow-expressions'
+/**
+ * HTML_TAGS matches opening and self-closing tags, not the content.
+ * Used by {@link module:compiler~_compileHTML|_compileHTML} after hidding
+ * the expressions.
+ *
+ * 2016-01-18: exclude `'\s'` from attr capture to avoid unnecessary call to
+ *  {@link module:compiler~parseAttribs|parseAttribs}
+ * @const {RegExp}
+ */
+export const HTML_TAGS = /<(-?[A-Za-z][-\w\xA0-\xFF]*)(?:\s+([^"'\/>]*(?:(?:"[^"]*"|'[^']*'|\/[^>])[^'"\/>]*)*)|\s*)(\/?)>/g
+/**
+ * HTML5 void elements that cannot be auto-closed.
+ * @const {RegExp}
+ * @see   {@link http://www.w3.org/TR/html-markup/syntax.html#syntax-elements}
+ * @see   {@link http://www.w3.org/TR/html5/syntax.html#void-elements}
+ */
+export const VOID_TAGS = /^(?:input|img|br|wbr|hr|area|base|col|embed|keygen|link|meta|param|source|track)$/
+// match all the "{" and "\{" and "${" to replace eventually with "${"
+export const TMPL_EXPR = /(({|[\\|$]{))(?!#)/
+// match all the {#whathever } expressions
+export const START_FLOW_EXPR = /{#(\w+(?:\sif)?)(?:\s)?(.+)?}/
+// match all the {/whathever } expressions
+export const END_FLOW_EXPR = /{\/(?:\s+)?(\w+)(?:\s+)?}/
+
+
+export function replaceFlow(expr, name, value, position) {
+  switch (name) {
+  case 'each':
+    return each[position](expr, value)
+  case 'if':
+    return conditional[position](expr, value)
+  default:
+    return expr
+  }
+}
+
+export function normalizeMarkup(name, attr, ends) {
+  // force all tag names to lowercase
+  name = name.toLowerCase()
+  // close self-closing tag, except if this is a html5 void tag
+  ends = ends && !VOID_TAGS.test(name) ? `></${name}` : ''
+  return `<${name}${ends}>`
+}
+
+
+export function parse(html, offset) {
+  const lines = html.split('\n')
+  const map = []
+
+  lines.map((line, row) => {
+    map.push({
+      original: { line: row + offset, column: 0 },
+      generated: { line: row + 1, column: 0 }
+    })
+
+    line
+      .replace(TMPL_EXPR, expr => expr.substring(0, 1) === '{' ? '${' : expr)
+      .replace(START_FLOW_EXPR, (_, expr, name, value) => {
+        lines[row -1] = lines[row -1].trim()
+        lines[row -1] += '${'
+        return replaceFlow(expr, name, value, 'start')
+      })
+      .replace(END_FLOW_EXPR, (_, expr, name, value) => {
+        lines[row +1] = lines[row -1].trim()
+        lines[row +1] = '}' + lines[row +1]
+        return replaceFlow(expr, name, value, 'end')
+      })
+      .replace(HTML_TAGS, (_, name, attr, ends) => normalizeMarkup(name, attr, ends))
+  })
+
+}

src/util.js

@@ -0,0 +1,9 @@
+/**
+ * Get the rows offset of a target string from a source text file
+ * @param   { String } source - source string to test
+ * @param   { String } target - string we want to detect
+ * @returns { Number } offset in rows of the target string
+ */
+export function offset(source, target) {
+  return source.substring(0, source.indexOf(target) ).split('\n').length
+}

test/expected/simple-template.js

@@ -0,0 +1,7 @@
+riot.define('simple-template', {
+  render(r) {
+    r`
+      <p>${ this.message }</p>
+    `
+  }
+})