npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

laxar-developer-tools-widget

v3.0.2

Published

Provides developer tools to inspect the event bus and the application log, and the grid-alignment of widgets

Downloads

6

Readme

laxar-developer-tools-widget Build Status

The laxar-developer-tools-widget allows to open a developer tools window that embeds the laxar-developer-tools-content application. This application displays application events, helps visualizing the structure of the current page, and allows to browse log messages of the running LaxarJS application.

Content

Appearance

The laxar-developer-tools-widget optionally displays a button to allow the user to open a new window with the laxar-developer-tools-content application.

Usage

Installation

For this version of the laxar-developer-tools-widget, make sure that your host application is using LaxarJS v2.0.0 or newer. For installation instruction take a look at the LaxarJS documentation.

Configuration example

{
   "widget": "laxar-developer-tools-widget"
}

Use this configuration on a page to have a button that will open the developer tools window. The window will also open when the global method window.laxarShowDeveloperTools() is called.

{
   "widget": "laxar-developer-tools-widget",
   "features": {
      "button": {
         "enabled": false
      },
      "open": {
         "onActions": [ "showDevTools" ],
         "onGlobalMethod": "goDevelop"
      }
   }
}

Use this configuration on a page to have a developer tools window without visual representation, that will open when the action showDevTools is requested. Alternatively, the window can be opened by calling the method window.goDevelop() (for example, from a bookmark). Note: To open the developer window in this fashion, it might be necessary to add an exception to the browser's popup blocker.

For full configuration options refer to the widget.json.

Development

To develop (and not just use) the laxar-developer-tools-widget itself, the content application must be prepared:

cd content
npm install

To have the debug-version run within the developer tools window so that you may quickly try out any changes, enable the develop feature:

{
   "widget": "laxar-developer-tools-widget",
   "features": {
      "develop": {
         "enabled": true
      }
   }
}

To build and release a new version, the release-version of the embedded application must be committed:

cd content
npm run dist
git add var
git commit ...

Features

1. Allow to Open a Developer Tools Window (open)

Because the developer tools should exist independently of the host application state and navigation, they are opened in a separate window.

R1.1 The widget MUST allow to configure an action for opening the developer tools window. Note: To open the developer window in this fashion, it might be necessary for the user to add an exception to the browser's popup blocker. Alternatively, a button (see below) may be used.

R1.2 The widget MUST allow to configure a global javascript method name that opens the window directly. Note: This method is intended to be invoked manually by developers, and not as an API.

2. Provide Access through a Graphical Button (button)

R2.1 The widget MUST allow to render a graphical button. This should be the default behavior.

R2.2 It must be possible to disable the button.

R2.3 It must be possible to configure a different label for the button.

3. No-Op Mode

The widget MUST support being disabled completely using an application-wide enabled-flag.

R3.1 The enabled-flag must be read from the LaxarJS configuration path widgets.laxar-developer-tools-widget.enabled. The default value for the enabled-flag is true. If the enabled-flag value is false, the widget MUST NOT subscribe to takeActionRequest events, even if configured for the open feature.

R3.2 If the enabled-flag value is false, a global method MUST NOT be added, even if configured for the open feature.

R3.3 If the enabled-flag value is false, a button MUST NOT be rendered, even if the button feature has been enabled (see above).

4. Embed the laxar-developer-tools-content Application

R4.1 The widget MUST embed the laxar-developer-tools-content application to provide the developer tools for all browser. Refer to the laxar-developer-tools-content project for details.

Integration

Patterns

The widget supports the following event patterns as specified by the LaxarJS Patterns documentation.

Actions

  • Action: open.onActions
  • Role: Receiver
  • Description: Opens the developer tools window

References

The following resources are useful or necessary for the understanding of this document. The links refer to the latest version of the documentation.