Nutella Peanut-Butter Marshmallow
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    componentjs-tracingpublic

    ComponentJS Tracing

    Run-Time Tracing for ComponentJS

    Overview

    This is a Node.js based tracing application to support development with ComponentJS, a powerful Component System for hierarchically structuring the User-Interface dialogs of complex HTML5-based Rich Clients (SPA).

    The ComponentJS Tracing application consists of three major components:

    • A forwarding proxy service for instrumenting the target ComponentJS application
    • A Websocket service for routing the tracing information between the target ComponentJS application and the tracing UI.
    • An origin webserver delivering a tracing UI for collecting the tracing information, provisioning constraint sets and applying constraint sets once or continuously against the tracing information.

    Screenshots






    Architecture

    The diagram below illustrates the underlying architecture of the ComponentJS tracing application.

    Architecture

    Links:

    Installation

    1. Install Node.js

    2. Use Node.js's NPM to install ComponentJS Tracing:

       $ npm install -g componentjs-tracing
      
    3. Clone the latest version of PegJS to your local machine

    4. And use NPM to install it globally: $ npm install -g .

    Update Existing Installation

    $ npm update -g componentjs-tracing
    

    Usage

    $ componentjs-tracing [options]
    

    The following command-line options can either be supplied on the command line or in the included server.ini file.

    • --version, -v: Print tool version and exit
    • --help, -h: Print this help and exit
    • --addr, -a: IP address to listen
    • --port, -p: TCP port to listen
    • --backlog, -b: TCP socket connection backlog
    • --componentjs, -cjs: Regex matching the url of the ComponentJS file
    • --components, -cmps: Regex matching the urls of the components files of the SPA
    • --proxyaddr, -A: IP address to bind to
    • --proxyport, -P: TCP port to listen in on
    • --latestcjs, -lcjs: Overwrites applications ComponentJS file with the supplied version
    • --proxyfwd, -F: Host and port of forwarding proxy (eg when you are behind a corporate proxy)
    • --config=<cfg>: Adds the specified section of the ini file to overwrite defaults
    • --runfile, -rf: Directs the traces to a separate runfile bypassing the websocket logic and thus the user interface
    • --symbol, -s: Defines the symbol that makes ComponentJS available
    • --methods, -m: ComponentJS life-cycle methods defined in the transitions
    • --console: Display logfile also on console
    • --app, -X: url:dir of application

    Recommended setup

    In order to direct the traffic through the proxy server we recommend the Google Chrome Plug-In Proxy SwitchySharp. It provides an easy way to specify the websites which you want to be routed through the proxy server. The example below shows a configuration for the ComponentJS Demo Application in 3 simple steps.

    Step 1

    We need to tell the Plug-In which proxy server we have at hand.


    (Hint: Do not forget to press "save")

    Step 2

    Now we define which website should be routed through the proxy. We use wildcard syntax which means that every request containing "componentjs.com/demo" will cause a hit for this rule.


    (Hint: Do not forget to press "save")

    Step 3

    The final step is to enable the Auto Switch Mode, so only the specified pages are affected by the proxy settings.


    Limitations

    The ComponentJS Tracing application can only be used in combination with the Google Chrome browser, because we had to use Chrome-specific functionalities:

    • Inspecting the stacktrace is necessary for the tracing plug-in.
    • CSS dimension calculation is based on the calc method.
    • Native Websockets are used since we don't want to provide any ugly Flash fallbacks.
    • HTML5 FileReader API is used.

    License

    Copyright (c) 2013 Ralf S. Engelschall (http://engelschall.com)

    This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file. You can obtain one at http://mozilla.org/MPL/2.0/.

    Authors

    install

    npm i componentjs-tracing

    Downloadsweekly downloads

    30

    version

    0.9.5

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar