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

reactx-loader

v1.5.1

Published

React single file component. Write JS-CSS-HTML in single file.

Downloads

1

Readme

reactx-loader

travis ci npm package

This is a webpack loader for transforming react single file component.

中文文档

Feature

It allows you to write your components in this format:

reactx component

reactx-loader also provide following features:

  • Supports component hot-reloading during development.
  • Supports webpack css loader's Local Scope feature and syntax.
  • Allows using other Webpack loaders for each part of a React component, for example SASS for <style> and CoffeeScript for <script>(if you like).

How to use

1.install from npm

$ npm install reactx-loader --save-dev

2.config your webpack

// webpack.config.js
var config = {
  loaders: [
    {
      test: /\.reactx$/,
      exclude: /node_modules/,
      loader: 'reactx'
    }
  ]
}

3.do whatever you want

// component.reactx
<script>
  const React = require('react')

  export default class Index extends React.Component {
    render() {
      return (
        <div id="workspace">hi</div>
      )
    }
  }
</script>

<style>
  #workspace {
    color: red;
  }
</style>
// other jsx file
import Index from './component.reactx'
...

Use other languages that compile to JS

Here we use Coffee as an example, you can modify the config of webpack(which we will mention in next part) to tell reactx-loader which loader it can use to process each languages. Because Coffee don't support JSX's HTML tag, so we use Coffee's embedded feature. But here we meet a problem, when using embedded Js of Coffee to export JSX's HTML tag, you should using babel-loader to process export code after coffee-loader's processing. So my advice: unless you use react pure js api in your program, you shall use babel-loader after coffee-loader.

<script lang="coffee">
  React = require 'react'

  class Index extends React.Component
    render: ->
      `<div id="workspace">hi</div>`

  module.exports = Index;
</script>

And for my favorite Typescript, I have tried for a while, but I can't find a solution. Because Typescript need your files extensions in .ts||.tsx||.js||.jsx||.d.ts, so when it compile reactx file, some error will throw out. But I'll still try to search for other solutions :)

Use Pre-Processors of CSS

The same way of previous part.

<style lang="sass">
  #workspace {
    color: red;
  }
</style>

You can modify the sass loader of reactx config like next part. You can add PostCSS loader(autoprefixer etc.) in config, or you can use PostCSS feature.

Scoped CSS

reactx-loader support scoped CSS, we use webpack css loader's Local scope feature and syntax, you can get each <style> tag's export via reactx object(or alias you set in the config):

<script>
  const React = require('react')

  export default class Index extends React.Component {
    render() {
      return (
        <div id="workspace" className={reactx.style.scopedClassName}>hi</div>
      )
    }
  }
</script>

<style>
  #workspace:local(.scopedClassName){
    color: red;
  }
</style>

is transformed to

<div id="workspace" class="_3WESzpK5lIiEqK-okbQCNB">hi</div>
#workspace._3WESzpK5lIiEqK-okbQCNB{
  color: red;
}

If there are more than one <style> in your component, you can use reactx.styles[n] to get each tag's export.

PostCSS

reactx-loader support PostCSS, you can just add postcss option to the reactx webpack config(show in next part).

The postcss option accepts:

  • An array of plugins;
  • A function that returns an array of plugins;
  • An object that contains options to be passed to the PostCSS processor. This is useful when you are using PostCSS projects that relies on custom parser/stringifiers:
postcss: {
  plugins: [...], // list of plugins
  options: {
    parser: sugarss // use sugarss parser
  }
}

Configuration

You can add reactx in your webpack config:

var config = {
  reactx: {
    // loaders for each languages
    loaders: {
      js: 'babel',
      coffee: 'babel!coffee-loader',
      sass: 'style-loader!css-loader!autoprefixer?{browsers:["last 2 version", "> 1%"]}!sass'
    },
    // alias of `reactx` object
    alias: 'myreactx',
    // PostCSS options
    postcss: {
      plugins: [require('autoprefixer')({ browsers: ["last 2 version", "> 1%"] })], // list of plugins
      options: {
        parser: require('sugarss') // use sugarss parser
      }
    }
  }
}

Test

$ npm run test

Highlight and Linting

You can use html highlight for reactx or just use vue component :)

Q&A

Q: What's the benefit of this format?
A: A JS component must need 3 parts: JS-CSS-HTML, and JSX combines JS-HTML effectively, but when we need to combine styles to the JSX component, usually in 2 ways:

  1. require style file
  2. inline css

The first solution will make project file structure more complex. And the secend one will make the component unable to change style, you may need a lot of !important in your stylesheets.

So single file solution is a better way to manage your project files, and make it easy to extend.

Q: Why each component just have one script tag but can have many style tags?
A: Because we can't determine the export of each script part easily.

Next

  1. ~~Support hot-reload of webpack-dev-server.~~
  2. ~~Support scope style of component.~~
  3. ~~Support PostCSS.~~
  4. Support Typescript.
  5. ~~Support sourceMap.~~
  6. Support dependency injection.

License

MIT