Merge pull request #116 from timlrx/v2

Add back code splitting

Author: timlrx

.changeset/pre.json

@@ -19,6 +19,7 @@
     "tall-rocks-hear",
     "tricky-carpets-fly",
     "unlucky-keys-join",
-    "weak-swans-heal"
+    "weak-swans-heal",
+    "yellow-ligers-sort"
   ]
 }

.changeset/yellow-ligers-sort.md

@@ -0,0 +1,5 @@
+---
+'pliny': patch
+---
+
+Add back code splitting and add use client at the chunk level

packages/pliny/CHANGELOG.md

@@ -1,5 +1,11 @@
 # pliny
 
+## 0.1.0-beta.8
+
+### Patch Changes
+
+- 1fe37b1: Add back code splitting and add use client at the chunk level
+
 ## 0.1.0-beta.7
 
 ### Patch Changes

packages/pliny/add-use-client.mjs

@@ -1,28 +1,18 @@
 import fs from 'fs'
 import globby from 'globby'
 
-// Append "use client" to client side components
+// Append "use client" to all path chunks that contain "use" hooks
 // So these packages can be directly used in Next.js directly
+// This allows us to see support file splitting with easy next import
 ;(async () => {
-  const clientPaths = await globby([
-    'comments/Disqus.js',
-    'comments/Giscus.js',
-    'comments/Utterances.js',
-    'search/Algolia.js',
-    'search/KBar.js',
-    'search/KBarModal.js',
-    'search/KBarPortal.js',
-    'ui/NewsletterForm.js',
-    'ui/Pre.js',
-  ])
-  for (const path of clientPaths) {
-    const data = fs.readFileSync(path)
-    const fd = fs.openSync(path, 'w+')
-    const insert = Buffer.from('"use client"\n')
-    fs.writeSync(fd, insert, 0, insert.length, 0)
-    fs.writeSync(fd, data, 0, data.length, insert.length)
-    fs.close(fd, (err) => {
-      if (err) throw err
-    })
+  console.log('Added use client directive to the following files:')
+  const chunkPaths = await globby('chunk*')
+  for (const path of chunkPaths) {
+    const data = fs.readFileSync(path, 'utf8')
+    if (/useState|useEffect|useRef|useCallback|useMemo|useTheme|useRouter/.test(data)) {
+      console.log(path)
+      const insert = Buffer.from('"use client"\n')
+      fs.writeFileSync(path, insert + data)
+    }
   }
 })()

packages/pliny/package.json

@@ -2,7 +2,7 @@
   "name": "pliny",
   "description": "Main entry point for pliny components",
   "homepage": "https://github.com/timlrx/pliny",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.8",
   "type": "module",
   "exports": {
     "./*": "./*",

packages/pliny/tsup.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'tsup'
 export default defineConfig({
   entry: ['src/**/*'],
   format: 'esm',
-  splitting: false,
+  splitting: true,
   treeshake: true,
   dts: true,
   silent: true,