Comments (4)
I have a POC ready - I went with iframes for the initial version. I implemented window.postMessage
and allowed php.net
as frame-ancestors
in the csp. This allows an external domain to embed 3v4l and supply the initial code for the editor.
example of integration:
<!-- straight from the PHP manual -->
<p><strong>Example #1 Using a negative <code class="parameter" style="cursor: pointer;">offset</code></strong></p>
<div class="example-contents">
<div class="phpcode"><code><span style="color: #000000"><span style="color: #0000BB"><?php<br>$rest </span><span style="color: #007700">= </span><span style="color: #0000BB">substr</span><span style="color: #007700">(</span><span style="color: #DD0000">"abcdef"</span><span style="color: #007700">, -</span><span style="color: #0000BB">1</span><span style="color: #007700">); </span><span style="color: #FF8000">// returns "f"<br></span><span style="color: #0000BB">$rest </span><span style="color: #007700">= </span><span style="color: #0000BB">substr</span><span style="color: #007700">(</span><span style="color: #DD0000">"abcdef"</span><span style="color: #007700">, -</span><span style="color: #0000BB">2</span><span style="color: #007700">); </span><span style="color: #FF8000">// returns "ef"<br></span><span style="color: #0000BB">$rest </span><span style="color: #007700">= </span><span style="color: #0000BB">substr</span><span style="color: #007700">(</span><span style="color: #DD0000">"abcdef"</span><span style="color: #007700">, -</span><span style="color: #0000BB">3</span><span style="color: #007700">, </span><span style="color: #0000BB">1</span><span style="color: #007700">); </span><span style="color: #FF8000">// returns "d"<br></span><span style="color: #0000BB">?></span></span></code></div>
</div>
<button type="button" class="run-code-on-3v4l">try it</button>
<script>
// receives updates on status of execution
window.addEventListener('message', (event) => {
if (event.origin !== 'https://3v4l.org') return;
switch (event.data) {
case 'busy':
case 'done':
alert('script code is '+ event.data);
break;
}
}, false);
document.querySelectorAll('.run-code-on-3v4l').forEach(function (el) {
el.addEventListener('click', function() {
var i;
//FIXME detect if an iframe has already been opened for this el
if (true) {
i = document.createElement('iframe');
i.classList.add('3v4l-live');
i.src = 'https://3v4l.org/#live';
el.after(i);
}
i.addEventListener('load', (e) => {
//FIXME make me dynamic
var code = document.querySelectorAll('.example-contents')[0].innerText;
i.contentWindow.postMessage(document.querySelectorAll('.example-contents')[0].textContent, 'https://3v4l.org');
});
});
});
</script>
proposed change on the server side (not in production yet): SjonHortensius/3v4l_org@4137692
Additionally, I wouldn't mind documenting how to integrate the WASM binary from 3v4l directly - but the inline editing capabilities will have to be added by someone else.
from doc-en.
wasm first would be a good idea as it would reduce the load as the input & results don't need to be stored and it is resistant to abuse - I agree it would probably cover most cases. It also matches the current setup of 3v4l with the "real-time" option checked by default.
A separate endpoint on 3v4l would be needed that would accept the code and generate the correct output (via wasm) and include a "run on 3v4l" button. This would remove the needs to pre-store all examples on 3v4l and store the script-short code in the docs somewhere.
I'd prefer the layout of this to be less focused on the '3v4' button (than the current layout) as it would take users away from the docs and submit the script to the server for processing in all versions - which this integration doesn't focus on
from doc-en.
There is already OSS project, which uses WebAssembly:
Repository: https://github.com/seanmorris/php-wasm
Demo: https://seanmorris.github.io/php-wasm/
from doc-en.
Many projects are doing that, e.g. https://github.com/WordPress/wordpress-playground.
3v4l.org also already implements that capability. See the Live preview checkbox in the right-bottom corner.
Ideally, I envision being able to embed 3v4l.org snippets on the php.net page such that they initially appear static. Then, upon clicking, they load php-wasm behind the scenes, making the example editable.
from doc-en.
Related Issues (20)
- Wrong return type for settype
- wordwrap() should mention that it only supports ASCII characters HOT 2
- in_array HOT 3
- curl_setopt page, the CURLOPT_XFERINFOFUNCTION constant
- docs fail to load HOT 1
- PHP 8.2.18 HOT 2
- DateTimeImmutable::createFromFormat doesn't mention "p"
- Why is documentation so 'lacking' for PHP source code? HOT 2
- Error in Changelog for the function "hash" (php.net) HOT 1
- `PREG_UNMATCHED_AS_NULL` description
- .
- .
- How can I find the documentation for the `??=` operator? HOT 4
- Finding the ... operator for argument unpacking HOT 1
- LDAP: `ldap_connect()`/`ldap_bind()`/`ldap_set_option()` is unclear
- YetiForce CRM 7.0.1 LDAP Integration issues HOT 1
- Clarify how proc_open() handles simple filenames
- Example page in manual for Error Handling uses old/deprecated code HOT 1
- Documentation for preg_match and preg_match_all flag PREG_OFFSET_CAPTURE wrong
- uopz_compose is not listed as `deprecated` in the sidebar HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from doc-en.