These are chat archives for canjs/canjs

20th
Jun 2018
AntonProkofyev
@AntonProkofyev
Jun 20 2018 10:42

hello every one. I have a problem with combining <content> and <can-slot>
I have <innerComponent> which template is just <content /> so i can use it like

<innerComponent>
    any content
</innerComponent>

i have <outerComponent> which template is something like this

some content 
<innerComponent>
    <can-slot name="name">
</innerComponent>

and i would like to use it like

<outerComponent>
    <can-template name="name">
        some custom content
    </can-template>  
</outerComponent>

but it doesn't work. probably because can connect <can-slot name="name"> with inner component.
so the question is is it possible to do something like this at all?

AntonProkofyev
@AntonProkofyev
Jun 20 2018 10:49
is it possible to customize content of nested components from outside ?
zhan ishzhanov
@janat08
Jun 20 2018 11:02
is this syntax supposed to work
'./appClient.js#?~platform.isNode', as it will throw error with platform package not existing
also neither global nor window can be used to assign objects into console
window.sdf = 1 is undefined in window
zhan ishzhanov
@janat08
Jun 20 2018 11:16
and neither require nor import works in console
Hamelina
@Hamelina
Jun 20 2018 13:10
Hi everyone, I am following this tutorial : https://canjs.com/doc/guides/chat.html and when I try to build a route between 2 pages, I got the following warning : ChatAppView:8: Unable to find helper "routeUrl". I've been searching for a moment now and still can't figure it out.
indexHtml.png
indexJs.png
warning.png
zhan ishzhanov
@janat08
Jun 20 2018 13:20
i imagine import 'can-stache-route-helpers'; is mising
Hamelina
@Hamelina
Jun 20 2018 13:37
it seems like it doesn't recognize the module neither :/
Kevin Phillips
@phillipskevin
Jun 20 2018 14:23
you'll need to install it separately if you're using the individual packages
Viktor Busko
@Lighttree
Jun 20 2018 14:25

Hi guys, maybe someone know is how to handle async operations in helpers ?
I have i18n helper that should read values from local-storage-cache.
https://canjs.com/doc/can-connect/data/localstorage-cache/localstorage-cache.getData.html

function getCachedTranslationProperty(name) {
    return i18nModel.connection.cacheConnection.getData({
        name
    }).then(data => data.value);
}

getData returns <Promise> so I can't do something like:

stache.registerHelper('i18n', (propKey, helperOptions) => {
    return getCachedTranslationProperty(propKey);
});

Because it will return me Promise, while I need resolved value.
Basically I need something like this:

stache.registerHelper('i18n', async (propKey, helperOptions) => {
    return await getCachedTranslationProperty(propKey);
});

maybe someone have ideas how to solve this ?

