emoji-favicon-webpack-plugin - npm Package Compare versions

Comparing version 1.0.1 to 1.1.1

package.json

 {
   "name": "emoji-favicon-webpack-plugin",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Let webpack generate an emoji favicon for you",
@@ -24,7 +24,12 @@ "author": "Trevor Blades <[e-mail]>",
   "dependencies": {
+    "emoji-name-map": "^1.2.7",
+    "emoji-unicode": "^1.0.9",
     "favicon-emoji": "^2.3.0",
-    "to-ico": "^1.1.5"
+    "pn": "^1.1.0",
+    "svg2png": "^4.1.1",
+    "to-ico": "^1.1.5",
+    "twemoji": "^11.2.0"
   },
   "devDependencies": {
-    "@trevorblades/eslint-config": "^6.17.0",
+    "@trevorblades/eslint-config": "^6.18.0",
     "eslint": "^5.6.0",
@@ -31,0 +36,0 @@ "html-webpack-plugin": "^3.2.0",

plugin.js

 const render = require('favicon-emoji/lib/render');
 const toIco = require('to-ico');
+const emojiUnicode = require('emoji-unicode');
+const emojiNameMap = require('emoji-name-map');
+const fs = require('pn/fs');
+const svg2png = require('svg2png');
 
+const isShortcode = /^:?[a-z0-9_]+:?$/;
+async function generatePngs(options) {
+  let emoji = typeof options === 'string' ? options : options.emoji;
+  if (isShortcode.test(emoji)) {
+    emoji = emojiNameMap.get(emoji);
+  }
+
+  const sizes = options.sizes || [16, 32, 48];
+  if (options.useSystem) {
+    return await render(emoji, sizes);
+  }
+
+  const unicode = emojiUnicode(emoji);
+  const path = require.resolve(`twemoji/2/svg/${unicode}.svg`);
+  const svg = await fs.readFile(path);
+  return await Promise.all(
+    sizes.map(size =>
+      svg2png(svg, {
+        width: size,
+        height: size
+      })
+    )
+  );
+}
+
 class EmojiFaviconPlugin {
-  constructor(emoji) {
-    this.emoji = emoji;
+  constructor(options) {
+    this.options = options;
   }
@@ -12,28 +41,35 @@
       'EmojiFaviconPlugin',
-      (compilation, callback) =>
-        render(this.emoji, [16, 32, 48])
-          .then(toIco)
-          .then(ico => {
-            compilation.assets['favicon.ico'] = {
-              source: () => ico,
-              size: () => ico.length
-            };
+      async (compilation, callback) => {
+        const pngs = await generatePngs(this.options);
+        const ico = await toIco(pngs);
+        compilation.assets['favicon.ico'] = {
+          source: () => ico,
+          size: () => ico.length
+        };
 
-            if (compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing) {
-              compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(
-                'EmojiFaviconPlugin',
-                (htmlPluginData, callback) => {
-                  const publicPath = compilation.outputOptions.publicPath || '';
-                  htmlPluginData.html = htmlPluginData.html.replace(
-                    /(<\/head>)/i,
-                    `<link rel="shortcut icon" href="${publicPath}favicon.ico">$&`
-                  );
+        if (compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing) {
+          compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(
+            'EmojiFaviconPlugin',
+            (htmlPluginData, callback) => {
+              const publicPath = compilation.outputOptions.publicPath || '';
+              htmlPluginData.html = htmlPluginData.html.replace(
+                /(<\/head>)/i,
+                `<link rel="shortcut icon" href="${publicPath}favicon.ico">$&`
+              );
 
-                  callback(null, htmlPluginData);
-                }
-              );
+              callback(null, htmlPluginData);
             }
+          );
+        }
 
-            callback();
-          })
+        callback();
+
+        // console.log(pngs);
+
+        // render(this.emoji, [16, 32, 48])
+
+        //   .then(ico => {
+
+        //   });
+      }
     );
@@ -40,0 +76,0 @@ }

README.md

@@ -5,3 +5,3 @@ # Emoji Favicon Webpack Plugin
 
-Leverages [favicon-emoji](https://github.com/albinekb/favicon-emoji) to generate an emoji favicon for your webapp
+Generates a favicon based on an emoji for your webapp
 
@@ -38,8 +38,18 @@ ## Installation
 
-## Caveats
+### Options
 
-MacOS has a pretty awesome and extensive library of emojis built into its [Apple Color Emoji](https://en.wikipedia.org/wiki/Apple_Color_Emoji) typeface, but other operating systems aren't so lucky. If you normally develop on a Mac, you will see different results when you build your app on a Linux or Windows machine.
+By default, we use [Twemoji](https://github.com/twitter/twemoji) for consistent results across all operating systems. If you would prefer to use your system's emoji font instead, specify the `useSystem` option in the constructor. You can also choose which icon `sizes` to include!
 
-In order to get consistent results between development and production, you should make sure that you use the same operating system for building in each environment. For example, if you're using Travis CI to build your app, you must specify `osx` as your `os` option in your build config. You can read more about using OS X in Travis [here](https://docs.travis-ci.com/user/reference/osx/).
+```js
+new EmojiFaviconPlugin({
+  emoji: '🍣',
+  useSystem: true,
+  sizes: [16] // default is [16, 32, 48]
+})
+```
 
+> MacOS has a pretty awesome and extensive library of emojis built into its [Apple Color Emoji](https://en.wikipedia.org/wiki/Apple_Color_Emoji) typeface, but other operating systems aren't so lucky. If you normally develop on a Mac, you will see different results when you build your app on a Linux or Windows machine.
+
+> In order to get consistent results between development and production, you should make sure that you use the same operating system for building in each environment. For example, if you're using Travis CI to build your app, you must specify `osx` as your `os` option in your build config. You can read more about using OS X in Travis [here](https://docs.travis-ci.com/user/reference/osx/).
+
 ## In the wild
@@ -46,0 +56,0 @@

test.js

 /* eslint-env jest */
-const EmojiFaviconPlugin = require('./plugin');
-const HtmlPlugin = require('html-webpack-plugin');
 const MemoryFileSystem = require('memory-fs');
 const webpack = require('webpack');
 const {JSDOM} = require('jsdom');
+const config = require('./webpack.config.js');
 
 const fs = new MemoryFileSystem();
-const compiler = webpack({
-  entry: './index',
-  plugins: [new EmojiFaviconPlugin('🦑'), new HtmlPlugin()]
-});
+const compiler = webpack(config);
 compiler.outputFileSystem = fs;
@@ -14,0 +10,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6779

increased by27.47%

Number of package files

8

increased by14.29%

Lines of code

101

increased by57.81%

Number of lines in readme file

58

increased by20.83%

Worsened metrics

Dependency count

7

increased by250%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedemoji-name-map@^1.2.7

• + Addedemoji-unicode@^1.0.9

• + Addedpn@^1.1.0

• + Addedsvg2png@^4.1.1

• + Addedtwemoji@^11.2.0

• + Addedcamelcase@3.0.0(transitive)

• + Addedcliui@3.2.0(transitive)

• + Addedcode-point-at@1.1.0(transitive)

• + Addeddecamelize@1.2.0(transitive)

• + Addedemoji-name-map@1.2.9(transitive)

• + Addedemoji-unicode@1.1.0(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedfile-url@2.0.2(transitive)

• + Addedfind-up@1.1.2(transitive)

• + Addedfs-extra@1.0.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedget-caller-file@1.0.3(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addedhasha@2.2.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedhosted-git-info@2.8.9(transitive)

• + Addedinvert-kv@1.0.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedis-fullwidth-code-point@1.0.0(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedis-utf8@0.2.1(transitive)

• + Addedisexe@2.0.0(transitive)

• + Addediterate-object@1.3.4(transitive)

• + Addedjsonfile@2.4.0(transitive)

• + Addedkew@0.7.0(transitive)

• + Addedklaw@1.3.1(transitive)

• + Addedlcid@1.0.0(transitive)

• + Addedload-json-file@1.1.0(transitive)

• + Addedmap-o@2.0.10(transitive)

• + Addednormalize-package-data@2.5.0(transitive)

• + Addednumber-is-nan@1.0.1(transitive)

• + Addedos-locale@1.4.0(transitive)

• + Addedparse-json@2.2.0(transitive)

• + Addedpath-exists@2.1.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@1.1.0(transitive)

• + Addedphantomjs-prebuilt@2.1.16(transitive)

• + Addedpify@2.3.0(transitive)

• + Addedpn@1.1.0(transitive)

• + Addedprogress@1.1.8(transitive)

• + Addedread-pkg@1.1.0(transitive)

• + Addedread-pkg-up@1.0.1(transitive)

• + Addedrequest-progress@2.0.1(transitive)

• + Addedrequire-directory@2.1.1(transitive)

• + Addedrequire-main-filename@1.0.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedsemver@5.7.2(transitive)

• + Addedset-blocking@2.0.0(transitive)

• + Addedspdx-correct@3.2.0(transitive)

• + Addedspdx-exceptions@2.5.0(transitive)

• + Addedspdx-expression-parse@3.0.1(transitive)

• + Addedspdx-license-ids@3.0.20(transitive)

• + Addedstring-width@1.0.2(transitive)

• + Addedstrip-ansi@3.0.1(transitive)

• + Addedstrip-bom@2.0.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedsvg2png@4.1.1(transitive)

• + Addedthrottleit@1.0.1(transitive)

• + Addedtwemoji@11.3.0(transitive)

• + Addedvalidate-npm-package-license@3.0.4(transitive)

• + Addedwhich@1.3.1(transitive)

• + Addedwhich-module@1.0.0(transitive)

• + Addedwrap-ansi@2.1.0(transitive)

• + Addedy18n@3.2.2(transitive)

• + Addedyargs@6.6.0(transitive)

• + Addedyargs-parser@4.2.1(transitive)