feat: add use client module directive support

sanity-io · Aug 6, 2023 · f73c6a1 · f73c6a1
1 parent 58098cb
commit f73c6a1
Show file tree

Hide file tree

Showing 14 changed files with 156 additions and 6 deletions.
diff --git a/playground/runtime-next-js/app/app-router/leaf.tsx b/playground/runtime-next-js/app/app-router/leaf.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+// Teeny tiny component in its own file, demonstrating how small client component
+// leafs can be in an RSC tree, and how little the impact of using `React.createContext` can be
+
+import {useResult} from 'use-client-directive'
+
+export default function Leaf() {
+  const result = useResult()
+  return <div>useContext={result}</div>
+}
diff --git a/playground/runtime-next-js/app/app-router/page.tsx b/playground/runtime-next-js/app/app-router/page.tsx
@@ -0,0 +1,18 @@
+import * as index from 'dummy-module'
+import * as extra from 'dummy-module/extra'
+
+import Leaf from './leaf'
+
+export default function IndexPage() {
+  return (
+    <div>
+      <div>
+        path={index.path}, format={index.format}, runtime={index.runtime}
+      </div>
+      <div>
+        path={extra.path}, format={extra.format}, runtime={extra.runtime}
+      </div>
+      <Leaf />
+    </div>
+  )
+}
diff --git a/playground/runtime-next-js/app/layout.tsx b/playground/runtime-next-js/app/layout.tsx
@@ -0,0 +1,12 @@
+import {Provider} from 'use-client-directive'
+
+export default function RootLayout({children}: {children: React.ReactNode}) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <Provider>{children}</Provider>
+      </body>
+    </html>
+  )
+}
diff --git a/playground/runtime-next-js/next-env.d.ts b/playground/runtime-next-js/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/playground/runtime-next-js/package.json b/playground/runtime-next-js/package.json
@@ -12,7 +12,8 @@
     "dummy-module": "workspace:*",
     "next": "^13.4.12",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "use-client-directive": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.2.18"

diff --git a/playground/runtime-next-js/tsconfig.json b/playground/runtime-next-js/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.settings",
-  "include": ["./next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["./next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["./node_modules"],
   "compilerOptions": {
     "noEmit": true,
@@ -11,6 +11,8 @@
     "module": "esnext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [{"name": "next"}],
+    "strictNullChecks": true
   }
 }
diff --git a/playground/use-client-directive/package.config.ts b/playground/use-client-directive/package.config.ts
@@ -0,0 +1,5 @@
+import {defineConfig} from '@sanity/pkg-utils'
+
+export default defineConfig({
+  tsconfig: 'tsconfig.dist.json',
+})
diff --git a/playground/use-client-directive/package.json b/playground/use-client-directive/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "use-client-directive",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "run-s clean && pkg build --strict && pkg check --strict",
+    "clean": "rimraf dist"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.18",
+    "react": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  }
+}
diff --git a/playground/use-client-directive/src/_exports.tsx b/playground/use-client-directive/src/_exports.tsx
@@ -0,0 +1,10 @@
+import {createContext, useContext} from 'react'
+
+const Context = createContext<'success' | 'failure'>('failure')
+
+/** @public */
+export const Provider = ({children}: {children: React.ReactNode}) => (
+  <Context.Provider value="success">{children}</Context.Provider>
+)
+/** @public */
+export const useResult = () => useContext(Context)
diff --git a/playground/use-client-directive/src/index.ts b/playground/use-client-directive/src/index.ts
@@ -0,0 +1,3 @@
+'use client'
+
+export * from './_exports'
diff --git a/playground/use-client-directive/tsconfig.dist.json b/playground/use-client-directive/tsconfig.dist.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.settings",
+  "include": ["./src"],
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist",
+    "emitDeclarationOnly": true
+  }
+}
diff --git a/playground/use-client-directive/tsconfig.json b/playground/use-client-directive/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.settings",
+  "include": ["./package.config.ts", "./src"],
+  "compilerOptions": {
+    "rootDir": ".",
+    "noEmit": true
+  }
+}
diff --git a/playground/use-client-directive/tsconfig.settings.json b/playground/use-client-directive/tsconfig.settings.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "jsx": "preserve",
+
+    // Strict type-checking
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+
+    // Additional checks
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+
+    // Module resolution
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml