Neater If and For for React JSX

Overview

JSX Control Statements

Build Status Coverage Status npm version

JSX-Control-Statements is a Babel plugin that extends JSX to add basic control statements: conditionals and loops. It does so by transforming component-like control statements to their JavaScript counterparts - e.g. <If condition={condition()}>Hello World!</If> becomes condition() ? 'Hello World!' : null.

Developers coming to React from using JavaScript templating libraries like Handlebars are often surprised that there's no built-in looping or conditional syntax. This is by design - JSX by is not a templating library, it's declarative syntactic sugar over functional JavaScript expressions. JSX Control Statements follows the same principle - it provides a component-like syntax that keeps your render functions neat and readable, but desugars into clean, readable JavaScript.

The only dependency JSX-Control-Statements relies upon is Babel. It is compatible with React and React Native.

☠️ Beware: This is a Babel plugin. It changes your code to other code - this means that some tooling that looks at your code (e.g. static analysis, typescript) is likely to not work. This plugin dates back to when JSX was daring and Javascript was more like playdough than meccano - if you want to stay on the well-trodden path stick with writing && and map.

Table of Contents

A Note on Transformation and Alternative Solutions

It appears to be pretty easy to implement conditionals as React component, which is underlined by the amount of libraries which have taken this approach. However, all of them suffer from the same major caveat: A React component will always evaluate all of its properties including the component body. Hence the following example will fail for those libraries:

<IfComponent condition={item}>{item.title}</IfComponent>

The error will be "Cannot read property 'title' of undefined", because React will evaluate the body of the custom component and pass it as "children" property to it. The only workaround is to force React into lazy evaluation by wrapping the statement in a function.

This is the reason why conditionals must be implemented in pure JS. JSX-Control-Statements only adds the syntactic sugar to write conditionals as component, while it transforms this "component" to a pure JS expression.

See Alternative Solutions for a more detailed comparison and pure JS solutions.

Installation

As a prerequisite you need to have Babel installed and configured in your project.

Install via npm:

  npm install --save-dev babel-plugin-jsx-control-statements

Then you only need to specify JSX-Control-Statements as Babel plugin, which you would typically do in your .babelrc.

{
  ...
  "plugins": ["jsx-control-statements"]
}

If you use the transform-react-inline-elements plugin, place it after jsx-control-statements:

{
  ...
  "plugins": ["jsx-control-statements", "transform-react-inline-elements"]
}

Babel can be used and configured in many different ways, so use this guide to pick a configuration which fits your setup.

Syntax

If Tag

Used to express the most simple conditional logic.

// simple
<If condition={ true }>
  <span>IfBlock</span>
</If>

// using multiple child elements and / or expressions
<If condition={ true }>
  one
  { "two" }
  <span>three</span>
  <span>four</span>
</If>

<If>

The body of the if statement only gets evaluated if condition is true.

Prop Name Prop Type Required
condition boolean

<Else /> (deprecated)

The else element has no properties and demarcates the else branch.

This element is deprecated, since it's bad JSX/XML semantics and breaks auto-formatting. Please use <Choose> instead.

Transformation

If statements transform to the ternary operator:

// before transformation
<If condition={test}>
  <span>Truth</span>
</If>;

// after transformation
{
  test ? <span>Truth</span> : null;
}

Choose Tag

This is an alternative syntax for more complex conditional statements. The syntax itself is XMLish and conforms by and large to JSTL or XSLT (the attribute is called condition instead of test):

<Choose>
  <When condition={ test1 }>
    <span>IfBlock</span>
  </When>
  <When condition={ test2 }>
    <span>ElseIfBlock</span>
    <span>Another ElseIfBlock</span>
    <span>...</span>
  </When>
  <Otherwise>
    <span>ElseBlock</span>
  </Otherwise>
</Choose>

// default block is optional; minimal example:
<Choose>
  <When condition={true}>
    <span>IfBlock</span>
  </When>
</Choose>

<Choose>

Acts as a simple container and only allows for <When> and <Otherwise> as children. Each <Choose> statement requires at least one <When> block but may contain as many as desired. The <Otherwise> block is optional.

<When>

Analog to <If>.

Prop Name Prop Type Required
condition boolean

<Otherwise>

<Otherwise> has no attributes and demarcates the else branch of the conditional.

Transformation

This syntax desugars into a (sequence of) ternary operator(s).

// Before transformation
<Choose>
  <When condition={test1}>
    <span>IfBlock1</span>
  </When>
  <When condition={test2}>
    <span>IfBlock2</span>
  </When>
  <Otherwise>
    <span>ElseBlock</span>
  </Otherwise>
</Choose>;

// After transformation
{
  test1 ? (
    <span>IfBlock1</span>
  ) : test2 ? (
    <span>IfBlock2</span>
  ) : (
    <span>ElseBlock</span>
  );
}

For Tag

Define <For> like so:

  // you must provide the key attribute yourself
  <For each="item" of={ this.props.items }>
    <span key={ item.id }>{ item.title }</span>
  </For>

  // using the index as key attribute is not stable if the array changes
  <For each="item" index="idx" of={ [1,2,3] }>
    <span key={ idx }>{ item }</span>
    <span key={ idx + '_2' }>Static Text</span>
  </For>
Prop Name Prop Type Required description
of array or collection(Immutable) the array to iterate over. This can also be a collection (Immutable.js) or anything on which a function with the name map can be called
each string a reference to the current item of the array which can be used within the body as variable
index string a reference to the index of the current item which can be used within the body as variable

Note that a <For> cannot be at the root of a render() function in a React component, because then you'd potentially have multiple components without a parent to group them which isn't allowed. As with <If>, the same rules as using Array.map() apply - each element inside the loop should have a key attribute that uniquely identifies it.

For Tag - Alternative Syntax

For those using Typescript, the previous syntax introduces several issues with undefined variables. To deal with this issue, we introduce a following syntax, inspired by tsx-control-statements.

// before transformation
<For
  of={items}
  body={(item, index) => (
    <span key={item.id}>
      {index}. {item.title}
    </span>
  )}
/>;

// after transformation
{
  items.map(function(item, index) {
    <span key={item.id}>
      {index}. {item.title}
    </span>;
  });
}
Prop Name Prop Type Required description
of array or collection(Immutable) the array to iterate over. This can also be a collection (Immutable.js) or anything on which a function with the name map can be called
body map expression expression of the map statement

With Tag

Used to assign values to local variables:

// simple
<With foo={ 47 } bar={ 'test' }>
  <span>{ foo }</span>
  <span>{ bar }</span>
</With>

// nested
<With foo={ 47 }>
  <With bar={ 'test' }>
    <span>{ foo }</span>
    <span>{ bar }</span>
  </With>
</With>
Prop Name Prop Type Required description
any name any type assign prop value to a local variable named by prop name

You may assign multiple variables with a single <With> statement. The defined variable is available only within the <With> block.

Transformation

<With> statements transform to immediately-invoked function expressions:

// before transformation
<With foo={47}>
  <span>{foo}</span>
</With>;

// after transformation
{
  (function(foo) {
    return <span>{foo}</span>;
  }.call(this, 47));
}

Linting

ESLint

Since all control statements are transformed via Babel, no require or import calls are needed. This in turn (well, and some more cases) would lead to warnings or errors by ESLint about undefined variables.

But fortunately you can use this ESLint plugin for JSX-Control-Statements to lint your code.

FlowType

There's still not a perfect solution for FlowType given that it doesn't provide a lot of plugin functionality (at least not yet). Flow definitions are available in jsx-control-statements.latest.flow.js for Flow >= 0.53, or jsx-control-statements.flow.js (deprecated) for Flow < 0.53 - you can pick which file to use like this. These will stop the type checker complaining about statements being undeclared. As of now there's no neat way to make the Flow checker recognise each attributes in <For> loops as a variable - the best workaround for now is something like:

render() {
  declare var eachVariable: string;

  return (
    <For each="eachVariable" of={["hello", "world"]}>
      {eachVariable}
    </For>
  );
}

If you know of a better way to work around this please let us know!

Alternative Solutions

Pure JavaScript

Since everything will be compiled to JavaScript anyway, you might prefer to stick to pure JavaScript solutions.

Conditionals

Probably the most common way for simple conditionals is the use of the && operator:

// simple if
{
  test && <span>true</span>;
}

// additionally the else branch
{
  !test && <span>false</span>;
}

The ternary operator is probably more elegant for if / else conditionals:

// simple
{
  test ? <span>true</span> : <span>false</span>;
}

// with multiple children
{
  test ? (
    [<span key="1">one</span>, <span key="2">two</span>]
  ) : (
    <span>false</span>
  );
}

Another approach is to refactor your conditional into a function:

testFunc(condition){
  if(condition) {
    return <span>true</span>;
  }
  else {
    return <span>false</span>
  }
}

render() {
  return (
    <div>{ testFunc(test) }</div>
  )
}

Loops

Not many options here:

{
  items.map(function(item) {
    <span key={item.id}>{item.title}</span>;
  });
}

Comparison

Arguments pro JSX-Control-Statements in comparison to pure JS solutions:

  • More intuitive and easier to handle for designers and people with non-heavy JS background
  • JSX does not get fragmented by JS statements
  • Better readability and neatness, but that probably depends on you

Cons:

  • Penalty on build-time performance
  • Depends on Babel 6
  • Some Babel configuration

React Components

There are a reasonable amount of React components for conditionals (e.g. react-if, which inspired this in the first place), JSX-Control-Statements is the only approach we know of that avoids execution of all branches (see the intro section), and there seems to be no other component-based solution to looping - while it would be possible to make a component that renders everything in props.children for every element of an array, you'd have to access the members of the array in that component instead of the one that uses it.

For more discussion on If in React by the react team, have a look at https://github.com/reactjs/react-future/issues/35.

To sum up:

  • Conditionals don't execute invalid paths
  • Loops with variable references to each element and index are made possible
  • No penalty on runtime performance
  • No import / require statements needed to use control statements
  • It works exactly as JSX is supposed to work: Plain syntactic sugar

Cons:

  • Depends on Babel 6
  • Some Babel configuration
  • Slightly longer build times
  • Requires an extra plugin to work with ESLint

What about Typescript?

There's a version for that by @KonstantinSimeonov!

Major Versions

  • 4.x.x is a pure Babel plugin supporting Babel >= 7.
  • 3.x.x is a pure Babel plugin supporting Babel >= 6.
  • 2.x.x was a Babel plugin supporting Babel >= 6, and a set of JSTransform visitors.
  • 1.x.x was a Babel plugin supporting Babel <= 5, and a set of JSTransform visitors.

This used to support both JSTransform and Babel, but as JSTransform is no longer maintained support was dropped. You can find the code for the JSTransform version at https://github.com/AlexGilleran/jsx-control-statements-jstransform.

I Want to Contribute!

Yay! Please read the Contributor's Guide.

