How to use @babel/helper-plugin-utils - 10 common examples

import { declare } from '@babel/helper-plugin-utils';
import jsx from '@babel/plugin-syntax-jsx';
import helper from '@babel/helper-builder-react-jsx';
import * as t from "@babel/types";

const plugin = declare((api, options) => {
    api.assertVersion(7);

    const THROW_IF_NAMESPACE =
        options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;

    const PRAGMA_DEFAULT = options.pragma || "Easycanvas.createElement";
    const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "window.Easycanvas ? window.Easycanvas.View : View";

    const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
    const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;

    // returns a closure that returns an identifier or memberExpression node
    // based on the given id
    const createIdentifierParser = (id) => () => {
        return id
            .split('.')

constructor() {
    const result = {
      props: {}
    }
    this.result = result

    this.plugin = declare(babel => {
      babel.assertVersion(7)

      const visitProps = {
        JSXAttribute(path) {
          const key = path.node.name.name
          // only handles string/static props
          const value = path.node.value.value
          result.props[key] = value
        }
      }

      return {
        visitor: {
          JSXOpeningElement(path) {
            // only parse root-level element
            if (result.type) return

constructor() {
    const exports = [];
    this.state = { exports: exports };
    this.plugin = declare(api => {
      api.assertVersion(7);

      return {
        visitor: {
          ExportNamedDeclaration(path) {
            const name = path.get("declaration.declarations.0").node.id.name;

            // TODO: make this check an option to the babel plugin if we need to
            // hoist any other exports.
            if (name === "pageQuery") {
              const pageQueryExport = path.hub.file.code.slice(
                path.node.start,
                path.node.end
              );
              exports.push(pageQueryExport);
              path.remove();

import { declare } from '@babel/helper-plugin-utils';
import { preset, PresetOptions } from './preset';
/**
 * Export a function to declare this preset.
 *
 * It takes options from userland and passes to @babel/preset-env
 */
module.exports = declare((api, opts) => {
	// Check if version is 7
	api.assertVersion(7);

	// Give back the babel config based on options
	return preset(opts as PresetOptions);
});

constructor() {
    const nodes = []
    this.state = {nodes}

    this.plugin = declare(api => {
      api.assertVersion(7)

      return {
        visitor: {
          ExportDefaultDeclaration(path) {
            const {start} = path.node
            nodes.push({type: 'export', start, default: true})
          },
          ExportNamedDeclaration(path) {
            const {start} = path.node
            nodes.push({type: 'export', start})
          },
          ImportDeclaration(path) {
            const {start} = path.node

            // Imports that are used in exports can end up as

/*
  This file contains the babel plugins that
  are recommended for usage with cosmos
*/

const { declare } = require('@babel/helper-plugin-utils')

module.exports = declare(api => {
  api.assertVersion(7)

  return {
    presets: [
      [require('@babel/preset-env'), { modules: false }],
      require('@babel/preset-typescript'),
      require('@babel/preset-react')
    ],
    plugins: [
      require('@babel/plugin-proposal-class-properties'),
      require('@babel/plugin-proposal-object-rest-spread')
    ]
  }
})

constructor() {
    const exports = {};
    this.state = { exports: exports };
    this.plugin = declare(api => {
      api.assertVersion(7);

      return {
        visitor: {
          ExportNamedDeclaration(path) {
            const declaration = path.node.declaration;

            if (
              declaration &&
              declaration.type === "VariableDeclaration" &&
              declaration.kind === "const"
            ) {
              declaration.declarations.forEach(declarator => {
                try {
                  exports[declarator.id.name] = JSON5.parse(
                    generate(declarator.init).code

import { extname, dirname, parse as parseFilename } from 'path';
import { readFileSync } from 'fs';
import { parse } from '@babel/parser';
import { declare } from '@babel/helper-plugin-utils';
import resolve from 'resolve';

import optimize from './optimize';
import escapeBraces from './escapeBraces';
import transformSvg from './transformSvg';
import fileExistsWithCaseSync from './fileExistsWithCaseSync';

let ignoreRegex;

export default declare(({
  assertVersion,
  template,
  traverse,
  types: t,
}) => {
  assertVersion(7);

  const buildSvg = ({
    IS_EXPORT,
    EXPORT_FILENAME,
    SVG_NAME,
    SVG_CODE,
    SVG_DEFAULT_PROPS_CODE,
  }) => {
    const namedTemplate = `
      var SVG_NAME = function SVG_NAME(props) { return SVG_CODE; };

case "TSQualifiedName":
    case "TSExpressionWithTypeArguments":
    case "TSTypeQuery":
      return true;
    default:
      return false;
  }
}

interface State {
  programPath: any;
}

const PARSED_PARAMS = new WeakSet();

export default declare((api, { jsxPragma = "React" }) => {
  api.assertVersion(7);

  const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;

  return {
    name: "transform-typescript",
    inherits: syntaxTypeScript,

    visitor: {
      //"Pattern" alias doesn't include Identifier or RestElement.
      Pattern: visitPattern,
      Identifier: visitPattern,
      RestElement: visitPattern,

      Program(path, state: State) {
        state.programPath = path;

import { declare } from "@babel/helper-plugin-utils";
import { template, types as t } from "@babel/core";

export default declare((api, options) => {
  api.assertVersion(7);
  const { loose } = options;

  let helperName = "taggedTemplateLiteral";
  if (loose) helperName += "Loose";

  /**
   * This function groups the objects into multiple calls to `.concat()` in
   * order to preserve execution order of the primitive conversion, e.g.
   *
   *   "".concat(obj.foo, "foo", obj2.foo, "foo2")
   *
   * would evaluate both member expressions _first_ then, `concat` will
   * convert each one to a primitive, whereas
   *
   *   "".concat(obj.foo, "foo").concat(obj2.foo, "foo2")