These are chat archives for ractivejs/ractive

24th
Oct 2017
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 01:19
here we can fetch the component and load it async, yes. but we assign the component('s promise) to Ractive.components.waitForIt because we know what we can be possibly sent beforehand and it's waitForIt component right now. What if we don't know anything about component name until fetching it from the source?
Joseph
@fskreuz
Oct 24 2017 01:30
In what case would the requiring component not know about the async component?
Joseph
@fskreuz
Oct 24 2017 01:37
What comes into mind initially is when the component is registered after the anticipating component is rendered.
new Ractive({
  target: 'body',
  template: `
    <waitForIt>
      {{#partial async-loading}}Loading async component...{{/partial}}
    </waitForIt>
  `
})

// some time later...
import('waitForIt.html').then(constructor => {
    Ractive.components[someDynamicName] = constructor
})
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 01:40
isn't it the same thing with using setTimeout, like this?
Joseph
@fskreuz
Oct 24 2017 01:41
yeah, initially wrote it that way, but fetch was shorter :D
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 01:41
but, the problem is, my example is not working :/
Joseph
@fskreuz
Oct 24 2017 01:43
I think that's not supported :grin: I think the current implementation needs to know in advance the names. The async part is when it's loaded.
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 01:48
okay. I can't discuss it any further, because I still am frightened of your avatar.
Joseph
@fskreuz
Oct 24 2017 02:00
muhahaha! :D
Chris Reeves
@evs-chris
Oct 24 2017 02:25
You could have a dynamic async component macro, but it's slightly different than async components. More <Async component={{name}} />, where Async is a macro.
Joseph
@fskreuz
Oct 24 2017 02:39
oooh
Chris Reeves
@evs-chris
Oct 24 2017 04:20
how's this for a start? warning - I suck at decent docs and examples
lazylester
@lazylester
Oct 24 2017 04:35
looks good, Chris. It's not necessary to import Ractive into views and components, though, as it's done globally inside webpack.config.js.
Chris Reeves
@evs-chris
Oct 24 2017 04:43
true, but if you leave the import in, you can switch to bundling Ractive if you want to
lazylester
@lazylester
Oct 24 2017 04:49
Probably it's due to my poor understanding, but from reading the compilation output from webpack-dev-server it looks to me as if Ractive is bundled even if it's not imported into views and components. I thought the global config was simply a convenience so you don't have to import the same module everywhere.
Chris Reeves
@evs-chris
Oct 24 2017 04:54
ah, no, the global is a resolution thing
it's the only way I could find that lets you bundle or use a global external ractive
it also makes it easier to use other bundlers if you want to split something out into another lib
lazylester
@lazylester
Oct 24 2017 04:56
When I look at the compilation output, bundle.js is 322kB, even when Ractive is not imported into components and views. Doesn't this mean that it's bundled?
Chris Reeves
@evs-chris
Oct 24 2017 05:08
believe it or not, that's mostly fluff that the webpack dev server pulls in
if you run npm run build:dev, you can see the actual relevant output
hmr and livereload are apparently pretty heavy features
lazylester
@lazylester
Oct 24 2017 05:11
Wow that's a lotta fluff!
Chris Reeves
@evs-chris
Oct 24 2017 05:13
:laughing:
lazylester
@lazylester
Oct 24 2017 05:13
If I npm run build:dev with, or without importing Ractive into views and components, the bundle.js file is the same length (9.75kB). Where is Ractive?
Chris Reeves
@evs-chris
Oct 24 2017 05:13
it gets pulled in the index from jsdelivr
cdn and whatnot
build/index.html
lazylester
@lazylester
Oct 24 2017 05:14
that's too much magic for my tired brain!
Chris Reeves
@evs-chris
Oct 24 2017 05:15
that's fair. Took me nigh a full day of faffing around with webpack to get something that didn't require a shim. If you drop the global in the webpack config, your bundle will magically include ractive too
the secret to not fighting webpack too much is to skip google and go straight to https://webpack.js.org
if only I had learned that sooner
lazylester
@lazylester
Oct 24 2017 05:17
Thanks for the insight, as always, Chris. Signing off for the night..... zzzzz
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 08:13

how's this for a start? warning - I suck at decent docs and examples

I felt like I know nothing about Ractive

Cerem Cem ASLAN
@ceremcem
Oct 24 2017 09:03
the single page components' usages reminds me @MartinKolarik 's https://github.com/jsdelivr/www.jsdelivr.com
...which is quite confusing to me too :)
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:19
How could it be possible for Webpack to resolve the dependencies of a Ractive component that requires some other Ractive component? Is it possible?
lazylester
@lazylester
Oct 24 2017 12:28
@ceremcem yes, it's possible. Webpack scans the files for import statements, so a Ractive component that requires another Ractive component must import it, then webpack knows.
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:33
what import statement? I don't ever use it?
lazylester
@lazylester
Oct 24 2017 12:34
are you using webpack?
that's where component dependencies need to be explicitly declared with an import statement
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:35
nope
lazylester
@lazylester
Oct 24 2017 12:40
@evs-chris maybe the example app should have a second component that is imported into the first one, to clarify how it's done?
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:41
Basically we have 2 components, myComponent and somethingElse where myComponent uses somethingElse under the hood. we can register these components in the app by Ractive.components.myComponent = ... and Ractive.components.somethingElse = .... My Ractive application works perfectly well with this setup. But, when webpack comes into play, it needs to know that I use a template system and the template has "components" where one component requires the other's existence. That's why I thought webpack is unable to resolve this kind of dependencies by its design.
Joseph
@fskreuz
Oct 24 2017 12:43
Usually, one component would have an import OtherComponent from './that/component.html'. Then build tools will convert ./that/component.html into a suitable form so that it can be represented as OtherComponent. Then you can register that on the depending component.
So you explicitly mention in the depending component that it depends on the other component.
// app.component.html
<div>
  <OtherComponent />
