feat: split staging and dev build configurations

studio/package.json

@@ -9,6 +9,7 @@
   ],
   "scripts": {
     "build": "stencil build --prerender",
+    "staging": "stencil build --prerender --staging",
     "postbuild": "./scripts/config.index.js",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",

studio/src/global/app-dev.ts

@@ -35,8 +35,8 @@ setupDeckGoConfig({
   deckdeckgo: {
     prod: false,
     appUrl: 'http://localhost:3333',
-    globalAssetsUrl: 'https://deckdeckgo-studio-beta.web.app/assets',
-    pollUrl: 'https://localhost:3333/poll',
+    globalAssetsUrl: 'http://localhost:3333/assets',
+    pollUrl: 'http://localhost:3333/poll',
     apiUrl: '<@API_URL@>',
     presentationUrl: '<@PRESENTATION_URL@>',
     socketUrl: '<@SOCKET_URL@>'

studio/src/global/app-staging.ts

@@ -0,0 +1,115 @@
+import '@ionic/core';
+
+import {setupConfig} from '@ionic/core';
+setupConfig({
+  inputBlurring: false
+});
+
+import '@deckdeckgo/core';
+
+import '@deckdeckgo/inline-editor';
+import '@deckdeckgo/remote';
+import '@deckdeckgo/qrcode';
+import '@deckdeckgo/highlight-code';
+import '@deckdeckgo/lazy-img';
+import '@deckdeckgo/color';
+import '@deckdeckgo/charts';
+import '@deckdeckgo/social';
+import '@deckdeckgo/youtube';
+import '@deckdeckgo/drag-resize-rotate';
+
+import '@deckdeckgo/slide-title';
+import '@deckdeckgo/slide-content';
+import '@deckdeckgo/slide-split';
+import '@deckdeckgo/slide-gif';
+import '@deckdeckgo/slide-youtube';
+import '@deckdeckgo/slide-author';
+import '@deckdeckgo/slide-qrcode';
+import '@deckdeckgo/slide-chart';
+import '@deckdeckgo/slide-poll';
+import '@deckdeckgo/slide-aspect-ratio';
+
+import {setupConfig as setupDeckGoConfig} from '../app/services/core/environment/environment-config';
+
+setupDeckGoConfig({
+  deckdeckgo: {
+    prod: false,
+    appUrl: 'https://deckdeckgo-studio-beta.web.app',
+    globalAssetsUrl: 'https://deckdeckgo-studio-beta.web.app/assets',
+    pollUrl: 'https://deckdeckgo-studio-beta.web.app/poll',
+    apiUrl: '<@API_URL@>',
+    presentationUrl: '<@PRESENTATION_URL@>',
+    socketUrl: '<@SOCKET_URL@>'
+  },
+  firebase: {
+    apiKey: '<@FIREBASE_API_KEY@>',
+    authDomain: '<@FIREBASE_AUTH_DOMAIN@>',
+    databaseURL: '<@FIREBASE_DATABASE_URL@>',
+    projectId: '<@FIREBASE_PROJECT_ID@>',
+    storageBucket: '<@FIREBASE_STORAGE_BUCKET@>',
+    messagingSenderId: '<@FIREBASE_MESSAGING_SENDER_ID@>',
+    storageUrl: '<@FIREBASE_STORAGE_URL@>',
+    appId: '<@FIREBASE_APP_ID@>'
+  },
+  tenor: {
+    url: 'https://api.tenor.com/v1/',
+    key: '<@TENOR_KEY@>'
+  },
+  unsplash: {
+    url: '<@UNSPLASH_URL@>'
+  },
+  google: {
+    fontsUrl: 'https://fonts.googleapis.com/css?display=swap&family='
+  }
+});
+
+// https://github.com/deckgo/deckdeckgo/issues/327
+// https://github.com/ionic-team/ionic/issues/19065
+
+const hack = () => {
+  const ionApp = document.querySelector('ion-app');
+
+  if (ionApp) {
+    window.requestAnimationFrame(() => {
+      ionApp.style.height = '100%';
+      window.requestAnimationFrame(() => {
+        ionApp.style.height = '';
+      });
+    });
+  }
+};
+
+let resizerObserver;
+
+document.addEventListener('DOMContentLoaded', () => {
+  if (!window) {
+    return;
+  }
+
+  if ('ResizeObserver' in window) {
+    const ResizeObserver = (window as any).ResizeObserver;
+    resizerObserver = new ResizeObserver(hack);
+    resizerObserver.observe(document.documentElement);
+  } else {
+    window.addEventListener('keyboardWillShow', hack);
+    window.addEventListener('keyboardWillHide', hack);
+    window.addEventListener('resize', hack);
+  }
+});
+
+window.addEventListener('unload', () => {
+  if (!window) {
+    return;
+  }
+
+  if ('ResizeObserver' in window) {
+    if (resizerObserver) {
+      resizerObserver.unobserve(document.documentElement);
+      resizerObserver.disconnect();
+    }
+  } else {
+    window.removeEventListener('keyboardWillShow', hack);
+    window.removeEventListener('keyboardWillHide', hack);
+    window.removeEventListener('resize', hack);
+  }
+});

studio/stencil.config.ts

@@ -11,40 +11,40 @@ const dev: boolean = process.argv && process.argv.indexOf('--dev') > -1;
 // @ts-ignore
 const staging: boolean = process.argv && process.argv.indexOf('--staging') > -1;
 
-const globalScript: string = dev ? 'src/global/app-dev.ts' : 'src/global/app.ts';
+const globalScript: string = dev ? 'src/global/app-dev.ts' : staging ? 'src/global/app-staging.ts' : 'src/global/app.ts';
 
-const configDataFile = dev ? (staging ? './config.staging.json' : './config.dev.json') : './config.prod.json';
+const configDataFile = dev ? './config.dev.json' : staging ? './config.staging.json' : './config.prod.json';
 const configValues = require(configDataFile);
 
 export const config: Config = {
-    outputTargets: [{
-        type: 'www',
-        baseUrl: 'https://deckdeckgo.com',
-        serviceWorker: {
-            swSrc: 'src/sw.js'
-        }
-    }],
-    globalScript: globalScript,
-    globalStyle: 'src/global/app.scss',
-    plugins: [
-        replace({
-            exclude: 'node_modules/**',
-            delimiters: ['<@', '@>'],
-            values: configValues
-        }),
-        sass({
-            includePaths: ['node_modules/@deckdeckgo/deck-utils/styles/']
-        }),
-        postcss({
-            plugins: [autoprefixer()]
-        })
-    ],
-    nodeResolve: {browser: true},
-    devServer: {
-        openBrowser: false,
-        reloadStrategy: 'pageReload'
-    },
-    copy: [
-        {src: 'robots.txt'}
-    ]
+  outputTargets: [
+    {
+      type: 'www',
+      baseUrl: 'https://deckdeckgo.com',
+      serviceWorker: {
+        swSrc: 'src/sw.js'
+      }
+    }
+  ],
+  globalScript: globalScript,
+  globalStyle: 'src/global/app.scss',
+  plugins: [
+    replace({
+      exclude: 'node_modules/**',
+      delimiters: ['<@', '@>'],
+      values: configValues
+    }),
+    sass({
+      includePaths: ['node_modules/@deckdeckgo/deck-utils/styles/']
+    }),
+    postcss({
+      plugins: [autoprefixer()]
+    })
+  ],
+  nodeResolve: {browser: true},
+  devServer: {
+    openBrowser: false,
+    reloadStrategy: 'pageReload'
+  },
+  copy: [{src: 'robots.txt'}]
 };