example/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Ramda REPL</title>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="../dist/bundle.css">

    <style>
      /* for demonstration only */
      * {

        box-sizing : border-box;
      }

      html {
        background : #eee;
      }

      body {
        margin: 0;
      }

      .container {
        margin     : 20px auto;
        width      : 800px;
        box-shadow : 0px 5px 20px rgba(0,0,0,0.7);
      }
      .ramda-repl-target {
        display    : block;
        background : #333;
        color      : #ccc;
        padding    : 15px;
        cursor     : pointer;
      }
    </style>

</head>

<body>

    <section class="container">
      <code class="ramda-repl-target">var tomato = {firstName: '  Tomato ', data: {elapsed: 100, remaining: 1400}, id:123};
var transformations = {
  firstName: R.trim,
  lastName: R.trim, // Will not get invoked.
  data: {elapsed: R.add(1), remaining: R.add(-1)}
};
R.evolve(transformations, tomato); //=> {firstName: 'Tomato', data: {elapsed: 101, remaining: 1399}, id:123}
      </code>
    </section>

    <!-- For demonstrating persist-to-queryString -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.1/URI.min.js"></script>

    <script src="../dist/bundle.js"></script>

    <script>

      (function() {

        // --------------------------------------------------------------------

        // Regex for matching version strings
        // Example match: "0.21.123"
        var rx = /^\d+\.\d+(\.\d+)?$/;

        // :: String, String -> String
        function toVersion(acc, pair) {

          var splitPair = pair.split('=');

          return splitPair[0] === 'v' && rx.test(splitPair[1]) ?  splitPair[1] : acc;

        }

        var version = location.search.substr(1).split('&').reduce(toVersion, 'latest');

        var ramdaUrl = '//cdn.jsdelivr.net/ramda/' + version + '/ramda.min.js';

        // --------------------------------------------------------------------

        document.querySelector('.ramda-repl-target').addEventListener('click', function(e) {

          ramdaRepl(e.target, {

            apiUrl: 'https://tinyurl.com/api-create.php',
            returnUrl: 'http://ramdajs.com/repl/',

            // If unset, initialValue will use the value or textcontent of the
            // target element.
            initialValue: URI.decode(window.location.hash).substring(2),

            // Called with the pre-compiled content
            onChange : function(code) {
              window.location.hash = '?' + URI.encode(code);
            },

            // The following config defines scripts that will be dynamically
            // loaded upon creating the REPL. Each has the following properties:
            //
            // src      - The source of the script, a URL
            // global   - (Optional) a name of a global that the script introduces
            // exposeAs - (Optional) a name that can alias the global
            // expose   - (Optional) a list of methods to expose globally

            // Required.
            // As ramda may be a dependency for other scripts, it will
            // be intentionally loaded before any other script.
            ramdaScript: {
              src    : ramdaUrl,
              global : 'R'
            },

            // Optional.
            // Here we can declare a list of libraries that we wish to have
            // loaded and exposed in the repl.
            scripts: [
              {
                src      : 'https://ramdajs.com/js/sanctuary@latest.js',
                global   : 'sanctuary',
                exposeAs : 'S'
              },
              {
                src    : 'https://ramdajs.com/js/standalone/ramda-fantasy@latest.js',
                global : 'ramdaFantasy',
                expose : [
                  'Either',
                  'Future',
                  'Identity',
                  'IO',
                  'lift2',
                  'lift3',
                  'Maybe',
                  'Tuple',
                  'Reader'
                ]
              }
            ]

          });

        });

      }());

    </script>

</body>

</html>