diff --git a/package-lock.json b/package-lock.json index d5e9a23f66..131b4164ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -59925,6 +59925,7 @@ "@nx/vite": "20.3.1", "@playwright/test": "1.49.1", "@rollup/plugin-alias": "5.1.1", + "@rollup/plugin-node-resolve": "16.0.0", "@rollup/plugin-replace": "6.0.2", "@stencil-community/postcss": "2.2.0", "@stencil/angular-output-target": "0.8.4", diff --git a/packages/atomic-hosted-page/scripts/start.js b/packages/atomic-hosted-page/scripts/start.js index 68fcc2d771..2c327d8063 100644 --- a/packages/atomic-hosted-page/scripts/start.js +++ b/packages/atomic-hosted-page/scripts/start.js @@ -3,12 +3,6 @@ import fs from 'fs/promises'; import ncp from 'ncp'; import path from 'path'; -const getCurrentDir = () => { - const url = import.meta.url; - const fileURL = new URL(url); - return path.dirname(fileURL.pathname); -}; - const getVersionFromPackageJson = async (packagePath) => { const packageJsonPath = path.join(packagePath, 'package.json'); try { @@ -32,7 +26,7 @@ const copyFiles = async (source, destination) => { }); }; -const currentDir = getCurrentDir(); +const currentDir = import.meta.dirname; const headlessDir = path.resolve(currentDir, '../../headless'); const buenoDir = path.resolve(currentDir, '../../bueno'); const atomicHostedPageDir = path.resolve( diff --git a/packages/atomic/.gitignore b/packages/atomic/.gitignore index 91f049dc11..f6b25f5d33 100644 --- a/packages/atomic/.gitignore +++ b/packages/atomic/.gitignore @@ -39,3 +39,6 @@ headless/ /playwright/.cache/ dist-storybook/ + +/dev/bueno/ +/dev/headless/ diff --git a/packages/atomic/.storybook/main.mts b/packages/atomic/.storybook/main.mts index 36d05f4370..ee1c721a19 100644 --- a/packages/atomic/.storybook/main.mts +++ b/packages/atomic/.storybook/main.mts @@ -14,6 +14,14 @@ const externalizeDependencies: PluginImpl = () => { return false; } + if ( + /(.*)(\/|\\)+(bueno|headless)\/v\d+\.\d+\.\d+(-nightly)?(\/|\\).*/.test( + source + ) + ) { + return false; + } + const packageMappings = generateExternalPackageMappings(__dirname); const packageMapping = packageMappings[source]; diff --git a/packages/atomic/package.json b/packages/atomic/package.json index a469984549..8700e56aa7 100644 --- a/packages/atomic/package.json +++ b/packages/atomic/package.json @@ -93,6 +93,7 @@ "@nx/vite": "20.3.1", "@playwright/test": "1.49.1", "@rollup/plugin-alias": "5.1.1", + "@rollup/plugin-node-resolve": "16.0.0", "@rollup/plugin-replace": "6.0.2", "@stencil-community/postcss": "2.2.0", "@stencil/angular-output-target": "0.8.4", diff --git a/packages/atomic/project.json b/packages/atomic/project.json index 4a03629aa4..b21fca81b5 100644 --- a/packages/atomic/project.json +++ b/packages/atomic/project.json @@ -36,6 +36,7 @@ "node ./scripts/stencil-proxy.mjs", "node ./scripts/build.mjs --config=tsconfig.lit.json", "node ./scripts/process-css.mjs --config=tsconfig.lit.json ", + "if [ \"$DEPLOYMENT_ENVIRONMENT\" == \"CDN\" ]; then rollup -c rollup.config.js; fi", "esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js", "esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js" ], @@ -106,7 +107,7 @@ "web:dev": { "executor": "nx:run-commands", "options": { - "command": "vite serve dev", + "command": "node ./scripts/start-dev.mjs", "cwd": "{projectRoot}" } }, diff --git a/packages/atomic/rollup.config.js b/packages/atomic/rollup.config.js new file mode 100644 index 0000000000..c56a5ee6e5 --- /dev/null +++ b/packages/atomic/rollup.config.js @@ -0,0 +1,76 @@ +import resolve from '@rollup/plugin-node-resolve'; +import {readdirSync, statSync} from 'fs'; +import {join, resolve as resolvePath, relative} from 'path'; +import {generateExternalPackageMappings} from './scripts/externalPackageMappings.mjs'; + +const isCDN = process.env.DEPLOYMENT_ENVIRONMENT === 'CDN'; + +const packageMappings = generateExternalPackageMappings(import.meta.dirname); + +const externalizeDependenciesPlugin = () => { + return { + name: 'externalize-dependencies', + resolveId: (source, _importer, _options) => { + const packageMapping = packageMappings[source]; + + if (packageMapping) { + if (!isCDN) { + return false; + } + + return { + id: packageMapping.cdn, + external: 'absolute', + }; + } + + return null; + }, + }; +}; + +const getDirectories = (src) => { + const dirs = []; + const files = readdirSync(src); + files.forEach((file) => { + const fullPath = join(src, file); + if (statSync(fullPath).isDirectory()) { + dirs.push(fullPath); + dirs.push(...getDirectories(fullPath)); + } + }); + return dirs; +}; + +const distDirs = getDirectories(resolvePath('dist/atomic')); + +const inputFiles = distDirs.flatMap((distDir) => { + return readdirSync(distDir) + .filter((file) => file.endsWith('.js')) + .map((file) => join(distDir, file)); +}); + +export default { + input: inputFiles, + output: { + dir: 'dist/atomic', + format: 'esm', + entryFileNames: ({facadeModuleId}) => { + const relativePath = relative(resolvePath('dist/atomic'), facadeModuleId); + return `${relativePath}`; + }, + chunkFileNames: '[name].js', + manualChunks: (id) => { + if (id.includes('node_modules')) { + return ( + 'vendor/' + + id.toString().split('node_modules/')[1].split('/')[0].toString() + ); + } + }, + }, + plugins: [ + resolve({preserveSymlinks: false}), + externalizeDependenciesPlugin(), + ], +}; diff --git a/packages/atomic/scripts/start-dev.mjs b/packages/atomic/scripts/start-dev.mjs new file mode 100644 index 0000000000..9273a99155 --- /dev/null +++ b/packages/atomic/scripts/start-dev.mjs @@ -0,0 +1,81 @@ +import {execSync} from 'child_process'; +import fs from 'fs/promises'; +import ncp from 'ncp'; +import path from 'path'; + +const getVersionFromPackageJson = async (packagePath) => { + const packageJsonPath = path.join(packagePath, 'package.json'); + try { + const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf-8')); + return packageJson.version; + } catch (err) { + console.error(`Error reading ${packageJsonPath}: ${err.message}`); + process.exit(1); + } +}; + +const copyFiles = async (source, destination) => { + return new Promise((resolve, reject) => { + ncp(source, destination, (err) => { + if (err) { + reject(err); + } else { + resolve(); + } + }); + }); +}; + +const currentDir = import.meta.dirname; +const headlessDir = path.resolve(currentDir, '../../headless'); +const buenoDir = path.resolve(currentDir, '../../bueno'); +const devPublicDir = path.resolve(currentDir, '../dev'); + +const run = async () => { + const headlessVersion = await getVersionFromPackageJson(headlessDir); + const buenoVersion = await getVersionFromPackageJson(buenoDir); + + const directories = [ + `${devPublicDir}/headless/v${headlessVersion}`, + `${devPublicDir}/bueno/v${buenoVersion}`, + ]; + + for (const dir of directories) { + if ( + await fs + .access(dir) + .then(() => true) + .catch(() => false) + ) { + console.log(`Deleting existing directory: ${dir}`); + await fs.rm(dir, {recursive: true, force: true}); + } + } + + for (const dir of directories) { + console.log(`Creating directory: ${dir}`); + await fs.mkdir(dir, {recursive: true}); + } + + console.log( + `Copying headless files to ${devPublicDir}/headless/v${headlessVersion}` + ); + await copyFiles( + path.join(headlessDir, 'dist/browser'), + `${devPublicDir}/headless/v${headlessVersion}` + ); + + console.log(`Copying bueno files to ${devPublicDir}/bueno/v${buenoVersion}`); + await copyFiles( + path.join(buenoDir, 'dist/browser'), + `${devPublicDir}/bueno/v${buenoVersion}` + ); + + console.log('Starting Vite server...'); + execSync('vite serve dev', {stdio: 'inherit'}); +}; + +run().catch((err) => { + console.error('An error occurred:', err); + process.exit(1); +}); diff --git a/packages/atomic/scripts/watch.mjs b/packages/atomic/scripts/watch.mjs index 4b5493263e..340a8752bd 100644 --- a/packages/atomic/scripts/watch.mjs +++ b/packages/atomic/scripts/watch.mjs @@ -29,6 +29,7 @@ async function rebuild(event, fileName) { 'node ./scripts/stencil-proxy.mjs', 'node ./scripts/build.mjs --config=tsconfig.lit.json', 'node ./scripts/process-css.mjs --config=tsconfig.lit.json ', + 'if [ "$DEPLOYMENT_ENVIRONMENT" == "CDN" ]; then rollup -c rollup.config.js; fi', 'esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js', 'esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js', ]; diff --git a/packages/atomic/src/utils/coveo.tw.css b/packages/atomic/src/utils/coveo.tw.css index db5f968e74..0ec565c377 100644 --- a/packages/atomic/src/utils/coveo.tw.css +++ b/packages/atomic/src/utils/coveo.tw.css @@ -1,4 +1,4 @@ -* { +:host { /* Primary colors */ --atomic-primary: #1372ec; --atomic-primary-light: #399ffe;