Add exports field in package.json (#11)

Author: Bowen7

apps/docs/components/playground/preview.tsx

@@ -56,12 +56,14 @@ export function Preview({ lang, value, theme, options }: PreviewProps) {
         <RoughSVG className="flex-1" options={options}>
           <p className="my-4">Output Preview:</p>
           <div ref={previewRef}>
-            {lang === 'jsx' ? (
-              // @ts-expect-error react version
-              <JSXParser jsx={value} />
-            ) : (
-              <SVG src={value} key={optionsID} />
-            )}
+            {lang === 'jsx'
+              ? (
+                  // @ts-expect-error react version
+                  <JSXParser jsx={value} />
+                )
+              : (
+                  <SVG src={value} key={optionsID} />
+                )}
           </div>
         </RoughSVG>
       </div>

packages/react-rough-fiber/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rough-fiber",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A React renderer for rendering hand-drawn SVGs.",
   "author": "Bowen <zwxdyx@foxmail.com>(https://github.com/Bowen7)",
   "license": "MIT",
@@ -32,8 +32,8 @@
     "lint": "eslint *.ts*",
     "test": "vitest",
     "build": "rm -rf dist && tsup",
-    "pre-publish": "node scripts/pre-publish.js && npm run build",
-    "publish-next": "node scripts/pre-next-publish.js && npm run build && npm publish --tag next --access public && node scripts/post-next-publish.js"
+    "pre-publish": "node scripts/pre-publish.mjs && npm run build",
+    "publish-next": "node scripts/pre-next-publish.mjs && npm run build && npm publish --tag next --access public && node scripts/post-next-publish.mjs"
   },
   "peerDependencies": {
     "react": ">=17.0.0",
@@ -63,7 +63,7 @@
     "regenerator-runtime": "^0.13.11",
     "roughjs": "4.5.2",
     "tsconfig": "workspace:*",
-    "tsup": "^6.7.0",
+    "tsup": "^8.4.0",
     "typescript": "^4.5.2",
     "vitest": "^2.1.8"
   }

packages/react-rough-fiber/scripts/post-next-publish.js

@@ -0,0 +1,17 @@
+import fs from 'node:fs'
+import path, { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const packagePath = path.join(__dirname, '../package.json')
+const packageJSON = JSON.parse(fs.readFileSync(packagePath, 'utf8').toString())
+
+packageJSON.main = './src/index.tsx'
+delete packageJSON.types
+delete packageJSON.module
+delete packageJSON.exports
+packageJSON.version = packageJSON.version.split('-')[0]
+
+fs.writeFileSync(packagePath, `${JSON.stringify(packageJSON, null, 2)}\n`)

packages/react-rough-fiber/scripts/post-next-publish.mjs

@@ -0,0 +1,21 @@
+import fs from 'node:fs'
+import path, { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { Repository } from '@napi-rs/simple-git'
+import { addFieldsIntoPackageJSON } from './utils.mjs'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const repo = new Repository(path.resolve(__dirname, '../../../'))
+const headReference = repo.head()
+const shortSHA = headReference.target().slice(0, 7)
+const packagePath = path.join(__dirname, '../package.json')
+const packageJSON = JSON.parse(fs.readFileSync(packagePath, 'utf8').toString())
+
+addFieldsIntoPackageJSON(packageJSON)
+
+const version = packageJSON.version
+packageJSON.version = `${version}-experimental-${shortSHA}`
+
+fs.writeFileSync(packagePath, JSON.stringify(packageJSON, null, 2))

packages/react-rough-fiber/scripts/pre-next-publish.js

@@ -0,0 +1,14 @@
+import fs from 'node:fs'
+import path, { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { addFieldsIntoPackageJSON } from './utils.mjs'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const packagePath = path.join(__dirname, '../package.json')
+const packageJSON = JSON.parse(fs.readFileSync(packagePath, 'utf8').toString())
+
+addFieldsIntoPackageJSON(packageJSON)
+
+fs.writeFileSync(packagePath, JSON.stringify(packageJSON, null, 2))

packages/react-rough-fiber/scripts/pre-next-publish.mjs

@@ -0,0 +1,17 @@
+export function addFieldsIntoPackageJSON(packageJson) {
+  packageJson.main = './dist/index.js'
+  packageJson.types = './dist/index.d.ts'
+  packageJson.module = './dist/index.mjs'
+  packageJson.exports = {
+    '.': {
+      require: {
+        types: './dist/index.d.ts',
+        default: './dist/index.js',
+      },
+      default: {
+        types: './dist/index.d.mts',
+        default: './dist/index.mjs',
+      },
+    },
+  }
+}

packages/react-rough-fiber/scripts/pre-publish.js

@@ -8,7 +8,7 @@ import type {
   Options,
 } from './types'
 import Reconciler from 'react-reconciler'
-import * as ReactReconcilerConstants from 'react-reconciler/constants'
+import * as ReactReconcilerConstants from 'react-reconciler/constants.js'
 import {
   DATA_RRF_GROUP,
   HTML_NAMESPACE,

packages/react-rough-fiber/scripts/pre-publish.mjs

@@ -1,6 +1,6 @@
 import type { Options, RoughSVGProps } from './types'
 import { createElement, useEffect, useRef, useState } from 'react'
-import { LegacyRoot } from 'react-reconciler/constants'
+import { LegacyRoot } from 'react-reconciler/constants.js'
 import { createReconciler } from './renderer'
 
 export function RoughSVG({

packages/react-rough-fiber/scripts/utils.mjs

@@ -8,5 +8,4 @@ export default defineConfig({
   dts: true,
   format: ['esm', 'cjs'],
   platform: 'browser',
-  legacyOutput: true,
 });