deno VS esm.sh

Here is the relevant Github issue with a better explanation:

https://github.com/denoland/deno/issues/16105

Deno, version 1.28 or later.

import { serve } from "https://deno.land/[email protected]/http/server.ts"; const handler = async (_request: Request): Promise => { const resp = await fetch("https://api.github.com/users/denoland", { // The init object here has an headers object containing a // header that indicates what type of response we accept. // We're not specifying the method field since by default // fetch makes a GET request. headers: { accept: "application/json", }, }); return new Response(resp.body, { status: resp.status, headers: { "content-type": "application/json", }, }); }; serve(handler);

Does this change your mind at all? https://github.com/denoland/deno/blob/be1fc754a14683bf640b7b...

It looks to me like they've documented the KV Connect protocol they invented to support this feature, in enough detail that anyone else could build an alternative backend for it.

This has helped me feel completely OK with how they're handling this. They get an advantage in that they've already built an extremely robust proprietary backend, but I find that acceptable given the documented protocol.

Yes, sort of - on Deno Deploy the authentication doesn't come from a token in env vars, but from intrinsic security tickets baked into the Deno Deploy system. Also, it's a bit faster on first connect, because compared to KV connect we can skip the metadata exchange[1] because the information it provides is already present in Deno Deploy through other means. Both the backend service and frontend API (JS->KV) is the same though :)

[1]: https://github.com/denoland/deno/blob/be1fc754a14683bf640b7b...

import { serve } from "https://deno.land/[email protected]/http/server.ts";

Deno is an alternative JavaScript runtime that was released back in 2020. I’ve been seeing more interest in it recently, and it has some compelling features:

Most platform connectors are written on Deno, that allows you to host them serverless for free!

{ "lock": false, "tasks": { "start": "deno run -A --watch=static/,routes/ dev.ts", "update": "deno run -A -r https://fresh.deno.dev/update .", "minify": "deno run --allow-env=DENO_ENV --allow-read --allow-run --allow-write minify-svg-sprite.ts" }, "imports": { "@/": "./", "$fresh/": "https://deno.land/x/[email protected]/", "preact": "https://esm.sh/[email protected]", "preact/": "https://esm.sh/[email protected]/", "preact-render-to-string": "https://esm.sh/*[email protected]", "@preact/signals": "https://esm.sh/*@preact/[email protected]", "@preact/signals-core": "https://esm.sh/*@preact/[email protected]", "$std/": "https://deno.land/[email protected]/", "svgo": "https://esm.sh/[email protected]/" }, "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" } }

// deno-test.ts // Import necessary libraries and modules import { assert, assertExists, assertEquals, } from "https://deno.land/[email protected]/testing/asserts.ts"; import { createClient, SupabaseClient, } from "https://esm.sh/@supabase/[email protected]"; import { delay } from 'https://deno.land/x/[email protected]/mod.ts'; // Setup the Supabase client configuration const supabaseUrl = Deno.env.get("SUPABASE_URL") ?? ""; const supabaseKey = Deno.env.get("SUPABASE_ANON_KEY") ?? ""; const options = { auth: { autoRefreshToken: false, persistSession: false, detectSessionInUrl: false } }; // Test the creation and functionality of the Supabase client const testClientCreation = async () => { var client: SupabaseClient = createClient(supabaseUrl, supabaseKey, options); // Check if the Supabase URL and key are provided if (!supabaseUrl) throw new Error('supabaseUrl is required.') if (!supabaseKey) throw new Error('supabaseKey is required.') // Test a simple query to the database const { data: table_data, error: table_error } = await client.from('my_table').select('*').limit(1); if (table_error) { throw new Error('Invalid Supabase client: ' + table_error.message); } assert(table_data, "Data should be returned from the query."); }; // Test the 'hello-world' function const testHelloWorld = async () => { var client: SupabaseClient = createClient(supabaseUrl, supabaseKey, options); // Invoke the 'hello-world' function with a parameter const { data: func_data, error: func_error } = await client.functions.invoke('hello-world', { body: { name: 'bar' } }); // Check for errors from the function invocation if (func_error) { throw new Error('Invalid response: ' + func_error.message); } // Log the response from the function console.log(JSON.stringify(func_data, null, 2)); // Assert that the function returned the expected result assertEquals(func_data.message, 'Hello bar!'); }; // Register and run the tests Deno.test("Client Creation Test", testClientCreation); Deno.test("Hello-world Function Test", testHelloWorld);

import { serve } from "https://deno.land/[email protected]/http/server.ts"; import { createClient } from "https://esm.sh/@supabase/supabase-js@2"; const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type", }; serve(async (req) => { // Create a Supabase client with the necessary credentials if (req.method === 'OPTIONS') { return new Response('ok', { headers: corsHeaders }) } // Create a Supabase client with the necessary credentials const supabaseClient = createClient( Deno.env.get("SUPABASE_URL") ?? "", Deno.env.get("SUPABASE_ANON_KEY") ?? "", { global: { headers: { Authorization: req.headers.get("Authorization")! } }, auth: { autoRefreshToken: false, persistSession: false, detectSessionInUrl: false } } ); console.log("Supabase client created"); // Fetch the logged-in user from Supabase const { data: { user }, error: userError } = await supabaseClient.auth .getUser(); console.log("User fetched", user); if (userError) { console.error("User error", userError); return new Response(JSON.stringify({ error: userError.message }), { headers: { ...corsHeaders, "Content-Type": "application/json" }, status: 400, }); } // Extract the old and new passwords from the request const { oldPassword, newPassword } = await req.json(); console.log("Received old and new passwords", oldPassword, newPassword); // Verify the old password using the `verify_user_password` function const { data: isValidOldPassword, error: passwordError } = await supabaseClient.rpc("verify_user_password", { password: oldPassword }); console.log("Old password verified", isValidOldPassword); if (passwordError || !isValidOldPassword) { console.error("Invalid old password", passwordError); return new Response(JSON.stringify({ error: "Invalid old password" }), { headers: { ...corsHeaders, "Content-Type": "application/json" }, status: 400, }); } try { // Fetch the user's profile data const { data: profiles, error: profileError } = await supabaseClient.from( "profiles", ).select("id, avatar_url"); console.log("Profile data fetched", profiles); if (profileError) throw profileError; const user_id = profiles[0].id; console.log("User id", user_id); // Update the user's password using the Supabase Admin API const supabaseAdmin = createClient( Deno.env.get("SUPABASE_URL") ?? "", Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "", { auth: { autoRefreshToken: false, persistSession: false, detectSessionInUrl: false } } ); console.log("Admin client created"); // Return a success response to the client const { error: updateError } = await supabaseAdmin .auth.admin.updateUserById( user_id, { password: newPassword }, ); console.log("Password updated"); if (updateError) { console.error("Update error", updateError); return new Response(JSON.stringify({ error: updateError.message }), { status: 400, }); } } catch (error) { console.error("Caught error", error); return new Response(JSON.stringify({ error: error }), { headers: { ...corsHeaders, "Content-Type": "application/json" }, status: 400, }); } console.log("Password update successful"); // Return a success response to the client return new Response( JSON.stringify({ message: "Password updated successfully" }), { headers: { ...corsHeaders, "Content-Type": "application/json" }, status: 200, }, ); });

For the most part they work once aliases have been set up. It's not documented yet but will be hopefully soon. The gist is that two aliases need to be added to the import map: { "react": "[https://esm.sh/preact/compat](https://esm.sh/preact/compat)", "react-dom": "https://esm.sh/preact/compat", "@radix-ui/switch": "https://esm.sh/@radix-ui/[email protected]?external=react,react-dom" } The npm: specifiers unfortunately don't work with that yet, as we don't support aliasing dependencies so far.

> And then people go "but you can use ESM in browsers without a build step!", apparently not realizing that that is an utterly useless feature because loading a full dependency tree over the network would be unreasonably and unavoidably slow - you'd need as many roundtrips as there are levels of depth in your dependency tree - and so you need some kind of build step anyway, eliminating this entire supposed benefit.

This is not true if you use a CDN like esm.sh[1] or skypack[2].

[1]: https://esm.sh/

[2]: https://www.skypack.dev/

{ "imports": { "$fresh/": "https://deno.land/x/[email protected]/", "preact": "https://esm.sh/[email protected]", "preact/": "https://esm.sh/[email protected]/", "preact-render-to-string": "https://esm.sh/*[email protected]", "@preact/signals": "https://esm.sh/*@preact/[email protected]", "@preact/signals-core": "https://esm.sh/*@preact/[email protected]", DELETE THESE TWO LINES "twind": "https://esm.sh/twin[email protected]", "twind/": "https://esm.sh/[email protected]/" } }

Install @krofdrakula/drop in your dependencies or use https://esm.sh/@krofdrakula/drop as your module import.

Check out https://esm.sh/#cli for a minimalist yet full featured solution that amends your import map for you. It does require Deno.

If you're happy with a single bundled file, another option is:

    deno bundle 'https://esm.sh/@observablehq/plot' > plot.js

Want to import a package / file conveniently from esm.sh or unpkg or directly from a GitHub repo for a one-off script (for example). To do this I created a custom ESBuild plugin to handle HTTP imports - that worked for ,js files. To support running both ESM and CJS, I use tsx.