feat: add conditional compilation

DimensionDev · Sep 23, 2019 · c45b2b2 · c45b2b2
1 parent 7bd6269
commit c45b2b2
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 13 deletions.
diff --git a/config-overrides/index.js b/config-overrides/index.js
@@ -122,6 +122,26 @@ function override(config, env) {
         config.plugins.push(new WebExtensionHotLoadPlugin({ sourceDir: dist, target: 'firefox-android' }))
     }
 
+    // Setting conditional compilations
+    {
+        /** @type {'Chromium' | 'Firefox' | 'WKWebview' | undefined} */
+        let buildTarget = undefined
+        /** @type {'android' | 'desktop' | 'GeckoView' | undefined} */
+        let firefoxVariant = undefined
+        if (target.Chromium) buildTarget = 'Chromium'
+        if (target.Firefox) buildTarget = 'Firefox'
+        if (target.FirefoxDesktop) firefoxVariant = 'desktop'
+        if (target.FirefoxForAndroid) firefoxVariant = 'android'
+        if (target.StandaloneGeckoView) firefoxVariant = 'GeckoView'
+        if (target.WKWebview) buildTarget = 'WKWebview'
+        config.plugins.push(
+            new webpack.DefinePlugin({
+                'process.env.target': typeof buildTarget === 'string' ? JSON.stringify(buildTarget) : 'undefined',
+                firefoxVariant: typeof firefoxVariant === 'string' ? JSON.stringify(firefoxVariant) : 'undefined',
+            }),
+        )
+    }
+
     // Manifest modifies
     const manifestFile = require('../src/manifest.json')
     if (target.StandaloneGeckoView) {

diff --git a/config-overrides/template.html b/config-overrides/template.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <script src="/polyfill/browser-polyfill.min.js"></script>
-    <script src="/polyfill/asmcrypto.js"></script>
-    <script src="/firefoxFix.js"></script>
-</head>
-<body></body>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+        <script src="/polyfill/browser-polyfill.min.js"></script>
+        <script src="/polyfill/asmcrypto.js"></script>
+        <script src="/firefoxFix.js"></script>
+        <script src="/env.js"></script>
+    </head>
+    <body></body>
 </html>
diff --git a/public/env.js b/public/env.js
@@ -0,0 +1,26 @@
+/**
+ * Currently we don't have so much code that need conditional compilation.
+ *
+ * So let's set process.env.target in runtime and reduce the compile time.
+ */
+if (!globalThis.process) {
+    globalThis.process = {}
+}
+if (!globalThis.process.env) {
+    globalThis.process.env = {}
+}
+if (!globalThis.process.env.target) {
+    const isFirefox = navigator.userAgent.match('Firefox')
+    const isChrome = navigator.appVersion.match(/(Chromium|Chrome)/)
+    const isiOS = navigator.appVersion.toLowerCase().match('ios')
+    // 'Chromium' | 'Firefox' | 'WKWebview' | undefined
+    globalThis.process.env.target = isFirefox ? 'Firefox' : isChrome ? 'Chromium' : isiOS ? 'WKWebview' : undefined
+}
+if (globalThis.process.env.target === 'Firefox') {
+    // firefoxVariant: 'android' | 'desktop' | 'GeckoView' | undefined
+    const isMobile = navigator.userAgent.match(/Mobile|mobile/)
+    if (!globalThis.process.env.firefoxVariant) {
+        // TODO: How can we know if it is GeckoView in runtime?
+        globalThis.process.env.firefoxVariant = isMobile ? 'desktop' : 'android'
+    }
+}
diff --git a/src/components/Welcomes/1b1.tsx b/src/components/Welcomes/1b1.tsx
@@ -29,7 +29,7 @@ import LanguageIcon from '@material-ui/icons/Language'
 import WelcomeContainer from './WelcomeContainer'
 import Navigation from './Navigation/Navigation'
 import QRScanner from './QRScanner'
-import { isWKWebkit, iOSHost } from '../../utils/iOS-RPC'
+import { hasWKWebkitRPCHandlers, iOSHost } from '../../utils/iOS-RPC'
 import { useAsync } from '../../utils/components/AsyncComponent'
 import {
     BackupJSONFileVersion1,
@@ -136,7 +136,7 @@ export default function Welcome({ back, restore: originalRestore }: Props) {
                 aria-label="icon tabs example">
                 <Tab icon={<FolderOpen />} aria-label={geti18nString('welcome_1b_tabs_backup')} />
                 <Tab
-                    disabled={!('BarcodeDetector' in window || isWKWebkit)}
+                    disabled={!('BarcodeDetector' in window || hasWKWebkitRPCHandlers)}
                     icon={<Camera />}
                     aria-label={geti18nString('welcome_1b_tabs_qr')}
                 />
@@ -194,7 +194,13 @@ export default function Welcome({ back, restore: originalRestore }: Props) {
             )}
             <main className={classes.main}>
                 {tab === 0 ? FileUI() : null}
-                {tab === 1 ? isWKWebkit ? <WKWebkitQR onScan={restore} onQuit={() => setTab(0)} /> : QR() : null}
+                {tab === 1 ? (
+                    hasWKWebkitRPCHandlers ? (
+                        <WKWebkitQR onScan={restore} onQuit={() => setTab(0)} />
+                    ) : (
+                        QR()
+                    )
+                ) : null}
                 {tab === 2 ? TextArea() : null}
 
                 {tab === 2 ? (

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1 +1,8 @@
 /// <reference types="web-ext-types" />
+
+declare namespace NodeJS {
+    interface ProcessEnv {
+        readonly target: 'Chromium' | 'Firefox' | 'WKWebview' | undefined
+        readonly firefoxVariant: 'android' | 'desktop' | 'GeckoView' | undefined
+    }
+}
diff --git a/src/utils/iOS-RPC.ts b/src/utils/iOS-RPC.ts
@@ -13,7 +13,8 @@ export interface ThisSideImplementation {}
 
 const key = 'maskbookjsonrpc'
 const _window: any = globalThis
-export const isWKWebkit = _window.webkit && _window.webkit.messageHandlers && _window.webkit.messageHandlers[key]
+export const hasWKWebkitRPCHandlers =
+    _window.webkit && _window.webkit.messageHandlers && _window.webkit.messageHandlers[key]
 class iOSWebkitChannel {
     constructor() {
         document.addEventListener(key, e => {
@@ -31,7 +32,10 @@ class iOSWebkitChannel {
     }
     emit(_: string, data: any): void {
         const _window: any = window
-        if (isWKWebkit) _window.webkit.messageHandlers[key].postMessage(data)
+        if (hasWKWebkitRPCHandlers) _window.webkit.messageHandlers[key].postMessage(data)
+        else {
+            throw new TypeError('Run in the wrong environment. Excepts window.webkit.messageHandlers')
+        }
     }
 }
 const ThisSideImplementation: ThisSideImplementation = {}