These are chat archives for ractivejs/ractive

27th
Jul 2018
Chris Reeves
@evs-chris
Jul 27 2018 05:08
I'm playing around with the playground to knock a few things off my wish list
I have planned:
  1. a rollup mode, wherein you can create multiple files, reference node modules, etc and everything will be assembled into a single bundle and sent to the output window
    a. this could potentially support dynamic imports, but that would require a service worker, and is thus not in the immediate future
  2. quick start templates - I get tired of typing out the same things for the few various types of examples
  3. a project export for number 1, because, why not?
  4. custom layouts - I've already implemented a two additional layouts, and the tiled versions use a proper splitter than can be dragged
  5. maybe a data inspector pane - if I can figure out how to hook the first instance creation
Chris Reeves
@evs-chris
Jul 27 2018 05:14
so, QOTD, what would make the playground more useful for you?
Chris Reeves
@evs-chris
Jul 27 2018 05:44
as a side note regarding more established things like jsfiddle and codepen, it looks like jsfiddle is coming back around, but it was pretty weird there for a bit
codepen has had similar issues in the past
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 07:03

from my point of view, most important improvement would be the ones that help adding new examples to the documentation.

  1. According to https://github.com/ractivejs/ractivejs.github.io#conventions, we have to change every tab with 2 spaces when our example is ready. When we need improve examples, we need to do it again. Playground should follow what conventions section says.
  2. As per "quick start templates": Maybe documentation examples could be listed by a dropdown and we select any example from current ones
  3. As per #1: That would be great for both usage perspective and learning perspective (I'm looking for ways to implement such a feature in scada.js)
  4. Documentation should be able to extract examples from Playground urls.
  5. Playground should be able to fetch documents from Gist, I think

I'm just thinking out loud, Playground:

  1. might be designed as a Ractive component, included in Ractive.js.org as an async component.
  2. might be able to be fetched from any Github forks of original Ractive Playground (this would let anyone use any custom Playgrounds in the future)
Chris Reeves
@evs-chris
Jul 27 2018 07:06
right now it does some global stuff with settings and window event listeners that make it a one instance per page thing
you can always frame it in as many times as you need though
for tabs and spaces, you mean the playground currently uses tabs, right? leftovers from before prettier, unfortunately
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 07:09
yes, playground currently uses tabs, and we decided to use two spaces in the examples
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 07:20

right now it does some global stuff with settings and window event listen...

is this a response to "async component" idea?

