These are chat archives for ractivejs/ractive

5th
Nov 2017
lazylester
@lazylester
Nov 05 2017 15:30
I noticed that the docs here: https://ractive.js.org/api/#component-files don't mention the $TEMPLATE and $CSS references. But they appear to be required, isn't that so? If so I'll generate a PR for the docs.
kouts
@kouts
Nov 05 2017 15:33
I think this is an ractive-bin-loader specific thing
lazylester
@lazylester
Nov 05 2017 15:37
Is there any other way, other than ractive-bin-loader for component files to be loaded?
Joseph
@fskreuz
Nov 05 2017 15:39
https://ractive.js.org/integrations/#loaders (a bit dated. working on getting them up to speed with the latest tech).
Cerem Cem ASLAN
@ceremcem
Nov 05 2017 15:39
@lazylester you mean, a way to use with webpack?
lazylester
@lazylester
Nov 05 2017 15:39
@ceremcem yes, with webpack
Cerem Cem ASLAN
@ceremcem
Nov 05 2017 15:40
ok, I'm out :smile:
Joseph
@fskreuz
Nov 05 2017 15:40
Also, what do you mean by "any other way" exactly?
lazylester
@lazylester
Nov 05 2017 15:42
well @kouts mentioned that $TEMPLATE and $CSS are ractive-bin-loader specific. But I thought this was the only way to load ractive components (being a complete noob on component files).
Joseph
@fskreuz
Nov 05 2017 15:45
Back in the day, component files were constructed by parsing the template, evaluating the JS (to get the component definition), and then appending the bits that were defined in the markup (the template, styles and <link>ed component imports.
When bundlers came, you can't evaluate source to get a constructor. And instead of lugging in a full JS parser (acorn, esprima, etc), what bin loader does is look for $TEMPLATE and $CSS instead, and replace accordingly.
lazylester
@lazylester
Nov 05 2017 15:49
so bottom line... are $TEMPLATE and $CSS always required? Or is it just with ractive-bin-loader?
since I'm only using ractive-bin-loader I'm not sure what other possibilities there are.
Joseph
@fskreuz
Nov 05 2017 15:51
As far as I know, only loaders that use Ractive's bin requires $TEMPLATE and $CSS. That would be the webpack loader (https://github.com/ractivejs/ractive-bin-loader) and rollup loader (https://github.com/ractivejs/rollup-plugin-ractive-bin )
The older, runtime-based loaders, don't require the special vars.
lazylester
@lazylester
Nov 05 2017 15:53
I see, ok, thanks
Cerem Cem ASLAN
@ceremcem
Nov 05 2017 16:12
would it be good to have filters, like :
r = new Ractive({
    data: {
        foo:{
            bar: [
                {x: 1},
                {x: 2}, 
                {y: 3},
            ]
        }
    }
})

console.log(r.get('foo.bar.*.x')); // expecting [1, 2]
console.log(r.filter('foo.bar.*.x')) // expecting [{x: 1}, {x: 2}]
console.log(r.filter('foo.bar.*.x > 1')) // expecting [{x: 2}]
Joseph
@fskreuz
Nov 05 2017 16:14
Would be weird if you stuck multiple wildcards :D
Cerem Cem ASLAN
@ceremcem
Nov 05 2017 16:15
like what?
Chris Reeves
@evs-chris
Nov 05 2017 16:16
I can say you probably don't want to do the last one where there is parsing and eval
but you could pass a filter function as another arg
there is actually code for pattern observers that you could hook into to achieve this
Joseph
@fskreuz
Nov 05 2017 16:18
oooh
Chris Reeves
@evs-chris
Nov 05 2017 16:19
multiple wildcards might get weird if you have a very organic data structure that returned bizarrely mixed results
Cerem Cem ASLAN
@ceremcem
Nov 05 2017 16:21
for example, filtering two (or more) level deep arrays?
like foo.bar.*.x.*.y.*.z.*.length() > 5?
I was actually after a filter syntax for my application which will use this for recursively get JSON documents from the database
then I thought that would be useful in Ractive too
like in first working version here
Chris Reeves
@evs-chris
Nov 05 2017 16:24
get with wildcards has actually been requested, but nobody could settle on how the results should come back
Joseph
@fskreuz
Nov 05 2017 16:26
:point_up: that exactly.
Chris Reeves
@evs-chris
Nov 05 2017 16:26
because in order to access the site values again, or at least be able to update them, you also need the keypath
you could do a reducer that was basically a one off pattern observer, so the callback would get the value, keypath, and wildcards for each match
Cerem Cem ASLAN
@ceremcem
Nov 05 2017 16:29
I feel like I'll understand what you mean :)
basically I should build a function - like you did before - to get the filtered stuff
for example, Ractive.prototype.getFiltered(keypathWithFilterSyntax)
Chris Reeves
@evs-chris
Nov 05 2017 21:10
@ceremcem here's an example of using the star functionality built into models to reduce a matching set of keypaths into a map of keypath -> value
you could just as easily throw the values into an array
the reducer can conveniently handle further filtering by simply not aggregating matches if they don't match a further conditional
Cerem Cem ASLAN
@ceremcem
Nov 05 2017 21:23
:tada:
you mean "further filtering" like this?
Chris Reeves
@evs-chris
Nov 05 2017 21:24
exactly
Cerem Cem ASLAN
@ceremcem
Nov 05 2017 21:25
this tool/function seems bloody convenient. will you include this into Ractive by default?
Chris Reeves
@evs-chris
Nov 05 2017 21:27
it's a possibility
it may factor out some internal code, which would make it pretty easily justifiable