Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[stable1] feat(app-config): Add option to override the app name #206

Merged
merged 1 commit into from
Jun 20, 2024
Merged

[stable1] feat(app-config): Add option to override the app name #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions __tests__/appconfig.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@ import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
const __dirname = fileURLToPath(new URL('.', import.meta.url))

describe('app config', () => {
it('adds global appName variable', async () => {
const resolved = await createConfig('build', 'development')
expect([resolved.build.rollupOptions.output!].flat()[0].intro).toMatch(/appName = "@nextcloud\/vite-config"/)
})

it('adds global appName variable with override', async () => {
const resolved = await createConfig('build', 'development', { appName: 'spreed' })
expect([resolved.build.rollupOptions.output!].flat()[0].intro).toMatch(/appName = "spreed"/)
})

it('replaces process.env', async () => {
const root = resolve(__dirname, '../__fixtures__/app_process_env')

Expand Down
25 changes: 16 additions & 9 deletions lib/appConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,17 @@ import injectCSSPlugin from 'vite-plugin-css-injected-by-js'

type VitePluginInjectCSSOptions = Parameters<typeof injectCSSPlugin>[0]

export const appName = process.env.npm_package_name
export const appVersion = process.env.npm_package_version
export const appNameSanitized = appName.replace(/[/\\]/, '-')
export const sanitizeAppName = (appName: string) => appName.replace(/[/\\]/, '-')

export interface AppOptions extends Omit<BaseOptions, 'inlineCSS'> {
/**
* Override the `appName`, by default the name from the `package.json` is used.
* But if that name differs from the app id used for the Nextcloud app you need to override it.
* @default process.env.npm_package_name
*/
appName?: string

/**
* Inject all styles inside the javascript bundle instead of emitting a .css file
* @default false
Expand All @@ -38,7 +44,7 @@ export interface AppOptions extends Omit<BaseOptions, 'inlineCSS'> {
* Inject polyfills for node packages
* By default all node core modules are polyfilled, including prefixed with `node:` protocol
*
* @default {protocolImports: true}
* @default '{ protocolImports: true }'
*/
nodePolyfills?: boolean | NodePolyfillsOptions

Expand Down Expand Up @@ -66,6 +72,7 @@ export interface AppOptions extends Omit<BaseOptions, 'inlineCSS'> {
export const createAppConfig = (entries: { [entryAlias: string]: string }, options: AppOptions = {}): UserConfigFn => {
// Add default options
options = {
appName: process.env.npm_package_name,
config: {},
nodePolyfills: {
protocolImports: true,
Expand All @@ -77,7 +84,7 @@ export const createAppConfig = (entries: { [entryAlias: string]: string }, optio
return createBaseConfig({
...(options as BaseOptions),
config: async (env) => {
console.info(`Building ${appName} for ${env.mode}`)
console.info(`Building ${options.appName} for ${env.mode}`)

// This config is used to extend or override our base config
// Make sure we get a user config and not a promise or a user config function
Expand Down Expand Up @@ -108,7 +115,7 @@ export const createAppConfig = (entries: { [entryAlias: string]: string }, optio
include: ['src/**'],
preventAssignment: true,
values: {
appName: JSON.stringify(appName),
appName: JSON.stringify(options.appName),
appVersion: JSON.stringify(appVersion),
},
}))
Expand All @@ -127,7 +134,7 @@ export const createAppConfig = (entries: { [entryAlias: string]: string }, optio
}
return {
// already contains the "js/" prefix as it is our output file configuration
runtime: `window.OC.filePath('${appName}', '', '${filename}')`,
runtime: `window.OC.filePath('${options.appName}', '', '${filename}')`,
}
},
},
Expand All @@ -141,7 +148,7 @@ export const createAppConfig = (entries: { [entryAlias: string]: string }, optio
},
output: {
// global variables for appName and appVersion
intro: `const appName = ${JSON.stringify(appName)}; const appVersion = ${JSON.stringify(appVersion)};`,
intro: `const appName = ${JSON.stringify(options.appName)}; const appVersion = ${JSON.stringify(appVersion)};`,
assetFileNames: (assetInfo) => {
// Allow to customize the asset file names
if (options.assetFileNames) {
Expand All @@ -155,14 +162,14 @@ export const createAppConfig = (entries: { [entryAlias: string]: string }, optio
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
return 'img/[name][extname]'
} else if (/css/i.test(extType)) {
return `css/${appNameSanitized}-[name].css`
return `css/${sanitizeAppName(options.appName)}-[name].css`
} else if (/woff2?|ttf|otf/i.test(extType)) {
return 'css/fonts/[name][extname]'
}
return 'dist/[name]-[hash][extname]'
},
entryFileNames: () => {
return `js/${appNameSanitized}-[name].mjs`
return `js/${sanitizeAppName(options.appName)}-[name].mjs`
},
chunkFileNames: () => {
return 'js/[name]-[hash].mjs'
Expand Down
Loading