We Keep Coding

How to use imported third-party js (not addon/npm package) in controller/component?

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.

Adding Typescript Type Declarations to Monaco Editor

I have a Monaco editor which the user inputs custom javascript code. Within this Monaco Editor they can use Lodash functionality. I want to be able to give them the intellisense / code completion for lodash, by including the type definitions.
I've seen a few answers relating to adding custom declarations, but none that are including a whole 3rd party libraries declarations. Has anybody had experience with this.
This is what I have so far. Then below I create the editor, similar to the example in the documentation.
monaco.languages.typescript.typescriptDefaults.addExtraLib("", "./../../types/lodash/index.d.ts");

I'd like to add the package monaco-editor-auto-typings as an option. Disclaimer: I'm the developer of that package.
It continuously scans code entered in the monaco editor, detects imports and automatically loads the declaration files from UnPkg.
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import { AutoTypings, LocalStorageCache } from 'monaco-editor-auto-typings';
const val = `
import React from 'react';
React.useEffect(0); // Type Error!
`;
// Create monaco editor instance
const editor = monaco.editor.create(document.getElementById('root')!, {
model: monaco.editor.createModel(val, 'typescript'),
});
// Initialize auto typing on monaco editor. Imports will now automatically be typed!
const autoTypings = AutoTypings.create(editor, {
sourceCache: new LocalStorageCache(), // Cache loaded sources in localStorage. May be omitted
// Other options...
});
You can explore how it works in the demo.

(Copied from my GH Gist: https://gist.github.com/cdrini/9de507f6ac19da30fd27c5f618783b31 )
Well that was a headache! This is certainly not an elegant solution, but it works. Hopefully someone can use these notes to save themselves a bunch of time.
Known issues:
This does not scale easily to any other library
Requires some internal knowledge of lodash's types library which might break on a lodash update
Add raw-loader and #types/lodash
npm install --save-dev #types/lodash raw-loader
(as of writing, these are at 4.14.162 and 4.0.2, respectively)
Import and register the .d.ts files
Looking at #types/lodash/index.d.ts, copy all the common references and import them. :
import LODASH_index from '!raw-loader!#types/lodash/index.d.ts';
import LODASH_common from '!raw-loader!#types/lodash/common/common.d.ts';
import LODASH_array from '!raw-loader!#types/lodash/common/array.d.ts';
import LODASH_collection from '!raw-loader!#types/lodash/common/collection.d.ts';
import LODASH_date from '!raw-loader!#types/lodash/common/date.d.ts';
import LODASH_function from '!raw-loader!#types/lodash/common/function.d.ts';
import LODASH_lang from '!raw-loader!#types/lodash/common/lang.d.ts';
import LODASH_math from '!raw-loader!#types/lodash/common/math.d.ts';
import LODASH_number from '!raw-loader!#types/lodash/common/number.d.ts';
import LODASH_object from '!raw-loader!#types/lodash/common/object.d.ts';
import LODASH_seq from '!raw-loader!#types/lodash/common/seq.d.ts';
import LODASH_string from '!raw-loader!#types/lodash/common/string.d.ts';
import LODASH_util from '!raw-loader!#types/lodash/common/util.d.ts';
Note: Vetur will complain in VS Code about importing .d.ts files, but won't error.
Then register them into monaco (wherever monaco is in your project):
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_index, '#types/lodash/index.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_common, '#types/lodash/common/common.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_array, '#types/lodash/common/array.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_collection, '#types/lodash/common/collection.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_date, '#types/lodash/common/date.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_function, '#types/lodash/common/function.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_lang, '#types/lodash/common/lang.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_math, '#types/lodash/common/math.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_number, '#types/lodash/common/number.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_object, '#types/lodash/common/object.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_seq, '#types/lodash/common/seq.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_string, '#types/lodash/common/string.d.ts');
window.monaco?.languages.typescript.javascriptDefaults.addExtraLib(LODASH_util, '#types/lodash/common/util.d.ts');
Note:
The file names matter here (somehow); removing the .d.ts extension causes them to break.
References/External Links
The (largely useless) docs: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.typescript.languageservicedefaults.html#addextralib
GH Issues:
#758: monaco-typescript not picking up configured modules from addExtraLib
#754: Cannot require contents of '.d.ts' files as string in browser for addExtraLib method
StackOverflow Questions:
Adding Typescript Type Declarations to Monaco Editor
Monaco demo using addExtraLib: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults
#types/lodash at unpkg, if you want to see the .d.ts files directly: https://unpkg.com/browse/#types/lodash#4.14.162/
GH Search for uses of addExtraLib: https://github.com/search?l=JavaScript&q=addExtraLib&type=Code
Open Questions
What does the filename actually do? Also, what are the protocol prefixes for?

See this as an example and the apis. you should pass the content of the .d.ts file as the first argument
monaco.languages.typescript.typescriptDefaults.addExtraLib(content, "")
check this demo of how pass arguments

How to import sub-modules of a module using define in JavaScript?

I'm new to AMD and trying to use react-context-menu library. The docs for the library imports modules like ,
import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
Now if I were to include the module using define[], how would I do it ?
e.g for including react I would do,
define(["react"], function(React){
});
What should I do if I also want to include react-context-menu and use it's submodules ContextMenu, MenuItem, ContextMenuTrigger?
define(["react", "react-context-menu"], function(React, ??????){
});
Thanks in advance.

Perhaps you should consider using CommonJS modules var $ = require('jquery') in conjunction with a module bundled instead, either webpack or browserify.

define(["react-contextmenu"], function(ReactContextMenu){
var ContextMenu = ReactContextMenu.ContextMenu;
var ContextMenuTrigger = ReactContextMenu.ContextMenuTrigger;
var MenuItem = ReactContextMenu.MenuItem;
});
The sub-modules can be included using .(dot). <module>.<sub-module> worked for me.

How do you add external javascript libraries using ES6 style imports?

I'm having trouble understanding exactly how to use older javascript libraries within newer ES6 projects. I'm looking at a React project that's been compiled with webpack, written with ES6 and transpiled with Babel. Each component follows the import * from "" notation.
There's an external javascript library I want to use within the project: https://github.com/pchen66/panolens.js. The compiled library doesn't follow ES6 export format, and only has one global object PANOLENS.
What should I do if I want to include this into my project?

This is not the best.
Include it in your html :
<script src="js/three.min.js"></script>
<script src="js/panolens.min.js"></script>
<script src="bundle.js"></script>
<script>window.PANOLENS = PANOLENS</script>
Where bundle.js is your own builded javascript code.
Then, you will be able to use PANOLENS object anywhere.
Example component :
import react, {Component} from 'react'
export default class Test extends Component {
componentDidMount(){
var panorama, viewer;
panorama = new window.PANOLENS.ImagePanorama('asset/equirectangular.jpg' );
viewer = new window.PANOLENS.Viewer(
container: document.getelementbyid('viewer-container'), // A DOM Element container
controlBar: true, // Vsibility of bottom control bar
controlButtons: [], // Buttons array in the control bar. Default to ['fullscreen', 'setting', 'video']
autoHideControlBar: false, // Auto hide control bar
autoHideInfospot: true, // Auto hide infospots
horizontalView: false, // Allow only horizontal camera control
cameraFov: 60, // Camera field of view in degree
reverseDragging: false, // Reverse orbit control direction
enableReticle: false, // Enable reticle for mouseless interaction
dwellTime: 1500, // Dwell time for reticle selection in millisecond
autoReticleSelect: true, // Auto select a clickable target after dwellTime
passiveRendering: false, // Render only when control triggered by user input
);
viewer.add( panorama );
}
render(){
return(
<div id='viewer-container'></div>
)
}
}

It doesn't really matter if the module itself follows ES6 syntax. It will either follow commonJS or AMD, both of which webpack can handle, and at worst, you can just require/import the whole file into your bundle: https://www.npmjs.com/package/panolens.js.
EDIT: This npm module/repo does use module.exports if you look at the dist.

EDIT:
Yeah, it looks like someone has forked the library and made an NPM package out of it. Have you taken a look at https://github.com/sbolel/pano. There is an ES6 example.
Install the package:
npm install --save pano
Then import:
import Pano from 'pano'
import { Page } from 'pano'
// Pano.Page === Page
const panoPage = new Page('pano')
panoPage.init()
ORIGINAL:
You could load the script asynchronously using the method below, or if you are using a bundler, it would have a way to import external scripts. For example, Webpack has Externals for this.
After doing this, you can access the the global object PANOLENS, as per the documentation. You'll want to make sure the PANOLENS object is available before using it in your application.
Add the following to your static HTML:
<script src="https://github.com/pchen66/panolens.js" async></script>
If you are planning to only use the script in a certain React component (presuming you use React), you could use a library such as react-async-script-loader. This will allow you to lazy load a script on a particular component. It has a bunch of properties that can be used to determine when the script is ready to be used.
Again, after the script has successfully loaded, you may use the library by accessing it through the global PANOLENS variable.

So you would want some kind of module shimmer. If you are using webpack you should try this:
https://github.com/webpack/docs/wiki/shimming-modules
There are similar shims for browserify too:
https://github.com/thlorenz/browserify-shim
You could also fork the repo and shim it manually something like this, the implementations may vary though.
/**
* Panolens.js
* #author pchen66
* #namespace PANOLENS
*/
var PANOLENS = { REVISION: '3' };
module.exports = PANOLENS;

how use npm packages with Vue SPA

i have created Vuejs app using vue-loader,now i need to use an installed npm package as follow :
var x = require('package-name')
Vue.use(x)
but i have this error :
Uncaught TypeError: plugin.apply is not a function
dose Vuejs require a special type packages or it can work with any JavaScript package and this error can be solved

There are many approaches.
I am adding with respect #smiller comment and thanks for sharing the link . I am adding information here in case the link someday not work .
Credit to this link :- https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/
First approach of-course #crig_h
window.x = require('package-name')
There are certain drawback . don’t work with server rendering . Otherwise everything will work fine in browser as window is global to browser , any properties attract to it will be accessible to whole app.
The second approach is .
Use Import with the js portion in the .vue file , Like this.
if inside the '.vue' file.
<script>
import _ from 'lodash';
export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
}
}
</script>
If you have seperate file for .js then same like this there will we no <script> tag.
And Third method
where ever in the project you import vue. You can write this statement
import Vue from "vue";
import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });
This will set the relevant properties to to Vue . And you can use it any where like this . As Vue is global scope of app.
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
}
}
ADDED FOR CSS
you can do import in src/main.js file in vue.js project .
import './animate.css'
Also if you like to import in template .
Inside the template you can do this.
<style src="./animate.css"></style>
Also have a look on css-loader package . what it does ?

Plugins are specific Vue packages that add global-level functionality to Vue, so if you aren't using a Vue plugin then you don't need to register it with Vue using Vue.use().
In general there isn't any issue using non-vue-specific packages via npm but if you need to register something globally, you can usually get away with simply attaching it to window like so:
window.x = require('package-name');

Unfortunately none of these answers worked for me what i ended up doing is
export default {
computed() {
x () {
return require('package-name')
}
}
}
And then use it as x.functionName() or whatever

There is better solution ... First import your package in main.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
import Vue from "vue";
import App from "./App.vue";
import "package-name";
After that's you code inside mounted method as javascript
<script>
export default {
mounted() {
const any = require("package-name");
// your code as normal js
},
};
</script>