@usemotif/compiler-metro 1.0.0

package/README.md

@@ -0,0 +1,17 @@
+# @usemotif/compiler-metro
+
+> Metro plugin for React Native — runs `@usemotif/compiler-babel` inside the Metro pipeline so compile-time style-prop extraction works under Expo and bare React Native.
+
+## Install
+
+```sh
+yarn add -D @usemotif/compiler-metro
+```
+
+## Docs
+
+<https://usemotif.dev>
+
+## License
+
+[MIT](../../LICENSE)

package/dist/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var motifBabelPlugin = require('@usemotif/compiler-babel');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var motifBabelPlugin__default = /*#__PURE__*/_interopDefault(motifBabelPlugin);
+
+// src/index.ts
+var motifMetro = (options = {}) => {
+  const { target = "native", ...rest } = options;
+  return [motifBabelPlugin__default.default, { ...rest, target }];
+};
+var index_default = motifMetro;
+var PACKAGE_NAME = "@usemotif/compiler-metro";
+
+exports.PACKAGE_NAME = PACKAGE_NAME;
+exports.default = index_default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["motifBabelPlugin"],"mappings":";;;;;;;;;;;AAkCA,IAAM,UAAA,GAAa,CAAC,OAAA,GAA6B,EAAC,KAA6C;AAC7F,EAAA,MAAM,EAAE,MAAA,GAAS,QAAA,EAAU,GAAG,MAAK,GAAI,OAAA;AACvC,EAAA,OAAO,CAACA,iCAAA,EAAkB,EAAE,GAAG,IAAA,EAAM,QAAoC,CAAA;AAC3E,CAAA;AAEA,IAAO,aAAA,GAAQ;AACR,IAAM,YAAA,GAAe","file":"index.cjs","sourcesContent":["import motifBabelPlugin, { type MotifBabelOptions } from '@usemotif/compiler-babel';\n\n/**\n * The shape of a Babel plugin entry the way Metro / babel-preset-expo\n * expect: a tuple of `[plugin, options]`. Metro consumes this from the\n * project's `babel.config.js` so the motif transform layers into the\n * existing JS pipeline (no separate Metro transformer needed; Metro\n * already runs Babel for every file).\n *\n * Usage in a React Native / Expo project's `babel.config.js`:\n *\n * ```js\n * const motif = require('@usemotif/compiler-metro').default;\n * module.exports = function (api) {\n *   api.cache(true);\n *   return {\n *     presets: ['babel-preset-expo'],\n *     plugins: [motif({ target: 'native' })],\n *   };\n * };\n * ```\n *\n * Conceptually this is just a renamed re-export of\n * `@usemotif/compiler-babel` with the `target` defaulted to `'native'`,\n * since that's what RN consumers always want. Keeping it as its own\n * package gives us a place to add Metro-specific configuration plumbing\n * later (CSS extraction is a no-op on native, but a per-file\n * `StyleSheet.create({...})` hoister will land here).\n */\nexport interface MotifMetroOptions extends Omit<MotifBabelOptions, 'target'> {\n  /** Target. Defaults to `'native'`. Override only when sharing config. */\n  readonly target?: 'web' | 'native';\n}\n\nconst motifMetro = (options: MotifMetroOptions = {}): readonly [unknown, MotifBabelOptions] => {\n  const { target = 'native', ...rest } = options;\n  return [motifBabelPlugin, { ...rest, target } satisfies MotifBabelOptions];\n};\n\nexport default motifMetro;\nexport const PACKAGE_NAME = '@usemotif/compiler-metro';\n"]}

package/dist/index.d.cts

