babel / website Goto Github PK
View Code? Open in Web Editor NEW:globe_with_meridians: The Babel documentation website
Home Page: https://babeljs.io/docs/en/index.html
License: MIT License
:globe_with_meridians: The Babel documentation website
Home Page: https://babeljs.io/docs/en/index.html
License: MIT License
Having React and JSX in the "Language Support" section seems weird. Mainly since everything else is new JS features it seems like a cheap shot at the other transpilers because supporting react/jsx is unique to 6to5.
Perhaps a new section could be added where this could go. I'm don't really have a name in mind.
Currently, the REPL saves its state as an encoded URI in the address bar URL. This has several drawbacks including things like tricky escaping (i.e. #44) and unfriendly URLs (i.e. #162).
The goal of this enhancement is to leverage an external store for saving REPL state, if desired. Some requirements:
Non requirements/goals:
Some ideas:
There's currently a very small note about them here: http://thejameskyle.com/6to5.github.io/docs/tour/#generators
@monsanto pointed out they should have their own section.
The 6to5 site states:
Maps directly to the equivalent ES5 with no runtime
What does "no runtime" mean in this context? When I use ES6 class syntax I get a few extra helpers in the generated code:
var _get = function get(object, property, receiver) {
var desc = Object.getOwnPropertyDescriptor(object, property);
if (desc === undefined) {
var parent = Object.getPrototypeOf(object);
if (parent === null) {
return undefined;
} else {
return get(parent, property, receiver);
}
} else if ("value" in desc && desc.writable) {
return desc.value;
} else {
var getter = desc.get;
if (getter === undefined) {
return undefined;
}
return getter.call(receiver);
}
};
var _inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) subClass.__proto__ = superClass;
};
var _prototypeProperties = function (child, staticProps, instanceProps) {
if (staticProps) Object.defineProperties(child, staticProps);
if (instanceProps) Object.defineProperties(child.prototype, instanceProps);
};
Admittedly this is a very small amount of extra code, but is that code not considered a "runtime"? If not, what would you consider to be a runtime? Do you mean some actual sort of VM?
Document the need for a module bundler, webpack, browserify etc and provide details on installing 6to5-runtime
.
encodeUriComponent
doesn't escape parenthesis (and other characters) so people adding links to markdown end up giving it an incorrect link:
See babel/babel#230 for tracking issue, also acornjs/acorn#181.
Shorthand like
let { a = 5 } = {};
does not work, yet the following does.
let { a: a = 5 } = {};
?t=timestamp
at the end of all the resources.
Odd.
It seems the console.log
is being ignored by the REPL output when we call it inside an async function.
I took too long to figure out the code was working but just was not displaying the log in the REPL.
In the browser dev tools it works well, i mean, the log appear.
The code i was trying:
function p1() {
return new Promise(function(resolve, reject){
setTimeout(function() {
resolve('p1');
}, 300);
});
}
async function getVal() {
var val1 = await p1();
return val1;
}
(async function() {
var bla = await getVal();
console.log(bla);
}());
The current readable example of
class User extends Model {
constructor() {
super();
this.sayHello();
}
sayHello() {
alert("Hello World!");
}
}
to
var User = function User() {
Model.call(this);
this.sayHello();
};
_inherits(User, Model);
User.prototype.sayHello = function () {
alert("Hello World!");
};
is hilariously out of date.
Previous there was a dropdown where you could select a bunch of ES6 examples and insert them into the console, although I never finished it and removed it so I could release the new site.
console.log(Function); // nothing is logged in the page's console.
For example http://6to5.org/docs/usage/transformers/#self-contained is quite crowded.
You seem to have accidentally a word after "that".
There's currently nothing ๐ข
I've been asked for something like this by a few people now.
Thought: Including source maps in the transpiled REPL output would allow browser debugging through the ES6 (REPL input) vs ES5 (REPL output) code.
Hello,
I wrote the formatter 6-to-library. Do you think it's worth a mention somewhere in the docs?
I wanted to author in ES6, and still deliver a seamless experience to users today. The UMD formatter does its job well. But it has no support for simple globals, and always exports exports by name. I wanted to avoid the need for explicitly saying require('a-library').default
when only the default key is exported.
e.g. https://6to5.org/docs/usage/modules/#umd should include a link to https://github.com/umdjs/umd
It would be easier to read them, when they are more than a line.
//cc @thejameskyle
Details about bundling modules with browserify/webpack/etc. ie. modules: system
only transpiles to the system.js syntax but doesn't bundle them with system.js
Was planning to add this feature of saving input.editor.getValue();
to localstore.
If query.code
found display it or else fetch and display the local store data.
What say @sebmck @thejameskyle ?
It'd be nice to have a dropdown or something that allowed you to toggle all the options for 6to5. It'd be even nicer if it was auto generated from the latest 6to5.
This statement
You may alternatively selectively include what you need:
which can be found in the polyfills section needs some clarification.
How would one go about selectively including what you need? Do you hunt for the packages yourself? It doesn't seem possible with 6to5 but it would be nice perhaps as a part of https://github.com/zloirock/core-js
I think
http://6to5.org/docs/usage/options/
should be a sub-section of #6to5
:
http://6to5.org/docs/usage/cli/#6to5
This makes for better navigation flow in reading the docs.
If the options
is a separate page, it isn't really clear that some options aren't available in 6to5-node
command (e.g. blacklist).
In the callout at the top of https://6to5.org/docs/setup/ :
and
โ + F
whatever you're looking for.
Non-OS X users could get mildly confused by this ๐
?experimental=true&playground=false&evaluate=true&loose=false&=undefined&code=
Ping @sparty02
Ref: babel/babel#414
We should begin collecting third party blog posts/meetup videos/etc. about both ES6 and 6to5.
http://6to5.org/docs/usage/require/#register-options
It should note that you can also pass in all of the options from http://6to5.org/docs/usage/options/.
@DylanPiercey was asking in chat about playground
and experimental
in particular.
6to5 supports IE8 for most things, but our website doesn't and I don't think it would be difficult to.
forOfFast
classesFastSuper
$ nodemon --exec 6to5-node --experimental path/to/script.js
Ref: babel/babel#279
Haven't worked out the contents of this yet, but it's something along the lines of this:
Ref: @brianleroux https://twitter.com/brianleroux/status/554751754701524992
It's weird to have the sidebar constantly opening and closing when you're scrolling and it makes it awkward to select items.
At least, when I paste this
if (let x = 5) { console.log(x) }
into the REPL, the url never changes, and the left side throws an error.
on Chrome 39.0.2171.99 (and some version of Chrome 40 < 40.0.2214.91)
Given this code:
class User extends Model {
constructor() {
super();
this.sayHello();
}
sayHello() {
alert("Hello World!");
}
}
The REPL should produce:
var User = function User() {
Model.call(this);
this.sayHello();
};
_inherits(User, Model);
User.prototype.sayHello = function () {
alert("Hello World!");
};
It actually produces:
var User = (function (Model) {
function User() {
_get(Object.getPrototypeOf(User.prototype), "constructor", this).call(this);
this.sayHello();
}
_inherits(User, Model);
_prototypeProperties(User, null, {
sayHello: {
value: function () {
alert("Hello World!");
},
writable: true,
enumerable: true,
configurable: true
}
});
return User;
})(Model);
The "Standard" entries on https://6to5.org/docs/usage/transformers/ link directly to sections of http://6to5.org/docs/tour/
It might be useful to have the sections of the Tour page mention the names of the corresponding transformers somehow, e.g. have http://6to5.org/docs/tour/#arrows mention arrowFunctions
On: https://6to5.org/docs/usage/browser/
The 'setup build systems' link below is broke.
Not intended for serious use
Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side. See setup build systems for more information.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.