From 57c0b6493d9d808b6241195a0dd18df0d6a1a4d7 Mon Sep 17 00:00:00 2001 From: smurrayatwork Date: Wed, 24 Jun 2020 10:59:40 -0400 Subject: [PATCH] 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",