deckgo · peterpeterparker · May 16, 2021 · Jun 6, 2021 · Jun 6, 2021 · Jun 6, 2021
diff --git a/esbuild.js b/esbuild.js
@@ -0,0 +1,49 @@
+const esbuild = require('esbuild');
+
+const {readFile, writeFile} = require('fs').promises;
+const minify = require('html-minifier-terser').minify;
+
+// js
+
+const meta = esbuild.buildSync({
+  entryPoints: ['src/index.js'],
+  entryNames: '[dir]/[name]-[hash]',
+  metafile: true,
+  outdir: 'dist',
+  bundle: true,
+  sourcemap: true,
+  minify: true,
+  splitting: true,
+  format: 'esm',
+  target: ['esnext'],
+  define: {
+    'process.env.KEEP_HISTORY': true,
+    'process.env.NO_REMOTE': false
+  }
+});
+
+const indexEntry = Object.keys(meta.metafile.outputs)
+  .find(key => meta.metafile.outputs[key].entryPoint === 'src/index.js')
+  .replace('dist/', '');
+
+(async () => {
+  const html = await readFile('src/index.html', 'utf8');
+
+  const minifyOptions = {
+    collapseWhitespace: true,
+    keepClosingSlash: true,
+    removeComments: true,
+    removeRedundantAttributes: true,
+    removeScriptTypeAttributes: true,
+    removeStyleLinkTypeAttributes: true,
+    useShortDoctype: true,
+    minifyCSS: true
+  };
+
+  const minifyHtml = minify(html, minifyOptions);
+
+  await writeFile(
+    'dist/index.html',
+      minifyHtml.replace('</head>', `<script type="module" src="${indexEntry}"></script></head>`)
+  );
+})();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,8 +4,9 @@
   "description": "The Progressive Web App alternative for simple presentations",
   "homepage": "https://deckdeckgo.com",
   "scripts": {
-    "start": "webpack serve --mode development",
-    "build": "webpack --mode production"
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
   "author": {
     "name": "David Dal Busco",
@@ -17,21 +18,12 @@
     "url": "git://github.com/deckgo/demo.git"
   },
   "devDependencies": {
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^9.0.0",
-    "css-loader": "^5.2.6",
-    "deckdeckgo-webpack-plugins": "^2.0.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.1",
+    "@stencil/core": "^2.6.0",
     "husky": "^6.0.0",
     "prettier": "^2.3.0",
     "prettier-quick": "0.0.5",
-    "progress-bar-webpack-plugin": "^2.1.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2",
-    "workbox-webpack-plugin": "^6.1.5"
+    "vite": "^2.3.6",
+    "vite-plugin-pwa": "^0.7.3"
   },
   "license": "MIT",
   "dependencies": {
@@ -59,8 +51,7 @@
     "@deckdeckgo/social": "^4.1.0",
     "@deckdeckgo/utils": "^2.0.1",
     "@deckdeckgo/youtube": "^2.1.0",
-    "@ionic/core": "^5.6.8",
-    "web-social-share": "^7.1.0"
+    "web-social-share": "^7.2.0"
   },
   "keywords": [
     "ionic",

diff --git a/src/index.html b/src/index.html
@@ -84,26 +84,6 @@
       media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"
     />
 
-    <script>
-      if ('serviceWorker' in navigator) {
-        window.addEventListener('load', async () => {
-          try {
-            const reg = await navigator.serviceWorker.register('service-worker.js');
-            reg.onupdatefound = () => {
-              const installingWorker = reg.installing;
-              installingWorker.onstatechange = () => {
-                if (installingWorker.state === 'installed') {
-                  window.dispatchEvent(new Event('swUpdate'));
-                }
-              };
-            };
-          } catch (e) {
-            console.warn('No service worker registered');
-          }
-        });
-      }
-    </script>
-
     <link rel="manifest" href="manifest.json" />
 
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -128,6 +108,10 @@
         display: none;
       }
     </style>
+
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
   </head>
   <body>
     <ion-app class="loading">
@@ -355,7 +339,7 @@ <h2 slot="title">Reveal</h2>
                   <deckgo-reveal style="width: auto"
                     ><span>A</span><span style="margin-left: 8px; margin-right: 8px">journey</span
                     ><span style="margin-right: 8px">miles thousand a of</span
-                    ><span style="color: var(--ion-color-warning)" style="margin-right: 8px"
+                    ><span style="color: var(--ion-color-warning); margin-right: 8px;"
                       ><strong>step single a with begins</strong> - </span
                     ><span>Laozi</span></deckgo-reveal
                   >
@@ -443,6 +427,7 @@ <h2 slot="title">Get started now 🔥</h2>
       </web-social-share>
     </ion-app>
 
+    <script type="module" src="/index.js"></script>
     <noscript> Please enable Javascript to access this presentation. </noscript>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,11 @@
-import '@ionic/core/css/ionic.bundle.css';
+// TODO: Ionic not compatible with vite and esbuild yet
+// import '@ionic/core/css/ionic.bundle.css';
 
 import './css/variables.css';
 
 import '../node_modules/@deckdeckgo/deck-utils/css/deck.css';
 import '../node_modules/@deckdeckgo/kit/css/kit.css';
 
-import './scripts/demo-modal';
-
 import {
   initReload,
   initButtons,
@@ -26,61 +25,61 @@ window.EMBEDDED = false;
 window.PENDING_REMOTE_REQUESTS = [];
 window.REMOTE_STATE = 0;
 
-import {defineCustomElements as ionicElements} from '@ionic/core/loader';
-ionicElements();
+// TODO: Ionic not compatible with vite and esbuild yet
+// import {defineCustomElements as ionicElements} from '@ionic/core/loader';
+// ionicElements();
 
 // Init DeckDeckGo elements
-import {defineCustomElements as deckDeckGoElements} from '@deckdeckgo/core/dist/loader';
-
-import {defineCustomElements as deckDeckGoSlideTitleElements} from '@deckdeckgo/slide-title/dist/loader';
-import {defineCustomElements as deckDeckGoSlideContentElements} from '@deckdeckgo/slide-content/dist/loader';
-import {defineCustomElements as deckDeckGoSlideAuthorElements} from '@deckdeckgo/slide-author/dist/loader';
-import {defineCustomElements as deckDeckGoSlideChartElements} from '@deckdeckgo/slide-chart/dist/loader';
-import {defineCustomElements as deckDeckGoSlideYoutubeElements} from '@deckdeckgo/slide-youtube/dist/loader';
-import {defineCustomElements as deckDeckGoSlideSplitElements} from '@deckdeckgo/slide-split/dist/loader';
-import {defineCustomElements as deckDeckGoSlideGifElements} from '@deckdeckgo/slide-gif/dist/loader';
-import {defineCustomElements as deckDeckGoSlideQRCodeElements} from '@deckdeckgo/slide-qrcode/dist/loader';
-import {defineCustomElements as deckDeckGoSlidePollElements} from '@deckdeckgo/slide-poll/dist/loader';
-import {defineCustomElements as deckDeckGoSlidePlaygroundElements} from '@deckdeckgo/slide-playground/dist/loader';
-
-import {defineCustomElements as deckDeckGoRemoteElements} from '@deckdeckgo/remote/dist/loader';
-
-import {defineCustomElements as deckDeckGoChartsElements} from '@deckdeckgo/charts/dist/loader';
-import {defineCustomElements as deckDeckGoQRCodeElements} from '@deckdeckgo/qrcode/dist/loader';
-import {defineCustomElements as deckDeckGoHighlightCodeElements} from '@deckdeckgo/highlight-code/dist/loader';
-import {defineCustomElements as deckDeckGoSocialElements} from '@deckdeckgo/social/dist/loader';
-import {defineCustomElements as deckDeckGoRevealElements} from '@deckdeckgo/reveal/dist/loader';
-import {defineCustomElements as deckDeckGoYoutubeElements} from '@deckdeckgo/youtube/dist/loader';
-import {defineCustomElements as deckDeckGoDemoElements} from '@deckdeckgo/demo/dist/loader';
-import {defineCustomElements as deckDeckGoLaserPointerElements} from '@deckdeckgo/laser-pointer/dist/loader';
+import {defineCustomElements as deckDeckGoElements} from '@deckdeckgo/core/dist/custom-elements';
+
+import {defineCustomElements as deckDeckGoSlideTitleElements} from '@deckdeckgo/slide-title/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSlideContentElements} from '@deckdeckgo/slide-content/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSlideAuthorElements} from '@deckdeckgo/slide-author/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSlideChartElements} from '@deckdeckgo/slide-chart/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSlideYoutubeElements} from '@deckdeckgo/slide-youtube/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSlideSplitElements} from '@deckdeckgo/slide-split/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSlideGifElements} from '@deckdeckgo/slide-gif/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSlideQRCodeElements} from '@deckdeckgo/slide-qrcode/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSlidePollElements} from '@deckdeckgo/slide-poll/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSlidePlaygroundElements} from '@deckdeckgo/slide-playground/dist/custom-elements';
+
+import {defineCustomElements as deckDeckGoRemoteElements} from '@deckdeckgo/remote/dist/custom-elements';
+
+import {defineCustomElements as deckDeckGoChartsElements} from '@deckdeckgo/charts/dist/custom-elements';
+import {defineCustomElements as deckDeckGoQRCodeElements} from '@deckdeckgo/qrcode/dist/custom-elements';
+import {defineCustomElements as deckDeckGoHighlightCodeElements} from '@deckdeckgo/highlight-code/dist/custom-elements';
+import {defineCustomElements as deckDeckGoSocialElements} from '@deckdeckgo/social/dist/custom-elements';
+import {defineCustomElements as deckDeckGoRevealElements} from '@deckdeckgo/reveal/dist/custom-elements';
+import {defineCustomElements as deckDeckGoYoutubeElements} from '@deckdeckgo/youtube/dist/custom-elements';
+import {defineCustomElements as deckDeckGoDemoElements} from '@deckdeckgo/demo/dist/custom-elements';
+import {defineCustomElements as deckDeckGoLaserPointerElements} from '@deckdeckgo/laser-pointer/dist/custom-elements';
 
 // Init web-social-share
-import {defineCustomElements as webSocialShareElements} from 'web-social-share/dist/loader';
-
-deckDeckGoElements().then(async () => {
-  await deckDeckGoChartsElements();
-  await deckDeckGoQRCodeElements();
-  await deckDeckGoHighlightCodeElements();
-  await deckDeckGoSocialElements();
-  await deckDeckGoRevealElements();
-  await deckDeckGoYoutubeElements();
-  await deckDeckGoDemoElements();
-  await deckDeckGoLaserPointerElements();
-
-  const promises = [];
-
-  promises.push(deckDeckGoSlideTitleElements());
-  promises.push(deckDeckGoSlideContentElements());
-  promises.push(deckDeckGoSlideAuthorElements());
-  promises.push(deckDeckGoSlideChartElements());
-  promises.push(deckDeckGoSlideYoutubeElements());
-  promises.push(deckDeckGoSlideSplitElements());
-  promises.push(deckDeckGoSlideGifElements());
-  promises.push(deckDeckGoSlideQRCodeElements());
-  promises.push(deckDeckGoSlidePollElements());
-  promises.push(deckDeckGoSlidePlaygroundElements());
-
-  await Promise.all(promises);
+import {defineCustomElements as webSocialShareElements} from 'web-social-share/dist/custom-elements';
+
+(async () => {
+
+  deckDeckGoElements();
+
+  deckDeckGoChartsElements();
+  deckDeckGoQRCodeElements();
+  deckDeckGoHighlightCodeElements();
+  deckDeckGoSocialElements();
+  deckDeckGoRevealElements();
+  deckDeckGoYoutubeElements();
+  deckDeckGoDemoElements();
+  deckDeckGoLaserPointerElements();
+
+  deckDeckGoSlideTitleElements();
+  deckDeckGoSlideContentElements();
+  deckDeckGoSlideAuthorElements();
+  deckDeckGoSlideChartElements();
+  deckDeckGoSlideYoutubeElements();
+  deckDeckGoSlideSplitElements();
+  deckDeckGoSlideGifElements();
+  deckDeckGoSlideQRCodeElements();
+  deckDeckGoSlidePollElements();
+  deckDeckGoSlidePlaygroundElements();
 
   await postLoading();
   await initActions();
@@ -89,12 +88,11 @@ deckDeckGoElements().then(async () => {
   await postLoadingJumpTo();
   await initDeckHistoryWatch();
 
-  await webSocialShareElements();
+  webSocialShareElements();
 
-  deckDeckGoRemoteElements().then(async () => {
-    await initRemote();
-  });
-});
+  deckDeckGoRemoteElements();
+  await initRemote();
 
-initReload();
-initButtons();
+  initReload();
+  initButtons();
+})();
diff --git a/...ts/code/deckdeckgo-slide-code-example.txt → ...ts/code/deckdeckgo-slide-code-example.txt b/...ts/code/deckdeckgo-slide-code-example.txt → ...ts/code/deckdeckgo-slide-code-example.txt
diff --git a/...assets/favicon/android-chrome-192x192.png → ...assets/favicon/android-chrome-192x192.png b/...assets/favicon/android-chrome-192x192.png → ...assets/favicon/android-chrome-192x192.png
diff --git a/...assets/favicon/android-chrome-512x512.png → ...assets/favicon/android-chrome-512x512.png b/...assets/favicon/android-chrome-512x512.png → ...assets/favicon/android-chrome-512x512.png
diff --git a/src/assets/favicon/apple-touch-icon.png → ...ublic/assets/favicon/apple-touch-icon.png b/src/assets/favicon/apple-touch-icon.png → ...ublic/assets/favicon/apple-touch-icon.png
diff --git a/src/assets/favicon/browserconfig.xml → src/public/assets/favicon/browserconfig.xml b/src/assets/favicon/browserconfig.xml → src/public/assets/favicon/browserconfig.xml
diff --git a/src/assets/favicon/favicon-16x16.png → src/public/assets/favicon/favicon-16x16.png b/src/assets/favicon/favicon-16x16.png → src/public/assets/favicon/favicon-16x16.png
diff --git a/src/assets/favicon/favicon-32x32.png → src/public/assets/favicon/favicon-32x32.png b/src/assets/favicon/favicon-32x32.png → src/public/assets/favicon/favicon-32x32.png
diff --git a/src/assets/favicon/favicon.ico → src/public/assets/favicon/favicon.ico b/src/assets/favicon/favicon.ico → src/public/assets/favicon/favicon.ico
diff --git a/src/assets/favicon/mstile-150x150.png → src/public/assets/favicon/mstile-150x150.png b/src/assets/favicon/mstile-150x150.png → src/public/assets/favicon/mstile-150x150.png
diff --git a/src/assets/favicon/safari-pinned-tab.svg → ...blic/assets/favicon/safari-pinned-tab.svg b/src/assets/favicon/safari-pinned-tab.svg → ...blic/assets/favicon/safari-pinned-tab.svg
diff --git a/src/assets/icons/deckdeckgo.svg → src/public/assets/icons/deckdeckgo.svg b/src/assets/icons/deckdeckgo.svg → src/public/assets/icons/deckdeckgo.svg
diff --git a/src/assets/icons/dev.svg → src/public/assets/icons/dev.svg b/src/assets/icons/dev.svg → src/public/assets/icons/dev.svg
diff --git a/src/assets/icons/ionicons/md-list.svg → src/public/assets/icons/ionicons/md-list.svg b/src/assets/icons/ionicons/md-list.svg → src/public/assets/icons/ionicons/md-list.svg
diff --git a/src/assets/icons/medium.svg → src/public/assets/icons/medium.svg b/src/assets/icons/medium.svg → src/public/assets/icons/medium.svg
diff --git a/src/assets/img/deckdeckgo-homecoming.png → ...blic/assets/img/deckdeckgo-homecoming.png b/src/assets/img/deckdeckgo-homecoming.png → ...blic/assets/img/deckdeckgo-homecoming.png
diff --git a/src/assets/img/deckdeckgo-logo.svg → src/public/assets/img/deckdeckgo-logo.svg b/src/assets/img/deckdeckgo-logo.svg → src/public/assets/img/deckdeckgo-logo.svg
diff --git a/src/assets/img/deckdeckgo.png → src/public/assets/img/deckdeckgo.png b/src/assets/img/deckdeckgo.png → src/public/assets/img/deckdeckgo.png
diff --git a/src/assets/img/deckdeckgo.svg → src/public/assets/img/deckdeckgo.svg b/src/assets/img/deckdeckgo.svg → src/public/assets/img/deckdeckgo.svg
diff --git a/src/assets/img/desktop-light.svg → src/public/assets/img/desktop-light.svg b/src/assets/img/desktop-light.svg → src/public/assets/img/desktop-light.svg
diff --git a/src/assets/img/mobile-light.svg → src/public/assets/img/mobile-light.svg b/src/assets/img/mobile-light.svg → src/public/assets/img/mobile-light.svg
diff --git a/src/assets/img/projector.svg → src/public/assets/img/projector.svg b/src/assets/img/projector.svg → src/public/assets/img/projector.svg
diff --git a/src/assets/img/tablet-light.svg → src/public/assets/img/tablet-light.svg b/src/assets/img/tablet-light.svg → src/public/assets/img/tablet-light.svg
diff --git a/src/assets/splash/launch-1125x2436.png → ...public/assets/splash/launch-1125x2436.png b/src/assets/splash/launch-1125x2436.png → ...public/assets/splash/launch-1125x2436.png
diff --git a/src/assets/splash/launch-1242x2148.png → ...public/assets/splash/launch-1242x2148.png b/src/assets/splash/launch-1242x2148.png → ...public/assets/splash/launch-1242x2148.png
diff --git a/src/assets/splash/launch-1536x2048.png → ...public/assets/splash/launch-1536x2048.png b/src/assets/splash/launch-1536x2048.png → ...public/assets/splash/launch-1536x2048.png
diff --git a/src/assets/splash/launch-1668x2224.png → ...public/assets/splash/launch-1668x2224.png b/src/assets/splash/launch-1668x2224.png → ...public/assets/splash/launch-1668x2224.png
diff --git a/src/assets/splash/launch-2048x2732.png → ...public/assets/splash/launch-2048x2732.png b/src/assets/splash/launch-2048x2732.png → ...public/assets/splash/launch-2048x2732.png
diff --git a/src/assets/splash/launch-640x1136.png → src/public/assets/splash/launch-640x1136.png b/src/assets/splash/launch-640x1136.png → src/public/assets/splash/launch-640x1136.png
diff --git a/src/assets/splash/launch-750x1294.png → src/public/assets/splash/launch-750x1294.png b/src/assets/splash/launch-750x1294.png → src/public/assets/splash/launch-750x1294.png
diff --git a/src/scripts/demo-modal.js b/src/scripts/demo-modal.js
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,21 @@
+import path from 'path';
+
+import {VitePWA} from 'vite-plugin-pwa';
+import manifestJson from './src/manifest.json';
+
+export default {
+  root: path.join(__dirname, 'src'),
+  build: {
+    outDir: path.join(__dirname, 'dist'),
+    assetsDir: 'build',
+    emptyOutDir: true
+  },
+  define: {
+    'process.env': {}
+  },
+  plugins: [VitePWA({
+    manifest: {
+      ...manifestJson
+    }
+  })]
+};