Switch to Preconstruct for library building

next-cloudinary/babel.config.js

@@ -1,9 +1,14 @@
 module.exports = api => {
+  const presets = []
+
   if ( api.env('test') ) {
-    return {
-      presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
-    }
+    presets.push([['@babel/preset-env', {targets: {node: 'current'}}]]);
   }
 
-  return {};
-};
+  presets.push(['@babel/preset-react', { runtime: 'automatic' }]);
+  presets.push(['@babel/preset-typescript']);
+
+  return {
+    presets
+  };
+};

next-cloudinary/package.json

@@ -2,13 +2,30 @@
   "name": "next-cloudinary",
   "version": "6.13.0",
   "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "source": "src/index.ts",
+  "main": "dist/next-cloudinary.cjs.js",
+  "module": "dist/next-cloudinary.esm.js",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/next-cloudinary.cjs.mjs",
+        "default": "./dist/next-cloudinary.cjs.js"
+      },
+      "module": "./dist/next-cloudinary.esm.js",
+      "import": "./dist/next-cloudinary.cjs.mjs",
+      "default": "./dist/next-cloudinary.cjs.js"
+    },
+    "./package.json": "./package.json",
+    "./cld-video-player.css": "./dist/cld-video-player.css",
+    "./dist/cld-video-player.css": "./dist/cld-video-player.css",
+    "./cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+    "./dist/cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+    "./cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg",
+    "./dist/cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg"
+  },
+  "types": "./dist/next-cloudinary.cjs.d.ts",
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "preconstruct build && tsx scripts/copy-assets.ts",
+    "dev": "preconstruct watch",
     "prepublishOnly": "cp ../README.md . && cp ../LICENSE . && pnpm build",
     "postpublish": "rm ./README.md && rm ./LICENSE",
     "test": "vitest run",
@@ -22,19 +39,37 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@tsconfig/recommended": "^1.0.7",
     "@types/node": "^22.0.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "dotenv": "^16.4.5",
     "mkdirp": "^3.0.1",
-    "tsup": "^8.2.3",
+    "tsx": "^4.19.1",
     "typescript": "^5.5.4",
     "vitest": "^2.0.5"
   },
   "peerDependencies": {
     "next": "^12 || ^13 || ^14 || >=15.0.0-rc",
     "react": "^17 || ^18 || >=19.0.0-beta"
+  },
+  "preconstruct": {
+    "exports": {
+      "importConditionDefaultExport": "default",
+      "extra": {
+        "./cld-video-player.css": "./dist/cld-video-player.css",
+        "./dist/cld-video-player.css": "./dist/cld-video-player.css",
+        "./cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+        "./dist/cloudinary_icon_for_black_bg.svg": "./dist/cloudinary_icon_for_black_bg.svg",
+        "./cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg",
+        "./dist/cloudinary_icon_for_white_bg.svg": "./dist/cloudinary_icon_for_white_bg.svg"
+      }
+    },
+    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
+      "importsConditions": true
+    }
   }
 }

next-cloudinary/scripts/copy-assets.ts

@@ -0,0 +1,78 @@
+import path from 'path';
+import { createWriteStream } from 'fs';
+import { mkdirp } from 'mkdirp';
+import https from 'https';
+
+const PLAYER_VERSION = '1.11.1';
+
+const assets = [
+  {
+    uri: `https://unpkg.com/cloudinary-video-player@${PLAYER_VERSION}/dist/cld-video-player.min.css`,
+    name: 'cld-video-player.css'
+  },
+  {
+    directory: 'fonts',
+    assets: [
+      `https://unpkg.com/cloudinary-video-player@${PLAYER_VERSION}/dist/fonts/cloudinary_icon_for_black_bg.svg`,
+      `https://unpkg.com/cloudinary-video-player@${PLAYER_VERSION}/dist/fonts/cloudinary_icon_for_white_bg.svg`,
+    ]
+  }
+];
+
+let hasWrittenAssets = false;
+
+async function copyAssets() {
+  const rootPath = path.join(__dirname, '../');
+  const distPath = path.join(rootPath, 'dist');
+
+  if ( hasWrittenAssets ) return;
+
+  await mkdirp(distPath);
+
+  for ( const asset of assets ) {
+    if ( typeof asset === 'string' || typeof asset.uri === 'string' ) {
+
+      let name = asset.name;
+      let uri = asset.uri;
+
+      if ( typeof asset === 'string' ) {
+        name = path.basename(asset);
+        uri = asset;
+      }
+
+      const writePath = path.join(distPath, name);
+      await downloadFile(uri, writePath);
+
+      console.log(`Wrote ${uri} to ${writePath}`);
+    } else if ( typeof asset.directory === 'string' ) {
+      await mkdirp(path.join(distPath, asset.directory));
+
+      for ( const dirAsset of asset.assets ) {
+        const writePath = path.join(distPath, asset.directory, path.basename(dirAsset));
+        await downloadFile(dirAsset, writePath);
+        console.log(`Wrote ${dirAsset} to ${writePath}`);
+      }
+    }
+  }
+
+  hasWrittenAssets = true;
+}
+
+/**
+ * downloadFile
+ */
+
+function downloadFile(assetUrl: string, writePath: string) {
+  return new Promise<void>((resolve) => {
+    const file = createWriteStream(writePath);
+    https.get(assetUrl, function(response) {
+      response.pipe(file);
+      file.on('finish', () => {
+        file.close();
+        resolve();
+      });
+    });
+  })
+}
+
+copyAssets();

