These are chat archives for filearts/plunker

15th
Sep 2015
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 19:59 UTC
@ggoodman lol I forgot you don’t have a plunker org
how2upload files to plunkr?
Geoff Goodman
@ggoodman
Sep 15 2015 20:01 UTC
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 UTC
lol np
can haz json?
Geoff Goodman
@ggoodman
Sep 15 2015 20:03 UTC
This is to bootstrap the editor, not to save a plunk
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:03 UTC
@ggoodman I want the angular2-webpack-starter to export/import from plunkr
that’s my goal
Geoff Goodman
@ggoodman
Sep 15 2015 20:03 UTC
You want a link in your README?
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:03 UTC
ya
do you have a fancy [bootstrap in plunkr] icon with your face on it?
Geoff Goodman
@ggoodman
Sep 15 2015 20:04 UTC
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 UTC
I can make you the icon later lol
Geoff Goodman
@ggoodman
Sep 15 2015 20:05 UTC
That script will dynamically build a form with method="POST" action="http://plnkr.co/edit/"
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:05 UTC
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 UTC
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 UTC
interesting
Geoff Goodman
@ggoodman
Sep 15 2015 20:09 UTC
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 UTC
oh ok I get it
Geoff Goodman
@ggoodman
Sep 15 2015 20:12 UTC
So you readme points to a statically hosted html file created during your build.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:12 UTC
now I need to make sure my plunkr environment is the same as the starter
Geoff Goodman
@ggoodman
Sep 15 2015 20:12 UTC
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 UTC
lol when is plunker.next coming out?
Geoff Goodman
@ggoodman
Sep 15 2015 20:13 UTC
when it's ready :D
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:13 UTC
lol
and it’s all frontend right? I can’t opt into webpack builds?
Geoff Goodman
@ggoodman
Sep 15 2015 20:14 UTC
Correct. this is all happening client-side.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:16 UTC
so with frontend only I’m limited to systemjs then for ng2?
Geoff Goodman
@ggoodman
Sep 15 2015 20:17 UTC
Click import.
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:18 UTC
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 UTC
They're open if they're less than 2 levels deep
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:19 UTC
how does the previewer work?
Geoff Goodman
@ggoodman
Sep 15 2015 20:19 UTC
Sames mechanism as bootstrapping a plunk
PatrickJS [tipe.io]
@gdi2290
Sep 15 2015 20:20 UTC
and how does this work with typescript?
Geoff Goodman
@ggoodman
Sep 15 2015 20:20 UTC
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 UTC
nice
Geoff Goodman
@ggoodman
Sep 15 2015 20:21 UTC
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 UTC
so are you running/installing this on the server?
Geoff Goodman
@ggoodman
Sep 15 2015 20:22 UTC
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 UTC
do you read the package.json?
Geoff Goodman
@ggoodman
Sep 15 2015 20:23 UTC
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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
np