PageDriver means... Merge into Guide, show simpler demos above fold on homepage ala StimulusJS.
Feature rich function binding
Known as 'hooks' in other languages, bindings allow you to simply extend functionality.
Source code
let demoCounterState = 0;
bind('EVENT', 'click', function demoBind(event) {
demoCounterState += parseInt(event.target.value, 10);
mutate('#demo-bind', { demoCounterState });
});
Painless DOM updates
mutate() is all you need. From simple spans to complex multi-page forms, hydration is no longer a concern!
Use 100% plain HTML and a dash of PageDriver empowered JavaScript!
Source code - taphoverfocus to reveal explanation
'Context' based adventures
Context classes allow the placement of site elements meant for different application states (ex. user roles or personas) within a single page, reducing site-wide content duplication (cardinality). This helps you maintain the “Don't Repeat Yourself” DRY coding principal.
Context classes are boolean CSS classes that show or hide content based on a matching class at the <body>. They are capitalized to differentiate from standard classes, and 'negated' versions are preceded by a hyphen - character.
Easy debugging …ENABLED! 👷♀️
Unless debug mode is enabled, PageDriver only outputs critical errors to the console. When errors occur in a production environment and debug mode is disabled, they can be passed to a pre-defined 3rd party monitoring service.
To see it in action, enable debug mode via the button above (or manually add a cookie named 'debug' and reload the site). We'll wait; and don't mind the clown, it leaves once debugging is enabled 🤡
You did it! The console now displays PageDriver information/insights, and a collapsed debug menu should be visible in top right of your viewport. This menu is opened via press or hotkey (in Chrome press alt+`). The bar's title is your project's current environment and favicon. Use the bar to quickly toggle between view contexts and open modals.
Feel free to explore its features at your own pace - but before moving on, try the visual 'Context' debugger.
Production vs development environments
PageDriver has two operational modes, 'development' and 'production'. 'Production' disables some developer-only framework functions for safety and enables additional auditing on others. 'Development' unlocks full debug capabilities, but disables some functionality by default (such as CSRF verification and caching) for practical reasons.
Server-side debugging
- Only whitelisted clients are given remote debugging capabilities. The 'Environment' section of the debug menu shows this permission state.
- Debug actions with security, stability, or privacy repercussions are logged for auditing.
Practical helper functionality
Our handy helpers keep you on track. For example, temporarily mutate HTML element attributes to add animation classes or disable buttons.
bind('EVENT', 'click', function demoTemporary(event) { temporary(event.target,'class','active',{ duration:1.5 }); });No more page reloads
As of writing, PageDriver provides the ultimate SPA experience for both developers and users. You likely didn't realize it, but you loaded pretty much this ENTIRE site! Say goodbye to full page reloads in production environments.
Sending form data
Do more with less. Forms with well-formed (pun unintended) name attributes are all that is needed to call local APIs, no additional code needed. By default forms are sent asynchronously via POST and local requests have CSRF headers automatically appended.
PageDriver transforms your form name attributes into valid URLs. Here are some example transformations (assuming /api/v0 is your project's default API path):
name="user_authType"→/api/v0/user/?authTypename="user_login_otpType"→/api/v0/user/?login=otpTypename="many_underscores_much_wow"→/api/v0/many/?underscores=much_wow
Don't worry, it's optional.
Adding the action HTML attribute with your remote URL as you would normally overrides the URL transformer. The rationale behind transformations was the enforcement of clean, grouped and logically named endpoints.
For complete control of the submission process you may replace PageDriver's default handler by adding your own global submit binding to the EVENT interface.
Getting remote data
Let's fetch some data from a remote API. PageDriver provides the pd.NET.xhr() function for this purpose.