✨ Supporting building as library with vite

.gitignore

@@ -1,2 +1,3 @@
 **/*.d.ts
 node_modules/
+dist/

package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "license": "MIT",
       "devDependencies": {
+        "@rollup/plugin-typescript": "^11.0.0",
         "solid-js": "^1.6.2",
+        "tslib": "^2.4.1",
         "typescript": "^4.9.0",
         "vite": "^3.0.9",
         "vite-plugin-solid": "^2.3.0"
@@ -573,6 +575,68 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@rollup/plugin-typescript": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.0.0.tgz",
+      "integrity": "sha512-goPyCWBiimk1iJgSTgsehFD5OOFHiAknrRJjqFCudcW8JtWiBlK284Xnn4flqMqg6YAjVG/EE+3aVzrL5qNSzQ==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.14.0||^3.0.0",
+        "tslib": "*",
+        "typescript": ">=3.7.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        },
+        "tslib": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "18.11.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1096,6 +1160,12 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1275,6 +1345,18 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.21",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
@@ -1405,6 +1487,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "dev": true
+    },
     "node_modules/typescript": {
       "version": "4.9.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
@@ -1942,6 +2030,41 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "@rollup/plugin-typescript": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.0.0.tgz",
+      "integrity": "sha512-goPyCWBiimk1iJgSTgsehFD5OOFHiAknrRJjqFCudcW8JtWiBlK284Xnn4flqMqg6YAjVG/EE+3aVzrL5qNSzQ==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^5.0.1",
+        "resolve": "^1.22.1"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      }
+    },
+    "@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "18.11.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -2226,6 +2349,12 @@
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "dev": true
     },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -2353,6 +2482,12 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
     "postcss": {
       "version": "8.4.21",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
@@ -2437,6 +2572,12 @@
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
       "dev": true
     },
+    "tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "dev": true
+    },
     "typescript": {
       "version": "4.9.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",

package.json

@@ -2,34 +2,60 @@
   "name": "pptk",
   "version": "0.1.0",
   "description": "Pixel-Perfect ToolKit, a library to help make pixel-perfect applications on high-DPI devices",
-  "main": "src/index.js",
+  "keywords": [
+    "pixel-perfect",
+    "canvas",
+    "dpi",
+    "high-dpi"
+  ],
+  "author": "Shad Amethyst",
+  "license": "MIT",
   "type": "module",
-  "types": "types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./solid": {
+      "import": {
+        "types": "./dist/types/solid/index.d.ts",
+        "default": "./dist/solid.js"
+      },
+      "require": {
+        "types": "./dist/types/solid/index.d.ts",
+        "default": "./dist/solid.cjs"
+      }
+    }
+  },
   "scripts": {
     "prepare-dev": "tsc src/index.js --declaration --allowJs --emitDeclarationOnly",
     "dev:solid": "vite dev test/solid",
     "dev:vanilla": "vite dev test/vanilla",
-    "build": "vite build",
+    "build": "npm run prepare-dev && vite build && tsc && cp src/index.d.ts dist/types/index.d.ts",
-    "serve": "vite preview",
+    "clean": "rm -rf dist/ src/index.d.ts"
-    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
     "url": "https://git.shadamethyst.xyz/adri326/pptk"
   },
-  "keywords": [
-    "pixel-perfect",
-    "canvas",
-    "dpi",
-    "high-dpi"
-  ],
-  "author": "Shad Amethyst",
-  "license": "MIT",
   "devDependencies": {
+    "solid-js": "^1.6.2",
+    "tslib": "^2.4.1",
     "typescript": "^4.9.0",
     "vite": "^3.0.9",
-    "vite-plugin-solid": "^2.3.0",
+    "vite-plugin-solid": "^2.3.0"
-    "solid-js": "^1.6.2"
   },
   "peerDependencies": {
     "solid-js": "^1.6.2"

src/index.js

@@ -149,7 +149,7 @@ export function listenPixelRatio(element, callback, fire_first = false) {
 }
 
 /**
- * @param {HTMLCanvas} canvas
+ * @param {HTMLCanvasElement} canvas
  * @return {PixelPerfectContext2D}
  **/
 export function getContext2D(canvas) {

src/solid/PixelPerfectCanvas.tsx

@@ -1,4 +1,4 @@
-import { JSX, Component, createEffect, onMount } from "solid-js";
+import { JSX, Component, createEffect } from "solid-js";
 import { attachCanvas } from '../index';
 import styles from './PixelPerfectCanvas.module.css';
 
@@ -7,9 +7,12 @@ export type PixelPerfectCanvasProps = {
     class?: string,
     children?: JSX.Element,
     onResize?: (canvas: HTMLCanvasElement, width: number, height: number) => void,
-    onMount?: (canvas: HTMLCanvasElement) => void,
+    onAttach?: (canvas: HTMLCanvasElement) => void,
 }
 
+/**
+ *
+ **/
 export const PixelPerfectCanvas: Component<PixelPerfectCanvasProps> = (props) => {
     let canvasRef: HTMLCanvasElement;
     let containerRef: HTMLDivElement;
@@ -24,7 +27,7 @@ export const PixelPerfectCanvas: Component<PixelPerfectCanvasProps> = (props) =>
             onResize: props.onResize,
         });
 
-        props.onMount?.(result);
+        props.onAttach?.(result);
 
         return result;
     });

test/solid/App.tsx

@@ -1,5 +1,5 @@
 import { Component, createEffect, createSignal } from "solid-js";
-import { getContext2D, StrokeMode } from "../../src";
+import { getContext2D } from "../../src";
 import { PixelPerfectCanvas } from "../../src/solid";
 
 const App: Component = () => {
@@ -37,7 +37,7 @@ const App: Component = () => {
                 "margin-left": "1px",
             }}
             onResize={update}
-            onMount={setCanvasRef}
+            onAttach={setCanvasRef}
         />
         <input
             type="checkbox"

test/solid/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "jsx": "preserve",
+        "jsxImportSource": "solid-js",
+        "types": ["vite/client"],
+        "strict": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "rootDir": "../../"
+    }
+}

tsconfig.json

@@ -9,7 +9,14 @@
         "jsxImportSource": "solid-js",
         "types": ["vite/client"],
         "strict": true,
-        "noEmit": true,
+        "declaration": true,
-        "isolatedModules": true
+        "declarationDir": "./dist/types",
-    }
+        "isolatedModules": true,
+        "emitDeclarationOnly": true,
+        "rootDir": "src/"
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+    ]
 }

vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
 import solidPlugin from "vite-plugin-solid";
+import path from "node:path";
 
 export default defineConfig({
     clearScreen: false,
@@ -11,5 +12,17 @@ export default defineConfig({
     },
     build: {
         target: "esnext",
+        manifest: true,
+        lib: {
+            name: "pptk",
+            entry: {
+                index: path.resolve(__dirname, "src/index.js"),
+                solid: path.resolve(__dirname, "src/solid/index.tsx")
+            }
+        },
+        rollupOptions: {
+            external: ["solid-js"],
+            plugins: []
+        }
     },
 });