@@ -0,0 +1,38 @@
+import { MotifBabelOptions } from '@usemotif/compiler-babel';
+
+/**
+ * The shape of a Babel plugin entry the way Metro / babel-preset-expo
+ * expect: a tuple of `[plugin, options]`. Metro consumes this from the
+ * project's `babel.config.js` so the motif transform layers into the
+ * existing JS pipeline (no separate Metro transformer needed; Metro
+ * already runs Babel for every file).
+ *
+ * Usage in a React Native / Expo project's `babel.config.js`:
+ *
+ * ```js
+ * const motif = require('@usemotif/compiler-metro').default;
+ * module.exports = function (api) {
+ *   api.cache(true);
+ *   return {
+ *     presets: ['babel-preset-expo'],
+ *     plugins: [motif({ target: 'native' })],
+ *   };
+ * };
+ * ```
+ *
+ * Conceptually this is just a renamed re-export of
+ * `@usemotif/compiler-babel` with the `target` defaulted to `'native'`,
+ * since that's what RN consumers always want. Keeping it as its own
+ * package gives us a place to add Metro-specific configuration plumbing
+ * later (CSS extraction is a no-op on native, but a per-file
+ * `StyleSheet.create({...})` hoister will land here).
+ */
+interface MotifMetroOptions extends Omit<MotifBabelOptions, 'target'> {
+    /** Target. Defaults to `'native'`. Override only when sharing config. */
+    readonly target?: 'web' | 'native';
+}
+declare const motifMetro: (options?: MotifMetroOptions) => readonly [unknown, MotifBabelOptions];
+
+declare const PACKAGE_NAME = "@usemotif/compiler-metro";
+
+export { type MotifMetroOptions, PACKAGE_NAME, motifMetro as default };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import { MotifBabelOptions } from '@usemotif/compiler-babel';
+
+/**
+ * The shape of a Babel plugin entry the way Metro / babel-preset-expo
+ * expect: a tuple of `[plugin, options]`. Metro consumes this from the
+ * project's `babel.config.js` so the motif transform layers into the
+ * existing JS pipeline (no separate Metro transformer needed; Metro
+ * already runs Babel for every file).
+ *
+ * Usage in a React Native / Expo project's `babel.config.js`:
+ *
+ * ```js
+ * const motif = require('@usemotif/compiler-metro').default;
+ * module.exports = function (api) {
+ *   api.cache(true);
+ *   return {
+ *     presets: ['babel-preset-expo'],
+ *     plugins: [motif({ target: 'native' })],
+ *   };
+ * };
+ * ```
+ *
+ * Conceptually this is just a renamed re-export of
+ * `@usemotif/compiler-babel` with the `target` defaulted to `'native'`,
+ * since that's what RN consumers always want. Keeping it as its own
+ * package gives us a place to add Metro-specific configuration plumbing
+ * later (CSS extraction is a no-op on native, but a per-file
+ * `StyleSheet.create({...})` hoister will land here).
+ */
+interface MotifMetroOptions extends Omit<MotifBabelOptions, 'target'> {
+    /** Target. Defaults to `'native'`. Override only when sharing config. */
+    readonly target?: 'web' | 'native';
+}
+declare const motifMetro: (options?: MotifMetroOptions) => readonly [unknown, MotifBabelOptions];
+
+declare const PACKAGE_NAME = "@usemotif/compiler-metro";
+
+export { type MotifMetroOptions, PACKAGE_NAME, motifMetro as default };

package/dist/index.js

@@ -0,0 +1,13 @@
+import motifBabelPlugin from '@usemotif/compiler-babel';
+
+// src/index.ts
+var motifMetro = (options = {}) => {
+  const { target = "native", ...rest } = options;
+  return [motifBabelPlugin, { ...rest, target }];
+};
+var index_default = motifMetro;
+var PACKAGE_NAME = "@usemotif/compiler-metro";
+
+export { PACKAGE_NAME, index_default as default };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAkCA,IAAM,UAAA,GAAa,CAAC,OAAA,GAA6B,EAAC,KAA6C;AAC7F,EAAA,MAAM,EAAE,MAAA,GAAS,QAAA,EAAU,GAAG,MAAK,GAAI,OAAA;AACvC,EAAA,OAAO,CAAC,gBAAA,EAAkB,EAAE,GAAG,IAAA,EAAM,QAAoC,CAAA;AAC3E,CAAA;AAEA,IAAO,aAAA,GAAQ;AACR,IAAM,YAAA,GAAe","file":"index.js","sourcesContent":["import motifBabelPlugin, { type MotifBabelOptions } from '@usemotif/compiler-babel';\n\n/**\n * The shape of a Babel plugin entry the way Metro / babel-preset-expo\n * expect: a tuple of `[plugin, options]`. Metro consumes this from the\n * project's `babel.config.js` so the motif transform layers into the\n * existing JS pipeline (no separate Metro transformer needed; Metro\n * already runs Babel for every file).\n *\n * Usage in a React Native / Expo project's `babel.config.js`:\n *\n * ```js\n * const motif = require('@usemotif/compiler-metro').default;\n * module.exports = function (api) {\n *   api.cache(true);\n *   return {\n *     presets: ['babel-preset-expo'],\n *     plugins: [motif({ target: 'native' })],\n *   };\n * };\n * ```\n *\n * Conceptually this is just a renamed re-export of\n * `@usemotif/compiler-babel` with the `target` defaulted to `'native'`,\n * since that's what RN consumers always want. Keeping it as its own\n * package gives us a place to add Metro-specific configuration plumbing\n * later (CSS extraction is a no-op on native, but a per-file\n * `StyleSheet.create({...})` hoister will land here).\n */\nexport interface MotifMetroOptions extends Omit<MotifBabelOptions, 'target'> {\n  /** Target. Defaults to `'native'`. Override only when sharing config. */\n  readonly target?: 'web' | 'native';\n}\n\nconst motifMetro = (options: MotifMetroOptions = {}): readonly [unknown, MotifBabelOptions] => {\n  const { target = 'native', ...rest } = options;\n  return [motifBabelPlugin, { ...rest, target } satisfies MotifBabelOptions];\n};\n\nexport default motifMetro;\nexport const PACKAGE_NAME = '@usemotif/compiler-metro';\n"]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@usemotif/compiler-metro",
+  "version": "1.0.0",
+  "description": "Metro transformer for motif-js static style extraction in React Native.",
+  "homepage": "https://github.com/foo-stack/usemotif/tree/main/packages/compiler-metro#readme",
+  "bugs": "https://github.com/foo-stack/usemotif/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/foo-stack/usemotif.git",
+    "directory": "packages/compiler-metro"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo *.tsbuildinfo",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@babel/core": "^7.29.0",
+    "@usemotif/compiler-babel": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.5"
+  }
+}

