PageFlow কীভাবে কাজ করে
PageFlow ফ্রেমওয়ার্ক-নির্দিষ্ট রুট আবিষ্কারকে ফ্রেমওয়ার্ক-স্বাধীন ভিজ্যুয়াল ক্লায়েন্টের সঙ্গে যুক্ত করে।
১. রুট আবিষ্কার
নির্বাচিত অ্যাডাপ্টার ফ্রেমওয়ার্কের রুট উৎস পড়ে। Vue Router ও Nuxt রাউটার রেকর্ড দেয়; ফাইলভিত্তিক ফ্রেমওয়ার্ক বিল্ড ইন্টিগ্রেশন দিয়ে রুট দেয়; React Router রুট অবজেক্ট নেয়; Next.js ডেভেলপমেন্ট sidecar ব্যবহার করে।
২. ডেভেলপমেন্ট রানটাইম চালু
শুধু ডেভেলপমেন্ট সার্ভার চলার সময় প্লাগইন একটি ছোট রানটাইম ইনজেক্ট করে। এটি PageFlow এন্ডপয়েন্টে রুট তথ্য, দৃশ্যমান নেভিগেশন লক্ষ্য, পৃষ্ঠার শিরোনাম ও প্রস্তুতি পাঠায়।
৩. আসল পৃষ্ঠা রেন্ডার
PageFlow নিয়ন্ত্রিত iframe-এ একই-অরিজিন অ্যাপ্লিকেশন পৃষ্ঠা খোলে। নির্বাচিত পৃষ্ঠা লাইভ থাকে, আর ব্যাকগ্রাউন্ড পৃষ্ঠা সীমাবদ্ধ থাম্বনেইল ক্যাশে ধারণ হয়।
৪. নেভিগেশন শনাক্ত
অ্যাডাপ্টার সমর্থিত ফ্রেমওয়ার্ক লিংক, একই-অরিজিন অ্যাঙ্কর, হিস্ট্রি পরিবর্তন, লিটারাল প্রোগ্রাম্যাটিক লক্ষ্য ও স্পষ্ট নেভিগেশন ইঙ্গিত শনাক্ত করে। ক্লায়েন্ট এগুলোকে নির্দেশিত গ্রাফ এজ ও প্রিভিউ হটস্পটে রূপ দেয়।
৫. গ্রাফ বিন্যাস
LeaferJS ক্যানভাস রেন্ডার করে। রুট ডেক বড় পাথ হায়ারার্কি কমায়, স্পেশাল ইনডেক্স ভিউপোর্টের কাজ সীমিত করে এবং বড় লেআউট Worker-এ চলতে পারে।
প্রোডাকশন বিল্ড
PageFlow শুধু ডেভেলপমেন্টের জন্য। এর রানটাইম এন্ডপয়েন্ট ও ভিজ্যুয়াল ক্লায়েন্ট প্রোডাকশন আউটপুটে ইনজেক্ট হয় না। রিপোজিটরির প্রোডাকশন আউটপুট পরীক্ষা এই সীমা যাচাই করে।
নিরাপত্তা সীমা
প্রিভিউ মোড নিয়ন্ত্রিত ফ্রেমে অ্যাঙ্কর নেভিগেশন ও ফর্ম সাবমিশন আটকায়, কিন্তু অ্যাপ্লিকেশন ইনিশিয়ালাইজেশনের পার্শ্বপ্রতিক্রিয়া থামাতে পারে না। লোকাল বা টেস্ট ডেটা ব্যবহার করুন।