release preparations

Author: Kalle Ott

.gitignore

@@ -6,3 +6,4 @@ node_modules
 .rts2_cache_esm
 .rts2_cache_umd
 dist
+coverage

.npmignore

@@ -0,0 +1,10 @@
+*.log
+.DS_Store
+node_modules
+.cache
+.rts2_cache_cjs
+.rts2_cache_esm
+.rts2_cache_umd
+/.vscode
+/example
+/coverage

README.md

@@ -1,3 +1,70 @@
-# 🦥 react-lazy-svg
+<p align="center" style="color: #343a40">
+  <icon style="font-size:100px;" alt="sloth emoji">🦥</icon>
+  <h1 align="center">react-lazy-svg</h1>
+</p>
+<p align="center" style="font-size: 1.2rem;">The easy way to use SVG sprite-sheets</p>
 
-Create a sprite sheet for used svg sources on your page without any magic in your bundler.
+react-lazy-svg is a simple way to use SVGs with the performance benefits of a
+sprite-sheet and svg css styling possibilities. Without bloating the bundle. It
+automatically creates a sprite-sheet for all used SVGs on the client but also
+provides a function to create a server side rendered sprite-sheet for icons used
+in the first paint.
+
+## Usage
+
+```bash
+npm install --save react-lazy-svg
+```
+
+Wrap the App with the contextProvider and provide a function to resolve SVG
+strings by URL. If you are using server side rendering you should also call
+`initOnClient()` to hydrate the sprite sheet context.
+
+```tsx
+import { SpriteContextProvider, initOnClient. Icon } from 'react-lazy-svg';
+import icon1 from './icon1.svg';
+
+const loadSVG = async (url: string) => {
+  return await (await fetch(url)).text();
+};
+initOnClient();
+
+const Root = () => (
+  <SpriteContextProvider loadSVG={loadSVG}>
+    <Icon url={icon1} className="icon"></Icon>
+    <Icon url={icon1} className="icon red"></Icon>
+  </SpriteContextProvider>
+);
+```
+
+On the server the SVG resolver function could look like this, and load the svg
+contents from the file system.
+
+```ts
+const svgIconFiles = new Map<string, string>();
+export const readSvg = async (url: string) => {
+  if (svgIconFiles.has(url)) {
+    return svgIconFiles.get(url);
+  }
+
+  const readFile = promisify(fs.readFile);
+
+  const cdnBase = 'http://localhost:3001/static/media/';
+
+  if (url.startsWith(cdnBase)) {
+    url = path.join(
+      process.cwd(),
+      url.replace(cdnBase, './build/public/static/media/'),
+    );
+  }
+
+  // ignore external assets on server side
+  if (!url.startsWith('http')) {
+    const svgString = await readFile(url, { encoding: 'utf8' });
+    svgIconFiles.set(url, svgString);
+    return svgString;
+  }
+
+  return undefined;
+};
+```

example/yarn.lock

@@ -1198,16 +1198,27 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.9.tgz#43896ab87fc82bda1dfd600cdf44a0c8a64e11d2"
   integrity sha512-0sCTiXKXELOBxvZLN4krQ0FPOAA7ij+6WwvD0k/PHd9/KAkr4dXel5J9fh6F4x1FwAQILqAWkmpeuS6mjf1iKA==
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
 "@types/q@^1.5.1":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
 "@types/react-dom@link:../node_modules/@types/react-dom":
   version "0.0.0"
+  uid ""
+
+"@types/react@*":
+  version "0.0.0"
+  uid ""
 
 "@types/react@link:../node_modules/@types/react":
   version "0.0.0"
+  uid ""
 
 "@types/source-list-map@*":
   version "0.1.2"
@@ -2938,6 +2949,11 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -5616,7 +5632,7 @@ loglevel@^1.6.6:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312"
   integrity sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7398,6 +7414,15 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
+prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proxy-addr@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -7641,22 +7666,25 @@ react-dev-utils@^10.2.0:
 
 "react-dom@link:../node_modules/react-dom":
   version "0.0.0"
+  uid ""
 
 react-error-overlay@^6.0.6, react-error-overlay@^6.0.7:
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-is@^16.8.4:
+react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 "react-lazy-svg@link:..":
-  version "0.1.0"
+  version "0.0.0"
+  uid ""
 
 "react@link:../node_modules/react":
   version "0.0.0"
+  uid ""
 
 read-pkg-up@^4.0.0:
   version "4.0.0"
@@ -8094,6 +8122,14 @@ sax@^1.2.4, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

package.json

@@ -1,7 +1,14 @@
 {
   "name": "react-lazy-svg",
   "license": "MIT",
-  "version": "0.1.0",
+  "repository": {
+    "url": "https://github.com/kaoDev/react-lazy-svg"
+  },
+  "author": {
+    "name": "Kalle Ott",
+    "url": "https://github.com/kaoDev/"
+  },
+  "version": "1.0.0",
   "main": "dist/index.js",
   "module": "dist/react-lazy-svg.esm.js",
   "typings": "dist/index.d.ts",
@@ -27,22 +34,22 @@
     "printWidth": 80,
     "semi": true,
     "singleQuote": true,
-    "trailingComma": "es5"
+    "trailingComma": "all",
+    "proseWrap": "always"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.9.0",
-    "@testing-library/react": "^10.0.6",
-    "@types/axios": "^0.14.0",
-    "@types/jest": "^25.2.3",
-    "@types/react": "^16.9.35",
+    "@testing-library/jest-dom": "^5.11.0",
+    "@testing-library/react": "^10.4.3",
+    "@types/jest": "^26.0.3",
+    "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
     "husky": "^4.2.5",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "rimraf": "^3.0.2",
     "tsdx": "^0.13.2",
     "tslib": "^2.0.0",
-    "typescript": "^3.9.3"
+    "typescript": "^3.9.5"
   },
   "dependencies": {}
 }

src/index.tsx

@@ -17,12 +17,12 @@ const globalIconsCache: IconsCache = new Map();
 
 export const renderSpriteSheetToString = async (
   markupString: string,
-  knownIcons: IconsCache
+  knownIcons: IconsCache,
 ) => {
   const arr = await Promise.all(Array.from(knownIcons.values()));
 
   const spriteSheet = renderToStaticMarkup(
-    <SpriteSheet icons={arr.filter((a): a is IconData => a != null)} />
+    <SpriteSheet icons={arr.filter((a): a is IconData => a != null)} />,
   );
 
   return markupString.replace(ssrEmptySpriteSheet, spriteSheet);
@@ -34,7 +34,7 @@ export interface IconData {
   attributes: { [key: string]: string };
 }
 
-const noop = () => void 0;
+const noop = () => undefined;
 
 interface SpriteContextValue {
   /**
@@ -78,7 +78,7 @@ const addIcon = (icon: IconData) => {
 
 const parseSVG = (
   url: string,
-  svgString: string | undefined
+  svgString: string | undefined,
 ): IconData | undefined => {
   if (svgString) {
     const svgRegex = /<svg([\s\S]*?)>([\s\S]*?)<\/svg>/gim;
@@ -103,7 +103,7 @@ const parseSVG = (
 const registerIconInCache = (
   url: string,
   svgString: string | undefined,
-  knownIcons: IconsCache
+  knownIcons: IconsCache,
 ) => {
   const iconData = parseSVG(url, svgString);
 
@@ -149,12 +149,12 @@ export const SpriteContextProvider: FC<SpriteContext> = ({
       if (knownIcons.has(url)) {
         return;
       }
-      const iconPromise = loadSVG(url).then(svgString =>
-        registerIconInCache(url, svgString, knownIcons)
+      const iconPromise = loadSVG(url).then((svgString) =>
+        registerIconInCache(url, svgString, knownIcons),
       );
       knownIcons.set(url, iconPromise);
     },
-    [knownIcons]
+    [knownIcons],
   );
 
   const contextValue = useMemo(() => ({ registerSVG }), [registerSVG]);
@@ -172,7 +172,14 @@ export const Icon: FC<{ url: string } & React.SVGProps<SVGSVGElement>> = ({
   ...props
 }) => {
   const { registerSVG } = useContext(spriteContext);
-  registerSVG(url);
+
+  if (typeof document !== 'undefined') {
+    registerSVG(url);
+  } else {
+    useEffect(() => {
+      registerSVG(url);
+    }, [url]);
+  }
 
   return (
     <svg {...props}>
@@ -205,7 +212,7 @@ const SpriteSheet: FC<{ icons: IconData[] }> = ({ icons }) => {
               dangerouslySetInnerHTML={svgString}
             />
           );
-        }
+        },
       )}
     </svg>
   );
@@ -218,7 +225,7 @@ const mapNodeAttributes = (rawAttributes: NamedNodeMap) =>
 
       return attributes;
     },
-    {}
+    {},
   );
 
 export const initOnClient = (knownIcons: IconsCache = globalIconsCache) => {
@@ -228,7 +235,7 @@ export const initOnClient = (knownIcons: IconsCache = globalIconsCache) => {
   if (spriteSheet) {
     const sprites = spriteSheet.querySelectorAll('symbol');
 
-    sprites.forEach(node => {
+    sprites.forEach((node) => {
       const { id, attributes: rawAttributes, innerHTML } = node;
       const attributes = mapNodeAttributes(rawAttributes);
       const iconData = {
@@ -238,7 +245,7 @@ export const initOnClient = (knownIcons: IconsCache = globalIconsCache) => {
       };
       addIcon(iconData);
 
-      knownIcons.set(id, new Promise(resolve => resolve(iconData)));
+      knownIcons.set(id, new Promise((resolve) => resolve(iconData)));
     });
   }
 };