updated: use compiling meta instead of options

build/rollup.browser.config.js

@@ -34,7 +34,7 @@ export default {
     commonjs({
       include: 'node_modules/**',
       namedExports: {
-        [sourcemapPath]: ['SourceMapGenerator', 'SourceMapConsumer']
+        [sourcemapPath]: ['SourceMapGenerator', 'SourceMapConsumer', 'SourceNode']
       },
       ignoreGlobal: true
     })

src/generators/css/index.js

@@ -68,16 +68,17 @@ function scopedCSS(tag, css) {
  * Generate the component css
  * @param   { Object } sourceNode - node generated by the riot compiler
  * @param   { string } source - original component source code
- * @param   { Object } options - user options
+ * @param   { Object } meta - compilation meta information
  * @param   { AST } ast - current AST output
  * @returns { AST } the AST generated
  */
-export default async function css(sourceNode, source, options, ast) {
+export default async function css(sourceNode, source, meta, ast) {
   const preprocessorName = getPreprocessorTypeByAttribute(sourceNode)
+  const { options } = meta
   const cssNode = sourceNode.text
-  const preprocessorOutput = await preprocess('css', preprocessorName, options, source, cssNode)
+  const preprocessorOutput = await preprocess('css', preprocessorName, meta, source, cssNode)
   const cssCode = (options.scopedCss ?
-    scopedCSS(options.tagName, preprocessorOutput.code) :
+    scopedCSS(meta.tagName, preprocessorOutput.code) :
     preprocessorOutput.code
   ).trim()
   const generatedCss = generateAST(`\`${cssCode}\``, {

src/generators/javascript/index.js

@@ -59,14 +59,15 @@ function extendTagProperty(ast, exportDefaultNode) {
  * Generate the component javascript logic
  * @param   { Object } sourceNode - node generated by the riot compiler
  * @param   { string } source - original component source code
- * @param   { Object } options - user options
+ * @param   { Object } meta - compilation meta information
  * @param   { AST } ast - current AST output
  * @returns { AST } the AST generated
  */
-export default async function javascript(sourceNode, source, options, ast) {
+export default async function javascript(sourceNode, source, meta, ast) {
   const preprocessorName = getPreprocessorTypeByAttribute(sourceNode)
   const javascriptNode = sourceNode.text
-  const preprocessorOutput = await preprocess('js', preprocessorName, options, source, javascriptNode)
+  const { options } = meta
+  const preprocessorOutput = await preprocess('js', preprocessorName, meta, source, javascriptNode)
   const jsInputSourceMap = composeSourcemaps(
     createNodeSourcemap(sourceNode, options.file, source),
     preprocessorOutput.map

src/generators/template/index.js

@@ -51,10 +51,11 @@ function extendTemplateProperty(ast, sourceFile, sourceCode, sourceNode) {
  * Generate the component template logic
  * @param   { Object } sourceNode - node generated by the riot compiler
  * @param   { string } source - original component source code
- * @param   { Object } options - user options
+ * @param   { Object } meta - compilation meta information
  * @param   { AST } ast - current AST output
  * @returns { AST } the AST generated
  */
-export default async function template(sourceNode, source, options, ast) {
+export default async function template(sourceNode, source, meta, ast) {
+  const { options } = meta
   return  extendTemplateProperty(ast, options.file, source, sourceNode)
 }

src/index.js

@@ -45,7 +45,7 @@ export async function compile(source, options = {}) {
     ...options
   }
 
-  const { code, map } = await runPreprocessor('template', opts.template, opts, source)
+  const { code, map } = await runPreprocessor('template', opts.template, {}, source)
   const { template, css, javascript } = riotParser(opts).parse(code).output
   const meta = {
     options: opts,
@@ -59,13 +59,13 @@ export async function compile(source, options = {}) {
 
   return ruit(
     createInitialInput(map),
-    hookGenerator(cssGenerator, css, code, opts),
-    hookGenerator(javascriptGenerator, javascript, code, opts),
-    hookGenerator(templateGenerator, template, code, opts),
+    hookGenerator(cssGenerator, css, code, meta),
+    hookGenerator(javascriptGenerator, javascript, code, meta),
+    hookGenerator(templateGenerator, template, code, meta),
     ast => recast.print(ast, {
       sourceMapName: 'map.json'
     }),
-    result => runPostprocessors(result, opts),
+    result => runPostprocessors(result, meta),
     result => ({
       ...result,
       meta
@@ -78,15 +78,15 @@ export async function compile(source, options = {}) {
  * @param   { Function } transformer - transformer function
  * @param   { Object } sourceNode - riot parser node
  * @param   { string } source - component source code
- * @param   { Object } options - compiling options
+ * @param   { Object } meta - compilation meta information
  * @returns { Promise<Output> } object containing output code and source map
  */
-function hookGenerator(transformer, sourceNode, source, options) {
+function hookGenerator(transformer, sourceNode, source, meta) {
   if (!sourceNode || (sourceNode.nodes && !sourceNode.nodes.length)) {
     return result => result
   }
 
-  return curry(transformer)(sourceNode, source, options)
+  return curry(transformer)(sourceNode, source, meta)
 }
 
 // This function can be used to register new preprocessors

src/postprocessors.js

@@ -37,17 +37,17 @@ export function unregister(postprocessor) {
 /**
  * Exec all the postprocessors in sequence combining the sourcemaps generated
  * @param   { Output } compilerOutput - output generated by the compiler
- * @param   { Object } options - user options received by the compiler
+ * @param   { Object } meta - compiling meta information
  * @returns { Promise<Output> } object containing output code and source map
  */
-export async function execute(compilerOutput, options) {
+export async function execute(compilerOutput, meta) {
   return Array.from(postprocessors).reduce(async function(acc, postprocessor) {
     const { code, map } = await acc
-    const output = await postprocessor(code, options)
+    const output = await postprocessor(code, meta)
 
     return {
       code: output.code,
       map: composeSourcemaps(output.map, map)
     }
-  }, Promise.resolve(createOutput(compilerOutput, options)))
+  }, Promise.resolve(createOutput(compilerOutput, meta)))
 }

src/preprocessors.js

@@ -61,13 +61,13 @@ export function unregister(type, name) {
  * Exec the compilation of a preprocessor
  * @param   { string } type - preprocessor type either 'js', 'css' or 'template'
  * @param   { string } name - unique preprocessor id
- * @param   { Object } options - preprocessor options
+ * @param   { Object } meta - preprocessor meta information
  * @param   { string } source - source code
  * @returns { Promise<Output> } object containing a sourcemap and a code string
  */
-export async function execute(type, name, options, source) {
+export async function execute(type, name, meta, source) {
   if (!preprocessors[type]) preprocessorTypeError(type)
   if (!preprocessors[type].has(name)) preprocessorNameNotFoundError(name)
 
-  return await transform(preprocessors[type].get(name), options, source)
+  return await transform(preprocessors[type].get(name), meta, source)
 }

src/transformer.js

@@ -13,18 +13,18 @@ export const Output = Object.freeze({
  * @param   { string } data.code - code generated
  * @param   { AST } data.ast - ast representing the code
  * @param   { SourceMapGenerator } data.map - source map generated along with the code
- * @param   { Object } options - user options, probably containing the path to the source file
+ * @param   { Object } meta - compilation meta infomration
  * @returns { Output } output container object
  */
-export function createOutput(data, options) {
+export function createOutput(data, meta) {
   const output = Object.seal({
     ...Output,
     ...data,
-    meta: { options }
+    meta
   })
 
-  if (!output.map && options && options.file) Object.assign(output, {
-    map: createSourcemap({ file: options.file })
+  if (!output.map && meta && meta.options && meta.options.file) Object.assign(output, {
+    map: createSourcemap({ file: meta.options.file })
   })
 
   return output
@@ -33,11 +33,11 @@ export function createOutput(data, options) {
 /**
  * Transform the source code received via a compiler function
  * @param   { Function } compiler - function needed to generate the output code
- * @param   { Object } options - options to pass to the compilert
+ * @param   { Object } meta - compilation meta information
  * @param   { string } source - source code
  * @returns { Promise<Output> } output - the result of the compiler
  */
-export async function transform(compiler, options, source) {
-  const result = await (compiler ? compiler(source, options) : { code: source })
-  return createOutput(result, options)
+export async function transform(compiler, meta, source) {
+  const result = await (compiler ? compiler(source, meta) : { code: source })
+  return createOutput(result, meta)
 }

src/utils/create-node-sourcemap.js

@@ -1,4 +1,4 @@
-import createSourcemap from './create-sourcemap'
+import { SourceNode } from 'source-map'
 import getLineAndColumnByPosition from './get-line-and-column-by-position'
 
 /**
@@ -9,17 +9,9 @@ import getLineAndColumnByPosition from './get-line-and-column-by-position'
  * @returns {SourceMapGenerator} source map generated
  */
 export default function createNodeSourcemap(node, sourceFile, sourceCode) {
-  const sourcemap = createSourcemap({ file: sourceFile })
+  const {line, column} = getLineAndColumnByPosition(sourceCode, node.start)
 
-  ;[node.start, node.end].forEach(position => {
-    const location = getLineAndColumnByPosition(sourceCode, position)
-
-    sourcemap.addMapping({
-      source: sourceFile,
-      generated: location,
-      original: location
-    })
-  })
-
-  return sourcemap
+  return new SourceNode(null, null, sourceFile, [
+    new SourceNode(line, column, sourceFile, sourceCode.slice(node.start, node.end))
+  ])
 }

src/utils/preprocess-node.js

@@ -1,22 +1,19 @@
-import getLineAndColumnByPosition from './get-line-and-column-by-position'
 import {execute as runPreprocessor} from '../preprocessors'
 
 /**
  * Preprocess a riot parser node
  * @param   { string } preprocessorType - either css, js
  * @param   { string } preprocessorName - preprocessor id
- * @param   { Object } options - options that will be passed to the compiler
+ * @param   { Object } meta - compilation meta information
  * @param   { string } source - tag source code
  * @param   { RiotParser.nodeTypes } node - css node detected by the parser
  * @returns { Output } code and sourcemap generated by the preprocessor
  */
-export default async function preprocess(preprocessorType, preprocessorName, options, source, node) {
-  const { column } = getLineAndColumnByPosition(source, node.start)
-  const offsetTop = '\n'.repeat(column)
-  const code = `${offsetTop}\n${node.text}`
+export default async function preprocess(preprocessorType, preprocessorName, meta, source, node) {
+  const code = node.text
 
   return await (preprocessorName ?
-    runPreprocessor(preprocessorType, preprocessorName, options, code) :
+    runPreprocessor(preprocessorType, preprocessorName, meta, code) :
     { code }
   )
 }

test/generators/css.spec.js

@@ -45,11 +45,10 @@ describe('Generators - CSS', () => {
   it('compile a simple css node', async function() {
     const { css } = parser().parse(simpleCSS).output
 
-    const ast = await compileCSS(css, simpleCSS, {
+    const ast = await compileCSS(css, simpleCSS, { options: {
       file: FAKE_FILE,
-      scopedCss: true,
-      tagName: 'my-tag'
-    }, createInput())
+      scopedCss: true
+    }, tagName: 'my-tag' }, createInput())
     const {code} = recast.print(ast)
 
     const output = evaluateScript(code)
@@ -64,11 +63,10 @@ describe('Generators - CSS', () => {
   it('compile a simple css without scoping the css', async function() {
     const { css } = parser().parse(simpleCSS).output
 
-    const ast = await compileCSS(css, simpleCSS, {
+    const ast = await compileCSS(css, simpleCSS,  { options: {
       file: FAKE_FILE,
-      scopedCss: false,
-      tagName: 'my-tag'
-    }, createInput())
+      scopedCss: false
+    }, tagName: 'my-tag'}, createInput())
     const {code} = recast.print(ast)
     const output = evaluateScript(code)
 
@@ -82,16 +80,15 @@ describe('Generators - CSS', () => {
   it('compile a scss file and generate a proper sourcemap', async function() {
     const { css } = parser().parse(scssCSS).output
 
-    const ast = await compileCSS(css, scssCSS, {
+    const ast = await compileCSS(css, scssCSS, { options: {
       file: FAKE_FILE,
-      scopedCss: true,
-      tagName: 'my-tag'
-    }, createInput())
+      scopedCss: true
+    }, tagName: 'my-tag'}, createInput())
     const {code} = recast.print(ast)
     const output = evaluateScript(code)
 
     expect(ast).to.be.ok
-    expect(code).to.have.string('my-tag')
+    expect(code).to.have.string('[is="my-tag"]')
     expect(output.default.css).to.be.ok
     expect(output.default.tag).to.be.not.ok
     expect(output.default.template).to.be.not.ok

test/generators/javascript.spec.js

@@ -35,9 +35,9 @@ describe('Generators - javascript', () => {
   it('compile a simple javascript code', async function() {
     const { javascript } = parser().parse(simpleJS).output
 
-    const ast = await compileJavascript(javascript, simpleJS, {
+    const ast = await compileJavascript(javascript, simpleJS, { options: {
       file: FAKE_FILE
-    }, createInput())
+    }}, createInput())
     const {code} = recast.print(ast)
     const output = evaluateScript(code)
 

test/helpers.js

@@ -18,11 +18,11 @@ export function getExpected(name) {
   return String(sh.cat(`${EXPECTED_DIR}${name}.js`))
 }
 
-export function scssPreprocessor(source, { file }) {
+export function scssPreprocessor(source, { options }) {
   const result = renderSync({
-    file: file,
+    file: options.file,
     data: source,
-    outFile: file,
+    outFile: options.file,
     sourceMap: true
   })
 

test/transformer.spec.js

@@ -33,7 +33,7 @@ describe('Transformer', () => {
     })
 
     it('create an output object with a sourcemap if the file option was provided', () => {
-      const result = createOutput({ code: 'foo' }, { file: 'foo.js' })
+      const result = createOutput({ code: 'foo' }, { options: { file: 'foo.js' }})
 
       expect(result.code).to.be.equal('foo')
       expect(result.map).to.be.not.equal(null)