No errors when trying to use non-existent local

btkostner commented 8 years ago

Webpack fails to build HTML when there are non-existent locals

Creating a new spike project, and remove the locals part of app.js so it looks like such:

const htmlStandards = require('spike-html-standards')
const cssStandards = require('spike-css-standards')
const latest = require('babel-preset-latest')

module.exports = {
  devtool: 'source-map',
  matchers: {
    html: '**/*.sml',
    css: '**/*.sss'
  },
  ignore: ['**/layout.sml', '**/_*', '**/.*'],
  reshape: (ctx) => {
    return htmlStandards({ webpack: ctx })
  },
  postcss: (ctx) => {
    return cssStandards({ webpack: ctx })
  },
  babel: { presets: [latest] }
}

Run spike compile or spike watch and it will show normal output:

btkostner@Caprica:~/Projects/Web/painter$ spike watch
compiled (0.437s)
▸ External IP: http://xx.xx.xx.xx:1111

But the generated HTML file will include webpack output:

var __runtime = {"escape":(input) => {
    const htmlRegex = /["&<>]/
    const regexResult = htmlRegex.exec(input)
    if (!regexResult) return input

    let result = ''
    let i, lastIndex, escape
    for (i = regexResult.index, lastIndex = 0; i < input.length; i++) {
      switch (input.charCodeAt(i)) {
        case 34: escape = '&quot;'; break
        case 38: escape = '&amp;'; break
        case 60: escape = '&lt;'; break
        case 62: escape = '&gt;'; break
        default: continue
      }
      if (lastIndex !== i) result += input.substring(lastIndex, i)
      lastIndex = i + 1
      result += escape
    }
    if (lastIndex !== i) return result + input.substring(lastIndex, i)
    else return result
  }}; module.exports = (function (locals) { var res;;var locals_for_with = (locals || {});(function (foo) {res = "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge, chrome=1\">\n    <meta name=\"author\" content=\"btkostner\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Painter</title>\n    <meta name=\"description\" content=\"a playground for front end web dev\">\n    <link rel=\"stylesheet\" href=\"css/index.css\">\n  </head>\n  <body role=\"document\">\n    <main role=\"main\"><h2>Hello World!</h2><p>Thanks for using <a href=‘https://github.com/static-dev/spike’>spike</a></p><p>Example of locals: " + (__runtime.escape(foo)) + "</p><p>Example of <strong>markdown</strong></p><p>Example of “smart quotes” — and dashes</p><hr><h3>Getting Started</h3><h4>The Stack:</h4><ul>\n        <li><a href=\"http://github.com/reshape/reshape\">reshape</a> for HTML transforms</li>\n        <li><a href=\"https://babeljs.io/\">babel</a> for JS transforms</li>\n        <li><a href=\"http://postcss.org/\">postcss</a> for CSS transforms</li>\n        <li><a href=\"http://webpack.github.io\">webpack</a> for JS bundling</li>\n      </ul><p>Customize your settings by editing the </p><a href=\"https://spike.readme.io/docs/appjs\">app.js</a> file or simply start by editing this view</main>\n    <script src=\"js/main.js\" defer></script>\n  </body>\n</html>\n"}.call(this,"foo" in locals_for_with?locals_for_with.foo:typeof foo!=="undefined"?foo:undefined));;return res })

At very least, it should show a warning on build. At best it should skip over that variable, or flat out error on build.

:earth_americas: environment

nvm 0.31.1
Node.js v6.3.1
npm 3.10.3
linux 4.4.0-34-generic
spike 0.11.1

jescalan commented 8 years ago

Hi @btkostner! Thanks for catching this.

Quick fix: just pass locals: {} to your reshape config and it will be resolved. Example:

reshape: (ctx) => {
  return htmlStandards({ webpack: ctx, locals: {} })
}

Long explanation: What you see there is actually a javascript function that, if called, would output your template's contents. Reshape can generate client-side templates as well (which is very useful for building more complex apps), and by default, this is what the reshape loader for webpack will output. When you pass the loader any locals config, it switches to generating static html instead.

The Fix: Since this particular pipeline within spike more or less always requires that the output be static html, I'll make it such that the primary reshape config always sets the locals config, even if the user removes it. I'll close out this issue and link to the fix once this has been resolved 😁

btkostner commented 8 years ago

Much appreciated @jescalan

cheers!

static-dev / spike-core

No errors when trying to use non-existent local #179

Webpack fails to build HTML when there are non-existent locals

:earth_americas: environment