From f0d2890ecb7ce5e31bc2262cd9cf50dc9a26f40d Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Tue, 7 Jul 2020 18:51:59 -0700 Subject: [PATCH 1/5] New Parcel build strategy --- .parcelrc | 6 +- packages/dev/parcel-namer-docs/DocsNamer.js | 45 +- .../SSGOptimizer.js} | 64 +- .../package.json | 4 +- .../dev/parcel-packager-docs/DocsPackager.js | 2 +- .../CSSEnvTransformer.js | 31 + .../parcel-transformer-css-env/package.json | 12 + .../MDXTransformer.js | 130 +- ...7.10.3.patch => @babel+types+7.10.4.patch} | 0 yarn.lock | 2431 +++++++++-------- 10 files changed, 1455 insertions(+), 1270 deletions(-) rename packages/dev/{parcel-packager-ssg/SSGPackager.js => parcel-optimizer-ssg/SSGOptimizer.js} (50%) rename packages/dev/{parcel-packager-ssg => parcel-optimizer-ssg}/package.json (81%) create mode 100644 packages/dev/parcel-transformer-css-env/CSSEnvTransformer.js create mode 100644 packages/dev/parcel-transformer-css-env/package.json rename patches/{@babel+types+7.10.3.patch => @babel+types+7.10.4.patch} (100%) diff --git a/.parcelrc b/.parcelrc index 1210c1aff2f..5bc97f15cb3 100644 --- a/.parcelrc +++ b/.parcelrc @@ -5,14 +5,14 @@ "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"], "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"], "*.mdx": ["parcel-transformer-mdx-docs"], - "*.svg": ["@parcel/transformer-svg-react"] + "*.svg": ["@parcel/transformer-svg-react"], + "*.css": ["...", "parcel-transformer-css-env"] }, "namers": ["parcel-namer-docs", "..."], "packagers": { "*.json": "parcel-packager-docs", - "*.html": "parcel-packager-ssg" }, "optimizers": { - "*.html": [] + "*.js": ["parcel-optimizer-ssg", "..."] } } diff --git a/packages/dev/parcel-namer-docs/DocsNamer.js b/packages/dev/parcel-namer-docs/DocsNamer.js index 3e46b826d65..a7aab53f716 100644 --- a/packages/dev/parcel-namer-docs/DocsNamer.js +++ b/packages/dev/parcel-namer-docs/DocsNamer.js @@ -15,27 +15,36 @@ const path = require('path'); module.exports = new Namer({ name({bundle, bundleGraph, options}) { - if (!bundle.isEntry || bundle.type !== 'html') { - // let default namer handle it - return null; - } + let main = bundle.getMainEntry(); + if (main && main.meta.isMDX) { + // A docs page. Generate the correct URL for it based on its location. + // Get relative path to entry file from the project root (will be e.g. `packages/@react-spectrum/button/docs/Button.mdx`) + let entryFilePath = path.relative(options.projectRoot, main.filePath); + let parts = entryFilePath.split(path.sep); - // Get relative path to entry file from the project root (will be e.g. `packages/@react-spectrum/button/docs/Button.mdx`) - let entryFilePath = path.relative(options.projectRoot, bundle.getMainEntry().filePath); - let parts = entryFilePath.split(path.sep); + let basename = path.basename(entryFilePath, path.extname(entryFilePath)) + '.' + bundle.type; - let basename = path.basename(entryFilePath, path.extname(entryFilePath)) + '.html'; + // For dev files, simply /PageName.html or /dir/PageName.html + if (parts[1] === 'dev') { + return path.join(...parts.slice(4, -1), basename); + } - // For dev files, simply /PageName.html or /dir/PageName.html - if (parts[1] === 'dev') { - return path.join(...parts.slice(4, -1), basename); + // For @namespace package files, urls will be /${namespace}/PageName.html + return path.join( + parts[1].replace(/^@/, ''), + ...parts.slice(4, -1), + basename + ); + } else if (!bundle.target || !bundle.target.distEntry) { + // An asset. Should end up hashed in the root. + let bundleGroup = bundleGraph.getBundleGroupsContainingBundle(bundle)[0]; + let bundleGroupBundles = bundleGraph.getBundlesInBundleGroup(bundleGroup); + let mainBundle = bundleGroupBundles.find(b => b.getEntryAssets().some(a => a.id === bundleGroup.entryAssetId)); + let entry = mainBundle.getEntryAssets().find(a => a.id === bundleGroup.entryAssetId).filePath; + return path.basename(entry, path.extname(entry)) + '.' + bundle.hashReference + '.' + bundle.type; + } else { + // Let the default namer handle it. + return null; } - - // For @namespace package files, urls will be /${namespace}/PageName.html - return path.join( - parts[1].replace(/^@/, ''), - ...parts.slice(4, -1), - basename - ); } }); diff --git a/packages/dev/parcel-packager-ssg/SSGPackager.js b/packages/dev/parcel-optimizer-ssg/SSGOptimizer.js similarity index 50% rename from packages/dev/parcel-packager-ssg/SSGPackager.js rename to packages/dev/parcel-optimizer-ssg/SSGOptimizer.js index 3505a84f562..bd4137c076f 100644 --- a/packages/dev/parcel-packager-ssg/SSGPackager.js +++ b/packages/dev/parcel-optimizer-ssg/SSGOptimizer.js @@ -10,62 +10,39 @@ * governing permissions and limitations under the License. */ -const {Packager} = require('@parcel/plugin'); +const {Optimizer} = require('@parcel/plugin'); const React = require('react'); const ReactDOMServer = require('react-dom/server'); const requireFromString = require('require-from-string'); -const {bufferStream, urlJoin} = require('@parcel/utils'); +const {blobToString, urlJoin} = require('@parcel/utils'); const {Readable} = require('stream'); -module.exports = new Packager({ - async package({bundle, bundleGraph, getInlineBundleContents}) { +module.exports = new Optimizer({ + async optimize({bundle, bundleGraph, contents, map}) { let mainAsset = bundle.getMainEntry(); - let inlineBundle; - bundleGraph.traverseBundles((bundle, context, {stop}) => { - let entry = bundle.getMainEntry(); - if (bundle.type === 'js' && bundle.isInline && entry && entry.filePath === mainAsset.filePath) { - inlineBundle = bundle; - stop(); - } - }); - - let bundleResult = await getInlineBundleContents(inlineBundle, bundleGraph); - let contents = (bundleResult.contents instanceof Readable ? await bufferStream(bundleResult.contents) : bundleResult.contents).toString(); - let Component = requireFromString(contents, mainAsset.filePath).default; - - // Insert references to sibling bundles. For example, a