What's the best way to import a javascript jQuery's function (function($) ...)(JQuery) into Angular2?
In the project I'm using the default configuration of AngularCLI so it's using webpack and typescript.
I should import https://github.com/digitalbreed/jquery.fbmessenger that works invoking some function
var element = $('.phone')
// Initialize the plugin
.fbMessenger({
// options go here
});
element.fbMessenger('start', { delay: 1000 })
In the project following some instructions on Internet encounter some problems and I don't know what's the best way to do it:
Using UpgradeModule form the Angular2 Doc there are an error, on #angular\core thare aren't StaticProvider
Importing jquery.fbmessenger like import * as $ from "jquery" how I could refear fbMessenger? import * as fbMessenger from "jquery.fbmessenger" doesn't let me invoke fbMessenger as a function
Like jQuery I have to write a file on #type for the function? Or should I insert an instruction on type.d.ts? So how could I do it?
Thank's for your help.
Related
I have React.js project that needs to convert to a Next.js
This project has a file data-pulse-provider.js
import { logMessage, } from './helpers';
import $ from 'jquery';
require('signalr');
window.jQuery = $;
var DataPulseProvider = /** #class */ (function () {
//...
}());
export { DataPulseProvider };
Here I am getting an error
Error: jQuery was not found. Please ensure jQuery is referenced before
the SignalR client JavaScript file.
I think this window object is not available all the time in next.js. The solution I found was use dynamic imports with SSR false and then use useEffect to window object-related code. But this is a pure js file hence I can't use the useEffect or something like that. So how can I fix this issue?
Any help!
Thanks in advance.
We are trying a POC of adding Typescript and Webpack to our Angularjs project.
I am able to get my webpack bundle to generate, however at runtime the program cannot find the various functions in my validator.js. Can you please offer some advice?
login-view.components.ts
declare var findFormNode: any; //function in validator.js
//LogInUser
self.login = function ($event, command) {
if (findFormNode($event.target.id)) {
...
}
}
main.ts is importing the file
import "./../../../CommonStaticFiles/include/js/Validators.js";
bundle.js
eval("/* WEBPACK VAR INJECTION */(function($) {/*\r\n\r\n VALIDATORS\r\n\r\n ... n\n\nfunction findFormNode(
error
ReferenceError: findFormNode is not defined
at LoginController.self.login (login-view.component.ts:28)
at fn (eval at compile (angular.js:NaN), <anonymous>:4:267)
at callback (angular.js:29019)
In order for your functions to be properly imported, there are few things that you have to make sure of.
First, make sure you are exporting your functions correctly. Here's an example of how to export a function from Validator.js:
export const validateFunc1 = ():void => {};
Next, you have to make sure you are using proper import syntax. In order to import the function above, you would do the following:
import {validateFunc1} from "./../../../CommonStaticFiles/include/js/Validators.js";
Alternatively, if you want to import all exported functions at once, then you can use this syntax:
import * as validatorFuncs from "./../../../CommonStaticFiles/include/js/Validators.js";
Lastly, check that the location of Validators.js is correct. It's a common mistake to be looking in the wrong directory. Your code editor can usually help you find the right path to use.
I am using svg.js in my Laravel project running vue.js.
This is how i use svg.js
Step 1: Install svg.js as a plugin in my vue app.
import svgJs from "svg.js/dist/svg"
export default {
install(Vue) {
Vue.prototype.$svg = svgJs
}
}
Step 2: Import and use the plugin.
import svgJs from "./plugins/vueSvgPlugin"
Vue.use(svgJs);
Step 3: Then i can do this.
console.log(this.$svg);
console.log(this.$svg.get("samplesvg"));
However i am not sure how to add the svg.js plugins. I want to use below three plugins, in case someone wants to know.
svg.select.js
svg.resize.js
svg.draggable.js
I have my solution for working with non npm/module library.
First I will use jsdelivr to serve file from directly from Github. For example https://cdn.jsdelivr.net/npm/svg.js#2.7.1/dist/svg.min.js.
Then I use script.js to load them.
script.order([
"https://cdn.jsdelivr.net/npm/svg.js#2.7.1/dist/svg.min.js",
"https://cdn.jsdelivr.net/npm/svg.select.js#3.0.1/dist/svg.select.min.js"
], () => {
// window.SVG is available
});
Live Example
To use version 3.x you would either just do it with esm imports:
import { SVG } from '#svgdotjs/svg.js'
import '#svgdotjs/svg.draggable.js'
// ...
No need to use plugins for vue. Just use SVG() in your code when you need it. If you need other functionality lile the "old" SVG.on() you need to import it, too: import { SVG, on } from '#svgdotjs/svg.js'
Or you include it via script tags. svg.js always ships with prebundled files for that purpose:
<script src="node_modules/#svgdotjs/svg.js/dist/svg.js"></script>
<script src="node_modules/#svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>
You can just use the global SVG variable in that case and access everything with it like SVG.on(...)
I had to change my approach according to comment by Fuzzyma
So i just did simple import in my app file, and it all worked fine. It is also worth mentioning that i used versions < 3.0 to make it work.
import * as SVG from 'svg.js/dist/svg';
import './plugins/svg.draggable/dist/svg.draggable';
import './plugins/svg.select/dist/svg.select';
import './plugins/svg.resize/dist/svg.resize';
I have put my js files eva.min.js/feather.min.js and so on in vendor dir, then I imported them in ember-cli-build.js app.import('vendor/eva.min.js'). But how to use it?
I tried something like import eva from 'eva'/'eva.min'/'eva.min.js' or import Eva from 'eva'; and so on, but it doesn't work.
app.import('vendor/eva.min.js');
app.import('vendor/bootstrap.min.js');
app.import('vendor/feather.min.js');
app.import('vendor/popper.min.js');
app.import('vendor/jquery-slim.min.js');
app.import('vendor/swipe.js');
import Swipe from 'swipe';
Console usually gives me the could not find the module error.
And I don't have a deep background in programming, so I would highly appreciate if you explained the problem as simple as possible.
UPD: I found all js code as npm package (it happens that the js files weren't third-party)
https://www.npmjs.com/package/feather
https://www.npmjs.com/package/popper.js
https://www.npmjs.com/package/jquery-slim
https://www.npmjs.com/package/swipe
https://www.npmjs.com/package/bootstrap
https://www.npmjs.com/package/eva-icons
But all your responses were helpful. Anyway in the near future I expect to use third-party libraries.
A quick way is to use scriptjs and it allows you to load any javascript into your component in the following way: (I am using Yammer as an example)
import $scriptjs from 'scriptjs';
componentDidUpdate() {
//script loader
setTimeout(function(){
$scriptjs('https://c64.assets-yammer.com/assets/platform_embed.js',
() => {
window.yam.connect.embedFeed(YammerHelper.loadComments());
});
}, 1000);
}
You should get the idea how to consume it. Check their docs with lots of examples.
This is not the best solution. But one way of using the third party js is,
1) say you have a function in your js file vendor/third-party.js
someFunction = function (element) {
...
console.log("works")
};
2) Then import it in your ember-cli-build.js
...
app.import('vendor/third-party.js');
...
3) After importing restart your server.
Use the function directly in your controller/component as
window["someFunction"]
Unless the JavaScript library being used explicitly supports the import X from 'y' syntax then when you import in the build using the app.import syntax you just use it in your app just as the plugin documentation describes.
So for Swipe you would do the following.
Based on this documentation: https://github.com/thebird/Swipe
// ember-cli-build.js
app.import('myswipe.js`);
// component.js
/* global Swipe */ // This silences the linter from throwing errors...
classNames: ['swipe'],
didInsertElement() {
this._swipe = Swipe(this.element, {
option1: option1
});
}
// component.hbs
<div class='swipe-wrap'>
{{yield}}
</div>
This codes creates a component to control your swipe plugin.
This code would create a swipe object and isolate it to the component.
Again when you use the app.import you are just loading the library on boot. The library does whatever it says it will do in the docs. Sometimes they register a global object, sometimes they dont.
I'm making an Api repository for my Vue.js application, following this article.
Thing is, I like to document my functions so I have better code completion on VSCode. I typically use jsDoc for this.
I'm stuck here:
import DiarioEscolarRepository from './diarioEscolarRepository';
import PeriodoAvaliativoRepository from './periodoAvaliativoRepository';
import AtividadeAvaliativaRepository from './atividadeAvaliativaRepository';
import CorteEtarioRepository from './corteEtarioRepository';
const repositories = {
diarioEscolar: DiarioEscolarRepository,
periodoAvaliativo: PeriodoAvaliativoRepository,
atividadeAvaliativa: AtividadeAvaliativaRepository,
corteEtario: CorteEtarioRepository,
};
export default const RepositoryFactory = {
get(name){
return repositories[name];
}
};
I need to make it so the editor understands that the get function is a simple acessor to the repositories object.
I tried using #typedef and #type, but none of them worked properly.
I tried something like #returns {repositories.name}, but is also does not work.
Is there a way to document this?
I also thought about using a typescript definition file but I never did it, so I don't know where to begin.