mantrajs / mantra-sample-blog-app Goto Github PK

I noticed that comments are outside the core directory, what is the rule to place components...outside the core directory?

I thought that if you want to load modules you had to put them inside an /imports folder? How does it work here?

What is the best way to do multiple subscriptions inside to the composer function. I do in this way up until now:

export const composer = ({context, companyId}, onData) => {
  const {Meteor, Collections} = context();
  const handle1 = Meteor.subscribe('vehicles.list', companyId);
  const handle2 = Meteor.subscribe('companies.single', companyId);
  if (handle1.ready() && handle2.ready()) {
    const vehicles = Collections.Vehicles.find().fetch();
    const company = Collections.Companies.findOne();
    onData(null, {vehicles, company});
  }
};

Or do I have to do something like multiple composers for subscriptions. multiple composers

nevermind.

I tried to use this package in atom with mantra sample.
But have problem when open any file .
Error: ESLint not found, Please install or make sure Atom is getting $PATH correctly

Please help me.

I tried to test, but server don't have module.
Why, So I difficult to manage.

Is it intentional that components and containers have a different directory structure for test files?

client/containers/a.js
client/containers/b.js
client/containers/tests/a.js
client/containers/tests/b.js

client/components/x/index.js
client/components/x/tests/index.js
client/components/y/index.js
client/components/y/tests/index.js

Would it be better to use a consistent directory structure for both? Such as:

client/components/a/index.js
client/components/a/tests/index.js
client/containers/x/index.js
client/containers/x/tests/index.js

or

client/components/a.js
client/components/tests/a.js
client/containers/x.js
client/containers/tests/x.js

I've been going through this, and I wanted to offer some input on a few things.

https://github.com/mantrajs/mantra-sample-blog-app/blob/master/libs/collections.js

I can see the benefit of using import/export in general, but I think it's problematic with Mongo collections, because I use meteor shell quite often to debug and test things, and so now I wouldn't be able to access Posts in the meteor shell. Though maybe this is more an issue for MDG to solve.

https://github.com/mantrajs/mantra-sample-blog-app/blob/master/client/configs/routes.jsx#L11-L41

I've already mentioned this on the Meteor forum, but this is rather intimidating, and IMO is a step backwards from simply being able to do:

FlowRouter.route('/', {
  name: 'posts.list',
  action() {
    mount(MainLayoutCtx, {
      content: () => (<PostList />)
    });
  }
});

FlowRouter.route('/post/:postId', {
  name: 'posts.single',
  action({postId}) {
    mount(MainLayoutCtx, {
      content: () => (<Post postId={postId}/>)
    });
  }
});

Speaking of the above code, why does the content passed to mount have to be a function? With react-layout, we can just do:

ReactLayout.render(MainLayout, {content: <Post postId={postId} />});

So would it not be possible to have the syntax be like this:

mount(MainLayoutCtx, {
  content: <Post postId={postId} />
});

I know Mantra is in a super early stage, but I wanted to provide just a few thoughts.

Thanks!

I have this sample repo that uses an older version of Mantra with mixins for fetching Meteor Data: https://github.com/AdamBrodzinski/react-ive-meteor/blob/master/both/components/Feed/FeedContainer.jsx

I'm trying to port this to Meteor 1.3 and new Mantra and I've opted to go with two composer functions/ One of the arguments of second composer function's subscription is the postIds from the first composer function:

[edited this line to link to a specific commit]

https://github.com/venturecommunism/meteor-taskwarrior-react/blob/41b98734ea1dde21f86d2bb4508fae178dd2e04c/client/core/containers/FeedContainer.jsx#L47

I'm not sure if this depsMapper is the right way to map these but I'm getting no errors yet no React containers are loading https://github.com/venturecommunism/meteor-taskwarrior-react/blob/master/client/core/containers/FeedContainer.jsx#L56

The main point is to prevent overfetching of subscriptions in additional composer functions and to prepare the way to use this 3rd party data sources.

Is this the right track? What's the next step?

Can someone explain
const context = initContext();
And what the context actually entails?

And why it's being passed into composer functions?

I'm starting off focusing on a single module with users and posts features. Is this the correct approach for these files? I'm new to meteor and mantra. Pardon my ignorance.

// client/modules/core/configs/method_stubs/index.js

import users from './users';
import posts from './posts';

export default function (context) {
  users(context);
  posts(context);
}

// client/modules/core/actions/index.js

import users from './users';
import posts from './posts';

export default {
  users,
  posts
};

The firs I am sorry, I known that mantra don't care the module structure in lib, server.
But could you advice to manage them for me?
For example I have 3 module in client A, B, C, so
1.

lib/
   A_collection1
   A_collection2
   B_collection1
...............
server/
   methods/
      A_method1
      A_method2
      B_method1
