hello world

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/silly-geckos-live.md

@@ -0,0 +1,5 @@
+---
+"@taep96/svg-path-utils": major
+---
+
+hello world

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": ["plugin:@typescript-eslint/strict-type-checked", "plugin:@typescript-eslint/stylistic-type-checked", "prettier"],
+  "ignorePatterns": "dist",
+  "parserOptions": { "project": true }
+}

.github/workflows/main.yml

@@ -0,0 +1,22 @@
+name: CI
+on:
+  push:
+    branches:
+      - "**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Install Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Run the CI script
+        run: bun ci

.github/workflows/publish.yml

@@ -0,0 +1,29 @@
+name: Publish
+on:
+  push:
+    branches:
+      - "main"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Install Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Create release PR or publish
+        uses: changesets/action@v1
+        with:
+          publish: bun run publish
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,5 @@
+# dependencies
+node_modules/
+
+# build output
+dist/

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 140
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 taep96
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,44 @@
+# svg-path-utils
+
+Create SVG paths using a builder pattern
+
+## Installation
+
+```sh
+bun install @taep96/svg-path-utils
+```
+
+## Usage
+
+<!-- prettier-ignore-start -->
+
+```tsx
+import { Path } from "@taep96/svg-path-utils";
+
+const path = new Path()
+  .M([10, 30])
+  .A([[20, 20], 0, 0, 1, [50, 30]])
+  .A([[20, 20], 0, 0, 1, [90, 30]])
+  .Q(
+    // Possible but not recommended
+    [[90, 60], [50, 90]],
+    [[10, 60], [10, 30]],
+  )
+  .Z()
+  .toString();
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
+
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="red" d={path} />
+</svg>
+```
+
+<!-- prettier-ignore-end -->
+
+## Commands
+
+Available commands: `M`, `m`, `L`, `l`, `H`, `h`, `V`, `v`, `C`, `c`, `S`, `s`,
+`Q`, `q`, `T`, `t`, `A`, `a`, `Z`, `z`
+
+See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands

bun.build.ts

@@ -0,0 +1,7 @@
+import dts from "bun-plugin-dts";
+
+await Bun.build({
+  entrypoints: ["./src/index.ts"],
+  outdir: "./dist",
+  plugins: [dts()],
+});

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@taep96/svg-path-utils",
+  "version": "0.0.0",
+  "description": "Create SVG paths using a builder pattern",
+  "keywords": [
+    "svg",
+    "path",
+    "utils",
+    "builder",
+    "fluent",
+    "api",
+    "typescript",
+    "ts"
+  ],
+  "license": "MIT",
+  "repository": "github:taep96/svg-path-utils",
+  "homepage": "https://taep96.moe/projects/svg-path-utils`",
+  "author": "taep96 <taep96@cock.li> (https://taep96.moe/)",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "bun bun.build.ts",
+    "dev": " bun test --watch",
+    "lint": "tsc && eslint . --cache --cache-location node_modules/.cache/eslint",
+    "format": "prettier . --check --cache --write",
+    "ci": "bun lint && bun test && bun run build",
+    "publish": "bun ci && changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "@types/bun": "latest",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "bun-plugin-dts": "^0.2.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.1.1",
+    "typescript": "^5.3.3"
+  }
+}

src/index.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it, beforeEach } from "bun:test";
+import { Path } from "./index";
+
+let path: Path;
+
+describe("Path", () => {
+  beforeEach(() => {
+    path = new Path()
+      .M([0, 0], [1, 1])
+      .H(0, 1)
+      .C(
+        [
+          [0, 0],
+          [0, 0],
+          [0, 0],
+        ],
+        [
+          [1, 1],
+          [1, 1],
+          [1, 1],
+        ],
+      )
+      .A([[0, 0], 0, 0, 0, [0, 0]], [[1, 1], 1, 1, 1, [1, 1]])
+      .Z();
+  });
+
+  it("matches the expected output", () => {
+    expect(path.toString()).toEqual("M 0 0 1 1 H 0 1 C 0 0 0 0 0 0 1 1 1 1 1 1 A 0 0 0 0 0 0 0 1 1 1 1 1 1 1 Z");
+  });
+
+  it("is flattened correctly", () => {
+    expect(path.toString()).not.toContain(",");
+  });
+});

src/index.ts

@@ -0,0 +1,51 @@
+type Distance = number;
+type Point = [Distance, Distance];
+type Points<N extends number, Acc extends Point[] = []> = Acc["length"] extends N ? Acc : Points<N, [...Acc, Point]>;
+
+type Radii = [number, number];
+type Flag = 0 | 1;
+type ArcParams = [Radii, number, Flag, Flag, Point];
+
+interface PathElement {
+  command: string;
+  params?: Distance[] | Point[] | Point[][] | ArcParams[];
+}
+
+export class Path {
+  path: PathElement[] = [];
+
+  private addElement({ command, params }: PathElement) {
+    const push = () => this.path.push({ command, params });
+
+    if (command === "Z" || command === "z") push();
+    if (!params) return this;
+    if (params.length === 0) return this;
+
+    push();
+
+    return this;
+  }
+
+  M = (...points: Point[]) => this.addElement({ command: "M", params: points });
+  m = (...points: Point[]) => this.addElement({ command: "m", params: points });
+  L = (...points: Point[]) => this.addElement({ command: "L", params: points });
+  l = (...points: Point[]) => this.addElement({ command: "l", params: points });
+  H = (...xs: Distance[]) => this.addElement({ command: "H", params: xs });
+  h = (...xs: Distance[]) => this.addElement({ command: "h", params: xs });
+  V = (...ys: Distance[]) => this.addElement({ command: "V", params: ys });
+  v = (...ys: Distance[]) => this.addElement({ command: "v", params: ys });
+  C = (...points: Points<3>[]) => this.addElement({ command: "C", params: points });
+  c = (...points: Points<3>[]) => this.addElement({ command: "c", params: points });
+  S = (...points: Points<2>[]) => this.addElement({ command: "S", params: points });
+  s = (...points: Points<2>[]) => this.addElement({ command: "s", params: points });
+  Q = (...points: Points<2>[]) => this.addElement({ command: "Q", params: points });
+  q = (...points: Points<2>[]) => this.addElement({ command: "q", params: points });
+  T = (...points: Point[]) => this.addElement({ command: "T", params: points });
+  t = (...points: Point[]) => this.addElement({ command: "t", params: points });
+  A = (...arcParams: ArcParams[]) => this.addElement({ command: "A", params: arcParams });
+  a = (...arcParams: ArcParams[]) => this.addElement({ command: "a", params: arcParams });
+  Z = () => this.addElement({ command: "Z" });
+  z = () => this.addElement({ command: "z" });
+
+  toString = () => this.path.map(({ command, params }) => (params ? `${command} ${params.flat(2).join(" ")}` : command)).join(" ");
+}

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    /* Base Options */
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "allowJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}