Socket
Socket
Sign inDemoInstall

@shopify/react-html

Package Overview
Dependencies
Maintainers
13
Versions
191
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shopify/react-html - npm Package Compare versions

Comparing version 9.2.0 to 9.2.1

12

dist/components/AppleHomeScreen.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = tslib_1.__importDefault(require("react"));
var Meta_1 = require("./Meta");

@@ -17,8 +17,8 @@ var Link_1 = require("./Link");

var size = _a.size, url = _a.url;
return (React.createElement(Link_1.Link, { key: size, rel: "apple-touch-icon", sizes: size + "x" + size, href: url }));
return (react_1.default.createElement(Link_1.Link, { key: size, rel: "apple-touch-icon", sizes: size + "x" + size, href: url }));
});
var startUpImageMarkup = startUpImage ? (React.createElement(Link_1.Link, { rel: "apple-touch-startup-image", href: startUpImage })) : null;
return (React.createElement(React.Fragment, null,
React.createElement(Meta_1.Meta, { name: "apple-mobile-web-app-capable", content: "yes" }),
React.createElement(Meta_1.Meta, { name: "apple-mobile-web-app-status-bar-style", content: "black" }),
var startUpImageMarkup = startUpImage ? (react_1.default.createElement(Link_1.Link, { rel: "apple-touch-startup-image", href: startUpImage })) : null;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Meta_1.Meta, { name: "apple-mobile-web-app-capable", content: "yes" }),
react_1.default.createElement(Meta_1.Meta, { name: "apple-mobile-web-app-status-bar-style", content: "black" }),
iconsMarkup,

@@ -25,0 +25,0 @@ startUpImageMarkup));

6

dist/components/HtmlUpdater.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = tslib_1.__importDefault(require("react"));
var react_hydrate_1 = require("@shopify/react-hydrate");

@@ -9,3 +9,3 @@ var hooks_1 = require("../hooks");

