diff --git a/src/components/Contentful/DynamicRichText.vue b/src/components/Contentful/DynamicRichText.vue index d65e69d8b1..59022f2f6b 100644 --- a/src/components/Contentful/DynamicRichText.vue +++ b/src/components/Contentful/DynamicRichText.vue @@ -27,8 +27,6 @@ export default { KvContentfulImg: defineAsyncComponent(() => import('@kiva/kv-components/vue/KvContentfulImg')), ButtonWrapper: defineAsyncComponent(() => import('#src/components/Contentful/ButtonWrapper')), }, - props: { - }, }; }, elementClasses() { @@ -52,16 +50,7 @@ export default { } }, render() { - return h( - 'div', /* Wrap output in a div since Vue templates must have 1 root element */ - [ - h(this.dynamicComponent, { - class: this.elementClasses, - props: { - }, - }) - ] - ); + return h(this.dynamicComponent, { class: this.elementClasses }); } }; diff --git a/vite.config.js b/vite.config.js index 7abd8a6143..f8e5dca0e7 100644 --- a/vite.config.js +++ b/vite.config.js @@ -27,95 +27,104 @@ const imagesRegex = /images\/.+\.(png|jpe?g|gif|webp|avif|svg|ico)/; const mediaRegex = /media\/.+\.(mp4|webm|ogg|mp3|wav|flac|aac)/; // https://vitejs.dev/config/ -export default defineConfig({ - assetsInclude: [ - '**/*.bin', - '**/*.wasm', - ], - // Force all assets/vite calls through /static in dev mode, compiled mode is covered by the build config below - base: isProd ? '/' : '/static/', - // Use /static for all assets in prod mode - build: { - assetsDir: 'static', - assetsInlineLimit: (filePath, content) => { - const size = content.length; - if (fontsRegex.test(filePath) || mediaRegex.test(filePath)) { - return size <= 10000; - } - if (imagesRegex.test(filePath)) { - return size <= 1; // could be 10000 but we'd need to exclude apple-touch-icons - } - // vite default - return size <= 4096; - }, - }, - css: { - postcss: { - plugins: isProd ? [ - autoprefixer, - cssnano, - tailwindcss, - ] : [ - tailwindcss, - ], +export default defineConfig(({ isSsrBuild, mode }) => { + return { + assetsInclude: [ + '**/*.bin', + '**/*.wasm', + ], + // Force all assets/vite calls through /static in dev mode, compiled mode is covered by the build config below + base: isProd ? '/' : '/static/', + // Use /static for all assets in prod mode + build: { + assetsDir: 'static', + assetsInlineLimit: (filePath, content) => { + const size = content.length; + if (fontsRegex.test(filePath) || mediaRegex.test(filePath)) { + return size <= 10000; + } + if (imagesRegex.test(filePath)) { + return size <= 1; // could be 10000 but we'd need to exclude apple-touch-icons + } + // vite default + return size <= 4096; + }, }, - preprocessorOptions: { - scss: { + css: { + postcss: { + plugins: isProd ? [ + autoprefixer, + cssnano, + tailwindcss, + ] : [ + tailwindcss, + ], + }, + preprocessorOptions: { + scss: { // Suppress deprecation warnings from node modules - quietDeps: true, + quietDeps: true, + }, }, }, - }, - define: { - UI_COMMIT: JSON.stringify(gitRevisionPlugin.commithash()), - UI_BRANCH: JSON.stringify(gitRevisionPlugin.branch()), - UI_TAG: JSON.stringify(gitRevisionPlugin.version()), - }, - plugins: [ - vue({ - template: { - compilerOptions: { - compatConfig: { - MODE: 3, + define: { + UI_COMMIT: JSON.stringify(gitRevisionPlugin.commithash()), + UI_BRANCH: JSON.stringify(gitRevisionPlugin.branch()), + UI_TAG: JSON.stringify(gitRevisionPlugin.version()), + }, + plugins: [ + vue({ + template: { + compilerOptions: { + compatConfig: { + MODE: 3, + }, }, }, + }), + // load .graphql and .gql files + graphQLLoader(), + // load svg files as vue components + svgLoader({ + svgoConfig: { + plugins: [ + { name: 'removeTitle', active: false }, + ], + }, + }), + // svg icon sprite sheet + svgStore({ + dirs: ['src/assets/icons/sprite'], + symbolId: 'icon-[name]', + optimizeOptions: { + floatPrecision: 3, + }, + }), + ], + resolve: { + alias: { + // alias src directory + '#src': resolve('src'), + // alias promise module to handle timesync calling require('promise') + promise: resolve('build/promise.js'), + // this alias is required for the rendering of src/components/Contentful/DynamicRichText.vue + // it should only be used on the client build in production + // eslint-disable-next-line max-len + ...(isSsrBuild === false && mode === 'production' && { vue: path.resolve(__dirname, 'node_modules', 'vue', 'dist', 'vue.esm-bundler.js') }) }, - }), - // load .graphql and .gql files - graphQLLoader(), - // load svg files as vue components - svgLoader({ - svgoConfig: { - plugins: [ - { name: 'removeTitle', active: false }, - ], - }, - }), - // svg icon sprite sheet - svgStore({ - dirs: ['src/assets/icons/sprite'], - symbolId: 'icon-[name]', - optimizeOptions: { - floatPrecision: 3, - }, - }), - ], - resolve: { - alias: { - // alias src directory - '#src': resolve('src'), - // alias promise module to handle timesync calling require('promise') - promise: resolve('build/promise.js'), - // required for src/components/Contentful/DynamicRichText.vue - vue$: 'vue/dist/vue.esm-browser.js', + extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue'], }, - extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue'], - }, - server: { - hmr: { + server: { + hmr: { // Use a different client port to allow Caddy to reverse proxy with SSL cert - clientPort: 24679, - port: 24678, + clientPort: 24679, + port: 24678, + }, + }, + optimizeDeps: { + include: [ + 'vue', + ], }, - }, + }; });