oliviertassinari / babel-plugin-react-remove-properties Goto Github PK

I have a react styled component that uses a default prop but the property is not getting removed. My standard react components are getting the property removed correctly. The code is like:

const MyComponent = styled.a`
color: green;
MyComponent.defaultProps = { 'data-test-id': 'my-component' };

Hey,

it would be great to have an option to limit removing some properties only from certain JSX elements, like removing data-test only from <div> elements, but not from <span> elements (yes, this example makes no sense, in our usecase it makes more sense).

Version 2.6.1 of eslint-plugin-import just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hello
I struggled with this package for a couple of hours, but it doesn't work in many cases. this is my .babelrc config:

{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    [
      "system-import-transformer",
      {
        "amd": { "useRequireEnsure": true },
        "syntax": {
          "import": true,
          "system-import": false
        }
      }
    ]
  ],
  "env": {
    "production": {
      "plugins": [["react-remove-properties", { "properties": ["data-test"] }]]
    }
  }
}

also, I tried this:

{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    [
      "system-import-transformer",
      {
        "amd": { "useRequireEnsure": true },
        "syntax": {
          "import": true,
          "system-import": false
        }
      }
    ],
    ["react-remove-properties", { "properties": ["data-test"] }]
  ]
}

both configurations don't work. Have I missed something?

They will be passed as an option to this plugins.
Right now, data-test is hard coded.

Is putting a /pattern/ in a .babelrc actually valid?

Throwing up on me, however I'm using a 6.* family of Babel

It does not throw up if I just use strings

As in:

"production": {
  "plugins": [
    ["react-remove-properties", {"properties": [/data-test.*$/]}]
  ]
}

Module build failed: SyntaxError: /home/jared/workspace/platform/portal/.babelrc: Error while parsing JSON - Unrecognized comment at line 17 column 72 of the JSON5 data. Still to read: "my-suffix-expression"

The example of providing additional configuration to the plugin is not published on npm. I don't know if there are any actual code changes that aren't published, but maybe it's worthwhile pushing a patch release so the documentation is in sync?

.babelrc:

{
  "presets": ["stage-1", "es2015", "react"],
  "plugins": [
    ["babel-plugin-transform-es2015-classes", { "loose": true }],
    "transform-proto-to-assign",
    "react-remove-properties"
  ]
}

I'm using latest Babel 6.2.0,
And I get this error when doing webpack:

TypeError: Plugin is not a function
    at module.exports (/Users/ollivaris/programming/nextgen/node_modules/babel-plugin-react-remove-properties/lib/index.js:6:10)
    at Function.memoisePluginContainer (/Users/ollivaris/programming/nextgen/node_modules/babel-core/lib/transformation/file/options/option-manager.js:127:13)
    at Function.normalisePlugin (/Users/ollivaris/programming/nextgen/node_modules/babel-core/lib/transformation/file/options/option-manager.js:161:32)
    at /Users/ollivaris/programming/nextgen/node_modules/babel-core/lib/transformation/file/options/option-manager.js:197:30
    at Array.map (native)
    at Function.normalisePlugins (/Users/ollivaris/programming/nextgen/node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
    at OptionManager.mergeOptions (/Users/ollivaris/programming/nextgen/node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
    at OptionManager.addConfig (/Users/ollivaris/programming/nextgen/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
    at OptionManager.findConfigs (/Users/ollivaris/programming/nextgen/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:16)
    at OptionManager.init (/Users/ollivaris/programming/nextgen/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)

Any idea what's wrong in my setup?

.babelrc

{
  "env": {
    "production": {
      "plugins": ["react-remove-properties"]
    } 
  },
  "presets": ["react", "es2015", "stage-2"]
}

code:

render: function(){
      console.log(process.env.NODE_ENV, process.env.BABEL_ENV)
      return (
        <div className="canvas" data-test="quest">

Those console.logs confirm that both the default Babel_env and Node_env are set to production. I am setting the environment via webpack

I realize I don't need to set them both

plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
      'process.env.BABEL_ENV': '"production"'
    })
  ]

No matter what I do or how I mess with the configuration. data-test="quest" never gets removed

running Babel v6.4.0

Thanks for creating this! Instead of an array of values; have you ever considered adding support for regex expressions as well? A lot of our selectors (for Cypress) start with data-test- but then vary based on their implementation. We have a few hundred; so it'd be great if we could allocate a namespace to be removed in prod since they are used exclusively for testing.

Thanks again!

Version 2.7.0 of eslint-plugin-import just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