From 13e82172da6f68551898e572bd225c729fac3c39 Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Tue, 19 Sep 2023 17:14:00 +0100 Subject: [PATCH] Add assets-registry to shared build setup --- .flowconfig | 1 - packages/assets/.gitignore | 5 ++++ packages/assets/package.json | 12 +++++++++ .../{ => src}/__tests__/path-support-test.js | 0 .../path-support.flow.js} | 27 +++++++------------ packages/assets/src/path-support.js | 21 +++++++++++++++ .../{registry.js => src/registry.flow.js} | 13 +++------ packages/assets/src/registry.js | 21 +++++++++++++++ packages/helloworld/metro.config.js | 1 + .../Libraries/Image/AssetRegistry.js | 9 ++++--- packages/react-native/metro.config.js | 1 + packages/rn-tester/.babelrc | 14 ++++++---- packages/rn-tester/metro.config.js | 1 + scripts/build/config.js | 12 ++++++++- 14 files changed, 100 insertions(+), 38 deletions(-) create mode 100644 packages/assets/.gitignore rename packages/assets/{ => src}/__tests__/path-support-test.js (100%) rename packages/assets/{path-support.js => src/path-support.flow.js} (79%) create mode 100644 packages/assets/src/path-support.js rename packages/assets/{registry.js => src/registry.flow.js} (74%) create mode 100644 packages/assets/src/registry.js diff --git a/.flowconfig b/.flowconfig index ee7c3101d56c..6d96814171db 100644 --- a/.flowconfig +++ b/.flowconfig @@ -64,7 +64,6 @@ munge_underscores=true module.name_mapper='^react-native$' -> '/packages/react-native/index.js' module.name_mapper='^react-native/\(.*\)$' -> '/packages/react-native/\1' -module.name_mapper='^@react-native/dev-middleware$' -> '/packages/dev-middleware' module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\|xml\)$' -> '/packages/react-native/Libraries/Image/RelativeImageStub' suppress_type=$FlowIssue diff --git a/packages/assets/.gitignore b/packages/assets/.gitignore new file mode 100644 index 000000000000..40d93a0332c9 --- /dev/null +++ b/packages/assets/.gitignore @@ -0,0 +1,5 @@ +# Dependencies +/node_modules + +# Build output +/dist diff --git a/packages/assets/package.json b/packages/assets/package.json index 43c7e3ddeca4..8062218f1a76 100644 --- a/packages/assets/package.json +++ b/packages/assets/package.json @@ -16,6 +16,18 @@ "support" ], "bugs": "https://github.com/facebook/react-native/issues", + "exports": { + "./path-support": "./src/path-support.js", + "./path-support.js": "./src/path-support.js", + "./registry": "./src/registry.js", + "./registry.js": "./src/registry.js", + "./package.json": "./package.json" + }, + "files": [ + "dist", + "path-support.js", + "registry.js" + ], "engines": { "node": ">=18" } diff --git a/packages/assets/__tests__/path-support-test.js b/packages/assets/src/__tests__/path-support-test.js similarity index 100% rename from packages/assets/__tests__/path-support-test.js rename to packages/assets/src/__tests__/path-support-test.js diff --git a/packages/assets/path-support.js b/packages/assets/src/path-support.flow.js similarity index 79% rename from packages/assets/path-support.js rename to packages/assets/src/path-support.flow.js index bdf2acc3491b..6944c459b380 100644 --- a/packages/assets/path-support.js +++ b/packages/assets/src/path-support.flow.js @@ -6,11 +6,10 @@ * * @flow strict * @format + * @oncall react_native */ -'use strict'; - -/*:: import type {PackagerAsset} from './registry.js'; */ +import type {PackagerAsset} from './registry.flow'; const androidScaleSuffix = { '0.75': 'ldpi', @@ -27,7 +26,7 @@ const ANDROID_BASE_DENSITY = 160; * FIXME: using number to represent discrete scale numbers is fragile in essence because of * floating point numbers imprecision. */ -function getAndroidAssetSuffix(scale /*: number */) /*: string */ { +function getAndroidAssetSuffix(scale: number): string { if (scale.toString() in androidScaleSuffix) { // $FlowFixMe[invalid-computed-prop] return androidScaleSuffix[scale.toString()]; @@ -51,10 +50,10 @@ const drawableFileTypes = new Set([ 'xml', ]); -function getAndroidResourceFolderName( - asset /*: PackagerAsset */, - scale /*: number */, -) /*: string */ { +export function getAndroidResourceFolderName( + asset: PackagerAsset, + scale: number, +): string { if (!drawableFileTypes.has(asset.type)) { return 'raw'; } @@ -72,9 +71,7 @@ function getAndroidResourceFolderName( return 'drawable-' + suffix; } -function getAndroidResourceIdentifier( - asset /*: PackagerAsset */, -) /*: string */ { +export function getAndroidResourceIdentifier(asset: PackagerAsset): string { return (getBasePath(asset) + '/' + asset.name) .toLowerCase() .replace(/\//g, '_') // Encode folder structure in file name @@ -82,13 +79,7 @@ function getAndroidResourceIdentifier( .replace(/^(?:assets|assetsunstable_path)_/, ''); // Remove "assets_" or "assetsunstable_path_" prefix } -function getBasePath(asset /*: PackagerAsset */) /*: string */ { +export function getBasePath(asset: PackagerAsset): string { const basePath = asset.httpServerLocation; return basePath.startsWith('/') ? basePath.slice(1) : basePath; } - -module.exports = { - getAndroidResourceFolderName, - getAndroidResourceIdentifier, - getBasePath, -}; diff --git a/packages/assets/src/path-support.js b/packages/assets/src/path-support.js new file mode 100644 index 000000000000..080c1f8f7408 --- /dev/null +++ b/packages/assets/src/path-support.js @@ -0,0 +1,21 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict + * @format + * @oncall react_native + */ + +/*:: +export type * from './path-support.flow'; +*/ + +if (process.env.BUILD_EXCLUDE_BABEL_REGISTER == null) { + // $FlowIgnore[nonstrict-import] + require('../../../scripts/babel-register').registerForMonorepo(); +} + +export * from './path-support.flow'; diff --git a/packages/assets/registry.js b/packages/assets/src/registry.flow.js similarity index 74% rename from packages/assets/registry.js rename to packages/assets/src/registry.flow.js index 14d17d1b9f77..b9d0b2b39573 100644 --- a/packages/assets/registry.js +++ b/packages/assets/src/registry.flow.js @@ -6,11 +6,9 @@ * * @flow strict * @format + * @oncall react_native */ -'use strict'; - -/*:: export type AssetDestPathResolver = 'android' | 'generic'; export type PackagerAsset = { @@ -26,18 +24,15 @@ export type PackagerAsset = { +resolver?: AssetDestPathResolver, ... }; -*/ -const assets /*: Array */ = []; +const assets: Array = []; -function registerAsset(asset /*: PackagerAsset */) /*: number */ { +export function registerAsset(asset: PackagerAsset): number { // `push` returns new array length, so the first asset will // get id 1 (not 0) to make the value truthy return assets.push(asset); } -function getAssetByID(assetId /*: number */) /*: PackagerAsset */ { +export function getAssetByID(assetId: number): PackagerAsset { return assets[assetId - 1]; } - -module.exports = {registerAsset, getAssetByID}; diff --git a/packages/assets/src/registry.js b/packages/assets/src/registry.js new file mode 100644 index 000000000000..74530001da41 --- /dev/null +++ b/packages/assets/src/registry.js @@ -0,0 +1,21 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict + * @format + * @oncall react_native + */ + +/*:: +export type * from './registry.flow'; +*/ + +if (process.env.BUILD_EXCLUDE_BABEL_REGISTER == null) { + // $FlowIgnore[nonstrict-import] + require('../../../scripts/babel-register').registerForMonorepo(); +} + +export * from './registry.flow'; diff --git a/packages/helloworld/metro.config.js b/packages/helloworld/metro.config.js index 50855d5a7058..fa77832fa3dd 100644 --- a/packages/helloworld/metro.config.js +++ b/packages/helloworld/metro.config.js @@ -20,6 +20,7 @@ const config = { // Make Metro able to resolve required external dependencies watchFolders: [ path.resolve(__dirname, '../../node_modules'), + path.resolve(__dirname, '../../scripts'), // babel-register.js path.resolve(__dirname, '../assets'), path.resolve(__dirname, '../normalize-color'), path.resolve(__dirname, '../polyfills'), diff --git a/packages/react-native/Libraries/Image/AssetRegistry.js b/packages/react-native/Libraries/Image/AssetRegistry.js index 1209f16eb2ae..5ce98fc20820 100644 --- a/packages/react-native/Libraries/Image/AssetRegistry.js +++ b/packages/react-native/Libraries/Image/AssetRegistry.js @@ -12,9 +12,10 @@ import type {PackagerAsset} from '@react-native/assets-registry/registry'; -const AssetRegistry = require('@react-native/assets-registry/registry') as { - registerAsset: (asset: PackagerAsset) => number, - getAssetByID: (assetId: number) => PackagerAsset, -}; +const AssetRegistry = + require('@react-native/assets-registry/registry') as $FlowFixMe as { + registerAsset: (asset: PackagerAsset) => number, + getAssetByID: (assetId: number) => PackagerAsset, + }; module.exports = AssetRegistry; diff --git a/packages/react-native/metro.config.js b/packages/react-native/metro.config.js index bd787c451b22..84a654086ffa 100644 --- a/packages/react-native/metro.config.js +++ b/packages/react-native/metro.config.js @@ -21,6 +21,7 @@ const config = { // Make Metro able to resolve required packages that might be imported from /packages/react-native watchFolders: [ path.resolve(__dirname, '../../node_modules'), + path.resolve(__dirname, '../../scripts'), // babel-register.js path.resolve(__dirname, '../assets'), path.resolve(__dirname, '../normalize-color'), path.resolve(__dirname, '../polyfills'), diff --git a/packages/rn-tester/.babelrc b/packages/rn-tester/.babelrc index 465e69eede33..ea9317a134e4 100644 --- a/packages/rn-tester/.babelrc +++ b/packages/rn-tester/.babelrc @@ -1,8 +1,12 @@ { - "presets": [ - "module:@react-native/babel-preset" - ], - "plugins": [ - "babel-plugin-transform-flow-enums" + "presets": ["module:@react-native/babel-preset"], + "plugins": [ + "babel-plugin-transform-flow-enums", + [ + "babel-plugin-transform-define", + { + "process.env.BUILD_EXCLUDE_BABEL_REGISTER": true + } ] + ] } diff --git a/packages/rn-tester/metro.config.js b/packages/rn-tester/metro.config.js index 04a0f5639923..ec0c29bf02d3 100644 --- a/packages/rn-tester/metro.config.js +++ b/packages/rn-tester/metro.config.js @@ -23,6 +23,7 @@ const config = { // Make Metro able to resolve required external dependencies watchFolders: [ path.resolve(__dirname, '../../node_modules'), + path.resolve(__dirname, '../../scripts'), // babel-register.js path.resolve(__dirname, '../assets'), path.resolve(__dirname, '../community-cli-plugin'), path.resolve(__dirname, '../dev-middleware'), diff --git a/scripts/build/config.js b/scripts/build/config.js index e24cb22c2264..74d875ba6402 100644 --- a/scripts/build/config.js +++ b/scripts/build/config.js @@ -15,7 +15,11 @@ const {ModuleResolutionKind} = require('typescript'); export type BuildOptions = $ReadOnly<{ // The target runtime to compile for. - target: 'node', + target: + | 'node' + // Special case for @react-native/assets-registry, where this is consumed + // both by Node.js build tooling and React Native at runtime. + | 'node-like', // Whether to emit Flow definition files (.js.flow) (default: true). emitFlowDefs?: boolean, @@ -39,6 +43,10 @@ export type BuildConfig = $ReadOnly<{ const buildConfig: BuildConfig = { /* eslint sort-keys: "error" */ packages: { + assets: { + emitTypeScriptDefs: true, + target: 'node-like', + }, 'community-cli-plugin': { target: 'node', }, @@ -82,6 +90,7 @@ function getBabelConfig( switch (target) { case 'node': + case 'node-like': return require('./babel/node.config.js'); } } @@ -93,6 +102,7 @@ function getTypeScriptCompilerOptions( switch (target) { case 'node': + case 'node-like': return { ...require('@tsconfig/node18/tsconfig.json').compilerOptions, moduleResolution: ModuleResolutionKind.NodeJs,