Add an option to compile directly to string about pug-loader HOT 18 CLOSED

I tested the new version and it seems to work very well with the html mode. Awesome! Thank you so much!

from pug-loader.

Component

Thanks for the feature request.

Do you mean add an option data to rules object?

{
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: '@webdiscus/pug-loader',
        options: {
          data: {} // some data passed to the pug compiler
        }
      }
    ]
  }
}

If I understood that right:

1. if there is option data, then compile template with this data direct to string
2. if there is no option data, then return JS template function.

Is that right?

from pug-loader.

from pug-loader.

Hello @Rush the new loader options are added:

• method: 'render'
• data: {}

By default, a pug file will be compiled into template function. For render directly into HTML now are 2 ways:

1. set loader option method: 'render', then can be used const html = require('template.pug');
2. or add the query parameter ?pug-render to pug file, e.g.: const html = require('template.pug?pug-render');

By default can be used both styles in JavaScript:

// compile into template function, because loader option 'method' defaults is 'compile'
const tmpl = require('template.pug');
const html = tmpl({...});

// render the pug file into HTML, using the parameter 'pug-render'
const html2 = require('template2.pug?pug-render');

When the option method: 'render' is set:

{
  test: /\.pug$/,
  loader: '@webdiscus/pug-loader', 
  options: {
    method: 'render'
  }
}

then usage is:

// render directly into HTML, because loader option 'method' is 'render'
const html = require('template.pug');

// compile into template function, using the parameter 'pug-compile'
const tmpl2 = require('template2.pug?pug-compile');
const html2 = tmpl2({...});

Note: for rendering directly into HTML no additional loader is needed

P.S. can you please test the new version 1.1.0 of NPM Package in your dev setting?
After your feedback can this issue be closed.

from pug-loader.

Thank you. Will test it today

from pug-loader.

Any ideas?

ERROR in ../src/ts/components/shared/user-button/user-button.pug
Module build failed (from ./node_modules/@webdiscus/pug-loader/src/index.js):
TypeError: merge is not a function
    at Object.compilePugContent (/code/nexus/portal/node_modules/@webdiscus/pug-loader/src/index.js:131:18)
    at Object.module.exports (/code/nexus/portal/node_modules/@webdiscus/pug-loader/src/index.js:214:21

this is not my function

from pug-loader.

It seems I had webpack-merge 4.x. Upgrading to 5.x fixes this particular error.

from pug-loader.

It seems it's not implemented correctly. The code you're generating is still exporting code, not compiled html. Angular is returning an error for me:

ERROR in ../src/ts/components/shared/scroll-box/scroll-box.pug:3:767 - error NG5002: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

3 var pug_match_html=/["&<>]/;function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_html = pug_html + "\u003Cdiv" + (" class=\"scroll-box\""+pug_attr("#box", true, true, true)) + "\u003E\u003Cdiv" + (" class=\"scroll-bar\""+pug_attr("#bar", true, true, true)) + "\u003E\u003Cdiv" + (" class=\"scroll-slider\""+pug_attr("#slider", true, true, true)) + "\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003Cdiv" + (" class=\"scroll-scroller\""+pug_attr("#scroller", true, true, true)) + "\u003E\u003Cdiv" + (" class=\"scroll-content\""+pug_attr("#content", true, true, true)) + "\u003E\u003Cng-content\u003E\u003C\u002Fng-content\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";;return pug_html;};module.exports=template();

there shouldn't be any module.exports=template(); the entire output should be the compiled html template.

from pug-loader.

In other words, the output of pug-loader should go directly to html-loader. Otherwise it's not possible to use html-loader asset handling, bundling.

const pugRule = {
  test: /\.pug/,
  loaders: [
    'html-loader',
    {
       loader: '@webdiscus/pug-loader',
       options: {
       doctype: 'html',
       plugins: [ require('pug-plugin-ng') ],
       method: 'render',
     },
  ],
};

from pug-loader.

It seems I had webpack-merge 4.x. Upgrading to 5.x fixes this particular error.

Yes, the package.json has under devDependencies the "webpack-merge": "^5.8.0".

from pug-loader.

It seems it's not implemented correctly. The code you're generating is still exporting code, not compiled html. Angular is returning an error for me:

ERROR in ../src/ts/components/shared/scroll-box/scroll-box.pug:3:767 - error NG5002: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

3 var pug_match_html=/["&<>]/;function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_html = pug_html + "\u003Cdiv" + (" class=\"scroll-box\""+pug_attr("#box", true, true, true)) + "\u003E\u003Cdiv" + (" class=\"scroll-bar\""+pug_attr("#bar", true, true, true)) + "\u003E\u003Cdiv" + (" class=\"scroll-slider\""+pug_attr("#slider", true, true, true)) + "\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003Cdiv" + (" class=\"scroll-scroller\""+pug_attr("#scroller", true, true, true)) + "\u003E\u003Cdiv" + (" class=\"scroll-content\""+pug_attr("#content", true, true, true)) + "\u003E\u003Cng-content\u003E\u003C\u002Fng-content\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";;return pug_html;};module.exports=template();

