riot / webpack-loader Goto Github PK

I was trying to follow this comment to get prefixing/postcss working and cannot get it to do so.

I realize the example isn't using this loader (though I believe that loader is no longer supported), and that I am using webpack 2 and all of the examples I've seen are webpack 1, but I'm not having any webpack 2 specific problems.

It seems to be that this loader doesn't support all of the riot config options. If that is the case, please update the readme with better usage docs as noted in #2 for what is supported

I'm using the riot-tag-loader and have enabled the watch mode in my webpack config.

$ webpack --watch --config webpack.dev.js

module: {
    rules: [
        {
            test: /.tag$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].tag.js',
                        outputPath: 'riot'
                    }
                },
                {
                    loader: 'riot-tag-loader',
                    options: {
                        hot: false,
                        compact: true,
                        modular: true,
                        type: 'es6',
                        style: 'scss'
                    }
                }
            ]
        }
    ]
}

Works initially correct, meaning the tags get compiled.

When I change the tag afterwards (while watched) is gets recompiled but this is not visible in the terminal!
--info-verbosity verbose doesn't help either.

When I change another JS file (also watched) it's visible in the terminal.
So I think the riot-tag-loader doesn't provide the necessary logging to webpack's watchmode.

Is this not supported or is there any mistake in my webpack config?

I'm using webpack 4.6.0

In v1.1.0, cause Error: A valid query string passed to parseQuery should begin with '?'.
When v1.0.0, not cause above problem.

Maybe, loader options or query is not defined in webpack.config.js, this problem cause.

I am building an extension for chrome browser and for automating the build process I was thinking of using the loader with webpack, It works fine but uses the default riot.js file for creating the bundle thus giving me CSP issues in the browser while loading the extension. I think we need some option or query to be passed to the loader such that the riot.csp.js would be used instead of riot.js while building the bundle.

I'm currently replacing a project's gulp build with 100% webpack.
Within the project the riot tag files get compiled individually so the generated JS files can be included individually.

<script src="tags/tag1.js"></script>
<script>
  riot.mount('*');
</script>

So far this has been done with gulp-riot that internally uses riot.

With my webpack build the head of each file looks different and contains

var riot = require('riot')

This throws an error: Uncaught ReferenceError: require is not defined
I've found out this gets prepended to the outout within the tag-loader.

I guess it's needed for some use cases (as you probably wouldn't have added it otherwise) but for me it's breaking my code.
Would it be ok to add an option to disable this so I get only the compiled code?

Apart from that I've found out that the gulp-riot plugin introduced a custom option (I'm using) which also prepends code to the output:

if (options.modular) {
  compiledCode = `(function(tagger) {\n  if (typeof define === 'function' && define.amd) {\n    define(['riot'], function(riot) { tagger(riot); });\n  } else if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {\n    tagger(require('riot'));\n  } else {\n    tagger(window.riot);\n  }\n})(function(riot) {\n${compiledCode}\n\n});`;
}

Hence same question here:
would a be ok to add the same option (modular) to the loader?

I'm trying to load an image like so:

<foo-bar>
   <img src="{require('./image.jpg')}" />
</foo-bar>

but an error is thrown:

foo.bundle.js:1249 TypeError: (intermediate value)(intermediate value)(intermediate value).require is not a function
    at Tag$1.eval (eval at _create (foo.bundle.js:1258), <anonymous>:3:43)
    at _tmpl (foo.bundle.js:1222)
    at Tag$1.updateExpression (foo.bundle.js:1807)
    at each (foo.bundle.js:1561)
    at Tag$1.updateAllExpressions (foo.bundle.js:1893)
    at Tag$1.tagUpdate (foo.bundle.js:2772)
    at Tag$1.tagMount (foo.bundle.js:2879)
    at Object.updateExpression (foo.bundle.js:1796)
    at each (foo.bundle.js:1561)
    at Object.updateAllExpressions (foo.bundle.js:1893)
_logErr	@	foo.bundle.js:1249

Note that if I assign the require to a variable outside the tag then use said variable, everything works as expected. The problem is that I don't think we should have to create a variable per image asset just to load it into the tag. Anyone have a workaround for this?

I'm writing a riot app that requires me to use the tag loader inside webpack and include riot using a <script> tag:

/src/index.html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/riot.min.js"></script>
  </head>
  <body>
  </body>
</html>

/src/a.js

import './test.tag';

/src/b.js

import './test.tag';

/src/test.tag

<test>
  <p>Test tag</p>
</test>

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: {
    'a': './a.js',
    'b': './b.js'
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /src/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.tag$/,
        exclude: /node_modules/,
        use: [{
          loader: 'riot-tag-loader'
        }],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ],
  devServer: {
    open: true,
    port: 12000
  },
};

In chrome I get this error when I try to run this app:

Uncaught TypeError: Cannot redefine property: brackets

I need to include riot in a <script> tag because the app needs to be extensible and you should be able to build extensions as .js files outside of webpack. I would like the API of the app to be available to these extensions through the global scope (window), which includes access to riot.

Please help me on how can I use file-loader module for the static images embedded inside a riot.tag.

Here is my webpack.config.js and test.cmp.tag

<test>
    <div class="top-left-part">
        <!-- Logo -->
        <a class="logo" href="index.html">
            <!-- Logo icon image, you can use font-icon also -->
            <b>
                        <!--This is dark logo icon-->
                        <img src="../plugins/images/admin-logo.png" alt="home" class="dark-logo">
                        <!--This is light logo icon-->
                        <img src="../plugins/images/admin-logo-dark.png" alt="home" class="light-logo">
                    </b>
            <!-- Logo text image you can use text also -->
            <span class="hidden-xs">
                        <!--This is dark logo text-->
                        <img src="../plugins/images/admin-text.png" alt="home" class="dark-logo">
                        <!--This is light logo text-->
                        <img src="../plugins/images/admin-text-dark.png" alt="home" class="light-logo">
                    </span>
        </a>
    </div>
</test>

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");


module.exports = {
    entry: {
        home: path.resolve(__dirname, './src/apps/home/home.app.js')
            // home2: path.resolve(__dirname, './src/apps/home/home.app.js')

    },
    output: {
        path: path.resolve(__dirname, "./public"),
        filename: 'js/[name].bundle.js'
    },
    node: {
        fs: 'empty'
    },
    // devtool: 'inline-source-map',
    module: {
        rules: [{
            test: /\.tag$/,
            exclude: /node_modules/,
            use: [{
                loader: 'riot-tag-loader'
            }
              ]
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                use: 'css-loader',
                fallback: 'style-loader'
            })
        }, {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract({
                use: [{
                    loader: 'css-loader',
                    options: {
                        url: false,
                        paths: [path.resolve(__dirname, "node_modules")]
                    },
                }, {
                    loader: 'less-loader',
                    options: {
                        url: false,
                        paths: [path.resolve(__dirname, "node_modules")]
                    }
                }],
                fallback: 'style-loader'
                    // ,publicPath:publicPath_Css
            })
        }, {
            test: /\.(png|jpg|gif|svg)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: "images"
                }
            }]
        }, {
            test: /\.(eot|com|json|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
            loader: 'url-loader?emitFile=false'
        }]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "/css/[name].css"

        }), new HtmlWebpackPlugin({
            hash: true,
            chunks: ["home"],
            filename: path.resolve(__dirname, "./public/pages/home.html"),
            title: "home1",
            template: path.resolve(__dirname, "./src/pages/home.page.html"),
            minify: {
                // collapseWhitespace: true
            }
        })
    ]
}

Just getting around to upgrading from Riot 2.x and Webpack 1.x and switching from riotjs-loader to the official one. I'm getting this warning during builds now:

loaderUtils.parseQuery() received a non-string value which can be problematic, see webpack/loader-utils#56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

Everything is working fine despite the warning - thought I'd let you guys know just in case.

Not sure if this is an issue with riot-hot-reload instead, but posting here since this problem arose when updating riot-tag-loader. Let me know if you'd like me to open this issue in the hot-reload repo instead.

1. Describe your issue: Whenever there is a change made in a .tag file, Webpack does compile the change, but the hot reload isn't applied to the component. The change is visible only after a manual page refresh. Hot reloading works fine in regular .js files.

2. Can you reproduce the issue? Yes, even the Webpack example is broken. Steps to reproduce below.

   • Clone or download the example repo
   • Go to the Webpack directory
   • Run npm install -D riot-compiler (since the compiler seems to be missing)
   • Go to localhost:3000 or localhost:3000/webpack-dev-server to see that the app is running
   • Change, e.g. the Generate button text to something else in random.tag
   • Go back to localhost:3000
   • Nothing changed, but in console there are logs about HMR happening

3. On which browser/OS does the issue appear? macOS Sierra, Chrome 63

4. Which version of Riot does it affect? >=3.7.4

5. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

I'd like to disable source maps, but that doesn't seem possible via tag loader options due to the following line:
https://github.com/riot/tag-loader/blob/master/index.js#L48

Would be great to have that be configurable for the loader because right now the source maps are not very useful (they don't correctly map).

Forked with the following commit for now:
tototoben@79935fb

It seems doesn't work with i18n-webpack-plugin.

Code:

<my-tag>
  <p>{ __('my-text') }</p>
</my-tag>

Got:

__ is not a function

That is, the expression in the tag does not seem to be parsed by webpack.

So, the following code works (but this is redundant!):

<my-tag>
  <p>{ myText }</p>
  <script>
    this.myText = __('my-text')
  </script>
</my-tag>

Any solutions?
Is riot-tag-loader able to pass expressions in tags to webpack?

thanks.

With riot v3 I really enjoyed the handy options style: 'scss' and type: 'es6'.
But seems they are not implemented anymore in riot v4 and I need to register my own preprocessor and postprocessor. So I've done the following in my webpack.config.js

const compiler = require('@riotjs/compiler');
const sass = require('node-sass');

compiler.registerPreprocessor('css', 'sass', function(code, { options }) {
    const { file } = options;
  
    console.log('Compile the sass code in', file);
  
    const css = sass.renderSync({
        data: code
    });
  
    return {
        code: css,
        map: null
    };
});

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.riot$/,
                use: [
                    {
                        loader: '@riotjs/webpack-loader',
                        options: {
                            css: 'sass',
                        }
                    }
                ]
            }
        ]
    }
};

Unfortunately this hasn't worked: the emitted file still contained scss code and I didn't see any console.log

Need to document with examples other loader options from riot.config.js or advanced configuration as seen in rollup example

Include other undocumented options like export css using the riot app.tag --export css app.css option

ref: riot/riot#1993

Summary:
A day old project which worked, suddenly stopped working. Code didn't change between the sweet spot to the failure.

Dependencies
"dependencies": {
"riot": "^4.0.0-rc.2",
"faye": "^1.2.4"
},
"devDependencies": {
"@riotjs/compiler": "^4.0.0",
"@riotjs/hot-reload": "^4.0.0-beta.1",
"@riotjs/webpack-loader": "^4.0.0",
"@types/typescript": "^2.0.0",
"ts-loader": "^5.4.3",
"typescript": "^3.4.4"
}
The error

Uncaught Error: Module build failed (from ./node_modules/@riotjs/webpack-loader/dist/riot-webpack-loader.cjs.js):
Error: Line 15: Unexpected token >
    at ErrorHandler.constructError (:8000/opt/work-files/work/milestonePod2/fe/node_modules/esprima/dist/esprima.js:5012)
    at ErrorHandler.createError (:8000/opt/work-files/work/milestonePod2/fe/node_modules/esprima/dist/esprima.js:5028)
    at Parser.unexpectedTokenError (:8000/opt/work-files/work/milestonePod2/fe/node_modules/esprima/dist/esprima.js:1985)
    at Parser.throwUnexpectedToken (:8000/opt/work-files/work/milestonePod2/fe/node_modules/esprima/dist/esprima.js:1995)
    at Parser.parsePrimaryExpression (:8000/opt/work-files/work/milestonePod2/fe/node_modules/esprima/dist/esprima.js:2366)
    at Parser.inheritCoverGrammar (:8000/opt/work-files/work/milestonePod2/fe/node_modules/esprima/dist/esprima.js:2

The unexpected token is of course not the real problem. Even when I removed parts of the code it keeps pointing as something as wrong].

Workaround
not found yet.

i tried to delete the dist directory for no avail.

webpack.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: [
        path.resolve(__dirname, 'src/main.ts')
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        libraryTarget: 'umd',

    },
    devtool: 'source-map',

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [{
                    loader: 'ts-loader'
                }],
                exclude: /node_modules/,
            },
            {
                test: /\.riot$/,
                exclude: /node_modules/,
                use: [{
                    loader: '@riotjs/webpack-loader',
                    options: {
                        hot: false, // set it to true if you are using hmr
                        // add here all the other @riotjs/compiler options riot.js.org/compiler
                        // template: 'pug' for example
                    }
                }]
            },
         
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
}

Hi,

At the bottom of the readme.md there's a link that says:

Please check this simple example to see how it's easy to configure webpack with riot

This link leads to here: https://github.com/riot/examples/tree/gh-pages/webpack - which currently is dead

Any chance the example could be reinstated, or the link changed to be pointing to the right place?

Thanks

edit: Looks like the problem is that this example doesn't exist (anymore?) on the gh-pages branch, which is where the link is pointing. Changing the link to https://github.com/riot/examples/tree/next/webpack looks like the right thing to do

I was wondering if it would be possible to catch an error in the plugin and return it, something like this.callback(errorHere, output, map). That way, Webpack actually marks it as a failed compile. I'm using TypeScript as a preprocessor; currently, I have errors logging to the console but Webpack continues on as if nothing is wrong. In my preprocessor, I could throw an Error, and if the plugin could catch it and pass it to Webpack that would be helpful.

Info about Webpack's callback here: https://webpack.js.org/api/loaders/#thiscallback

Thank you!

In current version of riot-tag-loader, var riot = require('riot') is hard-coded (line).

If we want Riot tags to treat as ES6 Modules, require line should be import riot from 'riot'.

The line shoud be configured, at least the selection of require/import.

There's a problem with the path variable in the hotReload(path) function, since Windows uses the backslash character as folder separator.

ERROR in ./src/tags/test.riot
Module not found: Error: Can't resolve 'C:UsersLuffDesktolehsrc agstest.riot' in 'C:\Users\Luff\Desktop\bleh\src\tags'
@ ./src/tags/test.riot 23:24-80
@ ./src/index.js
i ｢wdm｣: Failed to compile.

I've made a pull request #26 .

Hello,

What is the (proper) way to make riot object accessible inside <script> part of the tag file?

(The same question applies for the router object.)

Thank you.

I'm not able to use await keyword to invoke some async JS functions.
Tag-loader claims that 'await' is a reserved word.

For example:

this.onClick = (e) => {
{
let data=await getSomeData();
}

I was using webpack example as a playground.
https://github.com/riot/examples/tree/gh-pages/webpack