feat(tauri) use config as JSON (#214)

* feat(tauri.js): move to typescript

* fix(tauri.js): properly export api as commonjs

* feat(tauri.js): convert tauricon to typescript

* fix(tauri.js/tauricon): type error

* chore(tauri.js/package): update yarn.lock

* chore(tauri.js/package): add build/pretest scripts

* refactor(tauri.js/template): remove duplicate types

* feat(tauri.js): use tauri.conf.json instead of .js

* feat(tauri) read config using tauri.conf.json

* fix(tauri) read devPath index.html from distDir

* chore(examples) move to conf.json

* chore(tauri.js) remove todo

* fix(ci) TAURI_DIR env variable

* fix(examples) move svelte-app config to tauri.conf.json

* fix(examples): line endings tauri.conf.json

* addition to previous commit

* fix(test): EOF in tauri.conf.json

Co-authored-by: Noah Klayman <noahklayman@gmail.com>
Co-authored-by: nothingismagick <drthompsonsmagickindustries@gmail.com>

cli/tauri.js/.gitignore

@@ -71,7 +71,7 @@ config.json
 target
 
 
-# doing this because of how our tests currently (naively) drop the tauri.conf.js in that folder
+# doing this because of how our tests currently (naively) drop the tauri.conf.json in that folder
 # todo: needs a proper fic
-tauri.conf.js
+tauri.conf.json
 src-tauri

cli/tauri.js/bin/tauri-init.js

@@ -25,7 +25,7 @@ const argv = parseArgs(process.argv.slice(2), {
 if (argv.help) {
   console.log(`
   Description
-    Inits the Tauri template. If Tauri cannot find the tauri.conf.js
+    Inits the Tauri template. If Tauri cannot find the tauri.conf.json
     it will create one.
   Usage
     $ tauri init

cli/tauri.js/src/api/build.ts

@@ -1,9 +1,8 @@
 import { TauriConfig } from 'types'
 import merge from 'webpack-merge'
 import * as entry from '../entry'
-import * as generator from '../generator'
 import { tauriDir } from '../helpers/app-paths'
-import getTauriConfig from '../helpers/tauri-config'
+const getTauriConfig = require('../helpers/tauri-config')
 import Runner from '../runner'
 
 module.exports = async (config: TauriConfig): Promise<void> => {
@@ -19,7 +18,6 @@ module.exports = async (config: TauriConfig): Promise<void> => {
     ) as TauriConfig
   )
 
-  generator.generate(tauriConfig.tauri)
   entry.generate(tauriDir, tauriConfig)
 
   return tauri.build(tauriConfig)

cli/tauri.js/src/api/dev.ts

@@ -1,9 +1,8 @@
 import { TauriConfig } from 'types'
 import merge from 'webpack-merge'
 import * as entry from '../entry'
-import * as generator from '../generator'
 import { tauriDir } from '../helpers/app-paths'
-import getTauriConfig from '../helpers/tauri-config'
+const getTauriConfig = require('../helpers/tauri-config')
 import Runner from '../runner'
 
 module.exports = async (config: TauriConfig): Promise<void> => {
@@ -20,7 +19,6 @@ module.exports = async (config: TauriConfig): Promise<void> => {
     ) as TauriConfig
   )
 
-  generator.generate(tauriConfig.tauri)
   entry.generate(tauriDir, tauriConfig)
 
   return tauri.run(tauriConfig)

cli/tauri.js/src/api/init.ts

@@ -1,14 +1,16 @@
 import { inject } from '../template'
+import { TauriConfig } from 'types'
 
 module.exports = (args: {
   directory: string
   force: false | 'conf' | 'template' | 'all'
   logging: boolean
-  tauriPath?: string
+  tauriPath?: string,
+  customConfig?: Partial<TauriConfig>
 }): boolean => {
   return inject(args.directory, 'all', {
     force: args.force,
     logging: args.logging,
     tauriPath: args.tauriPath
-  })
+  }, args.customConfig)
 }

cli/tauri.js/src/generator.ts

@@ -1,11 +0,0 @@
-import { writeFileSync } from 'fs-extra'
-import path from 'path'
-import { tauriDir } from './helpers/app-paths'
-import { TauriConfig } from './types/config'
-
-export const generate = (tauriConfig: TauriConfig['tauri']): void => {
-  const { bundle, ...cfg } = tauriConfig
-  const outDir = tauriDir
-  writeFileSync(path.join(outDir, 'config.json'), JSON.stringify(cfg))
-  writeFileSync(path.join(outDir, 'bundle.json'), JSON.stringify(bundle))
-}

cli/tauri.js/src/helpers/app-paths.ts

@@ -7,7 +7,7 @@ const getAppDir = (): string => {
 
   // only go up three folders max
   while (dir.length > 0 && dir.endsWith(sep) && count <= 2) {
-    if (existsSync(join(dir, 'tauri.conf.js'))) {
+    if (existsSync(join(dir, 'tauri.conf.json'))) {
       return dir
     }
     count++

cli/tauri.js/src/helpers/tauri-config.ts

@@ -1,4 +1,5 @@
 import { existsSync } from 'fs-extra'
+import { resolve } from 'path'
 import { TauriConfig } from 'types'
 import merge from 'webpack-merge'
 import logger from '../helpers/logger'
@@ -6,20 +7,20 @@ import * as appPaths from './app-paths'
 
 const error = logger('ERROR:', 'red')
 
-export default (cfg: Partial<TauriConfig>): TauriConfig => {
+module.exports = (cfg: Partial<TauriConfig>): TauriConfig => {
   const pkgPath = appPaths.resolve.app('package.json')
-  const tauriConfPath = appPaths.resolve.app('tauri.conf.js')
+  const tauriConfPath = appPaths.resolve.tauri('tauri.conf.json')
   if (!existsSync(pkgPath)) {
     error("Could not find a package.json in your app's directory.")
     process.exit(1)
   }
   if (!existsSync(tauriConfPath)) {
     error(
-      "Could not find a tauri config (tauri.conf.js) in your app's directory."
+      "Could not find a tauri config (tauri.conf.json) in your app's directory."
     )
     process.exit(1)
   }
-  const tauriConf = __non_webpack_require__(tauriConfPath)(cfg.ctx)
+  const tauriConf = __non_webpack_require__(tauriConfPath)
   const pkg = __non_webpack_require__(pkgPath)
 
   const config = merge(
@@ -52,6 +53,14 @@ export default (cfg: Partial<TauriConfig>): TauriConfig => {
     cfg as any
   ) as TauriConfig
 
+  const runningDevServer = config.build.devPath && config.build.devPath.startsWith('http')
+  if (!runningDevServer) {
+    config.build.devPath = resolve(appPaths.tauriDir, config.build.devPath)
+  }
+  if (config.build.distDir) {
+    config.build.distDir = resolve(appPaths.tauriDir, config.build.distDir)
+  }
+
   process.env.TAURI_DIST_DIR = appPaths.resolve.app(config.build.distDir)
   process.env.TAURI_DIR = appPaths.tauriDir
 

cli/tauri.js/src/runner.ts

@@ -1,17 +1,16 @@
 import Inliner from '@tauri-apps/tauri-inliner'
 import toml from '@tauri-apps/toml'
 import chokidar, { FSWatcher } from 'chokidar'
-import { existsSync, readFileSync, writeFileSync } from 'fs-extra'
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs-extra'
 import { JSDOM } from 'jsdom'
 import debounce from 'lodash.debounce'
 import path from 'path'
 import * as entry from './entry'
-import * as generator from './generator'
 import { appDir, tauriDir } from './helpers/app-paths'
 import logger from './helpers/logger'
 import onShutdown from './helpers/on-shutdown'
 import { spawn } from './helpers/spawn'
-import getTauriConfig from './helpers/tauri-config'
+const getTauriConfig = require('./helpers/tauri-config')
 import { TauriConfig } from './types/config'
 
 const log = logger('app:tauri', 'green')
@@ -52,14 +51,11 @@ class Runner {
     let inlinedAssets: string[] = []
 
     if (!runningDevServer) {
-      inlinedAssets = await this.__parseHtml(cfg, path.resolve(appDir, devPath))
+      inlinedAssets = await this.__parseHtml(cfg, devPath)
     }
 
-    generator.generate({
-      devPath: runningDevServer ? devPath : path.resolve(appDir, devPath),
-      inlinedAssets,
-      ...cfg.tauri
-    })
+    process.env.TAURI_INLINED_ASSSTS = inlinedAssets.join('|')
+
     entry.generate(tauriDir, cfg)
 
     this.devPath = devPath
@@ -127,10 +123,8 @@ class Runner {
 
     const inlinedAssets = await this.__parseHtml(cfg, cfg.build.distDir)
 
-    generator.generate({
-      inlinedAssets,
-      ...cfg.tauri
-    })
+    process.env.TAURI_INLINED_ASSSTS = inlinedAssets.join('|')
+  
     entry.generate(tauriDir, cfg)
 
     const features = [
@@ -163,6 +157,7 @@ class Runner {
 
   async __parseHtml(cfg: TauriConfig, indexDir: string): Promise<string[]> {
     const inlinedAssets: string[] = []
+    const distDir = cfg.build.distDir
 
     return new Promise((resolve, reject) => {
       const distIndexPath = path.join(indexDir, 'index.html')
@@ -184,8 +179,6 @@ class Runner {
           })
 
           const tauriScript = document.createElement('script')
-          // TODO: should this be read as a buffer or a utf8 string?
-          // TODO: is text the write attribute to set?
           // @ts-ignore
           tauriScript.text = readFileSync(path.join(tauriDir, 'tauri.js'))
           document.body.insertBefore(tauriScript, document.body.firstChild)
@@ -198,8 +191,12 @@ class Runner {
             document.head.appendChild(cspTag)
           }
 
+          if (!existsSync(distDir)) {
+            mkdirSync(distDir, { recursive: true })
+          }
+
           writeFileSync(
-            path.join(indexDir, 'index.tauri.html'),
+            path.join(distDir, 'index.tauri.html'),
             dom.serialize()
           )
           resolve(inlinedAssets)

cli/tauri.js/src/template/defaultConfig.ts

@@ -0,0 +1,31 @@
+export default {
+  build: {
+    distDir: 'dist',
+    devPath: 'http://localhost:4000'
+  },
+  ctx: {},
+  tauri: {
+    embeddedServer: {
+      active: true
+    },
+    bundle: {
+      active: true
+    },
+    whitelist: {
+      all: false
+    },
+    window: {
+      title: 'Tauri App'
+    },
+    security: {
+      csp:
+        "default-src data: filesystem: ws: http: https: 'unsafe-eval' 'unsafe-inline'"
+    },
+    edge: {
+      active: true
+    },
+    automaticStart: {
+      active: true
+    }
+  }
+}

cli/tauri.js/src/template/index.ts

@@ -1,7 +1,10 @@
-import { copySync, existsSync, removeSync } from 'fs-extra'
+import { existsSync, removeSync, writeFileSync } from 'fs-extra'
 import { join, normalize, resolve } from 'path'
-import copyTemplates from './helpers/copy-templates'
-import logger from './helpers/logger'
+import { TauriConfig } from 'types'
+import merge from 'webpack-merge'
+import copyTemplates from '../helpers/copy-templates'
+import logger from '../helpers/logger'
+import defaultConfig from './defaultConfig'
 
 const log = logger('app:tauri', 'green')
 const warn = logger('app:tauri (template)', 'red')
@@ -15,22 +18,32 @@ type InjectionType = 'conf' | 'template' | 'all'
 
 const injectConfFile = (
   injectPath: string,
-  { force, logging }: InjectOptions
+  { force, logging }: InjectOptions,
+  customConfig: Partial<TauriConfig> = {}
 ): boolean | undefined => {
-  const path = join(injectPath, 'tauri.conf.js')
+  const path = join(injectPath, 'tauri.conf.json')
   if (existsSync(path) && force !== 'conf' && force !== 'all') {
-    warn(`tauri.conf.js found in ${path}
+    warn(`tauri.conf.json found in ${path}
   Run \`tauri init --force conf\` to overwrite.`)
     if (!force) return false
   } else {
     try {
       removeSync(path)
-      copySync(resolve(__dirname, '../templates/tauri.conf.js'), path)
+      const finalConf = merge(defaultConfig as any, customConfig as any) as {
+        [index: string]: any
+      }
+      Object.keys(finalConf).forEach(key => {
+        // Options marked `null` should be removed
+        if (finalConf[key] === null) {
+          delete finalConf[key]
+        }
+      })
+      writeFileSync(path, JSON.stringify(finalConf, undefined, 2))
     } catch (e) {
       if (logging) console.log(e)
       return false
     } finally {
-      if (logging) log('Successfully wrote tauri.conf.js')
+      if (logging) log('Successfully wrote tauri.conf.json')
     }
   }
 }
@@ -70,18 +83,19 @@ Run \`tauri init --force template\` to overwrite.`)
 const inject = (
   injectPath: string,
   type: InjectionType,
-  { force = false, logging = false, tauriPath }: InjectOptions
+  { force = false, logging = false, tauriPath }: InjectOptions,
+  customConfig?: Partial<TauriConfig>
 ): boolean => {
   if (typeof type !== 'string' || typeof injectPath !== 'string') {
     warn('- internal error. Required params missing.')
     return false
   }
-  if (type === 'conf' || type === 'all') {
-    injectConfFile(injectPath, { force, logging })
-  }
   if (type === 'template' || type === 'all') {
     injectTemplate(injectPath, { force, logging, tauriPath })
   }
+  if (type === 'conf' || type === 'all') {
+    injectConfFile(join(injectPath, 'src-tauri'), { force, logging }, customConfig)
+  }
   return true
 }
 

cli/tauri.js/templates/src-tauri/Cargo.toml

@@ -15,7 +15,6 @@ build = "src/build.rs"
 serde_json = "1.0.41"
 serde = "1.0.104"
 serde_derive = "1.0.104"
-tiny_http = "0.6"
 tauri = <%= tauriDep || `{ version = "0.2.0" }` %>
 
 [target."cfg(windows)".build-dependencies]

cli/tauri.js/templates/tauri.conf.js

@@ -1,35 +0,0 @@
-const path = require('path')
-const distDir = path.resolve(__dirname, './dist')
-
-module.exports = function () {
-  return {
-    build: {
-      distDir: distDir,
-      devPath: 'http://localhost:4000' // devServer URL or html dir
-    },
-    ctx: {},
-    tauri: {
-      embeddedServer: {
-        active: true
-      },
-      bundle: {
-        active: true
-      },
-      whitelist: {
-        all: false
-      },
-      window: {
-        title: 'Tauri App'
-      },
-      security: {
-        csp: 'default-src data: filesystem: ws: http: https: \'unsafe-eval\' \'unsafe-inline\''
-      },
-      edge: {
-        active: true
-      },
-      automaticStart: {
-        active: true
-      }
-    }
-  }
-}

cli/tauri.js/templates/tauri.esm.js

@@ -4,7 +4,7 @@
  *  * THIS FILE IS GENERATED AUTOMATICALLY.
  * DO NOT EDIT.
  *
- * Please whitelist these API functions in tauri.conf.js
+ * Please whitelist these API functions in tauri.conf.json
  *
  **/
 
@@ -14,7 +14,7 @@
  * @module tauri
  * @description This API interface makes powerful interactions available
  * to be run on client side applications. They are opt-in features, and
- * must be enabled in tauri.conf.js
+ * must be enabled in tauri.conf.json
  *
  * Each binding MUST provide these interfaces in order to be compliant,
  * and also whitelist them based upon the developer's settings.
@@ -35,12 +35,12 @@ const uid = function () {
 /**
  * @name __whitelistWarning
  * @description Present a stylish warning to the developer that their API
- * call has not been whitelisted in tauri.conf.js
+ * call has not been whitelisted in tauri.conf.json
  * @param {String} func - function name to warn
  * @private
  */
 const __whitelistWarning = function (func) {
-  console.warn('%c[Tauri] Danger \ntauri.' + func + ' not whitelisted 💣\n%c\nAdd to tauri.conf.js: \n\ntauri: \n  whitelist: { \n    ' + func + ': true \n\nReference: https://tauri-apps.org/docs/api#' + func , 'background: red; color: white; font-weight: 800; padding: 2px; font-size:1.5em', ' ')
+  console.warn('%c[Tauri] Danger \ntauri.' + func + ' not whitelisted 💣\n%c\nAdd to tauri.conf.json: \n\ntauri: \n  whitelist: { \n    ' + func + ': true \n\nReference: https://tauri-apps.org/docs/api#' + func , 'background: red; color: white; font-weight: 800; padding: 2px; font-size:1.5em', ' ')
 }
 <% } %>
 

cli/tauri.js/templates/tauri.js

@@ -4,7 +4,7 @@
  *  * THIS FILE IS GENERATED AUTOMATICALLY.
  * DO NOT EDIT.
  *
- * Please whitelist these API functions in tauri.conf.js
+ * Please whitelist these API functions in tauri.conf.json
  *
  **/
 
@@ -12,7 +12,7 @@
  * @module tauri
  * @description This API interface makes powerful interactions available
  * to be run on client side applications. They are opt-in features, and
- * must be enabled in tauri.conf.js
+ * must be enabled in tauri.conf.json
  *
  * Each binding MUST provide these interfaces in order to be compliant,
  * and also whitelist them based upon the developer's settings.

cli/tauri.js/webpack.config.js

@@ -6,7 +6,8 @@ module.exports = {
     build: './src/api/build.ts',
     dev: './src/api/dev.ts',
     init: './src/api/init.ts',
-    tauricon: './src/api/tauricon.ts'
+    tauricon: './src/api/tauricon.ts',
+    'tauri-config': './src/helpers/tauri-config.ts'
   },
   mode: process.env.NODE_ENV || 'development',
   devtool: 'source-map',