or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

config-loading.mdcore-preset.mddependencies.mdhook-optimization.mdindex.mdreact-preset-and-utilities.md
tile.json

react-preset-and-utilities.mddocs/

React Preset Export and Utilities

Additional exports from babel-preset-gatsby for specialized use cases including direct access to @babel/preset-react and path serialization utilities.

Capabilities

React Preset Export

Direct export of @babel/preset-react for cases where you need React transformations separately from the full Gatsby preset.

/**
 * Direct export of @babel/preset-react
 * @type {BabelPreset} @babel/preset-react preset with all its functionality
 */
const babelPresetReact;

Usage Examples:

// ES Module import
import babelPresetReact from "babel-preset-gatsby/babel-preset-react";

// CommonJS require
const babelPresetReact = require("babel-preset-gatsby/babel-preset-react");

// Use in Babel configuration
{
  "presets": [
    ["babel-preset-gatsby/babel-preset-react", {
      "runtime": "automatic"
    }]
  ]
}

Use Cases

The React preset export is useful when you need:

  • React transformations without the full Gatsby preset configuration
  • Custom Babel configurations that use React preset separately
  • Micro-frontends or libraries that need React support without Gatsby-specific optimizations
  • Testing environments with simplified Babel configurations
// Example: Custom preset that uses React separately
function customPreset() {
  return {
    presets: [
      ["@babel/preset-env", { targets: "defaults" }],
      ["babel-preset-gatsby/babel-preset-react", { runtime: "automatic" }]
    ],
    plugins: [
      // Custom plugins without Gatsby-specific ones
    ]
  };
}

Path Serialization Utilities

Utility functions for cleaning and serializing file paths, primarily used in test environments for consistent path output across different systems.

Test Function

Determines if a path value should be serialized for cleaner output.

/**
 * Test if a path should be serialized for cleaner test output
 * @param {unknown} val - Value to test (typically a string path)
 * @returns {boolean} True if value is a string path that contains node_modules
 */
function test(val);

Usage Examples:

import { test } from "babel-preset-gatsby/utils/path-serializer";

// Test various values
console.log(test("/project/node_modules/package/file.js")); // true
console.log(test("/project/src/file.js")); // false
console.log(test(123)); // false
console.log(test(null)); // false

// Use in custom serializer
function customSerializer(val) {
  if (test(val)) {
    return print(val, JSON.stringify);
  }
  return JSON.stringify(val);
}

Print Function

Serializes a path by cleaning node_modules references for consistent test output.

/**
 * Serialize a path by cleaning node_modules references
 * @param {string} val - Path string to serialize
 * @param {function} serialize - Serialization function to apply after cleaning
 * @returns {string} Cleaned path string with node_modules references normalized
 */
function print(val, serialize);

Usage Examples:

import { print } from "babel-preset-gatsby/utils/path-serializer";

// Basic usage
const cleanPath = print(
  "/Users/dev/project/node_modules/react/index.js",
  (path) => path
);
// Result: "<PROJECT_ROOT>/node_modules/react/index.js"

// With JSON serialization
const serializedPath = print(
  "/project/node_modules/babel-core/lib/index.js",
  JSON.stringify
);
// Result: "\"<PROJECT_ROOT>/node_modules/babel-core/lib/index.js\""

// Custom serialization
const customSerialized = print(
  "/abs/path/project/node_modules/pkg/file.js",
  (path) => `PATH: ${path}`
);
// Result: "PATH: <PROJECT_ROOT>/node_modules/pkg/file.js"

Path Cleaning Behavior

The utilities clean paths by:

  1. Splitting on node_modules/: Finds the node_modules boundary
  2. Preserving relative structure: Keeps the package and file structure after node_modules
  3. Normalizing root: Replaces absolute paths with <PROJECT_ROOT>
  4. Using forward slashes: Ensures consistent path separators

Cleaning Examples:

// Input paths and their cleaned versions:

// Linux/macOS absolute path
"/home/user/my-project/node_modules/react/index.js"
// → "<PROJECT_ROOT>/node_modules/react/index.js"

// Windows absolute path  
"C:\\Projects\\my-app\\node_modules\\lodash\\index.js"
// → "<PROJECT_ROOT>/node_modules/lodash/index.js"

// Nested node_modules (monorepo)
"/project/node_modules/package/node_modules/dep/file.js"
// → "<PROJECT_ROOT>/node_modules/dep/file.js"

// No node_modules (unchanged)
"/project/src/components/Button.js"
// → "/project/src/components/Button.js"

Integration with Jest

These utilities are commonly used with Jest snapshot testing for consistent path serialization:

// jest.config.js
module.exports = {
  snapshotSerializers: [
    {
      test: require("babel-preset-gatsby/utils/path-serializer").test,
      print: require("babel-preset-gatsby/utils/path-serializer").print,
    },
  ],
};

// Or with ES modules
import { test, print } from "babel-preset-gatsby/utils/path-serializer";

export default {
  snapshotSerializers: [
    { test, print },
  ],
};

Advanced Usage

Custom Path Cleaning

You can use the utilities for custom path cleaning scenarios:

import { test, print } from "babel-preset-gatsby/utils/path-serializer";

function cleanPathsInObject(obj) {
  if (typeof obj === "string" && test(obj)) {
    return print(obj, (path) => path);
  }
  
  if (Array.isArray(obj)) {
    return obj.map(cleanPathsInObject);
  }
  
  if (obj && typeof obj === "object") {
    const cleaned = {};
    for (const [key, value] of Object.entries(obj)) {
      cleaned[key] = cleanPathsInObject(value);
    }
    return cleaned;
  }
  
  return obj;
}

// Clean complex data structures
const data = {
  files: [
    "/project/node_modules/react/index.js",
    "/project/src/App.js"
  ],
  main: "/project/node_modules/lodash/index.js"
};

const cleaned = cleanPathsInObject(data);
// Result: {
//   files: [
//     "<PROJECT_ROOT>/node_modules/react/index.js",
//     "/project/src/App.js"
//   ],
//   main: "<PROJECT_ROOT>/node_modules/lodash/index.js"
// }