Rewrite [major]

overlookjs · Oct 3, 2020 · 19b365f · 19b365f
1 parent e4ecc36
commit 19b365f
Show file tree

Hide file tree

Showing 10 changed files with 423 additions and 31 deletions.
diff --git a/es/index.js b/es/index.js
@@ -10,5 +10,10 @@ import reactRootPlugin from '../lib/index.js';
 
 export default reactRootPlugin;
 export const {
-	GET_REACT_ROOT_FILE
+	REACT_ROOT_FILE,
+	GET_REACT_ROOT_FILE,
+	CREATE_REACT_ROOT_FILE,
+	REACT_HTML_FILE,
+	GET_REACT_HTML_FILE,
+	CREATE_REACT_HTML_FILE
 } = reactRootPlugin;
diff --git a/lib/createHtml.js b/lib/createHtml.js
@@ -0,0 +1,26 @@
+/* --------------------
+ * @overlook/plugin-react-root module
+ * Create HTML file
+ * ------------------*/
+
+'use strict';
+
+// Modules
+const escapeHtml = require('escape-html');
+
+// Exports
+
+/**
+ * Make HTML file content.
+ * @param {string} path - Path for JS bundle
+ * @param {string} containerId - ID of container element to render to
+ * @returns {string} - HTML file content
+ */
+module.exports = function createHtml(path, containerId) {
+	return '<html>\n'
+		+ '<body>\n'
+		+ `<div id="${escapeHtml(containerId)}"></div>\n`
+		+ `<script src="${escapeHtml(path)}"></script>\n`
+		+ '</body>\n'
+		+ '</html>\n';
+};
diff --git a/lib/createRoot.js b/lib/createRoot.js
@@ -0,0 +1,26 @@
+/* --------------------
+ * @overlook/plugin-react-root module
+ * Create root file
+ * ------------------*/
+
+'use strict';
+
+// Exports
+
+const reactPath = require.resolve('@overlook/plugin-react/react'),
+	reactDomPath = require.resolve('react-dom');
+
+const {stringify} = JSON;
+
+/**
+ * Make router file content.
+ * @param {Object} file - File object for router
+ * @param {string} containerId - ID of container element to render to
+ * @returns {string} - Router root file content
+ */
+module.exports = function createRoot(file, containerId) {
+	return `import React from ${stringify(reactPath)};\n`
+		+ `import {render} from ${stringify(reactDomPath)};\n\n`
+		+ `import Route from ${stringify(file.path)};\n\n`
+		+ `render(<Route />, document.getElementById(${stringify(containerId)}));\n`;
+};
diff --git a/lib/index.js b/lib/index.js
@@ -7,41 +7,162 @@
 
 // Modules
 const Plugin = require('@overlook/plugin'),
-	{INIT_CHILDREN} = require('@overlook/route'),
+	{INIT_PROPS, INIT_ROUTE, INIT_CHILDREN} = require('@overlook/route'),
 	reactPlugin = require('@overlook/plugin-react'),
-	staticPlugin = require('@overlook/plugin-static');
+	staticPlugin = require('@overlook/plugin-static'),
+	{FILES} = require('@overlook/plugin-load'),
+	{PRE_BUILD, deleteRouteProperties} = require('@overlook/plugin-build'),
+	{BUNDLE_ADD_ENTRY} = require('@overlook/plugin-bundle'),
+	{findParentOrSelf} = require('@overlook/util-find-parent'),
+	assert = require('simple-invariant');
 
 // Imports
-const pkg = require('../package.json');
+const createRoot = require('./createRoot.js'),
+	createHtml = require('./createHtml.js'),
+	pkg = require('../package.json');
+
+// Constants
+const ROOT_EXT = 'root.jsx',
+	HTML_EXT = 'html',
+	CONTAINER_ID = 'app';
 
 // Exports
 
 module.exports = new Plugin(
 	pkg,
 	[staticPlugin, reactPlugin],
-	{symbols: ['GET_REACT_ROOT_FILE']},
-	(Route, {GET_REACT_ROOT_FILE, REACT_FILE}) => class ReactRootRoute extends Route {
+	{
+		symbols: [
+			'REACT_ROOT_FILE', 'GET_REACT_ROOT_FILE', 'CREATE_REACT_ROOT_FILE',
+			'REACT_HTML_FILE', 'GET_REACT_HTML_FILE', 'CREATE_REACT_HTML_FILE'
+		]
+	},
+	(Route, {
+		REACT_ROOT_FILE, GET_REACT_ROOT_FILE, CREATE_REACT_ROOT_FILE,
+		REACT_HTML_FILE, GET_REACT_HTML_FILE, CREATE_REACT_HTML_FILE,
+		REACT_FILE, REACT_ROOT, STATIC_FILE, WRITE_FILE
+	}) => class ReactRootRoute extends Route {
+		/**
+		 * Init properties.
+		 * @param {Object} props - Props object
+		 * @returns {undefined}
+		 */
+		[INIT_PROPS](props) {
+			super[INIT_PROPS](props);
+			this[REACT_ROOT_FILE] = undefined;
+			this[REACT_HTML_FILE] = undefined;
+		}
+
+		/**
+		 * Set this route as React root.
+		 * @returns {undefined}
+		 */
+		async [INIT_ROUTE]() {
+			// Define `[REACT_ROOT]` before calling superclass, so it's defined
+			// before `plugin-react`'s `[INIT_ROUTE]()` method executes.
+			this[REACT_ROOT] = this;
+
+			// Delegate to super classes
+			await super[INIT_ROUTE]();
+
+			// Get / create root router file
+			let rootFile = this[REACT_ROOT_FILE];
+			if (!rootFile) {
+				rootFile = this[GET_REACT_ROOT_FILE]();
+				// Create empty root file if none exists
+				if (!rootFile) rootFile = await this[WRITE_FILE](ROOT_EXT, '');
+
+				this[REACT_ROOT_FILE] = rootFile;
+			}
+
+			// Get / create HTML file
+			let htmlFile = this[REACT_HTML_FILE];
+			if (!htmlFile) {
+				htmlFile = this[GET_REACT_HTML_FILE]();
+				// Create empty HTML file if none exists
+				if (!htmlFile) htmlFile = await this[WRITE_FILE](HTML_EXT, '');
+
+				this[REACT_HTML_FILE] = htmlFile;
+			}
+			if (!this[STATIC_FILE]) this[STATIC_FILE] = htmlFile;
+		}
+
+		/**
+		 * Add React file to bundle.
+		 * @returns {undefined}
+		 */
 		async [INIT_CHILDREN]() {
+			// Delegate to super classes
 			await super[INIT_CHILDREN]();
 
-			const file = this[GET_REACT_ROOT_FILE](); // eslint-disable-line no-unused-vars
+			// Create root file
+			const rootFile = this[CREATE_REACT_ROOT_FILE](this[REACT_FILE]);
+
+			// Pass to `@overlook/plugin-bundle` as entry file
+			const bundleRoute = findParentOrSelf(this, route => route[BUNDLE_ADD_ENTRY]);
+			assert(bundleRoute, 'React root or a route above it must use `@overlook/plugin-bundle`');
+			bundleRoute[BUNDLE_ADD_ENTRY](rootFile, (bundlePath) => {
+				// Create HTML file content
+				this[CREATE_REACT_HTML_FILE](bundlePath);
+			});
+		}
 
-			// TODO Pass to `@overlook/plugin-bundle` to be entry file
-			// this[ADD_ENTRY](file);
+		/**
+		 * Create content of root file.
+		 * @param {Object} routeFile - Route file
+		 * @returns {Object} - Root file
+		 */
+		[CREATE_REACT_ROOT_FILE](routeFile) {
+			const rootFile = this[REACT_ROOT_FILE];
+			if (rootFile.content === '') rootFile.content = createRoot(routeFile, CONTAINER_ID);
+			return rootFile;
 		}
 
+		/**
+		 * Create content of HTML file.
+		 * @param {string} bundlePath - File object for JS bundle
+		 * @returns {Object} - HTML file
+		 */
+		[CREATE_REACT_HTML_FILE](bundlePath) {
+			const htmlFile = this[REACT_HTML_FILE];
+			if (htmlFile.content === '') htmlFile.content = createHtml(bundlePath, CONTAINER_ID);
+			return htmlFile;
+		}
+
+		/**
+		 * Get root file.
+		 * Uses loaded file with ext `.root.jsx` if exists, otherwise returns undefined.
+		 * @returns {Object|undefined} - Router file if found
+		 */
 		[GET_REACT_ROOT_FILE]() {
-			return this[REACT_FILE];
+			const files = this[FILES];
+			if (!files) return undefined;
+			return files[ROOT_EXT];
 		}
 
-		/*
-		async [BUNDLE]() {
-			await super[BUNDLE]();
+		/**
+		 * Get HTML file.
+		 * Uses loaded file with ext `.html` if exists, otherwise returns undefined.
+		 * @returns {Object|undefined} - HTML file if found
+		 */
+		[GET_REACT_HTML_FILE]() {
+			const files = this[FILES];
+			if (!files) return undefined;
+			return files[HTML_EXT];
+		}
 
-			// TODO Get HTML file from bundle
-			const htmlFile = ...
-			this[STATIC_FILE] = htmlFile;
+		/**
+		 * If app is built, delete properties not needed at runtime.
+		 * @returns {undefined}
+		 */
+		async [PRE_BUILD]() {
+			if (super[PRE_BUILD]) await super[PRE_BUILD]();
+			deleteRouteProperties(this, [
+				// Properties
+				REACT_ROOT_FILE, REACT_HTML_FILE,
+				// Methods
+				GET_REACT_ROOT_FILE, CREATE_REACT_ROOT_FILE, GET_REACT_HTML_FILE, CREATE_REACT_HTML_FILE
+			]);
 		}
-		*/
 	}
 );
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,10 +31,16 @@
   },
   "dependencies": {
     "@overlook/plugin": "^0.4.1",
-    "@overlook/plugin-react": "0.0.2",
+    "@overlook/plugin-build": "^0.1.3",
+    "@overlook/plugin-bundle": "0.0.1",
+    "@overlook/plugin-load": "^0.4.4",
+    "@overlook/plugin-react": "0.2.1",
     "@overlook/plugin-static": "^0.3.2",
     "@overlook/route": "^0.6.5",
-    "react-dom": "^16.13.1"
+    "@overlook/util-find-parent": "^0.1.0",
+    "escape-html": "^1.0.3",
+    "react-dom": "^16.13.1",
+    "simple-invariant": "^2.0.0"
   },
   "devDependencies": {
     "@overlookmotel/eslint-config": "^7.2.1",

diff --git a/test/exports.js b/test/exports.js
@@ -13,7 +13,12 @@
 module.exports = function itExports(reactRootPlugin) {
 	describe('symbols', () => {
 		it.each([
-			'GET_REACT_ROOT_FILE'
+			'REACT_ROOT_FILE',
+			'GET_REACT_ROOT_FILE',
+			'CREATE_REACT_ROOT_FILE',
+			'REACT_HTML_FILE',
+			'GET_REACT_HTML_FILE',
+			'CREATE_REACT_HTML_FILE'
 		])('%s', (key) => {
 			expect(typeof reactRootPlugin[key]).toBe('symbol');
 		});