diff --git a/.gitignore b/.gitignore index a2c1fb7ca..cb719c9ce 100644 --- a/.gitignore +++ b/.gitignore @@ -17,7 +17,6 @@ # production /storybook-static -/build /dist /dist-vite /lib diff --git a/build/plugins.mts b/build/plugins.mts new file mode 100644 index 000000000..2c287a1ec --- /dev/null +++ b/build/plugins.mts @@ -0,0 +1,35 @@ +import lodashTemplate from 'lodash/template'; + +// inspired on https://dev.to/koistya/using-ejs-with-vite-48id and +// https://github.com/difelice/ejs-loader/blob/master/index.js +export const ejsPlugin = () => ({ + name: 'compile-ejs', + async transform(src: string, id: string) { + const options = { + variable: 'ctx', + evaluate: /\{%([\s\S]+?)%\}/g, + interpolate: /\{\{([\s\S]+?)\}\}/g, + escape: /\{\{\{([\s\S]+?)\}\}\}/g, + }; + if (id.endsWith('.ejs')) { + // @ts-ignore + const code = lodashTemplate(src, options); + return {code: `export default ${code}`, map: null}; + } + }, +}); + +export const cjsTokens = () => ({ + name: 'process-cjs-tokens', + async transform(src, id) { + if ( + id.endsWith('/design-tokens/dist/tokens.js') || + id.endsWith('node_modules/@utrecht/design-tokens/dist/tokens.cjs') + ) { + return { + code: src.replace('module.exports = ', 'export default '), + map: null, + }; + } + }, +}); diff --git a/build/utils.mts b/build/utils.mts new file mode 100644 index 000000000..1699eb67f --- /dev/null +++ b/build/utils.mts @@ -0,0 +1,15 @@ +import {dependencies, peerDependencies} from '../package.json'; + +const externalPackages = [ + ...Object.keys(dependencies || {}), + ...Object.keys(peerDependencies || {}), + 'formiojs', + 'lodash', + '@formio/vanilla-text-mask', + '@babel/runtime', + '@utrecht/component-library-react', +]; + +// Creating regexes of the packages to make sure subpaths of the +// packages are also treated as external +export const packageRegexes = externalPackages.map(packageName => new RegExp(`^${packageName}(/.*)?`)); diff --git a/vite.config.mts b/vite.config.mts index 7a2fe2ced..c9fdf5400 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -1,60 +1,12 @@ /// // https://vitejs.dev/config/ import react from '@vitejs/plugin-react'; -import lodashTemplate from 'lodash/template'; import {defineConfig} from 'vite'; import jsconfigPaths from 'vite-jsconfig-paths'; import {coverageConfigDefaults} from 'vitest/config'; -import {dependencies, peerDependencies} from './package.json'; - -const externalPackages = [ - ...Object.keys(dependencies || {}), - ...Object.keys(peerDependencies || {}), - 'formiojs', - 'lodash', - '@formio/vanilla-text-mask', - '@babel/runtime', - '@utrecht/component-library-react', -]; - -// Creating regexes of the packages to make sure subpaths of the -// packages are also treated as external -const regexesOfPackages = externalPackages.map(packageName => new RegExp(`^${packageName}(/.*)?`)); - -// inspired on https://dev.to/koistya/using-ejs-with-vite-48id and -// https://github.com/difelice/ejs-loader/blob/master/index.js -const ejsPlugin = () => ({ - name: 'compile-ejs', - async transform(src: string, id: string) { - const options = { - variable: 'ctx', - evaluate: /\{%([\s\S]+?)%\}/g, - interpolate: /\{\{([\s\S]+?)\}\}/g, - escape: /\{\{\{([\s\S]+?)\}\}\}/g, - }; - if (id.endsWith('.ejs')) { - // @ts-ignore - const code = lodashTemplate(src, options); - return {code: `export default ${code}`, map: null}; - } - }, -}); - -const cjsTokens = () => ({ - name: 'process-cjs-tokens', - async transform(src, id) { - if ( - id.endsWith('/design-tokens/dist/tokens.js') || - id.endsWith('node_modules/@utrecht/design-tokens/dist/tokens.cjs') - ) { - return { - code: src.replace('module.exports = ', 'export default '), - map: null, - }; - } - }, -}); +import {cjsTokens, ejsPlugin} from './build/plugins.mjs'; +import {packageRegexes} from './build/utils.mjs'; export default defineConfig({ base: './', @@ -77,7 +29,7 @@ export default defineConfig({ cssCodeSplit: false, rollupOptions: { input: 'src/sdk.jsx', - external: regexesOfPackages, + external: packageRegexes, output: { dir: 'dist-vite/esm', format: 'esm',