function HtmlUpdater() {
var queuedUpdate = React.useRef(null);
var queuedUpdate = react_1.default.useRef(null);
hooks_1.useClientDomEffect(function (manager) {

@@ -21,3 +21,3 @@ return manager.subscribe(function (state) {

});
return React.createElement(react_hydrate_1.HydrationTracker, null);
return react_1.default.createElement(react_hydrate_1.HydrationTracker, null);
}

@@ -24,0 +24,0 @@ exports.HtmlUpdater = HtmlUpdater;

2

dist/components/Link.d.ts

@@ -1,4 +0,4 @@

import * as React from 'react';
import React from 'react';
declare type Props = React.HTMLProps<HTMLLinkElement>;
export declare function Link(props: Props): null;
export {};

2

dist/components/Meta.d.ts

@@ -1,4 +0,4 @@

import * as React from 'react';
import React from 'react';
declare type Props = React.HTMLProps<HTMLMetaElement>;
export declare function Meta(props: Props): null;
export {};

2

dist/components/Script.d.ts

@@ -1,2 +0,2 @@

import * as React from 'react';
import React from 'react';
export interface Props extends React.ScriptHTMLAttributes<HTMLScriptElement> {

@@ -3,0 +3,0 @@ src: string;

4

dist/components/Script.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = tslib_1.__importDefault(require("react"));
function Script(props) {
return React.createElement("script", tslib_1.__assign({ type: "text/javascript" }, props));
return react_1.default.createElement("script", tslib_1.__assign({ type: "text/javascript" }, props));
}
exports.Script = Script;

2

dist/components/Style.d.ts

@@ -1,2 +0,2 @@

import * as React from 'react';
import React from 'react';
export interface Props extends React.LinkHTMLAttributes<HTMLLinkElement> {

@@ -3,0 +3,0 @@ href: string;

4

dist/components/Style.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = tslib_1.__importDefault(require("react"));
function Style(props) {
return React.createElement("link", tslib_1.__assign({ rel: "stylesheet", type: "text/css" }, props));
return react_1.default.createElement("link", tslib_1.__assign({ rel: "stylesheet", type: "text/css" }, props));
}
exports.Style = Style;

2

dist/components/tests/utilities.d.ts

@@ -1,3 +0,3 @@

import * as React from 'react';
import React from 'react';
import { HtmlManager } from '../../manager';
export declare function mountWithManager(element: React.ReactElement<any>, manager: HtmlManager): import("@shopify/react-testing").Root<any>;

4

dist/components/tests/utilities.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = tslib_1.__importDefault(require("react"));
var react_testing_1 = require("@shopify/react-testing");
var context_1 = require("../../context");
function mountWithManager(element, manager) {
return react_testing_1.mount(React.createElement(context_1.HtmlContext.Provider, { value: manager }, element));
return react_testing_1.mount(react_1.default.createElement(context_1.HtmlContext.Provider, { value: manager }, element));
}
exports.mountWithManager = mountWithManager;

2

dist/context.d.ts

@@ -1,3 +0,3 @@

import * as React from 'react';
import React from 'react';
import { HtmlManager } from './manager';
export declare const HtmlContext: React.Context<HtmlManager>;

4

dist/context.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = tslib_1.__importDefault(require("react"));
var manager_1 = require("./manager");
exports.HtmlContext = React.createContext(new manager_1.HtmlManager());
exports.HtmlContext = react_1.default.createContext(new manager_1.HtmlManager());

2

dist/serializer.d.ts

@@ -1,2 +0,2 @@

import * as React from 'react';
import React from 'react';
export declare const EXTRACT_ID: unique symbol;

@@ -3,0 +3,0 @@ interface SerializeProps<T> {

12

dist/serializer.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = tslib_1.__importDefault(require("react"));
var react_effect_1 = require("@shopify/react-effect");

@@ -10,8 +10,8 @@ var context_1 = require("./context");

function useSerialized(id) {
var manager = React.useContext(context_1.HtmlContext);
var data = React.useMemo(function () { return manager.getSerialization(id); }, [
var manager = react_1.default.useContext(context_1.HtmlContext);
var data = react_1.default.useMemo(function () { return manager.getSerialization(id); }, [
id,
manager,
]);
var Serialize = React.useMemo(function () {
var Serialize = react_1.default.useMemo(function () {
return function Serialize(_a) {

@@ -37,3 +37,3 @@ var data = _a.data;

var data = _a.data;
var manager = React.useContext(context_1.HtmlContext);
var manager = react_1.default.useContext(context_1.HtmlContext);
react_effect_1.useServerEffect(function () {

@@ -50,3 +50,3 @@ var result = data();

var children = _a.children;
var manager = React.useContext(context_1.HtmlContext);
var manager = react_1.default.useContext(context_1.HtmlContext);
return children(manager.getSerialization(id));

@@ -53,0 +53,0 @@ }

2

dist/server/components/Html.d.ts

@@ -1,2 +0,2 @@

import * as React from 'react';
import React from 'react';
import { HydrationManager } from '@shopify/react-hydrate';

@@ -3,0 +3,0 @@ import { HtmlManager } from '../../manager';

36

dist/server/components/Html.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = tslib_1.__importDefault(require("react"));
var server_1 = require("react-dom/server");

@@ -21,7 +21,7 @@ var react_hydrate_1 = require("@shopify/react-hydrate");

var id = _a.id, data = _a.data;
return (React.createElement(Serialize_1.default, { key: id, id: id, data: data }));
return (react_1.default.createElement(Serialize_1.default, { key: id, id: id, data: data }));
})
: null;
var managedProps = (_j = {}, _j[utilities_1.MANAGED_ATTRIBUTE] = true, _j);
var titleMarkup = extracted && extracted.title ? (React.createElement("title", tslib_1.__assign({}, managedProps), extracted.title)) : null;
var titleMarkup = extracted && extracted.title ? (react_1.default.createElement("title", tslib_1.__assign({}, managedProps), extracted.title)) : null;
var metaMarkup = extracted

@@ -32,3 +32,3 @@ ? extracted.metas.map(function (metaProps, index) { return (

// eslint-disable-next-line react/no-array-index-key
React.createElement("meta", tslib_1.__assign({ key: index }, managedProps, metaProps))); })
react_1.default.createElement("meta", tslib_1.__assign({ key: index }, managedProps, metaProps))); })
: null;

@@ -40,14 +40,14 @@ var linkMarkup = extracted

// eslint-disable-next-line react/no-array-index-key
React.createElement("link", tslib_1.__assign({ key: index }, managedProps, linkProps))); })
react_1.default.createElement("link", tslib_1.__assign({ key: index }, managedProps, linkProps))); })
: null;
var stylesMarkup = styles.map(function (style) {
return (React.createElement(components_1.Style, { key: style.path, href: style.path, integrity: style.integrity, crossOrigin: "anonymous" }));
return (react_1.default.createElement(components_1.Style, { key: style.path, href: style.path, integrity: style.integrity, crossOrigin: "anonymous" }));
});
var blockingScriptsMarkup = blockingScripts.map(function (script) {
return (React.createElement(components_1.Script, { key: script.path, src: script.path, integrity: script.integrity, crossOrigin: "anonymous" }));
return (react_1.default.createElement(components_1.Script, { key: script.path, src: script.path, integrity: script.integrity, crossOrigin: "anonymous" }));
});
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 }));
return (react_1.default.createElement(components_1.Script, { key: script.path, src: script.path, integrity: script.integrity, crossOrigin: "anonymous", defer: true }));
});
var preloadAssetsMarkup = preloadAssets.map(function (asset) { return (React.createElement("link", { key: asset.path, rel: "prefetch", href: asset.path })); });
var preloadAssetsMarkup = preloadAssets.map(function (asset) { return (react_1.default.createElement("link", { key: asset.path, rel: "prefetch", href: asset.path })); });
var htmlAttributes = extracted ? extracted.htmlAttributes : {};

