27:I[850952,["/_next/static/immutable/chunks/17nk-6ve5d1j1.js","/_next/static/immutable/chunks/03u4j9-bgtp-j.js","/_next/static/immutable/chunks/1aozp6v-93hww.js","/_next/static/immutable/chunks/1kvjqj9rubqut.js","/_next/static/immutable/chunks/2xvdcd8pkkmev.js","/_next/static/immutable/chunks/1dfgzmy-n738q.js","/_next/static/immutable/chunks/1mu6yoypc7dmv.js","/_next/static/immutable/chunks/3w7ndhy0rtv-3.js","/_next/static/immutable/chunks/1ro_riwwfy4z1.js","/_next/static/immutable/chunks/17qcz3iy32xk4.js","/_next/static/immutable/chunks/0wh14bpxa9h2e.js","/_next/static/immutable/chunks/1uot0qpifjsxt.js","/_next/static/immutable/chunks/3qtq01edevtrw.js","/_next/static/immutable/chunks/2l5vi-26cfdbh.js","/_next/static/immutable/chunks/2qpske3qljvy7.js","/_next/static/immutable/chunks/1qrwbqb2247cr.js","/_next/static/immutable/chunks/2acjmglv-85kf.js"],"PublicationThemeProvider",1] 28:I[850952,["/_next/static/immutable/chunks/17nk-6ve5d1j1.js","/_next/static/immutable/chunks/03u4j9-bgtp-j.js","/_next/static/immutable/chunks/1aozp6v-93hww.js","/_next/static/immutable/chunks/1kvjqj9rubqut.js","/_next/static/immutable/chunks/2xvdcd8pkkmev.js","/_next/static/immutable/chunks/1dfgzmy-n738q.js","/_next/static/immutable/chunks/1mu6yoypc7dmv.js","/_next/static/immutable/chunks/3w7ndhy0rtv-3.js","/_next/static/immutable/chunks/1ro_riwwfy4z1.js","/_next/static/immutable/chunks/17qcz3iy32xk4.js","/_next/static/immutable/chunks/0wh14bpxa9h2e.js","/_next/static/immutable/chunks/1uot0qpifjsxt.js","/_next/static/immutable/chunks/3qtq01edevtrw.js","/_next/static/immutable/chunks/2l5vi-26cfdbh.js","/_next/static/immutable/chunks/2qpske3qljvy7.js","/_next/static/immutable/chunks/1qrwbqb2247cr.js","/_next/static/immutable/chunks/2acjmglv-85kf.js"],"PublicationBackgroundProvider",1] 2a:I[790711,["/_next/static/immutable/chunks/17nk-6ve5d1j1.js","/_next/static/immutable/chunks/03u4j9-bgtp-j.js","/_next/static/immutable/chunks/1aozp6v-93hww.js","/_next/static/immutable/chunks/1kvjqj9rubqut.js","/_next/static/immutable/chunks/2xvdcd8pkkmev.js","/_next/static/immutable/chunks/1dfgzmy-n738q.js","/_next/static/immutable/chunks/1mu6yoypc7dmv.js","/_next/static/immutable/chunks/3w7ndhy0rtv-3.js","/_next/static/immutable/chunks/1ro_riwwfy4z1.js","/_next/static/immutable/chunks/17qcz3iy32xk4.js","/_next/static/immutable/chunks/0wh14bpxa9h2e.js","/_next/static/immutable/chunks/1uot0qpifjsxt.js","/_next/static/immutable/chunks/3qtq01edevtrw.js","/_next/static/immutable/chunks/2l5vi-26cfdbh.js","/_next/static/immutable/chunks/2qpske3qljvy7.js","/_next/static/immutable/chunks/1qrwbqb2247cr.js","/_next/static/immutable/chunks/2acjmglv-85kf.js"],"PublicationHomeLayout",1] 2b:I[459124,["/_next/static/immutable/chunks/17nk-6ve5d1j1.js","/_next/static/immutable/chunks/03u4j9-bgtp-j.js","/_next/static/immutable/chunks/1aozp6v-93hww.js","/_next/static/immutable/chunks/1kvjqj9rubqut.js","/_next/static/immutable/chunks/2xvdcd8pkkmev.js","/_next/static/immutable/chunks/1dfgzmy-n738q.js","/_next/static/immutable/chunks/1mu6yoypc7dmv.js","/_next/static/immutable/chunks/3w7ndhy0rtv-3.js","/_next/static/immutable/chunks/1ro_riwwfy4z1.js","/_next/static/immutable/chunks/17qcz3iy32xk4.js","/_next/static/immutable/chunks/0wh14bpxa9h2e.js","/_next/static/immutable/chunks/1uot0qpifjsxt.js","/_next/static/immutable/chunks/3qtq01edevtrw.js","/_next/static/immutable/chunks/2l5vi-26cfdbh.js","/_next/static/immutable/chunks/2qpske3qljvy7.js","/_next/static/immutable/chunks/1qrwbqb2247cr.js","/_next/static/immutable/chunks/2acjmglv-85kf.js"],"PublicationAuthor",1] 2c:I[163214,["/_next/static/immutable/chunks/17nk-6ve5d1j1.js","/_next/static/immutable/chunks/03u4j9-bgtp-j.js","/_next/static/immutable/chunks/1aozp6v-93hww.js","/_next/static/immutable/chunks/1kvjqj9rubqut.js","/_next/static/immutable/chunks/2xvdcd8pkkmev.js","/_next/static/immutable/chunks/1dfgzmy-n738q.js","/_next/static/immutable/chunks/1mu6yoypc7dmv.js","/_next/static/immutable/chunks/3w7ndhy0rtv-3.js","/_next/static/immutable/chunks/1ro_riwwfy4z1.js","/_next/static/immutable/chunks/17qcz3iy32xk4.js","/_next/static/immutable/chunks/0wh14bpxa9h2e.js","/_next/static/immutable/chunks/1uot0qpifjsxt.js","/_next/static/immutable/chunks/3qtq01edevtrw.js","/_next/static/immutable/chunks/2l5vi-26cfdbh.js","/_next/static/immutable/chunks/2qpske3qljvy7.js","/_next/static/immutable/chunks/1qrwbqb2247cr.js","/_next/static/immutable/chunks/2acjmglv-85kf.js"],"PublicationPostsList",1] 1f:["$","$L27",null,{"record":{"url":"https://pinc-official.leaflet.pub","icon":{"ref":{"$link":"bafkreifqssfuqssdwsbyoztkgpe6djsxo2xdipdk3jetamwljwnsebpfde"},"size":1872,"$type":"blob","mimeType":"image/webp"},"name":"pinc-official","$type":"site.standard.publication","theme":{"$type":"pub.leaflet.publication#theme","primary":{"b":39,"g":39,"r":39,"$type":"pub.leaflet.theme.color#rgb"},"pageWidth":624,"accentText":{"b":255,"g":255,"r":255,"$type":"pub.leaflet.theme.color#rgb"},"pageBackground":{"a":100,"b":250,"g":252,"r":253,"$type":"pub.leaflet.theme.color#rgba"},"backgroundColor":{"b":250,"g":252,"r":253,"$type":"pub.leaflet.theme.color#rgb"},"accentBackground":{"b":173,"g":90,"r":232,"$type":"pub.leaflet.theme.color#rgb"},"showPageBackground":false},"basicTheme":{"$type":"site.standard.theme.basic","accent":{"b":173,"g":90,"r":232,"$type":"site.standard.theme.color#rgb"},"background":{"b":250,"g":252,"r":253,"$type":"site.standard.theme.color#rgb"},"foreground":{"b":39,"g":39,"r":39,"$type":"site.standard.theme.color#rgb"},"accentForeground":{"b":255,"g":255,"r":255,"$type":"site.standard.theme.color#rgb"}},"preferences":{"showComments":true,"showMentions":true,"showPrevNext":true,"showInDiscover":true,"showRecommends":true}},"pub_creator":"did:plc:eavwjfaiwe3s7ea2eby5xnzj","children":[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Blog\",\"name\":\"pinc-official\",\"url\":\"https://pinc-official.leaflet.pub\"}"}}],["$","$L28",null,{"record":"$1f:props:record","pub_creator":"did:plc:eavwjfaiwe3s7ea2eby5xnzj","children":["$L29",["$","$L2a",null,{"showPageBackground":false,"iconUrl":"/api/atproto_images?did=did:plc:eavwjfaiwe3s7ea2eby5xnzj&cid=bafkreifqssfuqssdwsbyoztkgpe6djsxo2xdipdk3jetamwljwnsebpfde&v=1","wordmark":null,"navPages":[],"publicationUrl":"https://pinc-official.leaflet.pub","activePath":"/","pageWidth":624,"subscribe":{"publicationUri":"at://did:plc:eavwjfaiwe3s7ea2eby5xnzj/site.standard.publication/3mo3n7rvhgk2w","publicationUrl":"https://pinc-official.leaflet.pub","publicationName":"pinc-official","publicationDescription":"$undefined","newsletterMode":false},"author":["$","$L2b",null,{"did":"did:plc:eavwjfaiwe3s7ea2eby5xnzj","displayName":"Torben Ewert","handle":"t.ewert.foo"}],"children":["$","$L2c",null,{"publication":{"uri":"at://did:plc:eavwjfaiwe3s7ea2eby5xnzj/site.standard.publication/3mo3n7rvhgk2w","name":"pinc-official","identity_did":"did:plc:eavwjfaiwe3s7ea2eby5xnzj","record":{"url":"https://pinc-official.leaflet.pub","icon":"$1f:props:record:icon","name":"pinc-official","$type":"site.standard.publication","theme":"$1f:props:record:theme","basicTheme":"$1f:props:record:basicTheme","preferences":"$1f:props:record:preferences"},"publication_newsletter_settings":null,"publication_pages":[]},"publicationRecord":"$1f:props:record","posts":[{"uri":"at://did:plc:eavwjfaiwe3s7ea2eby5xnzj/site.standard.document/3mo3nsla6z22u","record":{"path":"/3mo3nsla6z22u","site":"at://did:plc:eavwjfaiwe3s7ea2eby5xnzj/site.standard.publication/3mo3n7rvhgk2w","tags":["programming","language design"],"$type":"site.standard.document","title":"I am building a template language","content":{"$type":"pub.leaflet.content","pages":[{"id":"019eb7aa-bf75-7ccd-a2be-c15ea6630f28","$type":"pub.leaflet.pages.linearDocument","blocks":[{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","facets":[{"index":{"byteEnd":196,"byteStart":192},"features":[{"$type":"pub.leaflet.richtext.facet#italic"}]},{"index":{"byteEnd":244,"byteStart":234},"features":[{"$type":"pub.leaflet.richtext.facet#italic"}]}],"plaintext":"I wanted to learn how to write lexers, parsers, interpreters and compilers. So I wrote everything from scratch. No libraries, no parser generators, and especially no AI. I didn't want to just have a new template language, I wanted to understand how it functions and how all the different parts come together to go from a plain text file to a working program."}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","facets":[{"index":{"byteEnd":220,"byteStart":217},"features":[{"$type":"pub.leaflet.richtext.facet#italic"}]}],"plaintext":"The main work I am doing day to day is writing frontend code. For the past few years, my professional roles consisted of building up reusable custom component libraries for companies to use as their design system. \nI can write backend code and some jobs also had me do that on a regular basis, but in my heart, I always was and always will be a frontend developer. "}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","plaintext":"So I have worked with a lot of template languages in my past, but I was never really satisfied by one. "}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.unorderedList","children":[{"$type":"pub.leaflet.blocks.unorderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"With some of them its really difficult and sometimes even impossible to express any kind of logic for transforming data. "}},{"$type":"pub.leaflet.blocks.unorderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"Others don't run in the browser, making you round trip to the server, just to dynamically render or update templates."}},{"$type":"pub.leaflet.blocks.unorderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"A lot of them don't let you compose different components in a way that does not lead to heaps of spaghetti code long term."}},{"$type":"pub.leaflet.blocks.unorderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"And pretty much all of them put the template text in the forefront, making it difficult to see the data requirements for a component at a glance."}}]}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","facets":[{"index":{"byteEnd":47,"byteStart":34},"features":[{"$type":"pub.leaflet.richtext.facet#italic"}]},{"index":{"byteEnd":55,"byteStart":47},"features":[{"$type":"pub.leaflet.richtext.facet#bold"},{"$type":"pub.leaflet.richtext.facet#italic"}]},{"index":{"byteEnd":102,"byteStart":55},"features":[{"$type":"pub.leaflet.richtext.facet#italic"}]}],"plaintext":"For the last point you could say: \"Well, its a template language. It should put the template in front\", and I would agree to a certain extend. I just think, that the data requirements are at least equally, if not sometimes more important to a template. Yet, they do not get the same real estate."}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","plaintext":"So how does my template language fix these problems? Let's look at a few examples."}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","plaintext":""}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.header","level":3,"plaintext":"Separation of data and template"}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.code","language":"tsx","plaintext":"component Link {\n let class? = #String; \n let text = #String;\n let href = #String;\n let newTab = #Boolean;\n\n let target = if (newTab) \"_blank\" else \"_self\";\n\n \n {text}\n \n}","syntaxHighlightingTheme":"catppuccin-latte"}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","plaintext":"This first example is a pretty boring link component. But at a glance, you can see a few things:"}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.orderedList","children":[{"$type":"pub.leaflet.blocks.orderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"It declares four different data requirements:\n\"class\", \"text\", \"href\" and \"newTab\""}},{"$type":"pub.leaflet.blocks.orderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"You can immediately see, which data type the different attributes should have. "}},{"$type":"pub.leaflet.blocks.orderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"The class is optional, indicated by the ? behind its name."}},{"$type":"pub.leaflet.blocks.orderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"A new local variable \"target\" is computed based on the \"newTab\" input."}},{"$type":"pub.leaflet.blocks.orderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"The template is separated from the data and does not have any meaningful logic inside."}}],"startIndex":1}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","plaintext":"This component could now be used in other templates like this:"}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.code","language":"tsx","plaintext":"","syntaxHighlightingTheme":"catppuccin-latte"}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","plaintext":""}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.header","level":3,"plaintext":"Logic and data transformation"}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","plaintext":"We already do a little bit of data transformation in the above example, but thats nothing you couldn't do in any other template language."}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","plaintext":"Let's look at a component where you want to put in a semicolon separated string of tags and get them out uppercased as an unordered list. (You could of course also have your input already be an array of strings, but for the sake of the example, we assume we can only get a string.)"}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.code","language":"jsx","plaintext":"component TagList {\n let class? = #String;\n let tags = #String;\n \n let tags = tags\n |> Base_String.split(\";\")\n |> Base_Array.map(fn (tag) -> {\n let tag = tag\n |> Base_String.trim\n |> Base_String.uppercase_ascii;\n \n \n });\n\n \n}","syntaxHighlightingTheme":"catppuccin-latte"}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.text","plaintext":"Let's go through what happens here."}},{"$type":"pub.leaflet.pages.linearDocument#block","block":{"$type":"pub.leaflet.blocks.orderedList","children":[{"$type":"pub.leaflet.blocks.orderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"We declare two data requirements: class and tags. Nothing new here."}},{"$type":"pub.leaflet.blocks.orderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","facets":[{"index":{"byteEnd":74,"byteStart":73},"features":[{"$type":"pub.leaflet.richtext.facet#footnote","footnoteId":"019ebb80-eac8-7dd1-b221-53a61c7c751c","contentFacets":[{"index":{"byteEnd":48,"byteStart":0},"features":[{"uri":"https://en.wikipedia.org/wiki/Variable_shadowing","$type":"pub.leaflet.richtext.facet#link"}]}],"contentPlaintext":"https://en.wikipedia.org/wiki/Variable_shadowing"}]}],"plaintext":"We declare a new variable, also called tags, which transforms and shadows* the input string."}},{"$type":"pub.leaflet.blocks.orderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"The input string gets split on \";\" and the resulting array is mapped over to transform each element in the array.\nTo do this, we create an anonymous function, which takes in a string, trims the whitespace at start and end, transforms it to uppercase characters and puts the result in a

tag."}},{"$type":"pub.leaflet.blocks.orderedList#listItem","content":{"$type":"pub.leaflet.blocks.text","plaintext":"The result is an array of

tags, which gets wrapped in a

\n {text}\n {links}\n

\n {media}\n

\n $\"...\"$ \n\n