feat(repl): optionally enable preloader

Author: wmertens

packages/docs/src/repl/repl-options.tsx

@@ -22,6 +22,7 @@ export const ReplOptions = ({ input, versions, qwikVersion }: ReplOptionsProps)
       />
 
       <StoreBoolean label="Debug" inputProp="debug" input={input} />
+      <StoreBoolean label="Preloader" inputProp="preloader" input={input} />
     </div>
   );
 };

packages/docs/src/repl/repl-share-url.ts

@@ -7,6 +7,7 @@ const dataDefaults: PlaygroundShareUrl = {
   buildMode: 'development',
   entryStrategy: 'segment',
   files: [],
+  preloader: false,
 };
 export const parsePlaygroundShareUrl = (shareable: string) => {
   if (typeof shareable === 'string' && shareable.length > 0) {
@@ -27,6 +28,10 @@ export const parsePlaygroundShareUrl = (shareable: string) => {
       if (ENTRY_STRATEGY_OPTIONS.includes(entryStrategy)) {
         data.entryStrategy = entryStrategy;
       }
+      const preloader = params.get('preloader')!;
+      if (preloader !== null) {
+        data.preloader = true;
+      }
 
       if (params.has('files')) {
         // Old URLs that didn't compress
@@ -129,6 +134,13 @@ export const createPlaygroundShareUrl = (data: PlaygroundShareUrl, pathname = '/
   if (data.entryStrategy !== dataDefaults.entryStrategy) {
     params.set('entryStrategy', data.entryStrategy);
   }
+  if (data.preloader !== dataDefaults.preloader) {
+    if (data.preloader) {
+      params.set('preloader', '');
+    } else {
+      params.delete('preloader');
+    }
+  }
 
   params.set('f', compressFiles(data.files));
 
@@ -184,4 +196,5 @@ interface PlaygroundShareUrl {
   buildMode: any;
   entryStrategy: any;
   files: any[];
+  preloader?: boolean;
 }

packages/docs/src/repl/repl-share-url.unit.ts

@@ -24,6 +24,7 @@ const data = {
       code: 'console.log("bar");',
     },
   ],
+  preloader: false,
 };
 test('filesToStr', () => {
   assert.equal(

packages/docs/src/repl/repl.tsx

@@ -108,6 +108,7 @@ export const Repl = component$((props: ReplProps) => {
     track(() => input.files);
     track(() => input.version);
     track(() => input.debug);
+    track(() => input.preloader);
     track(() => store.serverWindow);
 
     sendUserUpdateToReplServer(input, store);
@@ -210,6 +211,7 @@ export const sendUserUpdateToReplServer = (input: ReplAppInput, store: ReplStore
         version: input.version,
         serverUrl: store.serverUrl,
         deps: getDependencies(input),
+        preloader: !!input.preloader,
       },
     };
 

packages/docs/src/repl/types.ts

@@ -13,6 +13,7 @@ export interface ReplAppInput {
   buildMode: 'development' | 'production';
   entryStrategy: string;
   debug?: boolean;
+  preloader?: boolean;
 }
 
 export type PkgUrls = { [pkgName: string]: { [path: string]: string; version: string } };
@@ -23,6 +24,7 @@ export interface ReplInputOptions extends Omit<QwikRollupPluginOptions, 'srcDir'
   buildMode: 'development' | 'production';
   serverUrl: string | undefined;
   deps: PkgUrls;
+  preloader: boolean;
 }
 
 export interface ReplStore {

packages/docs/src/repl/worker/app-ssr-html.ts

@@ -71,6 +71,7 @@ export const appSsrHtml = async (options: ReplInputOptions, cache: Cache, result
     base: baseUrl,
     manifest: result.manifest,
     prefetchStrategy: null as any,
+    preloader: options.preloader ? { debug: true } : false,
   }).catch((e) => {
     console.error('SSR failed', e);
     return {

packages/docs/src/routes/examples/[...id]/index!.tsx

@@ -77,6 +77,7 @@ export default component$(() => {
     track(() => store.entryStrategy);
     track(() => store.files);
     track(() => store.version);
+    track(() => store.preloader);
 
     if (isBrowser) {
       if (store.version) {