These are chat archives for canjs/canjs

6th
Aug 2018
Sander Roeffaers
@Kleppo
Aug 06 2018 08:33
Hi, quick questing, is it possible to disable automatic logging in can-fixture?
I’m running tests with jest, and the logs, when a request is captured by the fixture, is printed in my test report.. (and so makes it less readable..) Thx!
Julian
@pYr0x
Aug 06 2018 12:10
@Kleppo you can import can-log in your tests and set logLevel > 2
Sander Roeffaers
@Kleppo
Aug 06 2018 12:10
thx! :-)
Stef
@sronsiek
Aug 06 2018 16:00
Are nested defines permitted (in canjs4)? The following always results in undefined actionButton
  actionButton: {
    label: {
      type: 'string',
      default: 'Action'
    },
    icon: {
      type: 'string',
      default: 'save'
    }
  }
The above is within DefineMap.extend( ...
gregorgodoy
@gregorgodoy
Aug 06 2018 16:43

@sronsiek Maybe this could work:

actionButton: {
    value() {
        return DefineMap.extend({
            label: {
                 type: 'string',
                 default: 'Action'
            },
            icon: {
                 type: 'string',
                 default: 'save'
            }
        });
    }
}

Sorry, not thested, but why not create another DefineMap called maybe actionButton:

const btnAction = DefineMap.extend({

    label: {
      type: 'string',
      default: 'Action'
    },
    icon: {
      type: 'string',
      default: 'save'
    }

});

and then use btnAction as default Type:

actionButton: {
    Type: bntAction
  }

Not tested, sorry, but it has sense (?).

Stef
@sronsiek
Aug 06 2018 16:57

I sort of see where you are going with this, however I can achieve what I'm looking for like this:

  actionButtonLabel: {
    type: 'string',
    default: 'Action'
  },

  actionButtonIcon: {
    type: 'string',
    default: function() {
      return this.icons['save'];
    }
  },

which is much more succinct. I thought I coud create a DefineMap on the fly, as suggested here:
https://v4.canjs.com/doc/can-define.types.propDefinition.html
bottom of page:

const Person = DefineMap.extend( "Person", {

    // a `DefineList` of `Address`
    addresses: [ Address ],

    // A `DefineMap` with a `first` and `last` property
    name: { type: { first: "string", last: "string" } },

The last line suggests this can be done, but I've not seen it in combo with a default: and that is always undefined when I try it ...

gregorgodoy
@gregorgodoy
Aug 06 2018 17:05
Please note you should use Default with a Uppercase D
Im reading the docs you suggested.
Stef
@sronsiek
Aug 06 2018 17:09

Ideally this is what I'd like:

  testname: {
    type: {
      first: { type: 'string', default: 'stef' },
      last: { type: 'string', default: 'last name' }
    } 
  },

so the stache code can use {{testname.first}}

gregorgodoy
@gregorgodoy
Aug 06 2018 17:32

Mmmm, not working as you expected:
https://jsbin.com/muzaxelana/1/edit?html,js,output

Not sure why.

Stef
@sronsiek
Aug 06 2018 17:46
This seems to work:
  testname: {
    Default: DefineMap.extend({
      first: { type: 'string', default: 'stef' },
      last: { type: 'string', default: 'surname' },
    })
  },
Stef
@sronsiek
Aug 06 2018 17:59
That's good - and finally it would be nice to know if/how the nested var can be assigned via a one-way bind from tag-call in stache
testname:from="'{ first: \'Roger\'}'"
something like that - though I'm running out of escape ideas
I think it's trying to do it:
Cannot use 'in' operator to search for 'first' in {
gregorgodoy
@gregorgodoy
Aug 06 2018 18:09
Im not sure if its possible to assign a value, while you are passing it to an component. I think, you should assign the value before and then just: testname:from="testname.first"
But Im relative new with CanJs and maybe its possible.
Stef
@sronsiek
Aug 06 2018 18:20
Yep - that should work - now it's time for home - thanks for you help @gregorgodoy !
It would be good if the example on the doc page could be changed to something that works though!
// A DefineMap with a first and last property
name: { type: { first: "string", last: "string" } },
Dovid Bleier
@dbleier
Aug 06 2018 18:27
can anyone help me with my question posted at https://gitter.im/canjs/canjs?at=5b670b9804436a1ae61d48d0
Kevin Phillips
@phillipskevin
Aug 06 2018 18:28
that I have injected into the stache and for some reason I can not fathom
injected how?
gregorgodoy
@gregorgodoy
Aug 06 2018 18:31
@sronsiek You welcome! Im still on the learning curve, so any ideas exchange is more then welcome!!
Dovid Bleier
@dbleier
Aug 06 2018 18:36
@phillipskevin perhaps injected is the wrong term, I just mean passing the props via stache to the component, like in my snippet above
Kevin Phillips
@phillipskevin
Aug 06 2018 18:37
have you tried removing everything else in your app?
maybe there is a warning that can help
Dovid Bleier
@dbleier
Aug 06 2018 18:40
the only warning I see is can-stache/src/expression.js: Unable to find key or helper "html.markup". but I don't know how accurate that is considering I do see the markup in {{html.markup}}
do you mean remove everything from the stache or from the whole app? It's a pretty big app
Kevin Phillips
@phillipskevin
Aug 06 2018 18:42
you should have the {{debugger}} helper in 3.0
so you can use that to inspect the scope
(options.scope when paused in the debugger)
I meant removing everything from the app
obviously that might be hard
Dovid Bleier
@dbleier
Aug 06 2018 18:45
to say the least, and would probably break more than it would fix ;)
I tried the {{debugger}}, where in scope should I be looking?
context? data?
Kevin Phillips
@phillipskevin
Aug 06 2018 18:49
_context
options.scope.get("html")
will also work
Dovid Bleier
@dbleier
Aug 06 2018 18:55
ok, so this is interesting - debugger stops twice - 1st before the component is rendered and options.scope.get("html") is undefined, but after the component is rendered debugger stops again and this time it is defined
so the component is getting rendered before the data is available to the scope
Kevin Phillips
@phillipskevin
Aug 06 2018 18:59
that on its own shouldn't be a problem
Dovid Bleier
@dbleier
Aug 06 2018 19:00
now, I think I see what is going on, the component is rendered before the prop is added to the viewModel
Kevin Phillips
@phillipskevin
Aug 06 2018 19:02
that's fine I think
Dovid Bleier
@dbleier
Aug 06 2018 19:05
I updated it so that the prop is set before render, now the prop is in scope when element is rendered, but still not being passed in
Kevin Phillips
@phillipskevin
Aug 06 2018 19:06
you mean the setter is not called?
Dovid Bleier
@dbleier
Aug 06 2018 19:07
correct
Kevin Phillips
@phillipskevin
Aug 06 2018 19:08
if you replace the component with <input>s do they have the same problem?
  <input value:bind="html.markup">
  <input value:bind="html.externals" >
  <input value:bind="html.code" >
Dovid Bleier
@dbleier
Aug 06 2018 19:10
no, that worked
Kevin Phillips
@phillipskevin
Aug 06 2018 19:22
ok, so what is the component doing?
Dovid Bleier
@dbleier
Aug 06 2018 19:25
what it is supposed to do is inject some custom html and js into the page, but it doesn't get that far, since the setters aren't called, it has nothing to inject
an inserted event is fired to inject the code, but there is nothing to inject
I can not figure out why the setters aren't called
Kevin Phillips
@phillipskevin
Aug 06 2018 20:18
can you try to reduce what that component is doing?
try to replace that component with an "empty" component that just has those <input>s in its template
Dovid Bleier
@dbleier
Aug 06 2018 20:34
not sure what you mean
the setter is not doing anything except printing the value to console.log
and returning the value of course
I have a breakpoint in the setter and it is not being hit
oh wait, I think I misunderstood what you said above, I just added the inputs to the parent template calling the component, not in the component itself
Dovid Bleier
@dbleier
Aug 06 2018 20:50
when I put the input in the component's template itself, then the setter IS called, but '' is passed in, not the real string or object
Kevin Phillips
@phillipskevin
Aug 06 2018 21:41

so test 1, replace

    <can-import  from="./html-widget/" />
    <html-widget markup:from="html.markup" externals:from="html.externals" 
        code:from="html.code" ></html-widget>

with

 <input value:bind="html.markup">
  <input value:bind="html.externals" >
  <input value:bind="html.code" >

test 2, replace

    <can-import  from="./html-widget/" />
    <html-widget markup:from="html.markup" externals:from="html.externals" 
        code:from="html.code" ></html-widget>

with

<new-component markup:from="html.markup" externals:from="html.externals" code:from="html.code" />