Publish to JSR instead of /x (#110)

Author: lucacasonato

.github/workflows/ci.yml

@@ -1,28 +1,47 @@
 name: ci
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - "*"
+  pull_request:
+    branches:
+      - main
 
 jobs:
   test:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
     steps:
-      - uses: actions/checkout@master
-      - uses: denoland/setup-deno@main
-        with:
-          deno-version: "1.x"
+      - uses: actions/checkout@v4
+
+      - uses: denoland/setup-deno@v1
+
       - name: Run fmt
         run: |
           deno fmt --check
+
       - name: Run lint
         run: |
           deno lint
+
       - name: Check project
         run: |
           deno task check:types
+
       - name: Install Chromium
         run: deno run -A --unstable https://deno.land/x/[email protected]/install.ts
         env:
           PUPPETEER_PRODUCT: chrome
+
       - name: Run tests
         run: |
           deno task test
+
+      - name: Publish package (tag only)
+        if: startsWith(github.ref, 'refs/tags/')
+        run: deno publish

.gitignore

@@ -1 +1,2 @@
 cov_profile
+deno.lock

README.md

@@ -6,7 +6,7 @@ CSS, syntax highlighting, and HTML sanitization.
 ## Usage
 
 ```js
-import { CSS, render } from "https://deno.land/x/gfm/mod.ts";
+import { CSS, render } from "jsr:@deno/gfm@0.6";
 
 const markdown = `
 # Hello, world!
@@ -83,12 +83,12 @@ By default syntax highlighting for JavaScript, Markdown, and HTML is included.
 You can include more languages importing them:
 
 ```js
-import { CSS, render } from "https://deno.land/x/gfm/mod.ts";
+import { CSS, render } from "jsr:@deno/gfm@0.6";
 
 // Add support for TypeScript, Bash, and Rust.
-import "https://esm.sh/[email protected]/components/prism-typescript?no-check";
-import "https://esm.sh/[email protected]/components/prism-bash?no-check";
-import "https://esm.sh/[email protected]/components/prism-rust?no-check";
+import "npm:[email protected]/components/prism-typescript.js";
+import "npm:[email protected]/components/prism-bash.js";
+import "npm:[email protected]/components/prism-rust.js";
 ```
 
 A full list of supported languages is available here:
@@ -100,7 +100,7 @@ By default, all rendering is in blocks. There are cases where one would like to
 render some inline markdown, and this is achievable using the `inline` setting:
 
 ```ts
-import { render } from "https://deno.land/x/gfm/mod.ts";
+import { render } from "jsr:@deno/gfm@0.6";
 
 const markdown = "My [Deno](https://deno.land) Blog";
 const header = render(markdown, { inline: true });
@@ -113,7 +113,7 @@ By default math rendering is disabled. To enable it, you must include the
 additional CSS and enable the `allowMath` setting:
 
 ```ts
-import { CSS, KATEX_CSS, render } from "https://deno.land/x/gfm/mod.ts";
+import { CSS, KATEX_CSS, render } from "jsr:@deno/gfm@0.6";
 
 const markdown = `
 Block math:

deno.json

@@ -1,4 +1,23 @@
 {
+  "name": "@deno/gfm",
+  "version": "0.6.2",
+  "exports": "./mod.ts",
+  "imports": {
+    "emoji": "jsr:@denosaurs/[email protected]",
+    "marked": "npm:marked@^11.1",
+    "github-slugger": "npm:github-slugger@^2.0",
+    "marked-alert": "npm:marked-alert@^2.0",
+    "marked-footnote": "npm:marked-footnote@^1.2",
+    "marked-gfm-heading-id": "npm:marked-gfm-heading-id@^3.1",
+    "prismjs": "npm:prismjs@^1.29",
+    "sanitize-html": "npm:sanitize-html@^2.11",
+    "he": "npm:he@^1.2",
+    "katex": "npm:katex@^0.16",
+    "@std/assert": "jsr:@std/assert@^0.214"
+  },
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "dom.asynciterable", "deno.ns"]
+  },
   "tasks": {
     "build": "deno run --allow-read --allow-write --allow-net --allow-run --allow-env ./style/patch.ts && deno fmt",
     "check:types": "deno check **/*.ts",
@@ -11,6 +30,5 @@
   },
   "fmt": {
     "exclude": ["./test/fixtures/alerts.md", "./test/fixtures/lineBreaks.md"]
-  },
-  "lock": false
+  }
 }

deps.ts

@@ -1,16 +1,15 @@
-import {
-  emojify,
-  gfmHeadingId,
-  GitHubSlugger,
-  htmlEscape,
-  katex,
-  Marked,
-  markedAlert,
-  markedFootnote,
-  Prism,
-  sanitizeHtml,
-} from "./deps.ts";
-import { CSS, KATEX_CLASSES, KATEX_CSS } from "./style.js";
+import { emojify } from "emoji";
+import * as Marked from "marked";
+import GitHubSlugger from "github-slugger";
+import markedAlert from "marked-alert";
+import markedFootnote from "marked-footnote";
+import { gfmHeadingId } from "marked-gfm-heading-id";
+import Prism from "prismjs";
+import sanitizeHtml from "sanitize-html";
+import he from "he";
+import katex from "katex";
+
+import { CSS, KATEX_CLASSES, KATEX_CSS } from "./style.ts";
 export { CSS, KATEX_CSS, Marked };
 
 Marked.marked.use(markedAlert());
@@ -48,11 +47,11 @@ export class Renderer extends Marked.Renderer {
     return `<h${level} id="${slug}"><a class="anchor" aria-hidden="true" tabindex="-1" href="#${slug}"><svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>${text}</h${level}>\n`;
   }
 
-  image(src: string, title: string | null, alt: string) {
+  image(src: string, title: string | null, alt: string): string {
     return `<img src="${src}" alt="${alt}" title="${title ?? ""}" />`;
   }
 
-  code(code: string, language?: string) {
+  code(code: string, language?: string): string {
     // a language of `ts, ignore` should really be `ts`
     // and it should be lowercase to ensure it has parity with regular github markdown
     language = language?.split(",")?.[0].toLocaleLowerCase();
@@ -67,13 +66,13 @@ export class Renderer extends Marked.Renderer {
         ? Prism.languages[language]
         : undefined;
     if (grammar === undefined) {
-      return `<pre><code class="notranslate">${htmlEscape(code)}</code></pre>`;
+      return `<pre><code class="notranslate">${he.encode(code)}</code></pre>`;
     }
     const html = Prism.highlight(code, grammar, language!);
     return `<div class="highlight highlight-source-${language} notranslate"><pre>${html}</pre></div>`;
   }
 
-  link(href: string, title: string | null, text: string) {
+  link(href: string, title: string | null, text: string): string {
     const titleAttr = title ? ` title="${title}"` : "";
     if (href.startsWith("#")) {
       return `<a href="${href}"${titleAttr}>${text}</a>`;

mod.ts

@@ -80,16 +80,13 @@ for (const selector of KATEX_CSS_SELECTORS) {
 // de-duplicate classes
 classes = [...new Set(classes)];
 
-$.logStep("Writing the final style.js");
-const CSS = await cwd.join("dist/main.css").readTextSync();
+$.logStep("Writing the final style.ts");
+const CSS = cwd.join("dist/main.css").readTextSync();
 
-await cwd.join("../style.js").writeText(
-  `/** @type {string} */
-export const CSS = \`${CSS}\`;
+await cwd.join("../style.ts").writeText(`
+export const CSS: string = \`${CSS}\`;
 
-/** @type {string} */
-export const KATEX_CSS = \`${KATEX_CSS}\`;
+export const KATEX_CSS: string = \`${KATEX_CSS}\`;
 
-export const KATEX_CLASSES = ${JSON.stringify(classes)};
-`,
-);
+export const KATEX_CLASSES: string[] = ${JSON.stringify(classes)};
+`);

style.js style.ts

@@ -1,4 +1,4 @@
-import { assert, assertEquals } from "./test_deps.ts";
+import { assert, assertEquals } from "@std/assert";
 import { browserTest } from "./test_utils.ts";
 
 Deno.test("basic md table with dollar signs", async () => {

style/patch.ts

@@ -1,4 +1,5 @@
-import { assertEquals, assertStringIncludes, DOMParser } from "./test_deps.ts";
+import { assertEquals, assertStringIncludes } from "@std/assert";
+import { DOMParser } from "https://deno.land/x/[email protected]/deno-dom-wasm.ts";
 import { render, Renderer } from "../mod.ts";
 
 Deno.test("Basic markdown", async () => {
@@ -242,7 +243,7 @@ Deno.test(
 
 Deno.test("image title and no alt", () => {
   const markdown = `![](image.jpg "best title")`;
-  const expected = `<p><img src="image.jpg" title="best title" /></p>\n`;
+  const expected = `<p><img src="image.jpg" alt="" title="best title" /></p>\n`;
 
   const html = render(markdown);
   assertEquals(html, expected);

test/server_test.ts

@@ -1,4 +1,7 @@
-import { Page, puppeteer } from "./test_deps.ts";
+import {
+  default as puppeteer,
+  Page,
+} from "https://deno.land/x/[email protected]/mod.ts";
 import { CSS, render, RenderOptions } from "../mod.ts";
 
 type TestCase = {