Day 21: Modules, npm & Modern Tooling

sharma-shop/
├── index.html
├── package.json
└── src/
    ├── main.js            ← entry point: wires everything together
    ├── api.js             ← fetchJSON, getProducts, placeOrder
    ├── cart.js            ← export class Cart
    ├── format.js          ← export rupees(), formatDate()
    ├── validate.js        ← export rules, validate()
    └── ui/
        ├── productGrid.js
        └── cartPanel.js

export const GST_RATE = 0.05;

export function rupees(amount) {
  return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0 }).format(amount);
}

export const withGst = (amount) => Math.round(amount * (1 + GST_RATE));

import { withGst } from './format.js';

export default class Cart {
  #items = [];
  add(product, qty = 1) { this.#items.push({ ...product, qty }); return this; }
  get total() { return withGst(this.#items.reduce((s, i) => s + i.price * i.qty, 0)); }
}

import Cart from './cart.js';                    // default import – any name you like
import { rupees, GST_RATE } from './format.js';   // named imports – exact names in { }
import * as format from './format.js';           // everything as one object

const cart = new Cart().add({ name: 'Kaju Katli', price: 900 }, 2);
console.log(`Total with ${GST_RATE * 100}% GST: ${rupees(cart.total)}`);
console.log(format.withGst(1000));

// The same idea running in Node.js: an inline module demo using data: URLs
const formatModule = `
  export const rupees = n => '₹' + n.toLocaleString('en-IN');
  export default function gst(n) { return Math.round(n * 1.05); }
`;
const url = 'data:text/javascript,' + encodeURIComponent(formatModule);
import(url).then(({ default: gst, rupees }) => {          // dynamic import() returns a promise
  console.log(rupees(gst(180000)));
});

<!-- type="module" = deferred automatically, strict mode, own scope, import/export allowed -->
<script type="module" src="src/main.js"></script>

# 1. Install Node.js LTS from nodejs.org (includes npm), then check:
node -v
npm -v

# 2. Create a project
mkdir sharma-shop && cd sharma-shop
npm init -y                       # creates package.json

# 3. Add packages
npm install dayjs                 # dependency – shipped with your app
npm install -D vite eslint prettier   # devDependencies – tools for developers only

# 4. Run a script defined in package.json
npm run dev

{
  "name": "sharma-shop",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "format": "prettier --write src"
  },
  "dependencies": {
    "dayjs": "^1.11.13"
  },
  "devDependencies": {
    "eslint": "^9.15.0",
    "prettier": "^3.3.3",
    "vite": "^5.4.11"
  }
}

import js from '@eslint/js';
import globals from 'globals';

export default [
  js.configs.recommended,
  {
    languageOptions: { ecmaVersion: 'latest', sourceType: 'module', globals: globals.browser },
    rules: {
      eqeqeq: 'error',
      'no-unused-vars': 'warn',
      'prefer-const': 'error',
    },
  },
];