These are chat archives for filearts/plunker

15th
Sep 2015
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 19:59
@ggoodman lol I forgot you don’t have a plunker org
how2upload files to plunkr?
Geoff Goodman
@ggoodman
Sep 15 2015 20:01
OK, so its not so much how to upload, but how to bootstrap a plunk.
Bootstrapping a plunk is done by making a POST request to plnkr.co/edit/ with a body like this:
I forget what it looks like ;-) gimme a sec
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:02
lol np
can haz json?
Geoff Goodman
@ggoodman
Sep 15 2015 20:03
This is to bootstrap the editor, not to save a plunk
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:03
@ggoodman I want the angular2-webpack-starter to export/import from plunkr
that’s my goal
Geoff Goodman
@ggoodman
Sep 15 2015 20:03
You want a link in your README?
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:03
ya
do you have a fancy [bootstrap in plunkr] icon with your face on it?
Geoff Goodman
@ggoodman
Sep 15 2015 20:04
ok, so your build script can make a html file with only a script tag
I don't
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:04
I can make you the icon later lol
Geoff Goodman
@ggoodman
Sep 15 2015 20:05
That script will dynamically build a form with method="POST" action="http://plnkr.co/edit/"
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:05
so
<html>
<script>// how2set default scripts?</script>
<body>
  <script>
//  all my codes?
  </script>
</body>
</html>
I just post with the body being index.html?
Geoff Goodman
@ggoodman
Sep 15 2015 20:06
Add fields with type="hidden" name="files[path/to/file.ext][content]" value="the string contents of path/to/file.ext"
Then just POST the form.
When a user opens this html file, their browser will immediately post the form to plunker, thereby bootstrapping an edit session with all the files pre-populated.
The posting causes a navigation to plunker. This is the mechanism the angular docs use.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:07
interesting
Geoff Goodman
@ggoodman
Sep 15 2015 20:09
Same flow is used for previews actually
here is what the code looks like to refresh the preview in plunker.next
            commander.on('previewer.refresh', function (data) {
                previewer.lastRefresh = Date.now();

                if (data && !data.skipIframe) {
                    var form = document.createElement('form');
                    var input = document.createElement('input');
                    var defaultEntry = worksession.getDefaultEntry();
                    var path = defaultEntry
                        ? defaultEntry.pathname
                        : '';
                    var promises = [];


                    worksession.project.traverse(function (entry) {
                        if (entry.type === 'file') {
                            promises.push(entry.loading$
                                .then(function () {
                                    input.type = 'hidden';
                                    input.name = 'files[' + entry.pathname + '][content]';
                                    input.value = entry.content;

                                    form.appendChild(input.cloneNode());
                                }));
                        }
                    });

                    Bluebird.all(promises)
                        .then(function () {
                            form.style.display = 'none';
                            document.body.appendChild(form);

                            form.action = previewer.previewUrl + path;
                            form.method = 'POST';
                            form.target = 'plunker-previewer-iframe';
                            form.submit();

                            document.body.removeChild(form);
                        });
                }
            }, $scope);
You can also bootstrap the plunker editor with a description and tags
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:11
oh ok I get it
Geoff Goodman
@ggoodman
Sep 15 2015 20:12
So you readme points to a statically hosted html file created during your build.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:12
now I need to make sure my plunkr environment is the same as the starter
Geoff Goodman
@ggoodman
Sep 15 2015 20:12
Clicking that readme link opens the hosted html which immediately posts to plunker thereby redirecting the window and bootstrapping a session.
Or you wait for plunker.next that has native github import :p
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:13
lol when is plunker.next coming out?
Geoff Goodman
@ggoodman
Sep 15 2015 20:13
when it's ready :D
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:13
lol
and it’s all frontend right? I can’t opt into webpack builds?
Geoff Goodman
@ggoodman
Sep 15 2015 20:14
Correct. this is all happening client-side.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:16
so with frontend only I’m limited to systemjs then for ng2?
Geoff Goodman
@ggoodman
Sep 15 2015 20:17
Click import.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:18
oh snap
I need to include a plunkr.json for default configs
so some folders are closed be default
atm they’re all open
Geoff Goodman
@ggoodman
Sep 15 2015 20:19
They're open if they're less than 2 levels deep
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:19
how does the previewer work?
Geoff Goodman
@ggoodman
Sep 15 2015 20:19
Sames mechanism as bootstrapping a plunk
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:20
and how does this work with typescript?
Geoff Goodman
@ggoodman
Sep 15 2015 20:20
The run server is a glorified in-memory LRU cache of previews
and it just serves from memory
if you ask for file.js and that file doesn't exist, it will run through its compiler list to see if it can generate it on the fly
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:20
nice
Geoff Goodman
@ggoodman
Sep 15 2015 20:21
so if you have file.ts it will compile file.ts and respond as if you had file.js all along
It is open source and pretty clean: https://github.com/ggoodman/plunker-run-plugin
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:21
so are you running/installing this on the server?
Geoff Goodman
@ggoodman
Sep 15 2015 20:22
The preview server is 100% in memory. Previews never hit the disk.
You POST an updated plunk to the preview server. It sticks it in the LRU at your unique preview url and responds with its best guess of what index.html is.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:23
do you read the package.json?
Geoff Goodman
@ggoodman
Sep 15 2015 20:23
No.
Plunker's run server does not do any dependency resolution.
Your build script will need to output something that can be run without any further build step (except dynamic transpilation if you want it)
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:28
ok this is kool for the initial state of the repo. what about for when the user includes more components/code in their local copy of the starter repo. how would I have them export that to plunkr. assume I made a cli
Geoff Goodman
@ggoodman
Sep 15 2015 20:30
It could just build a html file like I suggested above and do an open on it?
or even build that html file in memory, base64 and open it from a data: url.
I'm not sure that this is the sort of complex use case that plunker is designed for.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:31
but that’s just to open an existing plunkr in edit mode. I need to create a new one with code created locally
ya it’s not designed for it but I want it lol
Geoff Goodman
@ggoodman
Sep 15 2015 20:32
No, the trick I told you is to send local code to bootstrap a plunk
Not to open an existing plunk.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:33
oh ok ya I didn’t see where we were sending the local code
ok kool this makes sense thanks
Geoff Goodman
@ggoodman
Sep 15 2015 20:36
np