Skip to content

Commit

Permalink
Rewrite [major]
Browse files Browse the repository at this point in the history
  • Loading branch information
overlookmotel committed Oct 3, 2020
1 parent e4ecc36 commit 19b365f
Show file tree
Hide file tree
Showing 10 changed files with 423 additions and 31 deletions.
7 changes: 6 additions & 1 deletion es/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
26 changes: 26 additions & 0 deletions lib/createHtml.js
Original file line number Diff line number Diff line change
@@ -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';
};
26 changes: 26 additions & 0 deletions lib/createRoot.js
Original file line number Diff line number Diff line change
@@ -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`;
};
153 changes: 137 additions & 16 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
]);
}
*/
}
);
33 changes: 23 additions & 10 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 8 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 6 additions & 1 deletion test/exports.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
Loading

0 comments on commit 19b365f

Please sign in to comment.