@@ -64,8 +64,8 @@ var bodyAttributes = extracted ? extracted.bodyAttributes : {};

}
return (React.createElement("html", tslib_1.__assign({ lang: locale }, htmlAttributes),
React.createElement("head", null,
return (react_1.default.createElement("html", tslib_1.__assign({ lang: locale }, htmlAttributes),
react_1.default.createElement("head", null,
titleMarkup,
React.createElement("meta", { charSet: "utf-8" }),
React.createElement("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }),
React.createElement("meta", { name: "referrer", content: "never" }),
react_1.default.createElement("meta", { charSet: "utf-8" }),
react_1.default.createElement("meta", { httpEquiv: "X-UA-Compatible", content: "IE=edge" }),
react_1.default.createElement("meta", { name: "referrer", content: "never" }),
metaMarkup,

@@ -78,4 +78,4 @@ linkMarkup,

preloadAssetsMarkup),
React.createElement("body", tslib_1.__assign({}, bodyAttributes),
React.createElement("div", { id: "app", dangerouslySetInnerHTML: { __html: markup } }),
react_1.default.createElement("body", tslib_1.__assign({}, bodyAttributes),
react_1.default.createElement("div", { id: "app", dangerouslySetInnerHTML: { __html: markup } }),
bodyMarkup,

@@ -87,5 +87,5 @@ serializationMarkup)));

var htmlManager = _a.htmlManager, hydrationManager = _a.hydrationManager;
var hydrationWrapped = hydrationManager ? (React.createElement(react_hydrate_1.HydrationContext.Provider, { value: hydrationManager }, app)) : (app);
var content = htmlManager == null ? (app) : (React.createElement(context_1.HtmlContext.Provider, { value: htmlManager }, hydrationWrapped));
var hydrationWrapped = hydrationManager ? (react_1.default.createElement(react_hydrate_1.HydrationContext.Provider, { value: hydrationManager }, app)) : (app);
var content = htmlManager == null ? (app) : (react_1.default.createElement(context_1.HtmlContext.Provider, { value: htmlManager }, hydrationWrapped));
return server_1.renderToString(content);
}

4

dist/server/components/Serialize.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = tslib_1.__importDefault(require("react"));
var serialize_javascript_1 = tslib_1.__importDefault(require("serialize-javascript"));

@@ -10,4 +10,4 @@ var utilities_1 = require("../../utilities");

var _b;
return (React.createElement("script", tslib_1.__assign({ type: "text/json", dangerouslySetInnerHTML: { __html: serialize_javascript_1.default(data) } }, (_b = {}, _b[utilities_1.SERIALIZE_ATTRIBUTE] = id, _b))));
return (react_1.default.createElement("script", tslib_1.__assign({ type: "text/json", dangerouslySetInnerHTML: { __html: serialize_javascript_1.default(data) } }, (_b = {}, _b[utilities_1.SERIALIZE_ATTRIBUTE] = id, _b))));
}
exports.default = Serialize;

8

package.json
{
"name": "@shopify/react-html",
"version": "9.2.0",
"version": "9.2.1",
"license": "MIT",

@@ -26,5 +26,5 @@ "description": "A component to render your react app with no static HTML.",

"dependencies": {
"@shopify/react-effect": "^3.2.1",
"@shopify/react-hydrate": "^1.1.2",
"@shopify/react-serialize": "^1.0.15",
"@shopify/react-effect": "^3.2.2",
"@shopify/react-hydrate": "^1.1.3",
"@shopify/react-serialize": "^1.0.16",
"@shopify/useful-types": "^2.0.0",

@@ -31,0 +31,0 @@ "@types/multistream": "^2.1.1",

2

README.md

@@ -27,3 +27,3 @@ # `@shopify/react-html`

```tsx
import * as React from 'react';
import React from 'react';
import {render, Html} from '@shopify/react-html/server';

@@ -30,0 +30,0 @@ 

src/components/AppleHomeScreen.tsx

Sorry, the diff of this file is not supported yet

src/components/HtmlUpdater.tsx

Sorry, the diff of this file is not supported yet

src/components/Link.tsx

Sorry, the diff of this file is not supported yet

src/components/Meta.tsx

Sorry, the diff of this file is not supported yet

src/components/Script.tsx

Sorry, the diff of this file is not supported yet

src/components/Style.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/AppleHomeScreen.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/BodyAttributes.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/Favicon.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/HtmlAttributes.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/HtmlUpdater.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/Link.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/Meta.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/Preconnect.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/Responsive.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/Script.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/Style.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/Title.test.tsx

Sorry, the diff of this file is not supported yet

src/components/tests/utilities.tsx

Sorry, the diff of this file is not supported yet

src/context.tsx

Sorry, the diff of this file is not supported yet

src/serializer.tsx

Sorry, the diff of this file is not supported yet

src/server/components/Html.tsx

Sorry, the diff of this file is not supported yet

src/server/components/Serialize.tsx

Sorry, the diff of this file is not supported yet

src/server/components/tests/Html.test.tsx

Sorry, the diff of this file is not supported yet

src/server/components/tests/Serialize.test.tsx

Sorry, the diff of this file is not supported yet

src/tests/serializer.test.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc