These are chat archives for canjs/canjs

8th
Aug 2016
Christopher Oliphant
@RALifeCoach
Aug 08 2016 10:26
What’s the status of 3.0? Is it stable enough to start using?
How do I get the files for it?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 10:28
@RALifeCoach hi, it is in pre-release you can install it via npm
not ready for production yet
Christopher Oliphant
@RALifeCoach
Aug 08 2016 10:40
When is the estimated date for production readiness? Is it far enough along to start using it?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 10:41
i dont have a precise date but you can start play with it until that
Christopher Oliphant
@RALifeCoach
Aug 08 2016 10:45
What’s the imprecise date? Even a rough estimate?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 10:45
if it is on pre-release it not so far for the stable release :)
Christopher Oliphant
@RALifeCoach
Aug 08 2016 10:46
We have a redesign project with no immediate release date. However, if we use 3.0 it would need to be production ready before we release the redesigned pages.
If I simply use npm install canjs will I get version 3?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 10:51
now it comes in separate libs http://canjs.github.io/canjs/
Christopher Oliphant
@RALifeCoach
Aug 08 2016 10:52
what would be the npm command to install canjs 3.0?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 10:52
you have all the commands in the docs
Christopher Oliphant
@RALifeCoach
Aug 08 2016 10:52
I am getting a 404 on the docs
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 10:53
I can see it
404 with npm install?
Christopher Oliphant
@RALifeCoach
Aug 08 2016 10:53
from the download other versions button
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 10:55
you are looking for the can 3.0 why other version?
Christopher Oliphant
@RALifeCoach
Aug 08 2016 10:56
I went to the old page looking for the 3.0 version. You have now given me the correct url.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 10:56
ok :)
Christopher Oliphant
@RALifeCoach
Aug 08 2016 10:56
You might want to update the link from the old site.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 10:56
yes thank you
Christopher Oliphant
@RALifeCoach
Aug 08 2016 13:02
As usual, I need a little help getting started.
Here is my html
<!DOCTYPE html>
<html>
<head>
    <title>PGAT</title>
</head>
<body>
<script src="../../../node_modules/steal/steal.js" main="modules/page.players-redesign/player-bio/player-bio"></script>

<section class="clearfix">
    <div class="player-bio">
    </div>
</section>

</body>
</html>
and here is my module
import Component from 'can-component';
import Map from 'can-map';
import $ from 'jquery';
import stache from 'can-stache';
import template from './template-player-bio.stache!';

const PlayerBioViewModel = Map.extend({

});

export default Component.extend({
    tag: 'pgat-player-bio',
    template,
    viewModel: PlayerBioViewModel,
    events: {
        inserted: function () {
            console.log('here and here');
        }
    }
});

$(document.body).append(stache('<pgat-player-bio></pgat-player-bio>'));
I am getting an error trying to load the template. The error is, “404 localhost:8090/stache.js (Not Found)"
Christopher Oliphant
@RALifeCoach
Aug 08 2016 13:13
@cherifGsoul any suggestions? Do I need a stealconfig file?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 13:16
you have can-stache installed?
Christopher Oliphant
@RALifeCoach
Aug 08 2016 13:37
yes
If I change import template from './player-bio.stache!’; to import template from './player-bio.stache!can-stache’; I stop getting error, but it stops reading the JS file
Christopher Oliphant
@RALifeCoach
Aug 08 2016 13:46
It does read the JS file, but doesn’t execute it
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 13:47
Ok I will look into that this evening
try to use commonJS modules
Christopher Oliphant
@RALifeCoach
Aug 08 2016 13:47
okay
I was trying to use steal and ES6
Can I use can 3.0 and not use steal?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 13:50
maybe for some packages but not all look at the dist folders
Christopher Oliphant
@RALifeCoach
Aug 08 2016 13:51
why would I try to use commonJS modules?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 13:51
canjs 3.0 is written in commonjs
maybe it works well like this for now
Christopher Oliphant
@RALifeCoach
Aug 08 2016 13:55
is there someone who can help me now? (I know you all have full time jobs as well as working on CanJS.)
It seems that working with CanJS is now my full time job.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 13:56
what kind of help? :)
Christopher Oliphant
@RALifeCoach
Aug 08 2016 13:56
getting this very simple example to run
I don’t know commonJS and I would prefer not to have to learn it
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 13:57
it's plain javascript
nothing more
just instead of import use require
like in the docs
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:11
I switched my code from es6 using imports to be standard js with require. It is still not executing the code. The load works when I specify "system": { "ext": { "stache": "can-stache" } }, in package.json
But the code doesn’t run.
If I do not have the ext in package then it generates the state.js file not found
stache.js
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:26
@RALifeCoach I did just this
var stache = require('can-stache');
console.log(stache);
I can see the stache object in the console
even with ES6 it work fine
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:27
please show all of what you did.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:27
I will put it on a branch
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:28
I need to see the invoking html and the module that you had you code in, the package json file, etc. Thanks
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:29
ok we will go step by step is the first time with can 3 for me too :)
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:34
sorry I didnt ignore node_modules
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:35
np
I am working along side you
I commented out everything except one console.log
Now I am adding lines back in one at a time
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:36
package.json has nothing complicated
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:36
yes
now require a stache template
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:36
ok
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:38
I have everything back in except for the template
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:38
what you mean?
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:38
var Component = require('can-component');
var Map = require('can-map');
var $ = require('jquery');
var stache = require('can-stache');
// var template = require('./player-bio.stache!');
//
var PlayerBioViewModel = Map.extend({

});

console.log('ajhgjasgjahsgjhagshjgas');
Component.extend({
    tag: 'pgat-player-bio',
    template: stache('<div>Hello World</div>'),
    viewModel: PlayerBioViewModel,
    events: {
        inserted: function () {
            console.log('here and here');
        }
    }
});

$(document.body).append(stache('<pgat-player-bio></pgat-player-bio>'));
when I uncomment the template line - the code no longer runs
with the template line commented out the component loads and the cone.log values are shown
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:40
just // var template = require('./player-bio.stache');
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:41
yes - commented out everything works - uncommented nothing works
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:41
I mean var template = require('./player-bio.stache');
without the "!"
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:42
the ! prevents steal from adding .js
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:44
yes I have the same error now
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:45
now add that section to the package.json
  "system": {
    "ext": {
      "stache": "can-stache"
    }
  },
and put the ! back in
then you will no errors and no output
not even the console.log output
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:46
yes
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:47
do I need to revert to 2.3? or can this be diagnosed fairly quickly?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:47
I told you is not ready for production :)
for production use 2.3 for now
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:49
okay - we will go back to 2.3
thanks for your help
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:49
you are welcome
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:49
can you please let me know when this is resolved
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:49
ok n
np
@RALifeCoach it is resolved
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:54
wow, that was amazing!
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:54
install this plugin
Christopher Oliphant
@RALifeCoach
Aug 08 2016 14:54
npm install steal-stache?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 14:54
yes like in the docs in the repo
npm install steal-stache --save
I updated can-playground
Christopher Oliphant
@RALifeCoach
Aug 08 2016 15:00
Thanks - my code is running now
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 08 2016 15:00
no problem
Sunil George
@georgesunil81
Aug 08 2016 15:38
A quick question - I want to do a stache {{#if helper arg1 arg2}}{{/if}}, how do I do it syntaxwise?
For example -
{{#if isLicenseExpired visitDate expiration}}<p>Expired</p>{{/if}}
Christopher Oliphant
@RALifeCoach
Aug 08 2016 15:39
{{#if helper(arg1, arg2)}}{{/if}}
Sunil George
@georgesunil81
Aug 08 2016 15:39
Ah! That is what I was missing, let me try that.
Thanks @RALifeCoach
Christopher Oliphant
@RALifeCoach
Aug 08 2016 15:40
You’re welcome
Sunil George
@georgesunil81
Aug 08 2016 15:41
Yes, it worked. Thanks @RALifeCoach for the quick help.
Leath Cooper
@IcculusC
Aug 08 2016 17:44
o/
anyone have any insight on what's going on here canjs/can-component#27
Christopher Oliphant
@RALifeCoach
Aug 08 2016 21:06
Hi all. In 2.3 I could reference this.element.attr. In 3.0 I am getting an error. What’s different in 3.0?
Christopher Oliphant
@RALifeCoach
Aug 08 2016 21:22
In 3.0 I can use $(this.element).find, but not $(this.element).attr
Ignore the last comment $(this.element).attr works