module.exports = function(sel, sel2) {
var container = document;
var query = sel;
if (query[0] == '#' && query.indexOf(' ') == -1)
return document.getElementById(query.slice(1));
if (sel instanceof NodeList && sel.length == 1)
sel = sel[0];
if (isElement(sel) && sel2.length > 0) {
container = sel;
query = sel2;
}
var result = container.querySelectorAll(query);
if (result.length == 1)
return result[0];
else
if (result.length === 0)
return null;
return Array.prototype.slice.call(result);
};
const removeStylesheetFromHead = (styleId) => {
if (!styleId) {
throw new Error('Must provide an ID for the jile to remove.');
}
const matchingStyle = document.querySelector(`#${styleId}`);
if (isElement(matchingStyle)) {
document.head.removeChild(matchingStyle);
}
};
const addStylesheetToHead = (styleId, rules) => {
const stylesheetObject = buildStylesheetContent(rules, styleId);
const existingStyle = document.querySelector(`#${styleId}`);
const {
css,
selectorMap
} = stylesheetObject;
const textContent = IS_PRODUCTION ? sqwish(css) : css;
if (isElement(existingStyle)) {
existingStyle.textContent = textContent;
} else {
if (!IS_PRODUCTION && hasBlobSupport) {
const blob = new window.Blob([textContent], {
type: 'text/css'
});
let link = document.createElement('link');
link.rel = 'stylesheet';
link.id = styleId;
link.href = URL.createObjectURL(blob);
document.head.appendChild(link);
} else {
let style = document.createElement('style');
// old webkit hack
style.appendChild(document.createTextNode(''));
style.id = styleId;
style.textContent = textContent;
document.head.appendChild(style);
}
}
return selectorMap;
};
export function oporElement(json, rootElem, links = {}, isChildren = false) {
let elem;
if (json.element) {
// Use existing DOM element
if (DEBUG && !isElement(rootElem)) {
throw new Error('"rootElem" is required to use "json.element".');
}
if (json.element === '@root') {
elem = rootElem;
}
else {
elem = rootElem.querySelector(json.element);
if (DEBUG && !isElement(elem)) {
throw new Error(`Could not find an element "${json.element}" inside "rootElem".`);
}
}
// Detach element
if (isChildren && elem.parentNode) {
elem.parentNode.removeChild(elem);
}
}
else {
// Create new element
elem = document.createElement(json.tag || DEFAULT_TAG);
}
// Classes
let newClasses = oporClass(json, true);
if (newClasses) {
newClasses.forEach(
cls => elem.classList.add(cls)
);
}
// Attributes
if (json.attrs) {
Object.keys(json.attrs).forEach(
name => elem.setAttribute(name, json.attrs[name])
);
}
// Store link
if (json.link) {
if (DEBUG && !json.elem) {
throw new Error('"json.elem" is required to use "json.link".');
}
links[camelCase(json.elem) + 'Elem'] = elem;
}
// Append content
if (json.content) {
let container;
if (Array.isArray(json.content)) {
container = document.createDocumentFragment();
json.content.forEach(
children => container.appendChild(createChildElement(children, rootElem, links))
);
}
else {
container = createChildElement(json.content, rootElem, links);
}
elem.appendChild(container);
}
if (!isChildren && !isEmpty(links)) {
return [
elem,
links,
];
}
return elem;
}
each(nodesOrSelectors, (val, key) => {
nodes[key] = isElement(val) ? val : document.querySelector(val);
});
import React from 'react';
import ReactDOM from 'react-dom';
import _isElement from 'lodash/iselement';
class Test extends React.Component {
render () {
return (
<h1>Test!</h1>
);
}
}
const targetElementQuery = '#react-js';
const targetElement = document.querySelector(targetElementQuery);
if (_isElement(targetElement)) {
ReactDOM.render(<Test />, targetElement);
} else {
throw Error(`Could not find "${targetElementQuery}" element.`);
}