canjs/canjs

We CAN build the impossible! https://codepen.io/justinbmeyer/pen/yEGGoK

Christopher Oliphant

@RALifeCoach

except for the one I reference in main

Thomas Sieverding

@Bajix

@justinbmeyer kk. I’ll do that

So you should have system.directories.lib = modules

Justin Meyer

@justinbmeyer

On a high level, I created a behavior that you should just be able to call Todo.getList() and it should do whatever it can ... regardless if the connection is established or not

it should wait until it is

Thomas Sieverding

@Bajix

And then your main should be “{name}/page.players-redesign/player-bio/components/player-bio.js"

Where {name} is package.json name

Ideally though, your main file would be a stache file using done-autorender

@justinbmeyer So essentially the trick would be to use the behavior to prevent any race conditions on findAll

Christopher Oliphant

@RALifeCoach

I don’t have one of those. My html to show the component looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>PGAT</title>
</head>
<body>
<script type="text/javascript" src="/js/vendor/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/pgatour.base.js"></script>
<script type="text/javascript" src="/js/pgatour.eventEmitter.js"></script>
<script type="text/javascript" src="/js/pgatour.baseModule.js"></script>
<script type="text/javascript" src="/js/pgatour.asyncScriptLoader.js"></script>
<script type="text/javascript" src="/js/pgatour.adTimer.js"></script>
<script type="text/javascript" src="/js/pgatour.adGroup.js"></script>
<script type="text/javascript" src="/js/pgatour.ad.js"></script>
<script type="text/javascript" src="/js/pgatour.browserActivityWatcher.js"></script>
<script src="../../../node_modules/steal/steal.js"
        main="modules/page.players-redesign/player-bio/components/player-bio"></script>
</body>
</html>

That runs okay

Thomas Sieverding

@Bajix

You should convert that into a stache file, and make it your main instead

Christopher Oliphant

@RALifeCoach

My package.json now includes this:

  "system": {
    "directories": {
      "lib": "modules"
    },
    "main": "pga-tour/page.players-redesign/player-bio/components/player-bio.js"
  },

But you want me to convert to stache.

Thomas Sieverding

@Bajix

<!DOCTYPE html>
<html>
<head>
    <title>PGAT</title>
</head>
<body>
  <can-import from="./vendor/jquery-1.10.2.min"></can-import>
  <can-import from="./pgatour.base"></can-import>
  <can-import from="./pgatour.eventEmitter"></can-import>
  <can-import from="./pgatour.baseModule"></can-import>
  <can-import from="./pgatour.asyncScriptLoader"></can-import>
  <can-import from="./pgatour.adTimer"></can-import>
  <can-import from="./pgatour.adGroup"></can-import>
  <can-import from="./pgatour.ad"></can-import>
  <can-import from="./pgatour.browserActivityWatcher"></can-import>

  {{#switch env.NODE_ENV}}
    {{#case "production"}}
      <script src="{{joinBase 'node_modules/steal/steal.production.js'}}"  main="acme/index.stache!done-autorender"></script>
    {{/case}}
    {{#default}}
      <script src="/node_modules/steal/steal.js"></script>
    {{/default}}
  {{/switch}}
</body>
</html>

Something like that

You can use can-import to load stylesheets too

This part should refer to itself main="acme/index.stache!done-autorender”

Leath Cooper

@IcculusC

is that better than using steal-css

Thomas Sieverding

@Bajix

@IcculusC steal-css is a plugin

can-import uses plugins ;)

Justin Meyer

@justinbmeyer

@Bajix yes, prevent race conditions, but also do anything else you need. From the outside world, it should look like calling getList like normal

Leath Cooper

@IcculusC

would the behavior of can-import not be different though since you're importing everything at once rather than bundling it with each individual component where i twouldonly be used when that component is active

Thomas Sieverding

@Bajix

@justinbmeyer How does this work if no data matches some of the sets?

Would it try to load from the server regardless?

@IcculusC can-import behaves like require

Leath Cooper

@IcculusC

true

Thomas Sieverding

@Bajix

You’d essentially use can-import to load in all components/helpers being immediately used, as well as things like your main stylesheet that you wouldn’t want as a direct dependency of any components

Leath Cooper

@IcculusC

that makes more sense

Christopher Oliphant

@RALifeCoach

I am still getting the same crash. I have created the file index.stache. I placed it inside the modules folder. I have directories.lib = modules

Thomas Sieverding

@Bajix

My index.stache loads in app using export-as to set it up as my can.route.data instance, my main stylesheet, can/route/pushstate/, and any components immediately being used

Christopher Oliphant

@RALifeCoach

  "system": {
    "directories": {
      "lib": "modules"
    },
    "main": "pga-tour/index.stache"
  },

Thomas Sieverding

@Bajix

You need the done-autorender plugin

  "system": {
    "directories": {
      "lib": "modules"
    },
    "main": "pga-tour/index.stache!done-autorender"
  },

Christopher Oliphant

@RALifeCoach

I think there is some other problem. It still can’t find cfg.main

/git/pgatour-cq-v2/front-end/node_modules/steal-tools/lib/graph/make_graph_with_bundles.js:83
if( Array.isArray(cfg.main) ) {
^

TypeError: Cannot read property 'main' of undefined
at module.exports (/git/pgatour-cq-v2/front-end/node_modules/steal-tools/lib/graph/make_graph_with_bundles.js:83:23)

We haven’t found the magic syntax yet.

Leath Cooper

@IcculusC

looks like it cant' find your package.json at all?

Christopher Oliphant

@RALifeCoach

that’s a possibility

the package json is in the same folder that I’m running the node build.js from

Help??!??

Leath Cooper

@IcculusC

I'm at a loss lol

I haven't tried building naything in production so I hve no idea

Christopher Oliphant

@RALifeCoach

@IcculusC I appreciate your attempts to help.

Leath Cooper

@IcculusC

hey it's a collaborative industry it's how we all learn

Leath Cooper

@IcculusC

http://canjs.github.io/canjs/doc/can-util/js/types/types.html

is that supposed to say "sausage of loose coupling"

definitely never heard that term

Thomas Sieverding

@Bajix

Yea; that should say something more akin to "This is where we Monkey Patch."

Where communities thrive

People

Repo info

Activity