From c8c32366e90109f0afee8288e7dc35432d02a785 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 11:40:11 +0100 Subject: [PATCH 01/21] deno deploy --- dev-server.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/dev-server.js b/dev-server.js index dfd0f69..74771fe 100644 --- a/dev-server.js +++ b/dev-server.js @@ -2,11 +2,11 @@ import { listenAndServe } from "https://deno.land/std@0.113.0/http/server.ts"; import { serveFile } from "https://deno.land/std@0.113.0/http/file_server.ts"; import { common, - parse, + // parse, extname, toFileUrl, } from "https://deno.land/std@0.113.0/path/mod.ts"; -import { ensureDir } from "https://deno.land/std@0.113.0/fs/mod.ts"; +//import { ensureDir } from "https://deno.land/std@0.113.0/fs/mod.ts"; import { MEDIA_TYPES } from "./media-type.js"; const staticAssets = { @@ -18,7 +18,7 @@ const staticAssets = { /** * @param {string} path - * @returns string + * @returns {string} */ function removeLeadingSlash(path) { if (path.startsWith("/")) { @@ -29,7 +29,7 @@ function removeLeadingSlash(path) { /** * @param {string} path - * @returns + * @returns {string} */ function removeTrailingSlash(path) { if (path.endsWith("/")) { @@ -40,7 +40,7 @@ function removeTrailingSlash(path) { /** * @param {string} path - * @returns + * @returns {string} */ function removeSlashes(path) { return removeTrailingSlash(removeLeadingSlash(path)); @@ -48,6 +48,7 @@ function removeSlashes(path) { /** * @param {Request} request +* @returns {Promise} */ async function requestHandler(request) { const mode = request.headers.get('sec-fetch-mode'); @@ -142,11 +143,11 @@ async function requestHandler(request) { const shortFileName = fileName.replace(commonPath, ``); sessionStorage.setItem(shortFileName, text); - const outputFileName = `./dist/${shortFileName}`; + // const outputFileName = `./dist/${shortFileName}`; - const { dir } = parse(outputFileName); - await ensureDir(dir); - await Deno.writeTextFile(outputFileName, text); + // const { dir } = parse(outputFileName); + // await ensureDir(dir); + // await Deno.writeTextFile(outputFileName, text); } return new Response(pathname, { From 8375317f1efa5427a0ad39dcd69721eb00b443dc Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 13:16:01 +0100 Subject: [PATCH 02/21] create separate deno deploy server --- deploy-server.js | 37 +++++++++++++++++++++++++++++++++++++ deploy.html | 14 ++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 deploy-server.js create mode 100644 deploy.html diff --git a/deploy-server.js b/deploy-server.js new file mode 100644 index 0000000..9a01d18 --- /dev/null +++ b/deploy-server.js @@ -0,0 +1,37 @@ +import { listenAndServe } from "https://deno.land/std@0.113.0/http/server.ts"; +import { serveFile } from "https://deno.land/std@0.113.0/http/file_server.ts"; + +const staticAssets = { + "/": "./deploy.html", + "/deploy.html": "./deploy.html" +}; + +/** +* @param {Request} request +* @returns {Promise} +*/ +async function requestHandler(request) { + const mode = request.headers.get('sec-fetch-mode'); + const dest = request.headers.get('sec-fetch-dest'); + const site = request.headers.get('sec-fetch-site'); + + const { pathname } = new URL(request.url); + const staticFile = staticAssets[pathname]; + + if (staticFile) { + try { + return serveFile(request, staticFile); + } catch (error) { + return new Response(error.message || error.toString(), { status: 500 }) + } + } +} + +if (import.meta.main) { + const PORT = Deno.env.get("PORT") || 8080; + const timestamp = Date.now(); + const humanReadableDateTime = new Date(timestamp).toLocaleString(); + console.log('Current Date: ', humanReadableDateTime) + console.info(`Server Listening on http://localhost:${PORT}`); + listenAndServe(`:${PORT}`, requestHandler); +} \ No newline at end of file diff --git a/deploy.html b/deploy.html new file mode 100644 index 0000000..a8c3693 --- /dev/null +++ b/deploy.html @@ -0,0 +1,14 @@ + + + + Excalidraw in browser + + + + +

Excalidraw Importmap Example

+
+ Deployed on Deno Deploy +
+ + From 4e91c2d086ea7671dda45dc65ca2e0e3572263ce Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 13:18:20 +0100 Subject: [PATCH 03/21] dummy change --- deploy.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/deploy.html b/deploy.html index a8c3693..437999e 100644 --- a/deploy.html +++ b/deploy.html @@ -6,7 +6,9 @@ -

Excalidraw Importmap Example

+
+

Excalidraw Importmap Example

+
Deployed on Deno Deploy
From 18617037290566260310fc75dae182b0c02c053e Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 13:21:14 +0100 Subject: [PATCH 04/21] add some logging --- deploy-server.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/deploy-server.js b/deploy-server.js index 9a01d18..76fea83 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -14,10 +14,13 @@ async function requestHandler(request) { const mode = request.headers.get('sec-fetch-mode'); const dest = request.headers.get('sec-fetch-dest'); const site = request.headers.get('sec-fetch-site'); - const { pathname } = new URL(request.url); const staticFile = staticAssets[pathname]; + console.log('mode: ', mode); + console.log('pathname: ', pathname); + console.log('staticFile: ', staticFile); + if (staticFile) { try { return serveFile(request, staticFile); From 5480127a4a6bdb061af26f0b41f490c331f6f04f Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 13:25:22 +0100 Subject: [PATCH 05/21] probably serveFile is not supported --- deploy-server.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index 76fea83..b0cd72e 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -1,5 +1,4 @@ import { listenAndServe } from "https://deno.land/std@0.113.0/http/server.ts"; -import { serveFile } from "https://deno.land/std@0.113.0/http/file_server.ts"; const staticAssets = { "/": "./deploy.html", @@ -23,7 +22,7 @@ async function requestHandler(request) { if (staticFile) { try { - return serveFile(request, staticFile); + await Deno.readFile(staticFile); } catch (error) { return new Response(error.message || error.toString(), { status: 500 }) } From e4780a277b4e7f20047b5e602db1806893f9d712 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 13:31:05 +0100 Subject: [PATCH 06/21] return a response --- deploy-server.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index b0cd72e..4324b2c 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -13,16 +13,18 @@ async function requestHandler(request) { const mode = request.headers.get('sec-fetch-mode'); const dest = request.headers.get('sec-fetch-dest'); const site = request.headers.get('sec-fetch-site'); + const { pathname } = new URL(request.url); - const staticFile = staticAssets[pathname]; + const staticFileRelativePath = staticAssets[pathname]; console.log('mode: ', mode); console.log('pathname: ', pathname); - console.log('staticFile: ', staticFile); + console.log('staticFileRelativePath: ', staticFileRelativePath); if (staticFile) { try { - await Deno.readFile(staticFile); + const staticFile = await Deno.readTextFile(staticFileRelativePath); + return new Response(staticFile); } catch (error) { return new Response(error.message || error.toString(), { status: 500 }) } From fd58dd782072e753bd131d575812842611f793b8 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 13:43:36 +0100 Subject: [PATCH 07/21] test continues --- deploy-server.js | 54 ++++++++++++++++-------------------------------- 1 file changed, 18 insertions(+), 36 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index 4324b2c..f780785 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -1,41 +1,23 @@ -import { listenAndServe } from "https://deno.land/std@0.113.0/http/server.ts"; +import { listenAndServe } from "https://deno.land/std@0.111.0/http/server.ts"; -const staticAssets = { - "/": "./deploy.html", - "/deploy.html": "./deploy.html" -}; +async function handler(_req) { + // Let's read the README.md file available at the root + // of the repository to explore the available methods. -/** -* @param {Request} request -* @returns {Promise} -*/ -async function requestHandler(request) { - const mode = request.headers.get('sec-fetch-mode'); - const dest = request.headers.get('sec-fetch-dest'); - const site = request.headers.get('sec-fetch-site'); + // Relative paths are relative to the root of the repository + const readmeRelative = await Deno.readFile("./README.md"); + // Absolute paths. + // The content of the repository is available under at Deno.cwd(). + // const readmeAbsolute = await Deno.readFile(`${Deno.cwd()}/README.md`); + // File URLs are also supported. +// const readmeFileUrl = await Deno.readFile( +// new URL(`file://${Deno.cwd()}/README.md`), +// ); - const { pathname } = new URL(request.url); - const staticFileRelativePath = staticAssets[pathname]; - - console.log('mode: ', mode); - console.log('pathname: ', pathname); - console.log('staticFileRelativePath: ', staticFileRelativePath); - - if (staticFile) { - try { - const staticFile = await Deno.readTextFile(staticFileRelativePath); - return new Response(staticFile); - } catch (error) { - return new Response(error.message || error.toString(), { status: 500 }) - } - } + // Decode the Uint8Array as string. + const readme = new TextDecoder().decode(readmeRelative); + return new Response(readme); } -if (import.meta.main) { - const PORT = Deno.env.get("PORT") || 8080; - const timestamp = Date.now(); - const humanReadableDateTime = new Date(timestamp).toLocaleString(); - console.log('Current Date: ', humanReadableDateTime) - console.info(`Server Listening on http://localhost:${PORT}`); - listenAndServe(`:${PORT}`, requestHandler); -} \ No newline at end of file +console.log("Listening on http://localhost:8080"); +await listenAndServe(":8080", handler); From 32646b0efb3bdf139a1198962fd73f5b2dc24ff3 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 13:46:18 +0100 Subject: [PATCH 08/21] use Deno.readTextFile --- deploy-server.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index f780785..2c13ac0 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -5,7 +5,8 @@ async function handler(_req) { // of the repository to explore the available methods. // Relative paths are relative to the root of the repository - const readmeRelative = await Deno.readFile("./README.md"); + // const readmeRelative = await Deno.readFile("./README.md"); + const readmeRelative = await Deno.readTextFile("./README.md"); // Absolute paths. // The content of the repository is available under at Deno.cwd(). // const readmeAbsolute = await Deno.readFile(`${Deno.cwd()}/README.md`); @@ -15,8 +16,8 @@ async function handler(_req) { // ); // Decode the Uint8Array as string. - const readme = new TextDecoder().decode(readmeRelative); - return new Response(readme); + // const readme = new TextDecoder().decode(readmeRelative); + return new Response(readmeRelative); } console.log("Listening on http://localhost:8080"); From 50281509d1ecef94a4f9ad27a47b5877f1d9d2ef Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 13:52:49 +0100 Subject: [PATCH 09/21] use assetMap --- deploy-server.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index 2c13ac0..0b97f70 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -1,12 +1,19 @@ import { listenAndServe } from "https://deno.land/std@0.111.0/http/server.ts"; -async function handler(_req) { +const assetMap = { + '/': './deploy.html', + '/README.md': './README.md' +} + +async function handler(request) { + const { pathname } = new URL(request.url); // Let's read the README.md file available at the root // of the repository to explore the available methods. // Relative paths are relative to the root of the repository // const readmeRelative = await Deno.readFile("./README.md"); - const readmeRelative = await Deno.readTextFile("./README.md"); + const assetPath = assetMap[pathname] + const testFile = await Deno.readTextFile(assetPath); // Absolute paths. // The content of the repository is available under at Deno.cwd(). // const readmeAbsolute = await Deno.readFile(`${Deno.cwd()}/README.md`); @@ -17,7 +24,7 @@ async function handler(_req) { // Decode the Uint8Array as string. // const readme = new TextDecoder().decode(readmeRelative); - return new Response(readmeRelative); + return new Response(testFile); } console.log("Listening on http://localhost:8080"); From 108167ee0f3b651335422a12f6a92f5e4b5a89c6 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 14:02:32 +0100 Subject: [PATCH 10/21] detect fileExtension --- deploy-server.js | 74 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 56 insertions(+), 18 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index 0b97f70..39cebaf 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -5,26 +5,64 @@ const assetMap = { '/README.md': './README.md' } +/** + * @param {string} path + * @returns {string} + */ + function removeLeadingSlash(path) { + if (path.startsWith("/")) { + return path.slice(1); + } + return path; + } + + /** + * @param {string} path + * @returns {string} + */ + function removeTrailingSlash(path) { + if (path.endsWith("/")) { + return path.slice(0, -1); + } + return path; + } + + /** + * @param {string} path + * @returns {string} + */ + function removeSlashes(path) { + return removeTrailingSlash(removeLeadingSlash(path)); + } + async function handler(request) { + const mode = request.headers.get('sec-fetch-mode'); + const dest = request.headers.get('sec-fetch-dest'); + const site = request.headers.get('sec-fetch-site'); + const { pathname } = new URL(request.url); - // Let's read the README.md file available at the root - // of the repository to explore the available methods. - - // Relative paths are relative to the root of the repository - // const readmeRelative = await Deno.readFile("./README.md"); - const assetPath = assetMap[pathname] - const testFile = await Deno.readTextFile(assetPath); - // Absolute paths. - // The content of the repository is available under at Deno.cwd(). - // const readmeAbsolute = await Deno.readFile(`${Deno.cwd()}/README.md`); - // File URLs are also supported. -// const readmeFileUrl = await Deno.readFile( -// new URL(`file://${Deno.cwd()}/README.md`), -// ); - - // Decode the Uint8Array as string. - // const readme = new TextDecoder().decode(readmeRelative); - return new Response(testFile); + const assetPath = assetMap[pathname]; + const maidenPathname = removeSlashes(assetPath); + const [...rest, fileExtension] = maidenPathname.split('.') + + console.log('mode: ', mode); + console.log('pathname: ', pathname); + console.log('assetPath: ', assetPath); + console.log('maidenPathname: ', maidenPathname); + console.log('fileExtension: ', fileExtension); + + const asset = await Deno.readTextFile(assetPath); + // Absolute paths. + // The content of the repository is available under at Deno.cwd(). + // const readmeAbsolute = await Deno.readFile(`${Deno.cwd()}/README.md`); + // File URLs are also supported. + // const readmeFileUrl = await Deno.readFile( + // new URL(`file://${Deno.cwd()}/README.md`), + // ); + + // Decode the Uint8Array as string. + // const readme = new TextDecoder().decode(readmeRelative); + return new Response(asset); } console.log("Listening on http://localhost:8080"); From b136e04aa761ccd3614e50b24e0ce6cb9e138a8a Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 14:18:18 +0100 Subject: [PATCH 11/21] add content type --- deploy-server.js | 46 +++++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index 39cebaf..475e880 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -9,31 +9,31 @@ const assetMap = { * @param {string} path * @returns {string} */ - function removeLeadingSlash(path) { +function removeLeadingSlash(path) { if (path.startsWith("/")) { - return path.slice(1); + return path.slice(1); } return path; - } - - /** - * @param {string} path - * @returns {string} - */ - function removeTrailingSlash(path) { +} + +/** + * @param {string} path + * @returns {string} + */ +function removeTrailingSlash(path) { if (path.endsWith("/")) { - return path.slice(0, -1); + return path.slice(0, -1); } return path; - } - - /** - * @param {string} path - * @returns {string} - */ - function removeSlashes(path) { +} + +/** + * @param {string} path + * @returns {string} + */ +function removeSlashes(path) { return removeTrailingSlash(removeLeadingSlash(path)); - } +} async function handler(request) { const mode = request.headers.get('sec-fetch-mode'); @@ -43,7 +43,7 @@ async function handler(request) { const { pathname } = new URL(request.url); const assetPath = assetMap[pathname]; const maidenPathname = removeSlashes(assetPath); - const [...rest, fileExtension] = maidenPathname.split('.') + const [fileExtension] = maidenPathname.split('.').reverse(); console.log('mode: ', mode); console.log('pathname: ', pathname); @@ -51,7 +51,7 @@ async function handler(request) { console.log('maidenPathname: ', maidenPathname); console.log('fileExtension: ', fileExtension); - const asset = await Deno.readTextFile(assetPath); + const textFileContent = await Deno.readTextFile(assetPath); // Absolute paths. // The content of the repository is available under at Deno.cwd(). // const readmeAbsolute = await Deno.readFile(`${Deno.cwd()}/README.md`); @@ -62,7 +62,11 @@ async function handler(request) { // Decode the Uint8Array as string. // const readme = new TextDecoder().decode(readmeRelative); - return new Response(asset); + return new Response(textFileContent, { + headers: { + "content-type": MEDIA_TYPES[`.${fileExtension}`], + } + }); } console.log("Listening on http://localhost:8080"); From ece835340e41f6e9dec970df02a417445554707c Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 14:21:15 +0100 Subject: [PATCH 12/21] really... --- deploy-server.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index 475e880..8ced6eb 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -62,11 +62,7 @@ async function handler(request) { // Decode the Uint8Array as string. // const readme = new TextDecoder().decode(readmeRelative); - return new Response(textFileContent, { - headers: { - "content-type": MEDIA_TYPES[`.${fileExtension}`], - } - }); + return new Response(textFileContent); } console.log("Listening on http://localhost:8080"); From 012cae946161ca2f1d4a084aee87e84033fee7f9 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 14:25:17 +0100 Subject: [PATCH 13/21] add missing import --- deploy-server.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/deploy-server.js b/deploy-server.js index 8ced6eb..cbaf306 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -1,4 +1,5 @@ import { listenAndServe } from "https://deno.land/std@0.111.0/http/server.ts"; +import { MEDIA_TYPES } from './media-type.js'; const assetMap = { '/': './deploy.html', @@ -62,7 +63,12 @@ async function handler(request) { // Decode the Uint8Array as string. // const readme = new TextDecoder().decode(readmeRelative); - return new Response(textFileContent); + // return new Response(textFileContent); + return new Response(html, { + headers: { + "content-type": MEDIA_TYPES[`.${fileExtension}`], + } + }); } console.log("Listening on http://localhost:8080"); From 48bd7d1e451170b399777622e868af9464c06e9a Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 14:26:37 +0100 Subject: [PATCH 14/21] ofcourse missing value --- deploy-server.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/deploy-server.js b/deploy-server.js index cbaf306..8a2468b 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -64,7 +64,7 @@ async function handler(request) { // Decode the Uint8Array as string. // const readme = new TextDecoder().decode(readmeRelative); // return new Response(textFileContent); - return new Response(html, { + return new Response(textFileContent, { headers: { "content-type": MEDIA_TYPES[`.${fileExtension}`], } From 31e9bcd89a2a2453d1116287970a156b140080d2 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 17:57:30 +0100 Subject: [PATCH 15/21] check storage --- deploy-server.js | 34 +++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index 8a2468b..4576db1 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -1,6 +1,10 @@ import { listenAndServe } from "https://deno.land/std@0.111.0/http/server.ts"; import { MEDIA_TYPES } from './media-type.js'; +const { sessionStorage, localStorage } = globalThis; +console.log('sessionStorage: ', sessionStorage); +console.log('localStorage: ', localStorage); + const assetMap = { '/': './deploy.html', '/README.md': './README.md' @@ -36,6 +40,11 @@ function removeSlashes(path) { return removeTrailingSlash(removeLeadingSlash(path)); } +function getFileExtensionFromPath(maidenPathname) { + const [fileExtension] = maidenPathname.split('.').reverse(); + return `.${fileExtension}`; +} + async function handler(request) { const mode = request.headers.get('sec-fetch-mode'); const dest = request.headers.get('sec-fetch-dest'); @@ -44,13 +53,24 @@ async function handler(request) { const { pathname } = new URL(request.url); const assetPath = assetMap[pathname]; const maidenPathname = removeSlashes(assetPath); - const [fileExtension] = maidenPathname.split('.').reverse(); - console.log('mode: ', mode); - console.log('pathname: ', pathname); - console.log('assetPath: ', assetPath); - console.log('maidenPathname: ', maidenPathname); - console.log('fileExtension: ', fileExtension); + const storage = sessionStorage || localStorage; + + if (storage) { + const storedFileKey = removeSlashes(pathname); + const storedFile = storage.getItem(storedFileKey); + + if (storedFile) { + return new Response(storedFile, { + // @ts-ignore + headers: { + // @ts-ignore + "content-type": MEDIA_TYPES[getFileExtensionFromPath(storedFileKey)], + "x-cache": 'HIT' + } + }); + } + } const textFileContent = await Deno.readTextFile(assetPath); // Absolute paths. @@ -66,7 +86,7 @@ async function handler(request) { // return new Response(textFileContent); return new Response(textFileContent, { headers: { - "content-type": MEDIA_TYPES[`.${fileExtension}`], + "content-type": MEDIA_TYPES[getFileExtensionFromPath(maidenPathname)], } }); } From a674364565b1d6227f8dfa0bd339032e25ffec48 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Sun, 7 Nov 2021 18:03:40 +0100 Subject: [PATCH 16/21] don't start the server by default --- deploy-server.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index 4576db1..1f5af01 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -1,10 +1,6 @@ import { listenAndServe } from "https://deno.land/std@0.111.0/http/server.ts"; import { MEDIA_TYPES } from './media-type.js'; -const { sessionStorage, localStorage } = globalThis; -console.log('sessionStorage: ', sessionStorage); -console.log('localStorage: ', localStorage); - const assetMap = { '/': './deploy.html', '/README.md': './README.md' @@ -45,7 +41,7 @@ function getFileExtensionFromPath(maidenPathname) { return `.${fileExtension}`; } -async function handler(request) { +async function requestHandler(request) { const mode = request.headers.get('sec-fetch-mode'); const dest = request.headers.get('sec-fetch-dest'); const site = request.headers.get('sec-fetch-site'); @@ -54,6 +50,8 @@ async function handler(request) { const assetPath = assetMap[pathname]; const maidenPathname = removeSlashes(assetPath); + const { sessionStorage, localStorage } = globalThis; + const storage = sessionStorage || localStorage; if (storage) { @@ -91,5 +89,15 @@ async function handler(request) { }); } -console.log("Listening on http://localhost:8080"); -await listenAndServe(":8080", handler); +// console.log("Listening on http://localhost:8080"); +// await listenAndServe(":8080", handler); + +if (import.meta.main) { + const PORT = Deno.env.get("PORT") || 1729; + const timestamp = Date.now(); + const humanReadableDateTime = new Date(timestamp).toLocaleString(); + console.log('Current Date: ', humanReadableDateTime) + console.info(`Server Listening on http://localhost:${PORT}`); + listenAndServe(`:${PORT}`, requestHandler); + } + \ No newline at end of file From fb4bec9d4b85de5b1cf518e159c87349ee9f975c Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Mon, 8 Nov 2021 00:33:23 +0100 Subject: [PATCH 17/21] add jsx runtime compilation --- deploy-server.js | 147 ++++++++++++++++++++++++++++++++++++++--------- deploy.html | 29 ++++++---- js/deploy.js | 1 + 3 files changed, 140 insertions(+), 37 deletions(-) create mode 100644 js/deploy.js diff --git a/deploy-server.js b/deploy-server.js index 1f5af01..d4fd0c5 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -36,22 +36,32 @@ function removeSlashes(path) { return removeTrailingSlash(removeLeadingSlash(path)); } +/** + * A `maidenPathname` is a `URL.pathname` without any path prefix, relative or absolute. + * e.g. 👇 + * ``` + * https://www.example.com/js/main.js -> js/main.js + * /js/main.js -> js/main.js + * ./js/main.js -> js/main.js + * js/main.js -> js/main.js + * ``` + * @param {string} maidenPathname + * @returns {string} + */ function getFileExtensionFromPath(maidenPathname) { const [fileExtension] = maidenPathname.split('.').reverse(); return `.${fileExtension}`; } +/** +* @param {Request} request +* @returns {Promise} +*/ async function requestHandler(request) { - const mode = request.headers.get('sec-fetch-mode'); - const dest = request.headers.get('sec-fetch-dest'); - const site = request.headers.get('sec-fetch-site'); - const { pathname } = new URL(request.url); - const assetPath = assetMap[pathname]; - const maidenPathname = removeSlashes(assetPath); const { sessionStorage, localStorage } = globalThis; - + const storage = sessionStorage || localStorage; if (storage) { @@ -70,28 +80,112 @@ async function requestHandler(request) { } } - const textFileContent = await Deno.readTextFile(assetPath); - // Absolute paths. - // The content of the repository is available under at Deno.cwd(). - // const readmeAbsolute = await Deno.readFile(`${Deno.cwd()}/README.md`); - // File URLs are also supported. - // const readmeFileUrl = await Deno.readFile( - // new URL(`file://${Deno.cwd()}/README.md`), - // ); - - // Decode the Uint8Array as string. - // const readme = new TextDecoder().decode(readmeRelative); - // return new Response(textFileContent); - return new Response(textFileContent, { - headers: { - "content-type": MEDIA_TYPES[getFileExtensionFromPath(maidenPathname)], + const assetPath = assetMap[pathname]; + + if (assetPath) { + try { + + const mode = request.headers.get('sec-fetch-mode'); + const dest = request.headers.get('sec-fetch-dest'); + const contentTypeHTML = mode === 'navigate' || dest === 'document'; + + if (contentTypeHTML) { + const content = await Deno.readTextFile(assetPath); + const { main } = await import('./js/importmap-generator.js'); + const importMap = await main(); + + const [beforeImportmap, afterImportmap] = content.split("//__importmap"); + const html = `${beforeImportmap}${importMap}${afterImportmap}`; + + return new Response(html, { + headers: { + "content-type": MEDIA_TYPES['.html'], + } + }); + } + + const content = Deno.readFile(assetPath); + const textDecodedContent = new TextDecoder().decode(fileContent); + const maidenPathname = removeSlashes(assetPath); + + return new Response(textDecodedContent, { + headers: { + "content-type": MEDIA_TYPES[getFileExtensionFromPath(maidenPathname)], + } + }); + } catch (error) { + return new Response(error.message || error.toString(), { status: 500 }); + } + } + + + const site = request.headers.get('sec-fetch-site'); + const contentTypeCompiledJSX = dest === 'script' && mode === 'cors' && site === 'same-origin' && pathname.endsWith(".jsx.js"); + + if (contentTypeCompiledJSX) { + try { + const { files, diagnostics } = await Deno.emit(`.${pathname}`.slice(0, -3)); + + if (diagnostics.length) { + // there is something that impacted the emit + console.warn(Deno.formatDiagnostics(diagnostics)); + } + // @ts-ignore + const [, content] = Object.entries(files).find(([fileName]) => { + const cwd = toFileUrl(Deno.cwd()).href; + const commonPath = common([ + cwd, + fileName, + ]); + const shortFileName = fileName.replace(commonPath, `/`); + + return shortFileName === pathname; + }); + return new Response(content); + } catch (error) { + return new Response(error.message || error.toString(), { status: 500 }) + } + } + + if (pathname.endsWith(".jsx")) { + try { + if (storage) { + const { files, diagnostics } = await Deno.emit(`.${pathname}`); + + if (diagnostics.length) { + // there is something that impacted the emit + console.warn(Deno.formatDiagnostics(diagnostics)); + } + + for (const [fileName, text] of Object.entries(files)) { + + const cwd = toFileUrl(Deno.cwd()).href; + const commonPath = common([ + cwd, + fileName, + ]); + const maidenPathname = fileName.replace(commonPath, ``); + + storage.setItem(maidenPathname, text); + } + } + + return new Response(pathname, { + status: 303, + headers: { + "location": `${request.url}.js`, + }, + }); + } catch (error) { + return new Response(error.message || error.toString(), { status: 500 }) } + } + + return new Response(null, { + status: 404, }); } -// console.log("Listening on http://localhost:8080"); -// await listenAndServe(":8080", handler); - if (import.meta.main) { const PORT = Deno.env.get("PORT") || 1729; const timestamp = Date.now(); @@ -99,5 +193,4 @@ if (import.meta.main) { console.log('Current Date: ', humanReadableDateTime) console.info(`Server Listening on http://localhost:${PORT}`); listenAndServe(`:${PORT}`, requestHandler); - } - \ No newline at end of file +} diff --git a/deploy.html b/deploy.html index 437999e..b6faab8 100644 --- a/deploy.html +++ b/deploy.html @@ -1,16 +1,25 @@ - + - Excalidraw in browser + + + @fusionstrings/river + + + - -
-

Excalidraw Importmap Example

-
-
- Deployed on Deno Deploy -
+

@fusionstrings/river

+ + - + \ No newline at end of file diff --git a/js/deploy.js b/js/deploy.js new file mode 100644 index 0000000..b75352e --- /dev/null +++ b/js/deploy.js @@ -0,0 +1 @@ +export { main } from './dom.jsx'; From 8a4271f9f01c93fde2e877455a66975308809d73 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Mon, 8 Nov 2021 01:06:07 +0100 Subject: [PATCH 18/21] add jspm-generator function --- js/importmap-generator.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 js/importmap-generator.js diff --git a/js/importmap-generator.js b/js/importmap-generator.js new file mode 100644 index 0000000..2457788 --- /dev/null +++ b/js/importmap-generator.js @@ -0,0 +1,21 @@ +import { Generator } from "https://cdn.jsdelivr.net/gh/fusionstrings/dependencies@c59ae9dde8d5d339b3c0433d4b4f46e72739fafe/dist/deno/jspm.js"; + +async function main(subpath = "./js/main.js") { + const generator = new Generator(); + + await generator.install([ + { + alias: "@fusionstrings/river", + target: "./", + subpath, + }, + ]); + const importMap = JSON.stringify(generator.getMap(), null, 2); + return importMap; +} + +if (import.meta.main) { + main(); +} + +export { main } \ No newline at end of file From 4b81de9259eae1dc1f8fc094157811c7ef99bfdd Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Mon, 8 Nov 2021 01:09:57 +0100 Subject: [PATCH 19/21] it appears that dynamic import is not supported on deno deploy --- deploy-server.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/deploy-server.js b/deploy-server.js index d4fd0c5..a4397ce 100644 --- a/deploy-server.js +++ b/deploy-server.js @@ -1,5 +1,6 @@ import { listenAndServe } from "https://deno.land/std@0.111.0/http/server.ts"; import { MEDIA_TYPES } from './media-type.js'; +import { main as generateImportmap } from './js/importmap-generator.js'; const assetMap = { '/': './deploy.html', @@ -91,8 +92,7 @@ async function requestHandler(request) { if (contentTypeHTML) { const content = await Deno.readTextFile(assetPath); - const { main } = await import('./js/importmap-generator.js'); - const importMap = await main(); + const importMap = await generateImportmap(); const [beforeImportmap, afterImportmap] = content.split("//__importmap"); const html = `${beforeImportmap}${importMap}${afterImportmap}`; @@ -182,7 +182,7 @@ async function requestHandler(request) { } return new Response(null, { - status: 404, + status: 404, }); } From 8f6c74fb313d2b005fd81137287f2bfec06f5d14 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Mon, 8 Nov 2021 01:21:03 +0100 Subject: [PATCH 20/21] see if browser version of jspm works --- js/importmap-generator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/importmap-generator.js b/js/importmap-generator.js index 2457788..9c228c9 100644 --- a/js/importmap-generator.js +++ b/js/importmap-generator.js @@ -1,4 +1,4 @@ -import { Generator } from "https://cdn.jsdelivr.net/gh/fusionstrings/dependencies@c59ae9dde8d5d339b3c0433d4b4f46e72739fafe/dist/deno/jspm.js"; +import { Generator } from "https://github.com/fusionstrings/dependencies/blob/c59ae9dde8d5d339b3c0433d4b4f46e72739fafe/dist/browser/jspm.js"; async function main(subpath = "./js/main.js") { const generator = new Generator(); From 253e35a5ea027dab628a2a5c7749325bcc7f4b12 Mon Sep 17 00:00:00 2001 From: "Dilip Kr. Shukla" Date: Mon, 8 Nov 2021 01:25:55 +0100 Subject: [PATCH 21/21] use jsdelivr cdn for serving correct content type --- js/importmap-generator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/importmap-generator.js b/js/importmap-generator.js index 9c228c9..695a97d 100644 --- a/js/importmap-generator.js +++ b/js/importmap-generator.js @@ -1,4 +1,4 @@ -import { Generator } from "https://github.com/fusionstrings/dependencies/blob/c59ae9dde8d5d339b3c0433d4b4f46e72739fafe/dist/browser/jspm.js"; +import { Generator } from 'https://cdn.jsdelivr.net/gh/fusionstrings/dependencies@c59ae9dde8d5d339b3c0433d4b4f46e72739fafe/dist/browser/jspm.js'; async function main(subpath = "./js/main.js") { const generator = new Generator();