Add support for removing functions named invariant and assertions f…

…rom `tiny-invariant` (#966)

.changeset/seven-apes-tap.md

@@ -0,0 +1,18 @@
+---
+'sku': minor
+---
+
+Add support for removing assertion functions named `invariant` and assertions from the `tiny-invariant` library, a lightweight alternative to `assert`
+
+**EXAMPLE USAGE**:
+
+```tsx
+import React from 'react';
+import invariant from 'tiny-invariant';
+
+export const Rating = ({ rating }: { rating: number }) => {
+  invariant(rating >= 0 && rating <= 5, 'Rating must be between 0 and 5');
+
+  return <div>...</div>;
+};
+```

docs/docs/extra-features.md

@@ -81,10 +81,10 @@ For more details on configuring hooks, please see husky's [documentation](https:
 
 ## Assertion removal
 
-If you use [Node's `assert` library](https://nodejs.org/api/assert.html) or its [browser port](https://www.npmjs.com/package/assert), your assertions will be automatically removed in production via [`babel-plugin-unassert`](https://github.com/unassert-js/babel-plugin-unassert).
+By default, sku will remove assertions in your production builds with [`babel-plugin-unassert`].
 This allows you to perform more expensive checks during development without worrying about the perfomance impacts on users.
 
-For example, let's assume you wrote the following code:
+For example, given the following code:
 
 ```tsx
 import React from 'react';
@@ -97,14 +97,34 @@ export const Rating = ({ rating }: { rating: number }) => {
 };
 ```
 
-In production, the code above would be logically equivalent to this:
+In production, sku would transform the code above into code roughly equivalent to:
 
 ```js
 import React from 'react';
 
 export const Rating = ({ rating }) => <div>...</div>;
 ```
 
+[`babel-plugin-unassert`]: https://github.com/unassert-js/babel-plugin-unassert
+
+### Supported Assertion Function Names
+
+- `invariant`
+- `assert`
+
+### Supported Assertion Libraries
+
+- [`tiny-invariant`] (Recommended)
+- `assert` ([Node.js built-in] or [browser port])
+- `node:assert` ([Node.js built-in])
+
+Any combination of function name and library name is supported.
+[`tiny-invariant`] is recommended over [`assert`][browser port] due to its simplicity and size.
+
+[`tiny-invariant`]: https://www.npmjs.com/package/tiny-invariant
+[Node.js built-in]: https://nodejs.org/api/assert.html
+[browser port]: https://www.npmjs.com/package/assert
+
 ## DevServer Middleware
 
 Supply a `devServerMiddleware` path in your sku config to access the internal dev [Express] server.

fixtures/assertion-removal/package.json

@@ -11,7 +11,8 @@
     "@types/react-dom": "^18.2.3",
     "assert": "^2.0.0",
     "dedent": "^1.5.1",
-    "sku": "workspace:*"
+    "sku": "workspace:*",
+    "tiny-invariant": "^1.3.3"
   },
   "skuSkipValidatePeerDeps": true
 }

fixtures/assertion-removal/src/App.tsx

@@ -1,7 +1,9 @@
 import assert from 'assert';
+import invariant from 'tiny-invariant';
 
 export default () => {
   assert(false, 'Should be true');
+  invariant(false, 'Should be true');
 
   return <div>It rendered without throwing an assertion error</div>;
 };

packages/sku/config/babel/babelConfig.js

@@ -55,7 +55,13 @@ module.exports = ({
     }
 
     if (removeAssertionsInProduction) {
-      plugins.push(require.resolve('babel-plugin-unassert'));
+      plugins.push([
+        require.resolve('babel-plugin-unassert'),
+        {
+          variables: ['assert', 'invariant'],
+          modules: ['assert', 'node:assert', 'tiny-invariant'],
+        },
+      ]);
     }
   }