fix: size optimize -d

.vscode/settings.json

@@ -59,7 +59,8 @@
     "./dist": true,
     "package-lock.json": true,
     "yarn.lock": true,
-    "**/*.svg": true
+    "**/*.svg": true,
+    "**/stats.html": true
   },
   "files.exclude": {},
   "files.watcherExclude": {

@fiction/core/package.json

@@ -173,6 +173,7 @@
     "playwright": "^1.42.1",
     "react-dom": "^18.2.0",
     "rollup": "^4.12.1",
+    "rollup-plugin-visualizer": "^5.12.0",
     "util": "^0.12.5",
     "websocket-polyfill": "^1.0.0"
   },

@fiction/core/plugin-app/plugin-render.ts

@@ -214,6 +214,7 @@ export class FictionRender extends FictionPlugin<FictionRenderSettings> {
     const appViteConfigFile = await this.getAppViteConfigFile()
 
     const twPlugin = getRequire()('tailwindcss') as typeof tailwindcss
+    const { visualizer } = await import('rollup-plugin-visualizer')
     const twConfig = (await this.getTailwindConfig()) as Parameters<typeof twPlugin>[0]
 
     let merge: vite.InlineConfig[] = [
@@ -231,6 +232,10 @@ export class FictionRender extends FictionPlugin<FictionRenderSettings> {
         },
         server: {},
         plugins: [
+          visualizer({
+            filename: `stats.html`,
+            emitFile: true,
+          }),
           pluginVue(),
           ...getMarkdownPlugins({ isProd, distClient: this.distFolderClient }),
           unocss({
@@ -324,7 +329,6 @@ export class FictionRender extends FictionPlugin<FictionRenderSettings> {
         throw error
       }
       finally {
-        delete process.env.IS_VITE
         // Ensure that revert is called even if an error occurs
         revertGlobal?.()
       }

@fiction/core/plugin-build/index.ts

@@ -257,7 +257,7 @@ export class FictionBuild extends FictionPlugin<FictionBuildSettings> {
         minify: isProd,
 
         // https://vitejs.dev/config/build-options.html#build-sourcemap
-        sourcemap: 'inline',
+        sourcemap: isProd ? true : 'inline',
         rollupOptions: { external },
       },
 

@fiction/core/plugin-db/endpoint.ts

@@ -1,22 +1,25 @@
 import type { EndpointResponse, ResponseStatus, ValidationReason } from '@fiction/core'
 import { Query } from '../query'
-import { words } from '../utils/lib/words'
 import type { FictionDb } from '.'
 
 type QuerySettings = { fictionDb: FictionDb }
 
 type UsernameResult = { available: ResponseStatus, reason: ValidationReason }
 
 export class CheckUsername extends Query<QuerySettings> {
-  wordsSet = new Set(words)
-
   isUrlFriendly(username: string): boolean {
     return /^[a-zA-Z0-9-_]+$/.test(username)
   }
 
+  async getWords(): Promise<Set<string>> {
+    const { words } = await import('../utils/lib/words')
+    return new Set(words)
+  }
+
   async run(
     params: { table: string, column: string, value: string },
   ): Promise<EndpointResponse<UsernameResult>> {
+    const wordsSet = await this.getWords()
     const { fictionDb } = this.settings
     const { table, column, value } = params
 
@@ -31,7 +34,7 @@ export class CheckUsername extends Query<QuerySettings> {
       else if (!this.isUrlFriendly(prepped)) {
         result = { available: 'fail', reason: 'invalid' }
       }
-      else if (this.wordsSet.has(prepped)) {
+      else if (wordsSet.has(prepped)) {
         result = { available: 'fail', reason: 'reserved' }
       }
 

@fiction/core/utils/fonts.ts

@@ -1,5 +1,5 @@
 import { toCamel } from './casing'
-import { fonts } from './lib/fonts'
+
 import { deepMerge } from './obj'
 
 type ConfigVal = { fontKey?: string, fontKey2?: string, stack: 'monospace' | 'sans' | 'serif' }
@@ -71,11 +71,18 @@ export function variantToGoogleFontsFormat(variant: string): string {
   return `${isItalic ? '1' : '0'},${weight}`
 }
 
-export function createGoogleFontsLink(args: { fontKeys: string[], fonts?: FontEntry[] }) {
+export async function createGoogleFontsLink(args: { fontKeys: string[], fonts?: FontEntry[] }) {
   const deduped = [...new Set(args.fontKeys || [])]
+  let fontEntries = args.fonts
+
+  if (!fontEntries) {
+    const { fonts } = await import('./lib/fonts')
+    fontEntries = fonts as FontEntry[]
+  }
+
   const fontParams = deduped.map((fontKey) => {
     const normalizedFontKey = toCamel(fontKey)
-    const fontEntries = args.fonts || fonts
+
     const font = fontEntries.find(f => toCamel(f.family) === normalizedFontKey)
     if (!font)
       return ''

@fiction/core/utils/libraries.ts

@@ -1,7 +1,6 @@
 import express from 'express'
 import * as axios from 'axios'
 import knex from 'knex'
-import * as zod from 'zod'
 import * as vue from 'vue'
 import * as vueRouter from 'vue-router'
 import dayjs from 'dayjs'
@@ -47,4 +46,4 @@ function clean(text: unknown) {
   // Sanitize the text
   return DOMPurify.sanitize(text, config)
 }
-export { dayjs, express, axios, knex, chalk, vue, vueRouter, clean, unhead, twMerge, zod }
+export { dayjs, express, axios, knex, chalk, vue, vueRouter, clean, unhead, twMerge }

@fiction/core/utils/test/fonts.ci.test.ts

@@ -27,24 +27,24 @@ describe('variantToGoogleFontsFormat', () => {
 })
 
 describe('createGoogleFontsLink', () => {
-  it('should return correct URL for valid font keys', () => {
-    const fontLink = createGoogleFontsLink({ fontKeys: ['Roboto', 'Open Sans'], fonts })
+  it('should return correct URL for valid font keys', async () => {
+    const fontLink = await createGoogleFontsLink({ fontKeys: ['Roboto', 'Open Sans'], fonts })
     const expectedLink = 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,900;1,700&display=swap'
     expect(fontLink).toBe(expectedLink)
   })
 
-  it('should handle non-existent font keys gracefully', () => {
-    const fontLink = createGoogleFontsLink({ fontKeys: ['Non Existent Font'] })
+  it('should handle non-existent font keys gracefully', async () => {
+    const fontLink = await createGoogleFontsLink({ fontKeys: ['Non Existent Font'] })
     expect(fontLink).toBe('')
   })
 
-  it('should encode spaces as plus signs in font family names', () => {
-    const fontLink = createGoogleFontsLink({ fontKeys: ['Open Sans'] })
+  it('should encode spaces as plus signs in font family names', async () => {
+    const fontLink = await createGoogleFontsLink({ fontKeys: ['Open Sans'] })
     expect(fontLink).toContain('Open+Sans')
   })
 
-  it('should return an empty string when no font keys are provided', () => {
-    const fontLink = createGoogleFontsLink({ fontKeys: [] })
+  it('should return an empty string when no font keys are provided', async () => {
+    const fontLink = await createGoogleFontsLink({ fontKeys: [] })
     expect(fontLink).toBe('')
   })
 })

@fiction/core/utils/validation.ts

@@ -1,10 +1,10 @@
-import validator from 'validator'
 import type { FictionDb } from '../plugin-db'
 import type { EndpointMeta } from './endpoint'
 
 type ValidationTypes = 'email' | 'domain' | 'url'
 
-export function isValid(value: string, type: ValidationTypes): boolean {
+export async function isValid(value: string, type: ValidationTypes): Promise<boolean> {
+  const { default: validator } = await import('validator')
   if (type === 'email') {
     return validator.isEmail(value)
   }

@fiction/plugin-monitor/index.ts

@@ -13,7 +13,6 @@ import {
   FictionPlugin,
   vars,
 } from '@fiction/core'
-import mailchimp from '@mailchimp/mailchimp_marketing'
 
 declare global {
   interface Window {
@@ -23,18 +22,9 @@ declare global {
 }
 
 vars.register(() => [
-  new EnvVar({
-    name: 'SLACK_WEBHOOK_URL',
-    isPublic: false,
-  }),
-  new EnvVar({
-    name: 'MAILCHIMP_API_KEY',
-    isPublic: false,
-  }),
-  new EnvVar({
-    name: 'SENTRY_PUBLIC_DSN',
-    isPublic: true,
-  }),
+  new EnvVar({ name: 'SLACK_WEBHOOK_URL', isPublic: false }),
+  new EnvVar({ name: 'MAILCHIMP_API_KEY', isPublic: false }),
+  new EnvVar({ name: 'SENTRY_PUBLIC_DSN', isPublic: true }),
 ])
 
 interface FictionMonitorSettings {
@@ -205,6 +195,7 @@ export class FictionMonitor extends FictionPlugin<FictionMonitorSettings> {
   }): Promise<void> {
     const { email, tags = [] } = args
     try {
+      const mailchimp = await import('@mailchimp/mailchimp_marketing')
       const apiKey = this.mailchimpApiKey
       const listId = this.mailchimpListId
       const server = this.mailchimpServer

@fiction/plugin-sites/endpoint-certs.ts

@@ -1,7 +1,5 @@
 import type { EndpointMeta, EndpointResponse } from '@fiction/core'
 
-// You may need to install this with 'npm install node-fetch'
-import { GraphQLClient } from 'graphql-request'
 import { SitesQuery } from './endpoint'
 
 type CertificateIssue = {
@@ -37,7 +35,8 @@ interface ManageCertParams {
 export class ManageCert extends SitesQuery {
   graphqlEndpoint = 'https://api.fly.io/graphql'
   fictionSites = this.settings.fictionSites
-  getClient() {
+  async getClient() {
+    const { GraphQLClient } = await import('graphql-request')
     return new GraphQLClient(this.graphqlEndpoint, {
       headers: {
         Authorization: `Bearer ${this.fictionSites.settings.flyIoApiToken}`,
@@ -47,8 +46,8 @@ export class ManageCert extends SitesQuery {
 
   private async graphqlRequest(query: string, args: ManageCertParams): Promise<CertificateDetails> {
     const v = { appId: this.settings.flyIoAppId, ...args }
-
-    const response = await this.getClient().request<{ [key: string]: { certificate: CertificateDetails } }>(query, v)
+    const client = await this.getClient()
+    const response = await client.request<{ [key: string]: { certificate: CertificateDetails } }>(query, v)
 
     // Extract the first property (key) from the response
     const firstKey = Object.keys(response)[0]

@fiction/ui/InputFont.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import type { UserFont } from '@fiction/core'
 import { vue } from '@fiction/core'
-
-import { fonts } from '@fiction/core/utils/lib/fonts'
+import type { FontEntry } from '@fiction/core/utils/fonts'
 import InputSelect from './InputSelectCustom.vue'
 
 interface FontItem {
@@ -11,6 +10,8 @@ interface FontItem {
   category: string
 }
 
+const fontsList = vue.ref<FontEntry[]>()
+
 const list = vue.computed(() => {
   const l = [
     {
@@ -43,6 +44,8 @@ const list = vue.computed(() => {
       value: JSON.stringify(item.value),
     }
   })
+
+  const fonts = fontsList.value || []
   const glist = fonts.map(
     ({ family, variants, category }: FontItem) => {
       const link = `https://fonts.googleapis.com/css?family=${encodeURIComponent(family)}:${variants.join(',')}`
@@ -68,6 +71,12 @@ const list = vue.computed(() => {
     ...glist.sort(),
   ]
 })
+
+vue.onMounted(async () => {
+  const { fonts } = await import('@fiction/core/utils/lib/fonts')
+
+  fontsList.value = fonts as FontEntry[]
+})
 </script>
 
 <script lang="ts">