cerebral / webpackbin

[Deprecated]. Please move to codesandbox.io.

Webpackbin has been deprecated

Instead of working on two similar services Codesandbox.io creator and me are putting our efforts into one project. Please move on to Codesandbox.io for a much better experience than Webpackbin. Very sorry if this makes you sad, but promise that you will feel better when you move on :-)

The domain of http://webpackbin.com has expired, sorry about that, but was too much money to pay for keeping it up for another week. If you need your bin code, you can go to: https://webpackbin-prod.firebaseapp.com/ for now. Move it to http://codesandbox.io :-)

---

webpackbin

A service to share and teach code, using webpack to bundle the code

Architecture

Webpackbin depends on three separate parts.

The webpack-dll service receives a request for one or multiple packages that should be bundled together into a Webpack DLL. A CDN will hold on to the manifest.json and dll.js files created.

The webpack-sandbox service creates a webpack session based on your current webpackbin session. It is what bundles your actual bin code together. It will fetch the manifest.json file to produce references to the external packages code. This service also runs the result of your BIN code, presented in an iFrame on Webpackbin. Any updates of the BIN goes to this service and then Webpackbin refreshes the iFrame. The bundled BIN code injects a script to the dll.js file.

The Webpackbin client connects to Firebase to create new bins, update current state of bins, run LIVE sessions etc. It connects to webpack-sandbox to run the code.

How to run the project

webpack-dll

1. git clone https://github.com/cerebral/webpack-dll.git
2. npm install
3. npm start
4. Runs service on localhost:5000

This will run the service in DEBUG mode. You will be able to open localhost:5000 in the browser to see a list of bundled DLLs and investigate their manifests.

webpack-sandbox

1. git clone https://github.com/cerebral/webpack-sandbox.git
2. npm install
3. npm start
4. Runs service on localhost:4000

The sandbox does not have any dashboard, it just needs to run in the background.

webpackbin

1. git clone https://github.com/cerebral/webpackbin.git
2. npm install
3. npm start
4. Runs client on localhost:3000

How to contribute

Webpackbin is built using the upcoming cerebral 2 framework, using Inferno as the view layer. It is a framework that handles the complexities of application like Webpackbin very well.

The client is built using Webpack and it will lazy load the correct client (desktop or mobile) when it loads. The components folder does not have any business logic. The components are focused on only rendering the application and each component connects to any state or signals it needs. There is almost no props passing.

The modules folder holds the business logic, contained in signals, actions, chains and factories. Cerebral 2 is a highly composable framework and can describe most of its side effects and state changes in a declarative manner.

webpackbin's Issues

iphone 6s "Size is not supported"

When opening anything on webpackbin on iPhone 6+'s Safari, webpack says that "size is not supported". Flipping the phone doesn't help.

Meanwhile:

• it works on sizes that are even smaller if you resize the desktop browser
• it works in "mobile modes" enabled via dev tools in Chrome

System info:

• iOS 10.3.1
• iPhone 6+

Also, related:

• open desktop broswr, load any bin
• resize to ridiculously small size
• everything works
• reload, "size is not supported appears"
• resize to whatever size, "size is not supported" until you reload

Also:

Every other code sharing site works on mobile

Undo not working correctly

When switching the tab and undoing you get the code of the previous tab.

Can not initialize state directly as a class property without forcing no linting - React

When trying this example in webpackbin, without Force no linting option enabled, I get "Parsing error: Unexpected token =" I would very much like to be able to initialize state directly as a class property and use the linter at the same time. Thanks!

To initialize state in React component we used to do this in the constructor.

// BEFORE

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = { counter: 0 };
  }

  ...
}

Now we can initialize state directly as a class property.
// AFTER

import React, { Component } from "react";

class Counter extends Component {
  state = { counter: 0 };

  ...
}

Allow Linter customization

Problem

I can't save the app.css file because I use a property (box-sizing: border-box) that does not pass the Linter.

Ask

Add Linter customization (or temporary ignore) to allow ignoring rules that don't apply or aren't wanted.

Description

As seen below, the Linter prevents me from saving the app.css file to which this belongs because the CSS property is not supported by IE 6/7. However, I certainly don't care about IE 6/7 and would like to ignore that fact, but I am unable to do so currently. This leaves me stuck with a broken app (UI) because I need box-sizing: border-box on all/some components:

Webpack DeprecationWarning

Running npm start I get this:

(node:37273) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

add Emmet plugin for CodeMirror

It would be great to add Emmet plugin for CodeMirror: https://github.com/emmetio/codemirror

Load other file from npm module

How can I import a file from an npm module?

It is not working:

  import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
  import "vue-form-generator/dist/vfg.css";

Error:

Module not found: Error: Can't resolve 'vue-form-generator/dist/vfg-core.js' in '/app/fd9afff8-24bb-4a4e-a263-bb580a0542fe'

Bin: https://www.webpackbin.com/bins/-Ki03eOV65nKuBc_GLy4

where did my webpack bin go?

Here's the link:

https://www.webpackbin.com/VyEINYf5z

It's now gone. Is there any way to recover it?

Meta Language support in .vue files

https://vuejs.org/v2/guide/single-file-components.html

One feature of Vue is to allow for metalanguage support, such as:

• Markdown, Pug, HAML
• TypeScript, JSX, CoffeeScript
• Sass, SCSS, Less, Stylus

Under Configure > Loaders > Vue there should be some options for these.

I should be able to just check the Sass box in the settings and then write this and have it work:

<style lang="sass">
h1
    background: #F00
    border: 2px solid #00F

.thing
    display: inline-block
    padding: 10px
    .stuff
        margin: 30px
</style>

Support for jsx

Currently I get an error when trying to add jsx file or trying to load an npm package that contains jsx file. I guess jsx should be treated the same way as js files.

EDIT: scrap the npm package problem. Seems like one particular package that is causing problem. Most of them should be precompiled.

I do have a fix for user created JSX. Should I create a PR?

webpackbin.com is down

The main site doesn't load anything over HTTPS. HTTP loads a domain boilerplate. Did you forget to renew your domain?

Add boilerplates for JSS

Can't find any way to submit new boilerplates.
@christianalfoni can you add some JSS boilerplates?
Here they are:

JSS:
https://www.webpackbin.com/bins/-KlrNqkpZZmKIz0eYwIk

React-JSS:
https://www.webpackbin.com/bins/-Klr_9GCg7ubIU3D9KFP

Styled-JSS:
https://www.webpackbin.com/bins/-KlrbQuwAZSK5eSzpCSy

Apollo (GraphQL) boilerplate

Making it easy to test out apollo (both client and server!).

Webpack bin is the BEST

https://www.webpackbin.com/bins/-KjAoAmOoExoJhPIpPu1

regeneratorRuntime is not defined

Hey! I wanted to start redux-saga project, but i was unable to create generator functions(function* () {}), which is requirements for sagas. Seems like webpackbin needs some babel-polyfill or something like that. Am i missing something or it is really not implemented yet? Thanks!

API for project upload

Hi @christianalfoni!

We link to a simple example webpackbin from the Material-UI issue template, but it would be fantastic to be able to link to live versions of the examples from the Material-UI docs examples, either updating the js file in an existing base project, or uploading an entire project programmatically when the docs example changes.

The result would be similar to what AngularMaterial do with CodePen.

Is this a feature you'd consider adding in some form? Thanks!

base64 error with RxDB

Found another weird one!

https://www.webpackbin.com/bins/-KjnpS0w30PvOAe7y1Ja

Getting:

Expose webpack.config.js

I love current configuration interface but for some cases I would like to experiment with the loaders and their settings. Do you think access to the config file could be added through the UI? Happy to work on that.

Load .vue files from node_modules

Currently it is not possible to load a .vue file from node_modules.

I got this error why in try to import a package

import flatPickr from 'vue-flatpickr-component';

Uncaught Error: Module parse failed: /root/webpack-packager/packages/1093113650/node_modules/vue-flatpickr-component/src/flatPickr.vue Unexpected token (1:0) You may need an appropriate loader to handle this file type. | <template> | | <input type="text"

There are various packages which expose .vue file, for example -

https://github.com/ankurk91/vue-flatpickr-component
https://github.com/sagalbot/vue-select

There may be more.

Seems like node_modules is excluded in vue-loader config.

Typescript Starter: 'ERROR: ModuleBuildError'