there shouldn't be any module.exports=template(); the entire output should be the compiled html template.

Hm, I don't use Angular/React/Vue. I write with native JS + Webpack, that's why I didn't have the problem.
Thank You for this report, it is very important.

To render Pug files into HTLM I use the the Webpack plugin HtmlWebpackPlugin.
The rendering a pug file into HTML string in native JavaScript file work via require('temple.pug'):

const html = require('template.pug?pug-render');
console.log(html); // ==> here is output the rendered HTML string

... wrong text was deleted ...

from pug-loader.

In other words, the output of pug-loader should go directly to html-loader. Otherwise it's not possible to use html-loader asset handling, bundling.

const pugRule = {
  test: /\.pug/,
  loaders: [
    'html-loader',
    {
       loader: '@webdiscus/pug-loader',
       options: {
       doctype: 'html',
       plugins: [ require('pug-plugin-ng') ],
       method: 'render',
     },
  ],
};

I try to create an Angular "Hello world" to reproduce your problem by me local. Then I write a recipes how to use this pug-loader with Angular.

It would be very helpful if you gave me your minimalist code snipped from Angular project that should work.

from pug-loader.

Please see my example where I provide a working version with pug-html-loader and a non-working one with @webdiscus/pug-loader

https://github.com/Rush/webdiscus-pug-webpack-example

The most important part, when things are working properly, is to see the output:

Output <!DOCTYPE html><html></html><body>hello</body>

the output from @webdiscus/pug-loader is super weird and inefficient:

template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_html = pug_html + "\u003C!DOCTYPE html\u003E\u003Chtml\u003E\u003C\u002Fhtml\u003E\u003Cbody\u003Ehello\u003C\u002Fbody\u003E";;return pug_html;};module.exports=template()

Also, Angular has really nothing to do with it.

from pug-loader.

Thank You for the Webpack example.
I fixed the Webpack config for corrected work of examples. But I don't have a permission for push my branch into your repository. Do you can give me an access, please? Then you can see the working Webpack config.

Please see my example where I provide a working version with pug-html-loader and a non-working one with @webdiscus/pug-loader
https://github.com/Rush/webdiscus-pug-webpack-example

the output from @webdiscus/pug-loader is super weird and inefficient:

template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_html = pug_html + "\u003C!DOCTYPE html\u003E\u003Chtml\u003E\u003C\u002Fhtml\u003E\u003Cbody\u003Ehello\u003C\u002Fbody\u003E";;return pug_html;};module.exports=template()

Also, Angular has really nothing to do with it.

Yes, you is full right, the version up to 1.2 the method render was inefficient.
An HTML was rendered by JavaScript at runtime. The original Pug-Loader do exact same as my method compile.

I have added new method html and improved the method render:

• the method html render a pug into pure HTML string at compile time. Same as by pug-html-loader. This method need the html-loader.
• now, the method render convert a pug into HTML really at compile time. The result of rendered JavaScript file is same as pug-html-loader + html-loader, even do it faster, generate smaller code and not need an additional loader

Please, see new version 1.3.0.

P.S. I need a permission to push working examples to your repository.

from pug-loader.

@Rush here are two simpelstes Angular apps - "Hello World":

example work with method=render
example work with method=html

You can add to a sample above a not working case. Then I can reproduce your problem by me local.

from pug-loader.

Hallo @Rush,
can this ticket be closed?

from pug-loader.

Sorry didn't yet have time to test. Can you give me few more days to verify everything? Thank you!

from pug-loader.

Sorry didn't yet have time to test. Can you give me few more days to verify everything? Thank you!

Yes of course, you have so much time as you need, no rush ;-)

Here is the worked example hello-pug, with native JS + Webpack.

from pug-loader.