Support npm links

bluwy · Nov 18, 2024 · 5c5d660 · 5c5d660
1 parent 4386771
commit 5c5d660
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/site/index.html b/site/index.html
@@ -23,7 +23,7 @@
         <section class="md:w-1/2 mb-2">
           <h2>What is publint</h2>
           <p>
-            <code>publint</code> lints npm packages to ensure widest
+            <code>publint</code> lints npm packages to ensure the widest
             compatibility across environments, such as Vite, Webpack, Rollup,
             Node.js, etc.
           </p>
@@ -35,10 +35,15 @@ <h2>What is publint</h2>
         <section class="md:w-1/2 mb-2">
           <h2>How it works</h2>
           <p>
-            When linting an npm package, the site downloads the tarball from the
-            npm registry, and runs <code>publint</code> against it in a web
-            worker. For larger packages, it may take a while to download and
-            lint.
+            Given an npm package, the site downloads the tarball from the npm
+            registry, and runs <code>publint</code> against it in a web worker.
+            For larger packages, it may take a while to download and lint.
+          </p>
+          <p>
+            You can also directly paste
+            <a href="https://www.npmjs.com">www.npmjs.com</a> or
+            <a href="https://pkg.pr.new">pkg.pr.new</a>
+            links in the search input to easily lint them!
           </p>
         </section>
       </div>
@@ -74,6 +79,14 @@ <h2>Other resources</h2>
                 Modern Guide to Packaging JS Library
               </a>
             </li>
+            <li>
+              <a
+                class="anchor-link"
+                href="https://hirok.io/posts/package-json-exports"
+              >
+                Guide to the package.json exports field
+              </a>
+            </li>
           </ul>
         </section>
       </div>

diff --git a/site/src/components/NpmSearchInput.svelte b/site/src/components/NpmSearchInput.svelte
@@ -1,6 +1,6 @@
 <script>
   import { debounce } from '../utils/common'
-  import { isPkgPrNewUrl } from '../utils/registry'
+  import { isNpmUrl, isPkgPrNewUrl } from '../utils/registry'
   import { url } from '../utils/url'
 
   /**
@@ -117,15 +117,27 @@
   function handleSubmit(e) {
     e.preventDefault()
     if (!npmPkgName) return
-    const npmPkgVersion = options.find((o) => o.value === npmPkgName)?.version
-    if (npmPkgVersion) {
-      url.push(`/${npmPkgName}@${npmPkgVersion}`)
-    } else if (isPkgPrNewUrl(npmPkgName)) {
+
+    // Support raw npm links
+    if (isNpmUrl(npmPkgName)) {
+      const link = new URL(npmPkgName)
+      url.push(link.pathname.slice('/package'.length))
+    }
+    // Support pkg.pr.new links
+    else if (isPkgPrNewUrl(npmPkgName)) {
       const link = new URL(npmPkgName)
       url.push(`/pkg.pr.new${link.pathname}`)
-    } else {
-      url.push(`/${npmPkgName}`)
     }
+    // Fallback navigate
+    else {
+      const npmPkgVersion = options.find((o) => o.value === npmPkgName)?.version
+      if (npmPkgVersion) {
+        url.push(`/${npmPkgName}@${npmPkgVersion}`)
+      } else {
+        url.push(`/${npmPkgName}`)
+      }
+    }
+
     document.body.focus()
     getSelection()?.removeAllRanges()
     // Clear options so it looks natural that an action has taken place

diff --git a/site/src/utils/registry.js b/site/src/utils/registry.js
@@ -1,3 +1,20 @@
+/**
+ * @param {string} link
+ */
+export function isNpmUrl(link) {
+  try {
+    const url = new URL(link)
+    return (
+      url.hostname === 'www.npmjs.com' && url.pathname.startsWith('/package/')
+    )
+  } catch {
+    return false
+  }
+}
+
+/**
+ * @param {string} link
+ */
 export function isPkgPrNewUrl(link) {
   try {
     const url = new URL(link)