Add SSR testing playground setup

.yarnrc.yml

@@ -4,17 +4,17 @@ changesetBaseRefs:
   - upstream/main
 
 changesetIgnorePatterns:
-  - '**/*.test.{ts,tsx}'
-  - '**/*.stories.{ts,tsx}'
+  - "**/*.test.{ts,tsx}"
+  - "**/*.stories.{ts,tsx}"
 
 nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: '@yarnpkg/plugin-workspace-tools'
+    spec: "@yarnpkg/plugin-workspace-tools"
   - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: '@yarnpkg/plugin-typescript'
+    spec: "@yarnpkg/plugin-typescript"
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: '@yarnpkg/plugin-version'
+    spec: "@yarnpkg/plugin-version"
 
-yarnPath: .yarn/releases/yarn-berry.js
+yarnPath: .yarn/releases/yarn-2.4.0.cjs

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "license": "MIT",
   "workspaces": [
+    "ssr-testing",
     "packages/*/*"
   ],
   "scripts": {
@@ -19,8 +20,8 @@
     "build:config": "mv tsconfig.json tsconfig.tmp.json && mv tsconfig.production.json tsconfig.json",
     "build:packages": "parcel build 'packages/*/*/' --no-cache",
     "build:cleanup": "mv tsconfig.json tsconfig.production.json && mv tsconfig.tmp.json tsconfig.json",
-    "publish": "yarn bump && yarn build && yarn workspaces foreach -pv --exclude primitives npm publish --tolerate-republish --access public",
-    "clean": "yarn workspaces foreach -pv --exclude primitives run clean",
+    "publish": "yarn bump && yarn build && yarn workspaces foreach -pv --exclude primitives --exclude ssr-testing npm publish --tolerate-republish --access public",
+    "clean": "yarn workspaces foreach -pv --exclude primitives --exclude ssr-testing run clean",
     "reset": "yarn clean && rm -rf node_modules .yarn/cache .parcel-cache",
     "bump": "yarn version apply --all",
     "bump:check": "yarn version check"

ssr-testing/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

ssr-testing/README.md

@@ -0,0 +1,13 @@
+# ssr-testing
+
+This is a testing playground for SSR support in our primitives using a [Next.js](https://nextjs.org/) project.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```

ssr-testing/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

ssr-testing/next.config.js

@@ -0,0 +1,19 @@
+const path = require('path');
+const withTM = require('next-transpile-modules')([]);
+
+module.exports = withTM({
+  webpack(config) {
+    // https://github.com/josephluck/next-typescript-monorepo/blob/master/blog/next.config.js
+    const babelRule = config.module.rules.find((rule) =>
+      rule.use && Array.isArray(rule.use)
+        ? rule.use.find((u) => u.loader === 'next-babel-loader')
+        : rule.use.loader === 'next-babel-loader'
+    );
+
+    if (babelRule) {
+      babelRule.include.push(path.resolve('../'));
+    }
+
+    return config;
+  },
+});

ssr-testing/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "ssr-testing",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "10.0.6",
+    "next-transpile-modules": "^6.3.0",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^17",
+    "@types/react-dom": "^17"
+  }
+}

ssr-testing/pages/_app.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

ssr-testing/pages/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Home</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main>
+        <h1>Components</h1>
+        <ul>
+          <li>
+            <Link href="./radio-group">RadioGroup</Link>
+          </li>
+        </ul>
+      </main>
+    </>
+  );
+}

ssr-testing/pages/radio-group.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { RadioGroup, RadioGroupItem, RadioGroupIndicator } from '@radix-ui/react-radio-group';
+
+export default function RadioGroupPage() {
+  return (
+    <RadioGroup defaultValue="1">
+      <RadioGroupItem value="1">
+        <RadioGroupIndicator>x</RadioGroupIndicator>
+      </RadioGroupItem>
+      <RadioGroupItem value="2">
+        <RadioGroupIndicator>x</RadioGroupIndicator>
+      </RadioGroupItem>
+      <RadioGroupItem value="3">
+        <RadioGroupIndicator>x</RadioGroupIndicator>
+      </RadioGroupItem>
+    </RadioGroup>
+  );
+}

ssr-testing/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "module": "esnext",
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}