add version selector (#49)

* add version selector * dynamix import not supported in Deno deploy...so denoland/deploy_feedback#1
jspm · May 4, 2022 · 776ae43 · 776ae43
1 parent 433bf3c
commit 776ae43
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 25 deletions.
diff --git a/images/icon-arrow-down.png b/images/icon-arrow-down.png
diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@jspm/packages",
   "devDependencies": {
-    "@jspm/generator": "^1.0.0-beta.30",
+    "@jspm/generator": "^1.0.0-beta.31",
     "@jspm/plugin-rollup": "github:jspm/rollup-plugin-jspm",
     "@swc/cli": "^0.1.57",
-    "@swc/core": "^1.2.161",
+    "@swc/core": "^1.2.177",
     "mkdirp": "^1.0.4",
-    "rollup": "^2.70.1"
+    "rollup": "^2.71.1"
   },
   "exports": {
     ".": {

diff --git a/src/aside.jsx b/src/aside.jsx
@@ -72,12 +72,14 @@ function Aside(
         <h3>Collaborators</h3>
         <jspm-maintainers>
           {maintainers.map(({ name, email }) => (
-            <jspm-maintainer>
-              <figure>
-                <img src={`https://unavatar.io/${email}`} />
-              </figure>
-              {name}
-            </jspm-maintainer>
+            <a href={`https://www.github.com/${name}`}>
+              <jspm-maintainer>
+                <figure>
+                  <img src={`https://unavatar.io/${email}`} />
+                </figure>
+                {name}
+              </jspm-maintainer>
+            </a>
           ))}
         </jspm-maintainers>
       </aside>
@@ -103,10 +105,10 @@ function Aside(
           jspm-maintainers {
             display: flex;
             flex-wrap: wrap;
+            gap: 1rem;
           }
           jspm-maintainer {
             text-align: center;
-            margin: 5px;
           }
           jspm-maintainer figure{
             width: 80px;
@@ -117,8 +119,11 @@ function Aside(
             width: 100%;
             display: block;
           }
+          jspm-link{
+            display: flex;
+          }
           jspm-link h5{
-            margin-bottom: 0;
+            margin: 0 15px 0 0;
           }
 
           @media(min-width: 810px) {

diff --git a/src/dom-main.jsx b/src/dom-main.jsx
@@ -5,14 +5,16 @@ async function hydrateRoot() {
   const mountElement = document.querySelector("jspm-package-root");
 
   if (mountElement) {
-    const { created, downloads, exports, features, license, links, maintainers, name, readme, types, updated, version } =
+    const { created, description, downloads, exports, features, license, links, maintainers, name, readme, types, updated, version, versions } =
       mountElement.dataset;
     const parsedExports = exports ? JSON.parse(exports) : [];
+    const parsedVersions = versions ? JSON.parse(versions) : [];
     const { DomRoot } = await import("@jspm/packages/dom-root");
 
     hydrate(
       <DomRoot
         created={created}
+        description={description}
         downloads={downloads}
         exports={parsedExports}
         features={JSON.parse(features)}
@@ -24,6 +26,7 @@ async function hydrateRoot() {
         types={types}
         updated={updated}
         version={version}
+        versions={parsedVersions}
       />,
       mountElement,
     );

diff --git a/src/dom-root.jsx b/src/dom-root.jsx
@@ -21,7 +21,8 @@ class DomRoot extends Component {
   selectedExports = {};
   selectedDeps = [];
   generatorHash = '';
-  openImportmapDialog= false;
+  openImportmapDialog = false;
+  openVersionSelector = false;
 
   generateHash = async () => {
     if (typeof globalThis.document !== "undefined") {
@@ -60,6 +61,12 @@ class DomRoot extends Component {
     this.update();
   };
 
+  toggleVersionSelector = (event) => {
+    event.preventDefault();
+    this.openVersionSelector = !this.openVersionSelector;
+    this.update();
+  };
+
   didMount() {
     if (!this.generatorHash) {
       this.generateHash();
@@ -73,6 +80,7 @@ class DomRoot extends Component {
   render() {
     const {
       created,
+      description,
       downloads,
       exports,
       features,
@@ -84,11 +92,13 @@ class DomRoot extends Component {
       readme,
       updated,
       version,
+      versions
     } = this.props;
 
     return (
       <Package
         created={created}
+        description={description}
         downloads={downloads}
         exports={exports}
         features={features}
@@ -101,10 +111,13 @@ class DomRoot extends Component {
         types={types}
         updated={updated}
         version={version}
+        versions={versions}
         generatorHash={this.generatorHash}
         selectedDeps={this.selectedDeps}
         openImportmapDialog={this.openImportmapDialog}
         toggleImportmapDialog={this.toggleImportmapDialog}
+        openVersionSelector={this.openVersionSelector}
+        toggleVersionSelector={this.toggleVersionSelector}
       />
     );
   }

diff --git a/src/package.jsx b/src/package.jsx
@@ -13,6 +13,7 @@ function Package({
   description,
   keywords,
   version,
+  versions,
   homepage,
   license,
   files,
@@ -31,6 +32,8 @@ function Package({
   toggleExportSelection,
   openImportmapDialog,
   toggleImportmapDialog,
+  openVersionSelector,
+  toggleVersionSelector,
 }) {
   return (
     <jspm-package data-meta={JSON.stringify(import.meta)}>
@@ -51,7 +54,19 @@ function Package({
         <jspm-highlight>
           <jspm-package-title>
             <h2>{name}</h2>
-            <h3>v{version}</h3>
+
+            <jspm-package-version>
+              <h3>
+                <button onClick={toggleVersionSelector}>v{version}</button>
+              </h3>
+                <ul data-open={openVersionSelector}>
+                  {versions?.map((v) => (
+                    <li data-active={v === version}>
+                      <a href={`/package/${name}@${v}`}>{v}</a>
+                    </li>
+                  ))}
+                </ul>
+            </jspm-package-version>
           </jspm-package-title>
           <jspm-summary>
             <span>{license}</span>
@@ -110,6 +125,8 @@ function Package({
       </jspm-content>
 
       <Helmet>
+        <title>JSPM &ndash; {name}@{version}</title>
+        <meta name="description" content={description} />
         <link
           rel="stylesheet"
           href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes@master/themes/prism-gruvbox-light.css"
@@ -164,7 +181,68 @@ function Package({
           align-items: center;
           gap: 15px;
         }
+        jspm-package-version h3{
+          margin: 0;
+        }
+        jspm-package-version ul{
+          margin: -3px 0 0 0;
+          position: absolute;
+          background: var(--dl-color-jspm-300);
+          z-index: 2;
+          list-style: none;
+          padding: 0;
+          text-align: left;
+          line-height: 2rem;
+          max-height: 50vh;
+          overflow: scroll;
+        }
+        jspm-package-version ul[data-open="false"]{
+          display: none;
+        }
+        jspm-package-version ul li a {
+          display: block;
+          padding: 0.25rem 1rem;
+          min-width: 124px;
+        }
+        jspm-package-version ul li a:hover {
+          background: var(--dl-color-jspm-400);
+        }
+        jspm-package-version ul li[data-active="false"]{
+          margin: 0;
+        }
+
+        /* <select> styles */
+        jspm-package-version button, jspm-package-title select {
+          /* Reset */
+          appearance: none;
+          border: 0;
+          outline: 0;
+          font: inherit;
+          /* Personalize */
+          height: 3em;
+          padding: 0 45px 0 1em;
+          background: var(--dl-color-jspm-300) url(icon-arrow-down.png)
+              no-repeat right 0.8em center / 1.4em;
+          border-radius: 0.25em;
+          cursor: pointer;
+          background-size: 7%;
+        }
+
+        /* <option> colors */
+        jspm-package-title select option {
+          color: inherit;
+          background-color: gray;
+        }
+        /* Remove focus outline */
+        jspm-package-title select:focus {
+          outline: none;
+        }
+        /* Remove IE arrow */
+        &::-ms-expand {
+          display: none;
+        }
         
+
         jspm-name h1 a {
           color: black;
         }
@@ -174,16 +252,6 @@ function Package({
           grid-template-columns: 1fr;
         }
 
-        @media(min-width: 810px) {
-          jspm-content {
-            display: grid;
-            grid-template-columns: 1fr 0.618fr;
-            grid-gap: 1rem;
-          }
-          jspm-readme {
-            width: 100%;
-          }
-        }
         jspm-package-exports {
           display: block;
           max-height: 500px;
@@ -221,6 +289,24 @@ function Package({
         jspm-package-exports ul li button[data-selected='false']{
           background: var(--dl-color-primary-js-primary);
         }
+
+
+        @media(min-width: 810px) {
+          jspm-content {
+            display: grid;
+            grid-template-columns: 1fr 0.618fr;
+            grid-gap: 1rem;
+          }
+          
+          jspm-readme {
+            width: 100%;
+          }
+          
+          jspm-package-exports h4{
+            text-align: left;
+          }
+          
+        }
         `}
         </style>
       </Helmet>

diff --git a/src/server-main.jsx b/src/server-main.jsx
@@ -3,6 +3,7 @@
 import nano, { h, renderSSR } from "nano-jsx";
 import dayjs from "dayjs";
 import dayjsPluginRelativeTime from "dayjs/plugin/relativeTime";
+import { Semver } from "sver";
 import { SsrRoot } from "@jspm/packages/ssr-root";
 import { Home } from "@jspm/packages/home";
 import {
@@ -184,6 +185,10 @@ const staticResources = {
     path: "./images/icon-external-link.png",
     contentType: "image/png",
   },
+  "/icon-arrow-down.png": {
+    path: "./images/icon-arrow-down.png",
+    contentType: "image/png",
+  },
   "/icon-importmap.png": {
     path: "./images/icon-importmap.png",
     contentType: "image/png",
@@ -341,7 +346,8 @@ async function requestHandler(request) {
         const packageMetaData = await fetch(
           `https://registry.npmjs.org/${name}`,
         );
-        const { maintainers, readme, time } = await packageMetaData.json();
+        const packageMetaDataJson = await packageMetaData.json();
+        const { maintainers, readme, time, versions } = packageMetaDataJson;
         const { created: createdISO, modified } = time;
         dayjs.extend(dayjsPluginRelativeTime);
         const updated = dayjs(time[version]).fromNow();
@@ -362,11 +368,14 @@ async function requestHandler(request) {
             issues: parseURL(bugs),
           };
 
+          const sortedVersions = Object.keys(versions).sort(Semver.compare)
+            .reverse();
           const app = renderSSR(
             <SsrRoot
               name={name}
               description={description}
               version={version}
+              versions={sortedVersions}
               homepage={homepage}
               license={license}
               files={files}

diff --git a/src/ssr-root.jsx b/src/ssr-root.jsx
@@ -4,6 +4,7 @@ import { Package } from "@jspm/packages/package";
 
 function SsrRoot({
   created,
+  description,
   downloads,
   exports,
   features,
@@ -15,10 +16,12 @@ function SsrRoot({
   types,
   updated,
   version,
+  versions
 }) {
   return (
     <jspm-package-root
       data-created={created}
+      data-description={description}
       data-downloads={downloads}
       data-exports={JSON.stringify(exports)}
       data-features={JSON.stringify(features)}
@@ -30,9 +33,11 @@ function SsrRoot({
       data-name={name}
       data-types={types}
       data-version={version}
+      data-versions={JSON.stringify(versions)}
     >
       <Package
         created={created}
+        description={description}
         downloads={downloads}
         exports={exports}
         features={features}
@@ -44,6 +49,7 @@ function SsrRoot({
         types={types}
         updated={updated}
         version={version}
+        versions={versions}
       />
     </jspm-package-root>
   );