Command line tool to precompile riot tags
If you are using Riot.js < 4.0.0 please check the legacy branch
npm install @riotjs/cli -g
riot --help
Riot.js command line tool
License: MIT License
Command line tool to precompile riot tags
If you are using Riot.js < 4.0.0 please check the legacy branch
npm install @riotjs/cli -g
riot --help
As of version 5.2.1 the pre-compilation of a simple .riot file with this command worked fine:
riot .
In 5.3.0 I have to declare @riotjs/cli as a devDependency despite not using any pre-processors at all, else it will throw a error about missing babel dependencies:
A critical error occurred
Trace: Error: Cannot find module '@babel/preset-typescript'
Require stack:
- C:\Users\xyz\AppData\Roaming\npm\node_modules\@riotjs\cli\node_modules\@babel\core\lib\config\files\plugins.js
- C:\Users\xyz\AppData\Roaming\npm\node_modules\@riotjs\cli\node_modules\@babel\core\lib\config\files\index.js
- C:\Users\xyz\AppData\Roaming\npm\node_modules\@riotjs\cli\node_modules\@babel\core\lib\index.js
- C:\Users\xyz\AppData\Roaming\npm\node_modules\@riotjs\cli\node_modules\@rollup\plugin-babel\dist\index.js
- C:\Users\xyz\AppData\Roaming\npm\node_modules\@riotjs\cli\cli.js
...
I am not using riot.js in a node project and @riotjs/cli was installed via npm globally.
Is there any plan to include these dependencies into the cli directly or is this the devDependency a requirement now?
Keep getting this warning when installing riot
. From what I can tell, looks like babel
(now babel-cli
) should be a devDependency
of this package anyway.
riot > riot-cli > [email protected]: In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers
At all
$ riot tags/home.tag --check
No syntax error. Ready to compile :)
$ cat tags/home.tag
<home>
<div {>
</div>
const name = "R"
ne,t setName =,%^; ( => {
}
</home>
And even compilation works
$ riot tags/home.tag tags/home.js
tags/home.tag -> tags/home.js
$ cat tags/home.js
riot.tag2('home', '<div > </div>', '', '', function(opts) {
const name = "R"
ne,t setName =,%^; ( => {
}
});
I am using riot cli in webstorm(don't think that matters), and I have a riot tag like this ->
<students_info> <div class="page_container" style=""> test </div> <script type="typescript"> let x = 1; </script> </students_info>
riot doesn't show any compile errors, but returns a js file with the word 'undefined' in it. if I change it to var it works. Other things like arrow functions and other things for typescript work fine as long as no let or const.
I'm using riot 2.6.0 and the riot command outputs both compilation errors and success messages to stdout. For better integration in my build chain, it would be awesome if errors could go to stderr instead.
Thanks for the response.
The instructions don't work for me on Windows 10:
C:\Users\User>npm install @riotjs/cli -g
C:\Users\User\AppData\Roaming\npm\riot -> C:\Users\User\AppData\Roaming\npm\node_modules@riotjs\cli\index.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules@riotjs\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
C:\Users\User>riot --help
'riot' is not recognized as an internal or external command,
operable program or batch file.
Originally posted by @monkeysuffrage in #40 (comment)
Hello! :)
Sorry for my question. Sure I'm missing something simple.
The --style flag doesn't seem to work for me. --type and --template are ok.
I've installed all the parsers:
$ npm install babel jade coffee-script node-sass less
And tried all the flags;
$ riot src dist --type coffeescript
Works.
$ riot src dist --type babel
Works.
$ riot src dist --template jade
Works.
But...
$ riot src dist --style sass
"The "sass" css preprocessor was not found. Have you installed it locally?"
$ riot src dist --style less
"The "less" css preprocessor was not found. Have you installed it locally?"
I also tried:
$ riot src dist --type lessc
"The "lessc" javascript preprocessor was not found. Have you installed it locally?"
$ riot src dist --type node-sass
"The "node-sass" javascript preprocessor was not found. Have you installed it locally?"
What am I missing?
Thanks in advance.
seems riot-cli must run with /bin/sh
, which windows cmd do not have
This is useful for build tools, so the console does not get messy with the compilation output.
see riot/riot#2043
I updated Node.js to v10.0.0, then the following message displayed.
(node:58855) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
macOS 10.13.4
Node 10.0.0
Yarn 1.6.2
I have some d.ts files, and I use them for my ts files. When I use a global variable like '_' in lodash in my tag files like so:
<students_info> <div class="page_container" style=""> test </div> <script type="typescript"> let x = _.map([1,2,3], (val) => { value+=1;}) ; </script> </students_info>
It fails because it doesn't know what lodash is with error: "Cannot find name _". I don't know how to get it to recognize my d.ts files. If I use declare var _; it compiles fine. But I don't want to have to create the d.ts files inside my tag files. Also, compiling from a regular ts file works fine.
Not sure if this is a bug or a feature request, or if I don't know how to properly add in the d.ts files, but couldn't find anything in the docs or SO.
I looked into typescript simple and noticed the heading "Ignore semantic errors" - Thought it may lead to the solution.
when I compile files with riot .
then tag errors are displayed in the shell.
But when I compile with the watch mode riot -w .
then no errors are displayed at all.
Iy would be perfect if the watch mode would display errors too
make a syntax error in a tag so that git .
shows the error description.
start it now with riot -w .
and no error is displayed
in the shell
7.0.6
compiling .riot file on the commandline returns always 0, even on errors.
This happens in the following cases:
for a nonexistent file:
$ ~/node_modules/.bin/riot none-xistent-file.riot
(node:25239) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat 'none-xistent-file'
at statSync (fs.js:915:3)
...
$ echo $?
0
and also if the file exists but has no root node:
$ touch foo.riot
$ ~/node_modules/.bin/riot foo.riot
(node:25366) UnhandledPromiseRejectionWarning: Error: [1,0]: Root tag not found.
...
$ echo $?
0
Wishful bugfix: in case of an error, a not-zeroexitcode should be returned in the shell, so that the calling process can recognize the error
yes, install riot cli v 4.0.3 ad do the steps in 1)
Which version of Riot does it affect?
$ ~/node_modules/.bin/riot -v
4.0.3
How would you tag this issue?
I have two riot projects...
One project has these dependencies
"@riotjs/cli": "^5.0.0",
"@riotjs/compiler": "^5.1.3",
"chokidar-cli": "^2.1.0",
"concurrently": "^5.3.0",
"esbuild": "^0.8.26",
"riot": "^5.1.2",
"sass": "^1.32.5"
The other project has these dependencies
"@riotjs/cli": "^5.1.2",
"@riotjs/compiler": "^5.1.3",
"chokidar-cli": "^2.1.0",
"concurrently": "^5.3.0",
"esbuild": "^0.8.34",
"riot": "^5.1.4",
"sass": "^1.32.5"
Both projects have the exact same riot.config.js
import { registerPreprocessor } from '@riotjs/compiler'
import { dirname } from 'path'
import sass from 'sass'
registerPreprocessor('css', 'scss', function (code, { options }) {
const { file } = options
const { css } = sass.renderSync({
data: code,
includePaths: [dirname(file)]
})
return {
code: css.toString(),
map: null
}
})
Both projects have the same npm build script
"build": "riot src/index.js -o public/app.js -c riot.config",
When I npm run build
on the cli v5.0.0 project it works great. When I npm run build
on the cli v5.1.2 project it errors out with this trace
% npm run build
> [email protected] build
> riot src/index.js -o public/app.js -c riot.config
It was not possible to load your config file, are you sure the path is correct?
A critical error occurred
Trace: /Users/xxxxxx/www/xxxxxx/riot.config.js:1
import { registerPreprocessor } from '@riotjs/compiler'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at loadConfig (/Users/xxxxx/www/xxxxxx/node_modules/@riotjs/cli/cli.js:291:10)
at /Users/xxxxxx/www/xxxxxx/node_modules/cumpa/cumpa.js:24:48
at /Users/xxxxxx/www/xxxxx/node_modules/cumpa/cumpa.js:24:46
at panic (/Users/xxxxxx/www/xxxx/node_modules/@riotjs/cli/cli.js:32:5)
at loadConfig (/Users/xxxxxx/www/xxxxx/node_modules/@riotjs/cli/cli.js:295:5)
at /Users/xxxxx/www/xxxxx/node_modules/cumpa/cumpa.js:24:48
at /Users/xxxxx/www/xxxxx/node_modules/cumpa/cumpa.js:24:46
at run (/Users/xxxxx/www/xxxxx/node_modules/@riotjs/cli/cli.js:346:4)
at Object.<anonymous> (/Users/xxxxx/www/xxxxx/node_modules/@riotjs/cli/cli.js:365:8)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
npm ERR! code 1
npm ERR! path /Users/xxxxx/www/xxxxx
npm ERR! command failed
npm ERR! command sh -c riot src/index.js -o public/app.js -c riot.config
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xxxxx/.npm/_logs/2021-01-24T11_25_19_271Z-debug.log
The first obvious change I see from v5.0.0 to v 5.1.0 is the addition of a rollup.config.js
file. https://github.com/riot/cli/blob/13c182de1ef0897df5bc596bda8fe619feb88153/rollup.config.js
If I npm remove @riotjs/cli
in the newer project then npm i @riotjs/[email protected]
it works again.
OS: Linux 4.6.4
Node.js: 6.3.1
Riot: 2.6.1
Riot compiler: 2.5.3
Riot cli: 2.6.1
Also affects next
branch.
test.tag
:
<test>
<h3>Line</h3>
<h3>Line</h3>
</test>
modifier.js
:
var fs = require('fs');
fs.writeFileSync('test.tag', '<test>\n\t<h1>Changed</h1>\n</test>', 'utf-8');
Run riot -w test.tag
. Then run node modifier.js
.
Problem:
The output file tag.js
is empty.
Compiling pug
templates to riot tag
's, and making riot compile those tags in watch
mode.
This is caused by chokidar
using fs.watch
instead of fs.watchFile
.
Which causes a race condition, giving no input on fs.readFileSync
.
This happens only when fs.writeFileSync
or fs.writeFile
are used.
Writing from cli via echo -e '<test>\n\t<h1>Changed</h1>\n</test>' > test.tag
works as expected.
Use option usePolling: true
when creating chokidar
watcher.
I've verified setting this option fixes the issue.
I will be able to start working on this riot submodule only when the new riot-compiler
will be published on npm (at least a beta release).
@aMarCruz So this means that I would be really glad if you could ping me on here once you will have a stable release thanks.
see riot/riot#1979
It could be nice to use custom config files where our users can extend the cli options
riot/riot#1380
It should be able somehow to use custom parsers also by using the riot-cli
riot/riot#1379
After upgrading from v5 to v6 I got an error with the build config.
I had a config with export default
, but changing it with module.exports
the error has disappeared.
Another error is still occurring:
Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work
And I don't know how to fix it.
The previous error before this told me to install the package @babel/preset-typescript
.
The issue can be seen here
To see the error run:
yarn && npx lerna bootstrap && npx lerna run build
macOS
v6
When using the CLI to compile tags, the --modular
option does not work anymore, the files are compiled as if you didn't use it!
The new @riotjs/compiler
requires the babylon
dependency somehow. The new CLI is somehow broken now due to the babel js internal dependencies
I'm using the following command with Riot CLI 4.0.2 to watch .riot changes in the src folder and write ES modules and maps back to the src folder. It works great except that new .riot files are not picked up. So I have to restart the command any time I add a new file.
npx riot -w src -o src --sourcemap file
My request is for riot to watch for new .riot files.
I used this cli when I want to precompile Riot tags without using bundler such as webpack.
Will this cli be maintained even after version 4?
how to use riot-cli
riot --version
5.0.0
Here is what I'm trying to do
riot -e riot -o js/components/ --watch riot
Now the output
Watching... riot/jobview.riot
Unknown input options: sourcemap, riot. Allowed options: acorn, acornInjectPlugins, cache, context, experimentalCacheExpiry, external, inlineDynamicImports, input, manualChunks, moduleContext, onwarn, perf, plugins, preserveEntrySignatures, preserveModules, preserveSymlinks, shimMissingExports, strictDeprecations, treeshake, watch
$ riot tags --type es6
SyntaxError: unknown: Unexpected token (3:9)
Unable to debug errors based on such messages because (3:9) points to another line in original file.
Extend print with code output and filename like you did while tag syntax checking.
helpers.find(extRegex, from)
always returns an empty array because TEMP_FILE_NAME.test(f)
never match on Windows.
riot foo/bar baz.js
does not handle symlinks in foo/bar
because shelljs.find()
does not dive into symlinked directories ( https://github.com/riot/cli/blob/master/lib/helpers.js#L20). It would be nice if it did.
C:\Users\User> npm install riot -g && riot
Hello, seems that options to compile all riot tags in a dir to a single concatenated file is not present/not supported in V4 ?
Options was :
riot foo/bar baz.js To a single concatenated file (baz.js)
when I try to use :
riot foo/bar baz.js
=> console shows each file .riot compiling to baz.js as expected
But when I have a look on output file baz.js it contains randomely some compiled tags, but not all.
Trying to follow this tutorial about getting started with Riot. Was introduced to --watch
, but it doesn't seem to do anything on my machine?
All it does is print out a "Watching" message, but it doesn't even compile the tags to begin with, let alone watch for any changes. I.e. after I run the command, I still have no index.js
, and re-saving any files doesn't trigger anything either. ๐
Zipped up code, in case structure has anything to do with it: riot-1.zip
riot-cli: 4.1.0 - https://github.com/riot/cli
riot-compiler: 3.5.1 - https://github.com/riot/compiler
windows: 10, Version 1803
We don't need to support any browser here so I will write the codebase using the es6 features available in node 4.0.0
It seems that cli does not yet support typescript compilation as shown in the examples accompanying the following release.
(I apologize if I'm wrong.)
https://github.com/riot/riot/releases/tag/v5.4.0
Are there any plans to make it possible to compile typescript in cli in the future?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.