fix: move package.json import to client side

JesusTheHun · JesusTheHun · commit 99724340000c · 2024-09-23T14:17:51.000+02:00
try `with` and `assert`
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 [![Storybook](https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg?sanitize=true)](https://storybook.js.org)
 [![npm](https://img.shields.io/npm/v/storybook-addon-remix-react-router?color=blue)](https://www.npmjs.com/package/storybook-addon-remix-react-router)
 [![Release](https://github.com/JesusTheHun/storybook-addon-remix-react-router/actions/workflows/release.yml/badge.svg)](https://github.com/JesusTheHun/storybook-addon-remix-react-router/actions/workflows/release.yml)
-![npm](https://img.shields.io/npm/dm/storybook-addon-react-router-v6)
+![npm](https://img.shields.io/npm/dm/storybook-addon-remix-react-router)
 
 > Use Remix React Router in your stories.
 
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,6 +1,3 @@
-// @ts-ignore
-import packageJson from '../package.json' assert { type: 'json' };
-
 export const ADDON_ID = 'storybook/react-router-v6';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const PARAM_KEY = `reactRouter`;
@@ -15,5 +12,3 @@ export const EVENTS = {
   LOADER_INVOKED: `${ADDON_ID}/loader_invoked`,
   LOADER_SETTLED: `${ADDON_ID}/loader_settled`,
 } as const;
-
-export const ADDON_VERSION = packageJson.version;
diff --git a/src/features/decorator/withRouter.tsx b/src/features/decorator/withRouter.tsx
@@ -4,7 +4,7 @@ import { PARAM_KEY } from '../../constants';
 import { ReactRouterDecorator, ReactRouterDecoratorProps } from './components/ReactRouterDecorator';
 import { castParametersV2 } from './utils/castParametersV2';
 
-export const withRouter = makeDecorator({
+export const withRouter: () => any = makeDecorator({
   name: 'withRouter',
   parameterName: PARAM_KEY,
   wrapper: (getStory, context, { parameters }) => {
diff --git a/src/features/panel/hooks/useAddonVersions.ts b/src/features/panel/hooks/useAddonVersions.ts
@@ -1,28 +1,51 @@
 import { compareVersions } from 'compare-versions';
 import { useEffect, useState } from 'react';
-import { ADDON_VERSION } from '../../../constants';
 
 export function useAddonVersions() {
-  const [version, setVersion] = useState<string>();
+  const [currentVersion, setCurrentVersion] = useState<string>();
+  const [latestVersion, setLatestVersion] = useState<string>();
 
   useEffect(() => {
-    if (version !== undefined) return;
-
     const abortController = new AbortController();
     fetch(`https://registry.npmjs.org/storybook-addon-remix-react-router/latest`, { signal: abortController.signal })
       .then((b) => b.json())
-      .then((json) => setVersion(json.version))
+      .then((json) => setLatestVersion(json.version))
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       .catch(() => {});
 
     return () => abortController.abort();
-  }, [version]);
+  }, []);
+
+  useEffect(() => {
+    getAddonVersion().then((v) => setCurrentVersion(v));
+  }, []);
 
-  const newVersionAvailable = version === undefined ? undefined : compareVersions(version, ADDON_VERSION) === 1;
+  const newVersionAvailable =
+    !latestVersion || !currentVersion ? undefined : compareVersions(latestVersion, currentVersion) === 1;
 
   return {
-    currentAddonVersion: ADDON_VERSION,
-    latestAddonVersion: version,
+    currentAddonVersion: currentVersion,
+    latestAddonVersion: latestVersion,
     addonUpdateAvailable: newVersionAvailable,
   };
 }
+
+async function getAddonVersion() {
+  try {
+    const packageJson = await import('../../../../package.json', {
+      with: {
+        type: 'json',
+      },
+    });
+
+    return packageJson.version;
+  } catch (error) {
+    const packageJson = await import('../../../../package.json', {
+      assert: {
+        type: 'json',
+      },
+    });
+
+    return packageJson.version;
+  }
+}
