feat(sourcemap): enable rfc-3986 urls (#3100)

ensure that sourceMapUrls are compliant with RFC-3986, per the sourcemap
[specification](https://sourcemaps.info/spec.html#h.crcf4lqeivt8):

> Note: <url> is a URL as defined in RFC3986; in particular, characters
outside the set permitted to appear in URIs must be percent-encoded.

STENCIL-173: Make sourceMapUrl values RFC 3986 compliant

Author: rwaskiewicz

src/utils/sourcemaps.ts

@@ -28,14 +28,30 @@ export const rollupToStencilSourceMap = (rollupSourceMap: RollupSourceMap | unde
  */
 const JS_SOURCE_MAPPING_URL_LINKER = '//# sourceMappingURL=';
 
+/**
+ * Generates an RFC-3986 compliant string for the given input.
+ * More information about RFC-3986 can be found [here](https://datatracker.ietf.org/doc/html/rfc3986)
+ * This function's original source is derived from
+ * [MDN's encodeURIComponent documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#description)
+ * @param filename the filename to encode
+ * @returns the encoded URI
+ */
+const encodeFilenameToRfc3986 = (filename: string): string => {
+  const encodedUri = encodeURIComponent(filename);
+  // replace all '!', single quotes, '(', ')', and '*' with their hexadecimal values (UTF-16)
+  return encodedUri.replace(/[!'()*]/g, (matchedCharacter) => {
+    return '%' + matchedCharacter.charCodeAt(0).toString(16);
+  });
+};
+
 /**
  * Generates a string used to link generated code with the original source, to be placed at the end of the generated
- * code. Note that at this time, this method is _not_ RFC3986 compliant.
+ * code.
  * @param url the url of the source map
  * @returns a linker string, of the format {@link JS_SOURCE_MAPPING_URL_LINKER}=<url>
  */
 export const getSourceMappingUrlLinker = (url: string): string => {
-  return `${JS_SOURCE_MAPPING_URL_LINKER}${url}`;
+  return `${JS_SOURCE_MAPPING_URL_LINKER}${encodeFilenameToRfc3986(url)}`;
 };
 
 /**

src/utils/test/sourcemaps.spec.ts

@@ -46,11 +46,87 @@ describe('sourcemaps', () => {
     it('returns a correctly formatted url', () => {
       expect(getSourceMappingUrlLinker('some-pkg')).toBe('//# sourceMappingURL=some-pkg');
     });
+
+    it('handles question marks in URLs', () => {
+      expect(getSourceMappingUrlLinker('some-pkg?')).toBe('//# sourceMappingURL=some-pkg%3F');
+    });
+
+    it('handles equal signs in URLs', () => {
+      expect(getSourceMappingUrlLinker('some-pkg=')).toBe('//# sourceMappingURL=some-pkg%3D');
+    });
+
+    it('handles ampersands in URLs', () => {
+      expect(getSourceMappingUrlLinker('some-pkg&')).toBe('//# sourceMappingURL=some-pkg%26');
+    });
+
+    it('handles slashes in URLs', () => {
+      expect(getSourceMappingUrlLinker('some-pkg/')).toBe('//# sourceMappingURL=some-pkg%2F');
+    });
+
+    it('handles exclamation points in URLs', () => {
+      expect(getSourceMappingUrlLinker('some-pkg!')).toBe('//# sourceMappingURL=some-pkg%21');
+    });
+
+    it('handles single quotes in URLs', () => {
+      expect(getSourceMappingUrlLinker("some-'pkg'")).toBe('//# sourceMappingURL=some-%27pkg%27');
+    });
+
+    it('handles parenthesis in URLs', () => {
+      expect(getSourceMappingUrlLinker('some-(pkg)')).toBe('//# sourceMappingURL=some-%28pkg%29');
+    });
+
+    it('handles asterisks in URLs', () => {
+      expect(getSourceMappingUrlLinker('some-pkg*')).toBe('//# sourceMappingURL=some-pkg%2a');
+    });
+
+    it('encodes multiple disallowed characters at once', () => {
+      expect(getSourceMappingUrlLinker('!some-(pkg)*')).toBe('//# sourceMappingURL=%21some-%28pkg%29%2a');
+    });
   });
 
   describe('getSourceMappingUrlLinkerWithNewline', () => {
     it('returns a correctly formatted url', () => {
       expect(getSourceMappingUrlForEndOfFile('some-pkg')).toBe('\n//# sourceMappingURL=some-pkg.map');
     });
+
+    it('returns a correctly formatted url', () => {
+      expect(getSourceMappingUrlForEndOfFile('some-pkg')).toBe('\n//# sourceMappingURL=some-pkg.map');
+    });
+
+    it('handles question marks in URLs', () => {
+      expect(getSourceMappingUrlForEndOfFile('some-pkg?')).toBe('\n//# sourceMappingURL=some-pkg%3F.map');
+    });
+
+    it('handles equal signs in URLs', () => {
+      expect(getSourceMappingUrlForEndOfFile('some-pkg=')).toBe('\n//# sourceMappingURL=some-pkg%3D.map');
+    });
+
+    it('handles ampersands in URLs', () => {
+      expect(getSourceMappingUrlForEndOfFile('some-pkg&')).toBe('\n//# sourceMappingURL=some-pkg%26.map');
+    });
+
+    it('handles slashes in URLs', () => {
+      expect(getSourceMappingUrlForEndOfFile('some-pkg/')).toBe('\n//# sourceMappingURL=some-pkg%2F.map');
+    });
+
+    it('handles exclamation points in URLs', () => {
+      expect(getSourceMappingUrlForEndOfFile('some-pkg!')).toBe('\n//# sourceMappingURL=some-pkg%21.map');
+    });
+
+    it('handles single quotes in URLs', () => {
+      expect(getSourceMappingUrlForEndOfFile("some-'pkg'")).toBe('\n//# sourceMappingURL=some-%27pkg%27.map');
+    });
+
+    it('handles parenthesis in URLs', () => {
+      expect(getSourceMappingUrlForEndOfFile('some-(pkg)')).toBe('\n//# sourceMappingURL=some-%28pkg%29.map');
+    });
+
+    it('handles asterisks in URLs', () => {
+      expect(getSourceMappingUrlForEndOfFile('some-pkg*')).toBe('\n//# sourceMappingURL=some-pkg%2a.map');
+    });
+
+    it('encodes multiple disallowed characters at once', () => {
+      expect(getSourceMappingUrlForEndOfFile('!some-(pkg)*')).toBe('\n//# sourceMappingURL=%21some-%28pkg%29%2a.map');
+    });
   });
 });