হাইড্রেশন -- সার্ভার ও ক্লায়েন্টের সংযোগ

import json

def render(template, data):
    """L38-L41-এর একই ধারণা -- str.format() ভিত্তিক টেমপ্লেট-রেন্ডার।"""
    return template.format(**data)


template = "<div id='counter-widget'><p>আপনি ক্লিক করেছেন: {count} বার</p><button id='inc-btn'>+1</button></div>"


# ---------- ধাপ ১: SERVER ফেজ -- static HTML + সিরিয়ালাইজড initial state ----------
print("=== SERVER ফেজ ===")
server_state = {"count": 0}
html_from_server = render(template, server_state)
initial_state_blob = json.dumps(server_state)
print(f"[server]  render() কল হলো -- static HTML: {html_from_server}")
print(f"[server]  initial state সিরিয়ালাইজ হলো (JSON): {initial_state_blob}")

# সিমুলেটেড DOM বাটন -- এখনো কোনো ইভেন্ট-হ্যান্ডলার সংযুক্ত হয়নি
button_element = {"id": "inc-btn", "onclick": None}
print(f"\n[client, হাইড্রেশনের আগে]  button_element['onclick'] = {button_element['onclick']}")
print("[client, হাইড্রেশনের আগে]  বাটনে ক্লিক করার চেষ্টা করা হচ্ছে...")
try:
    button_element["onclick"]()
    click_before_hydration_worked = True
except TypeError as err:
    click_before_hydration_worked = False
    print(f"[client, হাইড্রেশনের আগে]  ব্যর্থ -- TypeError: {err}")


# ---------- ধাপ ২: CLIENT ফেজ -- হাইড্রেশন ----------
print("\n=== CLIENT ফেজ -- হাইড্রেশন শুরু ===")
parsed_state = json.loads(initial_state_blob)
print(f"[client]  state blob পার্স হলো: {parsed_state}")

# hydration-mismatch যাচাই: ক্লায়েন্ট একই ডেটা দিয়ে আবার render() কল করে
# দেখে সার্ভারের HTML-এর সাথে হুবহু মেলে কি না -- বাস্তব ফ্রেমওয়ার্ক (যেমন React)
# dev মোডে ঠিক এই যাচাইটিই করে, মার্কআপ পুনরায় তৈরি করে না
html_from_client_check = render(template, parsed_state)
markup_identical = html_from_server == html_from_client_check
print(f"[client]  যাচাই-render() কল হলো: {html_from_client_check}")
print(f"[client]  সার্ভার ও ক্লায়েন্ট HTML হুবহু অভিন্ন? {markup_identical}")

def handle_click():
    parsed_state["count"] += 1
    print(f"    [client]  ক্লিক হ্যান্ডলার চললো -- নতুন count = {parsed_state['count']}")

button_element["onclick"] = handle_click
print(f"[client]  ইভেন্ট-হ্যান্ডলার সংযুক্ত হলো -- হাইড্রেশন সম্পন্ন")
print(f"[client]  button_element['onclick'] এখন callable? {callable(button_element['onclick'])}")


# ---------- হাইড্রেশনের পরে যাচাই ----------
print("\n=== হাইড্রেশনের পরে ===")
print("[client, হাইড্রেশনের পরে]  বাটনে দুইবার ক্লিক করা হচ্ছে...")
button_element["onclick"]()
button_element["onclick"]()
click_after_hydration_worked = button_element["onclick"] is not None

print(f"\nহাইড্রেশনের আগে ক্লিক কাজ করেছিল? {click_before_hydration_worked}")
print(f"হাইড্রেশনের পরে হ্যান্ডলার callable আছে? {click_after_hydration_worked}")
print(f"HTML মার্কআপ অপরিবর্তিত ছিল (visual পরিবর্তন নেই)? {markup_identical}")
print(f"চূড়ান্ত count মান: {parsed_state['count']}")