next-cloudinary/src/components/CldImage/CldImage.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useCallback, forwardRef, SyntheticEvent } from 'react';
+'use client';
+import { useState, useCallback, forwardRef, SyntheticEvent } from 'react';
 import Image, { ImageProps } from 'next/image';
 import { pollForProcessingImage } from '@cloudinary-util/util';
 import { transformationPlugins } from '@cloudinary-util/url-loader';

next-cloudinary/src/components/CldOgImage/CldOgImage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Head from 'next/head';
 
 import { CldImageProps } from '../CldImage/CldImage';

next-cloudinary/src/components/CldUploadButton/CldUploadButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import CldUploadWidget, { CldUploadWidgetProps } from '../CldUploadWidget';
 

next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react';
+'use client';
+import { useState, useEffect, useRef } from 'react';
 import Script from 'next/script';
 import { generateSignatureCallback, generateUploadWidgetResultCallback, getUploadWidgetOptions, UPLOAD_WIDGET_EVENTS } from '@cloudinary-util/url-loader'
 import {

next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx

@@ -1,4 +1,5 @@
-import React, {useRef, MutableRefObject, useEffect} from 'react';
+'use client';
+import {useRef, MutableRefObject, useEffect} from 'react';
 import Script from 'next/script';
 import Head from 'next/head';
 import { CloudinaryVideoPlayer } from '@cloudinary-util/types';

next-cloudinary/src/constants/analytics.ts

@@ -12,4 +12,4 @@ function normalizeVersion(version: string) {
     normalized = normalized.split('-')[0];
   }
   return normalized;
-}
+}

next-cloudinary/src/lib/util.ts

@@ -4,7 +4,7 @@
  */
 
 export function triggerOnIdle(callback: any) {
-  if ( window && 'requestIdleCallback' in window ) {
+  if ( typeof window !== undefined && 'requestIdleCallback' in window ) {
     return requestIdleCallback(callback);
   }
   return setTimeout(() => callback(), 1);

next-cloudinary/tests/nextjs-app/app/UploadWidget.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { CldUploadWidget } from "../../..";
+
+export function UploadWidget() {
+  return (
+    <CldUploadWidget
+      uploadPreset="next-cloudinary-unsigned"
+      options={{
+        sources: ["local", "camera"],
+      }}
+    >
+      {({ open }) => {
+        return <button onClick={() => open()}>Upload</button>;
+      }}
+    </CldUploadWidget>
+  );
+}

next-cloudinary/tests/nextjs-app/app/page.tsx

@@ -1,10 +1,9 @@
-"use client";
-
-import { CldImage, CldUploadWidget, CldUploadButton, CldVideoPlayer } from '../../../';
+import { CldImage, CldUploadButton, CldVideoPlayer } from '../../../';
 import { getCldImageUrl, getCldOgImageUrl, getCldVideoUrl } from '../../../';
-
 import '../../../dist/cld-video-player.css';
 
+import { UploadWidget } from './UploadWidget';
+
 export default function Home() {
   console.log(getCldImageUrl({
     src: 'images/turtle'
@@ -27,18 +26,7 @@ export default function Home() {
         marginBottom: '2em'
       }}>
         <h2>CldUploadWidget</h2>
-        <CldUploadWidget
-          uploadPreset="next-cloudinary-unsigned"
-          options={{
-            sources: ['local', 'camera']
-          }}
-        >
-          {({ open }) => {
-            return (
-              <button onClick={() => open()}>Upload</button>
-            )
-          }}
-        </CldUploadWidget>
+        <UploadWidget />
       </div>
       <div style={{
         marginBottom: '2em'

next-cloudinary/tsconfig.json

@@ -5,7 +5,7 @@
     "declarationMap": true,
     "emitDeclarationOnly": true,
     "esModuleInterop": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["dom", "esnext"],
     "module": "nodenext",
     "moduleResolution": "nodenext",
@@ -17,7 +17,7 @@
       {
         "name": "next"
       }
-    ],
+    ]
   },
   "exclude": ["node_modules"]
-}
+}