Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Make fun auto-refresh on file save by default

  • Loading branch information...
commit d8ccd276692fdb018b321b10a846829fff50a579 1 parent 2c6305f
Marcus Westin authored
127 apps/ide/codemirror/codemirror.css
View
@@ -1,127 +0,0 @@
-.CodeMirror {
- line-height: 1em;
- font-family: monospace;
- height: 100%;
-}
-
-.CodeMirror-scroll {
- overflow: auto;
- height: 100%;
- /* This is needed to prevent an IE[67] bug where the scrolled content
- is visible outside of the scrolling box. */
- position: relative;
- outline: none;
-}
-
-.CodeMirror-gutter {
- position: absolute; left: 0; top: 0;
- z-index: 10;
- background-color: #f7f7f7;
- border-right: 1px solid #eee;
- min-width: 2em;
- height: 100%;
-}
-.CodeMirror-gutter-text {
- color: #aaa;
- text-align: right;
- padding: .4em .2em .4em .4em;
- white-space: pre !important;
-}
-.CodeMirror-lines {
- padding: .4em;
- white-space: pre;
-}
-
-.CodeMirror pre {
- -moz-border-radius: 0;
- -webkit-border-radius: 0;
- -o-border-radius: 0;
- border-radius: 0;
- border-width: 0; margin: 0; padding: 0; background: transparent;
- font-family: inherit;
- font-size: inherit;
- padding: 0; margin: 0;
- white-space: pre;
- word-wrap: normal;
- line-height: inherit;
- color: inherit;
-}
-
-.CodeMirror-wrap pre {
- word-wrap: break-word;
- white-space: pre-wrap;
- word-break: normal;
-}
-.CodeMirror-wrap .CodeMirror-scroll {
- overflow-x: hidden;
-}
-
-.CodeMirror textarea {
- outline: none !important;
-}
-
-.CodeMirror pre.CodeMirror-cursor {
- z-index: 10;
- position: absolute;
- visibility: hidden;
- border-left: 1px solid black;
- border-right: none;
- width: 0;
-}
-.cm-keymap-fat-cursor pre.CodeMirror-cursor {
- width: auto;
- border: 0;
- background: transparent;
- background: rgba(0, 200, 0, .4);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800);
-}
-/* Kludge to turn off filter in ie9+, which also accepts rgba */
-.cm-keymap-fat-cursor pre.CodeMirror-cursor:not(#nonsense_id) {
- filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-}
-.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
-.CodeMirror-focused pre.CodeMirror-cursor {
- visibility: visible;
-}
-
-div.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }
-
-.CodeMirror-searching {
- background: #ffa;
- background: rgba(255, 255, 0, .4);
-}
-
-/* Default theme */
-
-.cm-s-default span.cm-keyword {color: #708;}
-.cm-s-default span.cm-atom {color: #219;}
-.cm-s-default span.cm-number {color: #164;}
-.cm-s-default span.cm-def {color: #00f;}
-.cm-s-default span.cm-variable {color: black;}
-.cm-s-default span.cm-variable-2 {color: #05a;}
-.cm-s-default span.cm-variable-3 {color: #085;}
-.cm-s-default span.cm-property {color: black;}
-.cm-s-default span.cm-operator {color: black;}
-.cm-s-default span.cm-comment {color: #a50;}
-.cm-s-default span.cm-string {color: #a11;}
-.cm-s-default span.cm-string-2 {color: #f50;}
-.cm-s-default span.cm-meta {color: #555;}
-.cm-s-default span.cm-error {color: #f00;}
-.cm-s-default span.cm-qualifier {color: #555;}
-.cm-s-default span.cm-builtin {color: #30a;}
-.cm-s-default span.cm-bracket {color: #cc7;}
-.cm-s-default span.cm-tag {color: #170;}
-.cm-s-default span.cm-attribute {color: #00c;}
-.cm-s-default span.cm-header {color: #a0a;}
-.cm-s-default span.cm-quote {color: #090;}
-.cm-s-default span.cm-hr {color: #999;}
-.cm-s-default span.cm-link {color: #00c;}
-
-span.cm-header, span.cm-strong {font-weight: bold;}
-span.cm-em {font-style: italic;}
-span.cm-emstrong {font-style: italic; font-weight: bold;}
-span.cm-link {text-decoration: underline;}
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
31 apps/ide/codemirror/codemirror.fun
View
@@ -1,31 +0,0 @@
-<link rel="stylesheet" href="./codemirror.css" />
-<script src="./codemirror.js"></script>
-
-codemirror = {
- render:template(size, changeHandler) {
- sizeStyle = { style:size }
- <script sizeStyle=sizeStyle changeHandler=changeHandler>
- var xhr = require('fun/node_modules/std/xhr')
-
- fun.hooks[hookName].style.display = 'block'
- fun.attrExpand(hookName, sizeStyle)
-
- xhr.get('/ide/load', null, function(err, res) {
- if (err) {
- console.warn(err)
- return
- }
-
- var editor = CodeMirror(fun.hooks[hookName], { value:res, onChange:onChange })
- onChange(editor)
- })
-
- function onChange(editor, change) {
- xhr.post('/ide/compile', { code:encodeURIComponent(editor.getValue()) }, function(err, html) {
- var event = fun.expressions.fromJsValue({ error:err, html:html })
- changeHandler.invoke([event])
- })
- }
- </script>
- }
-}
3,047 apps/ide/codemirror/codemirror.js
View
0 additions, 3,047 deletions not shown
24 apps/ide/ide.fun
View
@@ -1,24 +0,0 @@
-import viewport
-import ./codemirror
-
-paneSize = { width:viewport.size.width / 2, height:viewport.size.height, border:'none' }
-
-pane = { style: { float:'left', width:paneSize.width, height:paneSize.height } }
-
-<div #pane>
- codemirror.render(paneSize, handler(event) {
- if (event.error) {
- // TODO show helpful error
- } else {
- <script html=event.html>
- var iframe = document.getElementById('output')
- var doc = iframe.contentWindow.document
- doc.open()
- doc.write(html.getContent())
- doc.close()
- </script>
- }
- })
-</div>
-
-<iframe frameBorder='0' #pane id="output"></iframe>
98 bin/fun
View
@@ -6,15 +6,19 @@ var fs = require('fs'),
path = require('path'),
optimist = require('optimist'),
map = require('std/map'),
- package = require('../package'),
+ pckg = require('../package'),
exec = require('child_process').exec,
- curry = require('std/curry')
+ curry = require('std/curry'),
+ socketIo = require('socket.io'),
+ colors = require('colors')
/* Commandline options
*********************/
-var commandline = optimist.usage('Usage: fun path/to/app.fun [--compile --host=127.0.0.1 --port=8080 --normalize.css=false --minify=true]'),
+var commandline = optimist.usage('Usage: fun [compile] path/to/app.fun [--port=8080 --normalize.css=false --minify=true]'),
argv = commandline.argv,
- filenameRaw = argv.compile || (argv._ && argv._[0]),
+ line = argv._,
+ compile = line[0] == 'compile',
+ filenameRaw = (compile ? line[1] : line[0]),
filename = filenameRaw && filenameRaw[0] == '/' ? filenameRaw : path.join(process.cwd(), filenameRaw)
var opts = {
@@ -22,7 +26,7 @@ var opts = {
'normalize.css': argv['normalize.css'] != 'false'
}
-if (argv.compile) {
+if (compile) {
loadCompiler().compileFile(filename, opts, function(err, htmlFile) {
if (err) {
console.log(err)
@@ -32,15 +36,14 @@ if (argv.compile) {
return process.exit(0)
})
} else if (argv.v || argv.version) {
- console.log("fun", package.version)
+ console.log("fun", pckg.version)
return process.exit(0)
-} else if (!argv._[0]) {
+} else if (!filename) {
console.error(commandline.help())
return process.exit(-1)
} else {
- // dev variables
- var port = argv.port || 8080,
- host = argv.host
+ // dev environment
+ var port = argv.port || 8080
try {
var stat = fs.statSync(filename)
@@ -54,25 +57,35 @@ if (argv.compile) {
return process.exit(-1)
}
- http.createServer(function(req, res) {
- var compileFile = filename
-
- if (req.url == '/favicon.ico') { return send404(res) }
- if (req.url == '/ide') { compileFile = path.join(__dirname, '../apps/ide/ide.fun') }
- if (req.url == '/ide/load') { return fs.readFile(compileFile, curry(respond, res)) }
- if (req.url == '/ide/compile') { return compile(req, res, opts) }
-
- loadCompiler().compileFile(compileFile, opts, function(e, appHtml) {
- if (e) {
- res.writeHead(500)
- res.end(errorHtmlResponse(e))
- } else {
- res.writeHead(200)
- res.end(appHtml)
- }
+ var ideServer = http.createServer(function(req, res) {
+ if (req.url == '/favicon.ico') {
+ return send404(res)
+ } else {
+ fs.readFile(path.join(__dirname, '../src/dev-client.html'), curry(respond, res))
+ }
+ })
+
+ var ideServerIo = socketIo.listen(ideServer)
+ ideServerIo.set('log level', 0)
+ ideServer.listen(port)
+
+ var sockets = []
+
+ ideServerIo.sockets.on('connection', function(socket) {
+ console.log("Dev client connected")
+ sockets.push(socket)
+ loadCompiler().compileFile(filename, opts, function broadcast(err, appHtml) {
+ socket.emit('change', { error:err, html:appHtml })
+ })
+ })
+
+ fs.watch(filename, { persisten:true }, function(event, changedFilename) {
+ loadCompiler().compileFile(filename, opts, function broadcast(err, appHtml) {
+ ideServerIo.sockets.emit('change', { error:err, html:appHtml })
})
- }).listen(port, host)
- console.log('Serving', argv._[0], 'on', (host||'localhost')+':'+port, 'with options:\n', opts)
+ })
+
+ console.log('Fun!'.magenta, 'Serving', filenameRaw.green, 'on', ('localhost:'+port).cyan, 'with these options:\n', opts)
}
function send404(res) {
@@ -80,24 +93,6 @@ function send404(res) {
res.end()
}
-function compile(req, res, opts) {
- var input = ''
- req.on('data', function(data) { input += data })
- req.on('end', function() {
- var code = decodeURIComponent(input.substr(5).replace(/\+/g, ' '))
- loadCompiler().compileCode(decodeURIComponent(code), opts, curry(respond, res))
- })
-}
-
-function errorHtmlResponse(e) {
- return ['<!doctype html>','<body>',
- '<button ontouchstart="location.reload();" onclick="location.reload()">Reload</button>',
- '<pre>',
- e.stack ? e.stack : e.message ? e.message : e.toString(),
- '</pre>'
- ].join('\n')
-}
-
function loadCompiler() {
for (var key in require.cache) {
delete require.cache[key]
@@ -113,4 +108,13 @@ function respond(res, e, content) {
res.writeHead(200)
res.end(content.toString())
}
-}
+}
+
+function errorHtmlResponse(e) {
+ return ['<!doctype html>','<body>',
+ '<button ontouchstart="location.reload();" onclick="location.reload()">Reload</button>',
+ '<pre>',
+ e.stack ? e.stack : e.message ? e.message : e.toString(),
+ '</pre>'
+ ].join('\n')
+}
4 package.json
View
@@ -17,8 +17,10 @@
"request": "2.9.153",
"clean-css": "0.3.2",
"require": "0.4.9",
+ "socket.io": "0.9.6",
"dom": "0.1.3",
- "std": "0.1.34"
+ "std": "0.1.34",
+ "colors": "0.6.0-1"
},
"devDependencies": {
"nodeunit": "0.6.4",
21 src/dev-client.html
View
@@ -0,0 +1,21 @@
+<!doctype html>
+<html><head>
+ <title>Fun!</title>
+ <style type="text/css">
+ html, body, iframe { margin:0; width:100%; height:100%; }
+ </style>
+</head><body>
+ <script src="/socket.io/socket.io.js"></script>
+ <script>
+ var socket = io.connect('http://localhost');
+ socket.on('change', function (data) {
+ var iframe = document.getElementById('output')
+ var doc = iframe.contentWindow.document
+ doc.open()
+ doc.write(data.html)
+ doc.close()
+ });
+ </script>
+
+ <iframe id="output" frameborder='0' style="height:100%; width:100%;"></iframe>
+</body></html>
Please sign in to comment.
Something went wrong with that request. Please try again.