errors with zero options

[wkentdag]

description

given the following config file:

//index.js

const reshape = require('reshape')
const sugarml = require('sugarml')
const htmlStandards = require('spike-html-standards')
const {readFileSync} = require('fs')

reshape({
  plugins: htmlStandards()
  // parser: sugarml
})
.process(readFileSync('./index.sml', 'utf8'))
.then(result => {
  console.log(result.output())

})
.catch(console.error)

and the following index.sml file:

html
  body
    .first-level
      .second-level
        .third-level hi!
      .second-level-2

I get this error:

⚡ iiif-viewer@master ~ node index.js 
/Users/wkentdaggett/local-dev/iiif-viewer/node_modules/spike-html-standards/lib/index.js:12
  if (options.webpack) {
             ^

TypeError: Cannot read property 'webpack' of undefined
    at spikeHtmlStandards (/Users/wkentdaggett/local-dev/iiif-viewer/node_modules/spike-html-standards/lib/index.js:12:14)
    at Object.<anonymous> (/Users/wkentdaggett/local-dev/iiif-viewer/index.js:8:12)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:449:3

Adding a default value for options here (or passing an empty object to the constructor) got rid of the error, but the resulting output was still unprocessed sml. When I pass {parser: sugarml} to reshape instead of {plugins: htmlStandards()} I get the desired result, so I'm fairly confident this is an issue with this library's config and not something else in my code. If my example is missing some required options, IMO the readme could use a clearer example of the minimum config necessary to use this plugin with reshape.

environment

node 6.2.0
npm 3.10.6
reshape 0.3.2
spike-html-standards 0.2.1
sugarml: 0.2.2

[jescalan]

Ah so in order to work correctly with spike, it will need at least a locals: {} option. This is because reshape can generate a client-side template, or static html. The reshape loader (which we use inside spike) can also generate either one. In order for it to generate static html, you must pass the locals option. Otherwise, it will generate a client-side template.

Ref: https://github.com/reshape/loader#producing-static-html

If you have any ideas for a smoother way to do this, I'd be open to it!

[wkentdag]

👍 passing in an empty locals object seems smooth enough to me. unfortunately it's still outputting sml with this config:

reshape({
  plugins: htmlStandards({
    locals: { }
  })
})

am I still missing something?

[jescalan]

It should output html with that. Are you for sure on a spike version at 0.11.0 or greater? You can check with spike -v.

That being said, there are a couple other options you want in order to get it working with spike well. They can all be wrapped up by this:

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

The webpack option does two things. First, it sets the filename option, which allows for errors, if present, to correctly report which file they came from. Second, it enables dependency tracking, which means if you are using a layout/partial it will reload all the views the use it correctly. This is essential if you are using webpack (which spike does). These two options can also be set manually as such:

reshape: (ctx) => {
  return htmlStandards({
    addDependency: ctx,
    filename: ctx.resourcePath,
    locals: { foo: 'bar' }
  })
}

However, there's no real good reason to set it like this given the webpack shortcut 😁

You can see a fully compatible config (which is exactly this above) in the base template.

EDIT: Sorry, I totally missed the fact that you're doing it manually and not using spike here, haha. With this bare config, you don't have to pass in a locals object, that's just with spike. Although I would still recommend passing in filename as an option, for errors. I think maybe the issue is that you commented out the parser config?

[wkentdag]

oops, I should have clarified: I'm trying to just use reshape + spike-html-standards as a standalone replacement for jade, without using spike or webpack. I have successfully integrated reshape + html standards in one spike project but just assumed that I could be able to use it outside of that context. am I wrong?

[jescalan]

Haha yeah sorry I just noticed at the end of the last comment and edited it. That is totally a valid use. The issue here is that you need to provide html standards as a direct feed to reshape, rather than scoped under plugins. So like this:

reshape(htmlStandards())
  .process(...)

It returns a full config object, not just an array of plugins. You don't need sugarml either, that's included with the standards pack.

This is totally my bad, the documentation is wrong. Let me update this right now, thanks for catching!

[wkentdag]

Aha that's it! Thanks for the help. just submitted an update in my PR if you didn't beat me to it.

[jescalan]

Sorry about that again! Thanks for dealing with all my mistakes with this early-stage stuff. Let me know if anything else comes up! 👬