Skip to content

Home

Jump to bottom
Chunpeng Huo edited this page Feb 21, 2020 · 10 revisions

Dumber Gist

An online IDE to write JS SPA prototypes in your own GitHub gists. It runs on Dumber bundler.

What's the differences from other online IDEs

  1. Free forever.
  2. Not many features, but ultimately simple.
  3. Written in Aurelia.
  • will migrate to Aurelia 2 when it's ready.
  1. Bundler runs purely in browser.
  • two tiny backends, one for GitHub OAuth, another for sharing traced cache globally.
  • only traced results of npm packages are cached remotely.
  1. Save your project in your own GitHub Gists.

Supported JS Frameworks

There are two popular frameworks missing from this list: Angular and Ember. Because their toolchain are designed to run in Nodejs environment, it needs more study on how to bring the toolchain up in browser environment. The same reason applies to unsupported Vue 2 SFA .vue file format.

JS syntax

It supports all the JS syntax that those frameworks want. Dumber Gist is designed to run on latest ever-green browsers. Your app is transpiled to ES2017 to take the advantage of latest browsers.

Dumber Gist supports legacy JS decorator syntax, not the latest decorator proposal syntax. Because practically all frameworks are still using legacy decorator syntax.

CSS syntax

Dumber Gist supports less/sass/scss and native css. It doesn't support Stylus syntax yet, because a small trouble (how to import sibiling file) to run stylus compiler inside browser.

You can even mix the support CSS file formats in one project.

Bundler config

For simplicity, no dumber config exposed to end users. If you want to use prepend, just add those JS files to index.html.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

  <!-- Add those prepends before entry-bundle.js -->
  <script src="https://get/some.js"></script>

</head>
<body>
  <script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>

package.json

The package.json file helps Dumber Gist to pick correct toolchain. For example, if you have inferno in your dependencies, Dumber Gist will turn on special JSX tool for Inferno. The dependency on those JS frameworks has "special" meaning to Dumber Gist.

If you use some other generic JS lib, for example lodash, you don't have to add it explicitly to package.json. Dumber Gist will just get latest npm version for lodash.

However you can explicitly add a dependency to package.json if you want to target a version which is not latest npm release, for example, to test a pre-release.

Clone this wiki locally