fix(docs): cloudflare deploy

URL.getBlobUrl was giving issues on cloudflare
QwikDev · Mar 3, 2024 · e77e8cb · e77e8cb
1 parent 420f382
commit e77e8cb
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/packages/docs/src/repl/bundled.tsx b/packages/docs/src/repl/bundled.tsx
@@ -15,6 +15,7 @@ import qJsxDts from '../../node_modules/@builder.io/qwik/dist/jsx-runtime.d.ts?r
 import qOptimizerCjs from '../../node_modules/@builder.io/qwik/dist/optimizer.cjs?raw';
 import qServerCjs from '../../node_modules/@builder.io/qwik/dist/server.cjs?raw';
 import qServerDts from '../../node_modules/@builder.io/qwik/dist/server.d.ts?raw';
+import { isServer } from '@builder.io/qwik/build';
 
 export const QWIK_PKG_NAME = '@builder.io/qwik';
 const ROLLUP_VERSION = '2.75.6';
@@ -43,11 +44,14 @@ export const getNpmCdnUrl = (
 
 // https://github.com/vitejs/vite/issues/15753
 const blobUrl = (code: string) => {
+ if (isServer) {
+ return '';
+ }
  const blob = new Blob([code], { type: 'application/javascript' });
  return URL.createObjectURL(blob);
 };
 
-export const bundled: PkgUrls = {
+const bundled: PkgUrls = {
  [QWIK_PKG_NAME]: {
  version: qwikVersion,
  '/build/index.d.ts': blobUrl(qBuild),
@@ -80,3 +84,10 @@ export const bundled: PkgUrls = {
  '/dist/bundle.min.js': blobUrl(terserJs),
  },
 };
+
+export const getBundled = () =>
+ isServer
+ ? {
+ [QWIK_PKG_NAME]: { version: qwikVersion },
+ }
+ : bundled;
diff --git a/packages/docs/src/repl/monaco.tsx b/packages/docs/src/repl/monaco.tsx
@@ -4,7 +4,8 @@ import type MonacoTypes from 'monaco-editor';
 import type { EditorProps, EditorStore } from './editor';
 import type { ReplStore } from './types';
 import { getColorPreference } from '../components/theme-toggle/theme-toggle';
-import { bundled, getNpmCdnUrl } from './bundled';
+import { getBundled, getNpmCdnUrl } from './bundled';
+import { isServer } from '@builder.io/qwik/build';
 
 export const initMonacoEditor = async (
  containerElm: any,
@@ -273,6 +274,7 @@ const loadDeps = async (qwikVersion: string) => {
  return monacoCtx.deps;
 };
 
+const bundled = getBundled();
 const fetchDep = async (cache: Cache, dep: NodeModuleDep) => {
  const url = getNpmCdnUrl(bundled, dep.pkgName, dep.pkgVersion, dep.pkgPath);
  const req = new Request(url);
@@ -292,6 +294,9 @@ const fetchDep = async (cache: Cache, dep: NodeModuleDep) => {
 };
 
 const getMonaco = async (): Promise<Monaco> => {
+ if (isServer) {
+ throw new Error('Monaco cannot be used on the server');
+ }
  if (!monacoCtx.loader) {
  // lazy-load the monaco AMD script ol' school
  monacoCtx.loader = new Promise<Monaco>((resolve, reject) => {

diff --git a/packages/docs/src/repl/repl-detail-panel.tsx b/packages/docs/src/repl/repl-detail-panel.tsx
@@ -1,4 +1,4 @@
-import { bundled } from './bundled';
+import { QWIK_PKG_NAME, getBundled } from './bundled';
 import { ReplConsole } from './repl-console';
 import { ReplOptions } from './repl-options';
 import { ReplTabButton } from './repl-tab-button';
@@ -31,7 +31,7 @@ export const ReplDetailPanel = ({ input, store }: ReplDetailPanelProps) => {
  <ReplOptions
  input={input}
  versions={store.versions}
- qwikVersion={bundled['@builder.io/qwik'].version}
+ qwikVersion={getBundled()[QWIK_PKG_NAME].version}
  />
  ) : null}
  </div>

diff --git a/packages/docs/src/repl/repl-version.ts b/packages/docs/src/repl/repl-version.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
-import { bundled } from './bundled';
+import { QWIK_PKG_NAME, getBundled } from './bundled';
 
-const bundledVersion = bundled['@builder.io/qwik'].version;
+const bundledVersion = getBundled()[QWIK_PKG_NAME].version;
 
 // The golden oldies
 const keepList = new Set('1.0.0,1.1.5,1.2.13'.split(','));

diff --git a/packages/docs/src/repl/repl.tsx b/packages/docs/src/repl/repl.tsx
@@ -15,7 +15,8 @@ import type { ReplStore, ReplUpdateMessage, ReplMessage, ReplAppInput } from './
 import { ReplDetailPanel } from './repl-detail-panel';
 import { getReplVersion } from './repl-version';
 import { updateReplOutput } from './repl-output-update';
-import { QWIK_PKG_NAME, bundled, getNpmCdnUrl } from './bundled';
+import { QWIK_PKG_NAME, getBundled, getNpmCdnUrl } from './bundled';
+import { isServer } from '@builder.io/qwik/build';
 
 export const Repl = component$((props: ReplProps) => {
  useStyles$(styles);
@@ -79,6 +80,9 @@ export const Repl = component$((props: ReplProps) => {
 
  useVisibleTask$(
  async () => {
+ if (isServer) {
+ return;
+ }
  // only run on the client
  // Get the version asap, most likely it will be cached.
  const v = await getReplVersion(input.version, true);
@@ -132,6 +136,9 @@ export const receiveMessageFromReplServer = (
  store: ReplStore,
  input: ReplAppInput
 ) => {
+ if (isServer) {
+ return;
+ }
  if (ev.origin !== window.origin) {
  return;
  }
@@ -158,6 +165,7 @@ export const receiveMessageFromReplServer = (
  }
 };
 
+const bundled = getBundled();
 const getDependencies = (input: ReplAppInput) => {
  const out = { ...bundled };
  if (input.version !== 'bundled') {
@@ -175,6 +183,9 @@ const getDependencies = (input: ReplAppInput) => {
 };
 
 export const sendUserUpdateToReplServer = (input: ReplAppInput, store: ReplStore) => {
+ if (isServer) {
+ return;
+ }
  if (input.version && store.serverWindow) {
  const msg: ReplUpdateMessage = {
  type: 'update',