@shopify/react-html
Advanced tools
@shopify/react-html - npm Package Compare versions
Comparing version 1.0.3 to 2.0.7
@@ -22,4 +22,4 @@ /// <reference types="react" /> | ||
| styles?: Asset[]; | ||
| synchronousScripts?: Asset[]; | ||
| deferedScripts?: Asset[]; | ||
| blockingScripts?: Asset[]; | ||
| scripts?: Asset[]; | ||
| headData?: { | ||
@@ -32,2 +32,2 @@ [id: string]: any; | ||
| } | ||
| export default function HTML({children, deferedScripts, synchronousScripts, styles, data, headData}: Props): JSX.Element; | ||
| export default function HTML({children, blockingScripts, scripts, styles, data, headData}: Props): JSX.Element; |
@@ -27,3 +27,3 @@ "use strict"; | ||
| function HTML(_a) { | ||
| var _b = _a.children, children = _b === void 0 ? '' : _b, _c = _a.deferedScripts, deferedScripts = _c === void 0 ? [] : _c, _d = _a.synchronousScripts, synchronousScripts = _d === void 0 ? [] : _d, _e = _a.styles, styles = _e === void 0 ? [] : _e, _f = _a.data, data = _f === void 0 ? {} : _f, _g = _a.headData, headData = _g === void 0 ? {} : _g; | ||
| var _b = _a.children, children = _b === void 0 ? '' : _b, _c = _a.blockingScripts, blockingScripts = _c === void 0 ? [] : _c, _d = _a.scripts, scripts = _d === void 0 ? [] : _d, _e = _a.styles, styles = _e === void 0 ? [] : _e, _f = _a.data, data = _f === void 0 ? {} : _f, _g = _a.headData, headData = _g === void 0 ? {} : _g; | ||
| var markup = server_1.renderToString(children); | ||
@@ -36,10 +36,10 @@ var helmet = react_helmet_1.default.renderStatic(); | ||
| }); | ||
| var synchronousScriptsMarkup = synchronousScripts.map(function (script) { | ||
| var blockingScriptsMarkup = blockingScripts.map(function (script) { | ||
| return (React.createElement(components_1.Script, { key: script.path, src: script.path, integrity: script.integrity, crossOrigin: "anonymous" })); | ||
| }); | ||
| var deferedScriptsMarkup = deferedScripts.map(function (script) { | ||
| var deferredScriptsMarkup = scripts.map(function (script) { | ||
| return (React.createElement(components_1.Script, { key: script.path, src: script.path, integrity: script.integrity, crossOrigin: "anonymous", defer: true })); | ||
| }); | ||
| /* eslint-disable no-process-env, no-undefined */ | ||
| var bodyStyles = process.env.NODE_ENV === 'development' && deferedScripts.length > 0 | ||
| var bodyStyles = process.env.NODE_ENV === 'development' && blockingScripts.length > 0 | ||
| ? { display: 'none' } | ||
@@ -61,8 +61,8 @@ : undefined; | ||
| headDataMarkup, | ||
| synchronousScriptsMarkup), | ||
| blockingScriptsMarkup), | ||
| React.createElement("body", __assign({}, bodyAttributes, { style: bodyStyles }), | ||
| React.createElement("div", { id: "app", style: { height: '100%' }, dangerouslySetInnerHTML: { __html: markup } }), | ||
| dataMarkup, | ||
| deferedScriptsMarkup))); | ||
| deferredScriptsMarkup))); | ||
| } | ||
| exports.default = HTML; |
| import HTML from './HTML'; | ||
| export { Script, Style } from './components'; | ||
| export declare const DOCTYPE = "<!DOCTYPE html>"; | ||
| export { Props } from './HTML'; | ||
| export default HTML; |
@@ -7,2 +7,6 @@ "use strict"; | ||
| var HTML_1 = __importDefault(require("./HTML")); | ||
| var components_1 = require("./components"); | ||
| exports.Script = components_1.Script; | ||
| exports.Style = components_1.Style; | ||
| exports.DOCTYPE = '<!DOCTYPE html>'; | ||
| exports.default = HTML_1.default; |
| { | ||
| "name": "@shopify/react-html", | ||
| "version": "1.0.3", | ||
| "version": "2.0.7", | ||
| "license": "MIT", | ||
@@ -10,3 +10,3 @@ "description": "", | ||
| "build": "tsc", | ||
| "prepublish": "yarn run build" | ||
| "prepublishOnly": "yarn run build" | ||
| }, | ||
@@ -28,3 +28,4 @@ "publishConfig": { | ||
| "@shopify/react-serialize": "^1.0.3", | ||
| "@types/react-helmet": "^5.0.6", | ||
| "react": "^16.3.2", | ||
| "react-dom": "^16.3.2", | ||
| "react-helmet": "^5.2.0" | ||
@@ -31,0 +32,0 @@ }, |
@@ -17,7 +17,8 @@ # `@shopify/react-html` | ||
| import HTML from '@shopify/react-html'; | ||
| import HTML, {DOCTYPE} from '@shopify/react-html'; | ||
| import MyApp from '../app'; | ||
| export default (ctx, next) => { | ||
| ctx.body = renderToString( | ||
| // we have to prepend DOCTYPE to serve valid HTML | ||
| ctx.body = DOCTYPE + renderToString( | ||
| <HTML> | ||
@@ -32,2 +33,4 @@ <MyApp /> | ||
| Due to [limitations in react's implementation of HTML](https://github.com/facebook/react/issues/1035), you still need to prepend the `<!DOCTYPE html>` directive. To assist with this the module also exports a `DOCTYPE` constant. | ||
| The component will automatically propagate any usage of the `react-helmet` module in your app's content to manipulate the title or other top level HTML or HEAD attributes. | ||
@@ -41,4 +44,4 @@ | ||
| styles?: Asset[]; | ||
| synchronousScripts?: Asset[]; | ||
| deferedScripts?: Asset[]; | ||
| scripts?: Asset[]; | ||
| blockingScripts?: Asset[]; | ||
| headData?: {[id: string]: any}; | ||
@@ -69,7 +72,7 @@ data?: {[id: string]: any}; | ||
| **synchronousScripts** | ||
| Descriptors for any script tags you want to include in the HEAD of the document. | ||
| **scripts** | ||
| Descriptors for any script tags you want to include in your document. All scripts passed to this property will be deferred by appending them to the end of the document. We encourage this as a default, although you may use `blockingScripts` for any scripts that must be included in the HEAD of the document. | ||
| **deferredScripts** | ||
| Descriptors for any deferred script tags you want to include at the end of the document. | ||
| **blockingScripts** | ||
| Descriptors for any script tags you want to include in the HEAD of the document. These will block HTML parsing until they are evaluated, so use them carefully. | ||
@@ -85,1 +88,33 @@ ### Serializers | ||
| Any serializable data that needs to be available from the DOM when the `deferredScripts` are run. | ||
| ## Asset Components | ||
| This module also exports the asset components the `<HTML />` component uses internally for it's script and style props. | ||
| ```ts | ||
| import {Style, Script} from '@shopify/react-html'; | ||
| ``` | ||
| ### Style | ||
| The `<Style />` component lets you render `<link>` tags in your document dynamically as part of your react app. | ||
| ```ts | ||
| <Style | ||
| href="./some-style.css" | ||
| integrity="some-integrity-hash" | ||
| crossOrigin="anonymous" | ||
| /> | ||
| ``` | ||
| ### Script | ||
| The `<Script />` component lets you render `<script>` tags in your document dynamically as part of your react app. | ||
| ```ts | ||
| <Script | ||
| src="./some-script.js" | ||
| integrity="some-integrity-hash" | ||
| crossOrigin="anonymous" | ||
| /> | ||
| ``` |
| import HTML from './HTML'; | ||
| export {Script, Style} from './components'; | ||
| export const DOCTYPE = '<!DOCTYPE html>'; | ||
| export {Props} from './HTML'; | ||
| export default HTML; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.1%
25733
- Lines of code
- increased by1.14%
622
- Number of lines in readme file
- increased by43.21%
116
Worsened metrics
- Dependency count
- increased by33.33%
4
Dependency changes
+ Addedreact@^16.3.2
+ Addedreact-dom@^16.3.2
+ Addedreact-dom@16.14.0(transitive)
+ Addedscheduler@0.19.1(transitive)
- Removed@types/react-helmet@^5.0.6
- Removed@types/prop-types@15.7.13(transitive)
- Removed@types/react@18.3.11(transitive)
- Removed@types/react-helmet@5.0.27(transitive)
- Removedcsstype@3.1.3(transitive)