These are chat archives for canjs/canjs

12th
Jun 2015
Justin Meyer
@justinbmeyer
Jun 12 2015 00:17
import connect from "can-connect";
import "can-connect/data/url/";
import "can-connect/constructor/";
import "can-connect/constructor/store/";
import fixture from "can/util/fixture/";

// A connection that gets todos data
var todosConnection = connect(["constructor-store","constructor","data-url"],{
  url: "/todos"
});

// Trap ajax requests to return and modify the following `todo` object.
var todo = { 
    id: 5, 
    name: "do the dishes"
};
fixture({
    "GET /todos/{id}": function(){
        todo.date = (+new Date());
        return todo;
    },
    "PUT /todos/{id}": function(request){
        todo.name = request.data.name;
        return {name: request.data.name, date: +new Date()};
    }
});

var makeTodoNamer = function(id){
    var element = document.createElement('div');
    var todo;

    var update = function(){
        element.firstChild.value = todo.name;
        element.childNodes[2].innerHTML = todo.date % 1000;
    };

    element.innerHTML = "<input/><button>X</button><span/>";

    todosConnection.get({id: id}).then(function(retrievedTodo){
        todo = retrievedTodo;
        Object.observe(todo,update, ["update"] );
        todosConnection.addInstanceReference(todo);
        update();
    });

    element.childNodes[1].onclick = function(){
        Object.unobserve(todo, update, ["update"] );
        todosConnection.deleteInstanceReference(todo);
        element.parentNode.removeChild(element);
    };
    element.firstChild.onchange = function(){
        todo.name = this.value;
    };

    element.firstChild.onkeypress = function(ev){
        if(ev.keyCode === 13) {
            todo.name = this.value;
            todosConnection.save(todo);
        }
    };

    return element;
};


document.getElementById('maker').onclick = function(){
    var element = makeTodoNamer(5);
    document.body.appendChild(element);
};
this is a can-connect example, done w/o can.Map
it uses connection.addInstanceReference to keep things in a store, and Object.observe to bind on them
Jani Mikkonen
@rasjani
Jun 12 2015 12:15
Hiya, some time ago i promised to do a small blogpost about how to use canjs with webpack ..
blogpost is not yet written - but i had some spare time and i wrote working example on that topic @ https://github.com/rasjani/canjs_webpack
canjs part is very pretty but the main purpose is to actually just show how to build canjs project with webpack so it should be sufficient .. actual blogpost coming next :)
Diana Whitten
@hurgleburgler
Jun 12 2015 14:32
@/all When building a component with CanJS ... is there a way to entirely replace the custom TAG in your dom with the contents of its template?
Matthew Phillips
@matthewp
Jun 12 2015 14:39
@rasjani awesome
Alexis Abril
@alexisabril
Jun 12 2015 14:54
@hurgleburgler You could call replaceWith on the inserted event(I’m not sure how to get a handle to the template offhand), however this sounds like something you could use can.view.attr() for. If you have a use case, it would provide more insight
Justin Meyer
@justinbmeyer
Jun 12 2015 15:28
@hurgleburgler could you use a partial?
is a component necessary
@rasjani awesome. But if I might ask, why are you using webpack instead of StealJS?
Gerard Finnerty
@halcyonandon
Jun 12 2015 18:32
@justinbmeyer I'm using systemjs and traceur (switching to babel) directly. I saw your talk on stealjs at the palo alto meet up. Since then, I inquired about the state of stealjs and was told it wasn't ready for production yet. Is steal ready for primetime? Is there a blog post or something that speaks to the advantages of steal over using systemjs directly?
Justin Meyer
@justinbmeyer
Jun 12 2015 18:33
@halcyonandon steal is used by m.samsclub.com
it's primetime
doesn't compare systemjs directly
oh, btw, for steal questions: https://gitter.im/stealjs/steal
opolyo01
@opolyo01
Jun 12 2015 18:35
@justinbmeyer I have a project that have React components and Can components, and client side loader like steal would not be able to transform JSX in React
Justin Meyer
@justinbmeyer
Jun 12 2015 18:35
but in short, StealJS has a way better build, can export your modules, and load from npm
@opolyo01 why not?
I assume there are JSX transpilers in pure JS
opolyo01
@opolyo01
Jun 12 2015 18:36
can steal does JSX transformation?
Justin Meyer
@justinbmeyer
Jun 12 2015 18:36
I bet someone has already written one for SystemJS
(which stealjs can use)
opolyo01
@opolyo01
Jun 12 2015 18:36
no, it is not pure JS
it is react specific thingy
Matthew Phillips
@matthewp
Jun 12 2015 18:36
if you use babel it will transpile jsx as well
Justin Meyer
@justinbmeyer
Jun 12 2015 18:37
@opolyo01 yeah, I know
for example, stealjs can load templates, Less, etc
opolyo01
@opolyo01
Jun 12 2015 18:37
it would be awesome if steal could load jsx
Justin Meyer
@justinbmeyer
Jun 12 2015 18:37
the same technique can be used to do jsx
but it sounds like bable transpiles jsx anyway
Matthew Phillips
@matthewp
Jun 12 2015 18:38
@opolyo01 it can, we have some React users who hang out in stealjs/steal on gitter
Gerard Finnerty
@halcyonandon
Jun 12 2015 18:38
@justinbmeyer thanks, what do you mean by load from npm? and export modules? I load systemjs from npm and export modules to where/what? bundling?
opolyo01
@opolyo01
Jun 12 2015 18:38
@matthewp any link to example of this?
Justin Meyer
@justinbmeyer
Jun 12 2015 18:39
@halcyonandon maybe read that article
steal lets you files from npm
w/o configuration
is an example of writing a less translate hook
something very similar would just have to be done for JSX
Gerard Finnerty
@halcyonandon
Jun 12 2015 18:40
"StealJS can export your project into commonly used formats and platforms which can be used to create distributables that can be used in almost any situation:" isn't this what systemjs does?
Justin Meyer
@justinbmeyer
Jun 12 2015 18:40
how can you use systemjs to export your project?
afaik, you can't use SystemJS to transpile a ES6 app to CJS, AMD, etc
you can use SystemJS just to load those modules
this allows something like: https://github.com/bitovi-components/bit-tabs
to be used by people using Browserify / RequireJS or plain script tags
this is huge in big orgs b/c you'll have a lot of different projects using different module loaders, but still want to share code
And stealjs goes beyond transpiling just JS, it takes care of LESS / CSS / templates too
so even though bit-tabs is using LESS
and ES6
Matthew Phillips
@matthewp
Jun 12 2015 18:43
@opolyo01
I think you wanted a react demo app, i can push one, i have one for testing
Justin Meyer
@justinbmeyer
Jun 12 2015 18:44
A browserify user can still require the exported CSS
opolyo01
@opolyo01
Jun 12 2015 18:44
@matthewp yes please :)
hopefully adding one config setting like in webpack.config.js would simply transform those JSX files --> { test: /.js$/, loader: 'jsx-loader?harmony' }
Matthew Phillips
@matthewp
Jun 12 2015 18:49
that's gross :)
ours is much simpler
opolyo01
@opolyo01
Jun 12 2015 18:50
wait, so all you need is just this -- "transpiler": "babel",
Matthew Phillips
@matthewp
Jun 12 2015 18:52
you need the babelOptions as well
but in a future release we'll probably remove the need for that
opolyo01
@opolyo01
Jun 12 2015 18:52
ok looks promising, thanks
Matthew Phillips
@matthewp
Jun 12 2015 18:52
and babel will be default so actually no config at all needed :)
then you also get all of the benefits that steal-tools provides like optimized production builds
see the videos on stealjs.com
Alexis Abril
@alexisabril
Jun 12 2015 22:25
Shouldn’t can.List.prototype.filter, etc return the same type of list?(instead of always a new can.List)
var Todo = can.Map.extend();
var todos = new Todo.List();

var filtered = todos.filter(function() { return true; });
console.log(filtered instanceof Todo.List); //false
dylanrtt
@dylanrtt
Jun 12 2015 22:39
@alexisabril I agree it probably should, but I guess it doesn't currently. Somebody I work with overwrote the filter method of many model lists to get it to work the way you'd expect
Alexis Abril
@alexisabril
Jun 12 2015 22:44
yeah, that seems straightforward

https://github.com/bitovi/canjs/blob/master/list/list.js#L1102 should be

var filteredList = new this.constructor();

possibly...

dylanrtt
@dylanrtt
Jun 12 2015 22:45
yeah like in https://github.com/bitovi/canjs/blob/master/map/list/list.js#L5
I am not sure what that is used for since it doesn't run on a normal filter
Alexis Abril
@alexisabril
Jun 12 2015 22:45
yeah, this is a bug
dylanrtt
@dylanrtt
Jun 12 2015 22:54
the example I linked to I guess is a plugin but it's... deprecated
http://canjs.com/docs/can.Map.List.html