These are chat archives for canjs/canjs

12th
Dec 2018
Viktor Busko
@Lighttree
Dec 12 2018 07:19

@Lighttree i use personal always the on inserted event to tigger such effects

@frank-dspeed I use it too, but inserted event sometimes is not what you need. Because it dispatches only from components as far as I know (when can-component mounted to DOM). In my example I just add new <li> elements, and I need to run 3rd-party library on "updated" DOM.

Frank Lemanschik
@frank-dspeed
Dec 12 2018 15:32
@Lighttree no no !! every element dispatches it but its a dom api
every li a every element i use it for example in image gallerys to resize images after insertion
also for all kind of animation :D
apsignifi
@apsignifi
Dec 12 2018 16:41
Hello @all
migrating from can2.3 to can3
  • how to migrate the following code:
    can.trigger($('.dateranger input.start'), 'change');
Justin Meyer
@justinbmeyer
Dec 12 2018 16:56
@apsignifi hi ... thanks for asking here
@apsignifi did you use the code mods?
cc @phillipskevin do we have one to change that to dispatching custom events?
Kevin Phillips
@phillipskevin
Dec 12 2018 16:58
no, I don't think we change the jquery methods
Justin Meyer
@justinbmeyer
Dec 12 2018 16:58
ah, so the guide should distinguish between dispatching a custom event on an OBJECT and an ELEMENT
are you using the jquery shim (can-jquery/legacy)?
if yes, you should be able to do:
$('.dateranger input.start').trigger("change")
I think if you use can-query ... that might work too
If you are trying to remove can-jquery entirely, you can use can-dom-events.dispatch: https://v3.canjs.com/doc/can-dom-events.dispatch.html
domEvents.dispatch( $('.dateranger input.start')[0], "change", true, true )
apsignifi
@apsignifi
Dec 12 2018 17:43
@justinbmeyer : Thanks, that worked for me.
would be so nice if we had an example on how to use can-dom-events.dispatch :
https://v3.canjs.com/doc/can-dom-events.dispatch.html
wondering how you decided to use '[0]' in:
domEvents.dispatch( $('.dateranger input.start')[0], "change", true, true )
Justin Meyer
@justinbmeyer
Dec 12 2018 18:12
domEvents.dispatch needs an element
not a jQuery wrapped collection of elements
[0] is just reading the first element in the collection
apsignifi
@apsignifi
Dec 12 2018 18:18
okk .. thanks for clarifying.
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:22
Hi guys, what's the best way to do something like this? (this doesn't work)
<my-component>
{{#if(scope.partialVariable)}}
<can-template name="templateName">
{{>scope.partialVariable}}
</can-template>
{{/if}}
</my-component>
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:23
@roemhildtg i don't understand exactly what you wanna do but it looks for me like you want to dynamic render a partial?
with outer template?
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:24
Yeah, I want to render a partial if its set. The can-template tag lets you override parts of the my-component template
Mohamed Cherif Bouchelaghem
@cherifGsoul
Dec 12 2018 19:24
@roemhildtg do you see a warning?
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:24
can-slot is used with can-template
No warning, it just errors out because I don't think its supported
Basically, can-template appears to be looking for its parent tag (my-component) but it finds the if
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:26
i am not familar with can template
but i would use a call expression to render the partial
you place a property on your map with a get() function
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:27
and that returns stache(`your template goes in here`)
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:27
So instead of using can-template use a partial that I could override
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:27
yes
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:28
<my-component template:from="scope.myPartial" />
That makes sense
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:28
right
and myPartial simply returns stache with the template
that get rendered with
{{myPartial()}}
i am doing that all over in my applications because i never understood this context partial stuff slot stuff from canjs
:D
CallExpressions produce maybe a bit more code but they are also more flexible
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:30
Yeah, the context does get confusing
I get lost in that every time I look into it
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:30
yes i did too
thats why i droped that and searched for alternativs
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:30
Thanks for the suggestion. I think I'll try and stick with that
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:31
Callexpressions are well all over they can even replace all the if else logic
in your templates
simply make the get() a function that returns diffrent stache() instances conditional
so you simply insert {{myPartial()}}
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:31
Is it possible to declare a partial in the template like this, and then override it somehow?
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:31
and it returns all needed
i think i will post some examples and msg you soon
my english is not so well to explain it in a good fassion but you can forget about all partial stuff
partials are deprecated soon anyway
there are some issues where that got discussed
Kevin Phillips
@phillipskevin
Dec 12 2018 19:34
partials aren't deprecated
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:34
i need to search that and write something together i will then msg you back
@phillipskevin not at present maybe but i got some discussion about that with justin and he agreed that call expressions returning stache
are the better way
also for some active proposals
Kevin Phillips
@phillipskevin
Dec 12 2018 19:35
yes, but that's not the same as something being deprecated
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:35
your right thats my bad english
i talk to much german :D
Kevin Phillips
@phillipskevin
Dec 12 2018 19:36
no problem, just don't want people to get the wrong impression
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:36
What's the difference between a partial and a call expression that returns a partial?
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:36
deprecated means it throws a warning and will not work in future right?
Kevin Phillips
@phillipskevin
Dec 12 2018 19:37
deprecated means it will be removed in the next major version
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:37
ok how is it called in english when there is a better solution for something then the current used?
i think there is a word a term for that case something like "successor"
@roemhildtg with a callexpression you can more easy change the scope of the stache
thats the diffrence
the partial is something that does that code that you do manual via can-stache-bindings
but in real world a call expression works great and it works as expected :)
@roemhildtg a importent key note for you is left stache('path/to/file.stache') works also
stache is able to work with files directly
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:43
and you need to return it rendered so stache('your template stuff')(scope)
scope == {} any object with your stuff
Gregg Roemhildt
@roemhildtg
Dec 12 2018 19:44
okay
Kevin Phillips
@phillipskevin
Dec 12 2018 19:49
this should work:
    {{< foo }}
      This is foo
    {{/ foo }}

    {{ let bar = scope.templateContext.partials.foo }}

    <p>{{ bar() }}</p>
but it doesn't
it calls that partial, but doesn't render it correctly
which we should fix
this works, which is weird:
<p>{{ scope.templateContext.partials.foo() }}</p>
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:50
when your going to fix that maybe you should also fix some docs about scope
i think most in here don't know what templateContext.partials is
like me
i think that the parser assigns variable template.partials.fo with something inside the foo partial
but i don't even know the type of foo i can't even expect it
Kevin Phillips
@phillipskevin
Dec 12 2018 19:54
oh, it just doesn't work with call expressions
<p>{{ bar "baz" }}</p> works
which is the older old way of calling partials
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:55
is all that in the stache-view-parser?
Kevin Phillips
@phillipskevin
Dec 12 2018 19:55
all what?
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:55
this calling methods
like your old older one
Kevin Phillips
@phillipskevin
Dec 12 2018 19:55
no
it's in stache
can-stache
Frank Lemanschik
@frank-dspeed
Dec 12 2018 19:56
hmmm interristing
thats maybe why that dependency is so big
i would love to have a slim edition of canjs that is more compose able
since i found out today that treeshaking works not good with my code bases
i think there is maybe to much never used code all over in my apps
as even the most small get over 1mb unminifiyed
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:03
import DefineMap from"./node_modules/can-define/map/map.js";
import Component from"./node_modules/can-component/can-component.js";
import"./node_modules/process-es6/browser.js";
import"./node_modules/rollup-plugin-node-globals/src/global.js";
import"./node_modules/can-namespace/can-namespace.js";
import"./node_modules/can-symbol/can-symbol.js";
import"./node_modules/can-reflect/can-reflect.js";
import"./node_modules/can-reflect/reflections/type/type.js";
import"./node_modules/can-reflect/reflections/helpers.js";
import"./node_modules/can-reflect/reflections/call/call.js";
import"./node_modules/can-reflect/reflections/get-set/get-set.js";
import"./node_modules/can-reflect/reflections/observe/observe.js";
import"./node_modules/can-reflect/reflections/shape/shape.js";
import"./node_modules/can-reflect/reflections/shape/schema/schema.js";
import"./node_modules/can-reflect/reflections/get-name/get-name.js";
import"./node_modules/can-reflect/types/map.js";
import"./node_modules/can-reflect/types/set.js";
import"./node_modules/can-log/dev/dev.js";
import"./node_modules/can-log/can-log.js";
import"./node_modules/can-construct/can-construct.js";
import"./node_modules/can-string/can-string.js";
import"./node_modules/can-queues/can-queues.js";
import"./node_modules/can-queues/queue-state.js";
import"./node_modules/can-queues/queue.js";
import"./node_modules/can-assign/dist/cjs/can-assign.js";
import"./node_modules/can-queues/priority-queue.js";
import"./node_modules/can-queues/completion-queue.js";
import"./node_modules/can-observation-recorder/can-observation-recorder.js";
import"./node_modules/can-event-queue/type/type.js";
import"./node_modules/can-key-tree/dist/cjs/can-key-tree.js";
import"./node_modules/can-define/can-define.js";
import"./node_modules/can-define-lazy-value/define-lazy-value.js";
import"./node_modules/can-observation/can-observation.js";
import"./node_modules/can-event-queue/value/value.js";
import"./node_modules/can-event-queue/dependency-record/merge.js";
import"./node_modules/can-observation/recorder-dependency-helpers.js";
import"./node_modules/can-observation/temporarily-bind.js";
import"./node_modules/can-simple-observable/settable/settable.js";
import"./node_modules/can-simple-observable/log.js";
import"./node_modules/can-simple-observable/can-simple-observable.js";
import"./node_modules/can-simple-observable/async/async.js";
import"./node_modules/can-event-queue/map/map.js";
import"./node_modules/can-dom-events/helpers/util.js";
import"./node_modules/can-globals/document/document.js";
import"./node_modules/can-globals/can-globals-instance.js";
import"./node_modules/can-globals/can-globals-proto.js";
import"./node_modules/can-globals/global/global.js";
import"./node_modules/can-globals/is-browser-window/is-browser-window.js";
import"./node_modules/can-globals/is-node/is-node.js";
import"./node_modules/can-dom-events/can-dom-events.js";
import"./node_modules/can-dom-events/helpers/make-event-registry.js";
import"./node_modules/can-dom-events/helpers/-make-delegate-event-tree.js";
import"./node_modules/can-simple-observable/resolver/resolver.js";
import"./node_modules/can-string-to-any/can-string-to-any.js";
import"./node_modules/can-data-types/maybe-boolean/maybe-boolean.js";
import"./node_modules/can-data-types/maybe-date/maybe-date.js";
import"./node_modules/can-data-types/maybe-number/maybe-number.js";
import"./node_modules/can-data-types/maybe-string/maybe-string.js";
import"./node_modules/can-define/define-helpers/define-helpers.js";
import"./node_modules/can-define/ensure-meta.js";
import"./node_modules/can-log/dist/cjs/can-log.js";
import"./node_modules/can-stache-key/can-stache-key.js";
import"./node_modules/can-reflect-promise/can-reflect-promise.js";
import"./node_modules/can-dom-mutate/can-dom-mutate.js";
import"./node_modules/can-globals/mutation-observer/mutation-observer.js";
import"./node_modules/can-globals/can-globals.js";
import"./node_modules/can-globals/location/location.js";
import"./node_modules/can-globals/custom-elements/custom-elements.js";
import"./node_modules/can-dom-mutate/-util.js";
import"./node_modules/can-component/control/control.js";
import"./node_modules/can-control/can-control.js";
import"./node_modules/can-key/get/get.js";
import"./node_modules/can-key/utils.js";
import"./node_modules/can-bind/can-bind.js";
import"./node_modules/can-reflect-dependencies/can-reflect-dependencies.js";
import"./node_modules/can-reflect-dependencies/src/add-mutated-by.js";
import"./node_modules/can-reflect-dependencies/src/delete-mutated-by.js";
import"./node_modules/can-reflect-dependencies/src/get-dependency-data-of.js";
import"./node_modules/can-reflect-dependencies/src/is-function.js";
import"./node_modules/can-dom-mutate/node.js";
import"./node_modules/can-dom-mutate/node/node.js";
import"./node_modules/can-view-nodelist/can-view-nodelist.js";
import"./node_modules/can-child-nodes/can-child-nodes.js";
import"./node_modules/can-view-callbacks/can-view-callbacks.js";
import"./node_modules/can-fragment/can-fragment.js";
import"./node_modules/can-simple-map/can-simple-map.js";
import"./node_modules/can-view-scope/can-view-scope.js";
import"./node_modules/can-view-scope/template-context.js";
import"./node_modules/can-stache-helpers/can-stache-helpers.js";
import"./node_modules/can-view-scope/compute_data.js";
import"./node_modules/can-view-scope/scope-key-data.js";
import"./node_modules/can-view-scope/make-compute-like.js";
import"./node_modules/can-single-reference/can-single-reference.js";
import"./node_modules/can-cid/can-cid.js";
import"./node_modules/can-dom-data-state/can-dom-data-state.js";
import"./node_modules/can-simple-observable/setter/setter.js";
import"./node_modules/can-stache/can-stache.js";
import"./node_modules/can-attribute-encoder/can-attribute-encoder.js";
import"./node_modules/can-view-parser/can-view-parser.js";
import"./node_modules/can-view-target/can-view-target.js";
import"./node_modules/can-stache/src/utils.js";
import"./node_modules/can-stache/src/key-observable.js";
import"./node_modules/can-stache/src/html_section.js";
import"./node_modules/can-stache/src/text_section.js";
import"./node_modules/can-view-live/can-view-live.js";
import"./node_modules/can-view-live/lib/core.js";
import"./node_modules/can-view-live/lib/attr.js";
import"./node_modules/can-attribute-observable/behaviors.js";
import"./node_modules/can-diff/list/list.js";
import"./node_modules/can-view-live/lib/attrs.js";
import"./node_modules/can-view-live/lib/html.js";
import"./node_modules/can-view-live/lib/list.js";
import"./node_modules/can-view-live/lib/set-observable.js";
import"./node_modules/can-diff/patcher/patcher.js";
import"./node_modules/can-view-live/lib/text.js";
import"./node_modules/can-stache/src/mustache_core.js";
import"./node_modules/can-stache/src/expression.js";
import"./node_modules/can-stache/expressions/arg.js";
import"./node_modules/can-stache/expressions/literal.js";
import"./node_modules/can-stache/src/expression-helpers.js";
import"./node_modules/can-stache/expressions/hashes.js";
import"./node_modules/can-stache/expressions/bracket.js";
import"./node_modules/can-stache/src/set-identifier.js";
import"./node_modules/can-stache/expressions/call.js";
import"./node_modules/can-stache/expressions/helper.js";
import"./node_modules/can-stache/expressions/lookup.js";
import"./node_modules/can-stache/helpers/core.js";
import"./node_modules/can-globals/base-url/base-url.js";
import"./node_modules/can-join-uris/can-join-uris.js";
import"./node_modules/can-parse-uri/can-parse-uri.js";
import"./node_modules/can-stache/helpers/-debugger.js";
import"./node_modules/can-stache/src/truthy-observable.js";
import"./node_modules/can-stache/helpers/converter.js";
import"./node_modules/can-dom-data/can-dom-data.js";
import"./node_modules/can-stache/helpers/-for-of.js";
import"./node_modules/can-stache/helpers/-let.js";
import"./node_modules/can-stache-ast/can-stache-ast.js";
import"./node_modules/can-stache-ast/controls.js";
import"./node_modules/can-import-module/can-import-module.js";
import"./node_modules/can-view-model/can-view-model.js";
import"./node_modules/can-stache-bindings/can-stache-bindings.js";
import"./node_modules/can-attribute-observable/can-attribute-observable.js";
import"./node_modules/can-attribute-observable/event.js";
import"./node_modules/can-attribute-observable/get-event-name.js";
import"./node_modules/can-event-dom-radiochange/can-event-dom-radiochange.js";
import"./node_modules/can-define/list/list.js";
console.log(DefineMap,Component);
all this gets loaded for DefineMap + Component
Kevin Phillips
@phillipskevin
Dec 12 2018 20:07
Component loads DefineMap
we had a proposal for this: canjs/can-component#248
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:07
i know
component loads definemap + stache
so the stack would be the same even if i only do console.log(Component)
and that makes me mad
Kevin Phillips
@phillipskevin
Dec 12 2018 20:08
you want to use Component without DefineMap or stache?
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:09
i would love to use it with a slim defineMap and slim Stache
:D
only resolver observable pattern in defineMap + stache only render values if resolved
maybe the bindings from stache are cool also
but i could be happy without them as i can bind in the connectedCallback my self the dom events to the resolver value
at all this is to much code for me that gets loaded and i don't know what it is for :)
and i am studing canjs since more then 3 years now
ok i could know all the stuff that i know more fast when i would ask or attent to some Conferences maybe but with my self reverse engineering it feels like a pain in the ass when i try to understand all this code
because in my mind there are some symbols from can-reflect and that should make any object act as a observable that simply returns the value to stache
and that sounds simple for me in my mind
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:19
Anyway its not your failure :) but i am simply lost with all that can-* stuff as i never know what is needed for what reason and it always gets loaded and then there are even packages that have the same functions
small util functions but they are redundant
Kevin Phillips
@phillipskevin
Dec 12 2018 20:23
yeah, I understand
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:37
@phillipskevin do you know who got that idea?

