Choosing Your Stack: Vite vs Webpack, TypeScript, State Management

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'assets',
    rollupOptions: {
      input: 'src/main.tsx',
      output: {
        entryFileNames: 'react-bundle.js',
        assetFileNames: 'react-bundle.[ext]',
      },
    },
    // Don't hash filenames - Shopify handles caching
    manifest: false,
  },
});

const path = require('path');

module.exports = {
  entry: './src/main.tsx',
  output: {
    filename: 'react-bundle.js',
    path: path.resolve(__dirname, 'assets'),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

export interface ShopifyImage {
  src: string;
  alt: string | null;
  width: number;
  height: number;
}

export interface ShopifyVariant {
  id: number;
  title: string;
  price: number;
  compare_at_price: number | null;
  available: boolean;
  options: string[];
  featured_image: ShopifyImage | null;
}

export interface ShopifyProduct {
  id: number;
  title: string;
  handle: string;
  description: string;
  available: boolean;
  variants: ShopifyVariant[];
  images: ShopifyImage[];
  options: {
    name: string;
    position: number;
    values: string[];
  }[];
}

export interface ShopifyCartItem {
  id: number;
  quantity: number;
  title: string;
  price: number;
  line_price: number;
  variant_id: number;
  product_id: number;
  image: string;
  handle: string;
  variant_title: string | null;
}

export interface ShopifyCart {
  token: string;
  note: string | null;
  attributes: Record<string, string>;
  item_count: number;
  total_price: number;
  items: ShopifyCartItem[];
}

import type { ShopifyProduct, ShopifyCart } from '../types/shopify';

/*
 * Data Bridge: How React reads Liquid data
 * Liquid renders JSON into <script type="application/json"> tags.
 * React reads and parses these to get initial data without API calls.
 */

export function getProductData(elementId: string): ShopifyProduct | null {
  // Find the JSON script tag rendered by Liquid
  const element = document.getElementById(elementId);
  if (!element?.textContent) return null;

  try {
    // Parse JSON and cast to our TypeScript type for type safety
    return JSON.parse(element.textContent) as ShopifyProduct;
  } catch {
    // Handle malformed JSON gracefully
    console.error(`Failed to parse product data from #${elementId}`);
    return null;
  }
}

export function getCartData(): ShopifyCart | null {
  const element = document.getElementById('cart-data');
  if (!element?.textContent) return null;

  try {
    return JSON.parse(element.textContent) as ShopifyCart;
  } catch {
    console.error('Failed to parse cart data');
    return null;
  }
}

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

import { create } from 'zustand';
import type { ShopifyCart, ShopifyCartItem } from '../types/shopify';

/*
 * Zustand Store Pattern
 * Combines state and actions in a single object. Components subscribe to
 * only the state they need, minimizing re-renders.
 */
interface CartState {
  // State
  cart: ShopifyCart | null;
  isOpen: boolean;         // Cart drawer visibility
  isLoading: boolean;      // Shows loading spinners during API calls

  // Actions - functions that modify state
  setCart: (cart: ShopifyCart) => void;
  addItem: (variantId: number, quantity: number) => Promise<void>;
  updateItem: (lineId: number, quantity: number) => Promise<void>;
  removeItem: (lineId: number) => Promise<void>;
  toggleDrawer: () => void;
}

// create() returns a hook - components call useCart() to access state
export const useCart = create<CartState>((set, get) => ({
  // Initial state
  cart: null,
  isOpen: false,
  isLoading: false,

  // Simple setter - just updates cart state
  setCart: (cart) => set({ cart }),

  // Async action: add item via Shopify AJAX API
  addItem: async (variantId, quantity) => {
    set({ isLoading: true }); // Show loading state
    try {
      // Shopify's /cart/add.js endpoint
      const response = await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: variantId, quantity }),
      });
      // Fetch full cart to get updated totals
      const cartResponse = await fetch('/cart.js');
      const cart = await cartResponse.json();
      // Update state and open drawer to show the added item
      set({ cart, isOpen: true });
    } finally {
      set({ isLoading: false }); // Hide loading state
    }
  },

  // Toggle uses callback form to access current state
  toggleDrawer: () => set((state) => ({ isOpen: !state.isOpen })),

  // ... other actions
}));

import { atom } from 'jotai';
import type { ShopifyCart } from '../types/shopify';

export const cartAtom = atom<ShopifyCart | null>(null);
export const cartOpenAtom = atom(false);
export const cartLoadingAtom = atom(false);

// Derived atom
export const cartItemCountAtom = atom((get) => {
  const cart = get(cartAtom);
  return cart?.item_count ?? 0;
});

import { createContext, useContext, useState, ReactNode } from 'react';

const CartContext = createContext<CartContextType | null>(null);

export function CartProvider({ children }: { children: ReactNode }) {
  const [cart, setCart] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <CartContext.Provider value={{ cart, setCart, isOpen, setIsOpen }}>
      {children}
    </CartContext.Provider>
  );
}

export function useCart() {
  const context = useContext(CartContext);
  if (!context) throw new Error('useCart must be used within CartProvider');
  return context;
}