Skip to content

Latest commit

 

History

History
211 lines (174 loc) · 6.47 KB

README.md

File metadata and controls

211 lines (174 loc) · 6.47 KB
Raw

Mobile Dev Environment

MDE displays a console output tray and extendable action bar inside your browser window.

version MIT License

Markdown Dev Environment example

Table of Contents

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-environment

With 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

Option Description Type Default Required
actions An array of actions to load array ['reload','tray']
actionsCorner The actions bar position, top left 'tl' or right 'tr' string 'tr'
root Provide a DOM element for MDE to hook on too. DOM element Required
stateId Share state information like open/close, height etc across instances of MDE on other pages string 'global'

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.

Option Description Default
refreshCache Refresh the browsers cache on each reload. true

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!") }
]
Option Description type
action Is the action type. If we're creating a custom action, this must be `"custom"`. `string`
content This goes inside the button. It could be some text or maybe another element like an icon. `string|element`
onClick This function is called when the button is clicked `function`