@uiw/react-head - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

cjs/elements/HeadElement.js

@@ -25,14 +25,17 @@ "use strict";
     var name = props.name;
-    var selecter = '';
+    var selector = '';
     if (props.as && /(base|title)/.test(props.as)) {
-      selecter = "".concat(props.as, ":not([data-head])");
+      selector = "".concat(props.as, ":not([data-head])");
     }
     if (props.as === 'meta' && name) {
-      selecter = "meta[name=\"".concat(name, "\"]:not([data-head])");
+      selector = "meta[name=\"".concat(name, "\"]:not([data-head])");
     }
     if (props.as === 'meta' && props.charSet) {
-      selecter = "meta[charset]:not([data-head])";
+      selector = "meta[charset]:not([data-head])";
     }
-    if (selecter) {
-      var dom = document.querySelector(selecter);
+    if (props.as === 'link' && props.rel == 'icon') {
+      selector = "link[rel=\"icon\"]:not([data-head])";
+    }
+    if (selector) {
+      var dom = document.querySelector(selector);
       dom === null || dom === void 0 || dom.remove();
@@ -39,0 +42,0 @@ }

dist/dist.js

@@ -232,3 +232,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 ;// CONCATENATED MODULE: ./src/elements/HeadElement.tsx
-var _excluded=["as"];var HeadElement=function HeadElement(props){var _props$as=props.as,Com=_props$as===void 0?'link':_props$as,other=_objectWithoutProperties(props,_excluded);var reset=other;var comp=/*#__PURE__*/(0,jsx_runtime.jsx)(Com,_objectSpread2({"data-head":true},reset));(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){var name=props.name;var selecter='';if(props.as&&/(base|title)/.test(props.as)){selecter="".concat(props.as,":not([data-head])");}if(props.as==='meta'&&name){selecter="meta[name=\"".concat(name,"\"]:not([data-head])");}if(props.as==='meta'&&props.charSet){selecter="meta[charset]:not([data-head])";}if(selecter){var dom=document.querySelector(selecter);dom===null||dom===void 0?void 0:dom.remove();}},[]);return/*#__PURE__*/(0,external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_.createPortal)(comp,document.head);};
+var _excluded=["as"];var HeadElement=function HeadElement(props){var _props$as=props.as,Com=_props$as===void 0?'link':_props$as,other=_objectWithoutProperties(props,_excluded);var reset=other;var comp=/*#__PURE__*/(0,jsx_runtime.jsx)(Com,_objectSpread2({"data-head":true},reset));(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){var name=props.name;var selector='';if(props.as&&/(base|title)/.test(props.as)){selector="".concat(props.as,":not([data-head])");}if(props.as==='meta'&&name){selector="meta[name=\"".concat(name,"\"]:not([data-head])");}if(props.as==='meta'&&props.charSet){selector="meta[charset]:not([data-head])";}if(props.as==='link'&&props.rel=='icon'){selector="link[rel=\"icon\"]:not([data-head])";}if(selector){var dom=document.querySelector(selector);dom===null||dom===void 0?void 0:dom.remove();}},[]);return/*#__PURE__*/(0,external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_.createPortal)(comp,document.head);};
 ;// CONCATENATED MODULE: ./src/index.tsx
@@ -235,0 +235,0 @@ var Internal=function Internal(_ref){var children=_ref.children;return children;};var Title=function Title(props){return/*#__PURE__*/(0,jsx_runtime.jsx)(HeadElement,_objectSpread2(_objectSpread2({},props),{},{as:"title"}));};var Meta=function Meta(props){return/*#__PURE__*/(0,jsx_runtime.jsx)(HeadElement,_objectSpread2(_objectSpread2({},props),{},{as:"meta"}));};var Link=function Link(props){return/*#__PURE__*/(0,jsx_runtime.jsx)(HeadElement,_objectSpread2(_objectSpread2({},props),{},{as:"link"}));};var Base=function Base(props){return/*#__PURE__*/(0,jsx_runtime.jsx)(HeadElement,_objectSpread2(_objectSpread2({},props),{},{as:"base"}));};var Style=function Style(props){return/*#__PURE__*/(0,jsx_runtime.jsx)(HeadElement,_objectSpread2(_objectSpread2({},props),{},{as:"style"}));};var Script=function Script(props){return/*#__PURE__*/(0,jsx_runtime.jsx)(HeadElement,_objectSpread2(_objectSpread2({},props),{},{as:"script"}));};var Head=Internal;Head.Meta=Meta;Head.Title=Title;Head.Link=Link;Head.Base=Base;Head.Style=Style;Head.Script=Script;/* harmony default export */ const src = (Head);

dist/dist.min.js

 /*! For license information please see dist.min.js.LICENSE.txt */
-!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("react"),require("react-dom")):"function"===typeof define&&define.amd?define(["react","react-dom"],t):"object"===typeof exports?exports["@uiw/react-head"]=t(require("react"),require("react-dom")):e["@uiw/react-head"]=t(e.React,e.ReactDOM)}(self,((e,t)=>(()=>{"use strict";var r={426:(e,t,r)=>{var o=r(787),n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,u=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function f(e,t,r){var o,a={},f=null,l=null;for(o in void 0!==r&&(f=""+r),void 0!==t.key&&(f=""+t.key),void 0!==t.ref&&(l=t.ref),t)i.call(t,o)&&!c.hasOwnProperty(o)&&(a[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===a[o]&&(a[o]=t[o]);return{$$typeof:n,type:e,key:f,ref:l,props:a,_owner:u.current}}t.jsx=f},246:(e,t,r)=>{e.exports=r(426)},787:t=>{t.exports=e},156:e=>{e.exports=t}},o={};function n(e){var t=o[e];if(void 0!==t)return t.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,n),a.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}function t(t){var r=function(t,r){if("object"!==e(t)||null===t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var n=o.call(t,r||"default");if("object"!==e(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"===e(r)?r:String(r)}function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function o(e){for(var o=1;o<arguments.length;o++){var n=null!=arguments[o]?arguments[o]:{};o%2?r(Object(n),!0).forEach((function(r){var o,a,i;o=e,a=r,i=n[r],(a=t(a))in o?Object.defineProperty(o,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):o[a]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}n.r(a),n.d(a,{default:()=>y});var i=n(787);function u(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var c=n(156),f=n(246),l=["as"],s=function(e){var t=e.as,r=void 0===t?"link":t,n=u(e,l),a=(0,f.jsx)(r,o({"data-head":!0},n));return(0,i.useMemo)((function(){var t=e.name,r="";if(e.as&&/(base|title)/.test(e.as)&&(r="".concat(e.as,":not([data-head])")),"meta"===e.as&&t&&(r='meta[name="'.concat(t,'"]:not([data-head])')),"meta"===e.as&&e.charSet&&(r="meta[charset]:not([data-head])"),r){var o=document.querySelector(r);null===o||void 0===o||o.remove()}}),[]),(0,c.createPortal)(a,document.head)},p=function(e){return e.children};p.Meta=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"meta"}))},p.Title=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"title"}))},p.Link=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"link"}))},p.Base=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"base"}))},p.Style=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"style"}))},p.Script=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"script"}))};const y=p})(),a})()));
+!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("react"),require("react-dom")):"function"===typeof define&&define.amd?define(["react","react-dom"],t):"object"===typeof exports?exports["@uiw/react-head"]=t(require("react"),require("react-dom")):e["@uiw/react-head"]=t(e.React,e.ReactDOM)}(self,((e,t)=>(()=>{"use strict";var r={426:(e,t,r)=>{var o=r(787),n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,c=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,u={key:!0,ref:!0,__self:!0,__source:!0};function f(e,t,r){var o,a={},f=null,l=null;for(o in void 0!==r&&(f=""+r),void 0!==t.key&&(f=""+t.key),void 0!==t.ref&&(l=t.ref),t)i.call(t,o)&&!u.hasOwnProperty(o)&&(a[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===a[o]&&(a[o]=t[o]);return{$$typeof:n,type:e,key:f,ref:l,props:a,_owner:c.current}}t.jsx=f},246:(e,t,r)=>{e.exports=r(426)},787:t=>{t.exports=e},156:e=>{e.exports=t}},o={};function n(e){var t=o[e];if(void 0!==t)return t.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,n),a.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}function t(t){var r=function(t,r){if("object"!==e(t)||null===t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var n=o.call(t,r||"default");if("object"!==e(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}(t,"string");return"symbol"===e(r)?r:String(r)}function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function o(e){for(var o=1;o<arguments.length;o++){var n=null!=arguments[o]?arguments[o]:{};o%2?r(Object(n),!0).forEach((function(r){var o,a,i;o=e,a=r,i=n[r],(a=t(a))in o?Object.defineProperty(o,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):o[a]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}n.r(a),n.d(a,{default:()=>y});var i=n(787);function c(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var u=n(156),f=n(246),l=["as"],s=function(e){var t=e.as,r=void 0===t?"link":t,n=c(e,l),a=(0,f.jsx)(r,o({"data-head":!0},n));return(0,i.useMemo)((function(){var t=e.name,r="";if(e.as&&/(base|title)/.test(e.as)&&(r="".concat(e.as,":not([data-head])")),"meta"===e.as&&t&&(r='meta[name="'.concat(t,'"]:not([data-head])')),"meta"===e.as&&e.charSet&&(r="meta[charset]:not([data-head])"),"link"===e.as&&"icon"==e.rel&&(r='link[rel="icon"]:not([data-head])'),r){var o=document.querySelector(r);null===o||void 0===o||o.remove()}}),[]),(0,u.createPortal)(a,document.head)},p=function(e){return e.children};p.Meta=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"meta"}))},p.Title=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"title"}))},p.Link=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"link"}))},p.Base=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"base"}))},p.Style=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"style"}))},p.Script=function(e){return(0,f.jsx)(s,o(o({},e),{},{as:"script"}))};const y=p})(),a})()));

