Merge branch 'release/3.0.0-alpha.4'

.github/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "github>studiometa/renovate"
+  ]
+}

.github/workflows/release.yml

@@ -10,33 +10,27 @@ jobs:
     runs-on: macos-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          fetch-depth: '0'
-
       - uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: npm
-          registry-url: https://registry.npmjs.org/
-
-      - run: npm ci
-
-      - run: npm run build
-
-      - name: Test
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Run tests
         run: npm run test -- -- --coverage
-
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v4
         with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          directory: ./coverage
+          files: ./coverage/lcov.info
           flags: unittests
           fail_ci_if_error: false
-          path_to_write_report: ./codecov_report.txt
           verbose: true
-
-      - run: |
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      - name: Publish
+        run: |
           cd dist
           ls -al
           VERSION=${GITHUB_REF/refs\/tags\//}
@@ -47,7 +41,6 @@ jobs:
           npm publish --tag $TAG
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}
-
       # @see https://github.com/actions/create-release/issues/38#issuecomment-715327220
       # @see https://docs.github.com/en/free-pro-team@latest/actions/reference/workflow-commands-for-github-actions#environment-files
       - name: Prepare the changelog from the tag message
@@ -60,7 +53,6 @@ jobs:
             PRERELEASE=true
           fi
           echo "is_prerelease=$PRERELEASE" >> $GITHUB_ENV
-
       # @see https://github.com/actions/create-release
       - name: Create Release
         id: create_release

.github/workflows/tests.yml

@@ -8,55 +8,52 @@ on:
   pull_request:
 
 jobs:
-
-  Build:
+  build:
     runs-on: macos-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20
-        cache: npm
-    - name: Install modules
-      run: npm install
-    - name: Build the package
-      run: npm run build
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
 
-  Code-Quality:
+  code-quality:
     runs-on: macos-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20
-        cache: npm
-    - name: Install modules
-      run: npm install
-    - name: Run code quality tests
-      run: npm run lint:oxlint
-    - name: Run types tests
-      run: npm run lint:types
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - name: Install dependencies
+        run: npm install
+      - name: Run code quality tests
+        run: npm run lint:oxlint
+      - name: Run types tests
+        run: npm run lint:types
 
-  Unit:
+  unit:
     runs-on: macos-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20
