@shopify/react-html
Advanced tools
Comparing version 0.0.0-snapshot-20240308174203 to 0.0.0-snapshot-20240620045713
@@ -14,3 +14,2 @@ 'use strict'; | ||
exports.IconSize = void 0; | ||
(function (IconSize) { | ||
@@ -21,3 +20,2 @@ IconSize[IconSize["Large"] = 114] = "Large"; | ||
})(exports.IconSize || (exports.IconSize = {})); | ||
function AppleHomeScreen({ | ||
@@ -24,0 +22,0 @@ icons = [], |
@@ -21,3 +21,2 @@ 'use strict'; | ||
} | ||
queuedUpdate.current = requestAnimationFrame(() => { | ||
@@ -30,3 +29,2 @@ updateOnClient(state); | ||
} | ||
function updateOnClient(state) { | ||
@@ -40,3 +38,2 @@ const { | ||
let titleElement = document.querySelector('title'); | ||
if (title == null) { | ||
@@ -51,7 +48,5 @@ if (titleElement) { | ||
} | ||
titleElement.setAttribute(utilities.MANAGED_ATTRIBUTE, 'true'); | ||
titleElement.textContent = title; | ||
} | ||
const fragment = document.createDocumentFragment(); | ||
@@ -63,10 +58,7 @@ updateElement('meta', utilities.removeDuplicate(metas), fragment); | ||
} | ||
function updateElement(selector, items, fragment) { | ||
const oldElements = Array.from(document.head.querySelectorAll(`${selector}[${utilities.MANAGED_ATTRIBUTE}]`)); | ||
for (const item of items) { | ||
const element = document.createElement(selector); | ||
element.setAttribute(utilities.MANAGED_ATTRIBUTE, 'true'); | ||
for (const [attribute, value] of Object.entries(item)) { | ||
@@ -79,5 +71,3 @@ if (attribute === 'children') { | ||
} | ||
const matchingOldElementIndex = oldElements.findIndex(oldElement => oldElement.isEqualNode(element)); | ||
if (matchingOldElementIndex >= 0) { | ||
@@ -89,3 +79,2 @@ oldElements.splice(matchingOldElementIndex, 1); | ||
} | ||
for (const oldElement of oldElements) { | ||
@@ -92,0 +81,0 @@ oldElement.remove(); |
@@ -12,11 +12,8 @@ 'use strict'; | ||
const viewportParts = ['width=device-width', 'initial-scale=1']; | ||
if (coverNotch) { | ||
viewportParts.push('viewport-fit=cover'); | ||
} | ||
if (!allowPinchToZoom) { | ||
viewportParts.push('user-scalable=no'); | ||
} | ||
hooks.useMeta({ | ||
@@ -23,0 +20,0 @@ name: 'viewport', |
@@ -11,7 +11,5 @@ 'use strict'; | ||
const manager = React.useContext(context.HtmlContext); | ||
const effect = () => perform(manager); | ||
reactEffect.useServerEffect(effect, manager.effect); // eslint-disable-next-line react-hooks/exhaustive-deps | ||
reactEffect.useServerEffect(effect, manager.effect); | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
React.useEffect(effect, [manager, ...inputs]); | ||
@@ -58,3 +56,4 @@ } | ||
React.useEffect(() => { | ||
perform(manager); // eslint-disable-next-line react-hooks/exhaustive-deps | ||
perform(manager); | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [manager, perform, ...inputs]); | ||
@@ -61,0 +60,0 @@ } |
@@ -23,3 +23,2 @@ 'use strict'; | ||
} | ||
get state() { | ||
@@ -36,3 +35,2 @@ const lastTitle = this.titles[this.titles.length - 1]; | ||
} | ||
reset({ | ||
@@ -46,3 +44,2 @@ includeSerializations = false | ||
this.subscriptions.clear(); | ||
if (includeSerializations) { | ||
@@ -52,3 +49,2 @@ this.serializations.clear(); | ||
} | ||
subscribe(subscription) { | ||
@@ -60,3 +56,2 @@ this.subscriptions.add(subscription); | ||
} | ||
addTitle(title) { | ||
@@ -67,33 +62,26 @@ return this.addDescriptor({ | ||
} | ||
addMeta(meta) { | ||
return this.addDescriptor(meta, this.metas); | ||
} | ||
addLink(link) { | ||
return this.addDescriptor(link, this.links); | ||
} | ||
addInlineStyle(inlineStyle) { | ||
return this.addDescriptor(inlineStyle, this.inlineStyles); | ||
} | ||
addHtmlAttributes(attributes) { | ||
return this.addDescriptor(attributes, this.htmlAttributes); | ||
} | ||
addBodyAttributes(attributes) { | ||
return this.addDescriptor(attributes, this.bodyAttributes); | ||
} | ||
setSerialization(id, data) { | ||
this.serializations.set(id, data); | ||
} | ||
getSerialization(id) { | ||
return this.serializations.get(id); | ||
} | ||
extract() { | ||
return { ...this.state, | ||
return { | ||
...this.state, | ||
serializations: [...this.serializations.entries()].map(([id, data]) => ({ | ||
@@ -105,3 +93,2 @@ id, | ||
} | ||
addDescriptor(item, list) { | ||
@@ -112,3 +99,2 @@ list.push(item); | ||
const index = list.indexOf(item); | ||
if (index >= 0) { | ||
@@ -120,3 +106,2 @@ list.splice(index, 1); | ||
} | ||
updateSubscriptions() { | ||
@@ -127,3 +112,2 @@ for (const subscription of this.subscriptions) { | ||
} | ||
} | ||
@@ -130,0 +114,0 @@ |
@@ -41,3 +41,2 @@ 'use strict'; | ||
} | ||
function WithSerialized({ | ||
@@ -49,3 +48,2 @@ children | ||
} | ||
return { | ||
@@ -56,3 +54,2 @@ Serialize, | ||
} | ||
function isPromise(maybePromise) { | ||
@@ -59,0 +56,0 @@ return maybePromise != null && maybePromise.then != null; |
@@ -103,4 +103,5 @@ 'use strict'; | ||
const htmlAttributes = extracted ? extracted.htmlAttributes : {}; | ||
const bodyAttributes = extracted ? extracted.bodyAttributes : {}; // eslint-disable-next-line no-process-env | ||
const bodyAttributes = extracted ? extracted.bodyAttributes : {}; | ||
// eslint-disable-next-line no-process-env | ||
if (process.env.NODE_ENV === 'development') { | ||
@@ -115,3 +116,2 @@ if (bodyAttributes.style == null) { | ||
} | ||
return /*#__PURE__*/React__default["default"].createElement("html", Object.assign({ | ||
@@ -134,3 +134,2 @@ lang: locale | ||
} | ||
function render(app, { | ||
@@ -137,0 +136,0 @@ htmlManager, |
@@ -18,3 +18,4 @@ 'use strict'; | ||
const isNoModule = type === 'nomodule'; | ||
const attributes = { ...otherProps, | ||
const attributes = { | ||
...otherProps, | ||
type: isNoModule ? 'text/javascript' : type, | ||
@@ -21,0 +22,0 @@ defer: type === 'module' ? undefined : defer, |
@@ -9,17 +9,12 @@ 'use strict'; | ||
const serializations = new Map(); | ||
if (typeof document === 'undefined') { | ||
return serializations; | ||
} | ||
for (const node of document.querySelectorAll(`[${SERIALIZE_ATTRIBUTE}]`)) { | ||
serializations.set(node.getAttribute(SERIALIZE_ATTRIBUTE), getSerializedFromNode(node)); | ||
} | ||
return serializations; | ||
} | ||
function getSerializedFromNode(node) { | ||
const value = node.textContent; | ||
try { | ||
@@ -31,15 +26,13 @@ return value ? JSON.parse(value) : undefined; | ||
} | ||
function getSerialized(id) { | ||
const node = document.querySelector(`[${SERIALIZE_ATTRIBUTE}="${id}"]`); | ||
if (node == null) { | ||
throw new Error(`No serializations found for id "${id}"`); | ||
} | ||
return getSerializedFromNode(node); | ||
} | ||
return getSerializedFromNode(node); | ||
} // We hide the document in development by default in order to prevent | ||
// We hide the document in development by default in order to prevent | ||
// flashes of unstyled content. This function will show the document | ||
// after the styles have loaded. | ||
function showPage() { | ||
@@ -62,3 +55,2 @@ // eslint-disable-next-line no-process-env | ||
} = meta; | ||
if (name) { | ||
@@ -68,7 +60,5 @@ if (names.has(name)) { | ||
} | ||
names.add(name); | ||
return true; | ||
} | ||
if (property) { | ||
@@ -78,7 +68,5 @@ if (properties.has(property)) { | ||
} | ||
properties.add(property); | ||
return true; | ||
} | ||
return true; | ||
@@ -85,0 +73,0 @@ }); |
{ | ||
"name": "@shopify/react-html", | ||
"version": "0.0.0-snapshot-20240308174203", | ||
"version": "0.0.0-snapshot-20240620045713", | ||
"license": "MIT", | ||
@@ -30,7 +30,7 @@ "description": "A component to render your React app with no static HTML", | ||
"engines": { | ||
"node": "^14.17.0 || >=16.0.0" | ||
"node": ">=18.12.0" | ||
}, | ||
"dependencies": { | ||
"@shopify/react-effect": "^5.0.3", | ||
"@shopify/react-hydrate": "0.0.0-snapshot-20240308174203", | ||
"@shopify/react-effect": "0.0.0-snapshot-20240620045713", | ||
"@shopify/react-hydrate": "0.0.0-snapshot-20240620045713", | ||
"@types/multistream": "^2.1.1", | ||
@@ -41,8 +41,8 @@ "multistream": "^2.1.1", | ||
"peerDependencies": { | ||
"react": ">=16.8.0 <19.0.0", | ||
"react": ">=18.0.0 <19.0.0", | ||
"react-dom": ">=16.8.0 <19.0.0" | ||
}, | ||
"devDependencies": { | ||
"@shopify/react-testing": "^5.1.4", | ||
"@shopify/with-env": "^3.0.1" | ||
"@shopify/react-testing": "0.0.0-snapshot-20240620045713", | ||
"@shopify/with-env": "^3.1.0" | ||
}, | ||
@@ -49,0 +49,0 @@ "sideEffects": false, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
1752
112816
+ Added@shopify/react-effect@0.0.0-snapshot-20240620045713(transitive)
+ Added@shopify/react-hooks@0.0.0-snapshot-20240620045713(transitive)
+ Added@shopify/react-hydrate@0.0.0-snapshot-20240620045713(transitive)
- Removed@shopify/react-effect@5.2.0(transitive)
- Removed@shopify/react-hooks@0.0.0-snapshot-20240308174203(transitive)
- Removed@shopify/react-hydrate@0.0.0-snapshot-20240308174203(transitive)