I am dying here on lazily loading modules into angular-meteor 1.5.
So the Meteor Version is 1.4.2.3, meaning with ES2015, import, ui-router etc.
So far I've tried ocLazyLoad, angularAMD has a completely different syntax (with define(function()...) which I don't know how to "merge" with the Boilerplate App of Urigo's angular-meteor.
So in ocLazyLoad, I went by this https://github.com/alo/oclazyload-uirouter-component-routing-tests github example, since it is the only one I've found that has the ng 1.5 components and submodules instead of just lazily adding controllers to the main apps module.
When I try to implement this, ocLazyLoad logs that the js-file is loaded, but in the Sources-tab instead of the actual file, the js-file contains the whole meteor app.
Any idea on why that is or whether angularAMD works with angular-meteor or in general, how to make lazyLoading modules work?
It's not as natural as it should be because meteor doesn't support lazy loading yet. But here is a working solution:
If your are trying to use lazy loading on routes like this:
{ path: "myPath", loadChildren: "app/myModule/myModule.module#MyModule"}
You should use instead a callback to get the module using ES5 callbacks.
{path: "myPath", loadChildren: ()=> require('./myModule/myModule.module')["MyModule"] }
Hopefully will work for you as well. :)
Question answered on my post
Related
I use a package called SVGO to minify svg files like many others. Unfortunately when it minifies it generates generic id's that cause issues when you inline them on the same page as they use the same id.
In comes the plugin in question, it's supposed to fix this issue by prefixing the id's so they're unique and wont overwrite each other.
Problem is, I have no idea how it works. It says
Usage
new SVGO({
plugins: [{
uniqueID: require('svgo-unique-id'),
}]
})
Now I don't know if I'm supposed to add this anywhere, if it's automatically added, if I need to create a new file for this or anything.
So my question really is, how do I go about using this. I think it should be straight forward but I've never used a plugin for a package before so I don't know anything about how it works.
Any pointers are much appreciated.
I built a Vuejs App for House Plan. I've already use some optimisation way but I have two node modules whose size are far up to 20kb and I get a bad score on performance test with lighthouse on google. Here the following module :
dist\js\npm.bootstrap-vue.9bf0056f.js 228.65 KiB
dist\js\npm.vue-tel-input.4440bc34.js 181.81 KiB
Please is there a way to split this?
I initially started writing this answer as a "use async components" but I see that you have a problem with libraries that are huge (bootstrap-vue and vue-tel-input respectively), not eg. Vue Router views
Are you sure that you're importing eg. Bootstrap Vue components in an efficient way? Maybe you can avoid importing the enteriety of BootstrapVue and just use certain parts you need? https://bootstrap-vue.org/docs#tree-shaking-with-module-bundlers
See
https://github.com/bootstrap-vue/bootstrap-vue/issues/5439
As for vue-tel-input, are you using version 5? Looks like it's lighter. So hopefully it'll help you, since you can't really split someone else's library unless you fork it
https://github.com/iamstevendao/vue-tel-input/issues/213#issuecomment-764416297
I'm using ASP.NET Core 2, latest Aurelia/Aurelia CLI and I have been looking to install Font-Awesome however this does not appear to be that straightforward.
I see this SO question however I do not have an aurelia.json file. This appears to also be a requirement in this SO question as well.
It appears to not be as simple as just adding it via npm.
Given I have an ASP.NET 2 project, Webpack and no aurelia.json file (I do have a package.json if thats what they are referring to) whats the process of including Font Awesome in this regard?
OK, so this turned out to be such a chore to figure out, but at the end of the day, the answer was actually a simple two liner.
I looked at a number of solutions, tried a number of different things, yet time and time again I kept getting what was apparently web-pack ignoring my rules, and just trying to load things as it pleases.
After looking at a number of other stack overflow posts and spending a good few hours trying different bit's in my webpack.config.js file (and the vendor one that gets produced by the dotnet core 2 template), I eventually figured out the following:
1) npm install the version of font awesome you wish to use.
2) In your app.html file, make sure it looks as follows:
<template>
<require from="./app.css"></require>
<require from="font-awesome/css/font-awesome.css"></require>
... rest of your html here ...
</template>
3) Edit your webpack.config.js file so that your rules section looks as follows (This is the most important part)
module: {
rules: [
{ test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
{ test: /\.html$/i, use: 'html-loader' },
{ test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' }
]
},
If you have other rules you need to keep, then you'll need to merge them and make sure you have no duplicates, or anything like that.
This is a similar answers to others that are on here, but as Iv'e found the other ones just don't seem to work with the dotnet core 2 spa template, where as this one does.
I suspect that as others have said it is something to do with the reg-ex.
One more thing to note.
If you look in webpack.vendor.config.js , you'll see that there is already a rule in there to handle font files, but that seems to get ignored for anything but a simple non versioned statically included file to override the general font, so I left mine in.
Altering the one that's present just doesn't seem to work either.
font-awesome installation has changed a bit with new versions. Moreover aurelia-cli has changed and improved a lot in past few months.
Above answers might not work anymore. Please check my answer here for webpack based aurelia-cli generated project.
I'm working on a package that relies on the Config facade.
The code itself works fine, but I'm encountering issues when testing.
Initially, I was using this code:
Config::shouldReceive('foo.bar')
->andReturn(true);
As many others, I bumped into some issues.
I later read that mocking the Config facade isn't encouraged.
To get around it, most people tend to suggest to use the following instead:
Config::set('foo.bar', true);
Which I reckon works fine, if you're testing from Laravel/Lumen.
But my issue is, I'm not. I just rely on a few Illuminate packages, so that won't work since I get:
RuntimeException: A facade root has not been set.
At this point, some might suggest that I should just inject the Config repository dependency, but I'm using the Config facade in a trait which is used by an Eloquent model, so DI won't work.
Is there any other way I can tackle this?
Thanks!
PS: This question has also been posted on Laracasts
I faced to the same issue. Lumen 5.4
using Config::set('key', 'value') was not worked. So I had to use this way.
//test
use Illuminate\Support\Facades\Config;
Config::shouldReceive('get')
->once()
->with('key')
->andReturn('value');
,
//code
use Illuminate\Support\Facades\Config;
Config::get('key'); //instead config('key');
For those running into a similar issue, I've finally found the correct way to address this problem.
Testing Laravel packages is just what the Testbench package is for.
From the documentation:
To use Testbench Component, all you need to do is extend Orchestra\Testbench\TestCase instead of PHPUnit\Framework\TestCase.
This way, setting a configuration value is just a matter of calling Config::set() as you would on a full Laravel install. No more Mockery issues.
I've been struggling and very frustrated because I can't find a way to make pickadate play well with browserify. I'm migrating a Backbone app from AMD but pickadate seems impossible to work with it. I must say that I began to use browserify recently so I'm not an expert but I could migrate the rest of my code without any major incident. Of course I'm open to receive some tips and references to master browserify :)
I have jquery and pickadate installed via npm and when trying to use pickadate I'm getting the classic error:
undefined is not a function
I used this way of requiring (note the use without assigning the require to a variable):
require("jquery");
require("pickadate");
I saw this on an answer here at stackoverflow (Requiring pickadate.js with Browserify) but it doesn't work in my case.
Any help or reference about where to find help will be pretty much appreciated.
The current version of pickadate as a module only exposes the instance of PickerConstructor but it doesn't expose DatePicker neither TimePicker so every time we try to instantiate a date picker or time picker we got the error undefined is not a function because neither of them have been loaded and so no jquery.extend invocation have been made to append them to the jQuery object.
What is needed is some kind of facade / wrapper to expose all the pickadate functionality out of the box.
For this I made some small changes directly to the pickadate code base. I added an index.js that works as the facade / wrapper for picker.js, pick.date and pick.time, allowing them to be used out of the box with Browserify by issuing the typical require('pickadate'). It doesn't need to be assigned to a variable since pickadate attaches itself directly to the jQuery object. You can check this gist with the index.js code I used
This change is a copy of the way the CryptoJS library by #evanvosberg exposes its different algorithms through the same pattern implemented in its index.js file.
The only additional change would be to modify the property main in pickadate package.json to point to index.js.
I've just send a message to #amsul, the pickadate author asking for the possibility of integrate this changes directly into the pickadate github repo.
I hope people trying to use pickadate with browserify can find this solution and stop getting frustrated trying to make them play well together!
Greetings to everybody!