16 |
17 |
18 | Often times, using Node to render DOM server-side is not feasible. This could be due to technology, infrastructure, or even cache reasons. In these situations, one is left with either not using React or ignoring the initial server-side DOM. Both options have significant downsides.
19 |
20 |
21 | React DOM Components are a technology agnostic way to get DOM properties and pass them in to React Components. By doing so, the initial render of a page can still be server-side (Java, .NET, PHP, etc.), but React can take over and provide the many features it does.
22 |
23 |
24 |
How They Work
25 |
26 |
27 |
{props.text} {props.name}
9 | {props.title}
10 | );
11 | }
12 |
13 | class HelloWorldModel extends DOMModel {
14 | constructor(element) {
15 | super(element);
16 | this.getDataAttribute('name');
17 | this.getAttribute('data-title', 'title');
18 | this.getTextContent();
19 | }
20 | }
21 |
22 | const helloWorldComponent = createRDC('hello-world', HelloWorldModel, HelloWorld);
23 |
24 | document.body.innerHTML = 'Hello World
';
25 |
26 | describe('React Dom Component', () => {
27 | const domRegistry = new DOMRegistry(React, render);
28 | domRegistry.register({helloWorldComponent});
29 | domRegistry.init();
30 |
31 | test('Html DOM should be converted to a react component', () => {
32 | const tree = renderer
33 | .create(domRegistry.components['helloWorldComponent'].rendered[0].reactElement)
34 | .toJSON();
35 | expect(tree).toMatchSnapshot();
36 | });
37 | test('registry should store rendered properties', () => {
38 | expect(domRegistry.components['helloWorldComponent'].rendered[0].rootElement).toBe(document);
39 | expect(domRegistry.components['helloWorldComponent'].rendered[0].reactElement.props.title).toBe('My Title');
40 | expect(domRegistry.components['helloWorldComponent'].rendered[0].reactElement.props.name).toBe('Name');
41 | });
42 |
43 | test('should have ref be null for stateless (functional) components', () => {
44 | expect(domRegistry.components['helloWorldComponent'].rendered[0].ref).toBeNull();
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/RDC.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`React Dom Component Html DOM should be converted to a react component 1`] = `
4 | Array [
5 |
6 | Hello World
7 |
8 | Name
9 |
,
10 |
11 | My Title
12 |
,
13 | ]
14 | `;
15 |
--------------------------------------------------------------------------------
/src/createRDC.js:
--------------------------------------------------------------------------------
1 |
2 | export function createElement(model, component, element, React) {
3 | // Instantiate our DomModel
4 | const domModel = new model(element);
5 | return React.createElement(component, domModel.props);
6 | }
7 |
8 | export function render(element, React, reactDomRender, rootElement) {
9 | if (!React || !reactDomRender) {
10 | console.warn('React (from react) and render (from react-dom) must be passed in.');
11 | }
12 |
13 | // Create our React element
14 | const reactElement = createElement(this.model, this.component, element, React);
15 |
16 | // Render it using ReactDOM.render
17 | // Note that ref will not always be populated,
18 | // see the notes at https://reactjs.org/docs/react-dom.html#render for details
19 | const ref = reactDomRender(reactElement, element);
20 |
21 | // Every render gets a new entry in this.rendered
22 | this.rendered.push({ element, reactElement, ref, rootElement });
23 | }
24 |
25 | /**
26 | * Create a React DOM Component from the given parameters.
27 | * @param {string} nodeName Name of the element/node that will become the React component
28 | * @param {object} model DOMModel created for the component
29 | * @param {object} component React Component to use
30 | * @returns {object} React DOM Component to be rendered
31 | */
32 | export default function createRDC(nodeName, model, component) {
33 | if (!nodeName || !model || !component) {
34 | console.warn('createRDC requires nodeName, model, and component parameters to be defined.');
35 | }
36 |
37 | // An array to store references to all rendered instances of the component
38 | const rendered = [];
39 |
40 | return {
41 | nodeName,
42 | model,
43 | component,
44 | render,
45 | rendered,
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/dommodel/DOMModel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The DomModel Class creates a data model from
3 | * attributes, text, and children of a given element.
4 | */
5 | export default class DOMModel {
6 | constructor(element) {
7 | this.props = {};
8 | this.element = element;
9 | this.props.element = element;
10 | this.getId();
11 | this.getClassList();
12 | this.getChildNodes();
13 | }
14 |
15 | /**
16 | * Get `this.props.id` from `element.id`.
17 | */
18 | getId() {
19 | this.props.id = this.element.id;
20 | }
21 |
22 | /**
23 | * Get `this.props.classList` from `element.classList`.
24 | */
25 | getClassList() {
26 | this.props.classList = this.element.classList;
27 | }
28 |
29 | /**
30 | * Get the elements data attribute.
31 | * Note that data attribute names are specified in dash-style in the DOM,
32 | * but camelCase is used to specify the name here due to the use of `element.dataset`
33 | * (e.g: `data-my-attr-name` would be `myAttrName`)
34 | * @param {string} name Attribute name in camelCase
35 | */
36 | getDataAttribute(name) {
37 | this.props[name] = this.element.dataset[name];
38 | }
39 |
40 | /**
41 | * Get an attribute from the element. The full attribute name must be used.
42 | * Use `getDataAttribute` for `data-*` attributes.
43 | * The following are equivalent:
44 | * `getAttribute('data-my-attr', 'myAttr')`
45 | * `getDataAttribute('myAttr')`
46 | * @param {*} name - the full attribute name
47 | * @param {*} [propName] - The name to refer to this attribute by. Defaults to `name`.
48 | */
49 | getAttribute(name, propName) {
50 | if (!propName) {
51 | propName = name;
52 | }
53 | this.props[propName] = this.element.getAttribute(name);
54 | }
55 |
56 | /**
57 | * Get the text content found in the element.
58 | * Note that this will only retrieve the first node of text found.
59 | */
60 | getTextContent() {
61 | const textNode = this.getChildNode('#text');
62 | if (textNode !== null) {
63 | this.props['text'] = textNode.textContent;
64 | } else {
65 | this.props['text'] = null;
66 | }
67 | }
68 |
69 | /**
70 | * Get a React DOM Component that is nested within the parent component.
71 | * @param {string} name - node name to find and apply `model` to
72 | * @param {object} model - DOMModel to apply to the `name` node
73 | */
74 | getChildDOMModel(name, model) {
75 | const childElement = this.getChildNode(name);
76 | if (childElement !== null) {
77 | this.props[name] = new model(childElement);
78 | } else {
79 | this.props[name] = null;
80 | }
81 | }
82 |
83 | /**
84 | * Get all nested React DOM Components as an array by searching
85 | * for all nodes that match `name`
86 | * @param {*} name - node name to find and apply `model` to
87 | * @param {*} model - DOMModel to apply to the `name` node
88 | */
89 | getChildDOMModelArray(name, model) {
90 | this.props[name] = [];
91 | for (let i = 0; i < this.nodes.length; ++i) {
92 | const nodeName = this.nodes[i].nodeName.toLowerCase();
93 | if (nodeName === name) {
94 | this.props[name].push(new model(this.nodes[i]));
95 | }
96 | }
97 | }
98 |
99 | /**
100 | * Assign `element.childNodes` to `this.nodes`.
101 | */
102 | getChildNodes() {
103 | this.nodes = this.element.childNodes;
104 | }
105 |
106 | /**
107 | * Get the first node matching `name`
108 | * @param {string} name - nodeName to search for
109 | * @returns {node} node that matches `name` || `null`
110 | */
111 | getChildNode(name) {
112 | for (let i = 0; i < this.nodes.length; ++i) {
113 | const nodeName = this.nodes[i].nodeName.toLowerCase();
114 | if (nodeName === name) {
115 | return this.nodes[i];
116 | }
117 | }
118 | return null;
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/src/domregistry/DOMRegistry.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Utility function to verify that the React and render objects are valid.
3 | * @param {*} react React from 'react'
4 | * @param {*} reactDOMRender { render } from 'react-dom'
5 | */
6 | const verifyReactObjects = (react, reactDOMRender) => {
7 | if (!react || typeof(react.createElement) !== 'function' || typeof(react.Component) !== 'function') {
8 | console.warn('DOMRegistry: Invalid React object passed in. Please verify the React parameter passed to DOMRegistry');
9 | return false;
10 | }
11 |
12 | const reactMajorVersion = react.version ? parseInt(react.version.split('.')[0]) : 0;
13 | if (reactMajorVersion < 16) {
14 | console.warn('DOMRegistry: Invalid React version. React >= 16 must be used. React major version detected: ', reactMajorVersion);
15 | return false;
16 | }
17 |
18 | if (typeof(reactDOMRender) !== 'function') {
19 | console.warn('DOMRegistry: Invalid reactDOMRender function passed in. Please verify that `render` from `react-dom` is passed in.');
20 | return false;
21 | }
22 |
23 | return true;
24 | }
25 |
26 |
27 | /* global document, MutationObserver */
28 | /**
29 | * The DOMRegistry Class is used to register, find, and
30 | * render React DOM Components. It provides a mechanism to determine if
31 | * a registered DOM Component is a child of an existing DOM Component.
32 | */
33 | export default class DOMRegistry {
34 | /**
35 | * DOMRegistry Constructor. Pass in the React (from 'react') and render (from 'react-dom') objects
36 | * to use in rendering the DOMComponents.
37 | * @param {object} React The main React object
38 | * @param {function} reactDOMRender The render function from ReactDOM
39 | */
40 | constructor(React, reactDOMRender) {
41 | verifyReactObjects(React, reactDOMRender);
42 | this.React = React;
43 | this.reactDOMRender = reactDOMRender;
44 |
45 | this.components = {};
46 | }
47 |
48 | /**
49 | * Register components for the registry to process
50 | * @param {object} components Object containing RDC components to register. The key will be used as the
51 | */
52 | register(components) {
53 | if (!this.components) {
54 | this.components = components;
55 | } else {
56 | this.components = Object.assign(this.components, components);
57 | }
58 | this.getNodeNames();
59 | }
60 |
61 | /**
62 | * Initialize the supplied element to find
63 | * child components and render them.
64 | *
65 | * @param {element} element (including children) to check for RDCs, defaults to `document`
66 | */
67 | init(element = document) {
68 | this.element = element;
69 |
70 | // Loop through all registred DOM Components
71 | const compArray = Object.keys(this.components);
72 | compArray.forEach((name) => {
73 | this.renderAll(this.element, this.components[name]);
74 | });
75 | }
76 |
77 | /**
78 | * Render the component. If an element is not supplied,
79 | * the element class property will be used to find all
80 | * nodes to be rendered.
81 | * @param {DOMComponent} component - component to render
82 | * @param {HTMLElement} element
83 | */
84 | render(component, element) {
85 | if (element) {
86 | component.render(element, this.React, this.reactDOMRender, this.element);
87 | } else {
88 | this.renderAll(this.element, component);
89 | }
90 | }
91 |
92 | /**
93 | * Render All of the matching components
94 | * @param {element} parentElement
95 | * @param {object} component RDC component to render
96 | */
97 | renderAll(parentElement, component) {
98 | // Find all potential nodes of the components
99 | const componentNodes = parentElement.querySelectorAll(component.nodeName);
100 |
101 | // Loop through each node and determine if we can render it.
102 | Array.prototype.forEach.call(componentNodes, (componentNode) => {
103 | const canRender = this.traverseUpDom(componentNode);
104 | if (canRender) {
105 | component.render(componentNode, this.React, this.reactDOMRender, this.element);
106 | }
107 | });
108 | }
109 |
110 | /**
111 | * Traverse up the DOM from the supplied node to see if any parents
112 | * are React DOM Components.
113 | * @return {boolean} canRender Whether the component can render with React.
114 | */
115 | traverseUpDom(node) {
116 | const { parentNode } = node;
117 | // If the DOM has already been swapped out by React, the parent node will be null.
118 | if (parentNode !== null) {
119 | const parentNodeName = parentNode.nodeName.toLowerCase();
120 | if (this.nodeNames.includes(parentNodeName)) {
121 | return false;
122 | } else if (parentNodeName === 'body') {
123 | return true;
124 | }
125 | this.traverseUpDom(parentNode);
126 | return true;
127 | }
128 | return false;
129 | }
130 |
131 | /**
132 | * Create an array of element node names to look for.
133 | * @return {array} nodeNames
134 | */
135 | getNodeNames() {
136 | this.nodeNames = [];
137 | const compArray = Object.keys(this.components);
138 | compArray.forEach((name) => {
139 | this.nodeNames.push(this.components[name].nodeName);
140 | });
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/src/domregistry/__mocks__/dom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Often times, using Node to render DOM server-side is not feasible. This could be due to technology, infrastructure, or even cache reasons. In these situations, one is left with either not using React or ignoring the initial server-side DOM. Both options have significant downsides.
4 |
5 |
6 | Often times, using Node to render DOM server-side is not feasible. This could be due to technology, infrastructure, or even cache reasons. In these situations, one is left with either not using React or ignoring the initial server-side DOM. Both options have significant downsides.
7 |
8 |
--------------------------------------------------------------------------------
/src/domregistry/__mocks__/rdcSection/RDCSectionComponent.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default class RDCSectionComponent extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | this.title = props.title;
7 | this.text = props.text;
8 | this.p = props.p;
9 | }
10 |
11 | render () {
12 | return (
13 |
14 |
{this.title}
15 |
{this.p.props.text}
16 |
6 |
7 | My Title
8 |
9 |
,
10 |
11 | Nested Title:
12 |
,
13 |
14 |
15 | The Real Title
16 |
17 |
,
18 |
19 | Hello World
20 |
21 | Name
22 |
,
23 | ]
24 | `;
25 |
--------------------------------------------------------------------------------
/src/domregistry/__tests__/nestedRDC.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import renderer from 'react-test-renderer';
4 |
5 | import { createRDC, DOMModel, DOMRegistry } from '../../index';
6 |
7 | document.body.innerHTML = 'Hello WorldThe Real Title
';
8 |
9 | function Title (props) {
10 | return (
11 | {props.children}
12 | );
13 | }
14 |
15 | function HelloWorld (props) {
16 | return (
17 | {props.title}
18 | Nested Title:
19 | {props['my-title'].props.text}
20 | {props.text} {props.name}
21 | );
22 | }
23 |
24 | class TitleModel extends DOMModel {
25 | constructor(element) {
26 | super(element);
27 | this.getTextContent();
28 | }
29 | }
30 |
31 | class HelloWorldModel extends DOMModel {
32 | constructor(element) {
33 | super(element);
34 | this.getDataAttribute('name');
35 | this.getAttribute('data-title', 'title');
36 | this.getTextContent();
37 | this.getChildDOMModel('my-title', TitleModel);
38 | }
39 | }
40 |
41 | const helloWorldComponent = createRDC('hello-world', HelloWorldModel, HelloWorld);
42 | const titleComponent = createRDC('my-title', TitleModel, Title);
43 |
44 | describe('Nested React Dom Component', () => {
45 | const domRegistry = new DOMRegistry(React, render);
46 | domRegistry.register({ helloWorldComponent });
47 | domRegistry.init();
48 |
49 | it('should render', () => {
50 | const tree = renderer
51 | .create(domRegistry.components['helloWorldComponent'].rendered[0].reactElement)
52 | .toJSON();
53 | expect(tree).toMatchSnapshot();
54 | });
55 |
56 | it('should modify the current DOM', () => {
57 | expect(document.body.innerHTML).toBe('My Title
Nested Title:
The Real Title
Hello World Name
11 | 
12 |