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.

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

feat(Package): convert to strict ESM #1215

Draft
wants to merge 27 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from 26 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
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
2 changes: 1 addition & 1 deletion .eslintrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ overrides:
rules:
import/extensions:
- error
- js: never
- js: ignorePackages
json: always
css: always
mistica-local-rules/use-client: error
4 changes: 2 additions & 2 deletions .github/actions/audit-accessibility/action.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@ inputs:
description: 'Azure Account Key'
required: true
runs:
using: 'node16'
main: 'main.js'
using: 'node20'
main: 'main.cjs'
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const puppeteer = require('puppeteer');
const fs = require('fs');
const mkdirp = require('mkdirp');
const rimraf = require('rimraf');
const {uploadFile} = require('../utils/azure-storage');
const {uploadFile} = require('../utils/azure-storage.cjs');
const core = require('@actions/core');
/** @type any */
const PromisePool = require('es6-promise-pool');
Expand All @@ -30,6 +30,7 @@ process.on('unhandledRejection', (error) => {

const getStories = () => {
console.log('Extracting stories information');
// @ts-ignore
return Object.keys(require('../../../public/stories.json').stories);
};

Expand Down Expand Up @@ -180,7 +181,7 @@ const generateReportForGithub = async (results) => {
}

lines.push('\nℹ️ You can run this locally by executing `yarn audit-accessibility`.');
require('../utils/github').commentPullRequest(lines.join('\n'));
require('../utils/github.cjs').commentPullRequest(lines.join('\n'));
};

const disabledRules = {
Expand Down
4 changes: 2 additions & 2 deletions .github/actions/set-npm-token/action.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@ inputs:
description: 'npm publish token'
required: true
runs:
using: 'node16'
main: 'main.js'
using: 'node20'
main: 'main.cjs'
4 changes: 2 additions & 2 deletions .github/actions/size-stats-message/action.yml
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,5 @@ inputs:
description: 'Mistica lib size overhead gzip (on pr)'
required: true
runs:
using: 'node16'
main: 'main.js'
using: 'node20'
main: 'main.cjs'
4 changes: 2 additions & 2 deletions .github/actions/size-stats/action.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ outputs:
lib-overhead-gzip:
description: 'Mistica lib size overhead (gzip)'
runs:
using: 'node16'
main: 'main.js'
using: 'node20'
main: 'main.cjs'
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const core = require('@actions/core');
const calcSizeStats = require('../../../scripts/size-stats');
const calcSizeStats = require('../../../scripts/size-stats/index.cjs');

const main = async () => {
const sizeStats = calcSizeStats();
Expand Down
4 changes: 2 additions & 2 deletions .github/actions/upload-failed-screenshots/action.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ outputs:
description: 'List of uploaded images: Array<{filename: string, url: string}>'

runs:
using: 'node16'
main: 'main.js'
using: 'node20'
main: 'main.cjs'

branding:
# https://haya14busa.github.io/github-action-brandings/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action
// @ts-check
const core = require('@actions/core');
const storage = require('../utils/azure-storage');
const storage = require('../utils/azure-storage.cjs');
const {basename} = require('path');
const glob = require('glob');
const {commentPullRequest} = require('../utils/github');
const {commentPullRequest} = require('../utils/github.cjs');

const main = async () => {
const filenames = glob.sync(core.getInput('glob') || process.env.INPUT_GLOB);
const filenames = glob.sync(core.getInput('glob') || process.env.INPUT_GLOB || '');

core.info('Upload failed screenshot test diffs');

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ const fetchPullRequestComments = async () => {
issue_number: context.issue.number,
});
}
return null;
return {data: []};
};

const findPullRequestComment = async (firstLine) => {
const {data} = await fetchPullRequestComments();
const comment = data.find((comment) => comment.body.startsWith(firstLine));
const comment = data.find((comment) => comment?.body?.startsWith(firstLine));
return comment ? comment.id : null;
};

Expand Down
7 changes: 0 additions & 7 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
dist/
dist-es/
dist-ts/
coverage/
.directory
.DS_Store
.idea/
*.js.map
*.orig
*.rej
**/node_modules/
Expand All @@ -15,11 +12,7 @@ __diff_output__
storybook-static/
/public
.vercel
src/generated/mistica-icons/index.tsx.txt
reports
css/mistica.css
community.js
community.d.ts

.yarn/*
!.yarn/cache
Expand Down
2 changes: 1 addition & 1 deletion .swcrc
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"env": {
"coreJs": 3.27,
"coreJs": "3.27",
"targets": {
"chrome": "51",
"firefox": "78",
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
2 changes: 1 addition & 1 deletion jest-puppeteer.config.js → jest-puppeteer.config.cjs
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
const config = require('@telefonica/acceptance-testing/jest-puppeteer.config');
const config = require('@telefonica/acceptance-testing/jest-puppeteer.config.js');
module.exports = config;
2 changes: 1 addition & 1 deletion jest.acceptance.config.js → jest.acceptance.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const getMaxWorkers = () => {
};

module.exports = {
...require('./jest.base.config'),
...require('./jest.base.config.cjs'),
displayName: 'acceptance',
maxConcurrency: 1,
testTimeout: 60000,
Expand Down
File renamed without changes.
8 changes: 8 additions & 0 deletions jest.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
module.exports = {
...require('./jest.base.config.cjs'),
projects: [
'<rootDir>/jest.unit.config.cjs',
'<rootDir>/jest.ssr.config.cjs',
'<rootDir>/jest.acceptance.config.cjs',
],
};
8 changes: 0 additions & 8 deletions jest.config.js

This file was deleted.

2 changes: 1 addition & 1 deletion jest.ssr.config.js → jest.ssr.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const getMaxWorkers = () => {
};

module.exports = {
...require('./jest.base.config'),
...require('./jest.base.config.cjs'),
displayName: 'ssr',
maxConcurrency: 1,
testTimeout: 60000,
Expand Down
2 changes: 1 addition & 1 deletion jest.unit.config.js → jest.unit.config.cjs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
...require('./jest.base.config'),
...require('./jest.base.config.cjs'),
testTimeout: 15000,
displayName: 'unit',

Expand Down
60 changes: 37 additions & 23 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,37 +7,51 @@
"url": "https://github.com/Telefonica/mistica-web"
},
"homepage": "https://github.com/Telefonica/mistica-web",
"main": "dist/index.js",
"module": "dist-es/index.js",
"files": [
"dist/**",
"dist-es/**",
"css/**",
"community.d.ts",
"community.js"
"dist/**"
],
"type": "module",
"exports": {
"./dist/*": {
"default": null
},
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"default": "./dist/index.js"
},
"./community": {
"types": "./dist/community/index.d.ts",
"import": "./dist/community/index.js",
"default": "./dist/community/index.js"
},
"./css/*.css": {
"import": "./dist/css/*.css",
"default": "./dist/css/*.css"
}
},
"scripts": {
"test": "jest --config jest.unit.config.js",
"test-acceptance": "test-acceptance",
"test-ssr": "test-acceptance --config jest.ssr.config.js",
"test": "jest --config jest.unit.config.cjs",
"test-acceptance": "JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs test-acceptance --config jest.acceptance.config.cjs",
"test-ssr": "JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs test-acceptance --config jest.ssr.config.cjs",
Comment on lines +35 to +36
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The JEST_PUPPETEER_CONFIG env var tells jest-environment-puppeteer where to find the puppeteer config.
This is needed because we're using an old version of the jest-environment-puppeteer library (v6) and it is unaware of .cjs files. Newer versions don't have this issue but we cannot upgrade because this requires a puppeteer upgrade.

"prettier-check": "prettier --check \"**/*.js\" \"**/*.tsx\" \"**/*.ts\" \"**/*.json\"",
"lint": "eslint --report-unused-disable-directives .",
"ts-check": "tsc --project tsconfig.json --noEmit",
"build": "yarn clean && node scripts/build.js",
"compile": "node scripts/compile.js",
"clean": "rimraf dist && rimraf dist-es && rimraf dist-ts && rimraf css/mistica.css && rimraf community.d.ts && rimraf community.js && rimraf node_modules/.cache",
"clean": "rimraf dist node_modules/.cache",
"prepublishOnly": "node scripts/prepublish-only.js",
"prepack": "yarn build",
"storybook": "storybook dev -p 6006",
"storybook-for-acceptance-tests": "cross-env NODE_ENV=production yarn storybook --ci 2>&1",
"playroom": "playroom start",
"gen-ts-defs": "rimraf dist-ts && tsc --project tsconfig.production.json --emitDeclarationOnly && cp -r dist-ts/src/* dist && rimraf dist-ts",
"gen-ts-defs": "tsc --project tsconfig.production.json --emitDeclarationOnly",
"vercel-build": "VERCEL_PROD_BUILD=1 yarn storybook-static && ./node_modules/.bin/playroom build && FORCE_MOBILE=1 ./node_modules/.bin/playroom build && FORCE_DESKTOP=1 ./node_modules/.bin/playroom build && cp img/favicon.ico public/ && cp img/favicon.svg public/",
"vercel-preview-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/ && cp img/favicon.svg public/",
"storybook-static": "rimraf public && storybook build -s ./.storybook/css/fonts -o public --quiet",
"serve-static-storybook": "node ./scripts/serve-static-storybook.js",
"serve-static-storybook": "node ./scripts/serve-static-storybook.cjs",
"detect-circular-dependencies": "npx dpdm --circular src/index.tsx",
"audit-accessibility": "node .github/actions/audit-accessibility/main.js",
"audit-accessibility": "node .github/actions/audit-accessibility/main.cjs",
"circular-dependencies": "yarn dpdm src/index.tsx --tree=false --warning=false --exit-code circular:1",
"prepare": "husky install"
},
Expand Down Expand Up @@ -98,9 +112,9 @@
"@types/rimraf": "^3.0.2",
"@types/semver-compare": "^1.0.1",
"@types/webpack-env": "^1.18.4",
"@vanilla-extract/jest-transform": "^1.1.5",
"@vanilla-extract/vite-plugin": "^3.9.5",
"@vanilla-extract/webpack-plugin": "^2.3.9",
"@vanilla-extract/jest-transform": "^1.1.9",
"@vanilla-extract/vite-plugin": "^4.0.15",
"@vanilla-extract/webpack-plugin": "^2.3.13",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.12",
"axe-html-reporter": "^2.2.3",
Expand Down Expand Up @@ -147,12 +161,12 @@
"@juggle/resize-observer": "^3.3.1",
"@tef-novum/webview-bridge": "^3.27.0",
"@telefonica/libphonenumber": "^2.9.0",
"@vanilla-extract/css": "^1.15.2",
"@vanilla-extract/dynamic": "^2.1.1",
"@vanilla-extract/sprinkles": "^1.6.2",
"@vanilla-extract/css": "^1.15.5",
"@vanilla-extract/dynamic": "^2.1.2",
"@vanilla-extract/sprinkles": "^1.6.3",
"classnames": "^2.3.1",
"lottie-react": "^2.4.0",
"moment": "^2.29.1",
"moment": "^2.30.1",
"react-autosuggest": "^10.1.0",
"react-datetime": "^3.1.1",
"react-focus-lock": "^2.8.1",
Expand All @@ -162,8 +176,8 @@
"semver-compare": "^1.0.0"
},
"peerDependencies": {
"react": "17.x || 18.x",
"react-dom": "17.x || 18.x"
"react": "18.x",
"react-dom": "18.x"
},
"publishConfig": {
"registry": "https://registry.npmjs.org",
Expand Down
5 changes: 5 additions & 0 deletions packages/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"env": {
"es6": true
}
}
Comment on lines +1 to +5
Copy link
Member Author

@pladaria pladaria Aug 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should update our jest configuration to understand .cjs files.
https://jira.tid.es/browse/WEB-2005

Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import fs from 'fs';
import path from 'path';
import url from 'url';
// eslint-disable-next-line import/extensions
import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.js';
import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.cjs';

/*
By default, this script will look for the design tokens inside .github folder but you may want to clone the mistica-design repo elsewhere.
Expand Down
5 changes: 5 additions & 0 deletions packages/import-mistica-icons/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"env": {
"es6": true
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ const mkdirp = require('mkdirp');
const rimraf = require('rimraf');
const {join, basename} = require('path');
const {execSync} = require('child_process');
// @ts-ignore
const svgr = require('@svgr/core').default;
const prettier = require('prettier');
const {camelCase, kebabCase, upperFirst, uniq} = require('lodash');
const {yellow, green} = require('colors/safe');
const {yellow, green} = require('colors/safe.js');
const glob = require('glob');

const pascalCase = (s) => upperFirst(camelCase(s));
Expand All @@ -15,7 +16,7 @@ const PATH_REPO_ROOT = join(__dirname, '..', '..');
const PATH_CACHE = join(__dirname, 'node_modules', '.cache');
const PATH_MISTICA_ICONS_REPO = join(PATH_CACHE, 'mistica-icons');
const PATH_OUTPUT = join(PATH_REPO_ROOT, 'src', 'generated/mistica-icons');
const PATH_OUTPUT_INDEX_FILENAME = join(PATH_OUTPUT, 'index.tsx.txt');
const PATH_OUTPUT_INDEX_FILENAME = join(PATH_OUTPUT, 'index.tsx');
const GIT_MISTICA_ICONS_BRANCH = 'production';
const GIT_MISTICA_ICONS = '[email protected]:Telefonica/mistica-icons.git';

Expand Down Expand Up @@ -221,9 +222,9 @@ const createAllIconKeywordsSource = () => {
* To update, execute "yarn start" inside "import-mistica-icons"
*/

const iconKeywords: {[key: string]: Array<string>} = ${JSON.stringify(result)};
const keywords: {[key: string]: Array<string>} = ${JSON.stringify(result)};

export default iconKeywords;
export default keywords;
`;

return format(source);
Expand Down Expand Up @@ -252,22 +253,18 @@ const main = async () => {

const index = components
.sort((a, b) => (a[0].toLowerCase() > b[0].toLowerCase() ? 1 : -1))
.map(
([componentName, importName]) =>
`export {default as ${componentName}} from './generated/mistica-icons/${importName}';`
)
.map(([componentName, importName]) => `export {default as ${componentName}} from './${importName}';`)
.join('\n');

fs.writeFileSync(PATH_OUTPUT_INDEX_FILENAME, index, 'utf8');

console.log();
console.log('Generating keywords for each icon.');
const keywordsSource = await createAllIconKeywordsSource();
fs.writeFileSync(join(PATH_OUTPUT, 'icons-keywords.tsx'), keywordsSource);
fs.writeFileSync(join(PATH_OUTPUT, 'keywords.tsx'), keywordsSource);

console.log();
console.log(`Done! (${allIconNames.length} components).`);
console.log(`Copy exports in `, yellow(PATH_OUTPUT_INDEX_FILENAME), ' to src/index.tsx');
console.log();
};

Expand Down
2 changes: 1 addition & 1 deletion packages/import-mistica-icons/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"license": "UNLICENSED",
"private": true,
"scripts": {
"start": "yarn && node index.js"
"start": "yarn && node index.cjs"
},
"dependencies": {
"@svgr/core": "^5.4.0",
Expand Down
File renamed without changes.
Loading
Loading