Extract unpkg and packument base URLs to constants.js

components/Editor.js

@@ -1,4 +1,5 @@
 import { react, html, css } from '../utils/rplus.js';
+import { UNPKG } from '../utils/constants.js';
 import Highlight, { Prism } from 'prism-react-renderer';
 import { useStateValue } from '../utils/globalState.js';
 import Link from './Link.js';
@@ -62,8 +63,6 @@ const languages = {
   yml: 'yaml',
 };
 
-const UNPKG = 'https://unpkg.com/';
-
 export default () => {
   const [{ cache, request }] = useStateValue();
   const selectedLine = getSelectedLineNumberFromUrl();
@@ -126,7 +125,7 @@ export default () => {
                   return dep && typeof dep === 'string'
                     ? html`
                         <${Link}
-                          href=${`/?${dep.replace('https://unpkg.com/', '')}`}
+                          href=${`/?${dep.replace(UNPKG, '')}`}
                           className=${styles.link}
                         >
                           <span ...${getTokenProps({ token })} />

components/FileOverview.js

@@ -2,6 +2,7 @@ import { css, html } from '../utils/rplus.js';
 import Link from './Link.js';
 import formatBytes from '../utils/formatBytes.js';
 import { useStateValue } from '../utils/globalState.js';
+import { UNPKG } from '../utils/constants.js';
 import FileIcon from './FileIcon.js';
 import PackageIcon from './PackageIcon.js';
 import { SearchInput } from './SearchInput.js';
@@ -17,9 +18,9 @@ const FileList = ({ title, files, packageName, filter }) => html`
         url.match(filter) &&
         html`
           <li key=${key} data-test="Item">
-            <${Link} href=${url.replace('https://unpkg.com/', '/?')}>
+            <${Link} href=${url.replace(UNPKG, '/?')}>
               ${url.includes(packageName) ? FileIcon : PackageIcon}
-              ${url.replace(`https://unpkg.com/`, '').replace(packageName, '')}
+              ${url.replace(UNPKG, '').replace(packageName, '')}
             <//>
           </li>
         `
@@ -29,7 +30,7 @@ const FileList = ({ title, files, packageName, filter }) => html`
 
 export const FileOverview = () => {
   const [{ request, cache, dependencySearchTerm }, dispatch] = useStateValue();
-  const file = cache['https://unpkg.com/' + request.path];
+  const file = cache[UNPKG + request.path];
   return (
     !!file &&
     html`

components/Main.js

@@ -1,3 +1,4 @@
+import { UNPKG, PACKUMENT } from '../utils/constants.js';
 import { react, html, css } from '../utils/rplus.js';
 import { useStateValue } from '../utils/globalState.js';
 import { parseUrl } from '../utils/parseUrl.js';
@@ -40,20 +41,18 @@ export default () => {
   // Resolve full path for incomplete urls
   react.useEffect(() => {
     if (request.name && (!request.version || !request.file))
-      fetch(`https://unpkg.com/${request.path}`)
+      fetch(UNPKG + request.path)
         .then(({ url }) => {
           dispatch({ type: 'setRequest', payload: parseUrl(url) });
-          replaceState(
-            `/?${url.replace('https://unpkg.com/', '')}${location.hash}`
-          );
+          replaceState(`/?${url.replace(UNPKG, '')}${location.hash}`);
         })
         .catch(console.error);
   }, [request.path]);
 
   // Fetch directory listings for requested package
   react.useEffect(() => {
     if (request.name && request.version)
-      fetch(`https://unpkg.com/${request.name}@${request.version}/?meta`)
+      fetch(`${UNPKG}${request.name}@${request.version}/?meta`)
         .then(res => res.json())
         .then(res => dispatch({ type: 'setDirectory', payload: res }))
         .catch(console.error);
@@ -62,7 +61,7 @@ export default () => {
   // Fetch package meta data for all versions
   react.useEffect(() => {
     if (request.name)
-      fetch(`https://registry.npmjs.cf/${request.name}/`)
+      fetch(`${PACKUMENT}/${request.name}/`)
         .then(res => res.json())
         .then(json => {
           dispatch({ type: 'setVersions', payload: json.versions });
@@ -73,8 +72,8 @@ export default () => {
 
   // Parse dependencies for the current code
   react.useEffect(() => {
-    if (request.file && !cache['https://unpkg.com/' + request.path])
-      worker.postMessage('https://unpkg.com/' + request.path);
+    if (request.file && !cache[UNPKG + request.path])
+      worker.postMessage(UNPKG + request.path);
   }, [request.path]);
 
   // Fetch packages by search term

serviceWorker.js

@@ -1,5 +1,5 @@
 /* eslint-disable max-nested-callbacks */
-const cacheName = 'www.runpkg.com';
+const cacheName = 'www.unpkg.com';
 
 self.addEventListener('activate', () => {
   console.log('service worker activated');

tests/utils/parseUrl.test.js

@@ -1,12 +1,13 @@
 require = require('esm')(module);
 
 const parseUrlFile = require('../../utils/parseUrl');
+const { UNPKG } = require('../../utils/constants');
 
 const parseUrl = parseUrlFile.parseUrl;
 
 describe('parseUrl', () => {
   it('parses non beta package', () => {
-    expect(parseUrl('https://unpkg.com/pkg-dash@1.0.0/extra.js')).toEqual({
+    expect(parseUrl(UNPKG + 'pkg-dash@1.0.0/extra.js')).toEqual({
       name: 'pkg-dash',
       version: '1.0.0',
       path: 'pkg-dash@1.0.0/extra.js',
@@ -15,9 +16,7 @@ describe('parseUrl', () => {
     });
   });
   it('parses beta package', () => {
-    expect(
-      parseUrl('https://unpkg.com/pkg-dash@1.0.0-beta.1/extra.js')
-    ).toEqual({
+    expect(parseUrl(UNPKG + 'pkg-dash@1.0.0-beta.1/extra.js')).toEqual({
       name: 'pkg-dash',
       version: '1.0.0-beta.1',
       path: 'pkg-dash@1.0.0-beta.1/extra.js',
@@ -27,7 +26,7 @@ describe('parseUrl', () => {
   });
   it('parses beta package with file a directory down', () => {
     expect(
-      parseUrl('https://unpkg.com/fast-deep-equal@3.0.0-beta.1/es6/index.js')
+      parseUrl(UNPKG + 'fast-deep-equal@3.0.0-beta.1/es6/index.js')
     ).toEqual({
       file: 'index.js',
       name: 'fast-deep-equal',
@@ -37,7 +36,7 @@ describe('parseUrl', () => {
     });
   });
   it('parses scoped non-beta package', () => {
-    expect(parseUrl('https://unpkg.com/@scope/pkg@1.0.0/index.js')).toEqual({
+    expect(parseUrl(UNPKG + '@scope/pkg@1.0.0/index.js')).toEqual({
       file: 'index.js',
       name: '@scope/pkg',
       path: '@scope/pkg@1.0.0/index.js',
@@ -46,20 +45,16 @@ describe('parseUrl', () => {
     });
   });
   it('parses scoped non-beta package with file a directory down', () => {
-    expect(parseUrl('https://unpkg.com/@scope/pkg@1.0.0/es6/index.js')).toEqual(
-      {
-        file: 'index.js',
-        name: '@scope/pkg',
-        path: '@scope/pkg@1.0.0/es6/index.js',
-        directory: 'es6',
-        version: '1.0.0',
-      }
-    );
+    expect(parseUrl(UNPKG + '@scope/pkg@1.0.0/es6/index.js')).toEqual({
+      file: 'index.js',
+      name: '@scope/pkg',
+      path: '@scope/pkg@1.0.0/es6/index.js',
+      directory: 'es6',
+      version: '1.0.0',
+    });
   });
   it('parses scoped beta package', () => {
-    expect(
-      parseUrl('https://unpkg.com/@scope/pkg@1.0.0-beta.1/index.js')
-    ).toEqual({
+    expect(parseUrl(UNPKG + '@scope/pkg@1.0.0-beta.1/index.js')).toEqual({
       file: 'index.js',
       name: '@scope/pkg',
       path: '@scope/pkg@1.0.0-beta.1/index.js',
@@ -68,21 +63,21 @@ describe('parseUrl', () => {
     });
   });
   it('keys are returned null if not available', () => {
-    expect(parseUrl('https://unpkg.com/')).toEqual({
+    expect(parseUrl(UNPKG + '')).toEqual({
       file: null,
       name: null,
       path: null,
       directory: null,
       version: null,
     });
-    expect(parseUrl('https://unpkg.com/@scope/pkg')).toEqual({
+    expect(parseUrl(UNPKG + '@scope/pkg')).toEqual({
       file: null,
       name: '@scope/pkg',
       path: '@scope/pkg',
       directory: null,
       version: null,
     });
-    expect(parseUrl('https://unpkg.com/@scope/pkg@1.0.0-beta.1')).toEqual({
+    expect(parseUrl(UNPKG + '@scope/pkg@1.0.0-beta.1')).toEqual({
       file: null,
       name: '@scope/pkg',
       path: '@scope/pkg@1.0.0-beta.1',

utils/constants.js

@@ -0,0 +1,2 @@
+export const UNPKG = 'https://unpkg.com/';
+export const PACKUMENT = 'https://registry.npmjs.cf/';

utils/parseUrl.js

@@ -1,7 +1,7 @@
 const parseUrl = (url = window.location.search.slice(1).replace(/\/$/, '')) => {
   const parts = url
     .trim()
-    .replace('https://unpkg.com', '')
+    .replace('https://unpkg.com/', '')
     .split('/')
     .map(part => part.trim())
     .filter(Boolean);

utils/recursiveDependencyFetchWorker.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-eval */
-const UNPKG = 'https://unpkg.com/';
 
 const fileNameRegEx = /\/[^\/@]+[\.][^\/]+$/;
 
@@ -11,6 +10,10 @@ const getParseUrl = () =>
       x.replace(/\s*export {[^}]+\};/g, '').replace(/^const\s[^=]+=/, '')
     );
 
+// This isn't imported from constants.js since otherwise we're importing
+// (see abive for webworker note)
+const UNPKG = 'https://unpkg.com/';
+
 // Handles paths like "../../some-file.js"
 const handleDoubleDot = (pathEnd, base) => {
   const howFarBack = -1 * pathEnd.match(/\.\.\//g).length;
@@ -148,10 +151,11 @@ const parseDependencies = async path => {
 
 self.onmessage = async event => {
   const { data } = event;
-  await setupParseUrl();
   try {
+    await setupParseUrl();
     await parseDependencies(data);
   } catch (e) {
+    console.error(e);
     // This is a truly awful hack to get around random CORS errors
     parseDependencies(data);
   }