Writing a SPA applications as writing a movie script - describe a set of stages (visual states). Each stage describes how the visual part of the application should look like and how the user will interact with it ( mouse, keyboard, etc.). Stages are described by JS-page data models.
Build a relationship between stages and you will have a tree of visual states that can be traversed with a single programing instruction.
When all interactions can be described in the JS-page data models, means that the components (react,vue, svelte or any other framework) can be used as simple template engines - to render only html.
npm install @peter.naydenov/screen-writer
import screenWriter from '@peter.naydenov/screen-writer'
const script = screenWriter ();
script.setPages () // provide list of JS-pages to the app
script.setDependencies () // add object to the "dependencies" object. This object will be passed to the JS-page "show" method
// script is ready to use
script.turnTo ({ page : 'pageName'}) // change the current JS-page setPages : 'Provide list of JS-pages to the app'
, turnTo : 'Change the current JS-page'
, close : 'Close the current JS-page'
, listPages : 'List of loaded JS-pages names'
, listShortcuts : 'List shortcuts per JS-page. Provide the name of the JS-page'
, setDependencies : 'Add object to the "dependencies" object. This object will be passed to the JS-page "show" method'
, getDependencies : 'Returns the "dependencies" object'
, enablePlugin : 'Enable a shortcut plugin. Available after version 1.1.0'
, disablePlugin : 'Disable a shortcut plugin. Available after version 1.1.0'
, emit : 'Emit an event. Available after version 2.0.0'- Version 1.1.0 - first version of the library based on
@peter.naydenov/shortcutsversion 3.0.0.
JS-page is a data model that describes how to render a specific stage and how the user will interact with it ( mouse, keyboard, etc.):
{
show // method. Returns a promise
, hide // method. Returns a promise
, parents // list of parent JS-pages names.
// ... shortcuts for all user interactions with the screen ( mouse, keyboard, etc.)
// Shortcuts are implemented with @peter.naydenov/shortcuts
}JS-pages can be opened and closed, also some pages can be a child of another page. Every JS-page is a can be treated as a visual state of the application. All provided to script JS-pages are available on demand by calling them with a simple instruction turnTo({page:pageName}). What should be opened and what should be closed is managed by the library.
'@peter.naydenov/screen-writer' was created and supported by Peter Naydenov.
'@peter.naydenov/screen-writer' is released under the MIT License.