JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<div ng-app='app'>
    <div ng-controller="myCtrl">
        <textarea id="input" cols='50' rows='5' ng-model='input'></textarea>
        <button ng-click="minify()">Create bookmarklet</button>
        <textarea id="output" cols='50' rows='5' ng-model='output'></textarea>
    </div>
</div>

JavaScript

var app = angular.module('app', []);

// behave like jQuery $.ajax 
app.config(function($httpProvider) {
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  $httpProvider.defaults.transformRequest = function(data) {
    if (data === undefined) {
      return data;
    }
    var serialize = [];
    var encode = encodeURIComponent;
    for (var key in data) {
      serialize.push(encode(key) + '=' + encode(data[key]));
    }
    return serialize.join("&").replace(/%20/g, "+");
  }
});

app.service('closure', ['$http',
  function($http) {
    function minify(source) {
      var parameters = {
        output_info: 'compiled_code',
        compilation_level: 'ADVANCED_OPTIMIZATIONS',
        warning_level: 'quiet',
        js_code: source
      };
      return $http.post('https://closure-compiler.appspot.com/compile', parameters);
    }
    return {
      minify: minify
    };
  }
]);

app.controller('myCtrl', ['$scope', 'closure',
  function($scope, closure) {
    $scope.minify = function() {
      var source = $scope.input;
      if (!source) {
        return;
      }
      $scope.output = 'minifying, please wait';
      closure.minify(source)
        .success(function(output) {
          $scope.output = output;
        });
    };
  }
]);