Does Aurelia-Fetch have a dependency on whatwg-fetch? - javascript

I am trying to upgrade my Aurelia project from a beta version to the March version.
One of the errors I am getting is:
Cannot find name 'Request'.
Googling this brings up this issue on GitHub: https://github.com/aurelia/fetch-client/issues/65
This issue says that the "fix" is to install the typescript definitions for whatwg-fetch. When I do install those typescript definitions, the error goes away.
But does that mean I need whatwg-fetch too? (Looking in my node_modules folder, whatwg-fetch is not installed.)

aurelia-fetch-client wraps the Fetch API. wahtwg-fetch is a Fetch polyfill, so it wouldn't make sense for the fetch client to depend on the polyfill. Furthermore, which polyfill you will use changed depending on which module loader you are using.
JSPM/SystemJS based apps use the fetch polyfill from GitHub, while most other module loaders use whatwg-fetch.
So yes, you will need to install whatwg-fetch, but there's a good reason for why the aurelia-fetch-client doesn't have a dependency on it.

Related

CKEditorError: ckeditor-duplicated-modules

I'm customizing ckeditor5, It can build successfully but when implemented it has an error saying "CKEditorError: ckeditor-duplicated-modules". I'm not sure what module duplicated.
In my code imported
Try to install the same version plugins (it work for me) likes:
check ckeditor5-core version fisrt
#ckeditor/ckeditor5-core": "^33.0.0"
I want to add "table" tool, use
npm i #ckeditor/ckeditor5-table#33.0.0"
to get specified version, instead of
npm i #ckeditor/ckeditor5-table
you may get a newer version, which need the second ckeditor5-core package lead to duplicated-modules (now you know which module duplicated)

React is undefined while using rollup to bundle as esm

