These are chat archives for canjs/canjs

12th
Mar 2018
Jared Stehler
@jaredstehler
Mar 12 2018 13:56
Anyone have tips on troubleshooting stache timeout errors?
Potentially unhandled rejection [4] Error: Timeout of 5000 exceeded at eval (http://localhost:8082/src/index.stache:247:17) at eval (http://localhost:8082/node_modules/can-zone/lib/tasks.js:149:15) at Task.run (http://localhost:8082/node_modules/can-zone/lib/zone.js:41:17) at Zone.runTask (http://localhost:8082/node_modules/can-zone/lib/zone.js:183:14)
then a bunch of
this is the line in datastream-app.control.js: instances: { get: function get(prevVal, resolver) { DataStreamAppInstance.getList({ artifact: this.app.artifact, ts: this.updateTs }).then(function (data) { // setTimeout($.proxy(this.updateData, this), 10000); resolver(data); }); } },
but i see that the http request is completing in 900ms
Kevin Phillips
@phillipskevin
Mar 12 2018 14:22
take a look at https://www.youtube.com/watch?v=8cWPZM8fiOQ, @jaredstehler
Jared Stehler
@jaredstehler
Mar 12 2018 14:22
thanks!
Jared Stehler
@jaredstehler
Mar 12 2018 17:56
any best practices on "polling" and updating lists of superMaps? I'm currently doing what feels hacky:
export const ViewModel = DefineMap.extend({

  title: {
    get() {
      return 'Recent Deploys';
    }
  },

  updateTime: 'number',

  deploys: {
    get(prevVal, resolver) {
      if(this.updateTime) {
        var params = route.data.serialize();
        params.ts = this.updateTime;

        Deploy.getList(params).then((d) => {
          setTimeout($.proxy(this.update, this), 30000);
          resolver(d);
        });
      }
      else {
        resolver(null);
      }
    }
  },

  update() {
    this.updateTime = new Date().getTime();
  }

});

export default Component.extend({
  tag: 'deploy-list',
  ViewModel,
  events: {
    inserted() {
      this.viewModel.update();
    }
  },
  view
});
it also causes the whole list to flicker each update
and I think that it might have been causing or contributing to my zone render timeout issues..
andre-cgn
@andre-cgn
Mar 12 2018 19:13
hey guys. i've got a stache.addHelper related question. anyone around who might be able to help?
I've got a repository with just one can component and a helper to go with it. both written in es6 style and transpiled with babel. i import that package via es6 import in my main project (that project is built via browserify + babelify). i would expect my stache view helper to also be available to all components and templates in my core repository - even though that helper is registered by the imported module with my simple can-component
it doesnt work though
i added stache to get window object for debugging purposes. when i get window.stahce-getHelper('myhelper'), it does return a function
but i still get warnings in the console that stache cannot find the myhelper helper
is there any good way around this
Mohamed Cherif Bouchelaghem
@cherifGsoul
Mar 12 2018 19:20
@andre-cgn how did you register the helper? in the componet helpers object or with stache.registerHelper ?
Kevin Phillips
@phillipskevin
Mar 12 2018 19:21
@andre-cgn do you have multiple versions of stache?
andre-cgn
@andre-cgn
Mar 12 2018 19:21
i used addHelper
nope i am using identical versions
and only bundling one
Kevin Phillips
@phillipskevin
Mar 12 2018 19:21
what version are you using?
andre-cgn
@andre-cgn
Mar 12 2018 19:22
can-stache 4.1.1
Kevin Phillips
@phillipskevin
Mar 12 2018 19:24
how are you calling the helper?
andre-cgn
@andre-cgn
Mar 12 2018 19:24
as i said, the first package only contains one can-component and a stache helper. nothing is bundled. the bundling takes place in the core package which uses the first one as a dependency
my helper is called 'translate'
Kevin Phillips
@phillipskevin
Mar 12 2018 19:25
so you're calling it like {{translate("foo")}} ?
andre-cgn
@andre-cgn
Mar 12 2018 19:25
exactly
Flavio Garcia
@piraz
Mar 12 2018 19:26
Hello guys, when I import a template using steal-stache using
import template from "./nav.stache";
it works
but like this:
var template = steal("./nav.stache");
I'll get this error:
can-component.js:409 Uncaught TypeError: betweenTagsRenderer is not a function at Constructor.setup (can-component.js:409) at Function.newInstance (can-construct.js:288) at Constructor.init (can-construct.js:636) at new Constructor (eval at <anonymous> (can-construct.js:NaN), <anonymous>:3:34) at Object.eval [as nav-base] (can-component.js:228) at HTMLElement.CustomElement.connectedCallback (can-view-callbacks.js:181) at Object.tag (can-view-callbacks.js:188) at Function.setup (can-component.js:227) at Function.extend (can-construct.js:687) at execute (nav.js:185)
Kevin Phillips
@phillipskevin
Mar 12 2018 19:28
@andre-cgn can you put a breakpoint in your code where you call addHelper and also in stache where the warning is given
to make sure your helper is being added before the template is rendered
@piraz maybe try asking your question in the steal room
I'm not sure what the difference is with that kind of import
Flavio Garcia
@piraz
Mar 12 2018 19:31
It is funny @andre-cgn because the only doc I get ins on the canjs page: https://canjs.com/doc/steal-stache.html#Use
Kevin Phillips
@phillipskevin
Mar 12 2018 19:31
@jaredstehler you might want to ask your question on the forums
it probably could use a longer answer
Flavio Garcia
@piraz
Mar 12 2018 19:31
I'll check on their side
Kevin Phillips
@phillipskevin
Mar 12 2018 19:32
the only docs you get on steal-stache?
I'm not sure this is related to steal-stache... I think the steal syntax requires a callback
Thomas Sieverding
@Bajix
Mar 12 2018 19:33
@piraz you need to do:
import template from "./nav.stache!”;
Flavio Garcia
@piraz
Mar 12 2018 19:33
yes, even the repo is pointing to this page: https://github.com/canjs/steal-stache
Kevin Phillips
@phillipskevin
Mar 12 2018 19:33
like
steal("./nav.stache", function(template) { 
  ...
});
but I'm not sure
Thomas Sieverding
@Bajix
Mar 12 2018 19:34
The ! is what makes the loader use the plugin
Kevin Phillips
@phillipskevin
Mar 12 2018 19:34
steal will figure out the plugin based on the extension in newer versions
Thomas Sieverding
@Bajix
Mar 12 2018 19:35
Yea and in that case you can skip specifying the plugin, but I think the exclamation point is still mandatory
Kevin Phillips
@phillipskevin
Mar 12 2018 19:36
no, I don't think so
Flavio Garcia
@piraz
Mar 12 2018 19:36
I mean, import template from "./nav.stache”;, works for me
Flavio Garcia
@piraz
Mar 12 2018 19:36
it returns an instance
the steal way will return a promise
Kevin Phillips
@phillipskevin
Mar 12 2018 19:37
steal.import returns a promise
steal(...) is an old syntax: https://stealjs.com/docs/syntax.steal.html
Thomas Sieverding
@Bajix
Mar 12 2018 19:37
Perhaps using the old syntax requires the !?
Flavio Garcia
@piraz
Mar 12 2018 19:38
interesting
Kevin Phillips
@phillipskevin
Mar 12 2018 19:38
yeah, definitely could
Thomas Sieverding
@Bajix
Mar 12 2018 19:38
IMO the ! should be mandatory and used in all situations regardless
That way it’s always clear a plugin loader is an intermediary
Flavio Garcia
@piraz
Mar 12 2018 19:44
Ok, I got it, inside the steal function I got the right object
steal("./nav.stache");
with or without !
will get me a promisse
it is ok
andre-cgn
@andre-cgn
Mar 12 2018 20:24
@phillipskevin sorry for the long break. had a call. there is no way the addHelper-fn is called after the evaluation of my stache templates
i checked that over and over
i'm actually at a point where i just attach a stache prop to the window object in the frist place to be able to use that across multiple npm-packages
Kevin Phillips
@phillipskevin
Mar 12 2018 20:25
how do you do that?
andre-cgn
@andre-cgn
Mar 12 2018 20:25
just frustrating. i know, it's very bad style. but either that or move on to react :(
do what ?
Kevin Phillips
@phillipskevin
Mar 12 2018 20:25
attach the prop to the window
andre-cgn
@andre-cgn
Mar 12 2018 20:27

just write a singleton that i import

something like:

import stache from 'can-stache';

export default function getStache() {
if (!window.stache) {
window.stache = stache;
}
return window.stache;
}

well, it's not a singleton
but you get the point
it appears, can satche registers the helpers in some colection that is only accessible to the can-stache instance that is active
andre-cgn
@andre-cgn
Mar 12 2018 20:29
so if you have a project that imports two dependencies which provide helper functions, they cannot the used by the core project's templates
that exception is never thrown
Kevin Phillips
@phillipskevin
Mar 12 2018 20:29
I'm not sure how that could happen
is this project on github?
andre-cgn
@andre-cgn
Mar 12 2018 20:29
it would be thrown if i would compile both, the components source package and the core package with browserify
the first one however doesnt include can-stache
it just declares the dep
nope its not on git
i'll try to codepen something up, so you get a better understanding, if you're even up for the challegene ;) which i'd appreciate very much
i'll have to get back to you though. it's already 9:30 pm and I need to get home
appreciate your help/interest so far, thanks
andre-cgn
@andre-cgn
Mar 12 2018 20:35
btw (just in case anyone cares): working for questback (questback.com). we've been using canjs for various prodcuts since early 2015. currently on can 2.3x. i am untertaking the frist steps to migrate the first parts of the codebase to 4.x now
Kevin Phillips
@phillipskevin
Mar 12 2018 20:37
:thumbsup: if you post something I can take a look at that would be great
andre-cgn
@andre-cgn
Mar 12 2018 20:55

okay so what you have to do to reprocude my problem:

create folder, say: kevinshelper
terminal: npm init
npm install can-stache --save

add the following to the package.json: main: "./dist/index.js"

create src/index.js with the following content

import stache from 'can-stache';

function kevinshelper(str) {
return 'Kevin was here: ' + str;
}

stache.addHelper('kevinshelper', kevinshelper);

configure abel or gulp+babel to es2015 that stuff into ./dist/index.js

create another folder next to kevinshelper folder, let's call it: kevinsapp
terminal: npm init
npm install ../kevinshelper can-stache --save

add the following to the package.json: main: "./dist/index.js"

now create ./src/index.js with the following content:

import 'kevinshelper'; //import from node_modules since we npm installed it to our package
import stache from 'can-stache';

document.addEventListener('DOMContentLoaded', function() {
document.body.appendChild(stache('<div>{{kevinshelper('12th of March')}}</div>')());
});

now browserify that into ./dist/index.js and load it via script tag into some html doc

you'll get the cannot find helper warning in the console and the string that the helper should have augmented will not be shown