cjsauer / meteor-fresh Goto Github PK

When a package is loaded, all of it's Less files are compiled and sent to the client. This forces the rules to be applied to every template/layout across all packages. It's necessary to scope these rules on a per template or layout basis so that the rules only apply exactly where you mean them to be.

For example:

@import (reference) url('/packages/app-bootstrap/theme.bootstrap.less');

#homepage {
  h1.fresh {
    margin-top: 2em;
    text-align: center;
    font-size: 6em;
    color: @gray-light;
  }
}

and then in a template:

<template name="home">
  <div id="homepage">  
    <div class="row">
      <h1 class="fresh">Enjoy your fresh start.</h1>
    </div>
  </div>
</template>

Now these CSS rules will only be applied to that specific template. The same applies to layouts. For example, you might scope the app to the rule #app and wrap your layout in <div id="app"> tags. You might scope your admin layout rules within #admin and wrap your admin template with <div id="admin" tags. Now you can have separate rules for both layouts.

This also requires that we don't define layout: 'layout' globally within Iron Router, but on a per-route basis. Otherwise the template used as the layout will depend on package load order, which isn't expected behavior. This could be easily solved using route groups to keep things DRY.

For example:

api.use('iron:router');

needs to become:

api.use('iron:[email protected]');

All atmosphere packages need to be explicit in this way

Bootstrap version 3.3.5 has been released. I need to update the app:bootstrap package from v3.3.4

I will probably do this tomorrow but it would be cool to use the yeoman generator in stead of manually having to remove the .git folder

Reminder for myself

Since this is package-based, you should include package-kitchen. It lets you easily add packages by just going to http://localhost:3000/kitchen. I've found it much more usable than meteor create --package in my package-based app.

Upon starting up the app and navigating to the homepage, the following error is logged:

Exception in setTimeout callback: TypeError: Cannot read property 'match' of undefined
    at translateUrl (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:2780:24)
    at toSockjsUrl (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:2830:10)
    at _.extend._launchConnection (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:2708:30)
    at new LivedataTest.ClientStream (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:2582:8)
    at new Connection (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:3522:20)
    at Object.DDP.connect (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:5090:13)
    at http://localhost:3000/packages/sanjo_jasmine.js?46996959cf65cb76c4b8a9c4a65eaf702d790e8a:4236:35
    at _.extend.withValue (http://localhost:3000/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf:955:17)
    at withoutInvocation (http://localhost:3000/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf:435:45)
    at Meteor.bindEnvironment (http://localhost:3000/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf:983:22)

By importing in this way (in home.less for example):

@import url('/packages/app-bootstrap/theme.bootstrap.less');

we are accidentally including bootstrap and theme styles every single import. The workaround is this:

@import (reference) url('/packages/app-bootstrap/theme.bootstrap.less');

In this way we get the variables only without actually including the styles again.