Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: npm link issue #244

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

fix: npm link issue #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd88bf4
fix: npm link issue
rodrigopavezi Dec 6, 2024
8470eb4
fix: readme
rodrigopavezi Dec 6, 2024
b99468c
fix: remove empty line
MantisClone Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ cd web-components
# Install all dependencies
npm install

# Use local packages instead of the deployed ones
npm link @requestnetwork/payment-detection @requestnetwork/payment-processor @requestnetwork/web3-signature @requestnetwork/currency @requestnetwork/request-client.js @requestnetwork/types @requestnetwork/smart-contracts

# Build all packages locally
npm run build

Expand Down
56 changes: 35 additions & 21 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
"description": "Request Network Web Components",
"main": "index.js",
"workspaces": [
"./packages/*",
"./shared/*"
"./packages/*"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
Expand All @@ -22,7 +21,8 @@
"unlink:all": "for d in packages/*; do (cd $d && npm unlink); done"
},
"devDependencies": {
"turbo": "^2.0.6"
"turbo": "^2.0.6",
"graphql": "16.8.1"
Comment on lines +24 to +25
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Remove the graphql dependency as it's not directly used in the codebase

The graphql package appears to be a transitive dependency required by other packages (like graphql-request and graphql-tag) rather than being directly used in the codebase. Since these packages manage their own GraphQL dependency requirements through their peerDependencies, there's no need to explicitly declare graphql in the root package.json.

🔗 Analysis chain

Verify the necessity and version of the graphql dependency

The addition of graphql dependency seems unrelated to the npm linking fix. Please clarify:

  1. Why this dependency is needed
  2. If version 16.8.1 is the latest stable version

Let me check if there are actual GraphQL usage patterns in the code, not just references in package files.

Let me fix the syntax error and try again.

Let me try one final search without file type restrictions.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if graphql is used in the codebase
rg -l "graphql"

# Check latest version and security advisories
curl -s https://registry.npmjs.org/graphql/latest | jq '.version'

Length of output: 121

Script:

#!/bin/bash
# Search for GraphQL schema definitions, queries, or imports
rg -l "from ['\"]graphql['\"]|require\(['\"]graphql['\"]\)|import.*graphql|gql`|schema.*graphql"

# Check if there are .graphql files
fd -e graphql

# Look for GraphQL type definitions or operations
ast-grep --pattern 'gql`$$$`'
ast-grep --pattern 'import { $$ } from "graphql"'

Length of output: 116

Script:

#!/bin/bash
# Search for GraphQL schema definitions, queries, or imports
rg -l 'from "graphql"|require\("graphql"\)|import.*graphql'

# Check if there are .graphql files
fd -e graphql

# Look for GraphQL related code
rg -A 3 'graphql' --type ts --type js --type tsx --type jsx

Length of output: 165

Script:

#!/bin/bash
# Search for any GraphQL usage in the codebase
rg -A 3 'graphql' --type-not lock --type-not json

# Check package-lock.json for GraphQL dependencies
rg '"graphql"' package-lock.json -A 5

Length of output: 1149

},
"author": "",
"license": "MIT",
Expand Down
16 changes: 8 additions & 8 deletions packages/create-invoice-form/src/lib/create-invoice-form.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,24 @@
import { Config as WagmiConfig } from "wagmi";
// Types
import { type GetAccountReturnType } from "@wagmi/core";
import type { IConfig } from "@requestnetwork/shared-types";
import { APP_STATUS } from "@requestnetwork/shared-types/enums";
import type { IConfig } from "@requestnetwork/shared/types";
import { APP_STATUS } from "@requestnetwork/shared/types/enums";
import type { RequestNetwork } from "@requestnetwork/request-client.js";
import { Types } from "@requestnetwork/request-client.js";
import { CurrencyTypes } from "@requestnetwork/types";
// Utils
import { getInitialFormData, prepareRequestParams } from "./utils";
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
import { config as defaultConfig } from "@requestnetwork/shared/utils/config";
import { calculateInvoiceTotals } from "@requestnetwork/shared/utils/invoiceTotals";
import {
getCurrencySupportedNetworksForConversion,
initializeCurrencyManager,
} from "@requestnetwork/shared-utils/initCurrencyManager";
} from "@requestnetwork/shared/utils/initCurrencyManager";
// Components
import { InvoiceForm, InvoiceView } from "./invoice";
import Button from "@requestnetwork/shared-components/button.svelte";
import Status from "@requestnetwork/shared-components/status.svelte";
import Modal from "@requestnetwork/shared-components/modal.svelte";
import Button from "@requestnetwork/shared/components/button.svelte";
import Status from "@requestnetwork/shared/components/status.svelte";
import Modal from "@requestnetwork/shared/components/modal.svelte";
import { EncryptionTypes } from '@requestnetwork/types';

