npm - application-typescript - Versions diffs - 1.0.0 - Mend

application-typescript 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md +213 -0
package/application-typescript.js +259 -0
package/package.json +58 -0

package/README.md ADDED Viewed

@@ -0,0 +1,213 @@
+# `application-typescript`
+Run TypeScript in the browser without a bundler — add one `<script>` tag and serve static files.
+---
+## Quick Start
+**`index.html`**
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Hello</title>
+  </head>
+  <body>
+    <!-- app container -->
+    <div id="app"></div>
+    <!-- preact + htm application -->
+    <script type="application/typescript" src="./hello.ts"></script>
+    <!-- esm.sh application-typescript runner -->
+    <script type="module" src="https://esm.sh/application-typescript"></script>
+  </body>
+</html>
+```
+**`hello.ts`**
+```typescript
+import { html, render } from "htm/preact/standalone";
+import { HelloApp } from "./hello.app";
+const root = document.getElementById("app");
+if (root) render(html`<${HelloApp} />`, root);
+```
+**`hello.app.ts`**
+```typescript
+import { html } from "htm/preact/standalone";
+export function HelloApp() {
+  return html`<h1>Hello World</h1>`;
+}
+```
+Serve over HTTP (not `file://`), then open the page:
+```bash
+npx -y serve . -l 5123 --no-port-switching   # → http://localhost:5123/
+```
+That's it. No build step, no config file.
+---
+## When to use
+Good fit:
+- Small UI prototypes with 10–15 components
+- Static pages where you want real TypeScript without wiring a bundler
+- Exploring an idea quickly before committing to Vite / esbuild
+Not a good fit:
+- Production apps (CDN dependency, no tree-shaking, no SSR)
+- Large codebases (compile-on-demand cost adds up)
+- Environments that block CDN traffic (esm.sh required for the compiler)
+When you outgrow this, move the same `.ts` sources into Vite or esbuild — the module structure carries over.
+---
+## Multi-file projects
+Use relative imports between `.ts` files. The runner transpiles each file and rewrites `./` / `../` specifiers to blob URLs, so the full module graph loads correctly.
+**`hello.ts`** (entry)
+```typescript
+import { html, render } from "htm/preact/standalone";
+import { HelloApp } from "./hello.app";
+const root = document.getElementById("app");
+if (root) render(html`<${HelloApp} />`, root);
+```
+**`hello.app.ts`** (component)
+```typescript
+import { html } from "htm/preact/standalone";
+export function HelloApp() {
+  return html`<h1>Hello World</h1>`;
+}
+```
+Keep imports acyclic.
+---
+## Setup reference
+### Entry marker
+```html
+<script type="application/typescript" src="./src/app.ts"></script>
+```
+- `src` is required. Scripts without `src` are ignored.
+- `src` is resolved with `new URL(src, location.href)`. Use `./src/app.ts` under a subpath, `/src/app.ts` at the origin root.
+- Multiple markers are processed in document order, one after another.
+### Runner
+```html
+<script type="module" src="https://esm.sh/application-typescript"></script>
+```
+Must come **after** all `application/typescript` markers so the DOM query sees them.
+### Import map (optional)
+You can skip the import map entirely — bare specifiers like `"htm/preact/standalone"` fall back to `https://esm.sh/<specifier>` automatically.
+Add an import map when you need to pin versions or use non-esm.sh URLs:
+```html
+<script type="importmap">
+{
+  "imports": {
+    "preact": "https://esm.sh/preact@10.24.3",
+    "htm/preact/standalone": "https://esm.sh/htm@3.1.1/preact/standalone"
+  }
+}
+</script>
+```
+The runner merges all import maps on the page (later maps override keys). `scopes` are ignored.
+### Serving
+Use a static HTTP server. `file://` breaks `import`, `fetch`, and CORS.
+```bash
+npx -y serve . -l 5123 --no-port-switching
+```
+### Smoke test (bare imports)
+This repo includes `test.html`, `test.ts`, and `test.app.ts`. `test.app.ts` imports `lodash/shuffle` so you can confirm bare specifiers resolve through esm.sh in the browser.
+```bash
+npm test
+```
+That runs `npx -y serve .` (default port, usually 3000, with automatic fallback). Open `/test.html` and check the page text and console.
+---
+## How it works
+For each `<script type="application/typescript" src="…">`, the runner:
+1. Resolves `src` against `location.href`
+2. Fetches the source (`cache: "no-cache"`)
+3. Transpiles with `typescript.transpileModule` (target ES2022, module ESNext, no type-checking)
+4. Rewrites relative imports (`./`, `../`) to blob URLs of the transpiled dependency files (recursive, cached)
+5. Rewrites bare imports to absolute URLs: import map match first, otherwise `https://esm.sh/<specifier>`
+6. Creates a `Blob`, calls `URL.createObjectURL`, and `import()`s the result as a real ES module
+Each source URL is cached to one blob URL. Parallel loads of the same module share one in-flight promise.
+The TypeScript compiler itself is loaded from `https://esm.sh/typescript@6.0.3` on first run.
+---
+## Limitations
+- **Type-checking** — none at runtime; use `tsc --noEmit` / your IDE
+- **Inline `<script>` bodies** — not supported; `src` attribute is required
+- **Dynamic `import()` with non-literal specifier** — not rewritten
+- **Import map `scopes`** — ignored
+- **Compiler version** — pinned to `typescript@6.0.3` in the runner source
+- **CDN dependency** — requires network access to esm.sh on first load
+---
+## Security
+Treat every fetched `.ts` URL as executable code. Only point `src` at same-origin files or hosts you fully trust. The runner does not sandbox transpiled output.
+---
+## Contributing
+When changing the runner (selectors, transpiler options, CDN URLs, logging), update this README in the same commit.
+### Release
+```bash
+npm version patch   # or minor / major
+npm publish --access public
+```
+The unversioned `https://esm.sh/application-typescript` URL always resolves to the latest published release.

package/application-typescript.js ADDED Viewed

@@ -0,0 +1,259 @@
+/**
+ * In-browser TypeScript runner: finds every
+ *   <script type="application/typescript" src="./path.ts"></script>
+ * (`src` is required — inline body without `src` is ignored). Fetches each URL,
+ * transpiles with the `typescript` package from esm.sh, then `import()` a blob URL
+ * so the result is a real ES module (top-level `import` works; no eval).
+ *
+ * Relative imports like `import { x } from "./foo"` work: each file is transpiled
+ * separately and specifiers are rewritten to blob URLs (import base is otherwise
+ * the blob, so `./foo` would not resolve). Circular relative imports can deadlock.
+ *
+ * Bare specifiers (`import from "lodash"`) are rewritten to absolute URLs: first
+ * match against merged top-level `imports` from every `<script type="importmap">`,
+ * otherwise `https://esm.sh/<specifier>`. (Blob modules often ignore import maps;
+ * rewriting makes bare imports reliable.) Scoped packages and subpaths work on
+ * esm.sh, e.g. `lodash/debounce`.
+ */
+import ts from "https://esm.sh/typescript@6.0.3";
+(async function () {
+    const SELECTOR = 'script[type="application/typescript"][src]';
+    /** @type {Record<string, string> | null} */
+    let cachedImportsMap = null;
+    /** @type {Map<string, string>} */
+    const blobUrlByTsUrl = new Map();
+    /** @type {Map<string, Promise<string>>} */
+    const inflightBlobUrl = new Map();
+    function showError(msg, cause) {
+        if (cause !== undefined) {
+            console.error("[application-typescript]", msg, cause);
+        } else {
+            console.error("[application-typescript]", msg);
+        }
+    }
+    function getTs() {
+        return ts?.default ?? ts;
+    }
+    async function transpileModuleSource(fileName, sourceText) {
+        const t = getTs();
+        const { outputText } = t.transpileModule(sourceText, {
+            compilerOptions: {
+                target: t.ScriptTarget.ES2022,
+                module: t.ModuleKind.ESNext,
+                lib: ["ES2022", "DOM", "DOM.Iterable"],
+                skipLibCheck: true,
+                isolatedModules: true,
+            },
+            fileName,
+        });
+        return outputText;
+    }
+    /**
+     * Resolve a relative module specifier to an absolute .ts URL (same-origin fetch).
+     * @param {string} containingTsUrl absolute URL of the current module
+     * @param {string} specifier e.g. ./ok ./ok.js ../lib/x
+     */
+    function resolveTsDependencyUrl(containingTsUrl, specifier) {
+        const baseDir = new URL(".", containingTsUrl);
+        let spec = specifier;
+        if (spec.endsWith(".js")) spec = spec.slice(0, -3);
+        if (spec.endsWith(".jsx")) spec = spec.slice(0, -4);
+        const u = new URL(spec, baseDir);
+        if (!/(?:\.[cm]?ts|\.tsx)$/.test(u.pathname)) {
+            u.pathname = u.pathname.endsWith("/") ? `${u.pathname}index.ts` : `${u.pathname}.ts`;
+        }
+        return u.href;
+    }
+    /**
+     * Collect relative specifiers as they appear in emitted JS (./ ../ only).
+     * @param {string} js
+     */
+    function collectRelativeSpecifiersInJs(js) {
+        const specs = new Set();
+        const fromRe = /\bfrom\s*["'](\.\.?\/[^"']+)["']/g;
+        const dynRe = /\bimport\s*\(\s*["'](\.\.?\/[^"']+)["']\s*\)/g;
+        for (const re of [fromRe, dynRe]) {
+            for (const m of js.matchAll(re)) {
+                specs.add(m[1]);
+            }
+        }
+        return [...specs];
+    }
+    /**
+     * Merge `imports` from all import map scripts (later maps override keys).
+     * Only top-level `imports` is used (not `scopes`).
+     */
+    function mergeDocumentImportMaps() {
+        /** @type {Record<string, string>} */
+        const out = {};
+        for (const el of document.querySelectorAll('script[type="importmap"]')) {
+            try {
+                const j = JSON.parse(el.textContent || "{}");
+                if (j.imports && typeof j.imports === "object") {
+                    Object.assign(out, j.imports);
+                }
+            } catch (e) {
+                console.warn("[application-typescript] skipped invalid importmap", e);
+            }
+        }
+        return out;
+    }
+    function getImportsMap() {
+        if (!cachedImportsMap) cachedImportsMap = mergeDocumentImportMaps();
+        return cachedImportsMap;
+    }
+    /**
+     * @param {string} spec
+     */
+    function isBareModuleSpecifier(spec) {
+        if (!spec || typeof spec !== "string") return false;
+        if (spec.startsWith(".") || spec.startsWith("/")) return false;
+        if (/^(https?:|data:|blob:)/i.test(spec)) return false;
+        return true;
+    }
+    /**
+     * Collect bare specifiers in emitted JS (not ./ ../ not URLs).
+     * @param {string} js
+     */
+    function collectBareSpecifiersInJs(js) {
+        const specs = new Set();
+        const fromRe = /\bfrom\s*["']([^"']+)["']/g;
+        const dynRe = /\bimport\s*\(\s*["']([^"']+)["']\s*\)/g;
+        for (const m of js.matchAll(fromRe)) {
+            if (isBareModuleSpecifier(m[1])) specs.add(m[1]);
+        }
+        for (const m of js.matchAll(dynRe)) {
+            if (isBareModuleSpecifier(m[1])) specs.add(m[1]);
+        }
+        return [...specs];
+    }
+    /**
+     * @param {string} spec bare specifier, e.g. lodash or @scope/pkg
+     * @param {Record<string, string>} importsMap
+     */
+    function resolveBareModuleSpecifier(spec, importsMap) {
+        const mapped = importsMap[spec];
+        if (mapped) {
+            try {
+                return new URL(mapped, location.href).href;
+            } catch {
+                return mapped;
+            }
+        }
+        return `https://esm.sh/${spec}`;
+    }
+    /**
+     * @param {string} js
+     * @param {string} fromSpec specifier as in source/emitted string
+     * @param {string} toBlobUrl
+     */
+    function rewriteSpecifier(js, fromSpec, toBlobUrl) {
+        const esc = fromSpec.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const to = JSON.stringify(toBlobUrl);
+        let out = js.replace(
+            new RegExp(`(\\bfrom\\s*)["']${esc}["']`, "g"),
+            `$1${to}`,
+        );
+        out = out.replace(
+            new RegExp(`(\\bimport\\s*\\(\\s*)["']${esc}["']`, "g"),
+            `$1${to}`,
+        );
+        return out;
+    }
+    /**
+     * Transpile a TypeScript module and its relative dependency tree; return a blob URL.
+     * @param {string} resolvedTsUrl
+     */
+    async function getBlobUrlForTsModule(resolvedTsUrl) {
+        const cached = blobUrlByTsUrl.get(resolvedTsUrl);
+        if (cached) return cached;
+        const pending = inflightBlobUrl.get(resolvedTsUrl);
+        if (pending) return pending;
+        const p = (async () => {
+            const res = await fetch(resolvedTsUrl, { cache: "no-cache" });
+            if (!res.ok) {
+                throw new Error(`${resolvedTsUrl}: HTTP ${res.status}`);
+            }
+            const source = await res.text();
+            let js = await transpileModuleSource(resolvedTsUrl, source);
+            const relSpecs = collectRelativeSpecifiersInJs(js).sort(
+                (a, b) => b.length - a.length,
+            );
+            for (const spec of relSpecs) {
+                const depTsUrl = resolveTsDependencyUrl(resolvedTsUrl, spec);
+                const depBlob = await getBlobUrlForTsModule(depTsUrl);
+                js = rewriteSpecifier(js, spec, depBlob);
+            }
+            const importsMap = getImportsMap();
+            const bareSpecs = collectBareSpecifiersInJs(js).sort(
+                (a, b) => b.length - a.length,
+            );
+            for (const spec of bareSpecs) {
+                const url = resolveBareModuleSpecifier(spec, importsMap);
+                js = rewriteSpecifier(js, spec, url);
+            }
+            const label = resolvedTsUrl.replace(/\n/g, " ");
+            const blob = new Blob([`${js}\n//# sourceURL=${label}\n`], {
+                type: "text/javascript",
+            });
+            const blobUrl = URL.createObjectURL(blob);
+            blobUrlByTsUrl.set(resolvedTsUrl, blobUrl);
+            return blobUrl;
+        })();
+        inflightBlobUrl.set(resolvedTsUrl, p);
+        try {
+            return await p;
+        } finally {
+            inflightBlobUrl.delete(resolvedTsUrl);
+        }
+    }
+    async function runOneScript(el) {
+        const src = el.getAttribute("src");
+        if (!src) return;
+        const resolved = new URL(src, location.href).href;
+        const entryBlobUrl = await getBlobUrlForTsModule(resolved);
+        await import(entryBlobUrl);
+    }
+    const scripts = [...document.querySelectorAll(SELECTOR)];
+    if (scripts.length === 0) {
+        showError(
+            `No matching scripts. Add e.g. <script type="application/typescript" src="/src/app.ts"></script> before the <script type="module"> that loads this runner (from esm.sh or your host).`,
+        );
+    } else {
+        for (const el of scripts) {
+            try {
+                await runOneScript(el);
+            } catch (e) {
+                showError(
+                    `TypeScript runner: ${e instanceof Error ? e.message : String(e)}`,
+                    e,
+                );
+                break;
+            }
+        }
+    }
+})().catch(console.error);

package/package.json ADDED Viewed

@@ -0,0 +1,58 @@
+{
+  "name": "application-typescript",
+  "version": "1.0.0",
+  "description": "Browser loader: run TypeScript from script[type=application/typescript][src] without a bundler",
+  "type": "module",
+  "main": "./application-typescript.js",
+  "module": "./application-typescript.js",
+  "exports": {
+    ".": {
+      "browser": "./application-typescript.js",
+      "default": "./application-typescript.js"
+    }
+  },
+  "sideEffects": true,
+  "engines": {
+    "browser": "*"
+  },
+  "files": [
+    "application-typescript.js",
+    "README.md"
+  ],
+  "keywords": [
+    "typescript",
+    "browser",
+    "esm",
+    "loader",
+    "transpile",
+    "no-bundler",
+    "prototype",
+    "cdn",
+    "esm.sh",
+    "runtime",
+    "browser-only",
+    "transpiler",
+    "blob-url",
+    "import-map"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/slavahatnuke/application-typescript.git"
+  },
+  "bugs": {
+    "url": "https://github.com/slavahatnuke/application-typescript/issues"
+  },
+  "homepage": "https://github.com/slavahatnuke/application-typescript#readme",
+  "scripts": {
+    "serve": "npx -y serve . -l 5123 --no-port-switching",
+    "typecheck": "tsc --noEmit",
+    "test": "npx -y serve ."
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.16",
+    "htm": "3.1.1",
+    "preact": "10.24.3",
+    "typescript": "5.7"
+  }
+}