fix(sandpack): load transpiled file (#8601)

* fix(sandpack): load transpiled file * encode file content * revert * revert * add comment

Author: danilowoz

packages/app/package.json

@@ -343,6 +343,7 @@
  "postcss-flexbugs-fixes": "^4.1.0",
  "postcss-import": "^12.0.1",
  "postcss-loader": "3.0.0",
+ "postcss-url": "^10.1.3",
  "postcss-normalize": "^8.0.1",
  "postcss-preset-env": "^6.7.0",
  "preval.macro": "^1.0.1",

packages/app/src/sandbox/eval/transpilers/postcss/loader.ts

@@ -1,5 +1,6 @@
 import postcss, { ProcessOptions } from 'postcss';
 import postcssImportPlugin from 'postcss-import';
+import postcssUrl from 'postcss-url';
 import { join } from 'path';
 import { isDependencyPath } from 'sandbox/eval/utils/is-dependency-path';
 
@@ -59,6 +60,9 @@ export default async function (
  return tModule.module.code;
  },
  }),
+ postcssUrl({
+ url: 'rebase',
+ }),
  ];
 
  const options: ProcessOptions = {

packages/app/src/sandbox/index.ts

@@ -71,6 +71,15 @@ requirePolyfills().then(() => {
  data: {},
  });
  }
+ } else if (data.type === 'get-modules') {
+ const manager = getCurrentManager();
+
+ if (manager) {
+ dispatch({
+ type: 'all-modules',
+ data: manager.getModules(),
+ });
+ }
  } else if (data.type === 'sign-in') {
  await requestSandpackSecretFromApp(data.teamId);
 

packages/app/src/sandbox/worker/sw.no-webpack.js

@@ -232,26 +232,43 @@ self.addEventListener('fetch', event => {
  * TODO: figure out a way to filter bundler requests and
  * local requests. Now, it only supports `public`
  */
+
  if (
- parsedUrl.origin !== self.location.origin ||
- !parsedUrl.pathname.startsWith('/public')
+ parsedUrl.origin === self.location.origin &&
+ (parsedUrl.pathname.startsWith('/public') ||
+ parsedUrl.pathname.startsWith('/node_modules/'))
  ) {
- return;
- }
-
- const handleRequest = async () => {
- debug(`[SW]: request `, req);
-
- const response = await getResponse(req);
- const swResponse = new Response(response.body, {
- headers: response.headers,
- status: response.status,
- });
-
- debug(`[SW]: response`, response);
- return swResponse;
- };
+ const handleRequest = async () => {
+ debug(`[SW]: request `, req);
+
+ const response = await getResponse(req);
+ const pathname = parsedUrl.pathname;
+ const responseBody =
+ pathname.endsWith('.woff2') ||
+ pathname.endsWith('.woff') ||
+ pathname.endsWith('.ttf')
+ ? base64ToUint8Array(response.body)
+ : response.body;
+
+ const swResponse = new Response(responseBody, {
+ headers: response.headers,
+ status: response.status,
+ });
+
+ debug(`[SW]: response`, response);
+ return swResponse;
+ };
 
- // eslint-disable-next-line
- return event.respondWith(handleRequest());
+ // eslint-disable-next-line
+ return event.respondWith(handleRequest());
+ }
 });
+
+function base64ToUint8Array(base64String) {
+ const binaryString = atob(base64String);
+ const uint8Array = new Uint8Array(binaryString.length);
+ for (let i = 0; i < binaryString.length; i++) {
+ uint8Array[i] = binaryString.charCodeAt(i);
+ }
+ return uint8Array;
+}

packages/sandpack-core/src/npm/dynamic/fetch-protocols/utils/tar-store.ts

@@ -24,9 +24,21 @@ export class TarStore implements FetchProtocol {
  private normalizeTar(tarContents: UntarredFiles) {
  const normalized: { [path: string]: DeserializedFetchedTar } = {};
  tarContents.forEach(tar => {
+ /**
+ * TODO: it's necessary to encode the font files as base64,
+ * otherwise they will be corrupted when fetched by the sandpack service worker.
+ *
+ * Ideally, in the future, we should use ArrayBuffer instead of strings
+ */
+ const encode =
+ tar.name.endsWith('.woff2') ||
+ tar.name.endsWith('.woff') ||
+ tar.name.endsWith('.ttf')
+ ? 'base64'
+ : undefined;
+
  normalized[tar.name.replace(/^[^/]+/, '')] = {
- // TODO(@CompuIves): store buffers rather than strings for binary files
- content: Buffer.from(tar.buffer).toString(),
+ content: Buffer.from(tar.buffer).toString(encode),
  };
  });
  return normalized;

packages/sandpack-core/src/sandpack-secret.ts

@@ -58,7 +58,7 @@ function getPopupDimensions() {
 
 export function getProtocolAndHostWithSSE() {
  if (document.location.host.startsWith('localhost')) {
- return 'https://6er17b-3000.csb.app';
+ return 'http://localhost:3000';
  }
 
  if (document.location.host.endsWith('.io')) {

yarn.lock

@@ -10158,6 +10158,11 @@ csstype@^3.0.2, csstype@^3.0.4:
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+cuint@^0.2.2:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
+ integrity sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==
+
 currently-unhandled@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -17015,7 +17020,7 @@ magic-string@^0.25.2, magic-string@^0.25.5, magic-string@^0.25.7:
  dependencies:
  sourcemap-codec "^1.4.4"
 
-make-dir@3.1.0, make-dir@^3.0.0, make-dir@^3.0.2:
+make-dir@3.1.0, make-dir@^3.0.0, make-dir@^3.0.2, make-dir@~3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -17458,6 +17463,11 @@ mime@^2.4.4:
  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
 
+mime@~2.5.2:
+ version "2.5.2"
+ resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
+ integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
+
 mimic-fn@^1.0.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -17569,6 +17579,13 @@ minimatch@^9.0.0, minimatch@^9.0.1:
  dependencies:
  brace-expansion "^2.0.1"
 
+minimatch@~3.0.4:
+ version "3.0.8"
+ resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
+ integrity sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==
+ dependencies:
+ brace-expansion "^1.1.7"
+
 minimist-options@4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
@@ -19958,6 +19975,16 @@ postcss-selector-parser@^6.0.10:
  cssesc "^3.0.0"
  util-deprecate "^1.0.2"
 
+postcss-url@^10.1.3:
+ version "10.1.3"
+ resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-10.1.3.tgz#54120cc910309e2475ec05c2cfa8f8a2deafdf1e"
+ integrity sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==
+ dependencies:
+ make-dir "~3.1.0"
+ mime "~2.5.2"
+ minimatch "~3.0.4"
+ xxhashjs "~0.2.2"
+
 postcss-value-parser@^3.2.3:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
@@ -26206,6 +26233,13 @@ xterm@^3.8.1:
  resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.14.5.tgz#c9d14e48be6873aa46fb429f22f2165557fd2dea"
  integrity sha512-DVmQ8jlEtL+WbBKUZuMxHMBgK/yeIZwkXB81bH+MGaKKnJGYwA+770hzhXPfwEIokK9On9YIFPRleVp/5G7z9g==
 
+xxhashjs@~0.2.2:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8"
+ integrity sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==
+ dependencies:
+ cuint "^0.2.2"
+
 y18n@^3.2.1:
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"