mota-webdevtools

v0.3.0

Published

4 years ago

Tools to make the lives of web developers easier.

0High
0Medium
0Low

jdmota

javascript web devtools tools

Mota Web Dev Tools

Tools to make the lives of web developers easier.

Features

var tools = require( "mota-webdevtools" );

Building

tools.findFiles( {
  src: [ "src/index.js" ],
  micromatch: false
} )

.lift( tools.transformers.Rollup( {
  options: {},
  generate: {
    format: "es6"
  }
} ) )

.lift( tools.transformers.rename( function( file ) {
  return file.replace( "src/", "dist/" );
} ) )

.lift( tools.transformers.write() )

.subscribe( {
  complete: function() {
    console.log( "Build done!" );
  },
  error: function( e ) {
    console.log( e );
  }
} );

Linting

tools.readFiles( {
  cwd: "src",
  src: [ "**/**.js" ],
  micromatch: {}
} )

.lift( tools.transformers.Lint() )

.subscribe( {
  complete: function() {
    console.log( "Files lint free!" );
  },
  error: function( e ) {
    console.log( e );
  }
} );

// Or, as of 0.2.1

tools.lint( {
  cwd: "src",
  src: [ "**/**.js" ]
}, {} ).then( null, function( e ) {
  console.log( e );
} );

Server and livereload

var server = tools.createServer( 9009, function() {
  // Listening in port 9009...
} );

var watcher = tools.watch( "src/**/*.js" );
watcher.on( "all", server.liveReloader );

Testing

Includes features so that you can use the same testing code on the NodeJS side or Browser side.

tools.test.exportGlobals();
// global.ROOT == global, global.ISENVNODE == true, global.QUnit == require( "qunitjs" )

tools.test.load(); // Runs QUnit.load(). It's necessary on the nodejs side.

tools.test.loadTests( [ // Synchronously loads some js files
  "./spec_1.js",
  "./spec_2.js"
] ); // ...same as...

[ "./spec_1.js", "./spec_2.js" ].forEach( function( file ) {
  require( file );
} );

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Suite</title>
    <!-- Includes the styles you need -->
    <link rel="stylesheet" href="/mota-webdevtools/index.css">
  </head>
  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <!-- Yes, there urls work because of a route that is added to the server when you do tools.createServer() -->
    <script src="/mota-webdevtools/index.js"></script>
    <!-- Livereload works thanks to a socket connection that is created after tools.createServer() -->
    <script src="/mota-webdevtools/livereload.js"></script>
    <script>

      motaWebDevTools.test.exportGlobals();
      // window.ROOT == window, window.ISENVNODE == false, window.QUnit == QUnit

      motaWebDevTools.test.load(); // Available on the browser side but does nothing.

      motaWebDevTools.test.loadTests( [ // Asynchronously loads some js files
        "./spec_1.js",
        "./spec_2.js"
      ] );

    </script>
  </body>
</html>

Benchmarking

var suite = tools.createBenchSuite( "Search in a string" );

suite.add( "RegExp#test", function() {
  /o/.test( "Hello World!" );
} )

.add( "String#indexOf", function() {
  "Hello World!".indexOf( "o" ) > -1;
} )

.add( "String#match", function() {
  !!"Hello World!".match( /o/ );
} )

.run();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Benchmark Suite</title>
  </head>
  <body>
    <!-- The output and "Run"/"Run Async" buttons will be shown in this element. -->
    <!-- Various different suites are supported. -->
    <div id="benchmark"></div>
    <!-- Yes, this url works because of a route that is added to the server when you do tools.createServer() -->
    <script src="/mota-webdevtools/index.js"></script>
    <script>

      var suite = motaWebDevTools.createBenchSuite( "Search in a string" );

      suite.add( "RegExp#test", function() {
        /o/.test( "Hello World!" );
      } )
      .add( "String#indexOf", function() {
        "Hello World!".indexOf( "o" ) > -1;
      } )
      .add( "String#match", function() {
        !!"Hello World!".match( /o/ );
      } );

    </script>
  </body>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme