These are chat archives for canjs/canjs

29th
Jun 2018
Jeroen Cornelissen
@jeroencornelissen
Jun 29 2018 09:41
@phillipskevin I can’t reproduce it locally, in my test environment it doesn’t work.
locally it “transforms” 127.0.0.1:5500/index.html to 127.0.0.1:5500/test and everything works (127.0.0.1:5500/test/home / 127.0.0.1:5500/test/products).
on the server my “endpoint” is domain.com/test, pushstate transforms to domain.com/test/ but routeUrl creates a link like this: /?page=home.
When I register a route with a default, it’s ok route.register('{page}', { page: 'home' }); or when I update the route manually the links also start working route.data.page = “home”;
Viktor Busko
@Lighttree
Jun 29 2018 11:03
stache.addHelper('i18n', (propKey, helperOptions) => {
    const textNode = document.createTextNode('');

    translationModel.getCachedInstanceByKey(propKey).then((data) => {
        textNode.nodeValue = translationManager.constructor.processProperty(data.value, helperOptions.hash);
    });

    return textNode;
});

Can someone suggest idea how to unit-test stache helpers ? Basically this helper returns textNode that may change (because there is some async stuff happening). Ideally I would like to have something like...

describe('i18n helper test suite', () => {
    test('i18n helper renders text property', () => {
        expect(stache("{{ i18n 'p10001_txt_text_prop_simple_one' }}")().textContent).toBe('First simple test text property');
    });
});

But I'm not sure how to track that stache re-rendered something to get new textContent. I'm using Jest some it might have some specific as well. Maybe there is some good examples of tests for helpers ?

Viktor Busko
@Lighttree
Jun 29 2018 12:47
I think that this is close to what I would like to have:
https://github.com/helpers/handlebars-helpers/blob/master/test/i18n.js
qantourisc
@qantourisc
Jun 29 2018 14:22
Should I be using components or partials for "small" templates with no control ?
Kevin Phillips
@phillipskevin
Jun 29 2018 14:33
@Lighttree what I do in that case is export the function directly
const internationalizationHelper = (propKey, helperOptions) => {
    const textNode = document.createTextNode('');

    translationModel.getCachedInstanceByKey(propKey).then((data) => {
        textNode.nodeValue = translationManager.constructor.processProperty(data.value, helperOptions.hash);
    });

    return textNode;
};

export internationalizationHelper;