..................

lib/
   A/
      collection1
      collection2
   B/
      collection1
...............
server/
   A/
      methods/
         method1
         method1
       ..............
   B/
..................

Which one should I choose (1 or 2)?
Thanks for your advice!

You won't have access to the current user ID if you do that.

In server/methods/posts.js, we are importing Posts from /libs/collections.js like this

import {Posts} from '/libs/collections';
...

But /libs/collections.js exports an object like this

export default {
  Posts: new Mongo.Collection('posts')
};

This seems to be a bug in 1.3 beta 4. It will stop working in 1.3 beta 5. Please see this issue

The correct way would be:

export const Posts = new Mongo.Collection('posts')

import Posts from '/libs/collections';

On post/:postId, the post on display is not reactive.

This may be because findOne, used here, does not return a reactive data source. How can we make it reactive?

How do meteor custom packages fit into the mantra paradigm?

Previous suggestions for development of a meteor app include separating code out into component packages. Are there any mantra examples that use package pattern? Or, are packages not recommended?

Excuse me, I tried to find on atom package, but not clear.
What eslint fix/format to use for this.
Thank for your helping.

I noticed you're using the react Babel preset. Shouldn't that allow you to do this or does it not work?

Can / should we have module specific routes? Routes that potentially come with a module.

Really like this new modules approach. great job 👍

Right now it's in the imports folder and nothing is importing it but the app seems to work fine. Does meteor process all stylesheets in the entire file tree regardless of location?

npm ERR! Darwin 15.2.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "testonly"
npm ERR! node v0.12.4
npm ERR! npm  v2.10.1
npm ERR! code ELIFECYCLE
npm ERR! [email protected] testonly: `mocha client/**/tests/**/*.js --compilers js:babel-core/register`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] testonly script 'mocha client/**/tests/**/*.js --compilers js:babel-core/register'.
npm ERR! This is most likely a problem with the mantra-demo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     mocha client/**/tests/**/*.js --compilers js:babel-core/register
npm ERR! You can get their info via:
npm ERR!     npm owner ls mantra-demo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/me/web-dev/Meteor/mantra-sample-blog-app/npm-debug.log

npm-debug.log below