Kevin Phillips
@phillipskevin
Jun 20 2018 14:50
Can you return an observable?
Viktor Busko
@Lighttree
Jun 20 2018 14:51
@phillipskevin I was thinking about this, so it will update itself after right ? But I'm not sure about performance impact. Basically it means that all my text props will be observable.
Kevin Phillips
@phillipskevin
Jun 20 2018 14:51
stache.registerHelper('i18n', async (propKey, helperOptions) => {
    const translatedValue = new SimpleObservable("");
    getCachedTranslationProperty(propKey)
        .then((val) => {
            translatedValue.set(val);
        });
    return translatedValue;
});
yeah, it might not be great
Viktor Busko
@Lighttree
Jun 20 2018 14:51
yeah exactly
Ideal solution in my case is do sync call to localStorage, because my props should be there already.
In case of localStorage it is possible I guess, but if I change it to memory-cache I won't have any browser api to do this )
Hamelina
@Hamelina
Jun 20 2018 15:06
@phillipskevin what do you mean by that ?
@janat08 @phillipskevin thanks
Kevin Phillips
@phillipskevin
Jun 20 2018 15:07
you'll need to run npm install can-stache-route-helpers --save
in your terminal / command prompt
Viktor Busko
@Lighttree
Jun 20 2018 15:08
@phillipskevin it starts eating memory as hell and hang browser (with Observable) :D I guess some issue that I need to find :)
Kevin Phillips
@phillipskevin
Jun 20 2018 15:23
how many SimpleObservables does it create?
if you do it that way
Viktor Busko
@Lighttree
Jun 20 2018 15:24
stache.addHelper('i18n', (propKey, helperOptions) => {
    propKey = propKey.isComputed ? propKey() : propKey;
    const processedProp = new SimpleObservable('');

    getCachedTranslationProperty(propKey).then((rawProp) => {
        canReflect.setValue(processedProp, rawProp);
        console.log(canReflect.getValue(processedProp));
    });

    console.log(canReflect.getValue(processedProp));
});
This starts infinite loop logging me empty and fulfilled values.
how many SimpleObservables does it create?
I'm not sure how to check this, I have 5 helpers on the page, so I expect 5
Kevin Phillips
@phillipskevin
Jun 20 2018 15:36
just put like a console.count("SimpleObservable") in that code
where you create the new SimpleObservable
why are you calling canReflect.getValue ?
stache will do that for you
console.log(canReflect.getValue(processedProp)); -> return processedProp;
Viktor Busko
@Lighttree
Jun 20 2018 15:38
Well I'm calling canReflect because documentatioin says so :smile:
https://v3.canjs.com/doc/can-simple-observable.html
Ok, let me check
Kevin Phillips
@phillipskevin
Jun 20 2018 15:40
ok, you only need to do that if you need to use the value in your JavaScript
if you're just using the value in your template, can-stache will do this for you
Viktor Busko
@Lighttree
Jun 20 2018 15:45
stache.addHelper('i18n', (propKey, helperOptions) => {
    propKey = propKey.isComputed ? propKey() : propKey;
    let processedProp = new SimpleObservable('prop');
    console.count('SimpleObservable');

    getCachedTranslationProperty(propKey).then((rawProp) => {
        processedProp(rawProp);
    });

    return processedProp();
});
Is this approach correct ? ) Because processedProp - function so I can't just return processedProp it just shows nothing on UI then.
Anyway with this code infinite loop :(
and thousands 'SimpleObservable' yes
SimpleObservable: 27262
SimpleObservable: 27263
Viktor Busko
@Lighttree
Jun 20 2018 15:52
stache.addHelper('i18n', (propKey, helperOptions) => {
    propKey = propKey.isComputed ? propKey() : propKey;
    let processedProp = new SimpleObservable('prop');
    console.count('SimpleObservable');

    setTimeout(() => {
        processedProp('NEW PROP !');
    }, 1000);

    return processedProp();
});
If I add setTimeout same stuff happens :(
Kevin Phillips
@phillipskevin
Jun 20 2018 15:52
I'm trying it out
Kevin Phillips
@phillipskevin
Jun 20 2018 16:01
ok... I would do this without an observable
stache.addHelper('i18n', (key) => {
  var textNode = document.createTextNode(key);
  console.count("i18n");

  setTimeout(() => {
    textNode.nodeValue = `${key}!!!`;
  }, 2000);

  return textNode;
});
Viktor Busko
@Lighttree
Jun 20 2018 16:01
hah ! nice )
Kevin Phillips
@phillipskevin
Jun 20 2018 16:02
should be much faster
Viktor Busko
@Lighttree
Jun 20 2018 16:06
Yeah it works, sweet. Thanks.
Kevin Phillips
@phillipskevin
Jun 20 2018 16:07
no problem
Viktor Busko
@Lighttree
Jun 20 2018 17:48

https://canjs.com/doc/can-connect/data/callbacks/callbacks.html

Is it possible to configure connection outside place where it is defined?
For example I would like to add callback to some connection in different place. In my case with translations I need to call some logic only when data returned from the server and cache got something. Seems that callbacks should help with this.

Nico R.
@nriesco
Jun 20 2018 18:25
stache.registerHelper('i18n', async (propKey, helperOptions) => {
    const translatedValue = new SimpleObservable("");
    getCachedTranslationProperty(propKey)
        .then((val) => {
            translatedValue.set(val);
        });
    return translatedValue;
});

@phillipskevin does async/await work with donejs/canjs 3 helpers? I use nodejs 8 so it will be supported at that level but not sure if donejs and the helpers have special requirements

Thanks

zhan ishzhanov
@janat08
Jun 20 2018 19:30
is this syntax supposed to work
'./appClient.js#?~platform.isNode', as it will throw error with platform package not existing
also neither global nor window can be used to assign objects into console
with import/require not working either (in console)
Ranjan Subbiah
@ranjanbuilds
Jun 20 2018 19:35

hey, I created a donejs plugin and I am trying to live bind one of the plugin properties to the parent scope (our project).

        <tucows-donejs-carousel
              activeSlideIndex:to="./activeSlideIndex"
        >

but seems to be only passing the initial value up. Do you have any suggestions?

Justin Meyer
@justinbmeyer
Jun 20 2018 19:59
@ranjanbuilds , I'd put {{./activeSlideIndex}} next to that ... to see if it's changing
if you have the developer tools installed (and 4.0), you should be able to see if the property is properly bound
Ranjan Subbiah
@ranjanbuilds
Jun 20 2018 20:52
@justinbmeyer thanks, it's definitely changing in the plugin's scope. just not being properly bound to the parent scope. not sure why - syntax is correct.
Justin Meyer
@justinbmeyer
Jun 20 2018 20:52
are you using CanJS 4.0?
srikkanthsiki
@srikkanthsiki
Jun 20 2018 20:52
2.3
Justin Meyer
@justinbmeyer
Jun 20 2018 20:53
@srikkanthsiki are you answering for @ranjanbuilds ?
srikkanthsiki
@srikkanthsiki
Jun 20 2018 20:53
sorry wrong chat room
Justin Meyer
@justinbmeyer
Jun 20 2018 20:53
:P
@ranjanbuilds what version are you using?
Ranjan Subbiah
@ranjanbuilds
Jun 20 2018 20:55
not 4.0, can-stache version is 3.6.2
Do you see the {{./activeSlideIndex}} changing in something like:
     {{./activeSlideIndex}}
        <tucows-donejs-carousel
              activeSlideIndex:to="./activeSlideIndex"
        >
Ranjan Subbiah
@ranjanbuilds
Jun 20 2018 21:02
oh, it is changing there, wierd, I put a setter on the vm property and it wasn't firing
Ranjan Subbiah
@ranjanbuilds
Jun 20 2018 21:07
k, sorry to waste your time, really don't know what just happened, was definitely not working a little while ago :/ :confused:
Ranjan Subbiah
@ranjanbuilds
Jun 20 2018 21:21
alright figured it out - the root cause was I was being very dumb. thanks again.
Justin Meyer
@justinbmeyer
Jun 20 2018 21:51
no problem ... CanJS 4 can tell you when you're dumb much earlier :-)