On bins and bundles

When I first created a new bin, I couldn't figure out why it wasn't running. However, I couldn't even save it to post here because most of the buttons were disabled

I eventually found a linting error re: mixed spaces & tabs

and fixing that enabled the buttons

This behavior wasn't expected or obvious to me. It was only after scanning the file many times that I found the "error" (it's a style issue, not a language one).

Perhaps these should be displayed in a fixed position on the page (top or bottom) so they're more obvious to the user.

Is there a good reason to prevent running a bin because of a formatting issue?

Is there a way to control the rules & levels for the linter?

Is it a good idea to prevent saving the bin if there's an error? What if the "error" is a stylistic one?

It would be nice to be able to select and copy text from the .js and .css sources in the browser.

Like cmd+T in Atom. This could allow closing file tabs and reopening. Would need to change file deletion behavior too, but wanted to capture this feature request.

It would be great to ask you some question when we want to contribute.
@christianalfoni could you open a Gitter or Slack for this project?

It would be nice to get an error message if module given in an import line was not found. Both of these lines have errors, but no error message is given:

import React from './react';
import HalloVerden from './HelloWorld';

The error in the first line is the './' before 'react'.

A view of the html source for the output would be very useful.
Plus link through to css files?

Of course you can use F12 and inspector picker but that is a little fiddly.

Suggest tabs for right hand pane

I'm currently using JSBin to give webVR workshop. It allows to get instant feedback on ThreeJS project. The key advantage so far is that it allows to detach the output and thus load it on a mobile device then switch to VR mode.

I'd like to recreate the bins listed in https://twitter.com/JFSIII/status/704798099818958848 in webpack-bin but cannot because, afaict, there's no way to supply HTML or CSS to be used by the bin.

importing from npm, and using other ES6 features is great but, IMO, no HTML or CSS files limits the utility.

• open empty bin
• start type in text area before any file created
• see console

• Information about repo and creating issues
• Describe how the project works in the README
• Do not create BIN until first save (coming from root url)
• Implement Live Sharing
• Better handling of when to show loader, should be time based
• Add timestamp to bins
• Add timestamp to in-memory bundles and clean up process
• Add Cerebral, Redux, CycleJS (Angular2 has a crazy setup of packages)
• Add Sass loader
• Add Less loader
• Display text about bin.log() when no logs
• Delete files
• Implement console using global bin.log in javascript to log out values. Want to keep normal console.log behaviour. Will also log out JavaScript errors
• Change to ts-loader
• Twitter share
• Embed bin
• Add TypeScript linter (https://github.com/basarat/TypeScriptEditor)
• Download app with package.json, webpack deps and files
• Google Analytics
• Increase session duration to 24 hours
• Improve responsive experience
• Add loader when launching app
• Allow log to be shown below preview (http://alexkuz.github.io/react-dock/demo/)
• Always allow LIVE, just start up a new BIN first, if not currently owner
• Add HTML highlighting and linter
• Add raw loader for HTML and TXT
• Add json loader, highlighter and linter
• Add better initial boilerplate with css and HTML
• Bring back decorator

Just add a favicon so I can give its respectful place in my bookmarks bar 😄

I downloaded the Cycle JS boilerplate and discovered that the README.md had the same content as src/index.tpl.html.

• load any boilerplate
• switch tab
• edit something
• press ctrl-z several times

content of current replaced with content of previous one

I get this error when running npm run dev. HMR in browser is not working. Seems like a pretty big build för 4.5 seconds when only changing an inline style tag. Am I doing something wrong? I cloned the repo. Installed the node modules. I'm on "node":"5.0.0","npm":"3.3.6"

[BABEL] Note: The code generator has deoptimised the styling of "/Users/Mathias/Desktop/webpack-bin/app/components/CodeEditor/eslint.js" as it exceeds the max of "100KB".
[0] [kotatsu] Built in 30.4s.
[0] [kotatsu] Done!
[0] [kotatsu] Serving your app on port 3000...
[0] [kotatsu] ./app/components/CodeEditor/eslint.js
[0] Critical dependencies:
[0] 1:343-350 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
[0]  @ ./app/components/CodeEditor/eslint.js 1:343-350
[0] 
[0] [kotatsu] Bundle rebuilding...
[0] [kotatsu] Built in 4.5s.
[0] [kotatsu] ./app/components/CodeEditor/eslint.js
[0] Critical dependencies:
[0] 1:343-350 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
[0]  @ ./app/components/CodeEditor/eslint.js 1:343-350
[0] [kotatsu] Updated modules:
[0] [kotatsu]   - ./app/components/Bin/index.js

In order to make development and deployment easier I think it would be a great idea to add Docker.
This way we don't need to clutter our system with dependencies such as mongodb and we could guarantee that the project will run on any machine as long as Docker is installed.

See http://www.webpackbin.com/N1jDrrvne where preview pane is push nearly off screen entirely because of a long line of text.

The biggest issue is that the split isn't resizable so the only way to get it into view is to wrap your code differently.

It'd be nice to have a reasonable width with overflow: auto or scroll on them so you could always read the output. In this case, the preview pane actually contained a helpful message but I couldn't see it.

Or alternately add configuration options for the linter.

Support specific versions of an npm packages. e.g. d3@next or [email protected].

This doesn't mean import d3 from 'd3@next'. Rather, some way to add packages at specific versions via the Configure menu.

Initially toggle fullscreen or split, can add drag etc. later

By firing off a signal when changing files/code it will be possible to slide in/out the preview window when on mobile. Allowing people to follow a live coding session on a mobile device. Pretty neat :)

I can't see this option, but I think it will be kinda neat! There are several packages that uses jsx and are drop-in replacement for react (e.g. https://github.com/developit/preact). But they need one tweak for them:

query: {
      presets: ['es2015', 'stage-0'],
      plugins: [
        ['transform-react-jsx', { //this
          'pragma': 'h'
        }]
      ]
    },

Frozen on "loading your webpackbin..." when selected a boilerplate to load (react cerebral). Had previously loaded redux fine.

Currently you can only create new files or delete them. Would be great to click an existing tab and then rename an existing file. Not a big deal, as you can currently copy whats in your file, delete the file, and paste code into an new one. But, it would be nicer to just rename it. 😄

It's easy for the search results to overflow the menu/viewport height. The container should be scrollable.

Notice the difference between:

The search results as seen on my 13" laptop:

Versus on my 27" Display

The laptop version doesn't show results for, say, the react 15.0.0-rc.1, react-dom 15.0.0-rc-1 bundle which means it can't be used in bins.

Have to save first, should just run

It should work, but does not? report on iPad mini. Might have been downtime though

From the demo video you seemed to save with a key sequence. There only seems to be 'Run' on the UI

Can you document this and others? Perhaps use a ? key handler like google do?

I looks like closing a file tab deletes the file. If so, would be nice to add a warning so work is not lost.

To show off Backbone stuff etc.

Again, not super important, but would smooth out the current workflow.

Would be awesome to see a list of filtered list of npm packages as you search. Right now there is no UI feedback until you hit enter.

I want to be able to login and see all the bins I have created

For modified files but not yet saved, perhaps a star besides the name just to know what exactly runs. Then, when we save, the star would disappear.

Before:

After:

Great project thanks !

Save the state of the log being open or not in the database. Allowing you to set initial state of bin

Just did a "live" feature test:

1. Loaded site and hit live.
2. Loaded cerebral-react booter
3. Second client connected
4. First client wrote out something to the bin.log
5. Clicked Run and looked at the log

It seems to get stuck in a loop. Almost like the run gets called on the second client which calls run on the first client which calls run on the second client etc. Disconnecting the second client fixes the loop issue on the first.

I cloned the repo, installed deps and wanted to npm start but got a bunch of errors regarding missing dependencies.

$ npm start

> [email protected] start /Users/emmenko/dev/src/webpack-bin
> node start.js

module.js:338
    throw err;
          ^
Error: Cannot find module 'mime'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/emmenko/dev/src/webpack-bin/server/middleware.js:6:12)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

