From ca2521e57dd26b09f38f28e49283dcec66a43054 Mon Sep 17 00:00:00 2001 From: Adrien Burgun Date: Sun, 22 Jan 2023 18:23:34 +0100 Subject: [PATCH] :sparkles: Supporting building as library with vite --- .gitignore | 1 + package-lock.json | 141 +++++++++++++++++++++++++++++++ package.json | 56 ++++++++---- src/index.js | 2 +- src/solid/PixelPerfectCanvas.tsx | 9 +- test/solid/App.tsx | 4 +- test/solid/tsconfig.json | 16 ++++ tsconfig.json | 13 ++- vite.config.ts | 13 +++ 9 files changed, 231 insertions(+), 24 deletions(-) create mode 100644 test/solid/tsconfig.json diff --git a/.gitignore b/.gitignore index 40a8aad..067e637 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ **/*.d.ts node_modules/ +dist/ diff --git a/package-lock.json b/package-lock.json index 62676f5..327e0d6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 110e96b..efd96db 100644 --- a/package.json +++ b/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", - "serve": "vite preview", - "test": "echo \"Error: no test specified\" && exit 1" + "build": "npm run prepare-dev && vite build && tsc && cp src/index.d.ts dist/types/index.d.ts", + "clean": "rm -rf dist/ src/index.d.ts" }, "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", - "solid-js": "^1.6.2" + "vite-plugin-solid": "^2.3.0" }, "peerDependencies": { "solid-js": "^1.6.2" diff --git a/src/index.js b/src/index.js index a5cf8f1..0972616 100644 --- a/src/index.js +++ b/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) { diff --git a/src/solid/PixelPerfectCanvas.tsx b/src/solid/PixelPerfectCanvas.tsx index 9c6621a..e0b7c91 100644 --- a/src/solid/PixelPerfectCanvas.tsx +++ b/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 = (props) => { let canvasRef: HTMLCanvasElement; let containerRef: HTMLDivElement; @@ -24,7 +27,7 @@ export const PixelPerfectCanvas: Component = (props) => onResize: props.onResize, }); - props.onMount?.(result); + props.onAttach?.(result); return result; }); diff --git a/test/solid/App.tsx b/test/solid/App.tsx index c57859b..a15fcc5 100644 --- a/test/solid/App.tsx +++ b/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} />