-        cache: npm
-    - name: Install modules
-      run: npm install
-    - name: Run tests
-      run: npm run test -- -- --coverage
-    - name: Generate coverage report
-      run: npm run test:coverage
-    - name: Upload coverage to Codecov
-      uses: codecov/codecov-action@v4
-      with:
-        files: ./lcov.info
-        flags: unittests
-        fail_ci_if_error: false
-        verbose: true
-      env:
-        CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - name: Install dependencies
+        run: npm install
+      - name: Run tests
+        run: npm run test -- -- --coverage
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          files: ./coverage/lcov.info
+          flags: unittests
+          fail_ci_if_error: false
+          verbose: true
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [v3.0.0-alpha.4](https://github.com/studiometa/js-toolkit/compare/3.0.0-alpha.3..3.0.0-alpha.4) (2023-07-05)
+
+### Added
+
+- Add support for defining an option default value with a function ([#478](https://github.com/studiometa/js-toolkit/pull/478))
+- Add shorthand props on the scroll service for easier destructuring ([#432](https://github.com/studiometa/js-toolkit/pull/432))
+
+### Fixed
+
+- Fix code coverage reports ([#474](https://github.com/studiometa/js-toolkit/pull/474))
+
 ## [v3.0.0-alpha.3](https://github.com/studiometa/js-toolkit/compare/3.0.0-alpha.2..3.0.0-alpha.3) (2023-04-17)
 
 ### Added

README.md

@@ -30,6 +30,105 @@ This project is a JavaScript micro-framework (along with its utility functions)
 
 Visit [js-toolkit.studiometa.dev](https://js-toolkit.studiometa.dev) to learn more.
 
+## Quick overview
+
+This framework lets you define components as classes, and bind them to the DOM with `data-…` attributes. For example, here is how a `Counter` component would be defined in JavaScript:
+
+```js
+import { Base } from '@studiometa/js-toolkit';
+
+export default class Counter extends Base {
+  static config = {
+    name: 'Counter',
+    refs: ['add', 'remove', 'count'],
+  };
+
+  get counter() {
+    return this.$refs.count.valueAsNumber;
+  }
+
+  set counter(value) {
+    this.$refs.count.value = value;
+  }
+
+  onAddClick() {
+    this.counter += 1;
+  }
+
+  onRemoveClick() {
+    this.counter -= 1;
+  }
+}
+```
+
+And its accompanying HTML would be sprinkled with `data-…` attributes to bind elements from the DOM to the JavaScript class.
+
+```html
+<div data-component="Counter">
+  <button data-ref="add">Add</button>
+  <button data-ref="remove">Remove</button>
+  <input data-ref="count" type="number" value="0" />
+</div>
+```
+
+You can define options that can be specified with `data-option-...` attributes as well. First in JavaScript:
+
+```diff
+  class Counter extends Base {
+    static config = {
+      name: 'Counter',
+      refs: ['add', 'remove', 'count'],
++     options: {
++       step: {
++         type: Number,
++         default: 1,
++       },
++     },
+    };
+
+    onAddClick() {
+-     this.counter += 1;
++     this.counter += this.$options.step;
+    }
+
+    onRemoveClick() {
+-     this.counter -= 1;
++     this.counter -= this.$options.step;
+    }
+  }
+```
+
+And then adjust it as you wish in your HTML:
+
+```diff
+- <div data-component="Counter">
++ <div data-component="Counter" data-option-step="2">
+    <button data-ref="add">Add</button>
+    <button data-ref="remove">Remove</button>
+    <input data-ref="count" type="number" value="0">
+  </div>
+```
+
+The framework also offers a way to instantiate a root component as an application, with child components as dependencies:
+
+```js
+import { Base, createApp } from '@studiometa/js-toolkit';
+import Counter from './components/Counter.js';
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      Counter,
+    },
+  };
+}
+
+export default createApp(App);
+```
+
+Visit our ["Getting Started" guide](https://js-toolkit.studiometa.dev/guide/) to learn more and try the above component by visiting [the playground](https://ui.studiometa.dev/-/play/#script=eNqVkjFPwzAQhff%2BijcguRVtEGurSpTuDKyIwdiXYprYkX2pQFX%2BO7bjlg6A1EiJndO97873bNrOecYRjzLQHMqTZNp0HQbU3rUQD4F7bVxLLO8%2BwoKda%2FaGxWoyUY0MAVvXWyYP%2BmSyOmQOjhMgsGSjoJytzQ7rHAOsbGkJUVRinoOe6rDEi5BaizmEp9YdKO1UShOvY5br2DgbE0dSqkDdzx%2FAX11kP%2FXtG%2FlRkh5NtewbXuL%2BFBvGzRC%2FQzwHsCOOfeaOprMC9MS9t%2BB3E6qb1GCVM6qDbHrahLHKKiESIVwQcsYJ87s%2BjiOvZ72zG623jVH7cwNZWZi4XRdSGUKVzn6hfs4j%2Bwew%2BBsQEaOVyfbrbIyKYqFy8SJZsnzhTzG5TDstcdyp2umSTeM7W30DtazCdQ%3D%3D&html=eNptjkEKwyAQRfc9hcw%2BpHStQukNegOTmYJQZ8SOQm9fUzcJZPX5vLd4FmMzGDRMq6QsTKwOHlJZqcAAkjUKTx%2Bl7OAG%2FmKMXaqq8OCFXg4CIvg7op0HOrcKJWkE%2Fvnfgxs5V92p69YARr%2BZHHBNy9bTwrv2e%2B0Rdu7l%2Fgd%2BLEBJ&style=eNpLyk%2BpVKjmUlAoSExJycxLt1IwLErNteaqBQBpsgf8).
+
 ## Contributing
 
 This projects follows the [Git Flow](https://github.com/petervanderdoes/gitflow-avh) methodology to manage its branches and features. The packages and their dependencies are managed with NPM workspaces. The files are linted with ESLint, type checked with TypeScript and formatted with Prettier.