@nuxtjs/color-mode - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

CHANGELOG.md

@@ -5,2 +5,16 @@ # Changelog
 
+### [1.0.0](https://github.com/nuxt-community/color-mode-module/compare/v0.0.3...v1.0.0) (2020-04-15)
+
+### [0.0.3](https://github.com/nuxt-community/color-mode-module/compare/v0.0.2...v0.0.3) (2020-04-15)
+
+
+### Features
+
+* overall improvements ([#1](https://github.com/nuxt-community/color-mode-module/issues/1)) ([be3dd4b](https://github.com/nuxt-community/color-mode-module/commit/be3dd4b1885e025d05cac13f921ce338628eb305))
+
+
+### Bug Fixes
+
+* color-scheme component and hydration ([6f026bc](https://github.com/nuxt-community/color-mode-module/commit/6f026bc88eaeb75560b544d7bdafb36debd9f05d))
+
 ### [0.0.2](https://github.com/nuxt-community/color-mode-module/compare/v0.0.1...v0.0.2) (2020-04-15)
@@ -7,0 +21,0 @@

lib/module.js

@@ -1,10 +0,14 @@
-const { readFile } = require('fs').promises
-const { resolve } = require('path')
-const defu = require('defu')
-const template = require('lodash.template')
+import { resolve } from 'path'
+import { promises as fsp } from 'fs'
+import defu from 'defu'
+import template from 'lodash.template'
+import { addTemplates } from './utils'
 
-module.exports = async function (moduleOptions) {
+export default async function (moduleOptions) {
   const defaults = {
     preference: 'system',
     fallback: 'light',
+    hid: 'nuxt-color-mode-script',
+    globalName: '__NUXT_COLOR_MODE__',
+    componentName: 'ColorScheme',
     cookie: {
@@ -23,30 +27,21 @@ key: 'nuxt-color-mode',
 
-  // Add plugin to inject $colorMode
-  this.addPlugin({
-    src: resolve(__dirname, 'templates', 'plugins', 'color-mode.client.js'),
-    fileName: 'plugins/color-mode.client.js',
-    options
-  })
-  this.addPlugin({
-    src: resolve(__dirname, 'templates', 'plugins', 'color-mode.server.js'),
-    fileName: 'plugins/color-mode.server.js',
-    options
-  })
+  // Add all templates
+  const templatesDir = resolve(__dirname, 'templates')
+  await addTemplates.call(this, templatesDir, 'color-mode', options)
 
   // Add script to head to detect user or system preference before loading Nuxt (for SSR)
-  let script = await readFile(resolve(__dirname, 'templates', 'script.js'), 'utf-8')
-  script = template(script)({ options })
-  // minify script for production
-  if (!this.options.dev) {
-    const { minify } = require('terser')
-    script = minify(script).code
-  }
+  const scriptPath = resolve(__dirname, 'script.min.js')
+  const scriptT = await fsp.readFile(scriptPath, 'utf-8')
+  const script = template(scriptT)({ options })
+
   this.options.head.script = this.options.head.script || []
   this.options.head.script.push({
-    hid: 'nuxt-color-mode-script',
+    hid: options.hid,
     innerHTML: script,
     pbody: true
   })
-  this.options.head.__dangerouslyDisableSanitizersByTagID = this.options.head.__dangerouslyDisableSanitizersByTagID || {}
-  this.options.head.__dangerouslyDisableSanitizersByTagID['nuxt-color-mode-script'] = ['innerHTML']
+
+  const serializeProp = '__dangerouslyDisableSanitizersByTagID'
+  this.options.head[serializeProp] = this.options.head[serializeProp] || {}
+  this.options.head[serializeProp][options.hid] = ['innerHTML']
 }

package.json

 {
   "name": "@nuxtjs/color-mode",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "Dark and Light mode for NuxtJS with auto detection",
@@ -18,3 +18,5 @@ "repository": "nuxt-community/color-mode-module",
     "dev": "nuxt example",
+    "build": "rollup -c",
     "lint": "eslint --ext .js,.vue .",
+    "prepublish": "yarn build",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",
@@ -25,4 +27,3 @@ "test": "yarn lint && jest"
     "defu": "^1.0.0",
-    "lodash.template": "^4.5.0",
-    "terser": "^4.6.11"
+    "lodash.template": "^4.5.0"
   },
@@ -43,2 +44,5 @@ "devDependencies": {
     "nuxt-edge": "latest",
+    "rollup": "latest",
+    "rollup-plugin-babel": "latest",
+    "rollup-plugin-terser": "latest",
     "standard-version": "latest"
@@ -45,0 +49,0 @@ },

README.md

@@ -11,10 +11,10 @@ # @nuxtjs/color-mode
 
-[📖 **Release Notes**](./CHANGELOG.md)
+[![nuxt-color-mode](https://user-images.githubusercontent.com/904724/79349768-f09cf080-7f36-11ea-93bb-20fae8c94811.gif)](https://nuxt-color-mode.surge.sh)
 
-## Demo
+<p align="center">
+  <a href="https://nuxt-color-mode.surge.sh">Live demo</a>
+</p>
 
-[![nuxt-color-mode](https://user-images.githubusercontent.com/904724/79349768-f09cf080-7f36-11ea-93bb-20fae8c94811.gif)](https://nuxt-color-mode.surge.sh)
+[📖 Release Notes](./CHANGELOG.md)
 
-[See live demo](https://nuxt-color-mode.surge.sh)
-
 ## Features
@@ -58,4 +58,5 @@
 It injects `$colorMode` helper with:
-- `preference`: actual color-mode selected (can be `'system'`), update it to change the user prefered color mode
-- `value`: useful to know what color mode has been detected when `$colorMode === 'system'`, you should not update it
+- `preference`: Actual color-mode selected (can be `'system'`), update it to change the user prefered color mode
+- `value`: Useful to know what color mode has been detected when `$colorMode === 'system'`, you should not update it
+- `unknown`: Useful to know if during SSR or Generate, we need to render a placeholder
 
@@ -91,3 +92,3 @@ ```vue
 
-You can see a more advanced example in the [example/ directory](./example).
+You can see a more advanced example in the [example/ directory](./example) or [play online on CodeSandBox](https://codesandbox.io/s/github/nuxt-community/color-mode-module/tree/master/?fontsize=14&hidenavigation=1&theme=dark&file=/example/pages/index.vue).
 
@@ -102,2 +103,5 @@ ## Configuration
   fallback: 'light', // fallback value if not system preference found
+  hid: 'nuxt-color-mode-script',
+  globalName: '__NUXT_COLOR_MODE__',
+  componentName: 'ColorScheme',
   cookie: {
@@ -118,4 +122,21 @@ key: 'nuxt-color-mode',
 
-With `nuxt generate` and using `$colorMode` in your Vue template, you may expect a flash. This is due to the fact that we cannot know the user preferences when pre-rendering the page, it will directly set the `fallback` value (or `default` value if no set to `'system'`).
+If you are doing SSR (`nuxt start` or `nuxt generate`) and if `$colorMode.preference` is set to `'system'`, using `$colorMode` in your Vue template will lead to a flash. This is due to the fact that we cannot know the user preferences when pre-rendering the page since they are detected on client-side.
 
+You have to guard any rendering path which depends on `$colorMode` with `$colorMode.unknown` to render a placeholder or directory use our `<ColorScheme>` component.
+
+***Example:**
+
+```vue
+<template>
+  <ColorScheme placeholder="..." tag="span">
+    Color mode: <b>{{ $colorMode.preference }}</b>
+    <span v-if="$colorMode.preference === 'system'">(<i>{{ $colorMode.value }}</i> mode detected)</span>
+  </ColorScheme>
+</template>
+```
+
+Props:
+- `placeholder`: `String`
+- `tag`: `String`,  default: `'span'`
+
 ## TailwindCSS Dark Mode
@@ -122,0 +143,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17714

increased by26.95%

Dependency count

2

decreased by-33.33%

Number of package files

11

increased by37.5%

Lines of code

239

increased by35.8%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

174

increased by13.73%

Worsened metrics

Dev dependency count

17

increased by21.43%

Number of low supply chain risk alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedterser@^4.6.11

• - Removedbuffer-from@1.1.2(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-support@0.5.21(transitive)

• - Removedterser@4.8.1(transitive)