0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'run', 'testonly' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'pretestonly', 'testonly', 'posttestonly' ]
5 info pretestonly [email protected]
6 info testonly [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec testonly script
9 verbose stack Error: [email protected] testonly: `mocha client/**/tests/**/*.js --compilers js:babel-core/register`
9 verbose stack Exit status 2
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
9 verbose stack     at EventEmitter.emit (events.js:110:17)
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
9 verbose stack     at ChildProcess.emit (events.js:110:17)
9 verbose stack     at maybeClose (child_process.js:1015:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd /Users/me/web-dev/Meteor/mantra-sample-blog-app
12 error Darwin 15.2.0
13 error argv "node" "/usr/local/bin/npm" "run" "testonly"
14 error node v0.12.4
15 error npm  v2.10.1
16 error code ELIFECYCLE
17 error [email protected] testonly: `mocha client/**/tests/**/*.js --compilers js:babel-core/register`
17 error Exit status 2
18 error Failed at the [email protected] testonly script 'mocha client/**/tests/**/*.js --compilers js:babel-core/register'.
18 error This is most likely a problem with the mantra-demo package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     mocha client/**/tests/**/*.js --compilers js:babel-core/register
18 error You can get their info via:
18 error     npm owner ls mantra-demo
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

can i use async/await keywork ES7 with mantra and meteor 1.3 ?
i see we have .babelrc file so i try to use async and await but they not compile.
any solution ?

I can't for the life of me get the actions to pass through to the components. The context comes through just fine but when checking the props the actions are always null. Any advice on what to check to see why that is happening?

I have cloned the repo with git and ran npm install, but when i run npm run test i get this:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'test' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'pretest', 'test', 'posttest' ]
5 info pretest [email protected]
6 info test [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec test script
9 verbose stack Error: [email protected] test: `npm run lint && npm run testonly`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:213:16)
9 verbose stack     at EventEmitter.emit (events.js:110:17)
9 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack     at ChildProcess.emit (events.js:110:17)
9 verbose stack     at maybeClose (child_process.js:1015:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd C:\Users\HKOS\bin\webDev\meteor\mantra-sample-blog-app
12 error Windows_NT 6.1.7601
13 error argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "test"
14 error node v0.12.7
15 error npm  v2.11.3
16 error code ELIFECYCLE
17 error [email protected] test: `npm run lint && npm run testonly`
17 error Exit status 1
18 error Failed at the [email protected] test script 'npm run lint && npm run testonly'.
18 error This is most likely a problem with the mantra-demo package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     npm run lint && npm run testonly
18 error You can get their info via:
18 error     npm owner ls mantra-demo
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

When i ran npm install i got:
npm WARN deprecated [email protected]: Consider jsdom-global instead. https://www.npmjs.com/package/jsdom-global

npm-debug.txt

Hey guys I am trying to add multiple collections and don't know the proper syntax for the collections.js file.

I tried separating them with commas and semicolons but I am not 100% familiar with ES6 yet so I was hoping someone could help me.

Also I do not see any schemas defined. Do you guys suggest that or just use check and make sure the fields are there that way?

CSS is compiling fine... Can I use stylus instead?

It does not seem to be picking up files outside of the client folder.. assume this is some standard meteor setting?

It doesn't seem work for me, The server works, but I get errors in the browser. Am I doing something wrong?

Uncaught Error: Cannot find module 'react'require @ install.js:77meteorInstall.client.components.navigations.index.jsx @ index.jsx:21fileEvaluate @ install.js:183require @ install.js:75meteorInstall.client.components.layouts.main.index.jsx @ app.js?hash=71998cf…:11fileEvaluate @ install.js:183require @ install.js:75(anonymous function) @ collections.js:5
router.js:347

There is no route for the path: /Router._notfoundRoute @ router.js:347(anonymous function) @ router.js:535(anonymous function) @ index.js:474nextEnter @ index.js:306page.dispatch @ index.js:312page.replace @ index.js:275self._page.(anonymous function) @ router.js:382page.start @ index.js:168page @ index.js:102Router.initialize @ router.js:391(anonymous function) @ _init.js:9maybeReady @ startup_client.js:26loadingCompleted @ startup_client.js:32

The sample app doesn't take advantage of Meteor's optimistic UI (when saving a post, for example). Would it be worth it to run a simulation of the add post method on the client as well?

Does Mantra discourage using isomorphic definition of Meteor methods? I see on the client side methods stubs are basically identical to server side methods, but they are intentionally duplicated. What's the reasoning behind this?

Right now we don't do eslinting for .jsx.

One we do, we'll get following errors:

/Volumes/data/projects/meteor-samples/mantra-demo/client/components/layouts/main.jsx
   1:8   error  "Navigations" is defined but never used  no-unused-vars
   3:18  error  "content" is defined but never used      no-unused-vars
  11:6   error  "content23" is not defined               no-undef

✖ 3 problems (3 errors, 0 warnings)

Arunodas-MacBook:mantra-demo arunoda$ ./node_modules/.bin/eslint client/components/layouts/main
Arunodas-MacBook:mantra-demo arunoda$
Arunodas-MacBook:mantra-demo arunoda$
Arunodas-MacBook:mantra-demo arunoda$ npm run lint

> [email protected] lint /Volumes/data/projects/meteor-samples/mantra-demo
> eslint ./libs ./client ./server --ext .js --ext .jsx


/Volumes/data/projects/meteor-samples/mantra-demo/client/components/layouts/main.jsx
   1:8   error  "Navigations" is defined but never used  no-unused-vars

/Volumes/data/projects/meteor-samples/mantra-demo/client/components/newpost/index.jsx
  12:1  error  Line 12 exceeds the maximum line length of 80  max-len
  13:1  error  Line 13 exceeds the maximum line length of 80  max-len

/Volumes/data/projects/meteor-samples/mantra-demo/client/configs/routes.jsx
   1:23  error  "withContext" is defined but never used  no-unused-vars
   9:8   error  "PostList" is defined but never used     no-unused-vars
  10:8   error  "Post" is defined but never used         no-unused-vars
  11:8   error  "NewPost" is defined but never used      no-unused-vars

/Volumes/data/projects/meteor-samples/mantra-demo/client/libs/react-app-context.jsx
   6:3   error  The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype  guard-for-in
   8:5   error  The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype  guard-for-in
  14:20  error  "ChildComponent" is defined but never used                                                                  no-unused-vars
  43:20  error  "ChildComponent" is defined but never used                                                                  no-unused-vars

✖ 13 problems (13 errors, 0 warnings)

Somehow, it does not detect react component usage. That's there are no-unsed-vars issue.
Also we don't need to do 80 char limit for jsx. Do we? (That'd be weird then)

I am new to Mantra and Meteor. I'm trying to use 'material-ui' in my components, but have not been successful. Can you help me?

Example:

import React from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';
import RaisedButton from 'material-ui/lib/raised-button';

injectTapEventPlugin();

const Navigation = () => (

    <RaisedButton label="Hello" />

);

export default Navigation;

I just started playing around with mantra and think it is a huge step in the right direction.
What I did was

• meteor add accounts-password
• meteor add accounts-ui
• meteor add thereactivestack:blazetoreact
  and added the following code snippet to client/main.js

   Accounts.ui.config({
     passwordSignupFields: 'USERNAME_AND_OPTIONAL_EMAIL'
   });

then you can add

const LoginButtons = BlazeToReact('loginButtons');

where you want to use it as

<LoginButtons />
It works fine I just have a question concerning loading react several times.
I think it was written that react-runtime should be loaded over npm only.
But adding the meteor package 'blazetoreact' also installed react-runtime as meteor package.
Am I missing something? As said it works fine for me.

I guess some more experienced people are already implementing a better solution for accounts into mantra. So if issue is just closed I am also fine waiting for official solution.

Hi,

I have tried to add some functionality to track current route and change it programatically instead of default FR link.
But I am somehow not passing context correctly to it.
I would expect at least the actions to be passed in from container, but not.
There are some console.logs during app init and than during my navigation render.
https://github.com/ShockiTV/mantra-test
Pointing to correct direction would help a lot.

I noticed that the _id format for colors was in a UUID style. How are you doing this and how can I change it to use the Mongo ObjectId format (56a90a02a8ab459af30cd324) or the Meteor _id format (G7yZxw6vnaY8QZtsg)?

Both Meteor packages React and node_modules React loaded.

I would like to add the following link in my html but I don't see a index.html file in the app. If I were to create one, where would I put that in the app?

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Which is correct?

we have save query like: {_id: id}, {limit: 10} ...
how to send them to container query from server side?

I would like to use aldeed:collection2 to add validations. Where do schemas belong?

If I simply put them in /libs/collections.js, and I have a multitude of collections, I am afraid it would be hard to maintain all schemas.

Edit

just had an idea:

libs
|-- collections
   |-- index.js
   |-- posts.js
   |-- comments.js
   |-- users.js
   ...

libs/collections/index.js

import {Mongo} from 'meteor/mongo';

import Posts from './posts'
import Comments from './comments'
import Users from './users'
...

export default {
  Posts
  Comments
  Users
  ...
}

And define schemas in each /libs/collections/posts.js, /libs/collections/comments.js, ... files.

Hi,
as we are using imports for all stuff anyway, what about migrating to lazy loading ?
That means moving client content into client/imports and loading it from client folder for example
import app from './imports';?

Was this already tried and failed due for example styling not being evaluated as expected ? As Meteor take cares of it by default in global mode.
If that was the case maybe we can simply ignore Meteor and start to use CSS modules with all the pre- and post- processing. I would vote for that - true modules with CSS/SCSS/LESS scoped to that component without need to care where you place that component, as it would have always unique auto-generated hash class.

I have not tried that yet, busy with other projects.
What do you think ?

I try to build this sample on windows 10 npm 5.3.0 and meteor 1.3-modules-beta.5
it failed.

Hey I was just trying to get access to the Accounts object from Meteor (after adding the package), but I wasn' sure how to exactly import it...

Our comments module doesn't have any tests.
See: https://github.com/mantrajs/mantra-sample-blog-app/tree/mantra-modules/client/modules/comments
So, it'd super helpful if someone can write some tests for that.

Follow the testing approach we did for core module.

with error:
E20160205-13:55:58.574(-5) (webapp_server.js:716) Error running template: Error: Meteor code must always run within a Fiber. Try wrapping callbacks that you pass to non-Meteor libraries with Meteor.bindEnvironment.

Arunoda, First of all, tons of thanks for mantrajs. Its superb.

I am starting a new project and I have decided to use Mantra for this. I don't care for reactivity in all situations. For a non-reactive solution, would you recommend the code below? It has worked in my tests.

My Questions:

1. Do I still need "useDeps" in app/containers/post_list.js ?
2. Let's say, user moves away from postlist page to post page, does "compose" call "componentWillUnmount" to destroy the postlist data? What's the best way to make sure that the data persists in the client and when the user comes back to the postList page from post-page, data is not fetched from the server again. Thanks a lot in advance.

import PostList from '../components/postlist.jsx';
import {useDeps, compose, composeAll} from 'mantra-core';

function composer(props, onData) {
  Meteor.call('posts', function (error, posts) {
    if (posts) onData(null, {posts});
  })
};

export default composeAll(
  compose(composer),
  useDeps()
)(PostList);

I've play around with komposer - I'm ok with that, but I do not understand container (actions) fully. for example if you (or anyone) could describe e.g. newpost.js in container directory in one blog post that'd be nice. or maybe one "lifecycle" of one of the "components - containers - actions" cycle

so I cloned this demo but I get those errors in console - though the app is running fine. kinda weird and of course very simple to solve

It's set up to look at ./libs. Isn't it supposed to be ./lib?

Add some custom CSS file and some meta tags in the head.
It's better if we can do this without the help of some Meteor tooling.