feat(nuxt): capacitor module (#205)

* initial commit

* capacitor changes

* fix: some capcitor changes

* chore: capacitor config structure changed

* feat: ios android fast conf to add project

* execSync

* fix: add android

* feat: Capacitor and ESLint configurations

* feat: add capacitor open commands to package.json

* feat: add support for iOS and Android in eslint.config.js and Capacitor module

* feat: plugins

* feat: android

* feat: capacitor runtime configuration

---------

Co-authored-by: productdevbook <hi@productdevbook.com>

Author: 0fatihyildiz

eslint.config.js

@@ -26,6 +26,8 @@ export default antfu(
       '**/templates.json',
       'packages-core/pergel/nuxt.js',
       '**/pergel/**',
+      '**/ios/**',
+      '**/android/**',
     ],
   },
   {

packages-core/cli/playground/pergel/README.json

@@ -17,6 +17,35 @@
         "devDependencies": {}
       }
     },
+    "capacitor": {
+      "comment-block": "If pergel cli is installed, you can run `pergel install` automatically to install",
+      "scripts": {
+        "capacitor:init": "npx cap init",
+        "capacitor:sync": "npx cap sync",
+        "capacitor:android": "npx cap android",
+        "capacitor:ios": "npx cap ios",
+        "generate": "nuxt generate"
+      },
+      "cli": {
+        "capacitor:init": "pergel module -c=true -s=capacitor:init -p=test -m=capacitor",
+        "capacitor:sync": "pergel module -c=true -s=capacitor:sync -p=test -m=capacitor",
+        "capacitor:android": "pergel module -c=true -s=capacitor:android -p=test -m=capacitor",
+        "capacitor:ios": "pergel module -c=true -s=capacitor:ios -p=test -m=capacitor",
+        "generate": "pergel module -s=generate -p=changeName -m=capacitor"
+      },
+      "env": {},
+      "packageJson": {
+        "dependencies": {
+          "@capacitor/cli": "^5.7.1"
+        },
+        "devDependencies": {},
+        "patches": {
+          "pnpm": {
+            "patchedDependencies": {}
+          }
+        }
+      }
+    },
     "lucia": {
       "comment-block-hpaj9e": "If pergel cli is installed, you can run `pergel install` automatically to install",
       "packageJson": {

packages-core/cli/playground/pergel/capacitor.config.ts

@@ -0,0 +1,12 @@
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.example.app',
+  appName: 'test',
+  webDir: 'dist',
+  server: {
+    androidScheme: 'https'
+  }
+};
+
+export default config;

packages/nuxt/package.json

@@ -78,10 +78,17 @@
   "devDependencies": {
     "@antfu/eslint-config": "^2.7.0",
     "@aws-sdk/client-ses": "^3.525.0",
+    "@capacitor/action-sheet": "^6.0.0-rc.0",
+    "@capacitor/android": "^6.0.0-rc.0",
+    "@capacitor/cli": "^6.0.0-rc.0",
+    "@capacitor/core": "^6.0.0-rc.0",
+    "@capacitor/ios": "^6.0.0-rc.0",
     "@faker-js/faker": "^8.4.1",
     "@graphql-yoga/urql-exchange": "^3.1.1",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
+    "@ionic/cli": "^7.2.0",
+    "@ionic/core": "^7.7.3",
     "@json2csv/node": "^7.0.6",
     "@lucia-auth/adapter-drizzle": "1.0.2",
     "@lucia-auth/adapter-postgresql": "3.1.0",
@@ -90,10 +97,12 @@
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.10.3",
     "@nuxt/test-utils": "^3.11.0",
+    "@nuxtjs/ionic": "^0.13.1",
     "@pergel/cli": "^0.8.1",
     "@pergel/module-box": "workspace:^",
     "@pergel/module-graphql": "workspace:^",
     "@pergel/module-s3": "workspace:^",
+    "@revenuecat/purchases-capacitor": "^7.5.3",
     "@types/node": "^20.11.24",
     "@types/node-cron": "^3.0.11",
     "@urql/core": "^4.2.3",

packages/nuxt/src/runtime/core/types/nuxtModule.ts

@@ -11,6 +11,7 @@ import type { IonicInterface, ResolvedIonicInterface } from '../../modules/ionic
 import type { EslintConfig, ResolvedEslintConfig } from '../../modules/eslint/types'
 import type { RenovateConfig, ResolvedRenovateConfig } from '../../modules/renovate/types'
 import type { ResolvedUrqlConfig, UrqlModuleOptions } from '../../modules/urql/types'
+import type { CapacitorOptions, ResolvedCapacitorOptions } from '../../modules/capacitor/types'
 import type { ResolvedPergelModuleOptions, UserModuleOptions } from './module'
 
 // @MODULE
@@ -25,6 +26,7 @@ export interface PergelNuxtModules {
   lucia?: true | (LuciaModuleOptions & UserModuleOptions)
   box?: true | (BoxOptions & UserModuleOptions)
   ionic?: true | IonicInterface
+  capacitor?: true | CapacitorOptions
   urql?: true | UrqlModuleOptions
   vitest?: true
   eslint?: true | EslintConfig
@@ -46,6 +48,7 @@ export interface ResolvedPergelNuxtModuleConfig<T> {
   vitest?: true | T
   eslint?: true | ResolvedEslintConfig
   renovate?: true | ResolvedRenovateConfig
+  capacitor?: true | ResolvedCapacitorOptions
 }
 
 export type PergelModuleNames = keyof PergelNuxtModules

packages/nuxt/src/runtime/modules/capacitor/index.ts

@@ -0,0 +1,162 @@
+import { existsSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { execSync } from 'node:child_process'
+import { logger as _logger } from '@nuxt/kit'
+import { definePergelModule } from '../../core/definePergel'
+import { generateModuleRuntimeConfig, generateModuleRuntimeConfigEnv } from '../../core/utils/moduleRuntimeConfig'
+import { generateProjectReadme } from '../../core/utils/generateYaml'
+import type { CapacitorModuleRuntimeConfig, CapacitorOptions } from '../capacitor/types'
+import type { ResolvedCapacitorOptions } from './types'
+
+export default definePergelModule<CapacitorOptions, ResolvedCapacitorOptions>({
+  meta: {
+    name: 'capacitor',
+    version: '0.0.1',
+    dependencies(options, nuxt) {
+      const deps = nuxt._pergel.pergelPackageJson
+      const defaultDeps = {
+        '@capacitor/core': deps['@capacitor/core'],
+        '@capacitor/ios': deps['@capacitor/ios'],
+        '@capacitor/android': deps['@capacitor/android'],
+      } as Record<string, string>
+
+      if (options.plugins.official) {
+        if (options.plugins.official.actionSheet)
+          defaultDeps['@capacitor/action-sheet'] = deps['@capacitor/action-sheet']
+      }
+
+      if (options.plugins.community) {
+        if (options.plugins.community.revenuecat)
+          defaultDeps['@revenuecat/purchases-capacitor'] = deps['@revenuecat/purchases-capacitor']
+      }
+
+      return {
+        ...defaultDeps,
+      }
+    },
+    devDependencies(_options, nuxt) {
+      const deps = nuxt._pergel.pergelPackageJson
+      return {
+        '@capacitor/cli': deps['@capacitor/cli'],
+      }
+    },
+  },
+  defaults: {
+    capacitorConfig: {
+      appName: 'My App',
+      appId: 'com.example.app',
+      webDir: 'dist',
+      plugins: {
+        SplashScreen: {
+          launchShowDuration: 0,
+        },
+      },
+    },
+    ios: false,
+    android: false,
+    plugins: {
+      official: {
+        actionSheet: false,
+      },
+      community: {
+        revenuecat: false,
+      },
+    },
+  },
+  async setup({ nuxt, options }) {
+    generateModuleRuntimeConfigEnv(nuxt, options, {
+      runTargetAndroidEmulator: undefined,
+      runTargetIOSSimulator: undefined,
+      runScheme: undefined,
+    })
+
+    const envData = generateModuleRuntimeConfig<CapacitorModuleRuntimeConfig>(nuxt, options, {
+      runTargetIOSSimulator: undefined,
+      runTargetAndroidEmulator: undefined,
+      runScheme: undefined,
+    }, true)
+
+    const capacitorConfig = `import { type CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = ${JSON.stringify(options.capacitorConfig, null, 2).replace(/"([^"]+)":/g, '$1:')}
+
+export default config;`
+    generateModuleRuntimeConfig(nuxt, options, {
+    })
+
+    nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {}
+    nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || []
+
+    if (!existsSync(resolve(nuxt.options.rootDir, 'capacitor.config.ts'))) {
+      writeFileSync(resolve(nuxt.options.rootDir, 'capacitor.config.ts'), capacitorConfig, {
+        encoding: 'utf8',
+      })
+    }
+
+    const { projectName, moduleName } = options
+
+    if (options.ios && !existsSync(resolve(nuxt.options.rootDir, 'ios'))) {
+      execSync(
+          `pnpm pergel module -s=capacitor:add:ios -p=${projectName} -m=${moduleName}`,
+          {
+            stdio: 'inherit',
+            cwd: nuxt.options.rootDir,
+          },
+      )
+      _logger.info(`iOS platform added to ${projectName}`)
+    }
+
+    if (options.android && !existsSync(resolve(nuxt.options.rootDir, 'android'))) {
+      execSync(
+          `pnpm pergel module -s=capacitor:add:android -p=${projectName} -m=${moduleName}`,
+          {
+            stdio: 'inherit',
+            cwd: nuxt.options.rootDir,
+          },
+      )
+      _logger.info(`Android platform added to ${projectName}`)
+    }
+
+    generateProjectReadme({
+      data: ({ addCommentBlock }) => ({
+        ...addCommentBlock('Script Commands'),
+        scripts: {
+          'capacitor:init': 'cap init',
+          'capacitor:sync': 'cap sync',
+          'capacitor:update': 'cap update',
+          'capacitor:ls': 'cap ls',
+          'capacitor:copy': 'cap copy',
+          'capacitor:add:android': 'cap add android',
+          'capacitor:add:ios': 'cap add ios',
+          'generate': 'nuxt generate',
+          'capacitor:open:android': 'cap open android',
+          'capacitor:open:ios': 'cap open ios',
+          'capacitor:ios:list': 'cap run ios --list',
+          'capacitor:android:list': 'cap run android --list',
+          'run:ios:device': `cap run ios --target=${envData.runtimeConfig?.runTargetIOSSimulator}`,
+          'run:android:device': `cap run android --target=${envData.runtimeConfig?.runTargetAndroidEmulator}`,
+        },
+        cli: {
+          'init': `pergel module -s=capacitor:init -p=${projectName} -m=${moduleName}`,
+          'sync': `pergel module -s=capacitor:sync -p=${projectName} -m=${moduleName}`,
+          'build:sync': `pergel module -s=generate -p=${projectName} -m=${moduleName} && pergel module -s=capacitor:sync -p=${projectName} -m=${moduleName}`,
+          'add:android': `pergel module -s=capacitor:android -p=${projectName} -m=${moduleName}`,
+          'add:ios': `pergel module -s=capacitor:ios -p=${projectName} -m=${moduleName}`,
+          'generate': `pergel module -s=generate -p=${projectName} -m=${moduleName}`,
+          'open:android': `pergel module -s=capacitor:open:android -p=${projectName} -m=${moduleName}`,
+          'open:ios': `pergel module -s=capacitor:open:ios -p=${projectName} -m=${moduleName}`,
+          'list:ios': `pergel module -s=capacitor:ios:list -p=${projectName} -m=${moduleName}`,
+          'list:android': `pergel module -s=capacitor:android:list -p=${projectName} -m=${moduleName}`,
+          'run:ios:device': `pergel module -s=run:ios:device -p=${projectName} -m=${moduleName}`,
+          'run:android:device': `pergel module -s=run:android:device -p=${projectName} -m=${moduleName}`,
+          'update': `pergel module -s=capacitor:update -p=${projectName} -m=${moduleName}`,
+          'copy': `pergel module -s=capacitor:copy -p=${projectName} -m=${moduleName}`,
+          'ls': `pergel module -s=capacitor:ls -p=${projectName} -m=${moduleName}`,
+        },
+      }),
+      nuxt,
+      moduleName,
+      projectName,
+    })
+  },
+})

packages/nuxt/src/runtime/modules/capacitor/types.ts

@@ -0,0 +1,53 @@
+// import type { AnimationBuilder, Mode, PlatformConfig, SpinnerTypes, TabButtonLayout } from '@ionic/core'
+import type { CapacitorConfig } from '@capacitor/cli'
+
+export interface ResolvedCapacitorOptions {
+  capacitorConfig: CapacitorOptions
+  ios: boolean
+  android: boolean
+  plugins: {
+    official: {
+      actionSheet: boolean
+    }
+    community: {
+      revenuecat: boolean
+    }
+  }
+}
+
+export interface CapacitorOptions {
+  /**
+   * This key capacitor.config.ts is used to configure Capacitor.
+   */
+  capacitorConfig?: CapacitorConfig
+  /**
+   * This key capacitor.config.ts is used to configure Capacitor.
+   * @default false
+   */
+  ios?: boolean
+  /**
+   * This key capacitor.config.ts is used to configure Capacitor.
+   * @default false
+   */
+  android?: boolean
+
+  plugins?: {
+    official?: {
+      actionSheet?: boolean
+    }
+    community?: {
+      revenuecat?: boolean
+    }
+  }
+}
+
+export interface CapacitorModuleRuntimeConfig {
+  /** set the target device to run the app on */
+  runTargetIOSSimulator?: string
+
+  /** set the target emulator to run the app on */
+  runTargetAndroidEmulator?: string
+
+  /** set the scheme of the iOS project */
+  runScheme?: string
+}

packages/nuxt/src/runtime/modules/eslint/core.ts

@@ -36,6 +36,7 @@ export function pergelEslintConfig(input?: {
         '**/dist/**',
         '**/.nuxt',
         '**/.output',
+        '**/.output/**',
         '**/.dist',
         '**/.github',
         '**/coverage',
@@ -49,6 +50,9 @@ export function pergelEslintConfig(input?: {
         '**/pergel/**',
         '**/migrations/**',
         'migrations',
+        // Capacitor specific ignores
+        '**/ios/**',
+        '**/android/**',
       ],
       ...input?.pergel ?? {},
     },

packages/nuxt/src/runtime/modules/ionic/index.ts

@@ -3,7 +3,6 @@ import { join, resolve } from 'node:path'
 import { installModule } from '@nuxt/kit'
 import type { ModuleOptions } from '@nuxtjs/ionic'
 import { definePergelModule } from '../../core/definePergel'
-import { generateModuleRuntimeConfig } from '../../core/utils/moduleRuntimeConfig'
 import { generateProjectReadme } from '../../core/utils/generateYaml'
 import type { IonicInterface, ResolvedIonicInterface } from './types'
 
@@ -15,11 +14,13 @@ export default definePergelModule<IonicInterface, ResolvedIonicInterface>({
   meta: {
     name: 'ionic',
     version: '0.0.1',
-    dependencies: {
-      '@nuxtjs/ionic': '^0.13.0',
-      '@ionic/cli': '^7.2.0',
-      '@ionic/core': '^7.6.3',
-      '@capacitor/cli': '^5.6.0',
+    dependencies(_options, nuxt) {
+      const deps = nuxt._pergel.pergelPackageJson
+      return {
+        '@nuxtjs/ionic': deps['@nuxtjs/ionic'],
+        '@ionic/cli': deps['@ionic/cli'],
+        '@ionic/core': deps['@ionic/core'],
+      }
     },
   },
   defaults: {
@@ -34,19 +35,6 @@ export default definePergelModule<IonicInterface, ResolvedIonicInterface>({
   },
   async setup({ nuxt, options }) {
     console.log('ionic test', options.appName)
-    const capacitorConfig = `
-    import { CapacitorConfig } from '@capacitor/cli';
-
-      const config: CapacitorConfig = ${JSON.stringify(options.capacitorConfig)}
-
-      export default config;`
-    // const nuxtConfig = `
-    // export default defineNuxtConfig({
-    //   ${JSON.stringify(options.nuxtConfig)}
-    // })`
-    // env için
-    generateModuleRuntimeConfig(nuxt, options, {
-    })
 
     // TODO: add docs
     if (options.defaultCss)