Following error on starting an new project with typescript:

Module build failed: Error: ts-loader was supplied with an unexpected loader option: isolatedModules

Please take a look at the options you are supplying; the following are valid options:
silent / logLevel / logInfoToStdOut / instance / compiler / configFile / configFileName / transpileOnly / ignoreDiagnostics / visualStudioErrorFormat / compilerOptions / appendTsSuffixTo / appendTsxSuffixTo / entryFileIsJs / happyPackMode / getCustomTransformers

at validateLoaderOptions (/app/node_modules/ts-loader/dist/index.js:92:19)
at getLoaderOptions (/app/node_modules/ts-loader/dist/index.js:75:5)
at Object.loader (/app/node_modules/ts-loader/dist/index.js:23:19)

feature-request: Link to specific file for easy sharing

Hi,

I'm really excited about WebpackBin.

Would be great to be able to share a link of a bin which focuses a specific file.
I was thinking we could add #filename.js or a /filename.js at the end.

@christianalfoni I"m willing to help if you could point me to where that URL logic should be written, I"m not familiar with the project.

Old issue ref:
christianalfoni/webpack-bin#181

Feature request - switch to Monaco Editor

https://github.com/Microsoft/monaco-editor

Replace CodeMirror with Monaco. It provides a much richer editor. Monaco is the same editor that powers VS Code, TypeScript Playground, and Visual Studio Online.

Demo page.

Update Typescript version

Spread operator is supported in recent versions and is not supported in webpackbin.com

Failed to decode downloaded font

Hi! I was trying to load 'font awesome' and I stumbled upon this strange issue. In Chrome it gives me:

Failed to decode downloaded font: https://sandbox.webpackbin.com/fonts/fontawesome-webfont.woff2?v=4.7.0
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: https://sandbox.webpackbin.com/fonts/fontawesome-webfont.woff?v=4.7.0
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: https://sandbox.webpackbin.com/fonts/fontawesome-webfont.ttf?v=4.7.0
(index):1 OTS parsing error: invalid version tag

In Firefox I see a similar error:

downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1) source: https://sandbox.webpackbin.com/fonts/fontawesome-webfont.woff2?v=4.7.0  sandbox.webpackbin.com:7:12
downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2) source: https://sandbox.webpackbin.com/fonts/fontawesome-webfont.woff?v=4.7.0  sandbox.webpackbin.com:7:12
downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:3) source: https://sandbox.webpackbin.com/fonts/fontawesome-webfont.ttf?v=4.7.0 sandbox.webpackbin.com:7:12

Empty boxes are rendered instead of characters. I wonder if someone seen this problem?

console.log prints only first argument

https://www.webpackbin.com/bins/-KrMMAi4qBDsJh1OkI2I

Class properties not working

When I turn the class properties option on and the linter off I still get the error "Code is not valid, check lint messages" when saving the code.

Getting errors when trying to run the project

Hi,

I'm trying to work on a PR, but I'm getting some errors on initial setup (based on the Readme).

Did a fresh install on a Mac OS X 10.12.4.
Node v6.9.1
NPM 3.10.8

First I got:

signOutClicked.js:15 Uncaught TypeError: (0 , _cerebralRouter.redirect) is not a function
    at Object.defineProperty.value (signOutClicked.js:15)
    at __webpack_require__ (bootstrap ccac89c…:49)
    at Object.defineProperty.value (index.js:14)
    at __webpack_require__ (bootstrap ccac89c…:49)
    at Object.defineProperty.value (main.js:11)
    at __webpack_require__ (bootstrap ccac89c…:49)
    at Object.<anonymous> (main.js:31154)
    at __webpack_require__ (bootstrap ccac89c…:49)
    at bootstrap ccac89c…:146
    at bootstrap ccac89c…:146

So I commented out the line: src/modules/app/signals/signOutClicked.js:15 and got:

newBinClicked.js:6 Uncaught TypeError: (0 , _cerebralRouter.goTo) is not a function
    at Object.defineProperty.value (newBinClicked.js:6)
    at __webpack_require__ (bootstrap df657d2…:49)
    at Object.defineProperty.value (index.js:16)
    at __webpack_require__ (bootstrap df657d2…:49)
    at Object.defineProperty.value (main.js:11)
    at __webpack_require__ (bootstrap df657d2…:49)
    at Object.<anonymous> (main.js:31156)
    at __webpack_require__ (bootstrap df657d2…:49)
    at bootstrap df657d2…:146
    at bootstrap df657d2…:146

So I commented out that line as well: src/modules/app/signals/newBinClicked.js:6 and then got:

utils.js:97 Uncaught Error: Cerebral - You are not passing controller to Container
    at throwError (utils.js:97)
    at Container.getChildContext (Container.js:33)
    at Object.createClassComponentInstance (utils.js:44)
    at mountComponent (mounting.js:149)
    at Object.mount (mounting.js:17)
    at Object.render (rendering.js:89)
    at Object.defineProperty.value (main.js:65)
    at __webpack_require__ (bootstrap 41a6227…:49)
    at Object.<anonymous> (main.js:31156)
    at __webpack_require__ (bootstrap 41a6227…:49)

I suppose it has something to do with some Cerebral packages versions or something.
Especially this line in package.json raised an eyebrow:

"cerebral-router": "next",

And the link to cerebral-router on cerebral-module-router is broken:
https://github.com/cerebral/cerebral/tree/master/packages/cerebral-router

It says For Cerebral 2 use cerebral-router instead. but it points to a 404.

Ref:
https://github.com/cerebral-legacy/cerebral-module-router

So...
I'm stuck.

Side Note:
The sane stack trace is possible because of PR #29

Local instance not loading

Tried starting the local instance. It is saying 'Loading it up!' but nothing happens. I don't see any errors in the developer console.

(node:25788) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
webpack: wait until bundle finished: /__webpack_hmr
webpack: wait until bundle finished: /

WARNING in ./~/htmlhint/lib/htmlhint.js
8:7694-7701 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/htmlhint/lib/htmlhint.js
8:13011-13018 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
webpack: Compiled with warnings.

Old webpackbin down

I have plans of finally migrating my bins to webpackbin 2, but it seems that the old webpackbin is down (for an example, check out this link: https://www.webpackbin.com/4kXjGAw_M). When you click on "Continue to bin", you are directed to an empty Heroku application.

Are there any plans of fixing this?

Accidentaly can blow away a lot of stuff easily

While trying to close the add packages pane, I accidently clicked a Typescript demo and it erased my bin with no clear way to restore!

Just a note, should either have history or not as easy to replace one. Or create a new one instead of replace.

Download disabled ?

Hello, great project and nice to see some upgrades!
I do no seem to be able to download some projects anymore (disabled download button) , even if the project in question does not seem to have issues : what could be causing it ?
(I looked at the code , and it does not seem to satisfy any of the conditions for having a disabled button )
Thanks in advance !

Where is cerebral-provider-firebase source code ?

i can just find @cerebral/firebase

ERR_CERT_AUTHORITY_INVALID: cannot load sandbox preview

macOS High Sierra, both safari and chrome

Error on bin - but runs ok after downloading

Here is a bin: https://www.webpackbin.com/bins/-Km0PFss7TpzU6HR4xBI
shows an error, but if you download it and run locally then there is no errors.

Feature request: add svg-sprite-loader

Hi!
Is it possible to add support for svg-sprite-loader to handle SVG files? I can make a PR for this.

Feature request: add support for supporting console.log

Some modules may use console.log implicitly, which we can't easily change to bin.log. It would be good to have support for console.log for this reason, and also for more easily copying/pasting code between webpackbin and other environments.

Errors on React Boilerplate App

https://www.webpackbin.com/bins/-KeVMcQWGocAn5VJL6XL

feature request: sub-folders + upload pre-existing repo

this is a comment moved from the old repo: christianalfoni/webpack-bin#227

I love the left file browser by the way. I think it should just be the default and the files row removed so that there is more vertical space. I personally have a few demos that really need that vertical space since the app's are made to be non-vertically-scrollable on purpose.

File ordering is far less important with a tall sidebar as we have now because a lot more files can be seen at once since each file name's text runs horizontally.

However what is now important is the ability to make folders. That way what you build here can actually become your app. Couple that with the ability to upload apps (even if the webpack config can't be used), and you have huge marketing potential: now anyone can upload their pre-existing app without having to remake it from scratch. This is especially important for package creators that want to demonstrate capabilities, as they likely already built boilerplate examples and if they could click one button to upload their code, webpackbin now has a bunch more high-traffic examples. Those package creators are far less likely to recreate everything on webpackbin. I mean you could also simply allow pasting the URL to a github URL and it will extract its files. Imagine how many package creators will do that. Imagine how many users of packages will do that for them and post the link back to their Github issues, which the creator will then see and perhaps post in a readme, all without having to even think about doing it themselves.

Basically the way React Storybook became popular for package maintainers to showoff their packages in use is what could happen for webpackbin. It does not matter for most packages that we can't bring along our webpack config--we can easily figure out how to replicate what we need in webpackbin. But if you want to take it farther, obviously build a way to specify custom webpack configs. At least part of it: e.g. loaders, plugins. I get that you don't want arbitrary code running on your server where these packages are built. So whitelist some plugins and loaders, etc.

Anyway, I know it's a lot of work. I'm grateful for the sidebar you recently added. My suggestion is that the next step is folders. And then the next step after that is a feature to upload or paste a link to a repo to extract files from. Those 2 features don't seem outlandish, and perhaps are low-hanging fruit. Just add a button next to the files in the drawer to designate which file is the entry, rather than only allowing that on file creation.

Module not found: Error Can't resolve

I get the error Module not found: Error: Can't resolve 'react-openlayers' in '/app/98efd2e9-6728-4bf0-b0d7-14db459c4697'
The module seems to be installed though (version 0.2.1)
https://www.webpackbin.com/bins/-KpscD00kKYDWxe9NlGx

Any input on this issue?

feature-request: "Tidy" like in jsfiddle and "Collapse" like in plnkr

Hello! Thanks for the great idea and implementation! I've found it very useful!

It would be great if you will add these features:

• "Tidy" like in jsfiddle
  

• "Collapse" like in plnkr
  

Breaks on module 'slate'

Attempting to use package 'slate' breaks webpackbin unfortunately, works in browser.

Webpackbin site is down / domain registration

New Boilerplates

Do you have a process for submitting new boilerplates to be listed on the site? I'd like to create one similar to styled-components for glamorous.

Is it possible to somehow restore bins which were hosted on heroku?

Hi, is it possible to restore bins I created as a help for google-map-react
All the links here
https://github.com/istarkov/google-map-react/blob/master/DOC.md
Or I need to write them again?

Impossible to recover after: 413 Payload Too Large

After trying to upload 97KB json file I got this error.

Deleting file, refreshing the browser and even opening a new tab - doesn't help.

Seems like the files are saved/retrieved using firebase first. Hitting cmd+S POSTs them to sandbox.webpackbin.com where the error is triggered.

Here's example bin: https://www.webpackbin.com/bins/-KrqKsZP47q9olzHb9hN

vim mode

I see a few minimal references to vim in the source. Is there any work that needs done to make that a reality for webpackbin?

Cannot add or remove from Favorites

Browser: Chrome 61.0.3163.79 (Official Build) (64-bit)
OS: MacOS Sierra 10.12.6 (16G29)

Then trying to add or remove from favorites I get this:

common.637f680af37c139b6e68.js:1 Uncaught Error: Cerebral operator.when: You have to use the STATE or PROPS TAG as values, see: http://cerebraljs.com/docs/api/operators.html#when
    at Object.e [as function] (common.637f680af37c139b6e68.js:1)
    at e.value (common.637f680af37c139b6e68.js:1)
    at l (common.637f680af37c139b6e68.js:1)
    at l (common.637f680af37c139b6e68.js:1)
    at o (common.637f680af37c139b6e68.js:1)
    at a (common.637f680af37c139b6e68.js:1)
    at t.value (common.637f680af37c139b6e68.js:1)
    at t.value (common.637f680af37c139b6e68.js:1)
    at run (common.637f680af37c139b6e68.js:1)
    at onClick (b570b2b3b3ac8c1958a8.js:1)

Unable to type characters '[' and ']'

Hi,

In the new version of webpackbin, I'm unable to type [ and ].

They're mapped to the shortcut which switch files. 😅

Add feature resizable areas for work and preview

Add feature resizable areas for work and preview