These are chat archives for canjs/canjs

2nd
Aug 2018
Viktor Busko
@Lighttree
Aug 02 2018 13:01

Guys maybe someone have ideas.
I need to render piece of text with some data substituted that I get asynchronously, I have a helper that works fine unless I need to put HTMLString as data to this string.
Original helper works with createTextNode that perfectly works but returns only strings, so if you put HTML there it will stringify it.
Sometimes I need to do HTML parsing and return text with HTML markup (for example if text contains links), so I was thinking about replacing createTextNode by createDocumentFragment, but in some reason createTextNode appends to dom as required, and createDocumentFragment - not. Maybe you have ideas how to workaround this ?

here is sandbox:
https://codepen.io/Lighttree/pen/MBGJpp?editors=1010

Kevin Phillips
@phillipskevin
Aug 02 2018 14:44
I don't think you can set the innerHTML of a document fragment like that
you can create a <div> or a <span> and set the innerHTML of that and it works ok
Viktor Busko
@Lighttree
Aug 02 2018 14:54
Well it is possible but it doesn't work because documentFragment remove itself after I return it from helper (after it inserts into dom), so my async change just loose link to this object.
I found couple other options with your suggested idea included, but this creates additional wrapper tag.
Stef
@sronsiek
Aug 02 2018 14:57

Hi! canjs4: I'm trying to pass an optional url pram in a GET but would like it to be hidden from the browsers url field

route.register('recipe/{id}', {page: 'recipe'});

Given that route (pronounced 'root'), I build a link as follows:

<a href='{{ routeUrl(page="recipe" id=5 layout='detailed') }}'>{{recipe.name}}</a>

'layout' is defined in appstate with serialize=false.
This sort of achieves what I want, but with a side effect:
Browser url is http://<app_base>/recipe
Hit the browser 'back' button once, the same page is still displayed, the browser url shown is now http://<app_base>/recipe?layout=detail
Hit the browser 'back' button again & I'm redirected to the original page .
So it seems there are 2 entries in the route hash ...

Is there a recommended way of passing prams but hiding them from the url display?

Kevin Phillips
@phillipskevin
Aug 02 2018 15:29
@Lighttree this helper is getting a little crazy... but you can do something like this:
stache.addHelper('i18nDF', (prop) => {
  const placeholder = document.createTextNode('');

  setTimeout(() => {
    const tpl = document.createElement('template');
    tpl.innerHTML = prop;
    placeholder.parentNode.replaceChild(tpl.content, placeholder)
  }, 1000);

   return placeholder;
});
Eben
@eben-roux
Aug 02 2018 18:09
hi folks
anyone have a suggestion for binding the escape key on an input to a method?
so pressing esc will call the method on the ViewModel...
gregorgodoy
@gregorgodoy
Aug 02 2018 18:17

Hi, I did something similar with the enter key. Stache file:

<input type="text" on:keyup="myMethod(scope)">

and in the viewmodel create the method like this

    myMethod(scope) {
        if (scope.event.keyCode == 27) {

            // do something
        }
    }

keyCode 27 is ESC.

Eben
@eben-roux
Aug 02 2018 18:18
@gregorgodoy thanks, seems simple enough
I see there is a on:enter so was wondering whether one could have something like on:escape
should be possible so I'll dig a bit more when I have time
gregorgodoy
@gregorgodoy
Aug 02 2018 18:22
Yes, I saw the on:enter too in the documentation but I could not make it work, not sure why. The enter was never fired, so I ended up with onkeyup
@eben-roux you welcome!
Kevin Phillips
@phillipskevin
Aug 02 2018 18:55
can-event-dom-enteris the package that enables on:enter
it's nice because then you can avoid having the event/keycode logic in your viewmodel
you can use similar code and just update the keycode to make on:escape work
gregorgodoy
@gregorgodoy
Aug 02 2018 19:06
@phillipskevin Thanks for the hint!!
Kevin Phillips
@phillipskevin
Aug 02 2018 19:07
to get that to work in canjs 4.0+, you need to do something like this:
var domEvents = require('can-dom-events');
var enterEvent = require('can-event-dom-enter');

domEvents.addEvent(enterEvent);
or import can-event-dom-enter/add-global/add-global, which does this for you
Gregg Roemhildt
@roemhildtg
Aug 02 2018 19:31
Gregg Roemhildt
@roemhildtg
Aug 02 2018 19:37
  • can-component: 203.9kb
  • react + react-dom + redux: ~100kb
  • vue + vuex: ~70kb
  • angular: 175kb
Kevin Phillips
@phillipskevin
Aug 02 2018 20:26
that is interesting... any idea how they calculate this?
gregorgodoy
@gregorgodoy
Aug 02 2018 20:49

@phillipskevin Thank.

import { Component, DefineMap, domEvents, enterEvent } from 'can';
domEvents.addEvent(enterEvent);

The on:enter now works, but the input is inside a form, so the submit is also fired. How can i prevent this from bubbling to the form element? I already tried scope.event.preventDefault() and scope.event.stopPropagation()
Of course I could do some logic inside the submit an prevent the submition on some conditions, but how can I prevent the bubbling so the submit is never fired? Thanks!

Gregg Roemhildt
@roemhildtg
Aug 02 2018 20:57
I'm not sure how tbh. I'm assuming using webpack?
Looks like that is used
It doesn't seem too far off though for can-component. If I build a package with one simple component using webpack I end up with about 209KB
Gregg Roemhildt
@roemhildtg
Aug 02 2018 21:14
Also Webpack using the import {Component} from 'can'; comes out to about 450KB
Kevin Phillips
@phillipskevin
Aug 02 2018 21:14
I'm just wondering if it is removing our documentation
Gregg Roemhildt
@roemhildtg
Aug 02 2018 21:15
Steal on the other hand comes out to about 269KB
Kevin Phillips
@phillipskevin
Aug 02 2018 21:16
we've started making this compatible with webpack by wrapping in the process.env check: https://github.com/canjs/can-component/blob/19b71bb801ee5306467a6547a0c3bf594d64bcdf/can-component.js#L256-L263
but it's not done everywhere
Gregg Roemhildt
@roemhildtg
Aug 02 2018 21:16
Yep. I think I don't have tree shaking enabled either or something...Not sure how to do that with webpack
For instance, it looks like Kefir gets bundled when I do that with webpack
Kevin Phillips
@phillipskevin
Aug 02 2018 21:18
yeah, that's not good
I might have time next week to look into this
I'm doing some testing with webpack now anyway
Gregg Roemhildt
@roemhildtg
Aug 02 2018 21:20
I have noticed I don't see any production logging from canjs webpack bundles anymore. That's good :thumbsup: