feat: create tauri-runtime package

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
jellyfin · Jan 11, 2025 · c11c26c · c11c26c
1 parent 46cb7c9
commit c11c26c
Show file tree

Hide file tree

Showing 17 changed files with 371 additions and 205 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -10,8 +10,6 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>Jellyfin Vue</title>
-    <script type="module" src="src/splashscreen.ts" fetchpriority="high"></script>
-    <script type="module" src="src/main.ts"></script>
   </head>
   <body class="j-splash">
     <img src="./icon.svg" alt="Jellyfin Logo" loading="eager" decoding="sync">

diff --git a/frontend/package.json b/frontend/package.json
@@ -8,6 +8,10 @@
   "imports": {
     "#/*": "./src/*"
   },
+  "exports": {
+    ".": "./src/main.ts",
+    "./vite-config": "./vite.config.ts"
+  },
   "scripts": {
     "analyze:bundle": "vite build --mode analyze:bundle",
     "analyze:cycles": "vite build --mode analyze:cycles",

diff --git a/frontend/scripts/paths.ts b/frontend/scripts/paths.ts
@@ -1,3 +1,3 @@
 import { resolve } from 'node:path';
 
-export const localeFilesFolder = resolve('locales/**');
+export const localeFilesFolder = resolve(import.meta.dirname, '../locales/**');
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -1,4 +1,4 @@
-import { join } from 'node:path';
+import { resolve } from 'node:path';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import Virtual from '@rollup/plugin-virtual';
 import VueDevTools from 'vite-plugin-vue-devtools';
@@ -16,7 +16,7 @@ import { defineConfig } from 'vite';
  * TODO: Replace with @jellyfin-vue/vite-plugins after https://github.com/vitejs/vite/issues/5370
  * is fixed
  */
-import { BundleAnalysis, BundleChunking, BundleSizeReport } from '../packages/vite-plugins/src';
+import { JBundleAnalysis, JBundleChunking, JBundleSizeReport, JMonorepo } from '../packages/vite-plugins/src';
 import { JellyfinVueUIToolkit } from '../packages/ui-toolkit/src/resolver';
 import virtualModules from './scripts/virtual-modules';
 import { localeFilesFolder } from './scripts/paths';
@@ -26,14 +26,24 @@ export default defineConfig({
   base: './',
   cacheDir: '../node_modules/.cache/vite',
   plugins: [
-    BundleAnalysis(),
-    BundleChunking(),
-    BundleSizeReport(),
+    JBundleAnalysis(),
+    JBundleChunking(),
+    JBundleSizeReport(),
+    JMonorepo(import.meta.dirname, {
+      splashscreen: {
+        'fetch-priority': 'high'
+      }
+    }),
     Virtual(virtualModules),
     VueRouter({
-      dts: './types/global/routes.d.ts',
+      dts: resolve(import.meta.dirname, 'types/global/routes.d.ts'),
       importMode: 'sync',
-      routeBlockLang: 'yaml'
+      routeBlockLang: 'yaml',
+      routesFolder: [
+        {
+          src: resolve(import.meta.dirname, 'src/pages')
+        }
+      ]
     }),
     Vue({
       template: {
@@ -44,7 +54,8 @@ export default defineConfig({
     }),
     // This plugin allows to autoimport Vue components
     Components({
-      dts: './types/global/components.d.ts',
+      dirs: [resolve(import.meta.dirname, 'src/components')],
+      dts: resolve(import.meta.dirname, 'types/global/components.d.ts'),
       /**
        * The icons resolver finds icons components from 'unplugin-icons' using this convenction:
        * {prefix}-{collection}-{icon} e.g. <i-mdi-thumb-up />
@@ -78,18 +89,15 @@ export default defineConfig({
      * See main.ts for an explanation of this target
      */
     target: 'esnext',
-    /**
-     * Disable chunk size warnings
-     */
     cssCodeSplit: true,
     cssMinify: 'lightningcss',
     modulePreload: false,
     reportCompressedSize: false,
     rollupOptions: {
       input: {
-        splashscreen: join(import.meta.dirname, 'src/splashscreen.ts'),
-        main: join(import.meta.dirname, 'src/main.ts'),
-        index: join(import.meta.dirname, 'index.html')
+        splashscreen: resolve(import.meta.dirname, 'src/splashscreen.ts'),
+        main: resolve(import.meta.dirname, 'src/main.ts'),
+        index: resolve(import.meta.dirname, 'index.html')
       },
       output: {
         validate: true

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/configs/src/lint/rules/base.ts b/packages/configs/src/lint/rules/base.ts
@@ -1,4 +1,4 @@
-import { join, basename } from 'node:path';
+import { basename, resolve } from 'node:path';
 import { spawnSync } from 'node:child_process';
 import type { Linter } from 'eslint';
 import { findUpSync } from 'find-up-simple';
@@ -35,7 +35,7 @@ export function getBaseConfig(packageName: string, forceCache = !CI_environment,
     const newArgs = process.argv.slice(1);
 
     if (forceCache && !(newArgs.includes('--cache') && newArgs.includes('--cache-location'))) {
-      const cacheLocation = join(findUpSync('node_modules', { type: 'directory' }) ?? '', '.cache/eslint', packageName.replace('/', '_'));
+      const cacheLocation = resolve(findUpSync('node_modules', { type: 'directory' }) ?? '', '.cache/eslint', packageName.replace('/', '_'));
 
       newArgs.push('--cache', '--cache-location', cacheLocation);
       console.log(`[@jellyfin-vue/configs/lint] (${packageName}) Force enabling caching for this run`);

diff --git a/packages/tauri-runtime/entrypoint.ts b/packages/tauri-runtime/entrypoint.ts
@@ -0,0 +1,9 @@
+import './src/main.ts';
+/**
+ * The Tauri-specific code must be loaded before the frontend code to ensure that
+ * all the polyfills for the runtime have been loaded
+ * before the frontend code is executed.
+ *
+ * THIS IMPORT ALWAYS NEEDS TO BE THE LAST IMPORT IN THIS FILE
+ */
+import '@jellyfin-vue/frontend';
diff --git a/packages/tauri-runtime/eslint.config.ts b/packages/tauri-runtime/eslint.config.ts
@@ -0,0 +1,9 @@
+import type { Linter } from 'eslint';
+import { getBaseConfig, getNodeFiles, getTSVueConfig, tsFiles } from '@jellyfin-vue/configs/lint';
+import pkg from './package.json' with { type: 'json' };
+
+export default [
+  ...getBaseConfig(pkg.name),
+  ...getTSVueConfig(false, import.meta.dirname),
+  ...getNodeFiles(tsFiles)
+] satisfies Linter.Config[];
diff --git a/packages/tauri-runtime/package.json b/packages/tauri-runtime/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@jellyfin-vue/tauri-runtime",
+  "type": "module",
+  "description": "The frontend including tauri-specific runtime code",
+  "scripts": {
+    "analyze:bundle": "vite build --mode analyze:bundle",
+    "analyze:cycles": "vite build --mode analyze:cycles",
+    "lint": "eslint . --flag unstable_ts_config",
+    "lint:fix": "eslint . --fix --flag unstable_ts_config",
+    "lint:inspect": "eslint-config-inspector",
+    "build": "vite build",
+    "check": "npm run lint && npm run check:types",
+    "check:types": "vue-tsc",
+    "start": "vite",
+    "serve": "vite preview",
+    "prod": "npm run build && npm run serve",
+    "clean": "git clean -fxd"
+  },
+  "devDependencies": {
+    "@jellyfin-vue/configs": "*",
+    "vite": "6.0.7"
+  },
+  "dependencies": {
+    "@jellyfin-vue/frontend": "*"
+  }
+}
diff --git a/packages/tauri-runtime/src/main.ts b/packages/tauri-runtime/src/main.ts
diff --git a/packages/tauri-runtime/tsconfig.json b/packages/tauri-runtime/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@jellyfin-vue/configs/typescript",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+    "coverage"
+  ],
+  "include": [
+    "**/*.ts"
+  ]
+}
diff --git a/packages/tauri-runtime/vite.config.ts b/packages/tauri-runtime/vite.config.ts
@@ -0,0 +1,33 @@
+import { resolve } from 'node:path';
+import { defineConfig, mergeConfig } from 'vite';
+// @ts-expect-error - This error will be fixed once the Vite team adds monorepo support for config files
+import BaseConfig from '../../frontend/vite.config.ts';
+
+const host = process.env.TAURI_DEV_HOST;
+
+export default defineConfig(
+  mergeConfig(BaseConfig, {
+    // prevent vite from obscuring rust errors
+    clearScreen: false,
+    build: {
+      outDir: resolve(import.meta.dirname, 'dist'),
+      rollupOptions: {
+        input: {
+          main: resolve(import.meta.dirname, 'entrypoint.ts')
+        }
+      },
+      // don't minify for debug builds
+      minify: process.env.TAURI_ENV_DEBUG ? false : 'esbuild',
+      // produce sourcemaps for debug builds
+      sourcemap: !!process.env.TAURI_ENV_DEBUG
+    },
+    server: {
+    // Tauri expects a fixed port, fail if that port is not available
+      strictPort: true,
+      // if the host Tauri is expecting is set, use it
+      ...(host ? { host } : {})
+    },
+    // Env variables starting with the item of `envPrefix` will be exposed in tauri's source code through `import.meta.env`.
+    envPrefix: ['VITE_', 'TAURI_ENV_*']
+  })
+);