diff --git a/package.json b/package.json index 70d5503..856bb25 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pdanpdan/quasar-play", - "version": "1.0.5", + "version": "1.0.6", "description": "Playground for Quasar Framework", "productName": "Quasar Play", "author": { diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue index 45535a0..ff3c8bf 100644 --- a/src/components/TopBar.vue +++ b/src/components/TopBar.vue @@ -58,14 +58,27 @@
- + + + + + + + { window.removeEventListener('blur', handleWindowBlur); }); -const { ssr } = props.store; +const { ssr, productionMode } = props.store; function toggleSSR() { ssr.value = ssr.value !== true; } +function toggleProductionMode() { + productionMode.value = productionMode.value !== true; +} + function toggleDark() { $q.dark.set($q.dark.isActive !== true); } @@ -385,7 +402,7 @@ body.desktop .q-select__options-list .play &__top-bar - z-index: 1 + z-index: 20 position: relative background: var(--play-bg-color-base) transform-style: preserve-3d diff --git a/src/store.ts b/src/store.ts index 8ac9b18..4b55e8e 100644 --- a/src/store.ts +++ b/src/store.ts @@ -42,7 +42,7 @@ const counterFile = 'src/counter.ts'; const settingsFile = 'src/QuasarSettings.vue'; const pkgPathMap: Record = { - vue: 'dist/vue.runtime.esm-browser.js', + vue: 'dist/vue.{{production}}esm-browser.js', 'vue/server-renderer': { pkg: '@vue/server-renderer', path: 'dist/server-renderer.esm-browser.js', @@ -154,6 +154,8 @@ export function useReplStore( options: ReplOptions = {} ) { typescriptVersion: computed( () => versions.typescript || 'latest' ), } ); + const productionMode = ref( false ); + const customImports = computed( () => { const code = state.files[ IMPORT_MAP ]?.code.trim(); let map: ImportMap = {}; @@ -168,7 +170,7 @@ export function useReplStore( options: ReplOptions = {} ) { return map; } ); - const internalImports = computed( () => buildImports( versions ) ); + const internalImports = computed( () => buildImports( versions, productionMode.value ) ); const importMap = computed( () => { return { imports: { @@ -219,7 +221,7 @@ export function useReplStore( options: ReplOptions = {} ) { return `src/${ origin }`; } - function buildImports( versions: Record = {} ) { + function buildImports( versions: Record = {}, prod: boolean = false ) { const imports: Record = {}; for ( const name of Object.keys( pkgPathMap ) ) { @@ -238,7 +240,8 @@ export function useReplStore( options: ReplOptions = {} ) { if ( !pkg || !path ) continue; - imports[ name ] = getCdnUrl( pkg, path, versions[ pkg ] || 'latest' ); + const prodReplace = prod === true ? 'runtime.' : ''; + imports[ name ] = getCdnUrl( pkg, path, versions[ pkg ] || 'latest' ).replace( '{{production}}', prodReplace ); } return imports; @@ -371,6 +374,7 @@ export function useReplStore( options: ReplOptions = {} ) { ...store, ssr: ref( false ), + productionMode, versions, init, serialize,