Public
Script
multiFormat
@postpostscript
Script
multiFormat: easily create outputs of multiple formats (e.g. text/html for Email) using tagged templates Examples import { format } from "https://esm.town/v/postpostscript/multiFormat";
console.log(format.Plain`
${format.Heading1`Some Heading`}
Lorem ipsum dolor ${format.Strong`sit`} amet
`); {
"text": "\nSome Heading\n\nLorem ipsum dolor sit amet\n",
"html": "\n<br><h1>Some Heading</h1>\n<br>\n<br>Lorem ipsum dolor <strong>sit</strong> amet\n<br>"
} Create Your Own Formatters import { createFormatMethod, wrapHTMLTag, type MultiFormatWithHTML } from "https://esm.town/v/postpostscript/multiFormat";
export const Red = createFormatMethod<MultiFormatWithHTML>((value) => {
return wrapHTMLTag("span", value, {
style: "color: red;",
});
});
console.log(Red`red text!`) {
"text": "red text!",
"html": "<span style=\"color: red;\">red text!</span>"
} Sanitization Text is automatically sanitized when converted to HTML: console.log(format.Trim`
${format.Heading1`Some Heading`}
<script>alert(1)</script>
`.html.toString()) <h1>Some Heading</h1>
<br>
<br><script>alert(1)</script>
vue
@postpostscript
Script
vue: inline Vue SFC components in your HTML Example Val showing how to define reusable components: @postpostscript/vueExample import { htmlResponse } from "https://esm.town/v/postpostscript/html";
import { vueSfcInline } from "https://esm.town/v/postpostscript/vue";
export default function() {
return htmlResponse`
${vueSfcInline`
<script setup type="ts">
import { ref } from "vue";
const name = ref("Vue");
</script>
<template>
Hello World from {{ name }}!
<br>
<input v-model="name" />
</template>
`}
`;
}
provideBlob
@postpostscript
HTTP (deprecated)
provideBlob: Return Response Quickly and Poll for the Expensive Parts Example: See @postpostscript/provideBlobExample for full example. You will need to fork this val to use provideBlob on your projects as it uses @std/blob for storage import { Image } from "https://deno.land/x/imagescript@1.2.17/mod.ts";
import { htmlResponse } from "https://esm.town/v/postpostscript/html";
import { provideBlob } from "https://esm.town/v/postpostscript/provideBlob";
export default async function(req: Request) {
const image = provideBlob(async () => {
const png = new Image(100, 100);
png.drawCircle(50, 50, 50, 100);
return png.encode();
}).jsPromise();
return htmlResponse`
<div id="image"></div>
<script>
${image}.then(blob => {
const $img = document.createElement("img")
$img.src = URL.createObjectURL(blob)
document.getElementById("image").appendChild($img)
})
</script>
`;
}
blog
@postpostscript
HTTP (deprecated)
@postpostscript 's Val Town Blog Blog Posts: Ideas 2024-03-06 - Auth for Val Town 2024-03-09 - sqliteUniverse: Make SQLite Queries Against Multiple Endpoints in Deno (Val Town) (Part 1) 2024-03-09 - sqliteUniverse: Make SQLite Queries Against Multiple Endpoints in Deno (Val Town) (Part 2) Other Projects: 2024-02-25 - moduleHighlightValueLink: Link to a Val With a Value or Method's Code Highlighted 2024-02-28 - provideBlob: Return Response Quickly and Poll for the Expensive Parts 2024-03-02 - MyFooter: my footer component which shares random vals I've liked! 2024-03-16 - readmeManager: Edit Val Readmes With Persistent Drafts 2024-04-09 - reactiveStateBlob: wrap blob state in a proxy to autosave it on changes 2024-04-24 - lock: lock that releases when it leaves the execution context 2024-04-25 - fetchWorker: communicate with a worker over a fetch-like interface
March 2, 2024