dev: use turbopack for local development

This PR sets up turbopack for local development for apps using the component
library.  This should result in much faster development rebuilds.

Author: cprussin

apps/entropy-explorer/next.config.js

@@ -9,16 +9,20 @@ const config = {
     },
   },
 
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,
       use: ["@svgr/webpack"],
     });
-
-    config.resolve.extensionAlias = {
-      ".js": [".js", ".ts", ".tsx"],
-    };
-
     return config;
   },
 

apps/entropy-explorer/package.json

@@ -12,7 +12,7 @@
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_34F8THr7mZ3eAOQoCLdo8xWj9fdT vercel env pull",
-    "start:dev": "next dev --port 3006",
+    "start:dev": "next dev --port 3006 --turbopack",
     "start:prod": "next start --port 3006",
     "test:format": "prettier --check .",
     "test:lint:eslint": "eslint . --max-warnings 0",

apps/insights/next.config.js

@@ -13,16 +13,21 @@ const config = {
     },
   },
 
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,
       use: ["@svgr/webpack"],
     });
 
-    config.resolve.extensionAlias = {
-      ".js": [".js", ".ts", ".tsx"],
-    };
-
     return config;
   },
 

apps/insights/package.json

@@ -12,7 +12,7 @@
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull",
-    "start:dev": "next dev --port 3003",
+    "start:dev": "next dev --port 3003 --turbopack",
     "start:prod": "next start --port 3003",
     "test:format": "prettier --check .",
     "test:lint:eslint": "eslint . --max-warnings 0",

apps/insights/src/components/PriceComponentsCard/index.module.scss

@@ -87,8 +87,3 @@
     }
   }
 }
-
-:export {
-  // stylelint-disable-next-line property-no-unknown
-  headerHeight: theme.$header-height;
-}

apps/insights/src/components/PriceComponentsCard/index.tsx

@@ -489,7 +489,7 @@ export const PriceComponentsCardContents = <
         label={label}
         fill
         rounded
-        stickyHeader={styles.headerHeight}
+        stickyHeader
         className={styles.table ?? ""}
         columns={[
           {

apps/insights/src/components/PriceFeed/chart.module.scss

@@ -0,0 +1,12 @@
+@use "@pythnetwork/component-library/theme";
+
+.chart {
+  --border-light: #{theme.pallette-color("stone", 300)};
+  --border-dark: #{theme.pallette-color("steel", 600)};
+  --muted-light: #{theme.pallette-color("stone", 700)};
+  --muted-dark: #{theme.pallette-color("steel", 300)};
+  --chart-series-primary-light: #{theme.pallette-color("violet", 500)};
+  --chart-series-primary-dark: #{theme.pallette-color("violet", 400)};
+  --chart-series-neutral-light: #{theme.pallette-color("stone", 500)};
+  --chart-series-neutral-dark: #{theme.pallette-color("steel", 300)};
+}

apps/insights/src/components/PriceFeed/chart.tsx

@@ -9,7 +9,7 @@ import type { RefObject } from "react";
 import { useEffect, useRef, useCallback } from "react";
 import { z } from "zod";
 
-import theme from "./theme.module.scss";
+import styles from "./chart.module.scss";
 import { useLivePriceData } from "../../hooks/use-live-price-data";
 import { Cluster } from "../../services/pyth";
 
@@ -22,14 +22,18 @@ export const Chart = ({ symbol, feedId }: Props) => {
   const chartContainerRef = useChart(symbol, feedId);
 
   return (
-    <div style={{ width: "100%", height: "100%" }} ref={chartContainerRef} />
+    <div
+      style={{ width: "100%", height: "100%" }}
+      className={styles.chart}
+      ref={chartContainerRef}
+    />
   );
 };
 
 const useChart = (symbol: string, feedId: string) => {
   const { chartContainerRef, chartRef } = useChartElem(symbol, feedId);
   useChartResize(chartContainerRef, chartRef);
-  useChartColors(chartRef);
+  useChartColors(chartContainerRef, chartRef);
   return chartContainerRef;
 };
 
@@ -217,17 +221,24 @@ const useChartResize = (
   });
 };
 
-const useChartColors = (chartRef: RefObject<ChartRefContents | undefined>) => {
+const useChartColors = (
+  chartContainerRef: RefObject<HTMLDivElement | null>,
+  chartRef: RefObject<ChartRefContents | undefined>,
+) => {
   const { resolvedTheme } = useTheme();
   useEffect(() => {
-    if (chartRef.current && resolvedTheme) {
-      applyColors(chartRef.current, resolvedTheme);
+    if (chartRef.current && chartContainerRef.current && resolvedTheme) {
+      applyColors(chartRef.current, chartContainerRef.current, resolvedTheme);
     }
-  }, [resolvedTheme, chartRef]);
+  }, [resolvedTheme, chartRef, chartContainerRef]);
 };
 
-const applyColors = ({ chart, ...series }: ChartRefContents, theme: string) => {
-  const colors = getColors(theme);
+const applyColors = (
+  { chart, ...series }: ChartRefContents,
+  container: HTMLDivElement,
+  theme: string,
+) => {
+  const colors = getColors(container, theme);
   chart.applyOptions({
     grid: {
       horzLines: {
@@ -260,12 +271,20 @@ const applyColors = ({ chart, ...series }: ChartRefContents, theme: string) => {
   }
 };
 
-const getColors = (resolvedTheme: string) => ({
-  border: theme[`border-${resolvedTheme}`] ?? "red",
-  muted: theme[`muted-${resolvedTheme}`] ?? "",
-  chartNeutral: theme[`chart-series-neutral-${resolvedTheme}`] ?? "",
-  chartPrimary: theme[`chart-series-primary-${resolvedTheme}`] ?? "",
-});
+const getColors = (container: HTMLDivElement, resolvedTheme: string) => {
+  const style = getComputedStyle(container);
+
+  return {
+    border: style.getPropertyValue(`--border-${resolvedTheme}`),
+    muted: style.getPropertyValue(`--muted-${resolvedTheme}`),
+    chartNeutral: style.getPropertyValue(
+      `--chart-series-neutral-${resolvedTheme}`,
+    ),
+    chartPrimary: style.getPropertyValue(
+      `--chart-series-primary-${resolvedTheme}`,
+    ),
+  };
+};
 
 const getLocalTimestamp = (date: Date): UTCTimestamp =>
   (Date.UTC(

apps/insights/src/components/PriceFeed/theme.module.scss

@@ -21,8 +21,3 @@
     }
   }
 }
-
-:export {
-  // stylelint-disable-next-line property-no-unknown
-  headerHeight: theme.$header-height;
-}