🏗 refactor(scripts): update readme and build scripts to simplify dev

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)

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"

docs/vite.config.js

@@ -22,6 +22,9 @@ export default defineConfig(({ command, mode }) => {
     },
     plugins: [
       svelte()
-    ]
+    ],
+    server: {
+      open: true
+    }
   }
 })

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,17 @@
     "/dist"
   ],
   "scripts": {
+    "start": "npm --prefix ./docs install && 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 +68,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"
     }
   }
 }

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<