stache.addHelper('i18n', internationalizationHelper);
and test everything but that last line
@qantourisc it kind of depends on what it does
if you can "logically" separate it into its own functionality, use a component
if it's going to be used in multiple places, I normally use a component
if it's just a smaller part of a bigger template, then I use partials
qantourisc
@qantourisc
Jun 29 2018 14:42
Performance seems to be equal, I think it's the dynamic rendering + switches / branches that is killing it. I might need to look into template-generation.
It's the typical problem: for row > for column > if column-active > switch-depending-on-data-type loop thing
Kevin Phillips
@phillipskevin
Jun 29 2018 14:55
that is killing it
what do you mean?
qantourisc
@qantourisc
Jun 29 2018 14:58
What I mean is that 80rows render non-instant
10 rows = 130ms on chrome on my pc
Kevin Phillips
@phillipskevin
Jun 29 2018 15:01
the initial render?
or when something changes?
qantourisc
@qantourisc
Jun 29 2018 15:02
yes
Kevin Phillips
@phillipskevin
Jun 29 2018 15:02
ok
what version of canjs are you on?
qantourisc
@qantourisc
Jun 29 2018 15:09
Shamefully old, I tried upgrading once, but I coudn't find the download link, only the require-include-this-from-online-links. Atleast that's what I recall
v2
Been meaning to upgrade
qantourisc
@qantourisc
Jun 29 2018 15:47
ok I downloaded can.all.js from the CDN, didn't update the code ... and it works ?!?
a no
Kevin Phillips
@phillipskevin
Jun 29 2018 15:50
yeah, no
you'll have to go through the migration guide to upgrade to 3.0: https://canjs.com/doc/migrate-3.html
then to 4.0: https://canjs.com/doc/migrate-4.html
qantourisc
@qantourisc
Jun 29 2018 16:03
Migration guide does not covert can.view(url) in a Component ?
So now I first need to obtain the resource, and then define the component ?
Justin Meyer
@justinbmeyer
Jun 29 2018 18:01
@qantourisc you'll need to do the sync XHR call yourself and then pass that to can-stache. It could look like:
function canViewLegacy(url){
  var request = new XMLHttpRequest();
  request.open('GET',url, false);  // `false` makes the request synchronous
  request.send(null);
  return can.stache(request.responseText);
}
but yeah, it's better to somehow asynchronously (via a module loader or some other means) get the template content
qantourisc
@qantourisc
Jun 29 2018 18:04
hmmm you did give me an idea, I could hook this up into my current loader
but that means a lot more typing :D
Atm I have fetch(url).then( component{ ... } )
qantourisc
@qantourisc
Jun 29 2018 18:41
hmmm can-connect is not as ducmented as the old model in terms of setting functions to handle the destroy / created / findAll / ..
hmmm split off
qantourisc
@qantourisc
Jun 29 2018 18:54
At this rate, I will have to hold of the can update for this project as well :(
Justin Meyer
@justinbmeyer
Jun 29 2018 18:59
@qantourisc there's the can-model-legacy project you can use

as far as can-connect, it's documented here: https://canjs.com/doc/can-connect/data/url/url.url.html

Finally, you can provide your own method to totally control how the request is made:

url: {
  resource: "/services/todo",
  getListData: "GET /services/todos",
  getData: function(param){
    return new Promise(function(resolve, reject){
      $.get("/services/todo", {identifier: param.id}).then(resolve, reject);
    });
  }
}
qantourisc
@qantourisc
Jun 29 2018 19:03
The problem I am having is undocumented magic, I found those resources thank you.
is that url the url in a supermap ?
If so the url of a supermap is not really an url or reference to something, but a string that is converted (at some point) to handlers ?
qantourisc
@qantourisc
Jun 29 2018 19:20
import assign from 'can-util/js/assign/assign'; <= not sure how to access this, I don't have import
qantourisc
@qantourisc
Jun 29 2018 19:31
Question: can you even properly use canjs4 without NPM or equivalent ? (Unless I do some hackery on the can.all.js file, to export the modules so I can access them.
Chasen Le Hara
@chasenlehara
Jun 29 2018 19:42
@qantourisc Yeah, check out this section about using CanJS with just a script tag: https://canjs.com/doc/guides/setup.html#Scripttags
The first section talks about using npm, but you could also just load something like https://unpkg.com/can@4/dist/global/can.all.js in a script
When you’re using the script tag, everything will be available at window.can
Our docs will show things like import assign from "can-assign"
And usually all those same variable names are available as properties on window.can, so can.assign is the same thing
qantourisc
@qantourisc
Jun 29 2018 19:46
@chasenlehara Thank you very much, yes much is available, do you happen to know where the utils are accessible from via the script system ?
Chasen Le Hara
@chasenlehara
Jun 29 2018 19:48
They should all be directly on can, so usually whatever the variable name is in the examples (or the last bit of the module name) is the property name
I don’t think we have that fully documented anywhere :/
qantourisc
@qantourisc
Jun 29 2018 19:53
@chasenlehara I cannot find utils / assign I am afraid.
Chasen Le Hara
@chasenlehara
Jun 29 2018 19:59
Oh, you’re right, it’s not there. Let me see what’s going on.
qantourisc
@qantourisc
Jun 29 2018 20:01
Well
it's not exported
Suppose I could also just "copy" the code.
Chasen Le Hara
@chasenlehara
Jun 29 2018 20:02
Yeah, or use Object.assign
But I think this should be in the script.
qantourisc
@qantourisc
Jun 29 2018 20:02
atm I am reading the can.all.js file :p
hmmm module.exports = ns.connect = connect;
Nea not sure how it works ><
Chasen Le Hara
@chasenlehara
Jun 29 2018 20:05
Basically ns references window.can, which is how can.connect gets set up
We’ve moved a bunch of things out of can-util and into their own packages (so can-util/js/assign/assign is now just can-assign), but it looks like in the move we didn’t set namespace.assign
It’s a pretty straightforward fix and I’m working on getting a new release out next week, so I think we’ll fix it soon
qantourisc
@qantourisc
Jun 29 2018 20:07
Nice, for now i'll cheat it
Where should it end up ? can.assign ?
Sorry, I just get a tad unhappy when I meet friction due to magic, by setting extra layers ;)
One mans oil, is another mans glue ;)
Chasen Le Hara
@chasenlehara
Jun 29 2018 20:09
can.assign is right
qantourisc
@qantourisc
Jun 29 2018 20:10
It does only take 2 parameters, I am supprised :D
shim created :D
qantourisc
@qantourisc
Jun 29 2018 20:52
hmmm you can't load stuff with <script id type="text/stache"> in the browser, the browser doesn't fetch the "script".
Chasen Le Hara
@chasenlehara
Jun 29 2018 20:55
If you give it an ID, I think you can use can.stache.from("the-id")
qantourisc
@qantourisc
Jun 29 2018 20:57
@chasenlehara The problem is the browser just doesn't do HTTP request to get said src.
I am loading it outside stache.
Well trying to :D
Chasen Le Hara
@chasenlehara
Jun 29 2018 21:07
I’m a little confused, mind showing an example?
qantourisc
@qantourisc
Jun 29 2018 21:10
https://jsfiddle.net/fb2tos6c/ @chasenlehara it tries to load to javascript, but not the type it doesn't know about
Chasen Le Hara
@chasenlehara
Jun 29 2018 21:12
Ah yeah, gotcha, I’m not sure that’s possible?
qantourisc
@qantourisc
Jun 29 2018 21:12
Well browser doesn't try, so no :D
I was like: i have depency loader, lets add it: denied :D
Chasen Le Hara
@chasenlehara
Jun 29 2018 21:16
Ha, yeah, I guess XHR/fetch is your dependency loader :P
qantourisc
@qantourisc
Jun 29 2018 21:17
some real generic dep-loader would be nice now
or I add this to what I have
hmmm
qantourisc
@qantourisc
Jun 29 2018 21:28
Yep that did the trick, added ~9 lines of code to my loader.
@chasenlehara another one: isFunction, but intresting: https://canjs.com/doc/migrate-3.html it says do NOT use isFunction, but use import.
qantourisc
@qantourisc
Jun 29 2018 22:20
Any reason to use can.ajax over jquery.ajax or any other when you want to use an ajax ?
Chasen Le Hara
@chasenlehara
Jun 29 2018 22:22
If you’re already using jQuery, then I’d just use that; can-ajax is nice when you don’t want to bring in all of jQuery just for some basic XHR stuff
qantourisc
@qantourisc
Jun 29 2018 22:38
I only have jquery because the old canjs used it iirc