45 lines
19 KiB
JavaScript
45 lines
19 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7106"],{9222:function(e,t,s){s.r(t),s.d(t,{config:()=>c,config2:()=>u,default:()=>m,frontMatter:()=>a,metadata:()=>n,assets:()=>d,params:()=>h,toc:()=>g,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/twig","title":"Twig","description":"Twig.js is a pure JavaScript implementation of the Twig PHP templating language.","source":"@site/docs/languages/twig.mdx","sourceDirName":"languages","slug":"/languages/twig","permalink":"/docs/languages/twig","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/twig.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"TSX","permalink":"/docs/languages/tsx"},"next":{"title":"TypeScript","permalink":"/docs/languages/typescript"}}'),i=s("5893"),r=s("65"),o=s("3365");let a={},l="Twig",d={},c={markup:{language:"twig",content:"Hello, {{ name }}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"twig",content:"Hello, {{ name }}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},g=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",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:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function p(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",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:"twig",children:"Twig"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/",children:"Twig.js"})," is a pure JavaScript implementation of the ",(0,i.jsx)(t.a,{href:"https://twig.symfony.com/",children:"Twig"})," PHP templating language."]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,i.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,i.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,i.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,i.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,i.jsx)(t.code,{children:"name"})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,i.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,i.jsxs)(t.p,{children:["To use this mode, the property ",(0,i.jsx)(t.code,{children:"template.prerender"})," in ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,i.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,i.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,i.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,i.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,i.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,i.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\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:"twig"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".twig"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"markup"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.npmjs.com/package/twig",children:"Twig.js"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"twig"}),": v1.15.4"]}),"\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"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(t.code,{children:"twig"})," are passed as a JSON object to the ",(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/wiki#browser-usage",children:(0,i.jsx)(t.code,{children:"twig"})})," method during compile. Please check the ",(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/wiki#browser-usage",children:"documentation"})," for full reference."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,i.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,i.jsx)(o.Z,{config:c,params:h}),"\n",(0,i.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,i.jsx)(o.Z,{config:u}),"\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://twig.symfony.com/",children:"Twig"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://twig.symfony.com/doc/3.x/",children:"Twig documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/",children:"Twig.js"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/wiki",children:"Twig.js documentation"})}),"\n"]})]})}function m(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(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||{}),[d,c]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[g,p]=(0,r.useState)(JSON.stringify(e.config||"")),[m,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:a,config:d,...v}=e;if(i(s||""),l(n||{}),c(r),h&&m===JSON.stringify(v)){if(g===JSON.stringify(d))return;p(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),g=s("8228"),p=s("5050");function m(e){let[t,s]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[m,f]=(0,r.useState)(e.vue),[v,j]=(0,r.useState)(e.svelte),x="3.7rem",[y,w]=(0,r.useState)(!0),[b,S]=(0,r.useState)(x),C=(0,r.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(d.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(m,"html")),j(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${g.Z.details}`,"data-collapsed":y,style:{height:y?x:b,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!y),P()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:o,...d}=e,{colorMode:c}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=`
|
|
import { createPlayground } from 'livecodes';
|
|
|
|
const options = ${h(d)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),g=`
|
|
import { createPlayground, type EmbedOptions } from 'livecodes';
|
|
|
|
const options: EmbedOptions = ${h(d)};
|
|
createPlayground('#container', options);
|
|
|
|
`.trimStart(),p=`
|
|
import LiveCodes from 'livecodes/react';
|
|
|
|
export default function App() {
|
|
const options = ${h(d)};
|
|
return (<LiveCodes {...options}></LiveCodes>);
|
|
}
|
|
|
|
`.trimStart(),f=`
|
|
<script setup>
|
|
import LiveCodes from "livecodes/vue";
|
|
|
|
const options = ${h(d)};
|
|
</script>
|
|
<template>
|
|
<LiveCodes v-bind="options" />
|
|
</template>
|
|
|
|
`,v=`
|
|
<script>
|
|
import { onMount } from 'svelte';
|
|
import { createPlayground } from 'livecodes';
|
|
|
|
let options = $state(${h(d)});
|
|
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:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:g,react:p,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,d=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 c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":i),c.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.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=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let g=!1,p="Cannot call API methods after calling `destroy()`.",m=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),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<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=c.href,r||l.appendChild(o)}),f=new Promise(e=>{addEventListener("message",function t(s){s.source===m.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),f.settled=!0)})}),v=()=>g?Promise.reject(p):new Promise(async e=>{f.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},h),await f,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(g)return n(p);await v();let i=P();addEventListener("message",function t(r){if(r.source===m.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)}}),m.contentWindow?.postMessage({method:e,id:i,args:t},h)}),x={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(p);return y.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}},b=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=b(e.data?.type??"");if(e.source!==m.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}),m?.remove?.(),g=!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 v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),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=>w("code",e),watch:w,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:()=>f.settled?j("destroy").then(S):g?Promise.reject(p):(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:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="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")),d&&(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"!==d?r.view=d:e.searchParams.set("view",d)),"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)),u&&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)}}}]); |