# code-split.macro

> A macro for assisting in client/server interop for code splitting so server side imports are not asynchronous

Latest version **1.0.4** (published 2020-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install code-split.macro
pnpm add code-split.macro
yarn add code-split.macro
bun add code-split.macro
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-01-26 |
| First published | 2020-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jaredlunde |
| Keywords | code splitting, code splitting macro, code split, code split macro, babel macro, babel code split, babel code splitting |

## Links

- npm: https://www.npmjs.com/package/code-split.macro
- Repository: https://github.com/jaredLunde/code-split.macro
- Homepage: https://github.com/jaredLunde/code-split.macro#readme
- Issues: https://github.com/jaredLunde/code-split.macro/issues
- npm.io page: https://npm.io/package/code-split.macro

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2020-01-26
- 1.0.3 — 2020-01-26
- 1.0.2 — 2020-01-26
- 1.0.1 — 2020-01-26
- 1.0.0 — 2020-01-26

## README

<hr>
<div align="center">
  <h1 align="center">
    code-split.macro
  </h1>
</div>

<p align="center">
  <a aria-label="Types" href="https://www.npmjs.com/package/code-split.macro">
    <img alt="Types" src="https://img.shields.io/npm/types/code-split.macro?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Code coverage report" href="https://codecov.io/gh/jaredLunde/code-split.macro">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/jaredLunde/code-split.macro?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/jaredLunde/code-split.macro">
    <img alt="Build status" src="https://img.shields.io/travis/com/jaredLunde/code-split.macro?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/code-split.macro">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/code-split.macro?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/code-split.macro?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i code-split.macro</pre>
<hr>

A macro for assisting in client/server interop for code splitting so server side imports are not asynchronous

## The Problem

We want our routes and other heavy components to be code split on the client side
to reduce the size of our bundle, but we encounter issues when trying to render on
the server because packages like `react` and `preact` don't handle promises
when rendering apps to strings. Ideally, we would only include those asynchronous
imports when building our client code and use regular `require()` statements
when prerendering our app.

This macro solves the `import`/`require` interop part of that problem.

## Requirements

- [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) (this ships with `CRA`, `preact-cli`, and many others)

## Quick Start

```js
import codeSplit from 'code-split.macro'

// __SERVER__ below would suggest you're using something like
// webpack.DefinePlugin() to create a special __SERVER__ constant
// that is `true` when you're building the SSR part of your app
// and `false` when building the client part
export const Home = codeSplit('./Home', __SERVER__)

////////////////////////////////////////////////////////////////////////////////
//                               ⬇ BECOMES ⬇                                //
///////////////////////////////////////////////////////////////////////////////

export const Home = __SERVER__
  ? () => require('./Home')
  : () => import(/* webpackChunkName: "src/pages/Home" */ './Home')
```

## API

### `codeSplit(path: string, isServerBuild: boolean)`

| Argument      | Type      | Required? | Description                                                                      |
| ------------- | --------- | --------- | -------------------------------------------------------------------------------- |
| path          | `string`  | Yes       | The relative path to the file you're code splitting                              |
| isServerBuild | `boolean` | Yes       | Should be `true` if this is your SSR build, `false` if this is your client build |

## LICENSE

MIT

---
_Source: https://npm.io/package/code-split.macro · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._