Make events a plugin:

can-control
can-component/control/control

who would call event handling control
Kevin Phillips
@phillipskevin
Dec 12 2018 20:37
the events: {} on a component is handled by can-control
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:37
i would never ever think about events when i read control
Kevin Phillips
@phillipskevin
Dec 12 2018 20:37
can-control existed long before can-component was created
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:38
i know it existed but why does it still exist
:D
Kevin Phillips
@phillipskevin
Dec 12 2018 20:38
because people use it
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:39
ah i think thats the major problem with this the backward compatiblity stuff
but there are so many braking changes all over with every canJs release that i think droping all the legacy stuff is a good option
Kevin Phillips
@phillipskevin
Dec 12 2018 20:39
5.0 had 1 breaking change
that was a one-liner to fix
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:40
maybe 5.0 but i was rewriting my CanJS Apps all the time
all over always with new Methods
successors over the old methods
because i followed always the edge versions for me it was always a lot of work to migrate
code mods never worked and don't existed most time as i did upgrades
but i see it was my fail that i was always working on the edge maybe :)
Kevin Phillips
@phillipskevin
Dec 12 2018 20:43
I don't think it's a failure, but most apps can't do that
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:44
i have the point that i would drop any application that can't do that
i call such situations fail by design
so a fundamental coding fail in javascript if i can't replace or upgrade parts because they depend all on each other
Kevin Phillips
@phillipskevin
Dec 12 2018 20:45
I just mean most apps can't upgrade all the time
Frank Lemanschik
@frank-dspeed
Dec 12 2018 20:46
hmmm i hade such a discussion with the firebase guys last time
as they was to lazy to upgrade dependencys
for the nativ compiled modules
:D
the result was they should invest time in tooling to make the codebase upgrade able all the time
no matter what because else you can't compile on current PC's
no Company should produce or run none upgrade able applications today they need to hire coders for that
else we All the Community end up in the chaos that we call dependency hell
that we need to bypass then with virtual machines and docker and other Tooling to get a old environment for running code on current machines
also bug fixes are missing all this but the future looks good :)
i will Work with Some bigger Companys on Software Creation Standarts as the industrie don't did it already and else it will get enforced by law at some point so its better the Community Regulates it self
Justin Meyer
@justinbmeyer
Dec 12 2018 22:10
@phillipskevin imo, {{>partial}} should be considered deprecated
we aren't going to remove it
but I don't think people should be using it
Justin Meyer
@justinbmeyer
Dec 12 2018 22:32
@/all a proposal on replacing slots with inline partials: canjs/can-component#323
@/all read this to avoid the multiple-versions problem with can, steal-stache, and package-lock.json: https://forums.donejs.com/t/steal-stache-is-now-included-in-canjs/1007