canjs/canjs

We CAN build the impossible! https://codepen.io/justinbmeyer/pen/yEGGoK

Gregg Roemhildt

@roemhildtg

Hi guys, I've got a side project I've dabbled with in the past and would like to try integrating more tightly with Canjs. Its using Openlayers - a sort of observable mapping library. It has these observable list-like objects called collections, and I'm having issues getting it to work with canjs templates for of, each, etc.

Can anyone lend any tips? Here's the main file where I am adding canjs symbols to the list-like element: https://github.com/roemhildtg/can-ol-symbol/blob/master/lib/assignCanListSymbols.js

There's also a basic demo that can be ran with steal/http-server here: https://github.com/roemhildtg/can-ol-symbol/blob/master/index.html

nmingneau

@nmingneau

Hi, can someone please help me with this issue in edge? https://codepen.io/nmingneau/pen/PxWPLm?editors=1010 It seems to be a bug in can.js but i'm unable to fix it in a reasonable timeframe.

nmingneau

@nmingneau

I made an issue: canjs/can-construct#68

Viktor Busko

@Lighttree

Guys maybe someone use some technique for CSS encapsulation in CanJS ? As far as I know CanJS componenents can't encapsulate styles (not sure about DoneJS).
For now I can see only "CSS Modules" as possible technique.

Gregg Roemhildt

@roemhildtg

I typically use less, and I wrap each compoennt's styles in something like this:

component-name {
    .child-classname { ...}
}

So the output css is always

component-name .child-classname {}

Viktor Busko

@Lighttree

Well this is not true encapsulation, such issue we can handle using something like BEM.

I'm talking about different thing:
Imagine you have page with two components componentA and componentB, both of them use component custom-button, but in componentA we have button v1 and in componentB button v2 they both may have same CSS class names and this is valid, but the code inside might be different. As result in stylesheet we will have custom-button twice with different styles.

Currently we solve this by putting all shared styles as peerDependencies for host app. So its like app where you use custom-button decides which version it will use and injects only one version of any stylesheet. But this adds some field to make mistakes, if you publish something incorrectly.

Chasen Le Hara

@chasenlehara

@nmingneau Thanks for the issue. I whittled down the CodePen a little bit more. I’ll see if I can spend some more time on it tomorrow.

nmingneau

@nmingneau

Does anyone know if there is a way to disable the logging in fixtures when they receive a call?

Justin Meyer

@justinbmeyer

There is not. Easy to add. Why do you want it?

nmingneau

@nmingneau

yes please, it takes a lot of space in my unit tests

Justin Meyer

@justinbmeyer

@nmingneau can you create an issue to enable a fixture.log(false) ?

generally speaking, it will be as simple to add as finding these logs:

https://github.com/canjs/can-fixture/blob/master/core.js#L197

and wrapping them with a check if(fixture._log) { ... }

RyanMilligan

@RyanMilligan

Has anyone seen an error like this before?

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http:/#admin/posts' cannot be created in a document with origin 'http://localhost:8080' and URL 'http://localhost:8080/#admin/posts'.

It's coming from can-route-pushstate. I'm trying to figure out why it's happening, but if anyone knows where to look and can save me some time, that would be great. The router works fine in this application in development mode, but throws that error when using steal.production.js.

Matthew Phillips

@matthewp

@RyanMilligan you don't have a property named route on your viewModel do you?

RyanMilligan

@RyanMilligan

Hrm, a very interesting question. On the app view model? Not that I see.

Matthew Phillips

@matthewp

ok, that was a bit of a guess

I remember running into something like this and that was the problem

route is a semi-reserved word

RyanMilligan

@RyanMilligan

I just did a search for route and I don't see any properties with that name. Just references to can-route.

RyanMilligan

@RyanMilligan

We have app, page, slug, action, actionTwo and env.

RyanMilligan

@RyanMilligan

And because it only happens when we build, it's very difficult to diagnose.

Matthew Phillips

@matthewp

i saw something similar a while back and there was a loop occuring

ever time the route was set something in the route.data viewmodel was setting another property

I would check if something like that occurs

RyanMilligan

@RyanMilligan

Hrm. I have logs on all the setters for the viewmodel properties and they're only getting called the one time.

Matthew Phillips

@matthewp

hm, im out of ideas then

might have to debug within can-route

RyanMilligan

@RyanMilligan

I'll add some more logs around can-route and see what I can figure out, thanks.

RyanMilligan

@RyanMilligan

Ok, so I removed can-route-pushstate because I don't think we actually want it here, and that got rid of the error. But I still have an application that routes just fine when using steal.js and doesn't when using steal.production.js.

Matthew Phillips

@matthewp

The only thing I can suggest is to start removing stuff and then add it back

RyanMilligan

@RyanMilligan

I added some logging to setState, and both curParams and canRoute.data are just empty objects, which seems odd.

RyanMilligan

@RyanMilligan

It looks like the problem was caused by can-route-pushstate. It's working now, and I think the only reason it wasn't working when I removed it was because I had some other troubleshooting stuff hanging around that was getting in the way.

Chasen Le Hara

@chasenlehara

@RyanMilligan I’m glad you got it working. If you end up adding can-route-pushstate and running into the same issue, I’d be curious about what’s going on in these two places: 1) https://github.com/canjs/can-route-pushstate/blob/24dabe72b79acfcd30e516fc78599794d4f205b0/can-route-pushstate.js#L207 and 2) https://github.com/canjs/can-route-pushstate/blob/24dabe72b79acfcd30e516fc78599794d4f205b0/can-route-pushstate.js#L234

RyanMilligan

@RyanMilligan

I actually put a log statement in that second one, so I can tell you the three arguments being passed were null, null, http:/#admin/posts. But I wasn't able to debug up the chain very well to figure out where that weird URL was coming from because it was a built bundle.

Chasen Le Hara

@chasenlehara

Ok, gotcha. Very weird to see http:/#… how was only one slash added after the protocol 😅

nmingneau

@nmingneau

@justinbmeyer
Hi, i created an issue: canjs/can-fixture#160.
I also briefly thought about fixing it myself but i'm not sure why it needs to be _log since there is no use of underscore prefixes in de rest of the code.

Justin Meyer

@justinbmeyer

@/all We’re going to have a live stream right now about the next survey’s proposals:

https://forums.donejs.com/t/donejs-community-survey-november-2018/998

Live stream:

https://www.youtube.com/watch?v=kx-JxYSWlEc

@nmingneau there isn't in can-fixture, but there is in a lot of other canjs code

I'll write up a little more so you can do it if you'd like.

Chasen Le Hara

@chasenlehara

Our latest community survey is out! 📝 Check your email inbox for a link or learn more and take the survey from here: https://www.surveymonkey.com/r/donejs-survey-10

swipie

@swipie

Since can@5.16.3 I get this warning inside my console when running my jest tests. But I’m not aware of any registered “not” helpers inside my code. Anyone an idea why this warning is triggerd?

Viktor Busko

@Lighttree

Hi guys, what "crossed" items means in this issue:

https://github.com/canjs/canjs/issues/4115#issuecomment-434448401

Mohamed Cherif Bouchelaghem

@cherifGsoul

@Lighttree The crossed packages means are working with IE11 and dont need to be fixed

Viktor Busko

@Lighttree

ah great

Where communities thrive

People

Repo info

Activity