How to use @babel/plugin-syntax-jsx - 9 common examples

function cssZeroBabelPlugin(babel) {
  const {types} = babel;
  return {
    name: 'css-zero',
    inherits: jsx.default,
    visitor: {
      Program: {
        enter(path, state) {
          state.styleSheet = new StyleSheet();
          // We need our transforms to run before anything else
          // So we traverse here instead of a in a visitor
          path.traverse({
            TaggedTemplateExpression: p => TaggedTemplateExpression(p, state, types),
          });
        },
        exit(_path, state) {
          const {styleSheet} = state;

          // Store the result as the file metadata
          state.file.metadata = {cssZero: styleSheet};
        },

/* @flow */

const { join } = require('path');
const syntax = require('@babel/plugin-syntax-jsx').default;

/*::
type State = {
  required: boolean;
  items: Array
}
*/

/* ::
type Options = {
  target?: 'linaria' | 'styled-components' | 'auto' | 'none',
}
*/

module.exports = function(
  babel /*: any */,

module.exports = function (babel) {
  var t = babel.types

  return {
    inherits: require('@babel/plugin-syntax-jsx').default,
    visitor: {
      JSXNamespacedName (path) {
        throw path.buildCodeFrameError(
          'Namespaced tags/attributes are not supported. JSX is not XML.\n' +
          'For attributes like xlink:href, use xlinkHref instead.'
        )
      },
      JSXElement: {
        exit (path, file) {
          // turn tag into createElement call
          var callExpr = buildElementCall(path.get('openingElement'), file)
          if (path.node.children.length) {
            // add children array as 3rd arg
            callExpr.arguments.push(t.arrayExpression(path.node.children))
            if (callExpr.arguments.length >= 3) {
              callExpr._prettyCall = true

const syntaxJsx = require('@babel/plugin-syntax-jsx').default;

const importSource = '@vue/composition-api';

const hasJSX = (t, path) => {
    const JSXChecker = {
        hasJSX: false
    };
    path.traverse({
        JSXElement() {
            this.hasJSX = true
        }
    }, JSXChecker);
    return JSXChecker.hasJSX;
};

// remove `var h = this.$createElement;` in `setup()`

'use strict';
var jsx = require('@babel/plugin-syntax-jsx').default;
var flags = require('./flags');
var t = require('@babel/types');
var svgAttributes = require('./attrsSVG');
var VNodeTypes = require('./vNodeTypes');
var VNodeFlags = flags.VNodeFlags;
var ChildFlags = flags.ChildFlags;

function isComponent(name) {
  return name.charAt(0).toUpperCase() === name.charAt(0);
}

function isNullOrUndefined(obj) {
  return obj === undefined || obj === null;
}

function isFragment(name) {

const fs = require('fs');
const path = require('path');
const t = require('@babel/types');
const template = require('@babel/template').default;
const syntaxJsx = require('@babel/plugin-syntax-jsx').default;
const {addDefault} = require('@babel/helper-module-imports');
const {stripIndent} = require('common-tags');
const stringHash = require('string-hash');

const utils = require('@reshadow/utils');

const reshadowPostcss = require('./postcss');

const buildClassName = template.expression(`
    NAME.styles["ELEMENT"]
`);

const toObjectExpression = obj =>
    t.objectExpression(
        Object.entries(obj).map(([key, value]) =>
            t.objectProperty(

const fs = require('fs');
const path = require('path');
const t = require('@babel/types');
const template = require('@babel/template').default;
const syntaxJsx = require('@babel/plugin-syntax-jsx').default;
const {addDefault} = require('@babel/helper-module-imports');
const {stripIndent} = require('common-tags');
const stringHash = require('string-hash');

const utils = require('@reshadow/utils');
const {KEYS} = require('@reshadow/core');

const buildClassName = template.expression(`
    NAME.${KEYS.__styles__}["ELEMENT"]
`);

const toObjectExpression = obj =>
    t.objectExpression(
        Object.entries(obj).map(([key, value]) =>
            t.objectProperty(
                t.stringLiteral(key),

pragma = 'jsx2.createElement',
    pragmaFrag = 'jsx2.Fragment',
    pragmaTemplate = 'jsx2.templateResult',
  } = options;

  if (minimalJson && !json) {
    throw new Error('"minimalJson" option requires "json" to be true');
  }
  if (taggedTemplate && !json) {
    throw new Error('"taggedTemplate" option requires "json" to be true');
  }

  return {
    name: 'transform-jsx2',
    inherits: jsx.default,

    visitor: {
      'JSXElement|JSXFragment'(path) {
        path.replaceWith(buildTemplate(path));
      },
    },
  };

  function buildTemplate(path) {
    if (isComponent(path)) {
      return buildElement(path);
    }

    const program = path.findParent(p => p.isProgram());

    const expressions = [];

exports.default = babel => {
    return {
        name: "ast-transform",
        inherits: plugin_syntax_jsx_1.default,
        visitor: {
            JSXElement: (path, { opts }) => {
                if (doNotTraverse)
                    return;
                if ("moduleName" in opts)
                    exports.globalOptions.moduleName = opts.moduleName;
                if ("delegateEvents" in opts)
                    exports.globalOptions.delegateEvents = opts.delegateEvents;
                const result = generate_1.generateHTMLNode(path, path.node, opts);
                if (result.id) {
                    ast_1.createTemplate(path, result);
                    if (!result.exprs.length && result.decl.declarations.length === 1)
                        path.replaceWith(result.decl.declarations[0].init);
                    else
                        path.replaceWithMultiple([result.decl].concat(result.exprs, t.expressionStatement(result.id)));
                }