"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7554"],{7841:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/php","title":"PHP","description":"PHP running client-side in the browser using Uniter.","source":"@site/docs/languages/php.mdx","sourceDirName":"languages","slug":"/languages/php","permalink":"/docs/languages/php","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/php.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"PHP (Wasm)","permalink":"/docs/languages/php-wasm"},"next":{"title":"PostCSS","permalink":"/docs/languages/postcss"}}'),i=s("5893"),r=s("65"),o=s("3365");let a={},l="PHP",c={},d=[{value:"Usage",id:"usage",level:2},{value:"JavaScript Interoperability",id:"javascript-interoperability",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"php",children:"PHP"})}),"\n","\n",(0,i.jsxs)(t.p,{children:["PHP running client-side in the browser using ",(0,i.jsx)(t.a,{href:"https://phptojs.com/",children:"Uniter"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Uniter is a light-weight PHP-to-JavaScript transpiler and runtime with JavaScript interoperability and client-side DOM manipulation. However, only a small subset of PHP's standard library is supported."}),"\n",(0,i.jsxs)(t.admonition,{title:"Note",type:"info",children:[(0,i.jsxs)(t.p,{children:["If you need better standard library support, you may want to use ",(0,i.jsx)(t.a,{href:"/docs/languages/php-wasm",children:(0,i.jsx)(t.code,{children:"php-wasm"})}),"."]}),(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"php-wasm"})," runs PHP in the browser using WebAssembly. This matches the behavior of the official PHP interpreter and allows using PHP's standard library. However, it requires relatively large download and has limited capabilities for client-side DOM manipulation."]})]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"javascript-interoperability",children:"JavaScript Interoperability"}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(o.Z,{template:"php",height:"80vh"}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"php"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".php"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://phptojs.com/",children:"Uniter"})}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsx)(t.p,{children:"Uniter v2.18.0"}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"prettier"})," and ",(0,i.jsx)(t.a,{href:"https://github.com/prettier/plugin-php",children:"Prettier PHP Plugin"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=php",children:"https://livecodes.io/?template=php"})}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://php.net/",children:"PHP"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.php.net/manual/en/",children:"PHP documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://phptojs.com/",children:"Uniter"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.a,{href:"/docs/languages/php-wasm",children:["PHP using ",(0,i.jsx)(t.code,{children:"php-wasm"})]})," in LiveCodes"]}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),r=s("7294"),o=s("8294");function a(e){let t=(0,r.useRef)(null),[s,i]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[h,p]=(0,r.useState)(),[u,m]=(0,r.useState)(JSON.stringify(e.config||"")),[g,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:a,config:c,...v}=e;if(i(s||""),l(n||{}),d(r),h&&g===JSON.stringify(v)){if(u===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:c,...v}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),p=s("8168"),u=s("8228"),m=s("5050");function g(e){let[t,s]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[g,f]=(0,r.useState)(e.vue),[v,y]=(0,r.useState)(e.svelte),j="3.7rem",[x,w]=(0,r.useState)(!0),[b,P]=(0,r.useState)(j),S=(0,r.useRef)(null),C=()=>{setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${j})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(i,"ts")),l(e(a,"jsx")),f(e(g,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":x,style:{height:x?j:b,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!x),C()},children:"show code"}),(0,n.jsx)("div",{ref:S,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:o,...c}=e,{colorMode:d}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),p=`
import { createPlayground } from 'livecodes';

const options = ${h(c)};
createPlayground('#container', options);

`.trimStart(),u=`
import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = ${h(c)};
createPlayground('#container', options);

`.trimStart(),m=`
import LiveCodes from 'livecodes/react';

export default function App() {
  const options = ${h(c)};
  return (<LiveCodes {...options}></LiveCodes>);
}

`.trimStart(),f=`
<script setup>
import LiveCodes from "livecodes/vue";

const options = ${h(c)};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

`,v=`
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state(${h(c)});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:p,ts:u,react:m,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:o}=t,a=n||"headless"===o,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),o=r||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),a?C(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=d.href,r||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await y();let i=E();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),x={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(m)throw Error(g);return w.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},P=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=P(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let S=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return j("exec",[e,...s])},destroy:()=>v.settled?j("destroy").then(S):m?Promise.reject(g):(S(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:o,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let p="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let i={},r=n.createContext(i);function o(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]);