You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
8.9 KiB
HTML
209 lines
8.9 KiB
HTML
<!doctype html>
|
|
<html lang="en-us">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>WebPerl Code Demo</title>
|
|
|
|
<!-- ##### WebPerl - http://webperl.zero-g.net #####
|
|
|
|
Copyright (c) 2018 Hauke Daempfling (haukex@zero-g.net)
|
|
at the Leibniz Institute of Freshwater Ecology and Inland Fisheries (IGB),
|
|
Berlin, Germany, http://www.igb-berlin.de
|
|
|
|
This program is free software; you can redistribute it and/or modify
|
|
it under the same terms as Perl 5 itself: either the GNU General Public
|
|
License as published by the Free Software Foundation (either version 1,
|
|
or, at your option, any later version), or the "Artistic License" which
|
|
comes with Perl 5.
|
|
|
|
This program is distributed in the hope that it will be useful, but
|
|
WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
|
See the licenses for details.
|
|
|
|
You should have received a copy of the licenses along with this program.
|
|
If not, see http://perldoc.perl.org/index-licence.html
|
|
##### -->
|
|
|
|
<style>
|
|
p {
|
|
font-family: Calibri, Ubuntu, "Droid Sans", Tahoma, Arial, Helvetica, sans-serif;
|
|
}
|
|
pre,textarea,code {
|
|
font-family: Consolas, "Ubuntu Mono", "Droid Sans Mono", "Lucida Console", "Courier New", Courier, monospace;
|
|
}
|
|
iframe.perleditor {
|
|
display: block;
|
|
border: 1px solid black;
|
|
width: 100%;
|
|
max-width: 50em;
|
|
margin: 0.2em 0;
|
|
}
|
|
</style>
|
|
<!-- Optional "IFrame Resizer": -->
|
|
<!--cacheable--><!--script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.2/iframeResizer.min.js" integrity="sha256-aYf0FZGWqOuKNPJ4HkmnMZeODgj3DVslnYf+8dCN9/k=" crossorigin="anonymous"></script-->
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<p>
|
|
This page demonstrates the embeddable
|
|
<strong><a href="http://webperl.zero-g.net" target="_blank">WebPerl</a>
|
|
Code Demo Editor</strong> (beta), which can be embedded using <code><iframe></code> elements, including
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox" target="_blank">sandboxing</a>.
|
|
The documentation is contained in the source of this page, please use
|
|
the "View Source" function of your browser to view it, or have a look at
|
|
<a href="https://github.com/haukex/webperl/tree/master/web/democode"
|
|
target="_blank">the project sources on GitHub</a>.
|
|
</p>
|
|
|
|
<!-- Thank you to LanX from PerlMonks for the inspiration! :-)
|
|
https://www.perlmonks.org/?node_id=1223812 -->
|
|
|
|
<!-- First, you have to include the following hidden IFrame, which
|
|
loads the "Perl runner". This is (currently) necessary because this
|
|
IFrame needs to re-load itself in order to re-run Perl. This IFrame
|
|
*must* have the "name='perlrunner'" attribute and must be embedded at
|
|
the same level as the Perl editor IFrame(s). The frames communicate
|
|
via the "window.postMessage()" mechanism, which is safe for
|
|
cross-origin communications and sandboxing. Currently, in order to
|
|
conserve memory, a single runner serves multiple "clients", that is,
|
|
the "editor" IFrames below.
|
|
|
|
It is also possible to link to perleditor.html directly: if it
|
|
detects that it is not running in an IFrame, it will load the runner
|
|
on its own (after a very brief delay).
|
|
-->
|
|
|
|
<iframe name="perlrunner" sandbox="allow-scripts" src="perlrunner.html" style="display:none;"></iframe>
|
|
|
|
<p>This is a simple example of running a oneliner:</p>
|
|
|
|
<!-- The following is a basic example showing a single input file and
|
|
Perl oneliner.
|
|
|
|
All files are currently always encoded as UTF-8, which is why the
|
|
"-CSD" switch is used below. This is not strictly necessary when the
|
|
input files are pure ASCII, but it is important to remember that Perl
|
|
does *not* default to UTF-8. Reading/writing binary data via the
|
|
editor and runner is currently *not* supported.
|
|
|
|
Standard input/output redirection is currently not supported. It is
|
|
also currently not supported to supply STDIN directly to the script,
|
|
the workaround is to use input files, supply the filenames on the
|
|
command line, and use Perl's magic ARGV operator "<>". Support for
|
|
redirections may be added in a future version.
|
|
|
|
The JavaScript shown below is not strictly necessary, it is also
|
|
possible to specify a "src='...'" attribute directly in the IFrame
|
|
tag, for example using the "Copy Frame URL" link shown in the editor.
|
|
|
|
Note that implementing an automatic resize of the IFrame to fit its
|
|
contents is nontrivial when sandboxing is enabled, which is why a
|
|
fixed height is used below. However, see for example
|
|
http://davidjbradshaw.github.io/iframe-resizer/ - examples of how
|
|
to use this are included in the source files here.
|
|
-->
|
|
|
|
<iframe id="perl1" sandbox="allow-scripts" class="perleditor" style="height:20em;"></iframe>
|
|
<script>
|
|
document.getElementById('perl1').src =
|
|
"perleditor.html#" + encodeURIComponent(JSON.stringify( {
|
|
inputs: [ { fn:"in.txt", text:"Foo\nBar\nQuz" } ],
|
|
cmdline: "perl -CSD -pe 's/[aeiou]/_/g' in.txt",
|
|
} ));
|
|
// Example of how to use the Optional "IFrame Resizer":
|
|
//iFrameResize({checkOrigin:false}, document.getElementById('perl1'));
|
|
</script>
|
|
|
|
<p>This example includes several files:</p>
|
|
|
|
<!-- The following example demonstrates (almost) all of the possible
|
|
options that can be passed to the editor.
|
|
|
|
The "cmdline" option and the corresponding input box in the editor
|
|
only support very basic quoting constructs:
|
|
- Strings in double quotes may contain whitespace, \\, and/or \",
|
|
the latter two will be changed to \ and " respectively;
|
|
- strings in single quotes may contain whitespace, \\, and/or \',
|
|
the latter two will be changed to \ and ' respectively;
|
|
- other strings (without whitespace) will not be modified.
|
|
Note: As a consequence of these rules, inside of single or double
|
|
quotes, both \\n and \n resolve to \n (for any character "n" that
|
|
is not a backslash or single resp. double quote).
|
|
|
|
Instead of "cmdline", you may specify "argv" as an array ("cmdline"
|
|
overrides "argv"). This array should *not* include "perl" as the
|
|
first element; this is added automatically.
|
|
|
|
So that it can be displayed in the input box, the "argv" array
|
|
will be encoded into a single string - this means that if you want
|
|
full control over the formatting of the command line as it is
|
|
displayed to the user in the editor, use "cmdline" instead. The
|
|
"Copy JSON" data will include both "cmdline" and "argv" (so you
|
|
can choose to delete whichever one you don't need), while "Copy
|
|
URL" will include only "cmdline" (for brevity).
|
|
|
|
You may specify the text of a script via "script", or, alternatively,
|
|
a "script_url" from which the script is to be fetched - however, be
|
|
aware that cross-origin restrictions may limit your ability to fetch
|
|
URLs from other origins. You can specify the script's filename with
|
|
"script_fn".
|
|
|
|
Input files ("inputs") are specified as an array of objects; the
|
|
properties of the object are similar to the script: filenames are
|
|
specified with "fn", and the text of the file via "text", or
|
|
alternatively, you may specify a "url" from which the content is to
|
|
be fetched.
|
|
|
|
The output files ("outputs") are an array of filenames. After the
|
|
script finishes, the "Perl runner" will attempt to read these files
|
|
and display them to the user. It is also possible to specify output
|
|
files with the same name as an input file, for example if Perl's "-i"
|
|
option was used.
|
|
|
|
The current working directory of Perl defaults to the "home"
|
|
directory in Emscripten's virtual file system, currently
|
|
"/home/web_user", and all filenames are relative to this directory.
|
|
You may also specify absolute filenames such as "/tmp/foo.txt".
|
|
However, note that intermediate directories are currently not
|
|
automatically created, so if you specify files with nonexistent
|
|
directories like "/tmp/foo/bar.txt" or the relative "foo/bar.txt",
|
|
this will not work.
|
|
|
|
Additional options: Setting "mergeStdOutErr" to a true value causes
|
|
STDOUT and STDERR output to be output together, similar to the way
|
|
they would be on the console. *However,* note that WebPerl
|
|
currently doesn't think it's connected to a terminal, which means
|
|
that perl defaults to block instead of line buffering STDOUT, so
|
|
it may seem like you always see STDERR output before STDOUT. If you
|
|
want to truly intermix the two, turn on autoflush ("$|=1;").
|
|
|
|
If you set the "autorun" option, the editor will attempt to run the
|
|
script as soon as the runner is ready. *WARNING:* If you have
|
|
multiple editors embedded in the page, *do not* enable "autorun"
|
|
for more than one editor, as otherwise you will likely trigger a
|
|
race condition, resulting in an error being shown to the user.
|
|
-->
|
|
|
|
<iframe id="perl2" sandbox="allow-scripts" class="perleditor" style="height:42em;"></iframe>
|
|
<script>
|
|
document.getElementById('perl2').src =
|
|
"perleditor.html#" + encodeURIComponent(JSON.stringify( {
|
|
argv: ["devoweler.pl","mytext.txt","other.txt"],
|
|
script: "use warnings;\nuse strict;\n\nopen my $vfh, '>', 'vowels.txt' or die $!;\n"
|
|
+"while (<>) {\n\tprint $vfh $1 while s/([aeiou])/_/i;\n\tprint;\n}\nclose $vfh;",
|
|
script_fn: "devoweler.pl",
|
|
inputs: [
|
|
{ fn: "mytext.txt", text: "Foo\nBar\nQuz\n" },
|
|
{ fn: "other.txt", text: "Hello, World!" },
|
|
],
|
|
outputs: [ "vowels.txt" ],
|
|
autorun: true,
|
|
} ));
|
|
//iFrameResize({checkOrigin:false}, document.getElementById('perl2'));
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|