From 3202eabbf284d1bb4de04a8cd4cc88be3e6444a6 Mon Sep 17 00:00:00 2001 From: smurrayatwork Date: Tue, 23 Jun 2020 15:09:26 -0400 Subject: [PATCH 1/3] Fixes ES Module exports to add file extensions. --- react/gulpfile.js | 31 +++++++++++++++++-- react/package.json | 5 +-- react/src/components/forms/Form/index.js | 2 +- react/src/components/forms/Input/error.js | 2 +- react/src/components/forms/Input/index.js | 2 +- .../components/organisms/GenTeaser/index.js | 2 +- 6 files changed, 36 insertions(+), 8 deletions(-) diff --git a/react/gulpfile.js b/react/gulpfile.js index 26408b1d8f..178ae0fb1b 100644 --- a/react/gulpfile.js +++ b/react/gulpfile.js @@ -68,6 +68,31 @@ function resolvePath(sourcePath, currentFile, opts) { if (check.test(sourcePath)) { const matches = check.exec(sourcePath); resolvedPath = `${rootPath}${matches[1]}`; + // ES Modules need to list out the extension on the end of the path, + // otherwise index.js will be used instead of index.mjs. + if (opts.hasOwnProperty('isES5') && opts.isES5 === false) { + // List of exports that are files and not directories. + const excludes = [ + 'Input/error', + 'Input/context', + 'Input/utility', + 'Input/validate', + 'TabContainer/tab', + 'TabContainer/tab-body', + 'TabContainer/context', + 'utilities/componentPropTypeCheck', + 'Breadcrumb/item', + 'GenTeaser/utils' + ]; + // If the current path is a file and not a directory... + if (excludes.some((rule) => sourcePath.includes(rule))) { + // Add the .mjs extension. + resolvedPath = `${resolvedPath}.mjs`; + } else { + // Else, add the path to the index.mjs file the ES module needs. + resolvedPath = `${resolvedPath}/index.mjs`; + } + } } }); return resolvedPath || sourcePath; @@ -112,7 +137,8 @@ function transpileES5() { 'module-resolver', { resolvePath, - alias: aliases + alias: aliases, + isES5: true } ], '@babel/plugin-proposal-optional-chaining', @@ -170,7 +196,8 @@ function transpileES6() { 'module-resolver', { resolvePath, - alias: aliases + alias: aliases, + isES5: false } ], '@babel/plugin-proposal-optional-chaining', diff --git a/react/package.json b/react/package.json index 7995d86b65..a711bd65f0 100644 --- a/react/package.json +++ b/react/package.json @@ -3,8 +3,8 @@ "description": "React versions of Mayflower design system UI components", "author": "Massachusetts Digital Services (MDS)", "version": "10.0.0", - "main": "dist/index.js", - "module": "dist/index.mjs", + "main": "./dist/index.mjs", + "module": "./dist/index.mjs", "sideEffects": [ "**/*.css", "**/*.scss" @@ -13,6 +13,7 @@ "dist" ], "exports": { + "import": "./dist/index.mjs", "require": "./dist/index.js", "default": "./dist/index.mjs" }, diff --git a/react/src/components/forms/Form/index.js b/react/src/components/forms/Form/index.js index 6ff1ecd4fe..527e8a65dc 100644 --- a/react/src/components/forms/Form/index.js +++ b/react/src/components/forms/Form/index.js @@ -6,7 +6,7 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { FormContext } from '../Input/context'; +import { FormContext } from 'MayflowerReactForms/Input/context'; /* eslint-disable react/no-unused-state */ diff --git a/react/src/components/forms/Input/error.js b/react/src/components/forms/Input/error.js index c10e05f0b2..53b54373b0 100644 --- a/react/src/components/forms/Input/error.js +++ b/react/src/components/forms/Input/error.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ErrorMessage from 'MayflowerReactForms/ErrorMessage'; -import { InputContext } from './context'; +import { InputContext } from 'MayflowerReactForms/Input/context'; class Error extends React.Component { displayErrorMessage = (inputContext) => { diff --git a/react/src/components/forms/Input/index.js b/react/src/components/forms/Input/index.js index b1122e00ae..4574096d50 100644 --- a/react/src/components/forms/Input/index.js +++ b/react/src/components/forms/Input/index.js @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import Label from 'MayflowerReactForms/Label'; -import { InputContext, FormContext } from './context'; +import { InputContext, FormContext } from 'MayflowerReactForms/Input/context'; /* eslint-disable react/no-unused-state */ diff --git a/react/src/components/organisms/GenTeaser/index.js b/react/src/components/organisms/GenTeaser/index.js index 80cb0d31cd..05b4214bd9 100644 --- a/react/src/components/organisms/GenTeaser/index.js +++ b/react/src/components/organisms/GenTeaser/index.js @@ -30,7 +30,7 @@ import PhoneNumber from 'MayflowerReactContact/PhoneNumber'; import Address from 'MayflowerReactContact/Address'; import TeaserSearch from 'MayflowerReactGenTeaser/TeaserSearch'; import TeaserOrgs from 'MayflowerReactGenTeaser/TeaserOrgs'; -import { buildUrl } from './utils'; +import { buildUrl } from 'MayflowerReactOrganisms/GenTeaser/utils'; const GenTeaser = (props) => { const { From 57c0b6493d9d808b6241195a0dd18df0d6a1a4d7 Mon Sep 17 00:00:00 2001 From: smurrayatwork Date: Wed, 24 Jun 2020 10:59:40 -0400 Subject: [PATCH 2/3] WIP fix for react exports. --- react/gulpfile.js | 50 +++++++++++++++++++++++++--------------------- react/package.json | 11 +++++----- 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/react/gulpfile.js b/react/gulpfile.js index 178ae0fb1b..7ee2008ece 100644 --- a/react/gulpfile.js +++ b/react/gulpfile.js @@ -1,11 +1,13 @@ +import gulp from 'gulp'; +import babel from 'gulp-babel'; +import rename from 'gulp-rename'; +import del from 'del'; +import path from 'path'; +import { fileURLToPath } from 'url'; + const { src, dest, series, parallel -} = require('gulp'); -const babel = require('gulp-babel'); -const rename = require('gulp-rename'); -const del = require('del'); -const path = require('path'); - +} = gulp; function clean() { return del(['dist']); } @@ -60,7 +62,7 @@ const sources = [ ]; function resolvePath(sourcePath, currentFile, opts) { - const entryPoint = path.resolve(__dirname, './src/index.js'); + const entryPoint = path.resolve(path.dirname(fileURLToPath(import.meta.url)), './src/index.js'); const rootPath = currentFile === entryPoint ? './' : '../'; let resolvedPath = null; Object.keys(opts.alias).forEach((alias) => { @@ -70,7 +72,7 @@ function resolvePath(sourcePath, currentFile, opts) { resolvedPath = `${rootPath}${matches[1]}`; // ES Modules need to list out the extension on the end of the path, // otherwise index.js will be used instead of index.mjs. - if (opts.hasOwnProperty('isES5') && opts.isES5 === false) { + if (opts.hasOwnProperty('isES5') && opts.isES5 === true) { // List of exports that are files and not directories. const excludes = [ 'Input/error', @@ -87,10 +89,10 @@ function resolvePath(sourcePath, currentFile, opts) { // If the current path is a file and not a directory... if (excludes.some((rule) => sourcePath.includes(rule))) { // Add the .mjs extension. - resolvedPath = `${resolvedPath}.mjs`; + resolvedPath = `${resolvedPath}.cjs`; } else { // Else, add the path to the index.mjs file the ES module needs. - resolvedPath = `${resolvedPath}/index.mjs`; + resolvedPath = `${resolvedPath}/index.cjs`; } } } @@ -100,11 +102,7 @@ function resolvePath(sourcePath, currentFile, opts) { function transpileES5() { return src(sources) - .pipe(rename((p) => { - const splitPath = p.dirname.split('/'); - // eslint-disable-next-line no-param-reassign - p.dirname = splitPath[splitPath.length - 1]; - })) + .pipe(babel({ presets: [ [ @@ -160,10 +158,22 @@ function transpileES5() { 'babel-plugin-add-module-exports' ] })) + .pipe(rename((p) => { + const splitPath = p.dirname.split('/'); + // eslint-disable-next-line no-param-reassign + p.dirname = splitPath[splitPath.length - 1]; + // eslint-disable-next-line no-param-reassign + p.extname = '.cjs'; + })) .pipe(dest('dist')); } function transpileES6() { return src(sources) + .pipe(rename((p) => { + const splitPath = p.dirname.split('/'); + // eslint-disable-next-line no-param-reassign + p.dirname = splitPath[splitPath.length - 1]; + })) .pipe(babel({ presets: [ [ @@ -218,13 +228,7 @@ function transpileES6() { ] ] })) - .pipe(rename((p) => { - const splitPath = p.dirname.split('/'); - // eslint-disable-next-line no-param-reassign - p.dirname = splitPath[splitPath.length - 1]; - // eslint-disable-next-line no-param-reassign - p.extname = '.mjs'; - })) + .pipe(dest('dist')); } -exports.default = series(clean, parallel(transpileES5, transpileES6, styles, icons)); +export default series(clean, parallel(transpileES5, transpileES6, styles, icons)); diff --git a/react/package.json b/react/package.json index a711bd65f0..ccd8344116 100644 --- a/react/package.json +++ b/react/package.json @@ -3,8 +3,9 @@ "description": "React versions of Mayflower design system UI components", "author": "Massachusetts Digital Services (MDS)", "version": "10.0.0", - "main": "./dist/index.mjs", - "module": "./dist/index.mjs", + "main": "./dist/index.js", + "module": "./dist/index.js", + "type": "module", "sideEffects": [ "**/*.css", "**/*.scss" @@ -13,9 +14,9 @@ "dist" ], "exports": { - "import": "./dist/index.mjs", - "require": "./dist/index.js", - "default": "./dist/index.mjs" + "import": "./dist/index.js", + "require": "./dist/index.cjs", + "default": "./dist/index.js" }, "scripts": { "backstop:test": "docker-compose run backstop test --rm", From 3a08ba5e9322d2c3ba27265fca31f3e355a41994 Mon Sep 17 00:00:00 2001 From: smurrayatwork Date: Thu, 25 Jun 2020 13:30:21 -0400 Subject: [PATCH 3/3] Revert "WIP fix for react exports." This reverts commit 57c0b6493d9d808b6241195a0dd18df0d6a1a4d7. --- react/gulpfile.js | 50 +++++++++++++++++++++------------------------- react/package.json | 11 +++++----- 2 files changed, 28 insertions(+), 33 deletions(-) diff --git a/react/gulpfile.js b/react/gulpfile.js index 7ee2008ece..178ae0fb1b 100644 --- a/react/gulpfile.js +++ b/react/gulpfile.js @@ -1,13 +1,11 @@ -import gulp from 'gulp'; -import babel from 'gulp-babel'; -import rename from 'gulp-rename'; -import del from 'del'; -import path from 'path'; -import { fileURLToPath } from 'url'; - const { src, dest, series, parallel -} = gulp; +} = require('gulp'); +const babel = require('gulp-babel'); +const rename = require('gulp-rename'); +const del = require('del'); +const path = require('path'); + function clean() { return del(['dist']); } @@ -62,7 +60,7 @@ const sources = [ ]; function resolvePath(sourcePath, currentFile, opts) { - const entryPoint = path.resolve(path.dirname(fileURLToPath(import.meta.url)), './src/index.js'); + const entryPoint = path.resolve(__dirname, './src/index.js'); const rootPath = currentFile === entryPoint ? './' : '../'; let resolvedPath = null; Object.keys(opts.alias).forEach((alias) => { @@ -72,7 +70,7 @@ function resolvePath(sourcePath, currentFile, opts) { resolvedPath = `${rootPath}${matches[1]}`; // ES Modules need to list out the extension on the end of the path, // otherwise index.js will be used instead of index.mjs. - if (opts.hasOwnProperty('isES5') && opts.isES5 === true) { + if (opts.hasOwnProperty('isES5') && opts.isES5 === false) { // List of exports that are files and not directories. const excludes = [ 'Input/error', @@ -89,10 +87,10 @@ function resolvePath(sourcePath, currentFile, opts) { // If the current path is a file and not a directory... if (excludes.some((rule) => sourcePath.includes(rule))) { // Add the .mjs extension. - resolvedPath = `${resolvedPath}.cjs`; + resolvedPath = `${resolvedPath}.mjs`; } else { // Else, add the path to the index.mjs file the ES module needs. - resolvedPath = `${resolvedPath}/index.cjs`; + resolvedPath = `${resolvedPath}/index.mjs`; } } } @@ -102,7 +100,11 @@ function resolvePath(sourcePath, currentFile, opts) { function transpileES5() { return src(sources) - + .pipe(rename((p) => { + const splitPath = p.dirname.split('/'); + // eslint-disable-next-line no-param-reassign + p.dirname = splitPath[splitPath.length - 1]; + })) .pipe(babel({ presets: [ [ @@ -158,22 +160,10 @@ function transpileES5() { 'babel-plugin-add-module-exports' ] })) - .pipe(rename((p) => { - const splitPath = p.dirname.split('/'); - // eslint-disable-next-line no-param-reassign - p.dirname = splitPath[splitPath.length - 1]; - // eslint-disable-next-line no-param-reassign - p.extname = '.cjs'; - })) .pipe(dest('dist')); } function transpileES6() { return src(sources) - .pipe(rename((p) => { - const splitPath = p.dirname.split('/'); - // eslint-disable-next-line no-param-reassign - p.dirname = splitPath[splitPath.length - 1]; - })) .pipe(babel({ presets: [ [ @@ -228,7 +218,13 @@ function transpileES6() { ] ] })) - + .pipe(rename((p) => { + const splitPath = p.dirname.split('/'); + // eslint-disable-next-line no-param-reassign + p.dirname = splitPath[splitPath.length - 1]; + // eslint-disable-next-line no-param-reassign + p.extname = '.mjs'; + })) .pipe(dest('dist')); } -export default series(clean, parallel(transpileES5, transpileES6, styles, icons)); +exports.default = series(clean, parallel(transpileES5, transpileES6, styles, icons)); diff --git a/react/package.json b/react/package.json index ccd8344116..a711bd65f0 100644 --- a/react/package.json +++ b/react/package.json @@ -3,9 +3,8 @@ "description": "React versions of Mayflower design system UI components", "author": "Massachusetts Digital Services (MDS)", "version": "10.0.0", - "main": "./dist/index.js", - "module": "./dist/index.js", - "type": "module", + "main": "./dist/index.mjs", + "module": "./dist/index.mjs", "sideEffects": [ "**/*.css", "**/*.scss" @@ -14,9 +13,9 @@ "dist" ], "exports": { - "import": "./dist/index.js", - "require": "./dist/index.cjs", - "default": "./dist/index.js" + "import": "./dist/index.mjs", + "require": "./dist/index.js", + "default": "./dist/index.mjs" }, "scripts": { "backstop:test": "docker-compose run backstop test --rm",