Rather than having a single bundle for my rollup react app in development, I split it into two bundles. One for the dependencies and one for the app itself.
This way the watch mode stays fast (as it now doesn't has to parse the dependencies continously) and I don't have to write (or use third party) es module wrappers for libraries such as React.
While the code is bundled without any errors, I run into TypeError: React is undefined while running it. When I check the network panel in developer tools I do see the dependency bundles getting downloaded.
Here is how I am using rollup with its API.
You can see the rest of the relevant code here.
Can anyone point out what am I doing wrong? Any help appreciated!
This is a bug in the latest #rollup/plugin-commonjs version (14.0.0). It was fixed with the merge of this PR, but this hasn't been released to NPM yet. I went and built the latest version from GitHub, and used it with the repo in question, and React is now working.
So for now the solution is to use the latest source on GH until the next version is published.

How to use save-svg-as-png with angular 6

I am trying to use the save-svg-as-png library with my angular 7 project.
However, I cannot manage to get it to work. I have installed the library using
npm install --save save-svg-as-png
and I can see the library under node_modules.
Unfortunately, the library is an old-style javascript library and I do not know what I need to do in order to have access to it in my typescript components.
The readme refers to the Typings library for which type definitions apparently exist. However, the Typings page mentions that it is deprecated for TypeScript 2, so I did not pursue this.
Apparently there is #types/save-svg-as-png for native Angular 2+ support, but when I try to install it with
npm install --save #types/save-svg-as-png
the library cannot be found (npm ERR! code 404).
I googled some more and came across this issue on github where somebody has apparently got it working with Angular 2 by including it in the angular-cli.js file, but with the changes to Angular, this file no longer exists in version 7 and I do not know how that would need to be done nowadays.
I've also found the following article on how to integrate javascript libraries into Angular 2+, but most of it relies on #types being available (which they are not, see above) and only has a brief section on how to supply your own typings.d.ts file but after playing around for quite a while, I did not get any further. Is there a more detailed explanation showing how to use this approach?
I've also found this article on stackoverflow on how to integrate IIFE based libraries into typescript apps but did not get it working.
I've added the following line to my index.html file
<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>
but how do I now access the functions provided by the library? If I understood things correctly, they should now be available on the window object, but that does not seem to be the case.
I've also read this stackoverflow question on how to use non typescript libraries but one of my problems is that I don't even know into what namespace save-svg-as-png is being imported.
Has anyone managed to get this library working with an Angular 6/7 project and could give a detailed explanation on all steps required?
I'll try to summarise the solution as suggested by Hypenate:
Install the library:
npm install --save save-svg-as-png
At the top of my typescript file/angular component:
import * as svg from 'save-svg-as-png';
Using it in my angular component:
svg.svgAsPngUri(document.getElementById('idOfMySvgGraphic'), {}, (uri) => {
console.log('png base 64 encoded', uri);
});
All exported functions are available on svg.
Also, we can use the saveSvgAsPng.js file as an external js file instead of installing that package
Add saveSvgAsPng.js file into src/assets/js
And add this JavaScript file in scripts array in angular.json file
"scripts": [ "src/assets/js/saveSvgAsPng.js" ]
declare saveSvgAsPng in your component.ts
declare const saveSvgAsPng: any;
And call that when you need to download.
saveSVG(): void{ saveSvgAsPng(document.getElementById('id'), fileName); }
Make sure to restart your angular app (ng serve) if you change scripts array or declared name

how to use a fork of a meteor package when the original package is a dependency

Context
I'm using the aldeed:autoform package and found a couple bugs & filed PR for it(https://github.com/aldeed/meteor-autoform).
Aldeed being the only maintainer of a lot of popular packages ends up being the bottleneck for merging PR & following up with issues.
My solution was to fork his project & published my fork on atmosphere.
Naively, i just removed his package meteor remove aldeed:autoform and tried to add mine: meteor add metakungfu:autoform
When i load my app, i get the following error:
Package['aldeed:autoform'] returns the expected object, even though i removed the package.
For sake of completeness, i do use a bunch of other packages that depends on aldeed:autoform and my guess is that this is the reason why aldeed:autoform package is still present.
Questions:
What's the right way to use a fork of a package, when that package is dependency of other packages?
Is this the right way to solve my problem?
I've end up using mgp to manage the packages.
In order to solve my problem, i had to do two things:
First, add a git-packages.json in the root of your project that looks like this:
➜ cat git-packages.json
{
"aldeed:autoform": {
"git": "git#github.com:gregory/meteor-autoform.git",
"branch": "dev"
}
}
This will work locally, but if you deploy to heroku, the buildpack will need to install mgp & install the dependencies.
I just opened a PR to fix this
Fork all the dependencies and make them point to your fork.
Instead of publishing your own version of aldeed:autoform onto Atmosphere, you should rather use it as a local package, keeping its name intact. Meteor will look first for your local packages, before trying to fetch from Atmosphere.
That way, all your other packages that depend on it will use your local version.
To do that, see: Why does Meteor's aldeed/meteor-tabular package get stuck processing and never render a result?
Reference: Meteor Guide > Build > Writing Atmosphere Packages > Overriding packages with a local version

(webpack) library version conflicts, npm vs bower

Getting started with webpack, and while not explicitly stated, a lot of examples and starter kits use NPM over Bower for managing their front-end libraries. Further, recent articles suggest we don't need Bower any more. Maybe I'm using the wrong workflow, but I don't see how NPM can fully replace Bower when you're using libraries with shared dependencies.
Consider a project that uses jQuery and two jquery plugins. The first requires 2.2.0 and the other requires 2.0.3.
When webpack creates the bundle, two versions of jquery exist!?! Yes, the DedupePlugin can be used to remove the duplicates, but I can't find any documentation regarding which version it keeps. Seems like it just keeps the first one it encounters. Therefore, if I want to force a specific version, I need to npm install jquery and add a resolve.alias.
On the other hand, with Bower, I know exactly which version is being bundled. And should a conflict arise, it tells me. I can investigate the conflict and specify the appropriate version.
What am I missing? How are you using Webpack with front-end libraries? What is your workflow?

Categories

Resources