Change ts moduleresolution (#13)

* Change TS's module resolution to 'node' instead of nodenext

* Include stories in TS checking now, and fix issues

.eslintrc.js

@@ -6,7 +6,11 @@ module.exports = {
       version: 28,
     },
   },
-  ignorePatterns: ['**/storefront-api-types.d.ts', 'examples/**'],
+  ignorePatterns: [
+    '**/storefront-api-types.d.ts',
+    '**/dist/**',
+    '**/coverage/**',
+  ],
   root: true,
   plugins: ['eslint-plugin-tsdoc'],
   extends: [

packages/react/src/MediaFile.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Image, type ShopifyImageProps} from './Image.js';
 import {Video} from './Video.js';
 import {ExternalVideo} from './ExternalVideo.js';

packages/react/src/Money.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {render, screen} from '@testing-library/react';
 import {Money} from './Money.js';
 import {ShopifyProvider} from './ShopifyProvider.js';

packages/react/src/Money.tsx

@@ -1,4 +1,4 @@
-import React, {type ReactNode} from 'react';
+import {type ReactNode} from 'react';
 import {useMoney} from './useMoney.js';
 import type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';
 import type {PartialDeep} from 'type-fest';

packages/react/src/ProductPrice.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {render, screen} from '@testing-library/react';
 import {getProduct} from './ProductProvider.test.helpers.js';
 import {ProductPrice} from './ProductPrice.js';

packages/react/src/ProductPrice.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type {
   MoneyV2,
   UnitPriceMeasurement,

packages/react/src/ProductProvider.stories.tsx

@@ -15,13 +15,15 @@ const TemplateChildren = () => {
   const prodHook = useProduct();
   return (
     <>
-      {Object.keys(prodHook).map((key) => {
+      {(Object.keys(prodHook) as Array<keyof typeof prodHook>).map((key) => {
         return (
           <p key={key}>
-            <strong>{key}: </strong>
-            {typeof prodHook[key] === 'string'
-              ? prodHook[key]
-              : JSON.stringify(prodHook[key])}
+            <>
+              <strong>{key}: </strong>
+              {typeof prodHook[key] === 'string'
+                ? prodHook[key]
+                : JSON.stringify(prodHook[key])}
+            </>
           </p>
         );
       })}

packages/react/src/ProductProvider.test.tsx

@@ -42,7 +42,6 @@ describe('<ProductProvider />', () => {
   });
 
   it('provides setSelectedOption callback', async () => {
-    // @ts-expect-error there's an issue with this library and TS
     const user = userEvent.setup();
 
     function Component() {
@@ -122,7 +121,6 @@ describe('<ProductProvider />', () => {
   });
 
   it('provides setSelectedVariant callback', async () => {
-    // @ts-expect-error there's an issue with this library and TS
     const user = userEvent.setup();
 
     function Component() {
@@ -174,7 +172,6 @@ describe('<ProductProvider />', () => {
   });
 
   it('allows setSelectedVariant to be called with null to deselect', async () => {
-    // @ts-expect-error there's an issue with this library and TS
     const user = userEvent.setup();
 
     function Component() {
@@ -205,7 +202,6 @@ describe('<ProductProvider />', () => {
   });
 
   it('provides out of stock helper', async () => {
-    // @ts-expect-error there's an issue with this library and TS
     const user = userEvent.setup();
 
     function Component() {
@@ -261,7 +257,6 @@ describe('<ProductProvider />', () => {
   });
 
   it('supports selecting a selling plan', async () => {
-    // @ts-expect-error there's an issue with this library and TS
     const user = userEvent.setup();
 
     function Component() {

packages/react/src/ShopPayButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {useShop} from './ShopifyProvider.js';
 import {useLoadScript} from './load-script.js';
 

packages/react/src/ShopifyProvider.stories.tsx

@@ -35,16 +35,20 @@ const TemplateChildren = () => {
   return (
     <>
       Use the Controls tab change these values on the fly
-      {Object.keys(shopValues).map((key) => {
-        return (
-          <p key={key}>
-            <strong>{key}: </strong>
-            {typeof shopValues[key] === 'string'
-              ? shopValues[key]
-              : JSON.stringify(shopValues[key])}
-          </p>
-        );
-      })}
+      {(Object.keys(shopValues) as Array<keyof typeof shopValues>).map(
+        (key) => {
+          return (
+            <p key={key}>
+              <>
+                <strong>{key}: </strong>
+                {typeof shopValues[key] === 'string'
+                  ? shopValues[key]
+                  : JSON.stringify(shopValues[key])}
+              </>
+            </p>
+          );
+        }
+      )}
     </>
   );
 };

packages/react/tsconfig.json

@@ -6,17 +6,13 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "NodeNext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "declaration": true,
     "declarationDir": "./dist/types",
     "jsx": "react-jsx",
     "types": ["jest"]
   },
-  "include": ["src/**/*", "globals.d.ts", "vitest.setup.ts"],
-  "exclude": [
-    // exclude stories until https://github.com/tajo/ladle/issues/267 is fixed
-    "src/**/*.stories.tsx"
-  ]
+  "include": ["src/**/*", "globals.d.ts", "vitest.setup.ts"]
 }