I am trying to try running meteor together with react and react-three library, that wraps three.js for react. As there are no atmosphere package for this, I am looking into either wrapping it myself or any other method how to use it.
1) How to wrap react-three library into meteor package?
I have tried downloading react-three repo, running npm run build and then using resulting react-three.js with package code written like this:
Package.describe({
summary: "react-three wrapped",
version: "0.8.0",
name: "myname:react-three",
});
Npm.depends({
"react-three": "0.8.0"
});
Package.on_use(function(api) {
api.versionsFrom("0.9.0");
api.use('limemakers:three#=0.73.0',['client','server']);
api.add_files([
"lib/react-three.js"
]);
api.export("THREE");
api.export("ReactTHREE");
});
but this does not seem to do the deal, no ReactTHREE is exported. Might be because of the way react-three build process works. Could you point me into the direction on how to build and wrap it properly?
2) Maybe it is possible to use it directly?
I tried meteorhacks:npm, but it seems that it is server side only. Anything else that could work?
Meteor 1.3-beta was just released and it has support for js modules, although I haven't had the opportunity to test it.
This article has good documentation.
https://github.com/meteor/meteor/blob/release-1.3/packages/modules/README.md
Related
You know, I spend more time just trying to get things set up to work with Angular than I do actually developing with Angular. There must be an easier way... :(
Currently, I am using the aspnetcore-spa template, creating a project with the command "dotnet new angular" - this is version 1.0.3, which adds Angular 4.1.2 to the npm dependencies. This works great to get a project running quickly. But now I want to add PrimeNG to take advantage of their form controls. I have been struggling with this all day, and would love it if anyone could provide some assistance.
Here is what I have done in my current effort (the latest of many, starting fresh each time):
1) Added to the package.json file: "primeng": "4.1.0-rc.2"
2) Added 'primeng/primeng' to the webpack.config.vendor.js file's vendor collection.
3) Added the following to my test module (which is in turn referenced in app.module.shared.ts so I can route to it via my RouterModule):
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
And in the html for the module, in an attempt to use the file uploader control, I have (from their site - https://www.primefaces.org/primeng/#/fileupload):
<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>
4) ran "webpack --config webpack.config.vendor.js" from a command prompt at the root of the project folder, which completed with no errors.
Then I hit F5 to run the project, and I got this error:
Exception: Call to Node module failed with error: Error: Template parse errors:
'p-fileUpload' is not a known element:
1. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. (" type="button" (click)="onclick()" class="ui-button-info" label="Click Me">Click Me</button>-->
So, in an effort to comply, I added a reference to the ngprime module to the app.module.shared.ts file, like this (I don't really know how I should reference the module...):
import { FileUploadModule } from 'primeng/primeng';
But got the same exact error.
What am I missing???
Any help would be most appreciated.
I finally have this working, using the asp-prerender-module to get server-side rendering, and not having to rely on the asp-ng2-prerender-module (see my last comment). The trick, I found, was to reference the FileUploaderModule in the app.module.shared.ts file like this:
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
rather than like this:
import { FileUploadModule } from 'primeng/primeng';
The reason this matters is that the latter method of referencing will load all other components as well (see explanation here: https://www.primefaces.org/primeng/#/setup), and SOME of the PrimeNG components can not be rendered on the server due to DOM-related references (things like "window", which do not exist on the server). See the discussion here for more on this: https://github.com/primefaces/primeng/issues/1341
This change, combined with the other steps listed in my answer and, of course, actually referencing the directive in app.module (thank you #pankaj !) made everything work correctly at last. Only took me about 7 hours to figure it out. :(
I'm struggling with unit tests in Meteor. I want to use the velocity, jasmine package but I must be doing something wrong. The tests don"t seem to work because the test can't find the code to test. The test project is available on github.
The code that i want to test is here:
https://github.com/robvanpamel/coderepository/blob/master/meteor/sandwich-app/server/Services/SandwichService.js
The unit Test is here:
https://github.com/robvanpamel/coderepository/blob/master/meteor/sandwich-app/tests/jasmine/server/integration/spec/SandwichServiceSpec.js
When I uncomment the created SandwichService in the Unit Test, the test works, which is normal.
I haven't done any configuration elsewhere in meteor, and i think that is the problem. Do you have to put a package.js file where you specify your source code?
How can Jasmine know where it can find the SandwichService I'm trying to test? It is also the error i get.
"ReferenceError: SandwichesService is not defined "
EDIT
I was able to resolve it and updated the code repository in GitHub. The key was not to use the Javascript prototypes. so the below will not work
function SandwichesService(){};
SandwichesService.prototype.listSandwiches = function() {
// do stuff here
}
while the code below does work
SandwichService = {
listSandwiches: function(){
// do stuff here
}
};
I don't really understand why? Does somebody can tell me?
Kind regards and thanks upfront!
Rob
This is a Meteor issue not a testing issue :)
You need to put the SandwichesService on the global namespace. Your second block does that by default.
Try:
SandwichService = new SandwichesService()
(don't use var)
I am writing an angular2-meteor program.
When I am using urigo:angular2-meteor package, I add reference path like this:
/// <reference path="../typings/angular2-meteor.d.ts" />
The question is: can I use other normal meteor packages in a angular2-meteor project? Or I can only use some packages written for angular2-meteor specifically.
For example, if I want to use yuukan:streamy, how can I use it correctly? Right now, I have one line code
Streamy.broadcast('hello', {data: 'world!'});
When I compile it, it shows: Cannot find name 'Streamy'.
Thanks!
you can use all the libraries from meteor.
you will have 2 choices.
find the streamy definition file (streamy.d.ts) if it exists. This will give you autocompletion and compile errors if you misuse streamy functions.
If you dont find a definition file than just add declare var Streamy at the top of the file you want to use it. The library is already there if you add it via atmosphere. But typescript does not know about it. By declaring the variable you tell typescript that this exists and it wont complain when compiling.
I am working on a website with React.js and asp.net mvc 4, I am planning to use Flux as my front-end architecture, but I met some problems and was very confused about the use of Flux:
In the beginning,I thought Flux would be a perfect front-end architecture in my website,but after I read a lot of articles about Flux, I find that they are nearly all with NodeJs,even the demos from facebook team,that means they all do the rendering stuffs of React.js/Flux code in server side,right? but How can I use Flux in the client side ,I mean in the user's browser?
I am very confused,am I wrong if I treat react.js/flux as a client side solution?If I am not wrong, but why they all use them with NodeJs and ES6(like facebook Dispatcher.js), That's ok in server side,but what about client side ? most of user broswers don't support ES6. I tried using Babel to convert Dispatcher.js from ES6 to ES5,but the es5 version had some errors and didn't work.
And I also found some implements of Flux that claim to support client side,like fluxxor,but I don't have a chance to try it before I write this post,because I am too confused.
I hope someone can help me to figure out these problems.
ps. Sorry for my english,if you don't understand my words,pls let me know , I will explain it.
I think you want :
$ bower install flux
Then you could do something like this (if using require.js):
require(
['bower_components/flux/dist/Flux'],
function(
Flux )
{
var dispatcher = new Flux.Dispatcher();
dispatcher.register(function(payload) {
if (payload.actionType='test') {
console.log('i got a ', payload);
}
});
dispatcher.dispatch({
actionType: 'test',
otherData: { foo: 'bar' }
});
});
(This answer uses : https://bower.io/, https://libraries.io/bower/flux, http://requirejs.org/)
React is a client side library. You can serve a React App with virtual any backend language. The reason a lot of examples are with node is because it is easy and fast to set up.
You should try this tutorial:
https://facebook.github.io/react/docs/getting-started.html
It is pretty straight forward and doesn't require node.
Also maybe you should try starting to serve the React app statically at the beginning to better understand React itself.
ES6 works in Browsers thanks to Babel. If you believe you have any trouble with Babel, you might want to first play around with it's REPL to get a feeling for it: https://babeljs.io/repl/
The idea is that the code can run on the client and server (universal js, used to be called isomorphic javascript (though it goes a little further then that with serverside rendering etc..),
There are many flux implementations reflux is the most promising at this point , im using martyjs (but they stopped the development, it will be taken over by alt) but even for the flux architecture, u just get the dispatcher / event emitter and some ideas :D,
Shorty said u can install the npm packages (flux, react , babel) etc, but u need something like http://browserify.org/(with reactify) or Webpack, to run them in the browser. U don't need to run them on a node js "after its bundled", webpack/browserify will bundle the code so it can used within the browser independently
https://github.com/christianalfoni/flux-react-boilerplate/ <-- ther are some boilerplate, that provide some nice guide on how to bundle the code.
I am using the package livestamp-hs in my Meteor app. This works fine, except in the console I see the error message: Uncaught ReferenceError: Handlebars is not defined, which is caused by this package (helpers.js):
if(Meteor.isClient) {
Handlebars.registerHelper('livestamp', function(timestamp) {
return new Handlebars.SafeString('<span class="livestamp" data-livestamp="'+ timestamp +'"></span>');
});
}
I checked package.js of this package to see if handlebars is being used, and as far as I know this is OK:
Package.on_use(function(api) {
api.use(['jquery', 'handlebars'], 'client');
api.add_files(['moment.min.js', 'livestamp.min.js', 'helpers.js'], 'client');
});
Although this is not a big problem on localhost, it causes an infinite loop when deploying to either meteor.com or heroku.com. Any ideas to solve this?
In Meteor 0.8, the handlebars package was replaced by the ui package. You'll want to use that in your package.js file to ensure that you pull it in.
Handlebars.registerHelper still works, but UI.registerHelper is the new syntax.
On another note, livestamp is last decade's way of creating updated timestamps. I recommend the Meteor-based way to use time on the client, which is reactive and synced to server time: https://github.com/mizzao/meteor-timesync. (Disclaimer: I maintain that package.)