[MULTI] switch build to tsup to fix small dependency issues

thirdweb-dev · jnsdls · Sep 1, 2022 · Sep 1, 2022 · Sep 1, 2022 · Sep 1, 2022
commit 2b72b3e899f290ec7a3c3072195335bd47f0943b
diff --git a/.changeset/smooth-items-poke.md b/.changeset/smooth-items-poke.md
@@ -0,0 +1,8 @@
+---
+"thirdweb": minor
+"@thirdweb-dev/react": minor
+"@thirdweb-dev/sdk": minor
+"@thirdweb-dev/storage": minor
+---
+
+switch build to tsup
diff --git a/package.json b/package.json
@@ -19,11 +19,10 @@
     "prettier": "^2.7.1",
     "turbo": "latest",
     "yarn-deduplicate": "^5.0.2",
-    "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0"
   },
   "scripts": {
-    "postinstall": "yarn-deduplicate yarn.lock && yarn patch-package",
+    "postinstall": "yarn-deduplicate yarn.lock",
     "test": "turbo run test",
     "e2e": "turbo run e2e",
     "build": "turbo run build",

diff --git a/packages/cli/src/common/feature-detector.ts b/packages/cli/src/common/feature-detector.ts
@@ -5,14 +5,11 @@ import { logger, spinner, warn, info } from "../core/helpers/logger";
 import { createContractsPrompt } from "../core/helpers/selector";
 import { ContractFeatures, Feature } from "../core/interfaces/ContractFeatures";
 import { ContractPayload } from "../core/interfaces/ContractPayload";
-import { detectFeatures } from "@thirdweb-dev/sdk";
-import { FeatureWithEnabled } from "@thirdweb-dev/sdk/dist/declarations/src/constants/contract-features";
+import { detectFeatures, FeatureWithEnabled } from "@thirdweb-dev/sdk";
 import chalk from "chalk";
 import ora from "ora";
 import path from "path";
 
-const { MultiSelect } = require("enquirer");
-
 export async function detectExtensions(options: any) {
   logger.setSettings({
     minLevel: options.debug ? "debug" : "info",

diff --git a/packages/react/.babelrc b/packages/react/.babelrc
diff --git a/packages/react/config/api-extractor.json b/packages/react/config/api-extractor.json
@@ -45,7 +45,7 @@
    *
    * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
    */
-  "mainEntryPointFilePath": "<projectFolder>/dist/thirdweb-dev-react.cjs.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/dist/index.d.ts",
 
   /**
    * A list of NPM package names whose exports should be treated as part of this package.

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -8,30 +8,27 @@
   },
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",
-  "main": "dist/thirdweb-dev-react.cjs.js",
-  "types": "dist/thirdweb-dev-react.cjs.d.ts",
-  "module": "dist/thirdweb-dev-react.esm.js",
-  "browser": {
-    "./dist/thirdweb-dev-react.cjs.js": "./dist/thirdweb-dev-react.browser.cjs.js",
-    "./dist/thirdweb-dev-react.esm.js": "./dist/thirdweb-dev-react.browser.esm.js"
-  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*"
   ],
   "private": false,
   "scripts": {
-    "dev": "preconstruct watch",
     "lint": "eslint src/",
     "fix": "eslint src/ --fix",
     "extract-api": "api-extractor run --local",
     "generate:md-docs": "yarn api-documenter markdown -i ./temp -o ./docs",
     "generate-snippets": "node ./scripts/generate-snippets.mjs",
-    "build": "tsc && preconstruct build",
+    "build": "tsup src/index.ts",
     "e2e": "yarn test-ct",
     "test-ct": "playwright test -c playwright-ct.config.ts"
   },
   "sideEffects:": false,
   "devDependencies": {
+    "@zag-js/menu": "^0.1.11",
+    "@zag-js/react": "^0.1.13",
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
@@ -41,7 +38,6 @@
     "@microsoft/tsdoc": "^0.14.1",
     "@playwright/experimental-ct-react": "^1.25.1",
     "@playwright/test": "^1.25.1",
-    "@preconstruct/cli": "^2.2.1",
     "@types/color": "^3.0.3",
     "@types/mime": "^3.0.1",
     "@types/react": "^18.0.5",
@@ -58,6 +54,7 @@
     "prettier": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tsup": "^6.2.3",
     "typescript": "^4.6.2"
   },
   "dependencies": {
@@ -69,8 +66,6 @@
     "@tanstack/react-query": "^4.0.10",
     "@thirdweb-dev/sdk": "*",
     "@thirdweb-dev/storage": "*",
-    "@zag-js/menu": "^0.1.11",
-    "@zag-js/react": "^0.1.13",
     "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.2",
     "detect-browser": "^5.3.0",

diff --git a/packages/react/src/Provider.tsx b/packages/react/src/Provider.tsx
@@ -25,8 +25,8 @@ import {
   SignerOrProvider,
   ThirdwebSDK,
   getProviderForNetwork,
+  SDKOptionsOutput,
 } from "@thirdweb-dev/sdk";
-import { SDKOptionsOutput } from "@thirdweb-dev/sdk/dist/declarations/src/schema";
 import type { IStorage } from "@thirdweb-dev/storage";
 import { Signer } from "ethers";
 import React, { createContext, useEffect, useMemo } from "react";

diff --git a/packages/react/src/components/Web3Button/Web3Button.spec.tsx b/packages/react/src/components/Web3Button/Web3Button.spec.tsx
@@ -7,7 +7,7 @@ test.use({ viewport: { width: 500, height: 500 } });
 test("should render the connect wallet button", async ({ mount }) => {
   const component = await mount(
     <ThirdwebProvider desiredChainId={1}>
-      <Web3Button contractAddress="0x123" functionName="foo">
+      <Web3Button contractAddress="0x123" action={() => undefined}>
         Do the thing
       </Web3Button>
     </ThirdwebProvider>,

diff --git a/packages/react/src/components/Web3Button/index.tsx b/packages/react/src/components/Web3Button/index.tsx
@@ -11,55 +11,43 @@ import { ConnectWallet } from "../ConnectWallet";
 import { Button } from "../shared/Button";
 import { ThemeProvider, ThemeProviderProps } from "../shared/ThemeProvider";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import {
-  SmartContract,
-  TransactionError,
-  TransactionResult,
-} from "@thirdweb-dev/sdk";
+import { SmartContract } from "@thirdweb-dev/sdk";
 import type { CallOverrides } from "ethers";
 import { PropsWithChildren, useMemo } from "react";
 import invariant from "tiny-invariant";
 
-interface SharedWeb3ButtonProps extends ThemeProviderProps {
+type ActionFn = (contract: SmartContract) => any;
+
+interface Web3ButtonProps<TActionFn extends ActionFn>
+  extends ThemeProviderProps {
   contractAddress: `0x${string}` | `${string}.eth` | string;
 
   overrides?: CallOverrides;
   // called with the result
-  onSuccess?: (result: TransactionResult) => void;
+  onSuccess?: (result: Awaited<ReturnType<TActionFn>>) => void;
   // called with any error that might happen
-  onError?: (error: TransactionError) => void;
+  onError?: (error: Error) => void;
   // called when the function is called
   onSubmit?: () => void;
   // disabled state
   isDisabled?: boolean;
+  // the fn to execute
+  action: TActionFn;
 }
 
-type ExecutableFn = (contract: SmartContract) => any;
-
-type Web3ButtonPropsOptinalProps<TExecutableFn extends ExecutableFn> =
-  | {
-      functionName: string;
-      params?: unknown[] | (() => Promise<unknown[]>);
-      action?: never;
-    }
-  | { functionName?: never; params?: never; action: TExecutableFn };
-
-type Web3ButtonProps<TExecutableFn extends ExecutableFn> =
-  SharedWeb3ButtonProps & Web3ButtonPropsOptinalProps<TExecutableFn>;
-
 /**
  * A component that allows the user to call an on-chain function on a contract.
  *
  * The button has to be wrapped in a `ThirdwebProvider` in order to function.
  *
  * @example
  * ```javascript
- * import { Web3Button } from '@thirdweb-dev/react';
+ * import { Web3Button } from "@thirdweb-dev/react";
  *
  * const App = () => {
  *  return (
  *   <div>
- *     <Web3Button contractAddress="0x..." functionName="mint" />
+ *     <Web3Button contractAddress="0x..." action={(contract) => contract.erc721.transfer("0x...", 1)} />
  *   </div>
  * )
  * }
@@ -68,19 +56,17 @@ type Web3ButtonProps<TExecutableFn extends ExecutableFn> =
  *
  * @beta
  */
-export const Web3Button = <TExecutableFn extends ExecutableFn>({
+export const Web3Button = <TAction extends ActionFn>({
   contractAddress,
   overrides,
   onSuccess,
   onError,
   onSubmit,
   isDisabled,
   children,
-  functionName,
-  params,
   action,
   ...themeProps
-}: PropsWithChildren<Web3ButtonProps<TExecutableFn>>) => {
+}: PropsWithChildren<Web3ButtonProps<TAction>>) => {
   const address = useAddress();
   const walletChainId = useChainId();
   const sdkChainId = useActiveChainId();
@@ -109,34 +95,24 @@ export const Web3Button = <TExecutableFn extends ExecutableFn>({
           );
         }
       }
-      if (!contractQuery.contract) {
-        throw new Error("contract not ready yet");
-      }
-      if (action) {
-        if (onSubmit) {
-          onSubmit();
-        }
-        return await action(contractQuery.contract);
-      }
-
-      const vars = typeof params === "function" ? await params() : params || [];
-      const withOverrides =
-        vars && overrides
-          ? [...vars, overrides]
-          : overrides
-          ? [overrides]
-          : vars;
-
-      invariant(functionName, "functionName is required");
+      invariant(contractQuery.contract, "contract is not ready yet");
 
       if (onSubmit) {
         onSubmit();
       }
-      return await contractQuery.contract.call(functionName, ...withOverrides);
+      return await action(contractQuery.contract);
     },
     {
-      onSuccess,
-      onError,
+      onSuccess: (res) => {
+        if (onSuccess) {
+          onSuccess(res);
+        }
+      },
+      onError: (err) => {
+        if (onError) {
+          onError(err as Error);
+        }
+      },
       onSettled: () =>
         queryClient.invalidateQueries(
           createCacheKeyWithNetwork(

diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -11,11 +11,9 @@ import type {
   NFTMetadata,
   Price,
   SignatureDrop,
-} from "@thirdweb-dev/sdk";
-import {
-  NFTMetadataInput,
   NFTMetadataOrUri,
-} from "@thirdweb-dev/sdk/dist/declarations/src/schema";
+  NFTMetadataInput,
+} from "@thirdweb-dev/sdk";
 import type { BigNumberish } from "ethers";
 
 /**

diff --git a/packages/sdk/.babelrc b/packages/sdk/.babelrc
diff --git a/packages/sdk/config/api-extractor.json b/packages/sdk/config/api-extractor.json
@@ -45,7 +45,7 @@
    *
    * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
    */
-  "mainEntryPointFilePath": "<projectFolder>/dist/thirdweb-dev-sdk.cjs.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/dist/index.d.ts",
 
   /**
    * A list of NPM package names whose exports should be treated as part of this package.

diff --git a/packages/sdk/e2e/basic.test.ts b/packages/sdk/e2e/basic.test.ts
@@ -10,6 +10,8 @@ describe("node", () => {
       "./e2e/node-scripts/basic.js",
     );
 
+    console.log("stderr", stderr);
+
     expect(code).to.equal(0);
     expect(stdout[0]).to.contain("mintED Toasts");
     expect(stderr.length).to.equal(0);