Remove "use client" and mark packages as client-only instead (#5826)

Author: devongovett

.parcelrc-build

@@ -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 --config .parcelrc-build
+	parcel build packages/@react-{spectrum,aria,stately}/*/ packages/@internationalized/{message,string,date,number}/ packages/react-aria-components --no-optimize
 	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 node scripts/buildEsm.js $$pkg; \

Makefile

@@ -30,7 +30,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "prepublishOnly": "mkdir -p dist; cp src/index.ts dist/types.d.ts; sed -i.bak 's/'\\''use client'\\'';//' dist/types.d.ts; rm dist/types.d.ts.bak; grep -v '^export type' src/index.ts > dist/module.js; babel --root-mode upward src/index.ts -o dist/main.js"
+    "prepublishOnly": "mkdir -p dist; cp src/index.ts dist/types.d.ts; grep -v '^export type' src/index.ts > dist/module.js; babel --root-mode upward src/index.ts -o dist/main.js"
   },
   "repository": {
     "type": "git",
@@ -92,7 +92,8 @@
     "@react-spectrum/well": "^3.4.9",
     "@react-stately/collections": "^3.10.4",
     "@react-stately/data": "^3.11.0",
-    "@react-types/shared": "^3.22.0"
+    "@react-types/shared": "^3.22.0",
+    "client-only": "^0.0.1"
   },
   "publishConfig": {
     "access": "public"

packages/@adobe/react-spectrum/package.json

@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-'use client';
+// Mark as a client only package. This will cause a build time error if you try 
+// to import it from a React Server Component in a framework like Next.js.
+import 'client-only';
 
 export {ActionGroup} from '@react-spectrum/actiongroup';
 export {Badge} from '@react-spectrum/badge';

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

@@ -52,6 +52,7 @@
     "@react-types/shared": "^3.22.0",
     "@react-types/table": "^3.9.2",
     "@swc/helpers": "^0.5.0",
+    "client-only": "^0.0.1",
     "react-aria": "^3.31.1",
     "react-stately": "^3.29.1",
     "use-sync-external-store": "^1.2.0"

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

@@ -10,6 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+// Mark as a client only package. This will cause a build time error if you try 
+// to import it from a React Server Component in a framework like Next.js.
+import 'client-only';
+
 export {Breadcrumbs, BreadcrumbsContext, Breadcrumb} from './Breadcrumbs';
 export {Button, ButtonContext} from './Button';
 export {Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, RangeCalendar, CalendarContext, RangeCalendarContext, CalendarStateContext, RangeCalendarStateContext} from './Calendar';

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

@@ -9165,6 +9165,11 @@ cli-width@^2.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
   integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 [email protected]:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/clipanion/-/clipanion-3.1.0.tgz#3e217dd6476bb9236638b07eb4673f7309839819"