Issues
  • With/let/def statement: define variables (suggestion/enhancement)

    With/let/def statement: define variables (suggestion/enhancement)

    There's this one piece of code where I want to run a method once and bind its result locally. It looks more or less like this:

    <For each="item" of={this.state.items}>
      (bunch of stuff)
      <Choose>
        <When condition={this.isExpanded(item)}>
          more stuff
        </When>
        <Otherwise>
          {((summary) => <Choose>
            <When condition={summary}>
              stuff that uses the summary variable
            </When>
            <Otherwise>
              also uses the variable
            </Otherwise>
          </Choose>)(this.getSummaryFields(item))}
        </Otherwise>
      </Choose>
    </For>
    

    Kind of makes my eyes bleed, and it's hard to see where the “variable” comes from.

    (Sorry if the example is not as minimal as possible, but I wanted to illustrate why I want it to begin with; if it wasn't inside a <For> I could just define it as a const on top of the render method.)

    Drawing from the ancient template languages of my young days…

        <Let summary={this.getSummaryFields(item)}>
          <Choose>
            <When condition={summary}>
              stuff that uses the summary variable
            </When>
            <Otherwise>
              also uses the variable
            </Otherwise>
          </Choose>
        </Let>
    

    (Or you could call it <With> or <Def> or a number of other things. Not <Const> though, that would make it look like it's doing something completely different.)

    A possible objection is that using prop names this way is iffy, and I guess some are already uncomfortable with the each and index props in <For>. An alternative, arguably more React-y:

    <With const={{summary: this.getSummaryFields(item)}}>
    

    It would expand of course to pretty much what I have on top, an in-place function, except no need for trickery with passing things as arguments.

    // for clarity, allow me the poetic license of not expanding the other jsx
    {(function() {
      const summary = this.getSummaryFields(item);
      return (
        <Choose>
          ...
        </Choose>
      );
    })()}
    
    

    Known issue: expanding it that way means it's limited to containing exactly one child.

    enhancement 
    opened by lalomartins 23
  • Support eslint

    Support eslint

    I appreciate this module and its various connectors. I use it well in an isomorphic app builded with gulp/webpack/babel.

    The only problem I have is the missing support of the module by lint tools, here is the output with eslint enhance with the react plugin:

    if.jsx
      74:9  error  'If' is not defined  react/jsx-no-undef
    
    for.jsx
      51:11  error  'For' is not defined      react/jsx-no-undef
      53:19  error  "item" is not defined  no-undef
      54:23  error  "item" is not defined  no-undef
    

    I can easily add an exception for If, Else and For but I can't skip the warning for the iterator variable (<For each="item" ...).

    Have you faced this problem before ? Is there an eslint plugin (existing or planned) ?

    enhancement 
    opened by ncuillery 17
  • Improved If syntax including ElseIf support

    Improved If syntax including ElseIf support

    Since I wasn't happy with the choose syntax - hey, we should do better than JSP's! - I thought some more about how to realize the expected syntax. As it turns out Babel is just too powerful to not allow for that:

    <If condition={true}>
      ...
    </If>
    <ElseIf condition={false}>
      ...
    </ElseIf>
    <Else>
      ...
    </Else>
    

    So today, after a fruitful discussion with a colleague, I learned how to traverse paths within Babel to make this happen. I will open a PR soon.

    opened by texttechne 17
  • How to use it in Typescript

    How to use it in Typescript

    How to use it in Typescript,please show me some examples

    opened by fsx950223 11
  • Allow for empty control statements

    Allow for empty control statements

    There seems to be no good reason why control statements must have child elements.

    opened by texttechne 10
  • Support For over objects

    Support For over objects

    I was expecting For to be able to iterate over objects and their keys/values, but it doesn't look like that's the case. Could you add support for this?

    opened by NullEntity 10
  • How can I import this?

    How can I import this?

    Dose it use es6 or common js?

    opened by DeanKamali 9
  • Added better Typescript support

    Added better Typescript support

    Hi, this pull request adds the same level of typescript support as tsx-control-statements. Sorry for the READMe.md, looks like my VSCODe reformatted it to its own format, if you wish I can undo those changes and try with the original format.

    opened by tomitrescak 9
  • Choose / Switch syntax instead of ElseIf and Else

    Choose / Switch syntax instead of ElseIf and Else

    Considering the nesting of <ElseIf> and <Else> they're just markers and cannot be indented automatically by IDE's. Correct indentation would look like this:

    <If condition={x}>
      IfBlock
      <ElseIf condition={y} />
      ElseIfBlock
      <Else />
      ElseBlock
    </If>
    

    So what about a choose statement (JSP style):

    <choose>
      <when condition={x}>
        IfBlock
      </when>
      <when condition={y}>
        ElseIfBlock
      </when>
      <otherwise>
        Else
      </otherwise>
    </choose>
    

    Or (misusing) switch style:

    <switch>
      <case condition={x}>
        IfBlock
      </case>
      <case condition={y}>
        ElseIfBlock
      </case>
      <default>
        Else
      </default>
    </choose>
    

    Maybe we should reserve the use of the switch statement instead of "abusing" the syntax. On the other hand we could also allow for an optional parameter for switch which allows exactly that, e.g. expression.

    <switch expression={x}>
      <case condition={12}>
        IfBlock
      </case>
      <case condition={"Never mind"}>
        ElseIfBlock
      </case>
      <default>
        Else
      </default>
    </choose>
    

    In any case I would tend to make otherwise / default optional, so that users are not forced to switch between if/else and switch syntax. Implementation-wise we would simply make use of the ternary operator. @AlexGilleran what do you think?

    enhancement 
    opened by texttechne 9
  • <If> creates <span> if not executed within <For> loop

    creates if not executed within loop

    If the <If ...> statement is not executed, then an empty <span> is rendered, due to the fact that an empty string is returned: See https://github.com/AlexGilleran/jsx-control-statements/blob/master/jstransform.js#L79

    Would be great if you would consider changing this empty string to null, so that nothing is rendered.

    Problematic cases are those where span tags are not allowed, e.g. within <tr> ord <td>. React throws warnings in this case...

    bug 
    opened by texttechne 9
  • Bump glob-parent from 5.1.0 to 5.1.2

    Bump glob-parent from 5.1.0 to 5.1.2

    Bumps glob-parent from 5.1.0 to 5.1.2.

    Release notes

    Sourced from glob-parent's releases.

    v5.1.2

    Bug Fixes

    v5.1.1

    Bug Fixes

    Changelog

    Sourced from glob-parent's changelog.

    5.1.2 (2021-03-06)

    Bug Fixes

    6.0.0 (2021-05-03)

    ⚠ BREAKING CHANGES

    • Correct mishandled escaped path separators (#34)
    • upgrade scaffold, dropping node <10 support

    Bug Fixes

    • Correct mishandled escaped path separators (#34) (32f6d52), closes #32

    Miscellaneous Chores

    • upgrade scaffold, dropping node <10 support (e83d0c5)

    5.1.1 (2021-01-27)

    Bug Fixes

    Commits
    • eb2c439 chore: update changelog
    • 12bcb6c chore: release 5.1.2
    • f923116 fix: eliminate ReDoS (#36)
    • 0b014a7 chore: add JSDoc returns information (#33)
    • 2b24ebd chore: generate initial changelog
    • 9b6e874 chore: release 5.1.1
    • 749c35e ci: try wrapping the JOB_ID in a string
    • 5d39def ci: attempt to switch to published coveralls
    • 0b5b37f ci: put the npm step back in for only Windows
    • 473f5d8 ci: update azure build images
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.15 to 4.17.21

    Bump lodash from 4.17.15 to 4.17.21

    Bumps lodash from 4.17.15 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump handlebars from 4.7.3 to 4.7.7

    Bump handlebars from 4.7.3 to 4.7.7

    Bumps handlebars from 4.7.3 to 4.7.7.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.7 - February 15th, 2021

    • fix weird error in integration tests - eb860c0
    • fix: check prototype property access in strict-mode (#1736) - b6d3de7
    • fix: escape property names in compat mode (#1736) - f058970
    • refactor: In spec tests, use expectTemplate over equals and shouldThrow (#1683) - 77825f8
    • chore: start testing on Node.js 12 and 13 - 3789a30

    (POSSIBLY) BREAKING CHANGES:

    • the changes from version 4.6.0 now also apply in when using the compile-option "strict: true". Access to prototype properties is forbidden completely by default, specific properties or methods can be allowed via runtime-options. See #1633 for details. If you are using Handlebars as documented, you should not be accessing prototype properties from your template anyway, so the changes should not be a problem for you. Only the use of undocumented features can break your build.

    That is why we only bump the patch version despite mentioning breaking changes.

    Commits

    v4.7.6 - April 3rd, 2020

    Chore/Housekeeping:

    Compatibility notes:

    • Restored Node.js compatibility

    Commits

    v4.7.5 - April 2nd, 2020

    Chore/Housekeeping:

    • Node.js version support has been changed to v6+ Reverted in 4.7.6

    Compatibility notes:

    • Node.js < v6 is no longer supported Reverted in 4.7.6

    Commits

    v4.7.4 - April 1st, 2020

    Chore/Housekeeping:

    Compatibility notes:

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump y18n from 4.0.0 to 4.0.1

    Bump y18n from 4.0.0 to 4.0.1

    Bumps y18n from 4.0.0 to 4.0.1.

    Changelog

    Sourced from y18n's changelog.

    Change Log

    All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

    5.0.5 (2020-10-25)

    Bug Fixes

    5.0.4 (2020-10-16)

    Bug Fixes

    • exports: node 13.0 and 13.1 require the dotted object form with a string fallback (#105) (4f85d80)

    5.0.3 (2020-10-16)

    Bug Fixes

    • exports: node 13.0-13.6 require a string fallback (#103) (e39921e)

    5.0.2 (2020-10-01)

    Bug Fixes

    5.0.1 (2020-09-05)

    Bug Fixes

    5.0.0 (2020-09-05)

    ⚠ BREAKING CHANGES

    • exports maps are now used, which modifies import behavior.
    • drops Node 6 and 4. begin following Node.js LTS schedule (#89)

    Features

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Undefined is not a function with new JSX transform with react 17

    Undefined is not a function with new JSX transform with react 17

    I have a multiple errors when trying use several react nodes inside overwise or if block image

    All work properly If I wrap this nodes to Fragment image

    opened by romanlex 3
  • React-Native:Installation-Guide

    React-Native:Installation-Guide

    In an react-native environment I have no .babelrc-file only a babel.config-file and a metro-configuration-guide

    opened by ffischer1984 2
  • Support babel-plugin-macros

    Support babel-plugin-macros

    babel-plugin-macros are now enabled by default in react-scripts >= 2. Could you add support for macros to jsx-control-statements?

    opened by kbzowski 3
  • @babel/runtime

    @babel/runtime": "^7.0.0-beta.44

    Hi

    Im just update my meteor app to 1.7 and it apreas that the "@babel/runtime": "^7.0.0-beta.44" is not compatible with jsx-control-statements, this is the error I get ` While processing files with ecmascript (for target os.osx.x86_64):

    /Users/pgiani/.meteor/packages/ecmascript/.0.10.9.lh7yb3.pdla++os+web.browser+web.cordova/plugin.compile-ecmascript.os/npm/node_modules/meteor/babel-compiler/node_modules/@babel/types/lib/definitions/utils.js:128:13: Property arguments[5] of CallExpression expected node to be of a type ["Expression","SpreadElement","JSXNamespacedName"] but instead got "JSXSpreadChild" at validate at Object.compile (packages/babel-compiler.js:51:29) at packages/babel-compiler.js:184:22 at Function.time (/tools/tool-env/profile.js:305:10) at profile (packages/babel-compiler.js:232:20) at BabelCompiler.BCp.processOneFileForTarget (packages/babel-compiler.js:183:20) at BabelCompiler. (packages/babel-compiler.js:111:26) at Array.forEach () at BabelCompiler.BCp.processFilesForTarget (packages/babel-compiler.js:110:14) `

    my .babelrc { "plugins": ["transform-class-properties", "jsx-control-statements"] }

    Any ideas on why is the error occurring, thanks

    opened by pgiani 4
  • Feature request: Render-prop transformation.

    Feature request: Render-prop transformation.

    Currently, jsx-control-statements has <With>, and it is great and all (I've never used it 😆), but I believe the purpose of this tool is to help developers clean up their JSX, and it is mostly used with React.

    Lately in React, render-props have taken the world by storm, especially with React about to drop the new Context API in only a few days.

    example usage:

    1_xhcieuad1g1rpv0c8myzva

    I feel as though the hideousness of render-props would be a fantastic thing for jsx-control-statements to mask.

    Here's an example of what will become more of a common pattern:

    jjj

    And here is what could be: (Mind you, the concept is in alpha!)

    skdaksdka

    The deviation is not that great, no. But it is still more aesthetically pleasing, and both of these samples were run through prettier, so they represent what would be almost globally accepted. Note that prettier wouldn't allow the destructuring to live on a single line because it is quite opinionated of object-like syntax in function declarations, but less-so inside props.

    💪

    opened by colshacol 4
  • FlowTyped Declarations

    FlowTyped Declarations

    In usage with Flow, I get errors like this:

    screen shot 2018-01-09 at 12 14 30 am

    I am wondering that, since the values passed into condition are negated to truthy or falsey, shouldn't it accept any type?

    Apologies if this question belongs elsewhere. If so, please do direct me.

    opened by colshacol 5
Static AST checker for a11y rules on JSX elements.

Get professional support for eslint-plugin-jsx-a11y on Tidelift eslint-plugin-jsx-a11y Static AST checker for accessibility rules on JSX elements. Rea

null 2.6k Jan 11, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.4k Jan 13, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.4k Jan 21, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.4k Jan 15, 2022
Chrome extension for improving and optimizing performance in React applications (Gatsby and Next.js compatible).

React Performance Tool Nominated for React Open Source Awards 2020 Reactime is a performance and debugging tool for React developers (Beta version for

OSLabs 1.4k Jan 14, 2022
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.4k Jan 17, 2022
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Carte Blanche IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore. Carte Blanche is an iso

Carte Blanche 1.5k Dec 29, 2021
🎭A simple and effective Text Input with mask for ReactNative on iOS and Android. Includes obfuscation characters feature.

React Native Mask Input A simple and effective Text Input with mask for ReactNative on iOS, Android, and Web. No fancy stuff, it's basically a JavaScr

Caio Quirino Medeiros 59 Jan 12, 2022
Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries

prom-react Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries Scope and purpose The main objective of th

Cabify 4 Jan 4, 2022
An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

This project has migrated to github.com/facebook/react The source code for the v3 of the extension can be found in the v3 branch. To build the v3 brow

Facebook 11k Jan 16, 2022
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library Simple and complete React DOM testing utilities that encourage good testing practices. Read The Docs | Edit the docs Table of Co

Testing Library 15.8k Jan 19, 2022
Chai.js assertions and convenience functions for testing React Components with enzyme

chai-enzyme Chai.js assertions for enzyme. Table of Contents Installation Setup Debug output in assertion exceptions Assertions 1. checked() 1. classN

Product Hunt 794 Sep 4, 2021
Create, isolate and test modular UI components in React.

ui-harness Isolate, test and document modular UI with React using familiar describe/it testing semantics. http://uiharness.com Quick Start (1-minute)

Phil Cockfield 269 Dec 24, 2021
Plugin for http://unexpected.js.org to enable testing the full React virtual DOM, and also the shallow renderer

unexpected-react Plugin for unexpected to allow for testing the full virtual DOM, and against the shallow renderer (replaces unexpected-react-shallow)

Dave Brotherstone 184 Dec 5, 2021
A set of tools to facilitate react-redux development and decouple logic from compontents

react-redux-api-tools This project provides a middleware and a request helper to streamline react-redux data fetching. Installing Just run npm install

labcodes 36 Jan 1, 2022
⚛️ React testing made easy. Supports DOM and custom renderers.

Rut Rut is a DOM-less React testing library that aims to be lightweight, encourage great testing practices, and reduce flakiness and code smells. It i

Miles Johnson 14 Sep 2, 2021
A demo of LaunchDarkly, React, and Vite, using the Pokémon API!

Pokémon Feature Flags demo Here's a demo for integrating feature flags into a React project! Built with React, Vite, the PokeAPI, and LaunchDarkly! Wh

Cassidy Williams 15 Jan 5, 2022
Utopia is an integrated design and development environment for React.

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It's early software, but you can try it today, look at an example project, or read about it on our blog!

Utopia 3.3k Jan 20, 2022
Visually build pages and frontends, lightning-fast. Plug into your React codebase. Empower anyone to ship.

Visually build pages and frontends, lightning-fast. Plug into your React codebase. Empower anyone to ship.

Plasmic 1k Jan 17, 2022