@dash-ui/react
Version:
React components and hooks for dash-ui
123 lines (108 loc) • 4.36 kB
JavaScript
;
exports.__esModule = true;
var _exportNames = {
toComponent: true,
Style: true,
createGatsbyRenderer: true
};
exports.Style = Style;
exports.createGatsbyRenderer = createGatsbyRenderer;
exports.toComponent = toComponent;
var _styles = /*#__PURE__*/require("@dash-ui/styles");
var _server = /*#__PURE__*/require("@dash-ui/styles/server");
Object.keys(_server).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _server[key]) return;
exports[key] = _server[key];
});
var React = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* eslint-disable @typescript-eslint/no-var-requires */
const __reactCreateElement__ = React.createElement;
/**
* A function for creating a React `<style>` component for
* inserting Dash styles in SSR.
*
* @param html - The HTML generated by `renderToStaticMarkup()` or `renderToString()`
* @param styles - An instance of `styles()`. Defaults to the default styles instance
* in `@dash-ui/styles`.
* @param options
* @param options.nonce
*/
function toComponent(html, styles = _styles.styles, options = {}) {
var _options$nonce;
const {
dash
} = styles;
const {
names,
css
} = (0, _server.createStylesFromString)(html, styles);
return /*#__PURE__*/__reactCreateElement__("style", {
key: dash.key,
nonce: (_options$nonce = options.nonce) !== null && _options$nonce !== void 0 ? _options$nonce : dash.sheet.nonce ? dash.sheet.nonce : void 0,
"data-dash": names.join(" "),
"data-cache": dash.key,
dangerouslySetInnerHTML: {
__html: css
}
});
}
/**
* A React component for injecting SSR CSS styles into Next.js documents
*
* @param root0
* @param root0.html
* @param root0.styles
* @param root0.nonce
* @example
* // _document.js
* import React from 'react'
* import Document from 'next/document'
* import {Style} from '＠dash-ui/react/server'
*
* export default class MyDocument extends Document {
* static async getInitialProps(ctx) {
* const initialProps = await Document.getInitialProps(ctx)
* return {
* ...initialProps,
* styles: (
* <>
* {initialProps.styles}
* <Style html={initialProps.html}/>
* </>
* ),
* }
* }
* }
*/
function Style({
html,
styles,
nonce
}) {
return toComponent(html, styles, {
nonce
});
}
/**
* Creates a Gatsby replaceRenderer for injecting styles generated by Dash on
* the server into the Gatsby `<head>` component
*
* @param styles - An instance of `styles()`. Defaults to the default styles instance
* in `@dash-ui/styles`.
* @example
* // gatsby-ssr.js
* exports.replaceRenderer = require('＠dash-ui/react/server').createGatsbyRenderer()
*/
function createGatsbyRenderer(styles = _styles.styles) {
/* istanbul ignore next */
return function replaceRenderer(props) {
const bodyString = require("react-dom/server").renderToStaticMarkup( // @ts-expect-error
props.bodyComponent); // @ts-expect-error
props.setHeadComponents([toComponent(bodyString, styles)]);
return props;
};
}