export let config: IConfig;
Expand Down
12 changes: 6 additions & 6 deletions packages/create-invoice-form/src/lib/invoice/form-view.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<script lang="ts">
// Components
import Button from "@requestnetwork/shared-components/button.svelte";
import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
import Button from "@requestnetwork/shared/components/button.svelte";
import PoweredBy from "@requestnetwork/shared/components/powered-by.svelte";

// Icons
import Close from "@requestnetwork/shared-icons/close.svelte";
import Close from "@requestnetwork/shared/icons/close.svelte";

// Types
import type { IConfig, CustomFormData } from "@requestnetwork/shared-types";
import { CurrencyTypes } from "@requestnetwork/types";

// Utils
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
import { formatDate } from "@requestnetwork/shared-utils/formatDate";
import { config as defaultConfig } from "@requestnetwork/shared/utils/config";
import { calculateItemTotal } from "@requestnetwork/shared/utils/invoiceTotals";
import { formatDate } from "@requestnetwork/shared/utils/formatDate";

export let defaultCurrencies;
export let config: IConfig;
Expand Down
22 changes: 11 additions & 11 deletions packages/create-invoice-form/src/lib/invoice/form.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<script lang="ts">
// Components
import Button from "@requestnetwork/shared-components/button.svelte";
import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
import Input from "@requestnetwork/shared-components/input.svelte";
import Labels from "@requestnetwork/shared-components/labels.svelte";
import Accordion from "@requestnetwork/shared-components/accordion.svelte";
import Button from "@requestnetwork/shared/components/button.svelte";
import Dropdown from "@requestnetwork/shared/components/dropdown.svelte";
import Input from "@requestnetwork/shared/components/input.svelte";
import Labels from "@requestnetwork/shared/components/labels.svelte";
import Accordion from "@requestnetwork/shared/components/accordion.svelte";

// Icons
import Trash from "@requestnetwork/shared-icons/trash.svelte";
import Plus from "@requestnetwork/shared-icons/plus.svelte";
import Close from "@requestnetwork/shared-icons/close.svelte";
import Trash from "@requestnetwork/shared/icons/trash.svelte";
import Plus from "@requestnetwork/shared/icons/plus.svelte";
import Close from "@requestnetwork/shared/icons/close.svelte";

// Types
import type { IConfig, CustomFormData } from "@requestnetwork/shared-types";

// Utils
import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
import { inputDateFormat } from "@requestnetwork/shared-utils/formatDate";
import { calculateItemTotal } from "@requestnetwork/shared/utils/invoiceTotals";
import { checkAddress } from "@requestnetwork/shared/utils/checkEthAddress";
import { inputDateFormat } from "@requestnetwork/shared/utils/formatDate";
import { Types } from "@requestnetwork/request-client.js";
import { CurrencyTypes } from "@requestnetwork/types";
import isEmail from "validator/es/lib/isEmail";
Expand Down
2 changes: 1 addition & 1 deletion packages/create-invoice-form/src/lib/utils/prepareRequest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { parseUnits, zeroAddress, getAddress } from "viem";
import { Types, Utils } from "@requestnetwork/request-client.js";
import type { CustomFormData } from "@requestnetwork/shared-types";
import type { CustomFormData } from "@requestnetwork/shared/types";
import { CurrencyTypes } from "@requestnetwork/types";

