Build assets-registry for general consumption #39440

tido64 · 2023-09-14T09:03:14Z

Summary:

Transpile assets-registry so it can be consumed outside of a React Native bundle:

Copied root .js files into src
Declared exports in package.json
To keep backwards compatibility, the root .js files re-export the corresponding files in the src folder

This is a follow-up to #38795 (comment). Let me know if this looks feasible to you.

Changelog:

[INTERNAL] [CHANGED] - Transpile assets-registry so it can be consumed outside of a React Native bundle

Test Plan:

n/a

analysis-bot · 2023-09-14T10:01:45Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,970,014	+19
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	9,562,448	+50
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: b29b393
Branch: main

cortinico · 2023-09-14T10:48:18Z

cc @huntie

huntie

Thanks for migrating this package into the shared build setup 😄.

nit: Changelog in PR summary can be reduced to Changelog: [Internal].

packages/assets/path-support.js

packages/assets/package.json

huntie · 2023-09-14T17:19:33Z

packages/assets/package.json

+    "dist",
+    "path-support.js",
+    "registry.js",
+    "src"


Suggested change

"dist",

"path-support.js",

"registry.js",

"src"

"dist",

This suggestion still applies — all other files do not need to be packaged, but are instead present at dev-time.

.circleci/configurations/jobs.yml

huntie · 2023-09-14T17:29:43Z

packages/assets/path-support.js

-  getAndroidResourceIdentifier,
-  getBasePath,
-};
+module.exports = require('./src/path-support');


To enable running from source, let's add babel-register wrapper files for these two entry points. And yeah, actually that means keeping these files around (for Flow's type checker, which sadly doesn't follow "exports").

You can find an example of this pattern in packages/dev-middleware/: https://github.com/facebook/react-native/blob/main/packages/dev-middleware/src/index.js.

And the file structure you'll need:

assets ├── path-support.js.flow # (Flow only) Re-export all types and values ├── registry.js.flow └── src ├── path-support.js # Entry point - babel-register ├── path-support.flow.js # Implementation ├── registry.js └── registry.flow.js

Thanks, I didn't quite understand what those files were. Makes sense now!

So… it looks like flow-check is unable to find .js.flow files. I had to rename them back to .js and fix a bunch of Dependencies of a @flow strict module must also be @flow strict! errors. The check seems to pass locally now.

I'm not sure this pattern works. babel-register cannot be found when the package is consumed outside the repository. Do you have any suggestions for how to address this?

babel-register cannot be foundwhen the package is consumed outside the repository.

Do you mean you have a setup where another project is consuming a local checkout of the react-native repository from source (e.g. via yarn link)?

This should work. Happy to debug via chat.

github-actions · 2023-09-15T07:46:52Z

	Warnings
⚠️	One hour and a half have passed and the E2E jobs haven't finished yet.

Generated by 🚫 dangerJS against 9ba56eb

huntie · 2023-09-15T09:21:09Z

packages/assets/path-support.js

+ * @format strict
+ * @flow


Looks like this line was accidentally rearranged first!

Also, feel free to use strict-local everywhere, it's slightly more forgiving.

Suggested change

* @format strict

* @flow

* @flow strict-local

* @format

huntie · 2023-09-15T09:27:21Z

packages/assets/path-support.js

-  getAndroidResourceIdentifier,
-  getBasePath,
-};
+module.exports = require('./src/path-support');


babel-register cannot be foundwhen the package is consumed outside the repository.

Do you mean you have a setup where another project is consuming a local checkout of the react-native repository from source (e.g. via yarn link)?

This should work. Happy to debug via chat.

huntie · 2023-09-15T09:29:09Z

packages/assets/registry.js

 'use strict';

-export type PackagerAsset = {
-  +__packager_asset: boolean,
-  +fileSystemLocation: string,
-  +httpServerLocation: string,
-  +width: ?number,
-  +height: ?number,
-  +scales: Array<number>,
-  +hash: string,
-  +name: string,
-  +type: string,
-  ...
-};
-
-const assets: Array<PackagerAsset> = [];
-
-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 {
-  return assets[assetId - 1];
-}
-
-module.exports = {registerAsset, getAssetByID};
+module.exports = require('./src/registry.flow');


Suggested change

'use strict';

export type PackagerAsset = {

+__packager_asset: boolean,

+fileSystemLocation: string,

+httpServerLocation: string,

+width: ?number,

+height: ?number,

+scales: Array<number>,

+hash: string,

+name: string,

+type: string,

...

};

const assets: Array<PackagerAsset> = [];

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 {

return assets[assetId - 1];

}

module.exports = {registerAsset, getAssetByID};

module.exports = require('./src/registry.flow');

export * from './src/registry.flow';

huntie · 2023-09-15T09:31:24Z

packages/assets/package.json

+    "dist",
+    "path-support.js",
+    "registry.js",
+    "src"


This suggestion still applies — all other files do not need to be packaged, but are instead present at dev-time.

huntie · 2023-09-15T09:34:58Z

packages/assets/path-support.js

-  getAndroidResourceIdentifier,
-  getBasePath,
-};
+module.exports = require('./src/path-support');


Suggested change

module.exports = require('./src/path-support');

export * from './src/path-support';

huntie · 2023-09-15T09:42:26Z

packages/rn-tester/metro.config.js

  // Make Metro able to resolve required external dependencies
  watchFolders: [
    path.resolve(__dirname, '../../node_modules'),
+    path.resolve(__dirname, '../../scripts/build'), // babel-register.js


Oh wait, @react-native/asset-registry is not a Node package — it's consumed by runtime code in packages/react-native/Libraries/!

This probably means we don't need the babel-register setup at all (just the root .js.flow files redirecting to src/) — since all modules loaded by React Native go through @react-native/babel-preset. This setup is just for run-from-source behaviour within the React Native monorepo.

Back to the PR summary:

Transpile assets-registry so it can be consumed outside of a React Native bundle:

This is technically new ground. I think we want to define a new build target of 'react-native'/'react-native-and-external' in scripts/build/config.js, configuring this to build files using @react-native/babel-preset as its Babel config. Will reach out via DM.

zhairui · 2024-01-25T07:37:31Z

cc @huntie

I meet an error , pls help . thanks ! here is the error stack:

[TypeError: _$$_REQUIRE(_dependencyMap[7], "(...)ssets-registry/path-support.js") is not a function (it is Object)] {"componentStack": "
in BaseImage (created by ImageBackground)
in RCTView (created by View)
in View (created by ImageBackground)
....

react-native-bot · 2024-07-24T05:01:07Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

react-native-bot · 2024-07-31T05:30:44Z

This PR was closed because it has been stalled for 7 days with no activity.

Build assets-registry for general consumption

145131e

tido64 requested review from cortinico, huntie and motiz88 September 14, 2023 09:03

tido64 added 2 commits September 14, 2023 11:20

fixup! Build assets-registry for general consumption

cc3f507

fixup! Build assets-registry for general consumption

c16d521

huntie reviewed Sep 14, 2023

View reviewed changes

tido64 added 2 commits September 14, 2023 20:03

add babel-register wrapper files

c051818

@flow strict

16a72c5

tido64 force-pushed the tido/build-assets-registry branch from ade331e to 16a72c5 Compare September 14, 2023 18:36

tido64 added 3 commits September 14, 2023 21:14

make flow-check happy

387c27c

add babel-register to metro.config.js

9ba56eb

fix e2e tests?

c2a1793

huntie reviewed Sep 15, 2023

View reviewed changes

huntie mentioned this pull request Sep 19, 2023

Add assets-registry to shared build setup #39542

Closed

react-native-bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 24, 2024

react-native-bot closed this Jul 31, 2024

MatheusrdSantos mentioned this pull request Aug 19, 2024

SvgXml implementation for web software-mansion/react-native-svg#1431

Closed

1 task

tido64 deleted the tido/build-assets-registry branch February 11, 2025 12:58

	module.exports = require('./src/path-support');
	export * from './src/path-support';

Build assets-registry for general consumption #39440

Build assets-registry for general consumption #39440

Uh oh!

Conversation

tido64 commented Sep 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Changelog:

Test Plan:

Uh oh!

analysis-bot commented Sep 14, 2023

Uh oh!

cortinico commented Sep 14, 2023

Uh oh!

huntie left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tido64 Sep 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 15, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

huntie Sep 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zhairui commented Jan 25, 2024

Uh oh!

react-native-bot commented Jul 24, 2024

Uh oh!

react-native-bot commented Jul 31, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

tido64 commented Sep 14, 2023 •

edited

Loading

tido64 Sep 14, 2023 •

edited

Loading

huntie Sep 15, 2023 •

edited

Loading