Bun: bun-v0.0.27 Release

Features

Relay GraphQL client

You can now use Facebook's Relay GraphQL framework with Bun via bun-macro-relay.

bun-macro-relay implements the Bun equivalent of babel-plugin-relay.

Input:

const query = graphql`
  query Bacon {
  }
`;

Output:

import Bacon from '__generated__/Bacon.graphql';
const query = Bacon;

This macro is implemented entirely in TypeScript - not in native code. For install instructions, head over to bun-macro-relay.

Automatically remap macros

// Instead of having to change every import like this:
import { css } from "@emotion/react";

// To this:
import { css } from "macro:bun-macro-emotion-react";

// Now you don't have to change your code
import { css } from "@emotion/react";

^{note: @emotion/react is not implemented yet!}

To use this, add this to your package.json (and remove the comments):

  "bun": {
    "macros": {
      // "react-relay" is the import path to rewrite
      "react-relay": {
       // rewrite the "graphql" import to instead point to "bun-macro-relay/bun-macro-relay.tsx"
        "graphql": "bun-macro-relay/bun-macro-relay.tsx"
      }
    }
  },

Remapping this way only applies to macros. To rewrite imports otherwise, Bun will read paths from tsconfig.json or jsconfig.json.

Bug fixes

• Fix edgecase with cjs -> esm interop runtime code when the ESM export was marked as not extensible
• Fix potential infinite loop on calling macros
• Fix incorrect jsxDEV transform when source feature flag is off and a runtime error occurs in a component being rendered
• Fix dead-code elimination edgecase with call expressions
• Fix edgecase with parsing .env containing very short strings

More macro features

• <import> lets you inject an import statement into a module. It accepts default, which is the default import alias and you can pass a namespace object where the object maps the import names to their names in the current file
• <id> lets you reference an import (and eventually, other symbols too)
• <inject> will insert each child element to the module scope. This currently only works with <import>, but it will work with other statements eventually.

Here's an example:

  const importStmt = (
    <import default="MyImportName" path="foo/bar" />
  );

  return (
    <>
      <inject>{importStmt}</inject>
      <id to={importStmt.namespace.MyImportName} />
    </>
  );