I want to use the js library bowser in an asp.net project which uses TypeScript and the bundling/minification features that exists in the namespace System.Web.Optimization.
The library bowser can be found here: https://github.com/lancedikson/bowser
I have tried to read the documentation for the project but I cant find out how I should add the library to my solution. Does not it exists a minified version of the library that I just can add to my project? It seems like I should add the library with npm when I am reading the documentation.
Unfortunately I am a rookie when it comes to npm. If I add a dependency in my package.json with the following row '"bowser": "2.4.0"', and then restores all packages I get bowser in my node_modules folder. So far so good...
Now I create a ts-file (bowsertest.ts):
import * as Bowser from "bowser";
class BowserTest {
constructor() {
const browser = Bowser.getParser(window.navigator.userAgent);
console.log(`The current browser name is "${browser.getBrowserName()}"`);
}
}
I reference the js file that is compiled for the ts-file above and reference it from a page:
<script src="bowsertest.js"></script>
But of course this will not work, since I have not loaded any js-files for bowser. How should I load the js files? Make a bundle with all js files in node_modules\bowser\src and reference it before my bowsertest.js is read?
I am lost. :)
Related
I'm currently pulling hairs trying to figure out how to go about this.
So, I'm working in a vanilla JS environment with no webpack setup served with capacitor and want to use this capacitor-plugin: https://github.com/CodetrixStudio/CapacitorGoogleAuth
However, to use this plugin I have to import the package into my client code.
Here's what I've tried:
Unpkg type="module": however browser support in mobile isn't that great. And this app will be served to a ton of users
Using browserify + esmify to bundle the plugins code into something I could import with a <script> tag into my index.html. Didn't work
My last thought is to setup webpack to bundle everything for me, similar to the browserify approach and import that. However before I go through with all of that I wanted to reach out here to see if you guys had any other ideas.
Is there a way to access this plugin from window maybe?
so I figured out the way to go about this by following this article: https://medium.com/#SmileFX/a-complete-guide-building-a-capacitorjs-application-using-pure-javascript-and-webpack-37d00f11720d
Basically you have a www/js directory (vanilla js), and a src directory (ES6/import code goes). You then configure webpack to output in your www/js/ directory.
Note: Any variable you want accessible to your vanilla js code must be explicitly stored in the window object.
Example
./src/toBeWebpacked.js
import Module from "your-module"
window.doSomething = () => Module.doSomething()
./www/js/vanilla.js
const useModuleCode = () => {
// use code from webpacked ES6 JavaScript here
return window.doSomething();
}
I am trying to add a JS script bundle file to a custom Angular Library which is using features from it. I have added the types files so the linting errors are not showing, but the Project does not get built as classes from JS Bundle are not found.
I have tried and failed importing the bundle to the public-api file.
I am thinking of trying to make the bundle a private npm package to install. But that will take lot of time and effort.
What other options do I have?
Sometimes you could have that kind of circumtances like having would like to use an JS library in your Angular project.
i have encountered something like that but i have created one directive file in the src folder like "type.d.ts" so after i declared my library in it with something like "declare module 'pdfmake/build/vfs_fonts.js';" and at last imported it in my component file like "import * as pdfMake from 'pdfmake/build/pdfmake.js';"
1- Create one directive file like "type.d.ts"
2- Declare your JS library in your recent file created with something like "declare module 'pdfmake/build/pdfmake.js';"
3- Declare back the import statement in your component file like "import * as pdfMake from 'pdfmake/build/pdfmake.js';"
I have a problem when I try to install via nuget manager, when I search for 'autonumeric' I can clearly see that the latest version is 1.9.45
When I go to project site, I can see that version 1.9.45 is obsolete.
So, I want to get version 4.* but I do not know how. I also tried vie npm install command and nothing.
My question is: How can I download and incorporate the new version of autoNumeric in my MVC Web Project?
Steps:
Download zip from GitHub link
Unzip the folder and navigate to src folder
Copy all files to your solution for example to: Scripts/autoNumeric folder
Add it in your bundle like:
bundles.Add(new ScriptBundle("~/bundles/autoumeric").Include(
"~/Scripts/autoNumeric/AutoNumeric.js",
"~/Scripts/autoNumeric/AutoNumericDefaultSettings.js",
"~/Scripts/autoNumeric/AutoNumericEnum.js",
"~/Scripts/autoNumeric/AutoNumericEvents.js",
"~/Scripts/autoNumeric/AutoNumericHelper.js",
"~/Scripts/autoNumeric/AutoNumericOptions.js",
"~/Scripts/autoNumeric/AutoNumericOptions.js",
"~/Scripts/autoNumeric/main.js"));
For testing purposes add in your HTML input field:
<input type="text" id="test" value="" placeholder="something">
Initialize input field in your file. FOr example your main javascript file is main.js (NOTICE: this main.js is different than main.js in autonumeric folder!):
$(document).ready(function () {
// Initialization
new AutoNumeric('#test', { currencySymbol : '$' });
})
This not works.
Question: Should I import ES modules from folder or my main.js 'sees' the autoNumeric/main.js and all of its modules?
If you can rely on an internet connection you should probably just use a CDN
Here is the link : https://cdnjs.com/libraries/autonumeric
Simply import it in your body like :
<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.1.0/autoNumeric.min.js"></script>
And you should be good using it (don't forget to remove useless files).
When I work with angular2 code I often need to see the implementation of a class, let's say the Router class.
If I click on the Router type in my IDE WebStorm, e. g. inside the constructor of another class
export class myClass {
constructor(private router: Router) {}
// ...
}
my IDE takes me to the TypeScript definition file router.d.ts inside my node_modules folder. What I want is it to take me to the original router.ts file with the implementation of the router class, not just its definition.
The original .ts file is not included in the node_modules folder structure when you get angular2 from github via the standard package.json suggested in the Angular2 Quickstart. Currently, I have to look up the original code in the official github repo.
Any ideas how to get the .ts files into my node_modules/#angular folder instead of the .d.ts files?
Sadly, it's not possible since no TS files exist. Even if you add them it still not possible since you import real angular paths which always point to the definition files. On top of that the file structure of the project does not correlate to the structure of the import string literals.
Some background and more information
The NPM package does not include .ts files, this is by design from the angular team. Up until some time ago the .ts files were indeed supplied with the NPM package.
The reasoning for removing them is to disable abuse from users accessing private classes and #internal and private APIs which is public methods/properties in the API that are not supposed to be public but must be so other angular internal classes can use them.
We used to see a lot of code samples out there doing things like import { PromiseCompleter } from 'angular2/src/facade/lang'; (before RC0) but this was changed when the project structure had a big structure refactor in RC0. This abuse was wide and it's bad, very bad... For users and for Angular PR.
The Angular project has a complex and robust build process where all of the API is moved from .ts files into d.ts files using an automated process that limits exposure. (public_api_guard)
The end result is d.ts files only.
It's also not possible to clone the git repo and use it since, again, the file structure is way way different so imports will have to change. Most importantly without the build Angular will, most likely, not work.
A solution using a different approach
However, if you debug your app you notice that you reach actual angular core .ts files in the source view of the console, this is because the NPM package comes with source map files that include the whole TS source code. Nice trick they did there.
This is what I use to dig deep into angular, it works quite great and I get a lot from it.
It's not as nice as Goto Declaration but it something...
IMO it's also easier to understand when you step through code...
So I am trying to add pikaday date picker to Ember-CLI app.
I've got the following in my /app/views/calendar-view.js
import Ember from 'ember';
export default Ember.TextView.extend({
modelChangedValue: function(){
console.log(this.get('value'));
}.observes("value"),
didInsertElement: function(){
currentYear = (new Date()).getFullYear();
formElement = this.$()[0];
picker = new Pikaday({
field: formElement,
yearRange: [1900,currentYear+2]
});
this.set("_picker", picker);
},
willDestroyElement: function(){
picker = this.get("_picker");
if (picker) {
picker.destroy();
}
this.set("_picker", null);
}
});
My main issue is how to add the plugin itself into ember-cli?
This is the github link for pikaday: https://github.com/dbushell/Pikaday
More specifically I think this part might be important since Ember-CLI uses AMD: https://github.com/dbushell/Pikaday#amd-support
So how do I add the plugin itself to ember-cli?
Update
Since writing this answer, the Ember Addon API has become more usable and are a perfect option if you're building an Ember component/mixin/other class that adds to the regular js plugin.
Regular install
In a 'regular install' situation, you want the plugin to be available through your app and be included in the app's payload no matter what. To do this, add the file/package to your project's vendor directory. There are two immediately available ways to do this: use Bower or simply save a file or package in the directory.
1) Bower
Use Bower to install the package either through the terminal, like:
bower install ember-validations
Or, if there is no easy-install Bower package available, in your bower.json file:
{
"name": "app",
"dependencies": {
"chosen": "https://github.com/harvesthq/chosen/releases/download/v1.1.0/chosen_v1.1.0.zip"
}
}
2) Writing a file
You don't have to use Bower to add files and directories to your vendor directory. You could create a file anywhere inside the vendor directory, copy and paste the plugins javascript into it and save it, and it will still be available to import into your app.
3) Making it available in your app
Regardless of the method through which you create and save the plugin scripts, you have to still have to import the file directly into your app. You do this in Brocfile.js. Add an import with the path to the file (main file if it's a bower installed package) just before module.exports = app.toTree();.
app.import('vendor/ember-validations/index.js');
app.import('vendor/chosen/chosen.jquery.min.js');
There's more info in the Managing Dependencies section of the ember-cli docs.
Polyfill or other non-essential plugins
There are some situation in which you don't want to always load/run a script in your app. For example, you are loading a large polyfill only when the user is using IE. In this situation, you can create a directory in public/assets to hold the javascript files and load them using jQuery's $.getScript() method in an initializer or somewhere else within your Ember app.
I answered a similar question about that kind of scenario here.