interface IRequestParams {
Expand Down
3 changes: 3 additions & 0 deletions packages/create-invoice-form/vite.wc.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
resolve: {
preserveSymlinks: true,
},
define: {
global: "globalThis",
},
Expand Down
1 change: 1 addition & 0 deletions packages/invoice-dashboard/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"@requestnetwork/payment-detection": "0.47.0",
"@requestnetwork/payment-processor": "0.50.0",
"@requestnetwork/request-client.js": "0.52.0",
"@requestnetwork/shared": "*",
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider using a more specific version constraint

Using "*" for @requestnetwork/shared version could lead to unexpected behavior:

  1. It may pull in incompatible versions during npm install
  2. It could complicate npm linking if versions mismatch

Consider using a specific version range (e.g., "^1.0.0") to ensure stability.

Copy link
Member

@MantisClone MantisClone Dec 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this actually work? I remember @aimensahnoun tried this when he was first setting up the shared packages

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MantisClone, I see. If using * for @requestnetwork/shared is required to maintain the npm link between the SDK and the web components, and previous attempts with specific versions didn't work, then it's acceptable to keep it as *.

Thanks for letting me know.

(_/)
(•_•)
(/ )

✏️ Learnings added 
Learnt from: MantisClone
PR: RequestNetwork/web-components#244
File: packages/invoice-dashboard/package.json:43-43
Timestamp: 2024-12-07T00:39:09.756Z
Learning: When using npm link between the SDK and web components, specifying `*` as the version constraint for `@requestnetwork/shared` is necessary, as using specific versions can cause issues.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

"@wagmi/connectors": "^5.5.3",
"@wagmi/core": "^2.15.2",
"ethers": "^5.7.2",
Expand Down
4 changes: 2 additions & 2 deletions packages/invoice-dashboard/src/lib/dashboard/drawer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import type { IConfig } from "@requestnetwork/shared-types";
import Close from "@requestnetwork/shared-icons/close.svelte";
import type { IConfig } from "@requestnetwork/shared/types";
import Close from "@requestnetwork/shared/icons/close.svelte";

export let active = false;
export let onClose: () => void;
Expand Down
22 changes: 11 additions & 11 deletions packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@
import { CurrencyTypes } from "@requestnetwork/types";
import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
// Components
import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
import Accordion from "@requestnetwork/shared-components/accordion.svelte";
import Button from "@requestnetwork/shared-components/button.svelte";
import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
import StatusLabel from "@requestnetwork/shared/components/status-label.svelte";
import Accordion from "@requestnetwork/shared/components/accordion.svelte";
import Button from "@requestnetwork/shared/components/button.svelte";
import Tooltip from "@requestnetwork/shared/components/tooltip.svelte";
// Icons
import Check from "@requestnetwork/shared-icons/check.svelte";
import Download from "@requestnetwork/shared-icons/download.svelte";
import Check from "@requestnetwork/shared/icons/check.svelte";
import Download from "@requestnetwork/shared/icons/download.svelte";
// Utils
import { formatDate } from "@requestnetwork/shared-utils/formatDate";
import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
import { formatDate } from "@requestnetwork/shared/utils/formatDate";
import { checkStatus } from "@requestnetwork/shared/utils/checkStatus";
import { calculateItemTotal } from "@requestnetwork/shared/utils/invoiceTotals";
import { exportToPDF } from "@requestnetwork/shared/utils/generateInvoice";
import { getCurrencyFromManager } from "@requestnetwork/shared/utils/getCurrency";
import { onMount } from "svelte";
import { formatUnits } from "viem";
import { getConversionPaymentValues } from "../../utils/getConversionPaymentValues";
Expand Down
46 changes: 23 additions & 23 deletions packages/invoice-dashboard/src/lib/view-requests.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,47 +5,47 @@
<script lang="ts">
import { getAccount, watchAccount } from "@wagmi/core";
// Components
import Copy from "@requestnetwork/shared-components/copy.svelte";
import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
import Switch from "@requestnetwork/shared-components/switch.svelte";
import Input from "@requestnetwork/shared-components/input.svelte";
import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
import Toaster from "@requestnetwork/shared-components/sonner.svelte";
import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
import TxType from "@requestnetwork/shared-components/tx-type.svelte";
import DashboardSkeleton from "@requestnetwork/shared-components/dashboard-skeleton.svelte";
import Copy from "@requestnetwork/shared/components/copy.svelte";
import Dropdown from "@requestnetwork/shared/components/dropdown.svelte";
import Switch from "@requestnetwork/shared/components/switch.svelte";
import Input from "@requestnetwork/shared/components/input.svelte";
import PoweredBy from "@requestnetwork/shared/components/powered-by.svelte";
import StatusLabel from "@requestnetwork/shared/components/status-label.svelte";
import Toaster from "@requestnetwork/shared/components/sonner.svelte";
import Tooltip from "@requestnetwork/shared/components/tooltip.svelte";
import TxType from "@requestnetwork/shared/components/tx-type.svelte";
import DashboardSkeleton from "@requestnetwork/shared/components/dashboard-skeleton.svelte";
import { toast } from "svelte-sonner";
// Icons
import ChevronDown from "@requestnetwork/shared-icons/chevron-down.svelte";
import ChevronLeft from "@requestnetwork/shared-icons/chevron-left.svelte";
import ChevronRight from "@requestnetwork/shared-icons/chevron-right.svelte";
import ChevronUp from "@requestnetwork/shared-icons/chevron-up.svelte";
import Download from "@requestnetwork/shared-icons/download.svelte";
import Search from "@requestnetwork/shared-icons/search.svelte";
import Network from "@requestnetwork/shared-icons/network/network-icon.svelte";
import ChevronDown from "@requestnetwork/shared/icons/chevron-down.svelte";
import ChevronLeft from "@requestnetwork/shared/icons/chevron-left.svelte";
import ChevronRight from "@requestnetwork/shared/icons/chevron-right.svelte";
import ChevronUp from "@requestnetwork/shared/icons/chevron-up.svelte";
import Download from "@requestnetwork/shared/icons/download.svelte";
import Search from "@requestnetwork/shared/icons/search.svelte";
import Network from "@requestnetwork/shared/icons/network/network-icon.svelte";
// Types
import type {
GetAccountReturnType,
Config as WagmiConfig,
WatchAccountReturnType,
} from "@wagmi/core";
import { Types } from "@requestnetwork/request-client.js";
import type { IConfig } from "@requestnetwork/shared-types";
import type { IConfig } from "@requestnetwork/shared/types";
import type { RequestNetwork } from "@requestnetwork/request-client.js";
// Utils
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
import { config as defaultConfig } from "@requestnetwork/shared/utils/config";
import { initializeCurrencyManager } from "@requestnetwork/shared/utils/initCurrencyManager";
import { exportToPDF } from "@requestnetwork/shared/utils/generateInvoice";
import { getCurrencyFromManager } from "@requestnetwork/shared/utils/getCurrency";
import { CurrencyManager } from "@requestnetwork/currency";
import { onDestroy, onMount, tick } from "svelte";
import { formatUnits } from "viem";
import { debounce, formatAddress } from "../utils";
import { Drawer, InvoiceView } from "./dashboard";
import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
import { CurrencyTypes } from "@requestnetwork/types";
import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
import { checkStatus } from "@requestnetwork/shared/utils/checkStatus";

export let config: IConfig;
export let wagmiConfig: WagmiConfig;
Expand Down
2 changes: 1 addition & 1 deletion packages/invoice-dashboard/src/utils/formatAddress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { getAddress } from "viem";
import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
import { checkAddress } from "@requestnetwork/shared/utils/checkEthAddress";

export const formatAddress = (
address: string,
Expand Down
Loading