v3: Svelte v5

.github/workflows/test.yml

@@ -0,0 +1,34 @@
+name: Test Coverage
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  cache-and-install:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # https://phoenixnap.com/kb/git-checkout-submodule
+      - name: Checkout submodules
+        run: git submodule update --init --recursive
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run tests
+        run: pnpm test

.gitignore

@@ -1,3 +1,5 @@
 .DS_Store
 node_modules
 /dist/
+
+.svelte-kit

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "lib/d3-speedometer"]
 	path = lib/d3-speedometer
-	url = git://github.com/palerdot/react-d3-speedometer
+	url = https://github.com/palerdot/react-d3-speedometer

.storybook/main.js

@@ -1,9 +1,33 @@
 module.exports = {
-  stories: ["../stories/**/*.stories.js"],
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+
   addons: [
     "@storybook/addon-actions",
     "@storybook/addon-links",
     "@storybook/addon-storysource",
     "@storybook/addon-docs",
   ],
+
+  async viteFinal(config, { configType }) {
+    // customize the Vite config here
+    return {
+      ...config,
+      define: {
+        ...config.define,
+        global: "window",
+      },
+    }
+  },
+
+  framework: {
+    name: "@storybook/svelte-vite",
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 }

.storybook/manager.js

@@ -1,7 +1,16 @@
-import { addons } from "@storybook/addons"
-import { themes } from "@storybook/theming"
+import { addons } from "@storybook/manager-api"
+import { themes, create } from "@storybook/theming/create"
+import theme from "../src/core/theme"
+
+const speedoTheme = create({
+  ...themes.dark,
+  ...theme,
+
+  brandTitle: "svelte-speedometer",
+  brandUrl: "https://github.com/palerdot/svelte-speedometer",
+})
 
 addons.setConfig({
   showPanel: true,
-  theme: themes.dark,
+  theme: speedoTheme,
 })

.storybook/preview.js

@@ -1,4 +1,3 @@
-import { addParameters } from "@storybook/svelte"
 import { create } from "@storybook/theming/create"
 
 import theme from "../src/core/theme"
@@ -10,7 +9,7 @@ const speedoTheme = create({
   brandUrl: "https://github.com/palerdot/svelte-speedometer",
 })
 
-addParameters({
+export const parameters = {
   options: {
     /**
      * display the top-level grouping as a "root" in the sidebar
@@ -23,4 +22,5 @@ addParameters({
   docs: {
     previewSource: "open",
   },
-})
+}
+export const tags = ["autodocs"];

README.md

@@ -2,17 +2,20 @@
 
 **svelte-speedometer** is a react component library for showing speedometer like gauge using d3.
 
-[![CircleCI Build Status](https://circleci.com/gh/palerdot/svelte-speedometer.svg?style=svg)](https://circleci.com/gh/palerdot/svelte-speedometer)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-
-[![NPM](https://nodei.co/npm/svelte-speedometer.png)](https://npmjs.org/package/svelte-speedometer)
+[![Github](https://github.com/palerdot/svelte-speedometer/actions/workflows/test.yml/badge.svg)](https://github.com/palerdot/svelte-speedometer/actions/workflows/test.yml/badge.svg)
+[![npm version](https://badge.fury.io/js/svelte-speedometer.svg)](https://badge.fury.io/js/svelte-speedometer)
 
 ![svelte-speedometer](https://raw.githubusercontent.com/palerdot/svelte-speedometer/master/speedo.gif)
 
-**NOTE:** If you are using `Svelte v5`, please use upcoming `v3.0`.`v2.0` is compatible with `Svelte` `v3` or `v4`.
+
+**IMPORTANT:** If you are using `Svelte v5`, please use `v3.0`.`v2.0` is compatible with `Svelte v3 or v4`.
 
 ## Usage:
 
+**pnpm**
+`pnpm add svelte-speedometer`
+
 **Yarn:**
 `yarn add svelte-speedometer` 
 
@@ -58,6 +61,7 @@ import Speedometer from "svelte-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/svelte-speedometer/?selectedKind=svelte-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 - `<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/svelte-speedometer/?path=/story/svelte-speedometer--custom-segment-stops) |

package.json

@@ -3,70 +3,85 @@
   "version": "2.0.0",
   "description": "Svelte component for showing speedometer like gauge using d3",
   "repository": "https://github.com/palerdot/svelte-speedometer",
-  "svelte": "src/index.js",
-  "module": "dist/index.mjs",
+  "type": "module",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "prepare": "./scripts/publish.sh",
     "prepack": "./scripts/prepack.sh",
     "postpack": "./scripts/postpack.sh",
-    "test": "jest --verbose",
-    "build": "rollup -c",
+    "test": "vitest",
+    "build": "svelte-package --input ./src && publint --strict",
     "init-submodule": "git submodule update --init",
     "pull-submodules": "git submodule foreach git pull origin master",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "publish-storybook": "bash ./scripts/publish_storybook.sh",
-    "make-build": "npm run build && cp ./src/index.d.ts ./dist/"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o .out",
+    "publish-storybook": "bash ./scripts/publish_storybook.sh"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^6.0.0",
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/addon-docs": "^5.3.17",
-    "@storybook/addon-links": "^5.3.17",
-    "@storybook/addon-storysource": "^5.3.17",
-    "@storybook/addons": "^5.3.17",
-    "@storybook/svelte": "^5.3.17",
-    "@testing-library/jest-dom": "^5.3.0",
-    "@testing-library/svelte": "^3.0.0",
-    "babel-jest": "^25.2.6",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-lodash": "^3.3.4",
-    "git-url-parse": "^11.1.2",
-    "jest": "^25.2.7",
-    "jest-transform-svelte": "^2.1.1",
-    "prettier": "^2.0.2",
-    "prettier-eslint": "^9.0.1",
-    "rollup": "^1.20.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-svelte": "^5.0.0",
-    "svelte": "^3.20.1",
-    "svelte-jester": "^1.0.5",
-    "svelte-loader": "^2.13.6"
+    "@storybook/addon-actions": "^8.2.6",
+    "@storybook/addon-docs": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-storysource": "^8.2.6",
+    "@storybook/manager-api": "^8.2.6",
+    "@storybook/svelte": "^8.2.6",
+    "@storybook/svelte-vite": "^8.2.6",
+    "@storybook/theming": "^8.2.6",
+    "@sveltejs/package": "^2.3.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/svelte": "^5.2.1",
+    "eslint": "^9.8.0",
+    "eslint-plugin-svelte": "^2.43.0",
+    "globals": "^15.8.0",
+    "happy-dom": "^14.12.3",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
+    "publint": "^0.2.9",
+    "storybook": "^8.2.6",
+    "svelte": "5.0.0-next.203",
+    "svelte-check": "^3.8.4",
+    "svelte-eslint-parser": "^0.41.0",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.0.0-alpha.55",
+    "vite": "^5.3.5",
+    "vitest": "^2.0.4"
   },
   "dependencies": {
-    "d3": "^5.15.0",
+    "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.1.1"
+    "memoize-one": "^6.0.0"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0"
+    "svelte": "^5.0.0"
   },
   "keywords": [
     "svelte",
     "speedometer",
     "d3",
     "gauge"
   ],
-  "files": [
-    "src",
-    "dist"
-  ],
   "author": "palerdot",
-  "license": "MIT"
+  "license": "MIT",
+  "packageManager": "[email protected]"
 }