@leftium/gg 0.0.1 → 0.0.2

package/README.md

@@ -9,6 +9,7 @@
 - Can be inserted into the middle of expressions (returns the value of the first argument).
 - Can output a link that opens the source file in your editor (like VS Code).
 - Simple to disable (turn all loggs into NOP's for production).
+- Diagnostics/hints in dev console & terminal to help install and configure correctly.
 - Faster to type.
 
 ## Installation

package/dist/OpenInEditorLink.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { dev } from '$app/environment';
+
+	let { ggResult } = $props();
+
+	// svelte-ignore non_reactive_update
+	let iframeElement: HTMLIFrameElement;
+
+	function onclick(event: MouseEvent) {
+		iframeElement.src = ggResult.url;
+		event.preventDefault();
+	}
+</script>
+
+{#if dev}
+	[📝<a
+		{onclick}
+		href={ggResult.url}
+		title={`${ggResult.fileName}@${ggResult.functionName}`}
+		target="_open-in-editor"
+		class="open-in-editor-link"
+	>
+		{ggResult.fileName}
+	</a>
+	👀]
+
+	<iframe bind:this={iframeElement} title="" hidden></iframe>
+{/if}

package/dist/OpenInEditorLink.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const OpenInEditorLink: import("svelte").Component<{
+    ggResult: any;
+}, {}, "">;
+type OpenInEditorLink = ReturnType<typeof OpenInEditorLink>;
+export default OpenInEditorLink;

package/dist/gg.d.ts

@@ -0,0 +1,12 @@
+import ErrorStackParser from 'error-stack-parser';
+export declare function gg(): {
+    fileName: string;
+    functionName: string;
+    url: string;
+    stack: ErrorStackParser.StackFrame[];
+};
+export declare function gg<T>(arg: T, ...args: unknown[]): T;
+export declare namespace gg {
+    var disable: () => string;
+    var enable: (namespaces: string) => void;
+}

package/dist/gg.js

@@ -0,0 +1,125 @@
+import * as dotenv from 'dotenv';
+import debugFactory from 'debug';
+import ErrorStackParser from 'error-stack-parser';
+import { BROWSER } from 'esm-env';
+import http from 'http';
+function findAvailablePort(startingPort) {
+    return new Promise((resolve) => {
+        const server = http.createServer();
+        server.listen(startingPort, () => {
+            const actualPort = server?.address()?.port;
+            server.close(() => resolve(actualPort));
+        });
+        server.on('error', () => {
+            // If the port is in use, try the next one
+            findAvailablePort(startingPort + 1).then(resolve);
+        });
+    });
+}
+function getServerPort() {
+    return new Promise((resolve) => {
+        if (BROWSER) {
+            // Browser environment
+            const currentPort = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
+            // Resolve the promise with the detected port
+            resolve(currentPort);
+        }
+        else {
+            // Node.js environment
+            const startingPort = Number(process.env.PORT) || 5173; // Default to Vite's default port
+            findAvailablePort(startingPort).then((actualPort) => {
+                resolve(actualPort);
+            });
+        }
+    });
+}
+const timestampRegex = /(\?t=\d+)?$/;
+const port = await getServerPort();
+const ggConfig = {
+    enabled: true,
+    showHints: true,
+    openInEditorUrlTemplate: `http://localhost:${port}/__open-in-editor?file=$FILENAME`,
+    // The srcRoot contains all source files.
+    // filename A        : http://localhost:5173/src/routes/+layout.svelte
+    // filename B        : http://localhost:5173/src/lib/gg.ts
+    // srcRootprefix     : http://localhost:5173/src/
+    // <folderName> group:                       src
+    srcRootPattern: '.*?(/(?<folderName>src|chunks)/)'
+};
+const srcRootRegex = new RegExp(ggConfig.srcRootPattern, 'i');
+// To maintain unique millisecond diffs for each callpoint:
+// - Create a unique log function for each callpoint.
+// - Cache and reuse the same log function for a given callpoint.
+const callpointToLogFunction = new Map();
+function openInEditorUrl(fileName) {
+    return ggConfig.openInEditorUrlTemplate.replace('$FILENAME', encodeURIComponent(fileName).replaceAll('%2F', '/'));
+}
+// http://localhost:5173/__open-in-editor?file=src%2Froutes%2F%2Bpage.svelte
+const ggLog = debugFactory('gg');
+// Log some gg info to the JS console/terminal:
+if (ggConfig.showHints) {
+    const ggLogTest = ggLog.extend('TEST');
+    let ggMessage = '\n';
+    // Utilities for forming ggMessage:
+    const message = (s) => (ggMessage += `${s}\n`);
+    const checkbox = (test) => (test ? '✅' : '❌');
+    const makeHint = (test, ifTrue, ifFalse = '') => (test ? ifTrue : ifFalse);
+    console.log(`Loaded gg module. Checking configuration...`);
+    if (ggConfig.enabled && ggLogTest.enabled) {
+        gg('If you can see this logg, gg configured correctly!');
+        message(`No problems detected:`);
+        if (BROWSER) {
+            message(`ℹ️ If gg output still not visible above, enable "Verbose" log level in browser DevTools.`);
+        }
+    }
+    else {
+        message(`Problems detected; fix all ❌:`);
+    }
+    const hint = makeHint(!ggConfig.enabled, ' (Update value in gg.ts file.)');
+    message(`${checkbox(ggConfig.enabled)} ggConfig.enabled: ${ggConfig.enabled}${hint}`);
+    if (BROWSER) {
+        const hint = makeHint(!ggLogTest.enabled, " (Try `localStorage.debug = 'gg:*'`)");
+        message(`${checkbox(ggLogTest.enabled)} localStorage.debug: ${localStorage?.debug}${hint}`);
+        const { status } = await fetch('/__open-in-editor?file=+');
+        message(makeHint(status === 222, `✅ (optional) open-in-editor vite plugin detected! (status code: ${status})`, `⚠️ (optional) open-in-editor vite plugin not detected. (status code: ${status}.) Add plugin in vite.config.ts`));
+    }
+    else {
+        const hint = makeHint(!ggLogTest.enabled, ' (Try `DEBUG=gg:* npm dev`)');
+        dotenv.config(); // Load the environment variables
+        message(`${checkbox(ggLogTest.enabled)} DEBUG env variable: ${process?.env?.DEBUG}${hint}`);
+    }
+    console.log(ggMessage);
+}
+export function gg(...args) {
+    if (!ggConfig.enabled) {
+        return args.length ? args[0] : { url: '', stack: [] };
+    }
+    // Ignore first stack frame, which is always the call to gg() itself.
+    const stack = ErrorStackParser.parse(new Error()).splice(1);
+    // Example: http://localhost:5173/src/routes/+page.svelte
+    const filename = stack[0].fileName?.replace(timestampRegex, '') || '';
+    // Example: src/routes/+page.svelte
+    const filenameToOpen = filename.replace(srcRootRegex, '$<folderName>/');
+    // Example: routes/+page.svelte
+    const filenameToDisplay = filename.replace(srcRootRegex, '');
+    const { functionName } = stack[0];
+    //console.log({ filename, fileNameToOpen: filenameToOpen, fileNameToDisplay: filenameToDisplay });
+    // A callpoint is uniquely identified by the filename plus function name
+    const callpoint = `${filenameToDisplay}${functionName ? `@${functionName}` : ''}`;
+    const ggLogFunction = callpointToLogFunction.get(callpoint) ||
+        callpointToLogFunction.set(callpoint, ggLog.extend(callpoint)).get(callpoint);
+    if (!args.length) {
+        const url = openInEditorUrl(filenameToOpen);
+        ggLogFunction(`    📝📝📝 ${url} 👀👀👀`);
+        return {
+            fileName: filenameToDisplay,
+            functionName,
+            url,
+            stack
+        };
+    }
+    ggLogFunction(...args);
+    return args[0];
+}
+gg.disable = debugFactory.disable;
+gg.enable = debugFactory.enable;

package/dist/index.d.ts

@@ -1 +1,3 @@
-export {};
+import { gg } from './gg.js';
+import openInEditorPlugin from './open-in-editor.js';
+export { gg, openInEditorPlugin };

package/dist/index.js

@@ -1,2 +1,4 @@
-"use strict";
 // Reexport your entry components here
+import { gg } from './gg.js';
+import openInEditorPlugin from './open-in-editor.js';
+export { gg, openInEditorPlugin };

package/dist/open-in-editor.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export default function openInEditorPlugin(specifiedEditor?: undefined, srcRoot?: string | undefined, onErrorCallback?: ((fileName: string, errorMessage: string | null) => void) | undefined): Plugin;

package/dist/open-in-editor.js

@@ -0,0 +1,32 @@
+// Based on: https://github.com/yyx990803/launch-editor/blob/master/packages/launch-editor-middleware/index.js
+import * as url from 'url';
+import * as path from 'path';
+import launch from 'launch-editor';
+export default function openInEditorPlugin(specifiedEditor, srcRoot, onErrorCallback) {
+    if (typeof specifiedEditor === 'function') {
+        onErrorCallback = specifiedEditor;
+        specifiedEditor = undefined;
+    }
+    if (typeof srcRoot === 'function') {
+        onErrorCallback = srcRoot;
+        srcRoot = undefined;
+    }
+    srcRoot = srcRoot || process.cwd();
+    return {
+        name: 'open-in-editor',
+        configureServer(server) {
+            server.middlewares.use('/__open-in-editor', (req, res) => {
+                const { file } = url.parse(req.url || '', true).query || {};
+                if (!file) {
+                    res.statusCode = 500;
+                    res.end(`open-in-editor-plugin: required query param "file" is missing.`);
+                }
+                else {
+                    res.statusCode = 222;
+                    launch(path.resolve(srcRoot, file), specifiedEditor, onErrorCallback);
+                    res.end('<p>You may safely close this window.</p><script>window.close()</script>');
+                }
+            });
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@leftium/gg",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Leftium/gg.git"
@@ -39,14 +39,23 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
+		"@picocss/pico": "^2.1.1",
 		"@sveltejs/adapter-vercel": "^5.5.2",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@types/debug": "^4.1.12",
+		"@types/node": "^22.13.17",
+		"add": "^2.0.6",
+		"debug": "^4.4.0",
+		"dotenv": "^16.4.7",
+		"error-stack-parser": "^2.1.4",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
+		"esm-env": "^1.2.2",
 		"globals": "^16.0.0",
+		"launch-editor": "^2.10.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"publint": "^0.3.2",
@@ -54,7 +63,8 @@
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
-		"vite": "^6.0.0"
+		"vite": "^6.0.0",
+		"vite-plugin-devtools-json": "^0.2.0"
 	},
 	"keywords": [
 		"svelte"