</div>
<script>
  import Ractive from 'ractive'
  import OtherComponent from './other.component.html'

  export default Ractive.extend({
    components: { OtherComponent }
  })
</script>
or something like that
not sure if the new Ractive tools support <link rel="ractive" name="OtherComponent" href="path/to/other.component.html"> for a more template-y approach. That's how I used to do it in the older tools.
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:48
what is the motivation behind single-file-components? why do you prefer this type?
lazylester
@lazylester
Oct 24 2017 12:49
precompiling of templates for speed
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:49
that can't be
Joseph
@fskreuz
Oct 24 2017 12:49
Code co-location. I don't have to look far and hard for the logic tied to the template. The only time I venture out to find logic is when I look at non-component stuff (i.e. API modules)
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:50
what if a component is composed of some javascript, some html, some css and some images (svg/png)?
Joseph
@fskreuz
Oct 24 2017 12:51
Ractive supports scoped styles on component files too :D https://ractive.js.org/api/#example-component-file
lazylester
@lazylester
Oct 24 2017 12:51
@ceremcem "that can't be" ? I hope it is. I just converted a whole app to this new architecture to achieve performance improvement with precompiled templates.
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:51
never mind, it's too broad (in stackoverflow's terms)
lazylester
@lazylester
Oct 24 2017 12:52
why do you say "that can't be"?
Joseph
@fskreuz
Oct 24 2017 12:52
Although pre-compilation of CSS has been it's weakness. There's no tools I know of that does that for Ractive (will probably build one soon-ish). I fall back to separate sass files to get all the Bootstrap compilation goodness.
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:53
that can't be, because precompilation is not something ractive supports by a default mechanizm. there is only a Ractive.parse function available for this purpose and we are free to use it as we like.
lazylester
@lazylester
Oct 24 2017 12:54
I think Ractive.parse is invoked when a webpack component is imported.
My templates are precompiled because of webpack magic
Joseph
@fskreuz
Oct 24 2017 12:55
The CLI tool supports it. The webpack loader does it. I know the rvc loader does it with RequireJS (used it around 4 years ago), and a more primitive rv that does only templates, not whole component files.
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:56
for example, I compile my components by myself in the process of browserifying: https://github.com/aktos-io/scada.js/blob/master/lib/aea/ractive-preparserify.ls#L106
lazylester
@lazylester
Oct 24 2017 12:57
well yes, you can certainly build it for yourself, but webpack does it for you
Joseph
@fskreuz
Oct 24 2017 12:58
If you write in component file format, there are tools that allow you to pre-compile whole components (rcu) and turn them into various formats (rcu-builders). More recently, Ractive's cli supports some of those functionality, which I think the webpack loader uses under the hood. :D
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 12:58
webpack does it for us, if we use single file components?
lazylester
@lazylester
Oct 24 2017 12:59
yes
lazylester
@lazylester
Oct 24 2017 12:59
it's a beautiful thing!
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 13:00
so if I don't wan't to use the single file component format while using webpack, I need to precompile the components all by myself again. hmm. okay, that was just a curiosity.
lazylester
@lazylester
Oct 24 2017 13:02
single file components also facilitates re-usability
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 13:02
so, back to the question, even though Ractive does not force us to use a bundling system, if we want to make it possible to fetch dependencies on demand, we should use webpack (I still don't know how) and the single file format, along with import statements

single file components also facilitates re-usability

how?

lazylester
@lazylester
Oct 24 2017 13:03
you can import components anywhere they're needed, and there's just one source file
it's possible without webpack, but single file components facilitates this
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 13:05
it doesn't seem like a good thing - the "one big fat" file
lazylester
@lazylester
Oct 24 2017 13:06
why not?
one big file is what our backends normally make, no? e.g. Rails asset pipeline.
but with webpack, and single file components, it appears that load-on-demand is also possible. I haven't tried this though.
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 13:13
it's hard to navigate, it's editor dependent, it's not flexible because a component might need to provide some other assets, like images
lazylester
@lazylester
Oct 24 2017 13:15
... and it's entirely optional!
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 13:15
yes, it is. that's one of the biggest reasons why I love Ractive :)
Joseph
@fskreuz
Oct 24 2017 13:17
:+1:
lazylester
@lazylester
Oct 24 2017 13:42
@ceremcem I think I just understood your "one big fat file" comment... but it doesn't matter in dev b/c there's still source mapping, so when you're debugging, it looks like many files in the browser
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 13:57
@lazylester fyi: I have a so question if you could help on this.
lazylester
@lazylester
Oct 24 2017 14:03
@ceremcem the short answer to your so question is "yes". But I'm not sure how it's done, as I haven't done it. I think @evs-chris sample app pulls components on demand, take a look.
... leaving for a few hours...
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 14:44
@evs-chris https://ceremcem.github.io/async-component-test/ works as intended, but https://ceremcem.github.io/async-component-test/buggy.html is buggy as async-loading partial is not disappearing.
source code is at this point.
basically removing these lines causes this problem.
image.png
image.png
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 15:00
refactored a bit: removed lines are here. and this is the relevant commit.
Chris Reeves
@evs-chris
Oct 24 2017 15:08
the loading partial is going away for me on the buggy link?
also wanted to note that the Ractive bin fully supports loading external templates (as partials), CSS, and script using the relevant link and script tags, so yes components are in the single file format by default, but there's tools available for when they start getting too big to stay comfortably in one file
there's also a hook intended for style preprocessing, but I haven't fully explored it other than to see that it works for a simple test
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 15:21
it's odd
image.png
where buggy2.html works okay:
image.png
Chris Reeves
@evs-chris
Oct 24 2017 15:46
that is odd... my first guess would be stale cache. If you go incognito or to another browser is it still buggy?
Joseph
@fskreuz
Oct 24 2017 15:48
Open dev tools > Network tab > Disable Cache. Leave dev tools open. :thumbsup:
Chris Reeves
@evs-chris
Oct 24 2017 15:51
or remote power cycle the datacenter
never can remember the key combo for that
Joseph
@fskreuz
Oct 24 2017 16:02
:D
Joseph
@fskreuz
Oct 24 2017 16:09
sudo reboot :D
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 16:59
hmm. incognito window solved the problem. :+1:
Joseph
@fskreuz
Oct 24 2017 17:09
Incognito all the things! :D
kouts
@kouts
Oct 24 2017 17:17
I'm too busy these days with work and stuff, I'm glad to see great things are coming to Ractive!
meanwhile anyone interested in a modal - popup, I've finally made it into a plugin: https://www.npmjs.com/package/ractive-modal
Joseph
@fskreuz
Oct 24 2017 17:19
:thumbsup: feel free to send a PR to the docs repo to get it added to the plugin list.
kouts
@kouts
Oct 24 2017 17:19
thanks @fskreuz will do!
Chris Reeves
@evs-chris
Oct 24 2017 17:46
nice!
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 20:12
@evs-chris here is an app and here is the screenshot
image.png
I would expect the github link appear after the async component, not before
is there anything extraordinary here?
Chris Reeves
@evs-chris
Oct 24 2017 20:15
not at all
all of the elements involved are inline, so none of them cause a wrap/newline
ractive does not require or automatically provide a root block element for components
you can throw a div in there somewhere to remedy that - either around the async placeholder or as part of the component
unlike most other vdom libraries, you can even have a component that is just text - no wrappers
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 20:25
if I place a div around the async placeholder, it is shown in the correct order
but if I place a div in the component, the order is the same as the first one
image.png
Chris Reeves
@evs-chris
Oct 24 2017 20:31
ah! I think I misread your first message... that is indeed a bug
Chris Reeves
@evs-chris
Oct 24 2017 20:45
...which is now fixed on edge
I found another issue with 0.9.6 when switching one of my larger apps, so there will probably be a bugfix 0.9.7 shortly
Joseph
@fskreuz
Oct 24 2017 21:23
Do we have an existing org name for ractive on npm?
Chris Reeves
@evs-chris
Oct 24 2017 21:25
ractivejs
I tried to make the org own ractive, but apparently that's not how orgs work
Cerem Cem ASLAN
@ceremcem
Oct 24 2017 21:26

...which is now fixed on edge

:+1: seems fixed...

Joseph
@fskreuz
Oct 24 2017 22:15
@evs-chris :thumbsup: Just realized that org names will affect package names and module ids. :D
Chris Reeves
@evs-chris
Oct 24 2017 22:53
yeah... I've considered using it for "official" plugins so anyone in the org can update them
Chris Reeves
@evs-chris
Oct 24 2017 23:02
Then instead of ractive-event-tap, we'd have @ractivejs/event-tap
which isn't exactly pretty, but it's waaay easier to give publish rights