I have recently been getting into using CodeKit, and now version 2 is out, which is what this question regards. There seems to be great potential in using the bower components installer; however, there is little to no documentation on the working relationship between CodeKit and bower components. My code follows as:
// #codekit-prepend "../bower_components/jquery/dist/jquery.js"
// #codekit-prepend "../bower_components/PhysicsJS/dist/physicsjs-full-0.6.0.js"
Physics(function(world){
// code straight out of the example online from the bottom of http://wellcaffeinated.net/PhysicsJS/basic-usage
});
Then I get 'Physics' is not defined. errors on any reference. This is one example but I seem to always get stuck at this point and I'm wondering: Is there a working way to use prepended libraries through CodeKit's bower components integration?
It seems as though I forgot something quite simple. It took me hours to figure out that simply adding $(document).ready(function(){ at the beginning and closing those tags at the end fixed the problem. Not sure exactly how that works if the libraries are in the same file but I guess it adds a little delay to the execution of the code, allowing the libraries to be considered for the code that follows.
Related
Context:
This is not important for core of the question, but still providing for clarity.
We are using ant-mobile in our react-native-web app, it uses react-native-collapsible internally(v1.5.1). Everything was working fine during web, but it started giving errors on release,
Error
Error looked something like this:
But it should be working as code seems like so:
Code can also be accessed here.
My solution:
I ended up writing a patch to remove this const and use its definition code where this const was being used(only 1 place). And everything worked.
Question
My question is,
Why this was working in development and not in production builds?
Why VIEW_PROPS global const doesn't show this issue?
And least importantly, is there any babel config type thing i can use to transpile this instead of patching?
Issue created on the original library is here.
UPDATE: Turns out we were just not quiet hitting the line which i have moved this constant initialization in our usage, but now we are hitting that line and it seems more like prop-types being removed issue(see the above issue i have linked for details).
I am using a template app setup that I bootstrapped with vue CLI. I have one component that has 20 nested div tags. Compiling such a component in dev mode takes around 10 seconds. The deeper I nest the html elements the longer it takes and the time grows exponentially.
Is this behaviour normal? Is there a way to improve compilation time?
Here's an example: https://gist.github.com/dmitrybelyakov/ed64145624f42188372500018671eb0f
Answering my own question here: following the link to this SO post by Bennett Dams, some people already investigated this, and there is an issue with prettier library that gets used internally by vue-loader, specifically their template compiler utils. The issue has been reported to prettier team here and there, but it hasn't been fixed as of yet.
Because of that, vue template compiler comes with this issue out of the box. So if you nest ~30 html elements you can basically halt your compiler (only happens in dev mode).
Same goes for when you have less nested (~4-5) levels elements, but a few of them, in which case compilation gets progressively slower and reload/inject time suffers which makes waiting for your component to reload a pain.
I have reported this issue to vue-loader team here #1426 asking for a config option to disable use of prettier, so hopefully it will get looked at.
UPDATE: this should now be fixed in vue-loader via prettify config option that was added: https://github.com/vuejs/vue-loader/issues/1426
OLD SOLUTION:
For the moment though, the only fix is to edit node_modules/#vue/component-compiler-utils/dis/compileTemplate.js to comment out the line (should be around line 97) like so:
//code = prettier.format(code, { semi: false, parser: 'babylon' });
In an HTML script, a call to fetch a package ending in vega#n where n is a version number, is being incorrectly expanded and causing a 404 error. I'm trying to find out why, and to prevent this.
Apologies in advance for the long-winded explanation, but I'm not sure where the problem lies so I'm trying to be as specific as possible.
I'm following the user guide to try and load a vis into a jupyter notebook. This executes the script in-browser, I believe, but for some reason has support for requireJS, which means that global modules aren't correctly loaded when using the import method, which basically uses html's <script> tags to load the module.
This can be worked around by calling define, as described in a similar problem with D3, here: https://github.com/mpld3/mpld3/issues/33#issuecomment-32101013.
I've written this gist to show a working example:
https://gist.github.com/lJoublanc/439e2f687b7aedd6fbdea5adab5cee0f
However, for some reason (either requireJS or something else - my JS knowledge is limited), expands URLs of the form https://cdn.jsdelivr.net/npm/vega#3 into something like https://cdn.jsdelivr.net/npm/vega#3.js?v=20180324103700 which results in a 404 error.
Using the github URL (i.e. without the #3) works fine though.
Any idea if this is requireJS doing this, or the CDN? How would I work around it?
I've started using Vim 7.4 on Ubuntu and am very pleased with it but there is just one thing driving me crazy: code folding doesn't work (at least for JavaScript)!
The syntax is automatically set to JavaScript when a js file is opened and syntax highlight works so I don't get it. The foldmethod is initially set to "manual" and setting it to "syntax" doesn't make a difference, which puzzles me. I did add let javaScript_fold=1 to my .vimrc file.
Any clue? I'd be very grateful. Thanks!
It's tough to say the exact cause of this issue, but if you don't have a javascript.vim file you probably should. I suggest starting with this enhanced javascript syntax config. It is likely to fix your javascript folding issue, and much more.
If you just want to focus on the folding issue you might try creating your own javascript.vim file in ~/.vim/syntax/javascript.vim that contains code along the lines of what I have given below. You may want to adjust the fold level to your liking (0 is completely folded). However, this simple version will not play well with comments containing curly bracket characters, which is where you will want to go with a more robust javascript.vim like the one I have linked.
syntax region foldBraces start=/{/ end=/}/ transparent fold keepend extend
setlocal foldmethod=syntax
setlocal foldlevel=0
I should add that both myself and the other responder are suggesting that you need a javascript.vim, and in fact by some of the same contributors. However, the one I am suggesting was last updated in December of 2015 as opposed to 2009.
I don't know why your solution isn't working, but a possible solution is to use a user-created vimscript available at http://www.vim.org/scripts/script.php?script_id=1491
Just had this same issue answered on Vim Stack Exchange, and the answer is that if you do use the stock syntax/javascript.vim file, then you have to set
vv
let g:javaScript_fold = 1
^^
The difference between the command in the question and here is the g: part (highlighted above). I'm new to Vim scripting, but I believe the difference is that let javaScript_fold=1 sets a script-local variable, making it confined to your .vimrc file, and the example above makes it global (which seems to be confirmed by this Stackoverflow thread). See more on this at section 41.2 Variables in :help usr_41.txt and :help internal-variables.
This Reddit thread was also enlightening; it's not JavaScript-related but the folding seems to be useful for JS files as well.
I know that's it's best practice to isolate your javascript code into IIFEs. This also allows me to make use of the "use strict" magic string.
However, Adding this to every file by hand is not only cumbersome but prone to human error (aka forgetting).
It seems like the sprockets preprocessing would be ideal but the only example I could find was from 2 years ago and it doesn't appear to work:
http://eviltrout.com/2013/02/25/iife-in-rails.html
Does anyone have a working solution? Is the a gem I can use?
I think it did work and I missed a small detail:
One caveat – if you change the IIFE code, you’ll have to clear your tmp directory in order to get your assets to recompile.
Once I clear that out it worked beautifully.