feat: create tauri-runtime package

Signed-off-by: Fernando Fernández <[email protected]>

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",

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/**');

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';
@@ -31,9 +31,14 @@ export default defineConfig({
     BundleSizeReport(),
     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 +49,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 />
@@ -87,9 +93,9 @@ export default defineConfig({
     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

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`);

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';

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[];

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": "*"
+  }
+}

packages/tauri-runtime/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@jellyfin-vue/configs/typescript",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+    "coverage"
+  ],
+  "include": [
+    "**/*.ts"
+  ]
+}

packages/tauri-runtime/vite.config.ts

@@ -0,0 +1,18 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite';
+// @ts-expect-error - This error will be fixed once the Vite team adds monorepo support for config files
+import OriginalViteConfig from '../../frontend/vite.config.ts';
+
+export default defineConfig({
+  ...OriginalViteConfig,
+  build: {
+    ...OriginalViteConfig.build,
+    rollupOptions: {
+      ...OriginalViteConfig.build?.rollupOptions,
+      input: {
+        ...OriginalViteConfig.build?.rollupOptions?.input,
+        main: resolve(import.meta.dirname, './entrypoint.ts')
+      }
+    }
+  }
+});

packages/vite-plugins/src/index.ts

@@ -1,4 +1,4 @@
-import { basename, join } from 'node:path';
+import { basename, resolve } from 'node:path';
 import { globSync } from 'node:fs';
 import { lstat, rename, rm } from 'node:fs/promises';
 import type { LiteralUnion } from 'type-fest';
@@ -18,7 +18,7 @@ const defaultConfig = { build: { outDir: 'dist' } };
  */
 export function BundleAnalysis(): Plugin {
   let mode: LiteralUnion<'analyze:bundle' | 'analyze:cycles', string>;
-  const report_filename = () => join(defaultConfig.build.outDir, 'bundle-report.html');
+  const report_filename = () => resolve(defaultConfig.build.outDir, 'bundle-report.html');
   const warnings: RollupLog[] = [];
 
   return {
@@ -69,9 +69,9 @@ export function BundleAnalysis(): Plugin {
           throw new Error('There are circular dependencies');
         }
       } else if (mode === 'analyze:bundle') {
-        await rename(report_filename(), join(defaultConfig.build.outDir, 'index.html'));
+        await rename(report_filename(), resolve(defaultConfig.build.outDir, 'index.html'));
 
-        for (const file of globSync(join(defaultConfig.build.outDir, '**/*'))) {
+        for (const file of globSync(resolve(defaultConfig.build.outDir, '**/*'))) {
           if (!file.endsWith('index.html')) {
             await rm(file, { force: true, recursive: true });
           }