These are chat archives for ractivejs/ractive

25th
Oct 2017
Joseph
@fskreuz
Oct 25 2017 00:06
@ractivejs/core will be a common name soon... :D
Joseph
@fskreuz
Oct 25 2017 00:45
UMD headers when using scoped package names look craaazy! :D
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('qunit'), require('@ractivejs/core'), require('@ractivejs/adaptor-promise')) :
    typeof define === 'function' && define.amd ? define(['qunit', '@ractivejs/core', '@ractivejs/adaptor-promise'], factory) :
    (factory(global.QUnit,global.Ractive,global['@ractivejs/adaptor-promise']));
}(this, (function (qunit,Ractive,Adaptor) { 'use strict';
Still works tho. Still one blurb of string. :D
Chris Reeves
@evs-chris
Oct 25 2017 00:53
I'm not sure why I never considered core...
Joseph
@fskreuz
Oct 25 2017 00:55
Not sure what other libs use, but Angular uses it and it's just 4 characters. Also sits beside cli if put in a separate package. :D
Capture.PNG
Martin Kolárik
@MartinKolarik
Oct 25 2017 12:39
@ceremcem what's confusing about single page components? :D
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:13
well, since I'm doing all compile-to-js and compile-to-html stuff by myself (from Livescript and Pug), single-page-components are adding another complexity layer for me
Joseph
@fskreuz
Oct 25 2017 13:14
I may be confusing terminology, but when you say "single-page components", you refer to component files, yes?
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:14
yes
Joseph
@fskreuz
Oct 25 2017 13:14
Ahh
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:15
the component definitions that has only one file which holds all html, css and js stuff
Martin Kolárik
@MartinKolarik
Oct 25 2017 13:15
yeah I was about to ask if you meant that
I personally don't use that too
I thought that by single-page you meant that every page on a website is represented by a component
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:17
maybe I should say single-file-components, not single-page-components
my bad
Martin Kolárik
@MartinKolarik
Oct 25 2017 13:17
single-file components get hard to work with when you start doing more complex stuff and the file gets 500 lines long
plus the problems with preprocessors and linters @fskreuz mentioned above
kouts
@kouts
Oct 25 2017 13:18
I have projects with html and js logic split into two different files but I also have projects with single-file components
Sublime text has a nice feature which lets you open the same file multiple times
which is a life saver
Joseph
@fskreuz
Oct 25 2017 13:19
Yeah tooling. But I remember there's this https://github.com/norcalli/ractiveify
kouts
@kouts
Oct 25 2017 13:19
for big single-file components
Martin Kolárik
@MartinKolarik
Oct 25 2017 13:20
I also hacked together someting to make preprocessors work before but the files getting too long was a bigger issue for me
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:25
@kouts sublime text may have some nice features but want to be able to keep using both my editor and github (ace?)
Martin Kolárik
@MartinKolarik
Oct 25 2017 13:26
also, I found that using sensible naming conventions for css works better than ractive's scoped css in most of my projects
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:27
I never used scoped css too, but how "better" would it be?
Joseph
@fskreuz
Oct 25 2017 13:28
I agree to the CSS naming. I sometimes turn off CSS transform because I use BEM... a lot. :D
Martin Kolárik
@MartinKolarik
Oct 25 2017 13:31
with scoping it becomes harder to do SSR properly and the generated css files are considerably larger
it's definitely nice for small, reusable components though
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:33
@MartinKolarik what do you use for bundling? webpack?
Martin Kolárik
@MartinKolarik
Oct 25 2017 13:33
mostly rollup
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:33
a-ha! someone not using webpack :)
so, how do you handle on-demand dependency transfer? or do you need something like that?
Martin Kolárik
@MartinKolarik
Oct 25 2017 13:35
in my recent projects I started experimenting with completely removing a build step and bundling the necessary files on-demand by the server, which was easier to do with rollup
no, didn't need that so far
Joseph
@fskreuz
Oct 25 2017 13:40

a-ha! someone not using webpack

I also don't use webpack. Never been a fan of config-based build systems. :wink: I use rollup or gobble+rollup for the most part.

on-the-fly loading was also not a thing for me. I keep my apps small (like they should) :D
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:44
what do you mean by "small"?
how many MB's? :)
Joseph
@fskreuz
Oct 25 2017 13:46
A few dozen components. :D
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:48
I end up myself writing MRP/ERP tools, like SAP does with desktop applications
so a single page webapp size is about 8MB (minimized)
that forces me sending dependencies (components and other libraries) incrementally
Martin Kolárik
@MartinKolarik
Oct 25 2017 13:51
if you mean the final app size, then I'm always below 1 MB
in your case splitting to multiple files definitely makes sense
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 13:54
final app size is 2..8MB (app.js) + 1.7MB (vendor.js) + 1.1MB (vendor.css)
Joseph
@fskreuz
Oct 25 2017 14:21
oooh... 2.8mb. that's pretty huge. although, the that's the tradeoff of pre-parsing. the AST, iirc, is around 50% larger than its template form.
Joseph
@fskreuz
Oct 25 2017 15:51
What's the current situation of import() in JS? Does it exist? Polyfill? Scrapped?
Everyone's so into webpack and pre-compilation that I see no more news about native and/or runtime solutions. :D
Chris Reeves
@evs-chris
Oct 25 2017 15:59
it's still in proposal, though the proposal is finalized, I think
it doesn't work at all with acorn-based stuff without a plugin
Chris Reeves
@evs-chris
Oct 25 2017 16:06
based on the spec and comments, I don't think you can polyfill, because it's a statement that looks and mostly acts like a function call
changes to js stopped for a while, and now that they're rolling pretty fast it's getting quite messy for the remaining legacy browsers
Joseph
@fskreuz
Oct 25 2017 16:23
Eeek. Hmm...
Chris Reeves
@evs-chris
Oct 25 2017 18:14
I never had much use for webpack until I started moving my large, hand-coded business apps over and needed to start splitting for load times
dynamic imports and automatic splitting are worth the hassle for large apps with large code
moving a desktop app over and treating single(ish)-file components as an individual form from the old code is marvelous for quick porting
Joseph
@fskreuz
Oct 25 2017 18:21
:thumbsup:
Chris Reeves
@evs-chris
Oct 25 2017 18:37
re #3101, would it be relatively safe to warn about multiple copies of ractive regardless of module env?
I suppose if you're using AMD or CommonJS or a bundle, you won't ever get a window.Ractive, so it shouldn't matter
Joseph
@fskreuz
Oct 25 2017 19:41
The only time this is still a danger is when you load more than 1 Ractive via <script> (which I think is on the dev). With modules, it shouldn't be a danger at all.
Joseph
@fskreuz
Oct 25 2017 19:58
That's unless something let's Ractive out... :D
Chris Reeves
@evs-chris
Oct 25 2017 20:02
I've seen it happen... a Ractive gets out there, stalking amongst the DOM nodes. It isn't pretty. That's why namespaced attributes are afraid to come out of their weird corners of the doctype.
Joseph
@fskreuz
Oct 25 2017 20:05
rofl :joy:
We should have warning messages that sound like that. "A wild Ractive has appeared!" :joy:
Chris Reeves
@evs-chris
Oct 25 2017 20:06
"You are likely to be eaten by a wild Ractive"
has anyone here actually played Zork? I know Pokemon is on the table, but Zork predates me by a good little bit.
Joseph
@fskreuz
Oct 25 2017 20:13
ezgif-1-0d8ca556eb.gif
Chris Reeves
@evs-chris
Oct 25 2017 20:16
"Run! Don't walk from... Ractive! Indescribable... Indestructible... Nothing can stop it!"
Cerem Cem ASLAN
@ceremcem
Oct 25 2017 20:17
image.png
now I scared more and more
Chris Reeves
@evs-chris
Oct 25 2017 20:17
(except creating non-terminating recursive partial structures)
Joseph
@fskreuz
Oct 25 2017 20:18
(And unguarded, recursive adaptor sets)
Chris Reeves
@evs-chris
Oct 25 2017 20:19
:laughing:
Chris Reeves
@evs-chris
Oct 25 2017 20:35
question of the day: when publishing components, should the UMD version assume a global Ractive for ease of use as a script tag?
slightly re-stated - can you use a module system with a dep as either a module or a global?
it looks like it's a one-or-the-other type thing
with hand-assembled UMD, you could check for the global in the prolog bit and use it if it's available, but I don't know that that's a good idea
Joseph
@fskreuz
Oct 25 2017 20:41
Rollup does it that way with its UMD, looks for the dep on the global object using the module name.
If I did import Ractive from 'ractive', it would bundle to something that looks for window.ractive.
I usually end up mapping ractive to Ractive in rollup globals.
Chris Reeves
@evs-chris
Oct 25 2017 21:05
Ah! I'll have to poke at rollup a bit... it's been a while
follow-up: self-registering if global?
Joseph
@fskreuz
Oct 25 2017 21:12
Personally, I prefer explicit registration. Makes component deps explicit. Also keeps it consistent with module systems.
kouts
@kouts
Oct 25 2017 21:12
I agree with @fskreuz on this
Joseph
@fskreuz
Oct 25 2017 21:12
However... self-registration is cleaner if a component is added via <script>. No globals or intermediate namespaces to deal with.
I've been doing the former, but there might be benefit for the latter.
Chris Reeves
@evs-chris
Oct 25 2017 21:14
That's kinda what I was thinking
Joseph
@fskreuz
Oct 25 2017 21:19
I think we can fool Rollup to exporting an undefined. Is this possible, or something of this nature?
const defaultExport = window ? (Ractive.registry.something = thatSomething, void 0) : thatSomething
export default defaultExport
kouts
@kouts
Oct 25 2017 21:38
sooo I was in a need of a popover
so I've created a decorator that renders a component inside a bootstrap popover (thanks @evs-chris and @fskreuz ).
This works for one popover visible at a time which was my requirement and I think this way I can have as many popovers as I want :smile:
Here is the fiddle: http://jsfiddle.net/oqxutq7f/10/
Chris Reeves
@evs-chris
Oct 25 2017 21:49
nice!
Martin Tribo
@martintribo
Oct 25 2017 22:02
Hi all, I'm trying to make a wrapper component with toggable twoway binding. I have data key called twoway, that I pass to the input element's twoway directive. However, when I try <wrapper twoway="false"/>, the data at the wrapper's twoway key doesn't change. Is twoway a reserved directive?
Chris Reeves
@evs-chris
Oct 25 2017 22:04
it is
Chris Reeves
@evs-chris
Oct 25 2017 22:04
twoway and lazy are reserved attrs along with the usual on- as-, and -in-out
Martin Tribo
@martintribo
Oct 25 2017 22:07
Makes sense. I'll use another name for now and pass that to the input element. It'd be nice to have a common pattern for disabling twoway binding in custom components though
Chris Reeves
@evs-chris
Oct 25 2017 22:14
you can use twoway if don't mind doing a bit of template munging in construct
Martin Tribo
@martintribo
Oct 25 2017 22:16
That's very tempting, haha
While I'm here, thanks for your work on Ractive everyone. We've been using it on one of our apps for the past two years. It's been encouraging to see the recent activity.
Chris Reeves
@evs-chris
Oct 25 2017 22:33
I'll take a swing at pulling the twoway flag into a partial in construct, if only out of curiosity. I think it'll be relatively simple.