npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-strip-react-dom-comment

v1.0.4

Published

Strips the /** @jsx React.DOM */ from pipes to support tools that can't handle the comment

Downloads

24

Readme

gulp-strip-react-dom-comment

Strips the /** @jsx React.DOM */ from pipes to support tools which can't handle the comment.

Language   Platform   License   Status

NPM Downloads

When would this matter?

When using a tool that uses JavaDoc style extension comments, which panics on seeing an extension comment it doesn't recognize. Examples include many documentation extraction tools, such as YUIDoc, which prompted this being written.

Using YUIDoc as an example, you might find a rule in a gulpfile like this:

gulp.task('yuidoc', [], function() {
    gulp.src(['js/**/*.js', 'js/**/*.jsx'])
        .pipe(template({pkg: pkg}))    // Process source files first
        .pipe(yuidoc.parser())         // Then parse
        .pipe(yuidoc.reporter())       // Then report
        .pipe(yuidoc.generator())      // aaaaaand generate
        .pipe(gulp.dest('./doc/yuidoc-inked'));
});

Unfortunately, even though this rule is generally correct, this will kersplode and die, because YUIDoc expects comments in /** @foo\n * @bar\n */\n form, and the React JSX signal comment /** @jsx React.DOM */ incorrectly triggers that as a YUIDoc rule, which in turn fails because it's missing YUIDoc requirements.

As a result, you'll see something that looks roughly like this:

$ gulp build
[00:19:28] Starting 'yuidoc'...
[00:19:28] Finished 'yuidoc' after 5.24 ms

\projects\site\js\app.jsx
  line 1    Missing item type

\projects\site\js\components\Layout.jsx
  line 1    Missing item type

\projects\site\js\components\Routes.jsx
  line 1    Missing item type

3 problems

To fix this, you'd want the React JSX line automatically removed, which this plugin does. First require the plugin:

var stripDomComment = require('gulp-strip-react-dom-comment');

Then add a line to our previous gulp rule, like so:

...
        .pipe(template({pkg: pkg}))
        .pipe(stripDomComment())       // Add me here to fix the problem!
        .pipe(yuidoc.parser())
...

And thus, our point.

Polemic :neckbeard:

gulp-strip-react-dom-comment is MIT licensed, because viral licenses and newspeak language modification are evil. Free is only free when it's free for everyone.