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,