esm/elements/HeadElement.js

@@ -18,14 +18,17 @@ import _extends from "@babel/runtime/helpers/extends";
     var name = props.name;
-    var selecter = '';
+    var selector = '';
     if (props.as && /(base|title)/.test(props.as)) {
-      selecter = props.as + ":not([data-head])";
+      selector = props.as + ":not([data-head])";
     }
     if (props.as === 'meta' && name) {
-      selecter = "meta[name=\"" + name + "\"]:not([data-head])";
+      selector = "meta[name=\"" + name + "\"]:not([data-head])";
     }
     if (props.as === 'meta' && props.charSet) {
-      selecter = "meta[charset]:not([data-head])";
+      selector = "meta[charset]:not([data-head])";
     }
-    if (selecter) {
-      var dom = document.querySelector(selecter);
+    if (props.as === 'link' && props.rel == 'icon') {
+      selector = "link[rel=\"icon\"]:not([data-head])";
+    }
+    if (selector) {
+      var dom = document.querySelector(selector);
       dom == null || dom.remove();
@@ -32,0 +35,0 @@ }

package.json

 {
   "name": "@uiw/react-head",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React components will manage your changes to the document head",
@@ -5,0 +5,0 @@ "author": "Kenny Wong <[e-mail]>",

README.md

@@ -94,3 +94,3 @@ react-head
 
-outputs:
+Outputs:
 
@@ -102,3 +102,2 @@ ```html
 </head>
-<!-- .... -->
 ```
@@ -113,2 +112,31 @@
 
+```jsx mdx:preview
+import React, { useState } from "react";
+import Head from '@uiw/react-head';
+
+const favicon = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦖</text></svg>`
+const favicon2 = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤡</text></svg>`
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <div>
+      <Head.Link rel="icon" type="image/svg+xml" href={show ? favicon : favicon2} />
+      <button onClick={() => setShow(!show)}>
+        Change Favicon {show ? "🦖" : "🤡"} {String(show)}
+      </button>
+    </div>
+  );
+}
+```
+
+Outputs:
+
+```html
+<head>
+  <link data-head="true" rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤡</text></svg>" />
+</head>
+```
+
+
 ## All Sub Components
@@ -115,0 +143,0 @@

No alert changes

Improved metrics

Total package byte prevSize

31713

increased by4.88%

Lines of code

483

increased by1.9%

Number of lines in readme file

189

increased by17.39%

No dependency changes