Support downloading directly from the registry

packages/sandpack-core/src/npm/dynamic/fetch-protocols/index.ts

@@ -6,6 +6,7 @@ import { isGithubDependency, JSDelivrGHFetcher } from './jsdelivr/jsdelivr-gh';
 import { isTarDependency, TarFetcher } from './tar';
 import { GistFetcher } from './gist';
 import { FetchProtocol } from '../fetch-npm-module';
+import { ProtocolTransformer } from './transformer';
 
 let contributedProtocols: ProtocolDefinition[] = [];
 
@@ -27,6 +28,17 @@ const protocols: ProtocolDefinition[] = [
     protocol: new JSDelivrGHFetcher(),
     condition: (name, version) => isGithubDependency(version),
   },
+  {
+    protocol: new ProtocolTransformer(new TarFetcher(), (name, version) => [
+      name,
+      version.replace(
+        'https://registry.npmjs.org/',
+        'https://registry.npmjs.cf/'
+      ),
+    ]),
+    condition: (name, version) =>
+      version.startsWith('https://registry.npmjs.org/'),
+  },
   {
     protocol: new TarFetcher(),
     condition: (name, version) => isTarDependency(version),

packages/sandpack-core/src/npm/dynamic/fetch-protocols/transformer.ts

@@ -0,0 +1,33 @@
+import { FetchProtocol, Meta } from '../fetch-npm-module';
+
+export type Transformer = (name: string, version: string) => [string, string];
+
+/**
+ * A wrapper around a protocol to transform name or version
+ */
+export class ProtocolTransformer implements FetchProtocol {
+  constructor(
+    private protocol: FetchProtocol,
+    private transformer: Transformer
+  ) {
+    // Noop
+  }
+
+  file(name: string, version: string, path: string): Promise<string> {
+    const [transformedName, transformedVersion] = this.transformer(
+      name,
+      version
+    );
+
+    return this.protocol.file(transformedName, transformedVersion, path);
+  }
+
+  meta(name: string, version: string): Promise<Meta> {
+    const [transformedName, transformedVersion] = this.transformer(
+      name,
+      version
+    );
+
+    return this.protocol.meta(transformedName, transformedVersion);
+  }
+}