Importing modules

[noonien]

How does one import modules?

- import 'something';
p= something('something')

errors out with: Error: 'import' and 'export' may only appear at the top level (2:0)

[aMarCruz]

@noonien , this plugin transforms pug templates to ES6 modules, but pug byself is an ES5 tool and does not supports modules.

To add support for ES6 modules to pug, you need to use a filter like this one

I've never used pug filters and can't help on this but I'm sure the pug site can. Closing now...

ADDED: If your tool-chain supports require you can use it without problems, I do this all the time with my pugjs-brunch plugin. If I have the time, a future version of rollup-plugin-pug will include support to imports.

[noonien]

From what I can gather, the JS code blocks (code after the -) are copied verbatim. I think the issue is that the said code is inside the compiled function that pug returns.

You already seem to keep track of pug dependencies(include, extends and mixins) and import them.

However, the problem appears to be that pug is not aware of the import JS statement and just copies it inside the compiled function, which is invalid ES6.

I don't believe filters can solve this, because all they do is apply transformation to the strings, not move code outside the function.

As far as I can tell, these are the available solutions:

• Have Pug keep track of ES6 imports (perhaps trough special syntax) and:
  • export them trough the API, as it does with fn.dependencies, then have rollup-plugin-pug add them to the top of the JS module
  • append them to fn.dependencies (I don't know how other projects handle fn.dependencies though)
  • Have rollup-plugin-pug detect imports in code and move them outside the function

I have also created an issue on the pug issue tracker @ pugjs/pug#2804 to get the pug developers opinions.

[aMarCruz]

@noonien , I think the rollup filter must translate imports to require inside the pug funcion, but really I don't know how it works.

And yes, the desired solution would be rollup-plugin-pug to move them out of the pug function. I hope to find the time to implement this, maybe the next week.

[aMarCruz]

@noonien , I made a commit in the branch "master" supporting import in ole-line code (each line containing import must start with a dash, without comments before the import clause).

Please test.

[noonien]

Importing now works just fine.

Awesome! Thanks!

[aMarCruz]

@noonien thank you. I will publish this version next week.