fix: make sure react-dom/server is not imported in client bundle

BREAKING: createSpriteSheetString and renderSpriteSheetToString have to be imported from "react-lazy-svg/dist/ssr"

Author: Kalle Ott

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'prettier',
+    'plugin:react-hooks/recommended',
+  ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/prop-types': 0,
+  },
+};

.github/workflows/test.yml

@@ -3,12 +3,30 @@ name: Node.js Package
 on: push
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
       - run: yarn --pure-lockfile
       - run: yarn test
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - run: yarn --pure-lockfile
+      - run: yarn lint
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - run: yarn --pure-lockfile
+      - run: yarn build

.husky/.gitignore

@@ -0,0 +1 @@
+_

README.md

@@ -1,7 +1,6 @@
-<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"><img alt="sloth emoji" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/271/sloth_1f9a5.png" /></p>
+
+<h1 align="center">react-lazy-svg</h1>
 <p align="center" style="font-size: 1.2rem;">The easy way to use SVG sprite-sheets</p>
 
 react-lazy-svg is a simple way to use SVGs with the performance benefits of a

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+};

example/package.json

@@ -9,20 +9,19 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "fastify": "^2.15.1",
-    "fastify-static": "^2.7.0",
-    "razzle": "^3.1.3",
-    "razzle-plugin-typescript": "^3.1.3",
+    "fastify": "^3.13.0",
+    "fastify-static": "^4.0.1",
+    "razzle": "^3.3.13",
+    "razzle-plugin-typescript": "^3.3.13",
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-lazy-svg": "link:../"
   },
   "devDependencies": {
-    "@types/node": "^14.0.9",
+    "@types/node": "^14.14.32",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
-    "@types/webpack-env": "^1.15.2",
-    "tslint": "^6.1.2",
-    "typescript": "^3.9.3"
+    "@types/webpack-env": "^1.16.0",
+    "typescript": "^4.2.3"
   }
 }

example/razzle.config.js

@@ -1,3 +1,15 @@
 module.exports = {
-  plugins: ['typescript'],
+  plugins: [
+    {
+      name: 'typescript',
+      options: {
+        forkTsChecker: {
+          tsconfig: './tsconfig.json',
+          tslint: undefined,
+          watch: './src',
+          typeCheck: true,
+        },
+      },
+    },
+  ],
 };

example/src/index.ts

@@ -1,8 +1,8 @@
 import app from './server';
 
-app.listen(5001, 'localhost', function(err, address) {
+app.listen(5001, 'localhost', function (err, address) {
   if (err) {
-    app.log.error(err);
+    app.log.error(err.message, err);
     process.exit(1);
   }
   app.log.info(`server listening on ${address}!`);

example/src/server.tsx

@@ -3,11 +3,8 @@ import React from 'react';
 import fastify from 'fastify';
 import { renderToString } from 'react-dom/server';
 import fastifyStatic from 'fastify-static';
-import {
-  SpriteContextProvider,
-  IconsCache,
-  createSpriteSheetString,
-} from 'react-lazy-svg';
+import { SpriteContextProvider, IconsCache } from 'react-lazy-svg';
+import { createSpriteSheetString } from 'react-lazy-svg/dist/ssr';
 import { readSvg } from './serverLoadSvg';
 
 const assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);

example/src/serverLoadSvg.ts

@@ -15,7 +15,7 @@ export const readSvg = async (url: string) => {
   if (url.startsWith(cdnBase)) {
     url = path.join(
       process.cwd(),
-      url.replace(cdnBase, './build/public/static/media/')
+      url.replace(cdnBase, './build/public/static/media/'),
     );
   }