npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

babel-transform-in-browser

v6.4.6

Published

Transform ES2015 code in browser on the fly with Babel.js

Downloads

89

Readme

Babel Transform In Browser

npm version Dependency Status

Transform ES2015 code in browser on the fly with Babel.js.

Download

https://npmcdn.com/[email protected]/dist/btib.min.js

Also check sources at dist folder.

Why?

The answer is quick prototyping.

IMPORTANT NOTE: Please never use this module in real projects and production environments.

Usage

Just include the script on the page before or after your ES2015 scripts. Please note that only scripts that have type="text/es2015" attribute will be transpiled, see example:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Quick ES2015 Prototyping</title>
</head>
<body>

<script src="https://npmcdn.com/[email protected]/dist/btib.min.js"></script>
<script type="text/es2015">
const multiplier = (x) => (y) => x * y;
const double = multiplier(2);
const result = double(3);
console.log(result); 
// 6

class Cat { 
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}

class Lion extends Cat {
    speak() {
        super.speak();
        console.log(this.name + ' roars.');
    }
}

let cat = new Cat('Simon');
cat.speak();
// Simon makes a noise.

let lion = new Lion('Sam');
lion.speak();
// Sam makes a noise. 
// Sam roars.
</script>
</body>
</html>

References

Quick React Prototyping

This script was created mainly because of the discussion on how hard it is to start hacking on a js project today. Also it is a response to the @Vjeux's challenge (http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html).

Check the example below (it's also availbe as "React Prototyping Playground" gist - https://gist.github.com/voronianski/f67f4973687434f474b4):

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>React Quick Prototyping</title>
</head>
<body>
    <div id="root"></div>
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/btib.min.js"></script>
    <script type="text/es2015">
        // Your playground code goes here, e.g.:
        function App ({ title }) {
            return (
                <div>{title}</div>
            );
        }

        ReactDOM.render(
            <App title="Hello World" />,
            document.getElementById('root')
        );
    </script>
</body>
</html>
  • No setup: I'm happy to have to setup something initially (dedicated server, apache, php...) but nothing should be required to create a new project. No npm install, react-native init, creating a github project, yo webapp...
  • DONE You can use any server you want to serve static html file.
  • One file: I want to write a single js file to start with. No package.json, no .babelrc, no Procfile...
  • DONE But let's do this in html file instead.
  • Sharable: I want to be able to share it with a url without any extra step. No git push heroku master or git push gh-pages.
  • DONE Send a file in message, copy-paste in pastebin, upload via ftp, etc.
  • Keeps working: Once online, it should stay there and keep working 6 months later. No npm start to run it, no special port that's going to conflict with my 10 other prototypes...
  • DONE Bulletproof html file with script inside helps here again.
  • Not generic: I don't care about it being generic, I will use whatever transforms you decided. Happy to write js without semi-colons and using SASS for my CSS if you checked all the boxes above.
  • DONE Though SASS/LESS is not included it's a question about next "transform-in-browser" script.
  • Not prod-ready: This setup doesn't have to be prod-ready, support unit testing or anything that involves it being a real product. This is meant for hacking on stuff. When the project becomes good, I'll spend the time to add all the proper boilerplate.
  • DONE Absolutely.

MIT Licensed