Merge branch 'release/1.0.0-alpha.6'

CHANGELOG.md

@@ -6,6 +6,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [v1.0.0-alpha.6](https://github.com/studiometa/ui/compare/1.0.0-alpha.5..1.0.0-alpha.6) (2024-08-27)
+
+### Added
+
+- Add support for targeting self by default ([#290](https://github.com/studiometa/ui/issues/290), [#291](https://github.com/studiometa/ui/pull/291), [2951299](https://github.com/studiometa/ui/commit/2951299))
+- Add support for self reference in the effect ([#290](https://github.com/studiometa/ui/issues/290), [#291](https://github.com/studiometa/ui/pull/291), [0eac076](https://github.com/studiometa/ui/commit/0eac076))
+
+### Changed
+
+- Update [@studiometa/js-toolkit](https://github.com/studiometa/js-toolkit) to 3.0.0-alpha.9 ([6c1a8c7](https://github.com/studiometa/ui/commit/6c1a8c7))
+
 ## [v1.0.0-alpha.5](https://github.com/studiometa/ui/compare/1.0.0-alpha.4..1.0.0-alpha.5) (2024-08-06)
 
 ### Fixed

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "studiometa/ui",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "A set of opiniated, unstyled and accessible components.",
   "license": "MIT",
   "require": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-workspace",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "private": true,
   "workspaces": [
     "packages/*"

packages/docs/.vitepress/config.ts

@@ -76,11 +76,11 @@ export default defineConfig({
       },
       {
         text: 'Playground',
-        link: '/play/',
+        link: process.env.NODE_ENV === 'development' ? '/play/index.html' : '/play/',
         target: '_blank',
       },
       {
-        text: `v${pkg.version}`,
+        text: `<span class="VPBadge font-bold bg-[var(--vp-button-brand-bg)] text-[var(--vp-button-brand-text)]">v${pkg.version}</span>`,
         items: [{ text: 'Release Notes', link: 'https://github.com/studiometa/ui/releases' }],
       },
     ],

packages/docs/components/atoms/Action/index.md

@@ -1,14 +1,8 @@
 ---
-outline: deep
+badges: [JS]
 ---
 
-# Action <Badges :texts="badges" />
-
-<script setup>
-  import pkg from '@studiometa/ui/atoms/Action/package.json';
-
-  const badges = [`v${pkg.version}`, 'JS'];
-</script>
+# Action <Badges :texts="$frontmatter.badges" />
 
 The `Action` atom is a component who trigger an action on other components.
 

packages/docs/components/atoms/Action/js-api.md

@@ -33,7 +33,6 @@ Modifiers can be chained with a `.` as separator:
 ### `target`
 
 - Type: `string`
-- Required
 - Available formats:
   - `Name`
   - `Name OtherName`
@@ -54,6 +53,19 @@ class Foo extends Base {
 ```
 :::
 
+#### No target
+
+By not defining the `target` option, the default target will be the current `Action` instance. The following will toggle the `clicked` class on the `<button>` element:
+
+```html
+<button
+  data-component="Action"
+  data-option-effect="target.classList.toggle('clicked')"
+  class="clicked">
+  Click me
+</button>
+```
+
 #### Single target
 
 The following configuration will use all `Foo` components as targets, the effect callback will be triggered for each and every one of them.
@@ -111,6 +123,7 @@ The `effect` option must be used to define a small piece of JavaScript that will
 - `ctx` (`Record<name, Base>`): the current targeted component in an object with a uniq key being its name set in the static `config.name` property and the value being the component instance
 - `event` (`Event`): the event that triggered the action
 - `target` (`Base`): a direct reference to the current targeted component
+- `action` (`Base`): a direct reference to the current action component
 
 #### Simple effect vs callback effect
 

packages/docs/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@studiometa/ui-docs",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "concurrently 'npm run dev:playground' 'npm run dev:vitepress' --names 'playground,vitepress'",
+    "dev": "concurrently 'npm run dev:playground' 'npm run dev:vitepress' --names 'play,docs'",
     "dev:playground": "npm run watch --workspace=@studiometa/ui-playground",
     "dev:vitepress": "vitepress dev .",
     "prebuild": "npm run build --workspace=@studiometa/ui-playground",
     "build": "vitepress build ."
   },
   "dependencies": {
-    "@studiometa/js-toolkit": "^3.0.0-alpha.6"
+    "@studiometa/js-toolkit": "^3.0.0-alpha.9"
   },
   "devDependencies": {
     "@iconify-json/octicon": "1.1.56",

packages/docs/tailwind.config.cjs

@@ -12,7 +12,6 @@ const folders = fs
   .map((item) => path.resolve(ui, item.name));
 
 module.exports = {
-  important: '.story',
   presets: [defaultConfig, tailwindConfig],
   content: [
     ...folders.map((folder) => path.relative(__dirname, path.resolve(folder, '**/*.js'))),

packages/playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-playground",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "private": true,
   "type": "module",
   "scripts": {

packages/tests/atoms/Action.spec.ts

@@ -82,6 +82,14 @@ describe('The Action component', () => {
     await reset();
   });
 
+  it('should resolve targets to self if option is not set', async () => {
+    const { action, reset } = await getContext({
+      target: '',
+    });
+    expect(action.targets).toEqual([{ Action: action }]);
+    await reset();
+  })
+
   it('should resolve single target', async () => {
     const { action, foo, reset } = await getContext({
       target: 'Foo',
@@ -136,14 +144,14 @@ describe('The Action component', () => {
     await reset();
   });
 
-  it('should trigger the effect with ctx, target and event parameters', async () => {
+  it('should trigger the effect with ctx, target, event and action parameters', async () => {
     const { action, foo, fooFn, reset } = await getContext({
       target: 'Foo',
-      effect: 'target.fn(ctx, event, target)',
+      effect: 'target.fn(ctx, event, target, action)',
     });
     const event = new Event('click');
     action.$el.dispatchEvent(event);
-    expect(fooFn).toHaveBeenCalledWith(action.targets[0], event, foo);
+    expect(fooFn).toHaveBeenCalledWith(action.targets[0], event, foo, action);
     await reset();
   });
 

packages/tests/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-tests",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "private": true,
   "type": "module",
   "scripts": {

packages/ui/atoms/Action/Action.ts

@@ -48,13 +48,18 @@ export class Action<T extends BaseProps = BaseProps> extends Base<ActionProps &
   get effect() {
     const { effect } = this.$options;
     if (!effectCache.has(effect)) {
-      effectCache.set(effect, new Function('ctx', 'event', 'target', `return ${effect}`));
+      effectCache.set(effect, new Function('ctx', 'event', 'target', 'action', `return ${effect}`));
     }
     return effectCache.get(effect);
   }
 
-  get targets() {
+  get targets(): Array<Record<string, Base>> {
     const { target } = this.$options;
+
+    if (!target) {
+      return [{ [this.__config.name]: this }];
+    }
+
     const parts = target.split(' ').map((part) => {
       const [, name, , selector] = part.match(TARGET_REGEX) ?? [];
       return [name, selector];
@@ -93,10 +98,10 @@ export class Action<T extends BaseProps = BaseProps> extends Base<ActionProps &
 
     for (const target of targets) {
       try {
-        const [name, currentTarget] = Object.entries(target).flat();
-        const value = effect(target, event, currentTarget);
+        const [currentTarget] = Object.values(target).flat();
+        const value = effect(target, event, currentTarget, this);
         if (typeof value === 'function') {
-          value(target, event, currentTarget);
+          value(target, event, currentTarget, this);
         }
       } catch (err) {
         this.$warn(err);

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
-    "@studiometa/js-toolkit": "^3.0.0-alpha.6",
+    "@studiometa/js-toolkit": "^3.0.0-alpha.9",
     "deepmerge": "^4.3.1"
   }
 }