I happen to need a file storage database and UploadFS seems to be the best option. My project is in Angular2 typescript and Meteor.
meteor add jalik:ufs-gridfs
So far it fails when I try to import the library like this:
import {UploadFS} from 'meteor/jalik:ufs'
The error thrown sais it couldn't find the library (on the client side).
I thought it may be because the library is in javascript while the rest of the project in typescript so I tried to write a stub ufs.d.ts, first handcrafted, then with dstmake, and then by hand again when I found I had to export the module UploadFS so that meteor (barbatus:typescript?) could see it:
declare module 'meteor/jalik:ufs' {
export module UploadFS{
interface UploadFS {
...
}
}
}
So far I had my ufs.d.ts stub file at the typings/ folder and linked in the main.d.ts. No errors at compile time. Meteor sad the DB was correctly created ... but then when I tried to use it broke.
I found that UploadFS was undefined so I supposed it wasn't referencing the library even though Meteor compiled without any error.
So I suppose the only thing I've have left is to translate jalik:ufs and jalik:ufs-gridfs to typescript by hand. Is that correct? Is there an easier way of making ufs work wit angular2-meteor?
Would you use some other storage solution? any advice either fixing this library or choosing another one?
I'm successfully importing that library and just suppressing the warnings with this line:
import 'meteor/jalik:ufs'; declare let UploadFS:any;
Keep an eye on https://github.com/meteor-typings and https://github.com/Urigo/angular2-meteor/issues/102 for proper type definitions in the future.
You should never have to re-implement a JavaScript library in TypeScript in order to use it.
import { UploadFS } from 'meteor/jalik:ufs';
console.log('UploadFS', UploadFS);
This gives me the UploadFS object and I think it's totally independent of angular2-meteor so I suppose that jalik:ufs should be working fine, even with those warnings generated by ts compiler.
About typings, those warning are very annoying, I know :) but you can pretend for now you don't see them.
Here's an example implementation of jalik:ufs I made for Angular1, but it will look pretty much the same with Angular2.
http://www.angular-meteor.com/tutorials/socially/angular1/handling-files-with-collectionfs
Related
I'm using BabylonJS in a StencilJS app, and I can only seem to import in a very specific way.
For instance I can't do:
import { Engine, Scene } from "babylonjs";
It says 'Engine' is not exported by node_modules\babylonjs\babylon.js
But it is..
I can do:
import BABYLON from 'babylonjs';
and use it like
private _scene: BABYLON.Scene;
I'd like for the former to work. Any advice?
The first way is how most tutorials do it, and I refuse to believe SencilJS is just not capable of that. I must be missing something
BabylonJS is provided in two versions (ES5 and ES6). The issue you are referring to is related to ES5 version of package.
If you do smth like this in your code
import * as babylon from 'babylonjs';
console.log(babylon);
and look into the console, you will see next:
{default: Module, __moduleExports: Module, babylonjs: undefined}
That's why decomposition is not working, it's not an object that can be serialized the way you expect.
In documentation they say
import { Engine, Scene } from 'babylonjs';
NOTE: if you can't make this import method to work, go to the section on typescript and webpack below.
However, I failed to make it work for ES5 version. The correct way, as to me would be to use ES6 version of package, which can be installed as
npm install -S #babylonjs/core
This version allows you to use ES6 packages together with tree shaking and other useful features.
Your module import, in this case, would look exactly as you wish:
import {Engine, HemisphericLight, Mesh, Scene} from '#babylonjs/core';
Here is a small example I've done to prove my words.
Please, let me know if I got you wrong and you expected to have smth different or you need some additional explanations or materials - I'll be happy to assist.
I'm trying to add: https://www.npmjs.com/package/is-url to my react/redux project but I'm not sure what to put for importing.
Is there another, es6 friendly install that I could use?
You can use:
import isUrl from 'is-url';
Or even
import anotherNameForIsUrl from 'is-url'
The reason for this, is that the module of the library is exported as default as seen per the source file: https://github.com/segmentio/is-url/blob/master/index.js which means you are free to give it your own variable name.
Another thing is to think about moving the source code to your project, so you dont need another very small third-party dependency.
Background
I am using a library called baguettebox.js
You can see it here
Problem
When I import this into my project like
import * as BaguetteBox from 'baguettebox.js';
I get a warning flagged inside my IDE PhpStorm
Cannot resolve file 'baguettebox.js'
This is because the folder & package.json are called baguettebox.js.
The Package is actually found and works in my application, I just want a good way to handle this error.
It's the IDE issue. Please follow WEB-25805 for updates
The guides for ember.js are assuming one has the full ES6 support e.g. http://guides.emberjs.com/v2.2.0/routing/specifying-a-routes-model/ shows using the export default construct and doesn't specify any alternative way to achieve the goals. However the module feature is not implemented in all browsers that ember is supporting.
How can I use these features with a browser that doesn't support modules? How would the code in these examples translate to ES5?
Documentation assumes you are using a transpiling tool, because the recommended tool, ember-cli does. Unless you have good reasons not to use it, you definitely should look into it.
It is, however, perfectly fine to work without it. For instance, without a module system, Ember will map controller:posts.index to App.PostsIndexController. So this should work for the example you linked:
App.Router.map(function() {
this.route('favorite-posts');
});
App.FavoritePostsRoute = Ember.Route.extend({
model() {
return this.store.query('post', { favorite: true });
}
});
You may also use Ember with your own module support. I successfully have an Ember project based on rollup. It does require a bit more work though, to have the resolver find your classes (that resolver link also documents how ember relates does the name mapping). Nothing hard, but you must build a short script to generate registrations.
Edit for blessenm: Ember with rollup
Unfortunately I cannot share this code, but it works like this:
A script scans the project directory and compiles templates by invoking ember-template-compiler.js on every .hbs file it encounters.
A script (the same one, actually) scans the project directory and generates the main entry point. It's pretty simple, if it sees, say gallery/models/collection.js and `gallery/routes/picture.js', it will generate a main file that looks like this:
import r1 from 'gallery/models/collection.js';
import r2 from 'gallery/routes/picture/index.js';
// ...
Ember.Application.initializer({
name: 'registrations',
initialize: function (app) {
app.register("model:collection", r1);
app.register("route:picture.index", r2);
// ...
}
});
It should just map your filenames to resolver names. As a bonus, you get to control how your directories are organized.
Invoke rollup on the generated file. It will pull everything together. I use IIFE export format, skipping all the run-time resolution mess. I suggest you setup rollup to work with babel so you can use ES6 syntax.
I don't use any ember-specific module, but it should not be too hard to add. My guess is it's mostly a matter of setting up rollup import resolution properly. For all I know, it may work out of the box.
You should look into using Ember CLI http://ember-cli.com/
You write your code in ES6 and it transpiles down to ES5.
I do own quite a big code basis implemented in JavaScript based on NodeJS. I do want to give typescript a try and want to implement all new modules in typescript. Just to see how it performs and how I like the idea. I do need to be able to revert back at any time so I do not want to put to much effort into the migration.
I started by using WebStorm and Gulp to support typescript. I created a new module and used the import / require combination.
import settings = require("./settings");
import _ = require("lodash-node");
By doing so I receive a couple of errors.
Error:(22, 27) TS2307: Cannot find external module './settings'.
Error:(23, 20) TS2307: Cannot find external module 'lodash-node'.
Those modules have no typescript definition file and are plain javascript modules (lodash is obviously a external library). I do have a couple of dependencies and I do not want to create definitions manually even if they are just empty stubs. As mentioned I do want to keep the integration as simple as possible.
Is there a general flag or something like that I can set?
The easiest way to proceed (if you don't want type information for a module) is to write:
declare module "lodash-node" {
var notTyped: any; // naming is unimportant here
export = notTyped;
}
Put that in a separate .d.ts file and /// <reference> it. Then _ will be of type any in your implementation file and the compiler won't complain about not know what module you're talking about.
You can use webpack's typescript-loader and start from there. Make sure you put target: 'node' on your webpack config so you don't have all the browser junk.