mantrajs / meteor-mantra-kickstarter Goto Github PK
View Code? Open in Web Editor NEWKickstart your meteor mantra development
License: MIT License
Kickstart your meteor mantra development
License: MIT License
What is role of Astronomy Classes in Mantra? It seems limited to defining a schema for validation. Where were are the classes and methods invoked (e.g. Actions, Containers, Components etc.).
Hi,
These are my primary findings while working with the Mantra Kickstarter package during last week:
Enjoy your weekend,
Sander
In client/modules/_colors/components/colors/_single.jsx there is a function deleteRecord
What is the appropriate way to use the same function or other functions in the collections view?
When I run the kickstarter in 1.3 beta 8:
I get
Error: The "collection" property has to be an instance of the "Mongo.Collection" in the "_color" class
If I pull _colors from collections.js and use directly in colors.js, the error goes away.
import {Mongo} from 'meteor/mongo';
var _colors = new Mongo.Collection('_colors')
const Model = Astro.Class({
name: '_color',
collection: _colors,
Of course when I go test it, more things are broken, like method '.find' not found. But I'm not sure if this is an Astronomy or Meteor 1.3 problem.
Where is the email
property coming from in the navbar, see this
I don't see any container for this component.
I tried to fix it by relative paths but still no luck :( .
I cloned the correct version of the repo, ran npm install, and then started meteor. The app starts up fine, but the browser is blank with these two errors in the console.
Cannot find module 'react-simple-di'
There is no route for the path: /
I assume this might be some sort of module issue. I am still in the process of learning how to use modules. The mantra sample blog app works fine for me. Any ideas on what might be going wrong? Thanks!
I add Accounts.onCreateUser hook in server/main.js, but it never be triggered.
I can see that new user added into database but without onCreateUser logic applied, even server console didn't show anything. Here is code I added on main.js
Accounts.onCreateUser(function(options, user) {
console.log("server on create user triggered");
if (options.profile)
user.profile = options.profile;
// If this is the first user going into the database, make them an admin
if (Meteor.users.find().count() === 0)
user.admin = true;
return user;
});
Anything I am doing wrong or I am missing at here?
Hi,
When I'm running the app, I get a blank screen in the browser and the console complains:
'There is no route for the path: /'
When I uncollapse this message, this backtrace appears:
Router.prototype._notfoundRoute() kadira_flow-router.js:2206 Router.prototype._updateCallbacks/<() kadira_flow-router.js:2394 [3]</</Route.prototype.middleware/<() kadira_flow-router.js:607 nextEnter() kadira_flow-router.js:439 [3]</</page.dispatch() kadira_flow-router.js:445 [3]</</page.replace() kadira_flow-router.js:408 Router.prototype.initialize/</self._page[fnName]() kadira_flow-router.js:2241 [3]</</page.start() kadira_flow-router.js:301 page() kadira_flow-router.js:235 Router.prototype.initialize() kadira_flow-router.js:2250 <anonymous> kadira_flow-router.js:2691 maybeReady() meteor.js:825 loadingCompleted() meteor.js:831
Note that I experience the same problem with the 'Impossible' app from Ken Roger's new book.
So this must be some general problem related to the environment rather than the app.
Anybody any ideas?
TIA, Guido
In the read me it says there is pagination, so I'm looking through the codebase to find it, but i can seem to find it, can someone point me in the right direction?
Forgive me if this is the wrong place to ask this question, but I'm trying to figure out the best way to have a save button appear on rows that have been modified. Right now I have something like the following:
{parts.map(part => {
debugger;
const saveButton = part.isModified() ? (
<Col md={1}>
<Button onClick={this.savePart.bind(this)} bsStyle="primary" type="button"><i className="fa fa-save" /></Button>
</Col>
) : '';
return (
<Row key={part._id}>
<Col md={3}>
<FormGroup>
<FormControl ref="theme" type="text" placeholder="Theme" value={part.theme} onChange={this.changeField.bind(this, 'theme', part)} />
</FormGroup>
</Col>
// More fields here//
{saveButton}
</Row>
in my changeField event handler I'm doing this:
changeField(field, obj, event){
obj[field]=event.currentTarget.value;
}
The problem is that the component is not getting re rendered when a field is changed, so the saveButton never appears. Should I be doing this differently?
How did you get the bootstraps functions to be available in client? I tried swapping out the flatly template by another bootstrap theme. The components render nicely, but the bootstrap js functions are not triggered (i.e. dropdown). Can't figure out how you did that.
Is there a proper way to setup the dochead for mantra? I'm using https://github.com/kadirahq/meteor-dochead but I'm wondering where to place it in the app. Should I make a separate file and import it into index or is there a better way to organize it? Thanks! Great repo by the way!
I just find out Atellier which looks pretty cool, and as it became more and more accepted as a good practice to develop, test, and document individuals components outside the context of the main application but instead in a playground environment, I think something like Atellier would be good to have in a Mantra starter kit.
It sure is not easy to run different servers in a clean way with the current Meteor build-tool but since you already have done that for Graph_i_ql (I haven’t looked at the implementation), I’m putting Atellier on the table.
Hi,
When running npm test
I get the error message below. It seems to be caused by
mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register
which is triggered by npm run testonly
. Anyone else having this problem?
I have updated node and npm, but this has not resolved the issue. I also have tried a fresh kickstarter clone, same results.
...
41 passing (705ms)
9 pending
1 failing
1) _template.components.template should display the name title:
ReferenceError: title is not defined
at _class.render (template.jsx:10:14)
at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules/react/lib/ReactCompositeComponent.js:587:34)
at [object Object].ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:220:30)
at [object Object].wrapper [as mountComponent] (node_modules/react/lib/ReactPerf.js:66:21)
at [object Object].ReactShallowRenderer._render (node_modules/react/lib/ReactTestUtils.js:366:14)
at _batchedRender (node_modules/react/lib/ReactTestUtils.js:348:12)
at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:136:20)
at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:62:19)
at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:94:20)
at [object Object].ReactShallowRenderer.render (node_modules/react/lib/ReactTestUtils.js:343:16)
at [object Object].render (node_modules/enzyme/build/react-compat.js:146:39)
at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:81:21)
at shallow (node_modules/enzyme/build/shallow.js:21:10)
at Context.<anonymous> (template.js:10:16)
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/Cellar/node/5.9.0/bin/node" "/usr/local/bin/npm" "run" "testonly"
npm ERR! node v5.9.0
npm ERR! npm v3.7.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] testonly: `mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] testonly script 'mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, 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 .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs mantra-demo
npm ERR! Or if that isn't available, 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/Sander/Desktop/temp/meteor-mantra-kickstarter/npm-debug.log
Hi,
I'd suggest to include jQuery from npm instead of using the meteor package. I see it's now included by default in the meteor package list.
If I want to adhere to the 'pure' Mantra specs, I should now do:
import { Meteor } from 'meteor';
import { jQuery } from 'meteor/jquery';
I think the preferred Mantra way would be:
import { jQuery } from 'jquery';
I have not been able to test this yet. But I think this approach is much cleaner for isolated component development/testing.
Kind regards,
Sander
Hi,
I am facing below issue after I upgrade to Meteor 1.3 release through meteor update.
=> Started proxy.
=> Started MongoDB.
Unable to resolve some modules:
".dist/browser.js" in /home/user/workspace/meteor-mantra-kickstarter/node_modules/react-komposer/package.json (web.browser)
=> Started your app.
=> App running at: http://localhost:3000/
In react-komposer/package.json it is defined as :
"browser": ".dist/browser.js",
"browserify": "12.x.x",
What can be the issue?
What would be the preferred way of making a Mantra-site indexable by search engines? Is adding the spiderable package enough?
Hi,
In the Astro model definition for the color collection the behaviors module is commented out. Enabling it doesn't work.
There is no error message in the console, but the fields and values don't appear in MongoDb upon inserting new colors. Any clue how to enable this timestamp behaviors module?
Sander
Where did you obtained the boostrap components for the Flatly theme?
Just curious: why both in this kickstarter? When to choose one over the other?
Why not add meteor-webpack to this kickstarter, now that it has reached 1.0? As it's compatible with 1.3
, we would only benefit from it :)
Hi,
According to mantra specs : If you need to redirect upon some condition (for example user is not authorized) use an action instead of route options like FlowRouter’s triggersEnter. Call the action from component or container’s composer function.
In colors module redirection is commented out as below:
meteor-mantra-kickstarter/client/modules/_colors/composers/colors/single.jsx
if (Meteor.subscribe('_colors.single', _id).ready()) {
const record = Collections._colors.findOne(_id);
if (record) {
onData(null, {record, error});
} else {
// FlowRouter.go('/colors');
}
}
Please help to figure out what is the proper way to redirect inside composers.
Thank you.
on the following error:
W20160205-17:02:57.283(9)? (STDERR) Error: The "collection" property has to be an instance of the "Mongo.Collection" in the "color" class
W20160205-17:02:57.283(9)? (STDERR) at Function.checkSchemaDefinition (packages/jagi_astronomy/lib/modules/storage/init_definition.js:227:1)
W20160205-17:02:57.283(9)? (STDERR) at Function.onInitDefinitionStorage (packages/jagi_astronomy/lib/modules/storage/init_definition.js:248:1)
W20160205-17:02:57.283(9)? (STDERR) at packages/jagi_astronomy/lib/modules/core/classes.js:27:1
W20160205-17:02:57.284(9)? (STDERR) at packages/jagi_astronomy/lib/modules/core/events.js:68:1
W20160205-17:02:57.284(9)? (STDERR) at Array.forEach (packages/es5-shim/.npm/package/node_modules/es5-shim/es5-shim.js:419:1)
W20160205-17:02:57.284(9)? (STDERR) at Function..each..forEach (packages/underscore/underscore.js:105:1)
W20160205-17:02:57.284(9)? (STDERR) at Object..extend.each (packages/jagi_astronomy/lib/modules/core/events.js:64:1)
W20160205-17:02:57.284(9)? (STDERR) at Function.methods.extend (packages/jagi_astronomy/lib/modules/core/classes.js:26:1)
W20160205-17:02:57.285(9)? (STDERR) at Object.Astro.createClass.Astro.Class (packages/jagi_astronomy/lib/modules/core/classes.js:80:1)
W20160205-17:02:57.285(9)? (STDERR) at meteorInstall.lib.color.js (lib/color.js:2:21)
I am getting TypeError: Collections is undefined on meteor 13 beta 11.
Collections inside composers can not been identified.
export const collectionComposer = ({context}, onData) => {
const {Meteor, Collections} = context();
if (Meteor.subscribe('_colors.list').ready()) {
const collection = Collections._colors.find().fetch();
onData(null, {collection});
}
};
What can be the issue?
In order to make an ecosystem of general-use component modules, it seems likely that you'd soon need a way to connect to an activity stream that logs and notifies updates from a variety of modules. And you would want content to be indexed so that they are available in a unified search.
Looking into activity streams on node, I came across activitystrea.ms API (https://www.npmjs.com/package/activitystrea.ms), so there's already a standard data structure for this. There is also Activity Streams App (https://www.npmjs.com/package/activitystreams), which uses Neo4J and Redis.
Then there's unified search, a necessity in many use cases, so somehow the modules would need to define how to index fields for search. Is there away to attach onto collections, and should module authors be encouraged to specify search index definitions?
Both of these would require a bit more from a module author, so I'd suggest that both Activity Steam and Search Indexing it could be optional.
I have been considering the idea of a system with goals similar to Mantra's (and perhaps it will itself be a Mantra app), but I'm still writing out the proposed specs before I post it.
When running ESLint (as provided in kickstarter), I'm getting this error a lot:
error Parsing error: 'import' and 'export' may appear only with 'sourceType: module'
Is someone else also seeing these errors?
I have searched online, but cannot find a solution. Some similar(?) issue reports point to Babel version and parameters changed from babel 5 to 6.
Would love to use ESLint for Mantra, but it isn't helping me this way :).
The package.json for this repo had two loaders: raw-loader
and 'style-loader' aren't those for Webpack? Also is the jsdom
package actually used? These aren't critical, just trying to clean my clone up and not have any stuff that's not needed. If they aren't - may want to consider removing them from the repo.
Thanks
Hi,
Not sure if I'm mistaken about this, but take the comments module for example.
action/comments.js
sets LocalState for errors in both the Meteor.call
for posts.createComment
as well as outside the Meteor.call
.
posts.createComment
, the error isn't displayed.action/comments.js
before the Meteor.call
, it is.return clearErrors
in the corresponding container, the error set inside the Meteor.call
callback is displayed, but is not cleared when you navigate to another page and then come back, it will only disappear if you hard reload.Would this be because Meteor.call
is asynchronous? What would be the best way of handling error (and success) messages set in the Meteor.call
callback?
When deleting a user, the following Tracker error shows up in the console:
Exception from Tracker recompute function:
debug.js:41 TypeError: Cannot read property 'profile' of undefined
at singleComposer (single.jsx:13)
at index.js:221
at Tracker.Computation._compute (tracker.js:323)
at Tracker.Computation._recompute (tracker.js:342)
at Object.Tracker._runFlush (tracker.js:481)
at Object.Tracker.flush (tracker.js:441)
at Router._invalidateTracker (router.js:489)
at afterAllTriggersRan (router.js:101)
at Object.Triggers.runTriggers (triggers.js:89)
at route._actionHandle (router.js:105)
Maybe because of react jsx, the call of a Astro Class methods from jsx does not have the "record" context, so the (current) record data is not usable:
see: /users
The collection should show a list of email addresses for the users collection.
No email address is shown, because the {record.firstEmail()} (from jsx) will call
return _.get(this, 'emails[0].address', null);
but "this" is not the expected "this" context for the record, its the window context of the browser
As mantra's mission is dedicated to modularity and high maintainability, it feels strange that all styles in the app are locked in a big old fashioned centralized .css.
I changed that for Radium which I didn't know and it works like a charm - just wrap the default layout and then you get clever inline styles wherever you want in the app.
export default class extends React.Component {
render() {
const styles = {
myfavoritebutton: {
color-background: 'fuschia'
}
};
etc.
then :
<Button style={styles.myfavoritebutton}></Button>
There are plenty of other solutions which I didn't try - this one appearing to be the most popular.
I am getting this error while changing just (any) the UI text in Profile component https://github.com/mantrajs/meteor-mantra-kickstarter/blob/develop/client/modules/app/components/AccountProfile/Wrapper.jsx
invariant.js:45Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of
_class``
Works in Incognito or after clearing cache. Any idea how can I resolve this please?
reproduction
modules.js?hash=bfe3e37…:23612 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of _class
.
What's would be the preferred way for implementing LESS support? Should I use the meteor package, or a NPM package with some config?
If NPM is preferred, how should I configure this?
Hi,
This isn't exactly related to what is currently in the repo, but as authentication and profile/accounts pages are partially implemented and stubbed out, this seems like it'll be relevant later.
I've been building out the profile page, but when a logout is triggered, just before the re-route, it raises Tracker recompute errors when the user data is suddenly missing.
Is there a graceful way of handling this, or is the only way to just null test the user record whereever it is used?
Thanks
I am working on a new 0.3 version. It is a rather significant refactoring effort, I simplified a lot of things and also started using kadira's react story book. I've been long eager to put redux in place and if it makes sense at this point also webpack.
I also made some progress with graphql and lokka for pagination which I think is a pretty cool way to address publishing data which not necessarily needs to be reactive.
I've been working on a personal project with this kickstarter package. I think the _colors module is a great example module, but this kickstarter is not intended as a sample project. It is intended to kickstart new mantra projects. I now need to manually remove it before actually starting to write some code.
_Can we move the colors module to a kickstarter example repo or simply drop it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.