WRP-1050: Refactored docs to ES Modules

gatsby-config.js

@@ -1,8 +1,22 @@
 /* eslint-env node */
 /* eslint-disable camelcase */
-const path = require('path');
+import path from 'path';
+import {fileURLToPath} from 'url';
 
-module.exports = {
+export function getFilename (metaUrl) {
+	const __filenameVar = fileURLToPath(metaUrl);
+
+	return __filenameVar;
+}
+export function getDirname (metaUrl) {
+	const __dirnameVar = path.dirname(getFilename(metaUrl));
+
+	return __dirnameVar;
+}
+
+const __dirnameConst = getDirname(import.meta.url);
+
+export default {
 	pathPrefix: '/',
 	siteMetadata: {
 		title: 'Enact'
@@ -28,7 +42,7 @@ module.exports = {
 			resolve: 'gatsby-source-filesystem',
 			options: {
 				name: 'pages',
-				path: path.join(__dirname, 'src', 'pages')
+				path: path.join(__dirnameConst, 'src', 'pages')
 			}
 		},
 		{

gatsby-node.js

@@ -2,11 +2,11 @@
 // const GracefulFSPlugin = require('graceful-fs-webpack-plugin');
 // const autoprefixer = require('autoprefixer');
 // const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");
-const webpack = require('webpack');
-const crypto = require('crypto');
-const path = require('path');
+import crypto from 'crypto';
+import path from 'path';
+import webpack from 'webpack';
 
-exports.onCreateWebpackConfig = ({
+export const onCreateWebpackConfig = ({
 	stage,
 	loaders,
 	plugins,
@@ -75,7 +75,7 @@ exports.modifyWebpackConfig = ({config, stage}) => {
 };
 */
 
-exports.onCreateBabelConfig = ({actions}) => {
+export const onCreateBabelConfig = ({actions}) => {
 	actions.setBabelPlugin({
 		name: '@babel/plugin-transform-react-jsx',
 		options: {
@@ -97,7 +97,7 @@ function createSlug ({relativePath}) {
 	return slug;
 }
 
-async function onCreateNode ({node, actions, getNode, loadNodeContent}) {
+export async function onCreateNode ({node, actions, getNode, loadNodeContent}) {
 	const {createNodeField, createNode, createParentChildLink} = actions;
 	let slug;
 	if (node.internal.type === 'MarkdownRemark') {
@@ -141,9 +141,7 @@ async function onCreateNode ({node, actions, getNode, loadNodeContent}) {
 	}
 }
 
-exports.onCreateNode = onCreateNode;
-
-exports.createPages = ({graphql, actions}) => {
+export const createPages = ({graphql, actions}) => {
 	const {createPage} = actions;
 
 	// Create a regex that will include siblings and (if applicable) parent's siblings, but not

package.json

@@ -1,6 +1,7 @@
 {
   "name": "docs",
   "description": "Enact JavaScript Framework Docs",
+  "type": "module",
   "version": "4.5.0",
   "engines": {
     "node": ">=18"
@@ -20,28 +21,28 @@
     "css-loader": "^6.7.3",
     "elasticlunr": "^0.9.5",
     "find-cache-dir": "^3.3.2",
-    "gatsby": "^5.8.0",
-    "gatsby-plugin-catch-links": "^5.8.0",
-    "gatsby-plugin-google-gtag": "^5.8.0",
-    "gatsby-plugin-image": "^3.8.0",
-    "gatsby-plugin-less": "^7.8.0",
-    "gatsby-plugin-manifest": "^5.8.0",
-    "gatsby-plugin-offline": "^6.8.0",
-    "gatsby-plugin-postcss": "^6.8.0",
-    "gatsby-plugin-react-helmet": "^6.8.0",
-    "gatsby-plugin-sharp": "^5.8.1",
-    "gatsby-plugin-typography": "^5.8.0",
-    "gatsby-remark-autolink-headers": "^6.8.0",
-    "gatsby-remark-copy-linked-files": "^6.8.0",
+    "gatsby": "^5.10.0",
+    "gatsby-plugin-catch-links": "^5.10.0",
+    "gatsby-plugin-google-gtag": "^5.10.0",
+    "gatsby-plugin-image": "^3.10.0",
+    "gatsby-plugin-less": "^7.10.0",
+    "gatsby-plugin-manifest": "^5.10.0",
+    "gatsby-plugin-offline": "^6.10.0",
+    "gatsby-plugin-postcss": "^6.10.0",
+    "gatsby-plugin-react-helmet": "^6.10.0",
+    "gatsby-plugin-sharp": "^5.10.0",
+    "gatsby-plugin-typography": "^5.10.0",
+    "gatsby-remark-autolink-headers": "^6.10.0",
+    "gatsby-remark-copy-linked-files": "^6.10.0",
     "gatsby-remark-embed-youtube": "0.0.7",
-    "gatsby-remark-images": "^7.8.0",
-    "gatsby-remark-prismjs": "^7.8.0",
-    "gatsby-remark-responsive-iframe": "^6.8.0",
-    "gatsby-remark-smartypants": "^6.8.0",
-    "gatsby-source-filesystem": "^5.8.0",
-    "gatsby-transformer-javascript-frontmatter": "^5.8.0",
-    "gatsby-transformer-json": "^5.8.0",
-    "gatsby-transformer-remark": "^6.8.0",
+    "gatsby-remark-images": "^7.10.0",
+    "gatsby-remark-prismjs": "^7.10.0",
+    "gatsby-remark-responsive-iframe": "^6.10.0",
+    "gatsby-remark-smartypants": "^6.10.0",
+    "gatsby-source-filesystem": "^5.10.0",
+    "gatsby-transformer-javascript-frontmatter": "^5.10.0",
+    "gatsby-transformer-json": "^5.10.0",
+    "gatsby-transformer-remark": "^6.10.0",
     "global-modules": "^2.0.0",
     "gray-matter": "^4.0.3",
     "json-loader": "^0.5.7",

sample-runner/shared/MainPanel.js

@@ -1,5 +1,5 @@
-import kind from '@enact/core/kind';
-import EnactLiveEdit from './EnactLiveEdit';
+import kind from '@enact/core/kind/kind.js';
+import EnactLiveEdit from './EnactLiveEdit.js';
 
 const MainPanel = kind({
 	name: 'Main',

scripts/DocParser.js

@@ -11,18 +11,18 @@
 /* eslint-env node */
 'use strict';
 
-const parseArgs = require('minimist'),
-	chokidar = require('chokidar'),
-	{
-		getValidFiles,
-		getDocumentation,
-		postValidate,
-		copyStaticDocs,
-		generateIndex,
-		getDocsConfig,
-		extractLibraryDescription,
-		saveLibraryDescriptions
-	} = require('@enact/docs-utils');
+import chokidar from 'chokidar';
+import {
+	copyStaticDocs,
+	extractLibraryDescription,
+	generateIndex,
+	getDocsConfig,
+	getDocumentation,
+	getValidFiles,
+	postValidate,
+	saveLibraryDescriptions
+} from '@enact/docs-utils';
+import parseArgs from 'minimist';
 
 const dataDir = 'src/data';
 const docIndexFile = `${dataDir}/docIndex.json`;
@@ -47,7 +47,7 @@ function sourceFilter (module) {	// eslint-disable-line no-shadow
 	return module.parseSource;
 }
 
-function init () {
+async function init () {
 	const args = parseArgs(process.argv);
 	const strict = args.strict,
 		extraRepos = args['extra-repos'],
@@ -63,7 +63,7 @@ function init () {
 		});
 	}
 
-	require('./prepareRaw');	// populate `raw` directory with source
+	await import('./prepareRaw.js');	// populate `raw` directory with source
 
 	const moduleConfigs = modulePaths.map(getDocsConfig);
 

scripts/clean.js

@@ -1,4 +1,4 @@
-const shelljs = require('shelljs');
+import shelljs from 'shelljs';
 shelljs.config.silent = true;
 
 const leaveIndex = (dir, basePath = 'src/pages/docs/') => {

scripts/make-runner.js

@@ -10,13 +10,13 @@
 /* eslint-env node */
 'use strict';
 
-const shell = require('shelljs'),
-	fs = require('fs'),
-	parseArgs = require('minimist');
+import fs from 'fs';
+import parseArgs from 'minimist';
+import shell from 'shelljs';
 
-const allLibraries = require('../src/data/libraryDescription.json'),
-	includes = ['core', 'moonstone', 'sandstone', 'agate'],
-	themes = Object.keys(allLibraries).filter(name => includes.includes(name));
+const allLibraries = JSON.parse(fs.readFileSync('./src/data/libraryDescription.json'));
+const includes = ['core', 'moonstone', 'sandstone', 'agate'];
+const themes = Object.keys(allLibraries).filter(name => includes.includes(name));
 
 const args = parseArgs(process.argv),
 	fast = args.fast,

scripts/prepareRaw.js

@@ -10,10 +10,10 @@
  * Additional repos can be pulled into the docs using the following command line arg:
  * * `extra-repos`   (e.g. --extra-repos enactjs/agate#develop,enactjs/moonstone#3.2.5)
  */
-const shell = require('shelljs'),
-	parseArgs = require('minimist'),
-	// eslint-disable-next-line no-shadow
-	process = require('process');
+import parseArgs from 'minimist';
+// eslint-disable-next-line no-shadow
+import process from 'process';
+import shell from 'shelljs';
 
 if (!shell.which('git')) {
 	shell.echo('Sorry, this script requires git');