These are chat archives for ractivejs/ractive

6th
Nov 2017
Chris Reeves
@evs-chris
Nov 06 2017 01:53
question of the day: with dynamic computations e.g. this.compute('foos.*.imaginaryProp', ctx => ...) would you prefer the computation to be shadowed by the actual property, should it be set? That would allow for memoization.
The alternate of having the computation shadow the data, as happens at root, feels a little weird to me.
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 01:55
would you give an example?
Chris Reeves
@evs-chris
Nov 06 2017 01:56
with the above computation defined and no foos.0.imaginaryProp in existence, a computation would be created using the computed definition
setting foos.0.imaginaryProp could call the computed setter if available or replace the computation with plain data
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 02:00
upps, this.compute is something different from "Computed Properties", I guess
Chris Reeves
@evs-chris
Nov 06 2017 02:11
well, proposed-ish in #3120
just thinking about possible implementations
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 02:18
a-ha! would it be somewhat related with ractivejs/ractive#3126
because as a result, I want to get an object that is computed by merging two objects (one is readonly and the other is read/write) dynamically
Chris Reeves
@evs-chris
Nov 06 2017 02:32
it could be
if you need separate namespaces, dynamic nested computations would be a solution
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 03:29
is https://github.com/ractivejs/ractive/issues/1583#issuecomment-342037241 related with the question of the day, or am I missing the point totally?
Chris Reeves
@evs-chris
Nov 06 2017 03:30
that is related
I guess it could be an option, whether to allow replacing the computation with plain data or to use a setter
Matt Granmoe
@granmoe
Nov 06 2017 19:09
Anyone know if there is a webpack equivalent of this? https://github.com/rollup/rollup-plugin-ractive
Chris Reeves
@evs-chris
Nov 06 2017 19:12
looks like there may be some other options if it doesn't
Matt Granmoe
@granmoe
Nov 06 2017 20:00
I'll try those, too. I tried ractive-loader but had issues
Matt Granmoe
@granmoe
Nov 06 2017 20:21
So here's the problem I'm facing...I'm trying to just set up the simplest possible hello world ractive + webpack app, but I can't get my top level ractive component to render anything. Code to follow
import Ractive from 'ractive'
import Template from './index.html' // pre-parsed via ractive-loader

new Ractive({
  el: '#app',
  // el: document.body,
  // el: 'body',
  template: Template,
  // template: require('./index.html'),
  // template: '<p>HI</p>',
  data: {
    screen: 'main'
  },
  oninit: function() {
    console.log('hi')
  }
})
As you can see, I've tried many different variations of this
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 20:22
there is a starter repo for this purpose: https://github.com/evs-chris/ractive-webpack-starter
did you look at that?
Matt Granmoe
@granmoe
Nov 06 2017 20:23
haven't seen that, taking a look...
Also, I just tried this, and it renders nothing, so I may have bigger problems:
new Ractive({
  el: document.body,
  template: '<p>DALFKJSDLFKSDFLKJ</p>'
})
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 20:24
okay, take it easy. take a deep breath :)
Matt Granmoe
@granmoe
Nov 06 2017 20:24
haha :)
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 20:25
we all use Ractive. I can tell you it is working :)
I'm not using webpack, so I can not help on this bit, but I do wonder how come this line does something useful: import Template from './index.html'
is it webpack specific, or did you just made it up? :)
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 20:30
apparently you should tell the webpack which loader (ractive-bin-loader, for example) to use while importing a "module"
anyways, the starter repo should be enough to get up and running
Matt Granmoe
@granmoe
Nov 06 2017 20:30
Here's the backstory
I'm attempting to help my employer convert from ractive to react. For various reasons, we need to first convert from rollup to webpack. Then we'll start replacing ractive components with react components.
But I can't get the most trivial example to render using ractive and webpack
and that repo you sent is way different than the patterns in our codebase
and buble? Really? Why?
why that instead of babel
and what are these magic globals?
template: $TEMPLATE,
css: $CSS,
I don't want to write code like that
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 20:33
hmm. we have an interesting situation here...
Matt Granmoe
@granmoe
Nov 06 2017 20:35
Here's the kind of pattern that exists in this codebase:
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 20:35
correct me if I'm wrong: you are already a Ractive user and want to switch to React.
Matt Granmoe
@granmoe
Nov 06 2017 20:35
import Template from "./template.html";

export default Template.extend({
    data: {
...
    },
    oninit() {
...
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 20:35
in the process, you also change your builder from Rollup to Webpack?
Matt Granmoe
@granmoe
Nov 06 2017 20:36
yep, the webpack switch must come first because...reasons
eventual target is react + webpack
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 20:36
okay okay, wait here
do you have a react application that works with webpack yet?
...a starter application...
I mean, you are talking about a complete rewrite, aren't you?
Matt Granmoe
@granmoe
Nov 06 2017 20:39
Incremental rewrite
but yes
I've written a lot of react apps...but have little experience with ractive
I have successfully gotten the two to live side-by-side in the same app, but that was relying on rollup

Let's backup, though...I can't even get hello world to work with ractive and webpack. For example:

```js

import Ractive from 'ractive'

new Ractive({
  el: document.body,
  template: '<p>DALFKJSDLFKSDFLKJ</p>'
})
^ Why would that not work?
webpack serves up my index.html, but then the component doesn't render into it at all
Joseph
@fskreuz
Nov 06 2017 20:41
(reads thread)
Any parser/compiler errors?
Matt Granmoe
@granmoe
Nov 06 2017 20:47
None, but I haven't tried with --verbose, one sec...
Joseph
@fskreuz
Nov 06 2017 20:47

and buble? Really? Why?

It's simpler and comes with everything that we need. Babel does just fine. But we just want the banana, not the gorilla holding the banana, and the entire jungle. :joy:

Cerem Cem ASLAN
@ceremcem
Nov 06 2017 20:48
@granmoe would you provide the full code you are trying to run?
...hopefully via a github repo?
Matt Granmoe
@granmoe
Nov 06 2017 20:49
nope, nothing more with verbose
OK, will upload to github
understood re buble
Joseph
@fskreuz
Nov 06 2017 20:53

and what are these magic globals?

Older Ractive loaders ran during runtime (ractive-load, rvc, etc). They eval'ed the component's script to get the options, and tacked on the parsed template and css, and passed it to Ractive.extend(). But you can't do that during build-time unless you pull in full-blown parser like Esprima or Acorn to manipulate JS source. Magic variable replacement was the easier option.

The common ongoing theme across @Rich-Harris 's tools: Just the banana. Not the gorilla, not the jungle. :grin:
And oh, "batteries included" :+1:
Matt Granmoe
@granmoe
Nov 06 2017 21:00
I see
lazylester
@lazylester
Nov 06 2017 21:32
@granmoe have you looked in the output.js file to see if your template got compiled in there? There's a lot of webpack stuff in there but your template should be there too. just search for the text in your template.
(output.js or whatever your output file is configured for)
and is that output.js file inserted into the index.html?
Chris Reeves
@evs-chris
Nov 06 2017 21:35
also, where are you sourcing ractive in the import Ractive from 'ractive';?
Matt Granmoe
@granmoe
Nov 06 2017 21:42
thanks for the help guys, I think I may have found the issue, validating now
nevermind...that wasn't the issue :-)
Matt Granmoe
@granmoe
Nov 06 2017 21:52
Cerem Cem ASLAN
@ceremcem
Nov 06 2017 22:10
@granmoe at the moment there is no bundle.js is created, is there?
Matt Granmoe
@granmoe
Nov 06 2017 22:31
it's in-memory with webpack-dev-server
which is expected
Chris Reeves
@evs-chris
Nov 06 2017 22:33
this issue in your hello world repo is that you're targeting an element that doesn't exist yet
drop the bundle script at the bottom of the body and you're golden
Matt Granmoe
@granmoe
Nov 06 2017 22:35
oh jesus....
facepalm
Or I could use defer, I guess
I knew it would be something super simple :-)
yep, that fixed it :D
wow....that was quite an emotional journey, and I thank everyone that participated
Chris Reeves
@evs-chris
Nov 06 2017 22:37
:laughing: