[Release] 2.12.0

.eslintrc.cjs

@@ -6,6 +6,8 @@ module.exports = {
     'jsdoc/valid-types': 'off',
     'jsdoc/check-types': 'off',
     'jsdoc/tag-lines': ['warn', 'always', { count: 0, startLines: 1 }],
+    'unicorn/no-array-for-each': 'warn',
+    'no-restricted-syntax': 'off',
   },
   settings: {
     'import/extensions': ['.js', '.mjs', '.jsx', '.ts', '.mts'],

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
           registry-url: https://registry.npmjs.org/
 

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: 18
+        node-version: 20
         cache: npm
     - name: Install modules
       run: npm install
@@ -28,7 +28,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: 18
+        node-version: 20
         cache: npm
     - name: Install modules
       run: npm install
@@ -43,7 +43,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: 18
+        node-version: 20
         cache: npm
     - name: Install modules
       run: npm install

.gitignore

@@ -6,6 +6,7 @@ node_modules/
 yarn.lock
 .cache/
 packages/**/package-lock.json
+.eslintcache
 
 # Log files
 npm-debug.log*

.nvmrc

@@ -1 +1 @@
-18
+20

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [v2.12.0](https://github.com/studiometa/js-toolkit/compare/2.11.2..2.12.0) (2023-12-01)
+
+### Added
+
+- Add `startsWith` and `endsWith` utils ([#389](https://github.com/studiometa/js-toolkit/pull/389))
+
+### Changed
+
+- Improve performance by migrating from `forEach` to `for…of` for loops ([#391](https://github.com/studiometa/js-toolkit/pull/391))
+- Update NPM dependencies ([#392](https://github.com/studiometa/js-toolkit/pull/392))
+
 ## [v2.11.2](https://github.com/studiometa/js-toolkit/compare/2.11.1..2.11.2) (2023-07-13)
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "2.11.2",
+  "version": "2.12.0",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -13,8 +13,8 @@
     "docs:build": "npm run build --workspace=@studiometa/js-toolkit-docs",
     "test": "npm run test --workspace=@studiometa/js-toolkit-tests",
     "lint": "npm run lint:eslint && npm run lint:types && npm run lint:docs",
-    "lint:eslint": "eslint packages/js-toolkit --ext=.js,.ts",
-    "lint:docs": "prettier --check 'packages/docs/**/*.{md,js,html,vue}'",
+    "lint:eslint": "eslint packages/js-toolkit --ext=.js,.ts --cache",
+    "lint:docs": "prettier --check 'packages/docs/**/*.{md,js,html,vue}' --cache",
     "lint:types": "tsc --build tsconfig.lint.json",
     "lint:md": "prettier --check '*.md'",
     "fix": "npm run fix:docs && npm run fix:md",
@@ -24,28 +24,26 @@
     "build:cp-files": "cp packages/js-toolkit/package.json dist/ && sed -i '' 's/index\\.ts/index\\.js/' dist/package.json && cat dist/package.json && cp LICENSE dist/ && cp README.md dist",
     "build:types": "tsc --build tsconfig.build.json",
     "build:pkg": "node scripts/build.js",
-    "build-for-export-size": "node scripts/add-utils-export.js && rm -rf dist && npm run build:pkg && npm run build:cp-files",
-    "postinstall": "patch-package"
+    "build-for-export-size": "node scripts/add-utils-export.js && rm -rf dist && npm run build:pkg && npm run build:cp-files"
   },
   "devDependencies": {
     "@studiometa/eslint-config": "^3.1.3",
-    "@studiometa/prettier-config": "^2.1.1",
+    "@studiometa/prettier-config": "^3.0.0",
     "@studiometa/stylelint-config": "^3.0.2",
-    "@types/estree": "^1.0.1",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^18.16.19",
+    "@types/estree": "^1.0.5",
+    "@types/jest": "^29.5.10",
+    "@types/node": "^20.10.1",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.44.0",
-    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint": "^8.54.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
-    "eslint-plugin-jest": "^27.2.2",
-    "patch-package": "^7.0.1",
+    "eslint-plugin-jest": "^27.6.0",
     "prettier": "^2.8.8",
-    "typescript": "^4.9.5"
+    "typescript": "^5.3.2"
   },
   "dependencies": {
-    "esbuild": "^0.15.18",
-    "fast-glob": "^3.3.0"
+    "esbuild": "^0.19.8",
+    "fast-glob": "^3.3.2"
   }
 }

packages/demo/meta.config.mjs

@@ -1,6 +1,6 @@
 import { resolve, dirname } from 'node:path';
 import { defineConfig } from '@studiometa/webpack-config';
-import { prototyping } from '@studiometa/webpack-config/presets';
+import { prototyping } from '@studiometa/webpack-config-preset-prototyping';
 
 const { pathname } = new URL(import.meta.url);
 

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.11.2",
+  "version": "2.12.0",
   "private": true,
   "type": "commonjs",
   "scripts": {
@@ -12,13 +12,14 @@
     "@studiometa/eslint-config": "^3.1.3",
     "@studiometa/stylelint-config": "^3.0.2",
     "@studiometa/tailwind-config": "^2.0.2",
-    "@studiometa/ui": "^0.2.33",
-    "@studiometa/webpack-config": "^4.2.6",
-    "eslint": "^8.44.0",
-    "postcss": "^8.4.25",
+    "@studiometa/ui": "^0.2.40",
+    "@studiometa/webpack-config": "^5.3.0",
+    "@studiometa/webpack-config-preset-prototyping": "^5.3.0",
+    "eslint": "^8.54.0",
+    "postcss": "^8.4.31",
     "prettier": "^2.8.8",
     "stylefire": "^7.0.3",
-    "stylelint": "^15.10.1",
-    "tailwindcss": "^3.3.2"
+    "stylelint": "^15.11.0",
+    "tailwindcss": "^3.3.5"
   }
 }

packages/docs/.vitepress/config.js

@@ -323,6 +323,8 @@ function getUtilsSidebar() {
       link: '/utils/string/',
       collapsible: true,
       items: [
+        { text: 'startsWith', link: '/utils/string/startsWith.html' },
+        { text: 'endsWith', link: '/utils/string/endsWith.html' },
         { text: 'withLeadingCharacters', link: '/utils/string/withLeadingCharacters.html' },
         { text: 'withLeadingSlash', link: '/utils/string/withLeadingSlash.html' },
         { text: 'withoutLeadingCharacters', link: '/utils/string/withoutLeadingCharacters.html' },

packages/docs/.vitepress/theme/components/Badge.vue

@@ -27,7 +27,7 @@
     border-radius: 0.25em;
     padding: 0.5em 0.75em;
     color: #fff;
-    background-color: var(--vp-c-brand);
+    background-color: var(--vp-button-brand-bg);
     white-space: nowrap;
   }
 

packages/docs/.vitepress/theme/components/Loader.vue

@@ -5,29 +5,25 @@
     leave-to-class="opacity-0 transform scale-0"
     leave-active-class="transition"
     appear
-    mode="out-in"
-  >
+    mode="out-in">
     <div class="absolute top-1/2 left-1/2 w-6 h-6 -mt-3 -ml-3">
       <svg
         class="animate-spin h-full w-full text-gray-500"
         style="animation-duration: 0.2s"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
-        viewBox="0 0 24 24"
-      >
+        viewBox="0 0 24 24">
         <circle
           class="opacity-25"
           cx="12"
           cy="12"
           r="10"
           stroke="currentColor"
-          stroke-width="4"
-        ></circle>
+          stroke-width="4"></circle>
         <path
           class="opacity-75"
           fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        ></path>
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
       </svg>
       <span class="sr-only">Loading...</span>
     </div>

packages/docs/.vitepress/theme/components/PreviewIframe.vue

@@ -48,8 +48,7 @@
 <template>
   <div
     class="relative my-4 rounded bg-vp-sidebar-bg overflow-hidden"
-    style="height: 60vh; border: 1px solid var(--vp-c-divider)"
-  >
+    style="height: 60vh; border: 1px solid var(--vp-c-divider)">
     <Loader v-if="isLoading" />
     <iframe
       ref="iframe"
@@ -63,7 +62,6 @@
         height: calc(60vh * 1.5);
         transform-origin: top left;
         transform: scale(0.6666);
-      "
-    />
+      " />
   </div>
 </template>

packages/docs/.vitepress/theme/index.js

@@ -1,14 +1,12 @@
 import DefaultTheme from 'vitepress/theme';
 import Badge from './components/Badge.vue';
-import Tabs from './components/Tabs.vue';
 import PreviewIframe from './components/PreviewIframe.vue';
 import './custom.scss';
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
     app.component('Badge', Badge);
-    app.component('Tabs', Tabs);
     app.component('PreviewIframe', PreviewIframe);
   },
 };

packages/docs/api/decorators/withRelativePointer.md

@@ -12,7 +12,7 @@ export default class RelativePointer extends withRelativePointer(Base, {
 }) {
   static config = {
     name: 'RelativePointer',
-    refs: ['item']
+    refs: ['item'],
   };
 
   movedrelative(props) {
@@ -46,7 +46,7 @@ The `movedrelative` class method will be triggered when moving the pointer.
 
 ### Move a ref element
 
-This decorator can be used to easily use the pointer position relative from the component's root element. The following example will scale a ref based on the position of the pointer *inside* the component's root element.
+This decorator can be used to easily use the pointer position relative from the component's root element. The following example will scale a ref based on the position of the pointer _inside_ the component's root element.
 
 ```js
 import { Base, withRelativePointer } from '@studiometa/js-toolkit';

packages/docs/api/decorators/withResponsiveOptions.md

@@ -34,8 +34,7 @@ export default class Component extends withResponsiveOptions(Base) {
   data-component="Component"
   data-option-label:xxs="Small Mobile"
   data-option-label:xs:s="Large Mobile And Tablet"
-  data-option-label="Other devices"
->
+  data-option-label="Other devices">
   ...
 </div>
 ```
@@ -94,8 +93,7 @@ export default class Component extends withResponsiveOptions(Base) {
 <div
   data-component="Component"
   data-option-label:s="You are on a small screen"
-  data-option-label="I am the default label"
->
+  data-option-label="I am the default label">
   ...
 </div>
 ```
@@ -117,8 +115,7 @@ With the same breakpoins and component as before, but with a different markup, w
   data-component="Component"
   data-option-label:s="You are on a small screen"
   data-option-label:m="You are on a medium screen"
-  data-option-label:l="You are on a large screen"
->
+  data-option-label:l="You are on a large screen">
   ...
 </div>
 ```
@@ -139,8 +136,7 @@ Breakpoints can be combined to use the same value multiple times:
 <div
   data-component="Component"
   data-option-label:s:m="You are on a small or medium screen"
-  data-option-label:l="You are on a large screen"
->
+  data-option-label:l="You are on a large screen">
   ...
 </div>
 ```

packages/docs/guide/recipes/counter-component/index.md

@@ -30,20 +30,13 @@ Find below the JavaScript and HTML implementation of a counter component.
 
 <div class="my-4 p-10 rounded bg-vp-bg-alt text-center" v-html="CounterHtmlRaw"></div>
 
-<Tabs :items="tabs">
-  <template #content-1>
+::: code-group
 
-<<< ./guide/recipes/counter-component/Counter.js
+<<< ./Counter.js
 
-  </template>
-  <template #content-2>
+<<< ./Counter.html
 
-<<< ./guide/recipes/counter-component/Counter.html
-
-  </template>
-  <template #content-3>
-
-```js
+```js [app.js]
 import { Base, createApp } from '@studiometa/js-toolkit';
 import Counter from './Counter.js';
 
@@ -56,8 +49,7 @@ class App extends Base {
   };
 }
 
-export default createApp(App, document.body);
+export default createApp(App);
 ```
 
-  </template>
-</Tabs>
+:::