diff --git a/.circleci/config.yml b/.circleci/config.yml index 29424462d06..4e1284deed3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -174,24 +174,24 @@ workflows: - docs: requires: - build -# - docs-master: -# filters: -# branches: -# only: master -# requires: -# - build + - docs-master: + filters: + branches: + only: master + requires: + - build - deploy: requires: - lint - test - storybook - docs -# - deploy-master: -# filters: -# branches: -# only: master -# requires: -# - docs-master + - deploy-master: + filters: + branches: + only: master + requires: + - docs-master - comment: requires: - deploy 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/Makefile b/Makefile index 3a5f5f67491..c939a74d34b 100644 --- a/Makefile +++ b/Makefile @@ -95,5 +95,5 @@ website: yarn build:docs --public-url /reactspectrum/$$(git rev-parse HEAD)/docs --dist-dir dist/$$(git rev-parse HEAD)/docs website-master: - yarn build:docs --dist-dir dist/master/docs + node scripts/buildWebsite.js cp packages/dev/docs/pages/robots.txt dist/master/docs/robots.txt diff --git a/package.json b/package.json index b75611ce8fe..fd8bdff9697 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@parcel/transformer-inline": "nightly", "@parcel/transformer-svg-react": "nightly", "@spectrum-css/vars": "^2.3.0", + "@spectrum-css/component-builder": "^1.0.0", "@storybook/addon-a11y": "^5.2.1", "@storybook/addon-actions": "^5.2.1", "@storybook/addon-info": "^5.2.1", @@ -139,6 +140,7 @@ "stylus": "^0.54.5", "stylus-loader": "^3.0.1", "svg-stylus": "^0.0.5", + "tempy": "^0.5.0", "typescript": "^3.8.3", "url-loader": "^1.1.2", "webpack": "^4.29.6", @@ -146,9 +148,6 @@ "webpack-hot-middleware": "^2.24.3", "wsrun": "^5.0.0" }, - "dependencies": { - "@spectrum-css/component-builder": "^1.0.0" - }, "resolutions": { "@babel/core": "7.9.0", "@babel/runtime": "7.9.0", diff --git a/packages/@react-aria/overlays/docs/DismissButton.mdx b/packages/@react-aria/overlays/docs/DismissButton.mdx index 4b1e58e1ad3..472591841f7 100644 --- a/packages/@react-aria/overlays/docs/DismissButton.mdx +++ b/packages/@react-aria/overlays/docs/DismissButton.mdx @@ -12,7 +12,7 @@ export default Layout; import docs from 'docs:@react-aria/overlays'; import {HeaderInfo, PropTable} from '@react-spectrum/docs'; -import packageData from '../package.json'; +import packageData from '@react-aria/overlays/package.json'; --- category: Overlays diff --git a/packages/@react-aria/overlays/docs/useModal.mdx b/packages/@react-aria/overlays/docs/useModal.mdx index 7d9649d0d79..17f17bf5ecc 100644 --- a/packages/@react-aria/overlays/docs/useModal.mdx +++ b/packages/@react-aria/overlays/docs/useModal.mdx @@ -12,7 +12,7 @@ export default Layout; import docs from 'docs:@react-aria/overlays'; import {FunctionAPI, HeaderInfo} from '@react-spectrum/docs'; -import packageData from '../package.json'; +import packageData from '@react-aria/overlays/package.json'; --- category: Overlays diff --git a/packages/@react-aria/overlays/docs/useOverlay.mdx b/packages/@react-aria/overlays/docs/useOverlay.mdx index 62d674c1de3..7e25da97a9c 100644 --- a/packages/@react-aria/overlays/docs/useOverlay.mdx +++ b/packages/@react-aria/overlays/docs/useOverlay.mdx @@ -12,7 +12,7 @@ export default Layout; import docs from 'docs:@react-aria/overlays'; import {FunctionAPI, HeaderInfo} from '@react-spectrum/docs'; -import packageData from '../package.json'; +import packageData from '@react-aria/overlays/package.json'; --- category: Overlays diff --git a/packages/@react-aria/overlays/docs/useOverlayPosition.mdx b/packages/@react-aria/overlays/docs/useOverlayPosition.mdx index 3bf8112b464..93f06381c81 100644 --- a/packages/@react-aria/overlays/docs/useOverlayPosition.mdx +++ b/packages/@react-aria/overlays/docs/useOverlayPosition.mdx @@ -12,7 +12,7 @@ export default Layout; import docs from 'docs:@react-aria/overlays'; import {FunctionAPI, HeaderInfo} from '@react-spectrum/docs'; -import packageData from '../package.json'; +import packageData from '@react-aria/overlays/package.json'; --- category: Overlays diff --git a/packages/@react-aria/overlays/docs/usePreventScroll.mdx b/packages/@react-aria/overlays/docs/usePreventScroll.mdx index ec9d08f151d..038d28b8a80 100644 --- a/packages/@react-aria/overlays/docs/usePreventScroll.mdx +++ b/packages/@react-aria/overlays/docs/usePreventScroll.mdx @@ -12,7 +12,7 @@ export default Layout; import docs from 'docs:@react-aria/overlays'; import {FunctionAPI, HeaderInfo} from '@react-spectrum/docs'; -import packageData from '../package.json'; +import packageData from '@react-aria/overlays/package.json'; --- category: Overlays diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 0cbb8b900ee..7cf18583ec8 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -10,7 +10,7 @@ governing permissions and limitations under the License. --> import {Layout} from '@react-spectrum/docs'; export default Layout; -import DialogAnatomy from '../images/DialogAnatomy.svg'; +import DialogAnatomy from './images/DialogAnatomy.svg'; import docs from 'docs:@react-spectrum/dialog'; import {Image, HeaderInfo, PropTable} from '@react-spectrum/docs'; import packageData from '@react-spectrum/dialog/package.json'; diff --git a/packages/@react-spectrum/dialog/images/DialogAnatomy.svg b/packages/@react-spectrum/dialog/docs/images/DialogAnatomy.svg similarity index 100% rename from packages/@react-spectrum/dialog/images/DialogAnatomy.svg rename to packages/@react-spectrum/dialog/docs/images/DialogAnatomy.svg 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-optimizer-ssg/SSGOptimizer.js b/packages/dev/parcel-optimizer-ssg/SSGOptimizer.js new file mode 100644 index 00000000000..d675d5a65f5 --- /dev/null +++ b/packages/dev/parcel-optimizer-ssg/SSGOptimizer.js @@ -0,0 +1,77 @@ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +const {Optimizer} = require('@parcel/plugin'); +const React = require('react'); +const ReactDOMServer = require('react-dom/server'); +const requireFromString = require('require-from-string'); +const {blobToString, urlJoin} = require('@parcel/utils'); + +module.exports = new Optimizer({ + async optimize({bundle, bundleGraph, contents, map}) { + let mainAsset = bundle.getMainEntry(); + if (!mainAsset || !mainAsset.meta.isMDX) { + return {contents, map}; + } + + let js = await blobToString(contents); + let Component = requireFromString(js, mainAsset.filePath).default; + let bundles = bundleGraph.getSiblingBundles(bundle).filter(b => !b.isInline).reverse(); + + let pages = []; + bundleGraph.traverseBundles(b => { + let mainAsset = b.getMainEntry(); + if (mainAsset && mainAsset.meta.isMDX) { + let meta = mainAsset.meta; + pages.push({ + url: urlJoin(b.target.publicUrl, rename(b)), + name: rename(b), + title: meta.title, + category: meta.category + }); + } + }); + + let name = rename(bundle); + let code = ReactDOMServer.renderToStaticMarkup( + React.createElement(Component, { + scripts: bundles.filter(b => b.type === 'js' && !b.isInline).map(b => ({ + type: b.env.outputFormat === 'esmodule' ? 'module' : undefined, + url: urlJoin(b.target.publicUrl, b.name) + })), + styles: bundles.filter(b => b.type === 'css').map(b => ({ + url: urlJoin(b.target.publicUrl, b.name) + })), + pages, + currentPage: { + category: mainAsset.meta.category, + name, + title: mainAsset.meta.title, + url: urlJoin(bundle.target.publicUrl, name), + description: mainAsset.meta.description, + keywords: mainAsset.meta.keywords + }, + toc: mainAsset.meta.toc, + publicUrl: bundle.target.publicUrl + }) + ); + + return { + type: 'html', + contents: '' + code + }; + } +}); + +function rename(bundle) { + return bundle.name.slice(0, -bundle.type.length) + 'html'; +} diff --git a/packages/dev/parcel-packager-ssg/package.json b/packages/dev/parcel-optimizer-ssg/package.json similarity index 81% rename from packages/dev/parcel-packager-ssg/package.json rename to packages/dev/parcel-optimizer-ssg/package.json index f8cb955c572..0a43e68e85d 100644 --- a/packages/dev/parcel-packager-ssg/package.json +++ b/packages/dev/parcel-optimizer-ssg/package.json @@ -1,8 +1,8 @@ { - "name": "parcel-packager-ssg", + "name": "parcel-optimizer-ssg", "version": "1.0.0", "private": true, - "main": "SSGPackager.js", + "main": "SSGOptimizer.js", "engines": { "parcel": ">= 2.0.0-alpha.3.2" }, diff --git a/packages/dev/parcel-packager-docs/DocsPackager.js b/packages/dev/parcel-packager-docs/DocsPackager.js index 2f1b26e4ea6..797b3d68a03 100644 --- a/packages/dev/parcel-packager-docs/DocsPackager.js +++ b/packages/dev/parcel-packager-docs/DocsPackager.js @@ -25,7 +25,7 @@ module.exports = new Packager({ let code = new Map(await Promise.all(promises)); let cache = new Map(); try { - var result = processAsset(bundle.getMainEntry()); + var result = processAsset(bundle.getEntryAssets()[0]); } catch (err) { console.log(err.stack); } diff --git a/packages/dev/parcel-packager-ssg/SSGPackager.js b/packages/dev/parcel-packager-ssg/SSGPackager.js deleted file mode 100644 index 3505a84f562..00000000000 --- a/packages/dev/parcel-packager-ssg/SSGPackager.js +++ /dev/null @@ -1,96 +0,0 @@ -/* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -const {Packager} = 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 {Readable} = require('stream'); - -module.exports = new Packager({ - async package({bundle, bundleGraph, getInlineBundleContents}) { - 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