Release 3.0.0

Author: David Chase

README.md

@@ -1,39 +1,22 @@
 # ramtuary
-Ramda + Ramda Fantasy + Sanctuary REPL
+JavaScript functional REPL
 
-~~This is basically a clone of the [ramda repl](https://github.com/ramda/ramda.github.io/tree/master/repl) with a new skin.~~
+[![builtwith](https://img.shields.io/badge/built--with-rollup-e94c43.svg?style=flat-square)](http://rollupjs.org)
+[![builtwith](https://img.shields.io/badge/es6--with-bublé-0074D9.svg?style=flat-square)](http://buble.surge.sh/#)
+[![builtwith](https://img.shields.io/badge/repl--with-codemirror-d30707.svg?style=flat-square)](https://codemirror.net)
 
-~~With some additions of [ramda fantasy](https://github.com/ramda/ramda-fantasy) and [sanctuary](https://github.com/plaid/sanctuary) for moar fun.~~
+## Usage
+This REPL includes different libraries such as
 
-Ramtuary is now the ramda [repl](ramdajs.com/repl/).
+- [Ramda](https://github.com/ramda/ramda) - available with prefix `R` or without
+- [Sanctuary](https://github.com/sanctuary-js/sanctuary) - available with prefix `S`
+- [Ramda Fantasy](https://github.com/ramda/ramda-fantasy) - available `Either, Future, Identity, IO, Maybe, Reader, Tuple `
+- [Tcomb](https://github.com/gcanti/tcomb) - available as `tcomb`
 
-Inlcudes [ramda](https://github.com/ramda/ramda), [ramda fantasy](https://github.com/ramda/ramda-fantasy) and [sanctuary](https://github.com/plaid/sanctuary)
+## Todo
+- [ ] Add examples
+- [ ] Add info for available libraries
 
-Uses [Babel](babeljs.io) and latest version of [CodeMirror](codemirror.net) under the hood 
+### Please note
+If you are looking for the original REPL, it is now part of Ramda REPL [here](http://ramdajs.com/repl/)
 
-Supports es6 and even es7 (`console::console.log`)
-
-[Try it out](http://davidchase.github.io/ramtuary/)
-
-## usage
-
-The following variables are available globally:
-
-`R` for Ramda
-
-`S` for Sanctuary
-
-`Either, Future, Identity, IO, Maybe, Reader, Tuple`  for Ramda Fantasy
-
-Use <kbd>Tab</kbd> for auto-completion
-
-Examples located in this [folder](examples)
-
-## todo / features
-- [x] add `console.log` capturing for output
-- [x] update to latest [codemirror](https://github.com/codemirror/CodeMirror) for moar features
-- [x] switch to babel
-- [x] support auto-completion
-- [x] match brackets
-- [ ] remove jquery dependency
-- [ ] refactor/code cleanup (could always use a bit of that)

create-examples.js

@@ -1,7 +1,7 @@
-import fs from 'fs';
-import R from 'ramda';
-import vfs from 'vinyl-fs';
-import through2 from 'through2';
+const fs = require('fs');
+const R = require('ramda');
+const vfs = require('vinyl-fs');
+const through2 = require('through2');
 
 const src = './examples/**/*.js';
 const dest = './examples/example.json';
@@ -31,4 +31,4 @@ const flush = function flush(callback) {
     callback();
 };
 
-stream.pipe(through2(options, transform, flush)).pipe(fs.createWriteStream(dest));
+stream.pipe(through2(options, transform, flush)).pipe(fs.createWriteStream(dest));

examples/example.json

@@ -3,19 +3,7 @@
     {
       "category": "fantasy",
       "title": "futures",
-      "code": "const log = console::console.log;\nconst error = console::console.error;\n\nconst url = 'http://reqr.es/api/users?page=3';\n\nconst xhr = function(url) {\n    return new Future(function(rej, res) {\n        const oReq = new XMLHttpRequest();\n        oReq.addEventListener(\"load\", res, false);\n        oReq.addEventListener(\"error\", rej, false);\n        oReq.addEventListener(\"abort\", rej, false);\n        oReq.open(\"get\", url, true);\n        oReq.send();\n    });\n};\n\nconst f = R.compose(R.map(S.parseJson), R.map(R.path(['target', 'response'])), xhr)(url);\n\nf.fork(error, R.map(log)); //=> Object {page: \"3\", per_page: 3, total: 12, total_pages: 4, data: Array[3]}"
-    }
-  ],
-  "function": [
-    {
-      "category": "function",
-      "title": "compose",
-      "code": "const f = R.compose(R.inc, R.negate, Math.pow);\n\nf(3, 4);"
-    },
-    {
-      "category": "function",
-      "title": "useWith",
-      "code": "const double = y => y * 2;\nconst square = x => x * x;\nconst add = (a, b) => a + b;\n// Adds any number of arguments together\nconst addAll = (...args) => R.reduce(add, 0, args);\n\n// Basic example\nconst addDoubleAndSquare = R.useWith(addAll, double, square);\n\n//≅ addAll(double(10), square(5));\naddDoubleAndSquare(10, 5); //=> 45"
+      "code": "const log = console.log.bind(console);\nconst error = console.error.bind(console);\n\nconst url = 'http://reqres.in/api/users?page=3';\n\nconst xhr = function(url) {\n    return new Future(function(rej, res) {\n        const oReq = new XMLHttpRequest();\n        oReq.addEventListener(\"load\", res, false);\n        oReq.addEventListener(\"error\", rej, false);\n        oReq.addEventListener(\"abort\", rej, false);\n        oReq.open(\"get\", url, true);\n        oReq.send();\n    });\n};\n\nconst f = R.compose(R.map(S.parseJson), R.map(R.path(['target', 'response'])), xhr)(url);\n\nf.fork(error, R.map(log)); //=> Object {page: \"3\", per_page: 3, total: 12, total_pages: 4, data: Array[3]}\n"
     }
   ],
   "list": [
@@ -30,6 +18,18 @@
       "code": "const double = x => x * 2;\n\nR.map(double, [1, 2, 3]);"
     }
   ],
+  "function": [
+    {
+      "category": "function",
+      "title": "compose",
+      "code": "const f = R.compose(R.inc, R.negate, Math.pow);\n\nf(3, 4);"
+    },
+    {
+      "category": "function",
+      "title": "useWith",
+      "code": "const double = y => y * 2;\nconst square = x => x * x;\nconst add = (a, b) => a + b;\n// Adds any number of arguments together\nconst addAll = (...args) => R.reduce(add, 0, args);\n\n// Basic example\nconst addDoubleAndSquare = R.useWith(addAll, double, square);\n\n//≅ addAll(double(10), square(5));\naddDoubleAndSquare(10, 5); //=> 45"
+    }
+  ],
   "object": [
     {
       "category": "object",

examples/fantasy/futures.js

@@ -1,7 +1,7 @@
-const log = console::console.log;
-const error = console::console.error;
+const log = console.log.bind(console);
+const error = console.error.bind(console);
 
-const url = 'http://reqr.es/api/users?page=3';
+const url = 'http://reqres.in/api/users?page=3';
 
 const xhr = function(url) {
     return new Future(function(rej, res) {
@@ -16,4 +16,4 @@ const xhr = function(url) {
 
 const f = R.compose(R.map(S.parseJson), R.map(R.path(['target', 'response'])), xhr)(url);
 
-f.fork(error, R.map(log)); //=> Object {page: "3", per_page: 3, total: 12, total_pages: 4, data: Array[3]}
+f.fork(error, R.map(log)); //=> Object {page: "3", per_page: 3, total: 12, total_pages: 4, data: Array[3]}

index.html

@@ -37,15 +37,10 @@
 </head>
 
 <body>
-<div class="github-fork-ribbon-wrapper right">
-    <div class="github-fork-ribbon">
-        <a href="https://github.com/davidchase/ramtuary" target="blank">Fork me on GitHub</a>
-    </div>
-</div>
-<!-- Fixed navbar -->
-<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+
+<div class="nav" role="navigation">
     <nav class="top-nav"></nav>
-    <div class="container col-lg-12">
+    <div class="col-lg-12">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                 <span class="sr-only">Toggle navigation</span>
@@ -57,60 +52,22 @@
         </div>
         <div class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
-                <li><a data-toggle="modal" data-target="#about-modal">About</a></li>
-                <li class="dropdown" id="examples_menu">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples <b class="caret"></b></a>
-                    <ul id="examples" class="dropdown-menu"></ul>
-                </li>
+		<li><button id="mkurl" class="btn btn-default btn-sm">Make Short URL:</button><input id="urlout" type="text" class="urltext" /></li>
             </ul>
         </div><!--/.nav-collapse -->
     </div>
 </div>
 
-<div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="about" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h4 class="modal-title" id="myModalLabel">About</h4>
-            </div>
-            <div class="modal-body">
-                <p>
-                Inspired by <a href="https://github.com/ramda/ramda.github.io/tree/master/repl">Ramda repl</a> 
-                this repl uses <a href="https://babeljs.io/">Babel</a>, and the lastest <a href="http://codemirror.net/">CodeMirror</a> for es6 and even es7 fun with ramda, ramda-fantasy and sanctuary.
-                </p>
-                <p>
-                    The "Examples" menu contains sample code you can play around with from the <a href="http://ramdajs.com/docs/">ramda docs</a>
-                </p>
-                <p>
-                    The "Reset" button clears the repl and repl
-                    history.
-                </p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-            </div>
-        </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
-
-<div class="container col-lg-12 theme-showcase">
-
-<div class="page-header">
-    <h1>Ramtuary REPL 
-      <button class="btn btn-danger" type="reset">Reset</button>
-      <button id="mkurl" class="btn btn-primary">Make Short URL:</button><input id="urlout" type="text" class="urltext" />
-    </h1>
-    <a href="http://ramdajs.com/" target="_blank">Ramda</a> + <a href="https://github.com/ramda/ramda-fantasy" target="_blank">Ramda Fantasy</a> + <a href="https://github.com/plaid/sanctuary" target="_blank">Sanctuary</a>
-</div>
+<div class="col-lg-12 theme-showcase">
+
 <div class="row">
     <div class="col-md-6">
         <div class="panel panel-primary">
             <div class="panel-heading">
                 <h3 class="panel-title">Input</h3>
             </div>
             <div class="panel-body">
-                <textarea class="input" rows="20" cols="50"></textarea>
+                <textarea class="input" rows="80" cols="50"></textarea>
             </div>
         </div>
     </div>
@@ -120,27 +77,28 @@ <h3 class="panel-title">Input</h3>
                 <h3 class="panel-title output">Output</h3>
                 <button class="btn btn-link btn-xs clear-console" type="button">Clear Output</button>
             </div>
-            <div class="panel-body">
+            <div class="panel-body yield">
+                <textarea class="results" rows="80" cols="50"></textarea>
                 <pre class="error"></pre>
                 <pre class="console-log"></pre>
-                <pre class="eval"></pre>
             </div>
         </div>
     </div>
 </div>
 
 </div> <!-- /container -->
+<a href="https://git.io/vrb8q" class="github-corner"><svg width="66" height="66" viewBox="0 0 250 250" style="fill:#53506b; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/addon/edit/closebrackets.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/addon/hint/show-hint.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/addon/hint/javascript-hint.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
-<script src="//wzrd.in/standalone/ramda@latest"></script>
-<script src="//wzrd.in/standalone/sanctuary@latest"></script>
-<script src="//wzrd.in/standalone/ramda-fantasy@latest"></script>
-<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
-<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
+<script src="https://wzrd.in/standalone/ramda@latest"></script>
+<script src="https://wzrd.in/standalone/sanctuary@latest"></script>
+<script src="https://wzrd.in/standalone/tcomb@latest"></script>
+<script src="https://wzrd.in/standalone/ramda-fantasy@latest"></script>
+<script src="https://wzrd.in/standalone/buble@latest"></script>
 
 <script src="lib/js/main.js"></script>
 <script src="lib/js/bundle.js"></script>

lib/css/repl.css

@@ -2,8 +2,8 @@
 
 html, body {
     margin: 0;
-    padding-top: 30px;
-    padding-bottom: 30px;
+    padding: 0;
+    height: calc(100vh - 190px);
 }
 
 .output-wrapper {
@@ -16,8 +16,6 @@ html.hide-output .output-wrapper {
     display: none;
 }
 
-html.hide-output .CodeMirror {
-}
 
 .eval, .source-map {
     background-color: white;
@@ -60,3 +58,11 @@ body.dark, body.dark h1 {
     vertical-align: middle;
     margin-left: 6px;
 }
+
+.input, .results {
+   display:none;
+}
+
+#mkurl {
+  margin: 10px 0;
+}

lib/css/terminal.css

@@ -18,7 +18,7 @@
     margin-left: 12px;
 }
 .top-nav {
-    background: #6F377D;
+    background: #53506b;
     height:15px;
 }
 
@@ -77,4 +77,36 @@ button.btn.btn-danger {
 .navbar.navbar-inverse.navbar-fixed-top {
     background-color: #282a36;
     background-image: none;
-}
+}
+
+.error span.cm-variable {
+    color: red;
+}
+
+.error span.cm-string {
+    color: red;
+}
+
+.error span.cm-number {
+    color: red;
+}
+
+.error span.cm-operator {
+    color: red;
+}
+
+.error span.cm-property {
+    color: red;
+}
+
+.error span.cm-keyword {
+    color: red;
+}
+
+.navbar-brand {
+  color: #53506b;
+}
+
+.btn.btn-link.btn-xs.clear-console {
+    color: #939294;
+}