Skip to content

Commit

Permalink
chore(rollup): carbon icon build
Browse files Browse the repository at this point in the history
  • Loading branch information
@annawen1
annawen1 committed Jul 17, 2024
1 parent f8f2545 commit 09b9b1e
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 185 deletions.
1 change: 0 additions & 1 deletion web-components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@
"@carbon/styles": "1.54.0",
"@floating-ui/dom": "^1.6.3",
"@ibm/telemetry-js": "^1.5.0",
"@rollup/plugin-json": "^6.1.0",
"flatpickr": "4.6.13",
"lit": "^3.1.0",
"lodash-es": "^4.17.21",
Expand Down
115 changes: 36 additions & 79 deletions web-components/tasks/build-rollup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,16 @@ import {resourceJSPaths} from '../tools/babel-plugin-resource-js-paths.js';
import litSCSS from '../tools/rollup-plugin-lit-scss.js';
import { globby } from 'globby';
import carbonIcons from '../tools/rollup-plugin-icons.js';
import json from '@rollup/plugin-json';

import * as packageJson from '../package.json' assert { type: "json" };

const __dirname = path.dirname(fileURLToPath(import.meta.url));

async function build() {
const inputs = await globby([ 'src/**/*.ts', '!src/**/*.stories.ts', '!src/**/*.d.ts']);

const inputs = await globby([ 'src/**/*.ts', '!src/**/*.stories.ts', '!src/**/*.d.ts', '!src/globals/internal/storybook-cdn.ts']);

const iconInput = await globby(['node_modules/@carbon/icons/lib/**/*.js', '!**/index.js']);

const entryPoint = {
filepath: inputs,
Expand All @@ -45,13 +47,13 @@ async function build() {
type: 'esm',
directory: 'es',
},
// {
// type: 'commonjs',
// directory: 'lib',
// },
{
type: 'commonjs',
directory: 'lib',
},
];

for (const format of formats) {
for (const format of formats) {
const outputDirectory = path.join(
entryPoint.outputDirectory,
format.directory
Expand All @@ -60,7 +62,8 @@ async function build() {
const cwcInputConfig = getRollupConfig(
inputs,
entryPoint.rootDir,
outputDirectory
outputDirectory,
iconInput
);

const cwcBundle = await rollup(cwcInputConfig);
Expand All @@ -74,36 +77,10 @@ async function build() {
exports: 'named',
sourcemap: true
});
}
}

//grab all the icon files from @carbon/icons as input
const iconInputs = await globby(['node_modules/@carbon/icons/lib/**/*.js', '!**/index.js']);

const iconsEntrypoint = {
outputDirectory: path.resolve(__dirname, '..'),
};

const iconsInputConfig = getIconRollupConfig(
iconInputs
);

const iconsBundle = await rollup(iconsInputConfig);

const iconsOutputDir = path.join(
iconsEntrypoint.outputDirectory,
'es', 'icons'
);

// Build @carbon/icons
await iconsBundle.write({
dir: iconsOutputDir,
format: 'esm',
preserveModules: true,
preserveModulesRoot: 'node_modules/@carbon/icons/lib',
// banner,
exports: 'named',
});
}

const banner = `/**
* Copyright IBM Corp. 2024
Expand All @@ -113,26 +90,32 @@ const banner = `/**
*/
`;

function getRollupConfig(input, rootDir, outDir) {
function getRollupConfig(input, rootDir, outDir, iconInput) {

const dependencies = [
...Object.keys(packageJson.default.dependencies),
...Object.keys(packageJson.default.devDependencies),
].map((name) => {
// Transform the name of each dependency into a regex so that imports from
// nested paths are correctly marked as external.
//
// Example:
// import 'module-name';
// import 'module-name/path/to/nested/module';
return new RegExp(`^${name}(/.*)?`);
},
);
return {
input,
// Mark dependencies listed in `package.json` as external so that they are
// not included in the output bundle.
external: [
...Object.keys(packageJson.default.dependencies),
...Object.keys(packageJson.default.devDependencies),
].map((name) => {
// Transform the name of each dependency into a regex so that imports from
// nested paths are correctly marked as external.
//
// Example:
// import 'module-name';
// import 'module-name/path/to/nested/module';
return new RegExp(`^${name}(/.*)?`);
},
),
external: [ ...dependencies, fileURLToPath(
new URL(
'../es/icons',
import.meta.url
)
),],
plugins: [
json(),
alias({
entries: [{ find: /^(.*)\.scss\?lit$/, replacement: '$1.scss' }],
}),
Expand All @@ -148,10 +131,10 @@ function getRollupConfig(input, rootDir, outDir) {
// babelrc: false,
// exclude: ['node_modules/**'],
// plugins: [
// ['@babel/plugin-transform-runtime', { useESModules: true, version: '7.8.0' }],
// // ['@babel/plugin-transform-runtime', { useESModules: true, version: '7.8.0' }],
// resourceJSPaths
// ],
// babelHelpers: 'runtime',
// // babelHelpers: 'runtime',
// extensions: ['.ts', '.tsx', '.js', '.jsx'],
// }),
litSCSS({
Expand All @@ -163,44 +146,18 @@ function getRollupConfig(input, rootDir, outDir) {
.css;
},
}),
carbonIcons(iconInput),
typescript({
noEmitOnError: true,
compilerOptions: {
rootDir,
outDir,
},
exclude: ['tests','.storybook', '*.stories.ts'],
}),
],
};
}

function getIconRollupConfig(input) {
const dependencies = [
...Object.keys(packageJson.default.dependencies),
...Object.keys(packageJson.default.devDependencies),
].map((name) => {
// Transform the name of each dependency into a regex so that imports from
// nested paths are correctly marked as external.
//
// Example:
// import 'module-name';
// import 'module-name/path/to/nested/module';
return new RegExp(`^${name}(/.*)?`);
},
);
return {
input,
// Mark dependencies listed in `package.json` as external so that they are
// not included in the output bundle.
external: [ ...dependencies, fileURLToPath(new URL('../es/globals/directives/spread', import.meta.url))],
plugins: [
carbonIcons(input)
]
}
}


build().catch((error) => {
console.log(error);
process.exit(1);
Expand Down
73 changes: 21 additions & 52 deletions web-components/tools/rollup-plugin-icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,68 +19,37 @@ import icon from './svg-result-carbon-icon.js';
* @param {RegExp} [options.exclude] The files to exclude.
* @returns {object} The rollup plugin to transform an `.svg` file to a `lit-html` template.
*/
export default function rollupPluginIcons({
include = /@carbon[\\/]icons[\\/]/i,
exclude,
} = {}) {
const filter = createFilter(include, exclude);
export default function rollupPluginIcons(inputs) {
return {
name: 'carbon-icons',

/**
* Enqueues the module contents for loading.
*
* @param {string} id The module ID.
*/
load(id) {
if (filter(id)) {
this.addWatchFile(path.resolve(id));
}
return null;
},

/**
* Transforms the module contents.
*
* @param {string} contents The module contents.
* @param {string} id The module ID.
* @returns {object} The transformed module contents.
*/
async transform(contents, id) {
if (!filter(id)) {
return null;
}
const svg = await import(id);

async buildEnd() {
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const require = createRequire(import.meta.url);

const iconsDir = path.dirname(require.resolve('@carbon/icons/lib'));
const iconsESPath = path.resolve('es', 'icons', path.relative(iconsDir, id));
const spreadModulePath = path.resolve(__dirname, '../es/globals/directives/spread');
for (const input of inputs) {
const iconPath = path.resolve(__dirname, `../${input}`);

console.log('path', path.relative(path.dirname(iconsESPath), spreadModulePath));
const svg = await import(iconPath);

const code = [
`import { svg } from 'lit'`,
`import spread from '${path.relative(path.dirname(id), spreadModulePath)}'`,
`const svgResultCarbonIcon = ${icon(svg.default)}`,
`export default svgResultCarbonIcon;`,
].join(';');
const iconsDir = path.dirname(require.resolve('@carbon/icons/lib'));
const iconsESPath = path.resolve('es', 'icons', path.relative(iconsDir, iconPath));
const spreadModulePath = path.resolve(__dirname, '../es/globals/directives/spread');

this.emitFile({
type: 'asset',
fileName: path.relative(iconsDir, id),
source: code
});
const code = [
`import { svg } from 'lit'`,
`import spread from '${path.relative(path.dirname(iconsESPath), spreadModulePath)}'`,
`const svgResultCarbonIcon = ${icon(svg.default)}`,
`export default svgResultCarbonIcon;`,
].join(';');

return {
code,
map: {
mappings: '',
},
};
},
this.emitFile({
type: 'asset',
fileName: `icons/${path.relative(iconsDir, iconPath)}`,
source: code
});
}
}
};
}

53 changes: 0 additions & 53 deletions web-components/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1615,8 +1615,6 @@ __metadata:
"@rollup/plugin-alias": "npm:^5.1.0"
"@rollup/plugin-babel": "npm:^5.3.1"
"@rollup/plugin-commonjs": "npm:^21.0.3"
"@rollup/plugin-json": "npm:^6.1.0"
"@rollup/plugin-multi-entry": "npm:^6.0.1"
"@rollup/plugin-node-resolve": "npm:^8.4.0"
"@rollup/plugin-replace": "npm:^4.0.0"
"@rollup/plugin-terser": "npm:^0.4.4"
Expand Down Expand Up @@ -3311,35 +3309,6 @@ __metadata:
languageName: node
linkType: hard

"@rollup/plugin-json@npm:^6.1.0":
version: 6.1.0
resolution: "@rollup/plugin-json@npm:6.1.0"
dependencies:
"@rollup/pluginutils": "npm:^5.1.0"
peerDependencies:
rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
peerDependenciesMeta:
rollup:
optional: true
checksum: 10/cc018d20c80242a2b8b44fae61a968049cf31bb8406218187cc7cda35747616594e79452dd65722e7da6dd825b392e90d4599d43cd4461a02fefa2865945164e
languageName: node
linkType: hard

"@rollup/plugin-multi-entry@npm:^6.0.1":
version: 6.0.1
resolution: "@rollup/plugin-multi-entry@npm:6.0.1"
dependencies:
"@rollup/plugin-virtual": "npm:^3.0.0"
matched: "npm:^5.0.1"
peerDependencies:
rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
peerDependenciesMeta:
rollup:
optional: true
checksum: 10/8b8067eef2113cc015e2bf6d8daeaa0f8c05187a831b470b0e2125b71573949b9f9d92cc446123ba434f7dcb05e3bd4477ba25f0072ff18772d87e0381bdcf93
languageName: node
linkType: hard

"@rollup/plugin-node-resolve@npm:^8.4.0":
version: 8.4.0
resolution: "@rollup/plugin-node-resolve@npm:8.4.0"
Expand Down Expand Up @@ -3404,18 +3373,6 @@ __metadata:
languageName: node
linkType: hard

"@rollup/plugin-virtual@npm:^3.0.0":
version: 3.0.2
resolution: "@rollup/plugin-virtual@npm:3.0.2"
peerDependencies:
rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
peerDependenciesMeta:
rollup:
optional: true
checksum: 10/962bc9efece57a07c328a3d093bd1a62b9b4396a88640ac79cfc04181e06b31c4b37726ca27ded71178ace27db9b0085b43c4de823378773bb44cb233ea1340e
languageName: node
linkType: hard

"@rollup/pluginutils@npm:^3 || ^4 || ^5, @rollup/pluginutils@npm:^5.0.5, @rollup/pluginutils@npm:^5.1.0":
version: 5.1.0
resolution: "@rollup/pluginutils@npm:5.1.0"
Expand Down Expand Up @@ -9582,16 +9539,6 @@ __metadata:
languageName: node
linkType: hard

"matched@npm:^5.0.1":
version: 5.0.1
resolution: "matched@npm:5.0.1"
dependencies:
glob: "npm:^7.1.6"
picomatch: "npm:^2.2.1"
checksum: 10/0879c5c8f8db5f80a6db401e109b1749d3fe6cb8a28540b4f2970f29fd65ff7dcae1e57adcd60a5b3bb56fa682aaefe89c31561ee7d97ff4a6761ee614f21918
languageName: node
linkType: hard

"mdast-util-find-and-replace@npm:^3.0.0":
version: 3.0.1
resolution: "mdast-util-find-and-replace@npm:3.0.1"
Expand Down

0 comments on commit 09b9b1e

Please sign in to comment.