package/src/index.test.ts

@@ -0,0 +1,52 @@
+import { transformSync } from '@babel/core';
+import { describe, expect, it } from 'vitest';
+import motifMetro from './index.js';
+
+describe('@usemotif/compiler-metro', () => {
+  it('returns a [plugin, options] tuple Babel can consume', () => {
+    const tuple = motifMetro();
+    expect(Array.isArray(tuple)).toBe(true);
+    expect(tuple).toHaveLength(2);
+    expect(typeof tuple[0]).toBe('function');
+    expect(tuple[1]).toMatchObject({ target: 'native' });
+  });
+
+  it('hoists StyleSheet.create on native target', () => {
+    const tuple = motifMetro();
+    const result = transformSync(
+      `import { Box } from '@usemotif/react-native';\nconst X = () => <Box p={4} />;\n`,
+      {
+        babelrc: false,
+        configFile: false,
+        filename: 'test.tsx',
+        plugins: [tuple],
+        parserOpts: { plugins: ['jsx', 'typescript'] },
+        generatorOpts: { compact: false },
+      },
+    );
+    const code = result?.code ?? '';
+    expect(code).not.toMatch(/\bp=\{4\}/);
+    expect(code).toContain('StyleSheet');
+    expect(code).toContain('_motifStyles');
+    expect(code).toContain('padding: 4');
+    expect(code).toMatch(/style=\{_motifStyles\.id\d+\}/);
+  });
+
+  it('respects target override', () => {
+    const tuple = motifMetro({ target: 'web' });
+    const result = transformSync(
+      `import { Box } from '@usemotif/react';\nconst X = () => <Box p={4} />;\n`,
+      {
+        babelrc: false,
+        configFile: false,
+        filename: 'test.tsx',
+        plugins: [tuple],
+        parserOpts: { plugins: ['jsx', 'typescript'] },
+        generatorOpts: { compact: false },
+      },
+    );
+    // With target=web, the static prop should be extracted.
+    expect(result?.code).not.toMatch(/\bp=\{4\}/);
+    expect(result?.code).toContain('padding: 4');
+  });
+});

package/src/index.ts

@@ -0,0 +1,41 @@
+import motifBabelPlugin, { type MotifBabelOptions } from '@usemotif/compiler-babel';
+
+/**
+ * The shape of a Babel plugin entry the way Metro / babel-preset-expo
+ * expect: a tuple of `[plugin, options]`. Metro consumes this from the
+ * project's `babel.config.js` so the motif transform layers into the
+ * existing JS pipeline (no separate Metro transformer needed; Metro
+ * already runs Babel for every file).
+ *
+ * Usage in a React Native / Expo project's `babel.config.js`:
+ *
+ * ```js
+ * const motif = require('@usemotif/compiler-metro').default;
+ * module.exports = function (api) {
+ *   api.cache(true);
+ *   return {
+ *     presets: ['babel-preset-expo'],
+ *     plugins: [motif({ target: 'native' })],
+ *   };
+ * };
+ * ```
+ *
+ * Conceptually this is just a renamed re-export of
+ * `@usemotif/compiler-babel` with the `target` defaulted to `'native'`,
+ * since that's what RN consumers always want. Keeping it as its own
+ * package gives us a place to add Metro-specific configuration plumbing
+ * later (CSS extraction is a no-op on native, but a per-file
+ * `StyleSheet.create({...})` hoister will land here).
+ */
+export interface MotifMetroOptions extends Omit<MotifBabelOptions, 'target'> {
+  /** Target. Defaults to `'native'`. Override only when sharing config. */
+  readonly target?: 'web' | 'native';
+}
+
+const motifMetro = (options: MotifMetroOptions = {}): readonly [unknown, MotifBabelOptions] => {
+  const { target = 'native', ...rest } = options;
+  return [motifBabelPlugin, { ...rest, target } satisfies MotifBabelOptions];
+};
+
+export default motifMetro;
+export const PACKAGE_NAME = '@usemotif/compiler-metro';