Chris Reeves
@evs-chris
Jul 27 2018 07:34
yes, it doesn't really work as a standalone component embedded more than once directly on a page
you can stick it in an iframe and communicate via frame.contentWindow.postMessage, though
I think that's more or less how most fiddly things work
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 07:40
in fact, origin of that idea was to let Ractive.js.org decide custom Playgrounds' appearance in a future proof way
it's good to know there is a frame.contentWindow.postMessage method, btw
Arnaud Dagnelies
@dagnelies
Jul 27 2018 07:43
As you've probably seen in my https://dagnelies.github.io/ractive-examples , each example has an icon where you can open it in an editor. The reason I did this editor is because all my examples are stored in a single HTML page. So the editor just reads the file, and using a simple regex, can split the file into a headers, template and script part. It renders the examples by assembling it back the same way. This makes very easy to make stand alone examples.
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 08:04
I didn't notice that you have your own playground. that is so nice!
Arnaud Dagnelies
@dagnelies
Jul 27 2018 08:12
It's a single page example itself :p
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 11:20
I've question
if playground can be able to load modules from npm, then can't we follow exactly the same pattern but load from the same origin rather than npm, so there would no need to use browserify for this purpose?
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 11:30
I mean, shouldn't it be the default method for all kind of webapps?
kouts
@kouts
Jul 27 2018 13:30
@dagnelies I too have to support IE11 so I feel you (coming late to the party)
Joseph
@fskreuz
Jul 27 2018 14:50
The problem with npm on playground is node module resolution.
If a package was written primarily for Node, it and its dependencies will.
This is one reason a certain Karma plugin doesn't do it fully (iirc, it resolves the first level, but it won't resolve descendants).
That's why in RequireJS, the paths config exists. And the spiritual successor in ES modules is the package name maps proposal for bare imports https://github.com/domenic/package-name-maps
Joseph
@fskreuz
Jul 27 2018 14:58
On more advanced playgrounds, they probably create a temporary workspace on the server to pull in all those things. What you see on your browser is just a fancy editor manipulating stuff server-side.
Chris Reeves
@evs-chris
Jul 27 2018 14:59
yeah, I feel like I remember stackblitz saying their stuff was based on docker
I'll hoping rollup resolution will let me bundle everything that is reasonably published
Joseph
@fskreuz
Jul 27 2018 15:01
Or... use jsDelivr's auto-concat feature :D
Chris Reeves
@evs-chris
Jul 27 2018 15:02
does that work for es bundles?
Joseph
@fskreuz
Jul 27 2018 15:03
Not sure 🤔 Let's ask @MartinKolarik :grin:
Chris Reeves
@evs-chris
Jul 27 2018 15:04
also, I'd like to say thanks to the jsDelivr team for being awesome
kouts
@kouts
Jul 27 2018 15:37
@evs-chris I'm playing now with ractive component -id src -o dist and it works fine!
thank you!
the awesomeness is that it doesn't enforce any kind of structure in the component's file <script> tag
Joseph
@fskreuz
Jul 27 2018 15:48
iirc, it uses the <script>section as is, and just pops in the template and css in the code.
kouts
@kouts
Jul 27 2018 15:49
yes!
One question: do I run babel before ractifying the component files (ie on the .ractive.html files) or after they become .js files? I'm doing the second
Joseph
@fskreuz
Jul 27 2018 15:53
I think it should be after. Buble doesn't know about ractive component files (unless there's a plugin I don't know about).
Chris Reeves
@evs-chris
Jul 27 2018 15:53
I do it after, because sometimes the HTML skippy part gets confused if you try before
kouts
@kouts
Jul 27 2018 15:53
great!
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 20:21
@fskreuz I think I'll stick to browserify way of code writing and bundling. I imagine a workflow like so: We'll create a one big bundle (app.js, a 300MB minified js) with browserify. Then we develop a BlackMagic project which will use this app.js as a source database and serve little bundles on demand.
Joseph
@fskreuz
Jul 27 2018 20:23
300MB... :scream:
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 20:23
it will handle the dependency resolution, of course
hahah :) yes
Chris Reeves
@evs-chris
Jul 27 2018 20:25
😂😥
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 20:25
who cares? user will have to fetch only a few hundred KB at the beginning and will fetch a few for each feature
Chris Reeves
@evs-chris
Jul 27 2018 20:26
was just picturing it in a text editor
kouts
@kouts
Jul 27 2018 20:26
So these 300MB will remain on the server and the user will fetch only parts of it?
Chris Reeves
@evs-chris
Jul 27 2018 20:27
I've opened multi gigabyte log files
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 20:27
@kouts yes, it will work as a db file
Chris Reeves
@evs-chris
Jul 27 2018 20:27
... in vim
kouts
@kouts
Jul 27 2018 20:28
@evs-chris thats pure matrix
(where are the emoticons gone ?)
Chris Reeves
@evs-chris
Jul 27 2018 20:29
get more than a few minutes and things like atom and vscode give up entirely... a few tens of mb and sublime is out
or at least that's where it still last time I tried
300mb isn't bad from a db perspective
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 20:33
I don't know but I think I can create a app.js.meta file that would hold the offsets of dependencies
or maybe every dependency in app.js can be splitted up in app.js.d directory
there isn't such a technique, right? I don't want to invent the wheel twice :)
Cerem Cem ASLAN
@ceremcem
Jul 27 2018 20:41
this black magic must be implemented in client side compatible way because the dependency chunks that are transferred to the client would have to be removed from ram and saved/cached in client side, so the same dependency resolution must be performed in - eg. - service worker.