From 47ab9440cfc249772145ef6cc75957c6ab47ce09 Mon Sep 17 00:00:00 2001 From: Kieran Boyle Date: Sat, 25 Nov 2023 15:47:53 -0800 Subject: [PATCH 1/2] refactor(scripts): update readme and build scripts to simplify dev --- README.md | 101 +++++++++++++++++++++++++++++++++++++++++ docs/package-lock.json | 55 +++++----------------- docs/package.json | 1 + docs/vite.config.js | 5 +- package-lock.json | 1 + package.json | 21 ++++++--- src/component.d.ts | 8 +++- 7 files changed, 141 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 8cf67df..8d18734 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,107 @@ A Svelte seed project for creating components. +## TLDR; + +```vim +> npm i + +> npx husky install + +> chmod +x .husky/post-merge && chmod +x .husky/pre-commit && cp .husky/post-merge .git/hooks + +> npm start +``` + +## Setting up development envirnoment + +1. Install dependencies + + ```vim + > npm i + ``` + +2. Install `husky` hooks + + ```vim + > npx husky install + ``` + +3. Make sure husky scripts are executable and copied to .git/hooks + + ```vim + > chmod +x .husky/post-merge && chmod +x .husky/pre-commit && cp .husky/post-merge .git/hooks + ``` + +4. Start the component dev server and the document server + + ```vim + > npm start + ``` + +5. Happy coding! You're changes will be automatically rebuilt and reflected immediately on the docs. + +## Testing + +Running either of these commands will execute all unit tests. + +| Command | Notes | +| -------------------------------- | ---------------------------------------------------- | +| `npm test` | Single run with no coverage report | +| `npm test:watch` | Watches for changes | +| `npm test:coverage` | Executes tests and launches a coverage report | + +Run all tests +```vim +> npm test +``` + +Run a specific test +```vim +> npm test [path-to-test-file] +``` + +Run all tests and generate a code coverage report +```vim +> npm test:coverage +``` + +## Deploying Documentation + +Run the deploy command to automaically build the docs source and push it to `gh-pages`. + +```vim +> npm run deploy +``` + +## Publishing Package + +You can publish your package via `NPM`: + +1. Adjust the major, minor or patch version in the `version` property of your `package.json`. +2. [Login](https://www.npmjs.com/login) or [create](https://www.npmjs.com/signup) an `NPM` account. +3. Run `npm run publish` + +If you are looking for a private publish or other types, follow the guide [here](https://gist.github.com/coolaj86/1318304). + +## Stack +### Framework +- [Svelte](https://svelte.dev/) - Blazing fast frontend framework that enhances HTML, CSS & JS + +### Testing +- [Vitest](https://vitest.dev/) - Next Generation Testing Framework + +### CI/CD +- [GitHub Actions](https://docs.github.com/en/actions) - Automate, customize, and execute workflows in your repository with GitHub Actions. + +### Development +- [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling +- [Babel](https://babeljs.io/) - JavaScript compiler that allows next generation JS, today +- [Prettier](https://prettier.io/) - An opinionated code formatter +- [ESLint](https://eslint.org/) - A static code analysis tool for finding issues in your code +- [Husky](https://typicode.github.io/husky/) - Hooks for running linting, formatting, etc when you push or commit +- [Lint-staged](https://github.com/lint-staged/lint-staged) - Run linters on git staged files + ## Changelog [Changelog](CHANGELOG.md) diff --git a/docs/package-lock.json b/docs/package-lock.json index 1a37f39..b8772d8 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -8,6 +8,7 @@ "@svelte-plugins/svelte-component-template": "../", "@sveltejs/vite-plugin-svelte": "^3.0.1", "autoprefixer": "^10.4.16", + "sass": "^1.69.5", "svelte": "^4.2.7", "svelte-prismjs": "^1.0.2", "vite": "^5.0.2" @@ -742,8 +743,6 @@ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", "dev": true, - "optional": true, - "peer": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -827,8 +826,6 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "dev": true, - "optional": true, - "peer": true, "engines": { "node": ">=8" } @@ -918,8 +915,6 @@ "url": "https://paulmillr.com/funding/" } ], - "optional": true, - "peer": true, "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -1236,9 +1231,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==", - "dev": true, - "optional": true, - "peer": true + "dev": true }, "node_modules/inflight": { "version": "1.0.6", @@ -1261,8 +1254,6 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "dev": true, - "optional": true, - "peer": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -1429,8 +1420,6 @@ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true, - "optional": true, - "peer": true, "engines": { "node": ">=0.10.0" } @@ -1574,8 +1563,6 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", "dev": true, - "optional": true, - "peer": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -1661,12 +1648,10 @@ } }, "node_modules/sass": { - "version": "1.54.5", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.5.tgz", - "integrity": "sha512-p7DTOzxkUPa/63FU0R3KApkRHwcVZYC0PLnLm5iyZACyp15qSi32x7zVUhRdABAATmkALqgGrjCJAcWvobmhHw==", + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", "dev": true, - "optional": true, - "peer": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -1676,7 +1661,7 @@ "sass": "sass.js" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" } }, "node_modules/slash": { @@ -2282,8 +2267,6 @@ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", "dev": true, - "optional": true, - "peer": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -2337,9 +2320,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, - "optional": true, - "peer": true + "dev": true }, "brace-expansion": { "version": "1.1.11", @@ -2383,8 +2364,6 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", "dev": true, - "optional": true, - "peer": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -2628,9 +2607,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==", - "dev": true, - "optional": true, - "peer": true + "dev": true }, "inflight": { "version": "1.0.6", @@ -2653,8 +2630,6 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "dev": true, - "optional": true, - "peer": true, "requires": { "binary-extensions": "^2.0.0" } @@ -2778,9 +2753,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, - "optional": true, - "peer": true + "dev": true }, "normalize-range": { "version": "0.1.2", @@ -2872,8 +2845,6 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", "dev": true, - "optional": true, - "peer": true, "requires": { "picomatch": "^2.2.1" } @@ -2928,12 +2899,10 @@ } }, "sass": { - "version": "1.54.5", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.5.tgz", - "integrity": "sha512-p7DTOzxkUPa/63FU0R3KApkRHwcVZYC0PLnLm5iyZACyp15qSi32x7zVUhRdABAATmkALqgGrjCJAcWvobmhHw==", + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", "dev": true, - "optional": true, - "peer": true, "requires": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", diff --git a/docs/package.json b/docs/package.json index 19f9f60..35dea3d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -10,6 +10,7 @@ "@svelte-plugins/svelte-component-template": "../", "@sveltejs/vite-plugin-svelte": "^3.0.1", "autoprefixer": "^10.4.16", + "sass": "^1.69.5", "svelte": "^4.2.7", "svelte-prismjs": "^1.0.2", "vite": "^5.0.2" diff --git a/docs/vite.config.js b/docs/vite.config.js index 56fd2ae..8292c13 100644 --- a/docs/vite.config.js +++ b/docs/vite.config.js @@ -22,6 +22,9 @@ export default defineConfig(({ command, mode }) => { }, plugins: [ svelte() - ] + ], + server: { + open: true + } } }) diff --git a/package-lock.json b/package-lock.json index 0cbf7b7..f5ff178 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "@svelte-plugins/svelte-component-template", "version": "0.0.1", + "hasInstallScript": true, "license": "MIT", "devDependencies": { "@babel/core": "^7.23.3", diff --git a/package.json b/package.json index 611a196..5302dd7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@svelte-plugins/svelte-component-template", - "version": "0.0.1", + "version": "0.0.2", "license": "MIT", "description": "A Svelte seed project for creating components.", "author": "Kieran Boyle (https://github.com/dysfunc)", @@ -17,7 +17,7 @@ "homepage": "@svelte-plugins/svelte-component-template", "bugs": "@svelte-plugins/svelte-component-template/issues", "keywords": [ - "components", + "library", "component", "template", "seed", @@ -31,12 +31,18 @@ "/dist" ], "scripts": { + "preinstall": "npm --prefix ./docs install", + "start": "vite & npm --prefix ./docs run dev", "dev": "vite", - "bundle": "vite build", - "deploy": "npx gh-pages -d docs/build", + "build": "vite build", + "build:docs": "npm --prefix ./docs run build", + "deploy": "npm run build:docs && npx gh-pages -d docs/build", + "publish": "npm run build && npm publish --access=public", "lint": "eslint -c ./.eslintrc.json --fix \"src/**/*.{.js,svelte}\"", "format": "prettier --write \"src/**/*.{js,json,svelte}\"", - "test": "vitest --run --coverage" + "test": "vitest --run", + "test:watch": "vitest", + "test:coverage": "vitest --run --coverage && open ./coverage/index.html" }, "devDependencies": { "@babel/core": "^7.23.3", @@ -63,7 +69,10 @@ "exports": { ".": { "types": "./src/index.d.ts", - "svelte": "./src/index.js" + "svelte": "./src/index.js", + "require": "./dist/index.js", + "module": "./dist/index.mjs", + "default": "./src/index.js" } } } diff --git a/src/component.d.ts b/src/component.d.ts index f96507c..69c703a 100644 --- a/src/component.d.ts +++ b/src/component.d.ts @@ -5,7 +5,13 @@ export interface ComponentProps { * The text to display in the component. * @default 'Hello!' */ - text: string; + content: string; + + /** + * Whether the component is disabled. + * @default false + */ + disabled: boolean; } export default class Component extends SvelteComponent< From efe6036e97d0853514a15460e592acdc4991b78f Mon Sep 17 00:00:00 2001 From: Kieran Boyle Date: Sat, 25 Nov 2023 15:52:43 -0800 Subject: [PATCH 2/2] refactor(scripts): update readme and build scripts to simplify dev --- docs/package-lock.json | 2 +- package-lock.json | 5 ++--- package.json | 3 +-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/package-lock.json b/docs/package-lock.json index b8772d8..237bdd7 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -16,7 +16,7 @@ }, "..": { "name": "@svelte-plugins/svelte-component-template", - "version": "0.0.1", + "version": "0.0.2", "dev": true, "license": "MIT", "devDependencies": { diff --git a/package-lock.json b/package-lock.json index f5ff178..9741cb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,12 @@ { "name": "@svelte-plugins/svelte-component-template", - "version": "0.0.1", + "version": "0.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@svelte-plugins/svelte-component-template", - "version": "0.0.1", - "hasInstallScript": true, + "version": "0.0.2", "license": "MIT", "devDependencies": { "@babel/core": "^7.23.3", diff --git a/package.json b/package.json index 5302dd7..75cc747 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,7 @@ "/dist" ], "scripts": { - "preinstall": "npm --prefix ./docs install", - "start": "vite & npm --prefix ./docs run dev", + "start": "npm --prefix ./docs install && vite & npm --prefix ./docs run dev", "dev": "vite", "build": "vite build", "build:docs": "npm --prefix ./docs run build",