Build website based on the published code

.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

.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", "..."]
   }
 }

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

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,16 +140,14 @@
     "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",
     "webpack-dev-middleware": "^3.6.1",
     "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",

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

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

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

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

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

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';

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
-    );
   }
 });

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: '<!doctype html>' + code
+    };
+  }
+});
+
+function rename(bundle) {
+  return bundle.name.slice(0, -bundle.type.length) + 'html';
+}

packages/dev/parcel-packager-ssg/package.json → 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"
   },

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);
     }