Add version number to meta tag (#52)

Author: compulim

CHANGELOG.md

@@ -6,9 +6,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Added version number to `<meta name="react-scroll-to-bottom:version">` for diagnostic purpose, in PR [#51](https://github.com/compulim/react-scroll-to-bottom/pull/51)
+
 ### Changed
 
-- Bump dependencies, in PR [#XXX](https://github.com/compulim/react-scroll-to-bottom/pull/XXX)
+- Bump dependencies, in PR [#50](https://github.com/compulim/react-scroll-to-bottom/pull/50)
    - [`@babel/cli@7.10.3`](https://www.npmjs.com/package/@babel/cli)
    - [`@babel/core@7.10.3`](https://www.npmjs.com/package/@babel/core)
    - [`@babel/plugin-proposal-object-rest-spread@7.10.3`](https://www.npmjs.com/package/@babel/plugin-proposal-object-rest-spread)

packages/component/babel.config.json

@@ -1,6 +1,14 @@
 {
   "plugins": [
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-proposal-object-rest-spread",
+    [
+      "babel-plugin-transform-inline-environment-variables",
+      {
+        "include": [
+          "npm_package_version"
+        ]
+      }
+    ]
   ],
   "presets": [
     [

packages/component/package-lock.json

@@ -44,6 +44,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.10.3",
     "@babel/preset-env": "^7.10.3",
     "@babel/preset-react": "^7.10.1",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "eslint": "^7.3.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.0",

packages/component/package.json

@@ -0,0 +1,21 @@
+/* global global:readonly, process:readonly */
+/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
+
+function setMetaTag(name, content) {
+  try {
+    const { document } = global;
+
+    if (typeof document !== 'undefined' && document.createElement && document.head && document.head.appendChild) {
+      const meta = document.querySelector(`html meta[name="${encodeURI(name)}"]`) || document.createElement('meta');
+
+      meta.setAttribute('name', name);
+      meta.setAttribute('content', content);
+
+      document.head.appendChild(meta);
+    }
+  } catch (err) {}
+}
+
+export default function addVersionToMetaTag() {
+  setMetaTag('react-scroll-to-bottom:version', process.env.npm_package_version);
+}

packages/component/src/addVersionToMetaTag.js

@@ -1,3 +1,5 @@
+import addVersionToMetaTag from './addVersionToMetaTag';
+
 import AutoHideFollowButton from './ScrollToBottom/AutoHideFollowButton';
 import BasicScrollToBottom from './BasicScrollToBottom';
 import Composer from './ScrollToBottom/Composer';
@@ -39,3 +41,5 @@ export {
   useScrollToTop,
   useSticky
 };
+
+addVersionToMetaTag();

packages/component/src/index.js

@@ -0,0 +1,11 @@
+arrowParens: avoid
+bracketSpacing: true
+endOfLine: auto
+jsxBracketSameLine: false
+printWidth: 120
+proseWrap: preserve
+quoteProps: as-needed
+semi: true
+singleQuote: true
+tabWidth: 2
+trailingComma: none

packages/playground/.prettierrc.yml

@@ -34,6 +34,11 @@ const ROOT_CSS = css({
     '& > *:not(:last-child)': {
       marginRight: 10
     }
+  },
+
+  '& > .version': {
+    bottom: 10,
+    position: 'absolute'
   }
 });
 
@@ -77,6 +82,9 @@ const App = () => {
   const [intervalEnabled, setIntervalEnabled] = useState(false);
   const [paragraphs, setParagraphs] = useState(createParagraphs(10));
   const [commandBarVisible, setCommandBarVisible] = useState(false);
+  const [loadedVersion] = useState(() =>
+    document.querySelector('head meta[name="react-scroll-to-bottom:version"]').getAttribute('content')
+  );
 
   const handleAdd = useCallback(count => setParagraphs([...paragraphs, ...createParagraphs(count)]), [
     paragraphs,
@@ -225,6 +233,9 @@ const App = () => {
           {commandBarVisible && <CommandBar />}
         </ScrollToEnd>
       </div>
+      <div className="version">
+        <code>react-scroll-to-bottom@{loadedVersion}</code> has loaded.
+      </div>
       {intervalEnabled && <Interval callback={handleAdd1} enabled={true} timeout={1000} />}
     </div>
   );