Add "use client" to components in build for Next.js app dir (#5498)

Author: devongovett

.parcelrc-build

@@ -0,0 +1,16 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "..."],
+  "transformers": {
+    "packages/**/intl/*.json": ["parcel-transformer-intl"],
+    "bundle-text:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"],
+    "*.svg": ["@parcel/transformer-svg-react"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  },
+  "optimizers": {
+    "{main,module}.js": ["...", "parcel-optimizer-react-client"]
+  }
+}

Makefile

@@ -92,7 +92,7 @@ publish-nightly: build
 	yarn publish:nightly
 
 build:
-	parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/react-aria-components --no-optimize
+	parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/react-aria-components --no-optimize --config .parcelrc-build
 	yarn lerna run prepublishOnly
 	for pkg in packages/@react-{spectrum,aria,stately}/*/  packages/@internationalized/{message,string,date,number}/ packages/@adobe/react-spectrum/ packages/react-aria/ packages/react-stately/ packages/react-aria-components/; \
 		do cp $$pkg/dist/module.js $$pkg/dist/import.mjs; \

packages/@adobe/react-spectrum/src/index.ts

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+'use client';
+
 export {ActionGroup} from '@react-spectrum/actiongroup';
 export {Badge} from '@react-spectrum/badge';
 export {Breadcrumbs} from '@react-spectrum/breadcrumbs';

packages/dev/parcel-optimizer-react-client/ReactClientOptimizer.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+const {Optimizer} = require('@parcel/plugin');
+const {blobToString} = require('@parcel/utils');
+
+module.exports = new Optimizer({
+  async optimize({bundle, contents, map}) {
+    if (!/@react-spectrum|react-aria-components/.test(bundle.target.distDir)) {
+      return {contents, map};
+    }
+
+    map?.offsetLines(2, 0);
+    return {
+      contents: `"use client";
+
+${await blobToString(contents)}`,
+      map
+    };
+  }
+});

packages/dev/parcel-optimizer-react-client/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "parcel-optimizer-react-client",
+  "version": "1.0.0",
+  "private": true,
+  "main": "ReactClientOptimizer.js",
+  "engines": {
+    "parcel": "^2.10.2"
+  },
+  "dependencies": {
+    "@parcel/plugin": "^2.10.2"
+  }
+}