refactor: split out module utils into separate files

Author: danielroe

prettier.config.cjs

@@ -1,6 +1,7 @@
 module.exports={
 semi: false,
 singleQuote: true,
+printWidth: 100,
 trailingComma: 'es5',
 arrowParens: 'avoid',
 }

src/module.ts

@@ -1,17 +1,16 @@
 import{existsSync,promisesasfsp}from'node:fs'
-import{fileURLToPath}from'node:url'
+
+import{defineNuxtModule,addComponent,addPlugin}from'@nuxt/kit'
 import{join,resolve}from'pathe'
 import{readPackageJSON}from'pkg-types'
 import{defineUnimportPreset}from'unimport'
-import{
-defineNuxtModule,
-addComponent,
-addPlugin,
-installModule,
-}from'@nuxt/kit'
-import{joinURL}from'ufo'
-importtype{NuxtPage}from'@nuxt/schema'
-import{provider}from'std-env'
+
+import{runtimeDir}from'./utils'
+
+import{useCSSSetup}from'./parts/css'
+import{setupMeta}from'./parts/meta'
+import{setupPWA}from'./parts/pwa'
+import{setupRouter}from'./parts/router'
 
 exportinterfaceModuleOptions{
 integrations?: {
@@ -44,7 +43,6 @@ export default defineNuxtModule<ModuleOptions>({
 },
 },
 asyncsetup(options,nuxt){
-construntimeDir=fileURLToPath(newURL('./runtime',import.meta.url))
 nuxt.options.build.transpile.push(runtimeDir)
 nuxt.options.build.transpile.push(/@ionic/)
 
@@ -70,33 +68,6 @@ export default defineNuxtModule<ModuleOptions>({
 // Set up Ionic Core
 addPlugin(resolve(runtimeDir,'ionic'))
 
-// Add Ionic Core CSS
-if(options.css?.core){
-// Core CSS required for Ionic components to work properly
-nuxt.options.css.push('@ionic/vue/css/core.css')
-}
-
-if(options.css?.basic){
-// Basic CSS for apps built with Ionic
-nuxt.options.css.push(
-'@ionic/vue/css/normalize.css',
-'@ionic/vue/css/structure.css',
-'@ionic/vue/css/typography.css'
-)
-}
-
-if(options.css?.utilities){
-// Optional CSS utils that can be commented out
-nuxt.options.css.push(
-'@ionic/vue/css/padding.css',
-'@ionic/vue/css/float-elements.css',
-'@ionic/vue/css/text-alignment.css',
-'@ionic/vue/css/text-transformation.css',
-'@ionic/vue/css/flex-utils.css',
-'@ionic/vue/css/display.css'
-)
-}
-
 // Add auto-imported components
 IonicBuiltInComponents.map(name=>
 addComponent({
@@ -116,108 +87,32 @@ export default defineNuxtModule<ModuleOptions>({
 )
 })
 
+const{ setupBasic, setupCore, setupUtilities }=useCSSSetup()
+
+// Add Ionic Core CSS
+if(options.css?.core){
+awaitsetupCore()
+}
+
+if(options.css?.basic){
+awaitsetupBasic()
+}
+
+if(options.css?.utilities){
+awaitsetupUtilities()
+}
+
 if(options.integrations?.meta){
-nuxt.options.app.head.meta=nuxt.options.app.head.meta||[]
-for(constmetaofmetaDefaults){
-if(!nuxt.options.app.head.meta.some(i=>i.name===meta.name)){
-nuxt.options.app.head.meta.unshift(meta)
-}
-}
-nuxt.options.app.head.viewport=
-'viewport-fit: cover, width: device-width, initial-scale: 1.0, minimum-scale: 1.0, maximum-scale: 1.0, user-scalable: no'
+awaitsetupMeta()
 }
 
 if(options.integrations?.pwa){
-if(provider==='stackblitz'){
-;(nuxt.options.pwaasany)=(nuxt.options.pwaasany)||{}
-;(nuxt.options.pwaasany).icon=false
-console.warn(
-'Disabling PWA icon generation as `sharp` is not currently supported on StackBlitz.'
-)
-}
-awaitinstallModule('@kevinmarrec/nuxt-pwa')
+awaitsetupPWA()
 }
 
 // Set up Ionic Router integration
 if(options.integrations?.router){
-constpagesDirs=nuxt.options._layers.map(layer=>
-resolve(layer.config.srcDir,layer.config.dir?.pages||'pages')
-)
-
-// Disable module (and use universal router) if pages dir do not exists or user has disabled it
-if(
-nuxt.options.pages===false||
-(nuxt.options.pages!==true&&!pagesDirs.some(dir=>existsSync(dir)))
-){
-console.warn(
-'Disabling Ionic Router integration as pages dir does not exist.'
-)
-return
-}
-
-addPlugin(resolve(runtimeDir,'router'))
-nuxt.options.vite.optimizeDeps=nuxt.options.vite.optimizeDeps||{}
-nuxt.options.vite.optimizeDeps.include=
-nuxt.options.vite.optimizeDeps.include||[]
-nuxt.options.vite.optimizeDeps.include.push('@ionic/vue-router')
-
-nuxt.hook('modules:done',()=>{
-nuxt.options.plugins=nuxt.options.plugins.filter(
-p=>
-!(typeofp==='string' ? p : p.src).endsWith(
-'nuxt/dist/pages/runtime/router'
-)&&
-!(typeofp==='string' ? p : p.src).endsWith(
-'nuxt/dist/app/plugins/router'
-)
-)
-
-// Add all pages to be prerendered
-constroutes: string[]=[]
-
-nuxt.hook('pages:extend',pages=>{
-routes.length=0
-routes.push(
-'/',
- ...((nuxt.options.nitro.prerender?.routes||[])asstring[])
-)
-functionprocessPages(pages: NuxtPage[],currentPath=''){
-for(constpageofpages){
-if(page.path.includes(':'))continue
-
-constpath=joinURL(currentPath,page.path)
-routes.push(path)
-if(page.children)processPages(page.children,path)
-}
-}
-processPages(pages)
-})
-
-nuxt.hook('nitro:build:before',nitro=>{
-nitro.options.prerender.routes=routes
-})
-})
-
-// Remove vue-router types
-nuxt.hook('prepare:types',({ references })=>{
-constindex=references.findIndex(
-i=>'types'ini&&i.types==='vue-router'
-)
-if(index!==-1){
-references.splice(index,1)
-}
-})
-
-// Add default ionic root layout
-nuxt.hook('app:resolve',app=>{
-if(
-!app.mainComponent||
-app.mainComponent.includes('@nuxt/ui-templates')||
-app.mainComponent.match(/nuxt3?\/dist/)
-){
-app.mainComponent=join(runtimeDir,'app.vue')
-}
-})
+awaitsetupRouter()
 }
 },
 })
@@ -328,13 +223,3 @@ const IonicBuiltInComponents = [
 'IonModal',
 'IonPopover',
 ]
-
-constmetaDefaults=[
-{name: 'color-scheme',content: 'light dark'},
-{name: 'format-detection',content: 'telephone: no'},
-{name: 'msapplication-tap-highlight',content: 'no'},
-// add to homescreen for ios
-{name: 'apple-mobile-web-app-capable',content: 'yes'},
-{name: 'apple-mobile-web-app-title',content: 'Ionic App'},
-{name: 'apple-mobile-web-app-status-bar-style',content: 'black'},
-]

src/parts/css.ts

@@ -0,0 +1,33 @@
+import{useNuxt}from'@nuxt/kit'
+
+exportconstuseCSSSetup=()=>{
+constnuxt=useNuxt()
+
+constsetupCore=()=>{
+// Core CSS required for Ionic components to work properly
+nuxt.options.css.push('@ionic/vue/css/core.css')
+}
+
+constsetupBasic=()=>{
+// Basic CSS for apps built with Ionic
+nuxt.options.css.push(
+'@ionic/vue/css/normalize.css',
+'@ionic/vue/css/structure.css',
+'@ionic/vue/css/typography.css'
+)
+}
+
+constsetupUtilities=()=>{
+// Optional CSS utils that can be commented out
+nuxt.options.css.push(
+'@ionic/vue/css/padding.css',
+'@ionic/vue/css/float-elements.css',
+'@ionic/vue/css/text-alignment.css',
+'@ionic/vue/css/text-transformation.css',
+'@ionic/vue/css/flex-utils.css',
+'@ionic/vue/css/display.css'
+)
+}
+
+return{ setupCore, setupBasic, setupUtilities }
+}

src/parts/meta.ts

@@ -0,0 +1,24 @@
+import{useNuxt}from'@nuxt/kit'
+
+exportconstsetupMeta=()=>{
+constnuxt=useNuxt()
+
+constmetaDefaults=[
+{name: 'color-scheme',content: 'light dark'},
+{name: 'format-detection',content: 'telephone: no'},
+{name: 'msapplication-tap-highlight',content: 'no'},
+// add to homescreen for ios
+{name: 'apple-mobile-web-app-capable',content: 'yes'},
+{name: 'apple-mobile-web-app-title',content: 'Ionic App'},
+{name: 'apple-mobile-web-app-status-bar-style',content: 'black'},
+]
+
+nuxt.options.app.head.meta=nuxt.options.app.head.meta||[]
+for(constmetaofmetaDefaults){
+if(!nuxt.options.app.head.meta.some(i=>i.name===meta.name)){
+nuxt.options.app.head.meta.unshift(meta)
+}
+}
+nuxt.options.app.head.viewport=
+'viewport-fit: cover, width: device-width, initial-scale: 1.0, minimum-scale: 1.0, maximum-scale: 1.0, user-scalable: no'
+}

src/parts/pwa.ts

@@ -0,0 +1,15 @@
+import{installModule,useNuxt}from'@nuxt/kit'
+import{provider}from'std-env'
+
+exportconstsetupPWA=async()=>{
+constnuxt=useNuxt()
+
+if(provider==='stackblitz'){
+;(nuxt.optionsasany).pwa=(nuxt.optionsasany).pwa||{}
+;(nuxt.optionsasany).pwa.icon=false
+console.warn(
+'Disabling PWA icon generation as `sharp` is not currently supported on StackBlitz.'
+)
+}
+awaitinstallModule('@kevinmarrec/nuxt-pwa')
+}

src/parts/router.ts

@@ -0,0 +1,76 @@
+import{existsSync}from'node:fs'
+import{addPlugin,useNuxt}from'@nuxt/kit'
+importtype{NuxtPage}from'@nuxt/schema'
+import{join,resolve}from'pathe'
+import{joinURL}from'ufo'
+import{runtimeDir}from'../utils'
+
+exportconstsetupRouter=()=>{
+constnuxt=useNuxt()
+constpagesDirs=nuxt.options._layers.map(layer=>
+resolve(layer.config.srcDir||layer.cwd!,layer.config.dir?.pages||'pages')
+)
+
+// Disable module (and use universal router) if pages dir do not exists or user has disabled it
+if(
+nuxt.options.pages===false||
+(nuxt.options.pages!==true&&!pagesDirs.some(dir=>existsSync(dir)))
+){
+console.warn('Disabling Ionic Router integration as pages dir does not exist.')
+return
+}
+
+addPlugin(resolve(runtimeDir,'router'))
+nuxt.options.vite.optimizeDeps=nuxt.options.vite.optimizeDeps||{}
+nuxt.options.vite.optimizeDeps.include=nuxt.options.vite.optimizeDeps.include||[]
+nuxt.options.vite.optimizeDeps.include.push('@ionic/vue-router')
+
+nuxt.hook('modules:done',()=>{
+nuxt.options.plugins=nuxt.options.plugins.filter(
+p=>
+!(typeofp==='string' ? p : p.src).endsWith('nuxt/dist/pages/runtime/router')&&
+!(typeofp==='string' ? p : p.src).endsWith('nuxt/dist/app/plugins/router')
+)
+
+// Add all pages to be prerendered
+constroutes: string[]=[]
+
+nuxt.hook('pages:extend',pages=>{
+routes.length=0
+routes.push('/', ...((nuxt.options.nitro.prerender?.routes||[])asstring[]))
+functionprocessPages(pages: NuxtPage[],currentPath=''){
+for(constpageofpages){
+if(page.path.includes(':'))continue
+
+constpath=joinURL(currentPath,page.path)
+routes.push(path)
+if(page.children)processPages(page.children,path)
+}
+}
+processPages(pages)
+})
+
+nuxt.hook('nitro:build:before',nitro=>{
+nitro.options.prerender.routes=routes
+})
+})
+
+// Remove vue-router types
+nuxt.hook('prepare:types',({ references })=>{
+constindex=references.findIndex(i=>'types'ini&&i.types==='vue-router')
+if(index!==-1){
+references.splice(index,1)
+}
+})
+
+// Add default ionic root layout
+nuxt.hook('app:resolve',app=>{
+if(
+!app.mainComponent||
+app.mainComponent.includes('@nuxt/ui-templates')||
+app.mainComponent.match(/nuxt3?\/dist/)
+){
+app.mainComponent=join(runtimeDir,'app.vue')
+}
+})
+}

src/runtime/router.ts

@@ -1,8 +1,4 @@
-import{
-createRouter,
-createWebHistory,
-createMemoryHistory,
-}from'@ionic/vue-router'
+import{createRouter,createWebHistory,createMemoryHistory}from'@ionic/vue-router'
 
 import{defineNuxtPlugin,useRuntimeConfig}from'#imports'
 // @ts-expect-error Virtual module generated by Nuxt
@@ -12,9 +8,7 @@ export default defineNuxtPlugin(nuxtApp => {
 constconfig=useRuntimeConfig()
 constbaseURL=config.app.baseURL
 constrouter=createRouter({
-history: process.server
- ? createMemoryHistory(baseURL)
- : createWebHistory(baseURL),
+history: process.server ? createMemoryHistory(baseURL) : createWebHistory(baseURL),
  routes,
 })
 

src/utils.ts

@@ -0,0 +1,3 @@
+import{fileURLToPath}from'url'
+
+exportconstruntimeDir=fileURLToPath(newURL('./runtime',import.meta.url))