awesome-tagged-templates
esm.sh
awesome-tagged-templates | esm.sh | |
---|---|---|
28 | 58 | |
92 | 2,879 | |
- | 3.5% | |
10.0 | 9.8 | |
about 3 years ago | 8 days ago | |
Go | ||
- | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
awesome-tagged-templates
-
How and why do we bundle zx?
When zx first appeared, it was a tiny esm script that just proposed a new idea for how child_process.spawn API could be enhanced with string template literals.
-
Building a Dynamic Client-Side Blog with Secutio & Bootstrap
The template combines HTML and JavaScript. To understand this approach, consider how PHP pages are generated. In PHP, code is embedded within the HTML. Similarly, this library leverages JavaScript template literals to achieve the same objective. From the definition: "Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates".
-
Number and Currency Formatting in JavaScript using Intl.NumberFormat
The numbers we are printing are monetary values so they are missing a decimal value and a currency symbol. One way we can do this is by using JavaScript template literals to append and prepend the pieces we are missing.
-
Bun 1.1
Tagged templates[0], the language feature that enables this, were introduced in ECMAScript 2015 apparently – arguably at least somewhat new in the lifespan of JavaScript. :)
Java is getting a similar feature with template processors[1]. It would be nice to have it in Python as well – i.e. not just f-strings, but something that (like tagged templates) allows a template function process the interpolated values to properly encode them for whatever language is appropriate (e.g. shell, SQL, HTML, etc.).
[0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
[1] https://openjdk.org/jeps/459
-
JavaScript Template Literals
References: Template literals (Template strings)
-
A React Developers Guide to Writing Enhance Components
We are using a string template literal to create the tag and the ${} syntax to provide string interpolation, that is, substituting the values of href and altText into our string.
-
TypeScript Template Literal Types: Practical Use-Cases for Improved Code Quality
In TypeScript, a string literal type is a type that represents a specific set of string values. For example, the type "red" | "green" | "blue" represents the set of three string values "red", "green", and "blue". Template literal types allow you to perform operations on these string literal types using the same syntax as template literal strings in JavaScript.
-
Exploring Secutio Task by Task. Setting "Events" Like Stylesheets!
The example also showcases the use of inline templates, employing JavaScript Template Literals. The JSON data obtained from the GET request is accessible through the "data" variable.
-
The Bun Shell
These are called "tagged templates": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- AI for Web Devs: Your First API Request to OpenAI
esm.sh
-
Building a self-creating website with Supabase and AI
/* eslint-disable @typescript-eslint/ban-ts-comment */ // Follow this setup guide to integrate the Deno language server with your editor: // https://deno.land/manual/getting_started/setup_your_environment // This enables autocomplete, go to definition, etc. import { corsHeaders } from "../_shared/cors.ts"; import { createClient } from "https://esm.sh/@supabase/[email protected]"; import randomSample from "https://esm.sh/@stdlib/[email protected]"; import Replicate from "https://esm.sh/[email protected]"; import { base64 } from "https://cdn.jsdelivr.net/gh/hexagon/base64@1/src/base64.js"; const supabaseClient = createClient( Deno.env.get("SUPABASE_URL") ?? "", Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "" ); const replicate = new Replicate({ auth: Deno.env.get("REPLICATE_API_TOKEN") ?? "", }); // @ts-expect-error Deno.serve(async (req) => { if (req.method === "OPTIONS") { return new Response("ok", { headers: corsHeaders }); } const { record } = await req.json(); const thought_id = record.id; if (!thought_id) { return new Response("Missing thought_id", { status: 400, headers: { "Content-Type": "application/json", ...corsHeaders }, }); } const allObjectIDsResponse = await fetch( "https://collectionapi.metmuseum.org/public/collection/v1/objects?departmentIds=11", { method: "GET", headers: { "Content-Type": "application/json", Accept: "application/json", }, } ); const { objectIDs } = await allObjectIDsResponse.json(); const listOfArtworks = []; const addedIDs: number[] = []; while (listOfArtworks.length < 80) { const randomObjectID = randomSample(objectIDs, { size: 1 })[0]; if (addedIDs.includes(randomObjectID)) continue; const res = await fetch( `https://collectionapi.metmuseum.org/public/collection/v1/objects/${randomObjectID}`, { method: "GET", headers: { "Content-Type": "application/json", Accept: "application/json", }, } ); const artwork = await res.json(); if (!artwork.primaryImageSmall) continue; addedIDs.push(artwork.objectID); listOfArtworks.push({ image_url: artwork.primaryImageSmall, artist_name: artwork.artistDisplayName, title: artwork.title, is_main: listOfArtworks.length === 0, is_variant: false, thought_id, }); } const mainImage = listOfArtworks[0]; const output = await replicate.run( "yorickvp/llava-13b:b5f6212d032508382d61ff00469ddda3e32fd8a0e75dc39d8a4191bb742157fb", { input: { image: mainImage.image_url, top_p: 1, prompt: "Describe this painting by " + mainImage.artist_name, max_tokens: 1024, temperature: 0.2, }, } ); const file = await fetch(mainImage.image_url).then((res) => res.blob()); const promises = []; for (let i = 0; i < 8; i++) { const body = new FormData(); body.append( "prompt", output.join("") + `, a painting by ${mainImage.artist_name}` ); body.append("output_format", "jpeg"); body.append("mode", "image-to-image"); body.append("image", file); body.append("strength", clamp(Math.random(), 0.4, 0.7)); const request = fetch( `${Deno.env.get( "STABLE_DIFFUSION_HOST" )}/v2beta/stable-image/generate/sd3`, { method: "POST", headers: { Accept: "application/json", Authorization: `Bearer ${Deno.env.get("STABLE_DIFFUSION_API_KEY")}`, }, body, } ); promises.push(request); } const results = await Promise.all(promises); const variants = await Promise.all(results.map((res) => res.json())); await supabaseClient.from("artworks").insert(listOfArtworks); for (let i = 0; i < variants.length; i++) { const variant = variants[i]; const randomId = Math.random(); await supabaseClient.storage .from("variants") .upload( `${thought_id}/${randomId}.jpeg`, base64.toArrayBuffer(variant.image), { contentType: "image/jpeg", } ); await supabaseClient.from("artworks").insert({ image_url: `${Deno.env.get( "SUPABASE_URL" )}/storage/v1/object/public/variants/${thought_id}/${randomId}.jpeg`, artist_name: mainImage.artist_name, is_main: false, is_variant: true, thought_id, }); } await supabaseClient .from("thoughts") .update({ generating: false }) .eq("id", thought_id); return new Response(JSON.stringify({ main: mainImage }), { headers: { "Content-Type": "application/json", ...corsHeaders }, }); }); function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); }
- Bun 1.1
-
Show HN: Comma Separated Values (CSV) to Unicode Separated Values (USV)
const extism = await import("https://esm.sh/@extism/extism");
-
JSR: The JavaScript Registry
Unpkg serves whatever is published to NPM, and if it's a library intended for the browser, that often includes minified versions ready for use in script tags, for example, https://unpkg.com/[email protected]/mithril.min.js. Sometimes the default export is CJS (which has require() calls), in which case, you can usually use the browse url that I mentioned to see if there's another export you can use.
https://esm.sh/ is definitely a good option too if you're OK with modules.
-
Deno Cron
* Change my NPM imports to something that would work with Deno. The most straightforward thing to do was just change `import "foo"` to `import "npm:foo"`, but this felt hacky so eventually I used https://esm.sh, which worked for some packages but not others.
- Esm.sh/Run
- Esm.sh run – 1KB script allows you to write JSX/TSX in HTML without build
-
Supabase - allow user login with pin
import { createClient } from "https://esm.sh/@supabase/supabase-js@2"; import { create, Payload } from "https://deno.land/x/[email protected]/mod.ts"; interface User { username: string; pin: string; } const supabase = createClient(Deno.env.get('SUPABASE_URL'), Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')); const handler = async (req: Request): Promise => { if (req.method !== 'POST') { return new Response(null, { status: 405 }); } const { username, pin } = await req.json() as Vehicle; if (!username|| !pin) { return new Response(JSON.stringify({ error: 'username and PIN are required' }), { status: 400 }); } const { data, error } = await supabase .from('users') .select('*') .eq('username', username) .eq('pin', pin) .single(); if (error || !data) { return new Response(JSON.stringify({ valid: false }), { status: 401 }); } const jwtSecret = Deno.env.get('JWT_SECRET') as string;; const payload: Payload = { "username": username }; try { const token = await create({ alg: "HS256", typ: "JWT" }, payload, jwtSecret); // This line has the error console.log(token); return new Response(JSON.stringify({ token }), { status: 200 }); } catch (error) { console.error('Error creating JWT:', error); return new Response(JSON.stringify({ error: 'Error creating JWT' }), { status: 500 }); } }; Deno.serve(handler);
-
Let's optimize dependency management with URL Imports
Easily serve libraries from local server/private VPS: You can try to serve and cache libraries by running esm.sh to improve loading times on your server side. Or to keep things simple, just upload a code to pastebin or similar services and directly use it here!
-
Building a Slack Bot for AI-Powered Conversations with Supabase
import { serve } from 'https://deno.land/[email protected]/http/server.ts'; import { WebClient } from 'https://deno.land/x/[email protected]/mod.js'; import { SupabaseClient } from 'https://esm.sh/@supabase/supabase-js@2'; const slack_bot_token = Deno.env.get("SLACK_TOKEN") ?? ""; const bot_client = new WebClient(slack_bot_token); const supabase_url = Deno.env.get("SUPABASE_URL") ?? ""; const service_role = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY"); const supabase = new SupabaseClient(supabase_url, service_role); console.log(`Slack URL verification function up and running!`); serve(async (req) => { try { const req_body = await req.json(); console.log(JSON.stringify(req_body, null, 2)); const { token, challenge, type, event } = req_body; if (type == 'url_verification') { return new Response(JSON.stringify({ challenge }), { headers: { 'Content-Type': 'application/json' }, status: 200, }); } else if (event.type == 'app_mention') { const { user, text, channel, ts } = event; const url_path = text.toLowerCase() .includes('code') ? '/code' : '/general'; const { error } = await supabase.from('job_queue').insert({ http_verb: 'POST', payload: { user, text, channel, ts }, url_path: url_path }); if (error) { console.error(error); return new Response(JSON.stringify({ error: error.message }), { headers: { 'Content-Type': 'application/json' }, status: 400, }); } await post(channel, ts, `Taking a look and will get back to you shortly!`); return new Response('', { status: 200 }); } } catch (error) { return new Response(JSON.stringify({ error: error.message }), { headers: { 'Content-Type': 'application/json' }, status: 400, }); } }); async function post(channel: string, thread_ts: string, message: string): Promise { try { const result = await bot_client.chat.postMessage({ channel: channel, thread_ts: thread_ts, text: message, }); console.info(result); } catch (e) { console.error(`Error posting message: ${e}`); } }
What are some alternatives?
rewrite-styled-components - Rewrite library styled-components in ~ 60 line code
import-maps - How to control the behavior of JavaScript imports
dom-examples - Code examples that accompany various MDN DOM and Web API documentation pages
jsdelivr - A free, fast, and reliable Open Source CDN for npm, GitHub, Javascript, and ESM
bnx - zx inspired shell for Bun.
deno - A modern runtime for JavaScript and TypeScript.
enhance-starter-project - file based routing metaframework for blazing fast custom elements
esbuild - An extremely fast bundler for the web
dax - Cross-platform shell tools for Deno and Node.js inspired by zx.
eleventy-high-performance-blog - A high performance blog template for the 11ty static site generator.
enhance.dev - Docs website for Enhance!
dayjs - ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API