$ npm i mime
[email protected] node_modules/mime

$ npm start

> [email protected] start /Users/emmenko/dev/src/webpack-bin
> node start.js

module.js:338
    throw err;
    ^
Error: Cannot find module 'request'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/emmenko/dev/src/webpack-bin/server/npm.js:5:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

$ npm i request
[email protected] node_modules/request
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

$ npm start

> [email protected] start /Users/emmenko/dev/src/webpack-bin
> node start.js

Running WebpackBin version:  0.6.0
fs.js:565
fs.write = function(fd, buffer, offset, length, position, callback) {
                                                 ^
Error: ENOENT, no such file or directory '/Users/emmenko/dev/src/webpack-bin/node_modules/babel-loader/package.json'
    at Error (native)
    at Object.fs.openSync (fs.js:500:18)
    at Object.fs.readFileSync (fs.js:352:15)
    at null._onTimeout (/Users/emmenko/dev/src/webpack-bin/server/preLoadPackages.js:21:37)
    at Timer.listOnTimeout (timers.js:110:15)

And so on...

Am I missing something here?

I think all the boilerplates should implement the redux counter example. So it's easier to compare them and pick the one more familiar

It'd be nice if you could just type import React from 'react' and have webpack-bin do the right thing for you.

Getting this error all the time.

TypeError: req.session.middleware is not a function

It's not very obvious when using webpack bin for the first time that the "Current Package Bundle" search will search and install packages from the npm registry. I initially thought it would search for existing packages in my current bundle. Perhaps rename it to "Search NPM packages:" and move "Current Package Bundle" underneath the search input (above the installed package list).

Ah, just noticed that "Add NPM package..." is set as placeholder text. But, I still missed it the first few times using it...wasn't totally discoverable to me.

I'd love to have a live preview URL in edition to the live edit mode. This would allow you to open the preview on a device. This would pair nicely with some boilerplate for React Material UI. The general idea though is make things friendlier for testing/sharing mobile/touch UIs.

A similar request was also recently made in #33.

Need to clean up logs to identify errors better

webpack-bin looks very promising, but it could really use support for some popular loaders like Jade (pug)! Keep it up!

https://github.com/basarat/TypeScriptEditor

input('.field', {type: 'text'}), does as well assume {} = attribs and [] = children

OS X 10.11.3 Observed in Safari, Firefox, Chrome (Stable & Canary)