0.7.1 • Published 4 years ago
@fa-repo/mobile-dev-environment v0.7.1
Mobile Dev Environment
MDE displays a console output tray and extendable action bar inside your browser window.
Table of Contents
- Table of Contents
- Features
- Install
- Node usage
- Browser usage
- Configuration
- Actions
- Packaged actions
- Custom actions
Features
- Actions bar: is a configurable menu containing quick access buttons (called actions).
- Bundled actions: include reloading / cache busting the page and toggling the console tray.
- Console tray: catches and displays
console.log(),console.error(),console.assert()output. - Runtime errors: are caught and shown in the console tray.
Install
With node:
npm install @fa-repo/mobile-dev-environmentWith unpkg.com:
<script src="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.js"></script>
<link href="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.css" rel="stylesheet" type="text/css">Node usage
// app.js
import mobileDevEnvironment from '@fa-repo/mobile-dev-environment';
import '@fa-repo/mobile-dev-environment/mobile-dev-environment.css';
window.addEventListener("DOMContentLoaded", event => {
new mobileDevEnvironment({
root: document.getElementById('mde'),
stateId : 'my-multi-page-app',
actionsCorner : 'tl'
});
});
// app.html
<!-- ... -->
<html>
<head>
<link href="./link/to/app.min.css" rel="stylesheet" type="text/css" />
<script src="./link/to/app.min.js" defer></script>
</head>
<body>
<div id="mde"></div>
</body>
</html>Browser usage
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.js" defer></script>
</head>
<body>
<div id="mde"></div>
<script>
new mobileDevEnvironment({
root: document.getElementById('mde'),
stateId : 'my-multi-page-app',
actionsCorner : 'tl'
});
</script>
</body>
</html>Configuration
Actions
Actions are easily accessible buttons that appear in the actions bar. You can either use the buttons that come packaged with MDE or make your own.
Packaged actions
Packaged actions can be referenced in two ways. Either as strings by name or as objects which enable configuration.
// Example A
[ "reload", "toggle-tray" ]
// Example B
[ { action: "reload", refreshCache: false }, "toggle-tray" ]
// Example C
[ { action: "reload", refreshCache: false }, { action: "toggle-tray"} ]Packaged action - reload: this action reloads the page.
Packaged action - toggle-tray: this action toggles the console tray.
Custom actions
Custom actions are a way to extend MDE with your own buttons. The API is quite flexible but at a minimum all custom actions require an action key with a value of "custom".
// Example
[
{ action: "custom", content: "Click me", onClick: e => alert("Hi!") }
]