Core update / d3 micro modules

.github/workflows/workflow.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
       - name: Checkout repository

.storybook/main.js

@@ -3,10 +3,9 @@ module.exports = {
     "../src/stories/**/*.stories.mdx",
     "../src/stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
+
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-  core: {
-    builder: "@storybook/builder-vite", // 👈 The builder enabled here.
-  },
+
   async viteFinal(config, { configType }) {
     // customize the Vite config here
     return {
@@ -17,4 +16,13 @@ module.exports = {
       },
     }
   },
+
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  }
 }

.storybook/manager.js

@@ -1,8 +1,9 @@
 import { addons } from "@storybook/addons"
-import { create } from "@storybook/theming/create"
+import { themes, create } from "@storybook/theming/create"
 import theme from "../src/core/theme"
 
 const speedoTheme = create({
+  ...themes.dark,
   ...theme,
 
   brandTitle: "vue-speedometer",

.storybook/preview.js

@@ -1,12 +1,16 @@
 // ref: https://www.npmjs.com/package/@storybook/vue3
-import { app } from "@storybook/vue3"
+// ref: https://github.com/storybookjs/storybook/issues/19295
+import { setup } from "@storybook/vue3"
 
 // DEVELOPMENT: 'src/index.js'
-import VueSpeedometer from "../src/index"
+import VueSpeedometer from "../src/index.vue"
 // PRODUCTION build testing
 // import VueSpeedometer from "../dist/index"
-
-app.component("vue-speedometer", VueSpeedometer)
-app.mixin({
-  /* My mixin */
+//
+setup(app => {
+  app.component("vue-speedometer", VueSpeedometer)
+  app.mixin({
+    /* My mixin */
+  })
 })
+

README.md

@@ -11,10 +11,15 @@
 
 ![vue-speedometer](https://raw.githubusercontent.com/palerdot/vue-speedometer/master/speedo.gif)
 
-Note: v2.x is compatible with `Vue 3`. Please use latest v1.x (v1.8.0 at the time of writing) if you are using `Vue 2`.
+**IMPORTANT** `v3.0` is released which is a complete rewrite with composition api/SFC (single file components). Minimum required vue version is `v3.3`. If you are using Vue 3 composition api, please upgrade to `v3`
+
+Note: v2.x is still compatible with `Vue 3`. Please use latest v1.x (v1.8.0 at the time of writing) if you are using `Vue 2`.
 
 ## Usage:
 
+**pnpm:**
+`pnpm add vue-speedometer` 
+
 **Yarn:**
 `yarn add vue-speedometer` 
 
@@ -23,16 +28,27 @@ Note: v2.x is compatible with `Vue 3`. Please use latest v1.x (v1.8.0 at the tim
 
 ```javascript
 // import the component
+<script setup>
 import VueSpeedometer from "vue-speedometer"
+</script>
 // and use it in your component like
-export default {
-  components: { VueSpeedometer }, 
-  template: `<vue-speedometer />`,
-}
+<template>
+  <VueSpeedometer />
+</template>
 ```
 
 `vue-speedometer` is the name of the component to be used inside Vue templates
 
+### Slim Build (Experimental):
+
+There is a `Slim` build available without bundling `d3`. This project uses `d3` *micro bundles*. If your project also uses `d3` *microbundles*, you can opt for **slim build**. Necessary `d3` dependencies required for slim build to work are - `d3-array`, `d3-color`, `d3-ease`, `d3-format`, `d3-interpolate`, `d3-scale`, `d3-selection`, `d3-shape`, `d3-transition`. 
+```javascript
+// sample slim build usage
+import VueSpeedometer from "vue-speedometer/slim"
+// and use it
+<VueSpeedometer />
+```
+
 ## Ports:
 - React: [react-d3-speedometer](https://github.com/palerdot/react-d3-speedometer)
 - Svelte: [svelte-speedometer](https://github.com/palerdot/svelte-speedometer)
@@ -69,6 +85,7 @@ You can view [Live Examples here](https://palerdot.in/vue-speedometer/)
 | ringWidth | Number         | 60     | Width of the speedometer ring. |
 | textColor | String         | #666     | Should be a valid color code - colorname, hexadecimal name or rgb value. Used for both showing the current value and the segment values |
 | valueFormat | String       |  | should be a valid format for [d3-format](https://github.com/d3/d3-format#locale_format). By default, no formatter is used. You can use a valid d3 format identifier (for eg: `d` to convert float to integers), to format the values. **Note:** This formatter affects all the values (current value, segment values) displayed in the speedometer |
+| segmentValueFormatter | Function | value => value     | Custom segment values formatter function. This function is applied after 'valueFormat' prop if present. |
 | currentValueText | String | ${value} | Should be provided a string which should have **${value}** placeholder which will be replaced with current value. By default, current value is shown (formatted with `valueFormat`). For example, if current Value is 333 if you would like to show `Current Value: 333`, you should provide a string **`Current Value: ${value}`**. See [Live Example](https://palerdot.in/vue-speedometer/?selectedKind=vue-speedometer&selectedStory=Custom%20Current%20Value%20Text&full=0&down=1&left=1&panelRight=0) |
 | currentValuePlaceholderStyle | String | ${value} | Should be provided a placeholder string which will be replaced with current value in `currentValueTextProp`. For example: you can use ruby like interpolation by giving following props - `<vue-speedometer    currentValueText="Current Value: #{value}" currentValuePlaceholderStyle={"#{value}"} />`. This is also helpful if you face `no-template-curly-in-string` eslint warnings and would like to use different placeholder for current value |
 | customSegmentStops | Array         | []     | Array of values **starting** at `min` value, and **ending** at `max` value. This configuration is useful if you would like to split the segments at custom points or have unequal segments at preferred values. If the values does not begin and end with `min` and `max` value respectively, an error will be thrown. This configuration will override `segments` prop, since total number of segments will be `length - 1` of `customSegmentProps`. For example, `[0, 50, 75, 100]` value will have three segments - `0-50`, `50-75`, `75-100`. See [Live Example](https://palerdot.in/vue-speedometer/?path=/story/vue-speedometer--custom-segment-stops) |

cypress.config.js → cypress.config.cjs

@@ -1,4 +1,5 @@
 const { defineConfig } = require("cypress")
+const vitePreprocessor = require("cypress-vite")
 
 module.exports = defineConfig({
   video: false,
@@ -17,9 +18,11 @@ module.exports = defineConfig({
     },
   },
 
-  // e2e: {
-  //   setupNodeEvents(on, config) {
-  //     // implement node event listeners here
-  //   },
-  // },
+  // ref: https://www.npmjs.com/package/cypress-vite
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      on("file:preprocessor", vitePreprocessor())
+    },
+  },
 })

nyc.config.js → nyc.config.cjs

@@ -3,5 +3,6 @@ module.exports = {
   "report-dir": "cypress-coverage",
   "check-coverage": true,
   include: ["src"],
+  extension: [".js", ".vue"],
   exclude: ["src/stories", "src/core", "src/__tests__", "src/index.d.ts"],
 }

package.json

@@ -6,6 +6,7 @@
     "name": "palerdot",
     "email": "[email protected]"
   },
+  "type": "module",
   "files": [
     "dist"
   ],
@@ -14,23 +15,27 @@
   "module": "./dist/vue-speedometer.es.js",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/vue-speedometer.es.js",
       "require": "./dist/vue-speedometer.umd.js"
+    },
+    "./slim": {
+      "import": "./dist/slim/index.js"
     }
   },
   "scripts": {
     "lint": "prettier -l src/index.js src/props.js src/__tests__/**/**.js",
-    "build-storybook": "build-storybook -o .out",
+    "build-storybook": "storybook build -o .out",
     "init-submodule": "git submodule update --init",
     "lintfix": "prettier --write src/index.js src/props.js src/__tests__/**/**.js",
     "publish-storybook": "bash .scripts/publish_storybook.sh",
     "pull-submodules": "git submodule foreach git pull origin master",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "test": "vitest",
     "pretest": "rm -rf .nyc_output || true",
     "full-test": "vitest run && yarn instrument-code && yarn cy:run && yarn clean:instrumented-code",
     "clean:instrumented-code": "rm -rf instrumented",
-    "instrument-code": "yarn clean:instrumented-code && npx nyc instrument --compact=false src instrumented && cp -R src/core instrumented/",
+    "instrument-code": "npm run clean:instrumented-code && npx nyc instrument --compact=false src instrumented && cp -R src/core instrumented/",
     "mkdir:reports": "mkdir reports || true",
     "precopy:reports": "npm run mkdir:reports",
     "copy:reports": "cp cypress-coverage/coverage-final.json reports/from-cypress.json || true",
@@ -43,51 +48,63 @@
     "cy:open": "cypress open",
     "build": "npm run build:main && npm run build:slim && npm run copy:types",
     "build:main": "NODE_ENV=production vite build",
-    "build:slim": "echo 'porumai ... slim build coming soon'",
+    "build:slim": "NODE_ENV=production vite build -c slim.config.js",
     "copy:types": "cp ./src/index.d.ts ./dist/",
     "prepublishOnly": "npm run build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "d3": "^5.9.2",
+    "d3-array": "^3.1.4",
+    "d3-color": "^3.1.0",
+    "d3-ease": "^3.0.1",
+    "d3-format": "^3.1.0",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.1.0",
+    "d3-transition": "^3.0.1",
     "lodash-es": "^4.17.15",
-    "memoize-one": "^5.0.5"
+    "memoize-one": "^6.0.0"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.10.0",
-    "@cypress/vue": "^3.1.0",
+    "@cypress/code-coverage": "^3.12.26",
+    "@cypress/vue": "^6.0.0",
     "@istanbuljs/nyc-config-babel": "^3.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-vite": "^0.1.38",
-    "@storybook/theming": "^6.5.9",
-    "@storybook/vue3": "^6.5.9",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/theming": "^7.6.17",
+    "@storybook/vue3": "^7.6.17",
+    "@storybook/vue3-vite": "^7.6.17",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "^3.2.37",
-    "@vue/server-test-utils": "^1.3.0",
-    "@vue/test-utils": "^2.0.0",
-    "cypress": "^10.3.0",
+    "@vue/test-utils": "^2.4.4",
+    "cypress": "^13.6.6",
+    "cypress-vite": "^1.5.0",
     "git-url-parse": "^11.1.2",
-    "jsdom": "^14.0.0",
+    "happy-dom": "^13.6.2",
     "nyc": "^15.1.0",
     "prettier": "^2.1.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "sprintf-js": "^1.1.2",
-    "vite": "^2.9.13",
-    "vitest": "^0.16.0",
-    "vue": "^3.2.37"
+    "storybook": "^7.6.17",
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1",
+    "vue": "^3.4.20"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.3.0"
   },
   "bugs": {
     "url": "https://github.com/palerdot/vue-speedometer/issues"
   },
   "engines": {
-    "node": ">=8.0",
-    "npm": ">=3.0.0"
+    "node": ">=18.0",
+    "npm": ">=10.0.0"
   },
   "homepage": "https://github.com/palerdot/vue-speedometer#readme",
   "keywords": [