I converting a Polymer app to Polymer 2. I'm changing my components to the ES6 Class syntax (yes I know I could leave them in v1.7 hybrid style but I would like them to be ES6 Classes).
However when I transpile the code back to ES5 (with BabelJS) I run into a known issue regarding ES5 'classes' extending native elements (https://github.com/babel/babel/issues/4480).
I tried babel-plugin-transform-custom-element-classes but that didn't work.
So I tried the webcomponents shim meant to fix this issue: https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs
But the shim doesn't work! I don't know what I'm doing wrong :(
<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
...
<y-example></y-example>
...
<script>
/* transpiled to ES5 */
class YExample extends HTMLElement {}
customElements.define('y-example', YExample);
</script>
Here is my jsbin:
http://jsbin.com/feqoniz/edit?html,js,output
Notice I'm including the custom-elements-es5-adapter.js,
also notice the JS panel is using ES6/Babel.
If you remove the custom-elements-es5-adapter.js and change the JS panel to normal Javascript (not ES6/Babel) then everything works fine.
You can include or remove the adapter (leaving ES6/Babel) and the error is basically the same thing, except that when the adapter is included it comes from the adapter code instead: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
I must be doing something silly? Any ideas?
Well, I was doing something silly.. I should have tried upgrading my Babel package.
Upgraded BabelJS from 6.23.1 to latest 6.24.1 and it fixed the problem. :P
I was stucked with the same issue.
The problem was due to my build chain (gulp) transpiling every js files of the project. But the custom-elements-es5-adapter.js file must not be transpiled to work. Transpile everything but this file.
I am having a similar issue and I found a solution that works for me.
Disclaimer: I don't use an app-shell because I have a server-side rendered site with just a few isolated Polymer components on the client-side.
After intense debugging the issue came down to the fact that I was including this block (as suggested on the Polymer guides):
<div id="autogenerated-ce-es5-shim">
<script type="text/javascript">
if (!window.customElements) {
var ceShimContainer = document.querySelector('#autogenerated-ce-es5-shim');
ceShimContainer.parentElement.removeChild(ceShimContainer);
}
</script>
<script type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></script>
</div>
Because when I ran polymer build it would pick up custom-elements-es5-adapter.js from there.
This is what I did instead:
<script type="text/javascript">
if (window.customElements) {
document.write('<scr' + 'ipt type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></scr' + 'ipt>');
}
</script>
YES it's not as elegant and quite rustic but, hey, it works! Here I'm tricking the compilers inside polymer build and they won't find this file and hence they won't include it in the build.
I hope it helps!
Related
I am trying to have a look at reactJS.
Unfortunately all the tutorials I found assume, that I have an IDE. But I don't want to install an IDE just for this purpose and I even can't do that in my working place.
So I am wondering, how I can use React without an IDE. Just by injecting the necessary library-files. I don't care, if it is working slower than otherwise, I just want to get it to work.
JSbin and Co are only secondbest choices, because I want to store the written files for later of course.
Does anyone know a tutorial, that describes, which libraries I have to inject and how I can get the first steps?
I hope, someone can help. Regards
Christian
Btw, my actual attempt looks like this:
<!doctype html>
<html>
<head>
<title>React</title>
<meta charset="utf-8">
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
</head>
<body>
<div id="react-container"></div>
<script type="text/jsx">
var meineKomponente = React.createClass({
render: function() {
return <h1>Hallo Welt</h1>;
}
});
React.render(<meineKomponente />, document.querySelector('#react-container'));
</script>
</body>
</html>
The information for this is gathered from different places and of course, it doesn't work.
There's some browser-based IDEs.
StackBlitz -- https://stackblitz.com/ -- only heard about this recently, so haven't actually used it, but it seems real nice. As a bonus, it has a quick start template for ReactJS projects, which might be exactly what you're looking for.
Cloud9: https://c9.io/ -- Always a solid choice.
There's more, I'm sure.
You don't need any specific IDE to use a library or framework. You can use notepad, or textedit and achieve the same results.
The question is, why would you not use an IDE? Code completion, automatic linting, and a near-infinite number of useful plugins are all at your disposal if you go the IDE route.
As far as tutorials go, Facebook's own React docs have a great tutorial which covers all of the basics: https://facebook.github.io/react/tutorial/tutorial.html
If you're concerned that they're using ES6, you could use JSFiddle to see what's gone wrong:
https://jsfiddle.net/tt6uet4a/1/
var MeineKomponente = React.createClass({
render: function() {
return <h1>Hallo Welt</h1>;
}
});
ReactDOM.render(
<MeineKomponente name="World" />,
document.getElementById('react-container')
);
As far as your code goes, you'll need to use ReactDOM's render function, as well as uppercasing your JSX element name.
To develop React, you do not need an IDE. All you need is a terminal and a text editor.
I assume that you are thinking React as a javascript library like jQuery, that's why you are including React to a script inside head tag like "old-school" javascript.
For a simple start with React, I think you should first have a look at nodejs. Try to install it, then follow create-react-app.
I would like to have a React Bootstrap JavaScript file in my markup, and then use Bootstrap components from Clojurescript. I understand this simple approach (not using a cljs library) should be possible. However I am stuck at the beginning with a problem even loading the static html page.
The body section of the page looks like this:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.2/react-bootstrap.min.js"></script>
<script src="/js/devcards.js" type="text/javascript"></script>
</body>
The react-bootstrap.min.js file is being loaded/executed and returning this error in the browser console:
Navigated to http://localhost:3449/cards.html
Uncaught TypeError: Cannot read property 'createClass' of undefined
PanelGroup.js:7
bootstrap 35d834203e0f472d9612:19
react-bootstrap.min.js:7481
Am I going about this the wrong way?
There is a bootstrap project that uses Om.
https://github.com/racehub/om-bootstrap
Hopefully there will be a better answer than this very direct one. I discovered including all the files recommended here gets me past that particular error.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.2/react-bootstrap.min.js"></script>
But is this really the best way to go about it with ClojureScript? No! React is normally already included (via Reagent or Om) as part of a ClojureScript development stack. Seems like I'm discovering why it is best to stick with libraries for Bootstrap.
Hello I playing with javascript and I have the following situation
I have defined a point class. I have defined an edge class which depends on point and a triangle class which depends both on point and edge. How do I ensure that those classes are loaded correctly?
I use them as follows:
<script src="point.js" type="text/javascript"></script>
<script src="edge.js" type="text/javascript"></script>
<script src="triangle.js" type="text/javascript"></script>
<script src="utils.js" type="text/javascript"></script>
the utils.js file are some generic utility functions that uses all of the above classes.
My problem is that I cannot tell the triangle class for example, that the point and edge classes are defined. My code just assumes them to be defined somewhere or else it crashes burning down. Is there a simple #include style mechanism for javascript?
For example I would like to just use the triangle class which internally should somehow find about its dependencies and load them automagically
For example I would like to just use the triangle class which internally should somehow find about its dependencies and load them automagically
You're in luck! Tools like RequireJS exist specifically for this purpose, and do it very well. Take a look at RequireJS's Get Started docs and the many available tutorials. There are other, similar tools like Browserify, but RequireJS is a good place to start and has lots of documentation and users.
I have a webapp relatively old running on Prado 2.1RC1 and I am trying to enhance it by adding some nice google visualizations charts.
The problem arose at the moment of integrating google jsapi (that depends on jquery) and the old libraries used by prado2.1.
Prado use some built-in libraries (some of them are base.js, dom.js, ajax.js, etc) + prototype 1.4.
In a first moment when I tried to integrate the tutorial example I got two errors logged in the chrome javascript console.
Uncaught RangeError: Invalid array length on base.js:524
Uncaught TypeError: undefined is not a function
Looking at base.js I found out that those errores where caused by a prototype bug in shift function (I think) because shift is implemented like this:
shift function() {
var result = this[0];
for (var i = 0; i < this.length - 1; i++)
this[i] = this[i + 1];
this.length--;
return result;
}
But when this.length==0, this.length-- explodes.
So after fixing this bug I had the hope that google nice charts will show up... But no. No error was thrown in javascript console but I got this text rendered with red background in the div where google chart should be appended:
number is not a function
I have no clue on this error. I suspect that there is some mess with the great quantity of javascript libraries required by the webapp.
I know that the situation is not really good considering I am using a old, deprecated, non-supported version of Prado and Prototype. But I am very n00b with php and with this framework. I don't really know how much time would take to me to migrate to a new Prado version of to update the javascript libraries and I even know if I am able to do this. Maybe some of you with more experience could tell me what are the best things to do in this situation or how should I proceed...
Thanks!! And let me know if you need more details in the problem.
I'm not sure if this is exactly your problem, but from what I understand, it seems that you noticed issues when you tried to integrate jquery/google jsapi into your project.
You shouldn't need jquery to this, and can load the jsapi (and necessary visualization packages) directly. These should be namespaced (like google.x.y) and not interfering with your other code - though I may be mistaken about how this may mess things up.
Here's how you can load the jsapi without jquery:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
Is that the issue?
Since Prado is using Prototype and the "$" is used by both Prototype and jQuery make sure you explicitly write (jQuery)(#selector) instead of $(#selector). It might be the root cause of your problem.
I beleive that it maybe better to not use the jquery wrapper of the google api. This is because there is a conflict between jQuery and prototype both using $. If you still must use jQuery you need to call jQuery.noConflict() to tell jQuery to not assign $ as the global pointer to jquery
After the prototype.js is included u need to include jquery and call noConflict().
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
</script>
It should be put after com:TForm. because TForm adds the prototype.js link to the page. Then include the google jquery wrapper.
now "$" points to prototype and "jQuery" points to jQuery
Explained on the JQuery site here
I had a template powered by jQuery and I used it as Layout ( Master page ) for my project.
I avoided conflicts between prototype and jQuery when I replaced all $("selector") with jQuery("selector").
I'm working with Dojo and using the "Module Pattern" as described in Mastering Dojo. So far as I can see this pattern is a general, and widely used, JavaScript pattern. My question is: How do we debug our modules?
So far I've not been able to persuade Firebug to show me the source of my module. Firebug seems to show only the dojo eval statement used to execute the factory method. Hence I'm not able to step through my module source. I've tried putting "debugger" statements in my module code, and Firebug seems to halt correctly, but does not show the source.
Contrived example code below. This is just an example of sufficient complexity to make the need for debugging plausible, it's not intended to be useful code.
The page
<!--
Experiments with Debugging
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>console me</title>
<style type="text/css">
#import "../dojoroot/dojo/resources/dojo.css";
#import "../dojoroot/dijit/themes/tundra/tundra.css";
#import "edf.css";
</style>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js">
</script>
<script type="text/javascript" >
dojo.registerModulePath("mytest", "../../mytest");
dojo.require("mytest.example");
dojo.addOnLoad(function(){
mytest.example.greet();
});
</script>
</head>
<body class="tundra">
<div id="bulletin">
<p>Just Testing</p>
</div>
</body>
</html>
<!-- END: snip1 -->
The java script I'd like to debug
dojo.provide("mytest.example");
dojo.require("dijit.layout.ContentPane");
/**
* define module
*/
(function(){
//define the main program functions...
var example= mytest.example;
example.greet= function(args) {
var bulletin = dojo.byId("bulletin");
console.log("bulletin:" + bulletin);
if ( bulletin) {
var content = new dijit.layout.ContentPane({
id: "dummy",
region: "center"
});
content.setContent('Greetings!');
dojo._destroyElement(bulletin);
dojo.place(content.domNode, dojo.body(), "first");
console.log("greeting done");
} else {
console.error("no bulletin board");
}
}
})();
(Answering this myself because it seems like a common problem whose solution is not well known.)
It seems that one can nicely debug eval-ed code in FireBug provided that dojo does a little cooperating. The trick is to configure dojo to enable such debugging using debugAtAllCosts
<script type="text/javascript" src="/dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, debugAtAllCosts: true"></script>
This is described on dojo campus under debugging, which also notes that this setting is not recommended in production for performance reasons and suggests an approach using server-side conditionality to control whether such debugging is enabled.
Also, if you are using a version of Firebug less than 1.7a10 also verify that you have the "Decompile for eval() source" on the scripts drop-down disabled (extensions.firebug.decompileEvals in about:config). When enabled I think this causes Firebug to overwrite the source with its own decompiled version and somehow lose the filename along the way as well.
#peller, This could be why your answer wasn't working for us.
It's disabled by default, but I turned it on at some point and didn't realize it.
It's also being removed completely in 1.7a10 as part of Firebug issue http://code.google.com/p/fbug/issues/detail?id=4035. Also related discussion at https://groups.google.com/d/topic/firebug/y2VR17IFHHI/discussion and https://groups.google.com/d/topic/dojo-interest/nWlZdJDlic8/discussion.
Here's a solution I found for the inability to recurse into dojo.require mudules from reading the NGs.
Change
<script src="dojoroot/dojo/dojo.js" type="text/javascript">
to
<script src="dojoroot/dojo/dojo.js.uncompressed.js" type="text/javascript">
This fixes the less than helpful
undefineddojo._scopeArgs = [undefined];
error that one sees otherwise.
The pattern is essentially xhr+eval... really it's the eval that's the problem... Firefox in particular has no way to track code from an eval back to its original source and instead points at the eval call site, plus whatever line offset there is in the eval buffer. Firebug has implemented a clever scheme to workaround this problem, and added an optional hint which loaders like Dojo can use to embed the original file path in a comment. Webkit now supports this scheme also. It's not perfect, but debugger; and other breakpoints ought to bring you into the correct buffer.
I'm not sure why none of this would be working for you. Which version of Firebug are you using?
djna's debugAtAllCosts solution works for me, for the reasons described at http://dojotdg.zaffra.com/tag/dojorequire/.
However, note that using debugAtAllCosts causes dojo.require to become asynchronous because it uses script inserts rather than xhr+eval. This can cause problems with code that expects dojo.require to be synchronous that isn't brought in using require itself (as described at http://kennethfranqueiro.com/2010/08/dojo-required-reading/). In my case it was testing code I had being run by unit test framework. So the following failed saying that EntityInfo was not defined
var e1 = new EntityInfo();
until I changed it to
dojo.addOnLoad(function() {
var e1 = new EntityInfo();
}
#peller, For me FireBug 1.6.1 will take me to the right eval block but not the right file and line numbers (because its an eval string rather than the original file)..
I'll add one more alternative, use Chrome. It's great for debugging evals (seems to catch some things Firebug doesn't). Do be aware of its issue with caching JS files - http://code.google.com/p/chromium/issues/detail?id=8742.
Personally Firebug is still my main environment, but I am now also using Chrome when things get tricky with evals to get a second view at the problem. Chrome helped me twice yesterday with undefined function/variable issues with the dojo loader that Firebug skipped right past).