feat(nanoviews): rename effect attributes from $$name to name$

examples/weather/nanoviews-nano_kit-di/src/components/Autocomplete.ts

@@ -6,7 +6,7 @@ import {
   signal
 } from 'nanoviews/store'
 import {
-  $$value,
+  value$,
   button,
   div,
   input,
@@ -62,7 +62,7 @@ export function Autocomplete(props: AutocompleteProps) {
         'name': props.name,
         'role': 'combobox',
         'type': 'text',
-        [$$value]: props.$value,
+        [value$]: props.$value,
         'onBlur': () => $isOpen(false),
         'onFocus': () => $isOpen(true),
         'onInput': () => {

examples/weather/nanoviews-nano_kit-di/src/components/Forecast.ts

@@ -11,7 +11,7 @@ import {
   select,
   option,
   ul,
-  $$selected,
+  selected$,
   trackBy,
   inject,
   for_,
@@ -45,7 +45,7 @@ export function Forecast() {
         ),
         select({
           class: 'forecast-mode',
-          [$$selected]: $mode
+          [selected$]: $mode
         })(
           option({
             value: 'hourly'

examples/weather/nanoviews-nano_kit/src/components/Autocomplete.ts

@@ -6,7 +6,7 @@ import {
   signal
 } from 'nanoviews/store'
 import {
-  $$value,
+  value$,
   button,
   div,
   input,
@@ -62,7 +62,7 @@ export function Autocomplete(props: AutocompleteProps) {
         'name': props.name,
         'role': 'combobox',
         'type': 'text',
-        [$$value]: props.$value,
+        [value$]: props.$value,
         'onBlur': () => $isOpen(false),
         'onFocus': () => $isOpen(true),
         'onInput': () => {

examples/weather/nanoviews-nano_kit/src/components/Forecast.ts

@@ -11,7 +11,7 @@ import {
   select,
   option,
   ul,
-  $$selected,
+  selected$,
   trackBy,
   for_,
   if_
@@ -43,7 +43,7 @@ export function Forecast() {
         ),
         select({
           class: 'forecast-mode',
-          [$$selected]: $mode
+          [selected$]: $mode
         })(
           option({
             value: 'hourly'

packages/nanoviews/.size-limit.json

@@ -8,7 +8,7 @@
   {
     "name": "Average usage",
     "path": "dist/index.js",
-    "import": "{ fragment, div, form, input, button, label, $$classList, if_, for_, $$value, $$children, effect }",
+    "import": "{ fragment, div, form, input, button, label, classList$, if_, for_, value$, $$children, effect }",
     "limit": "4.26 kB"
   }
 ]

packages/nanoviews/README.md

@@ -169,35 +169,35 @@ mount(App, document.querySelector('#app'))
 
 Effect attributes are special attributes that can control element's behavior.
 
-### $$ref
+### ref$
 
-`$$ref` is an effect attribute that can provide a reference to the DOM node.
+`ref$` is an effect attribute that can provide a reference to the DOM node.
 
 ```js
 import { signal } from 'nanoviews/store'
-import { div, $$ref } from 'nanoviews'
+import { div, ref$ } from 'nanoviews'
 
 const $ref = signal(null)
 
 div({
-  [$$ref]: $ref
+  [ref$]: $ref
 })(
   'Target element'
 )
 ```
 
-### $$style
+### style$
 
-`$$style` is an effect attribute that manages the style of the element.
+`style$` is an effect attribute that manages the style of the element.
 
 ```js
 import { signal } from 'nanoviews/store'
-import { button, $$style } from 'nanoviews'
+import { button, style$ } from 'nanoviews'
 
 const $color = signal('white')
 
 button({
-  [$$style]: {
+  [style$]: {
     color: $color,
     backgroundColor: 'black'
   }
@@ -206,50 +206,50 @@ button({
 )
 ```
 
-### $$autoFocus
+### autoFocus$
 
-`$$autoFocus` is an effect attribute that sets the auto focus on the element.
+`autoFocus$` is an effect attribute that sets the auto focus on the element.
 
 ```js
-import { input, $$autoFocus } from 'nanoviews'
+import { input, autoFocus$ } from 'nanoviews'
 
 input({
   type: 'text',
-  [$$autoFocus]: true
+  [autoFocus$]: true
 })
 ```
 
-### $$value
+### value$
 
-`$$value` is an effect attribute that manages the value of text inputs.
+`value$` is an effect attribute that manages the value of text inputs.
 
 ```js
 import { signal } from 'nanoviews/store'
-import { textarea, $$value } from 'nanoviews'
+import { textarea, value$ } from 'nanoviews'
 
 const $review = signal('')
 
 textarea({
   name: 'review',
-  [$$value]: $review
+  [value$]: $review
 })(
   'Write your review here'
 )
 ```
 
-### $$checked
+### checked$
 
-`$$checked` is an effect attribute that manages the checked state of checkboxes and radio buttons.
+`checked$` is an effect attribute that manages the checked state of checkboxes and radio buttons.
 
 ```js
 import { signal } from 'nanoviews/store'
-import { input, $$checked, Indeterminate } from 'nanoviews'
+import { input, checked$, Indeterminate } from 'nanoviews'
 
 const $checked = signal(false)
 
 input({
   type: 'checkbox',
-  [$$checked]: $checked
+  [checked$]: $checked
 })
 ```
 
@@ -259,19 +259,19 @@ Also you can manage [indeterminate state of checkboxes](https://developer.mozill
 $checked(Indeterminate)
 ```
 
-### $$selected
+### selected$
 
-`$$selected` is an effect attribute that manages the selected state of select's options.
+`selected$` is an effect attribute that manages the selected state of select's options.
 
 ```js
 import { signal } from 'nanoviews/store'
-import { select, option, $$selected } from 'nanoviews'
+import { select, option, selected$ } from 'nanoviews'
 
 const $selected = signal('mid')
 
 select({
   name: 'player-pos',
-  [$$selected]: $selected
+  [selected$]: $selected
 })(
   option({
     value: 'carry'
@@ -298,7 +298,7 @@ const $selected = signal(['mid', 'carry'])
 
 select({
   name: 'player-pos',
-  [$$selected]: $selected
+  [selected$]: $selected
 })(
   option({
     value: 'carry'
@@ -318,19 +318,19 @@ select({
 )
 ```
 
-### $$files
+### files$
 
-`$$files` is an effect attribute that can provide the files of file inputs.
+`files$` is an effect attribute that can provide the files of file inputs.
 
 ```js
 import { signal } from 'nanoviews/store'
-import { input, $$files } from 'nanoviews'
+import { input, files$ } from 'nanoviews'
 
 const $files = signal([])
 
 input({
   type: 'file',
-  [$$files]: $files
+  [files$]: $files
 })
 ```
 

packages/nanoviews/src/elements/autoFocus.spec.ts

@@ -17,7 +17,7 @@ const {
 
 describe('nanoviews', () => {
   describe('elements', () => {
-    describe('$$autoFocus', () => {
+    describe('autoFocus$', () => {
       it('should focus element by static value', () => {
         render(StaticValue())
 

packages/nanoviews/src/elements/autoFocus.stories.ts

@@ -5,7 +5,7 @@ import {
 } from '@nanoviews/storybook'
 import { signal } from 'kida'
 import { textarea } from './elements.js'
-import { $$autoFocus } from './autoFocus.js'
+import { autoFocus$ } from './autoFocus.js'
 
 const meta: Meta = {
   title: 'Elements/Effect Attributes/Auto Focus'
@@ -17,12 +17,12 @@ type Story = StoryObj<typeof meta>
 
 export const StaticValue: Story = {
   render: nanoStory(() => textarea({
-    [$$autoFocus]: true
+    [autoFocus$]: true
   })('Hello, world!'))
 }
 
 export const ReactiveValue: Story = {
   render: nanoStory(() => textarea({
-    [$$autoFocus]: signal(true)
+    [autoFocus$]: signal(true)
   })('Hello, world!'))
 }

packages/nanoviews/src/elements/autoFocus.ts

@@ -8,8 +8,8 @@ import { createEffectAttribute } from '../internals/index.js'
 /**
  * Effect attribute to set auto focus on element
  */
-export const $$autoFocus = /* @__PURE__ */ createEffectAttribute<'$$autoFocus', HTMLElement | SVGElement, ValueOrAccessor<boolean>>(
-  '$$autoFocus',
+export const autoFocus$ = /* @__PURE__ */ createEffectAttribute<'autoFocus$', HTMLElement | SVGElement, ValueOrAccessor<boolean>>(
+  'autoFocus$',
   (element, $value) => {
     if (isAccessor($value) && $value() || $value) {
       effect(() => {
@@ -21,10 +21,10 @@ export const $$autoFocus = /* @__PURE__ */ createEffectAttribute<'$$autoFocus',
 
 declare module 'nanoviews' {
   interface EffectAttributeValues {
-    $$autoFocus: ValueOrAccessor<boolean>
+    autoFocus$: ValueOrAccessor<boolean>
   }
 
   interface EffectAttributeTargets {
-    $$autoFocus: HTMLElement | SVGElement
+    autoFocus$: HTMLElement | SVGElement
   }
 }

packages/nanoviews/src/elements/classList.spec.ts

@@ -15,7 +15,7 @@ const {
 
 describe('nanoviews', () => {
   describe('elements', () => {
-    describe('$$classList', () => {
+    describe('classList$', () => {
       it('should render static class list', () => {
         const { container } = render(StaticValue())
 

packages/nanoviews/src/elements/classList.stories.ts

@@ -8,7 +8,7 @@ import {
   button,
   div
 } from './elements.js'
-import { $$classList } from './classList.js'
+import { classList$ } from './classList.js'
 
 const meta: Meta = {
   title: 'Elements/Effect Attributes/Class List'
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>
 
 export const StaticValue: Story = {
   render: nanoStory(() => div({
-    [$$classList]: [
+    [classList$]: [
       'class1',
       false,
       'class3'
@@ -45,7 +45,7 @@ export const ReactiveValue: StoryObj<{
     rounded: false
   },
   render: nanoStory(({ primary, rounded }) => button({
-    [$$classList]: [
+    [classList$]: [
       'button',
       when(primary, 'primary', 'regular'),
       when(rounded, 'rounded')

packages/nanoviews/src/elements/classList.ts

@@ -29,8 +29,8 @@ function cx(parts: unknown[]) {
 /**
  * Effect attribute to set class list on element
  */
-export const $$classList = /* @__PURE__ */ createEffectAttribute<'$$classList', HTMLElement, ClassList>(
-  '$$classList',
+export const classList$ = /* @__PURE__ */ createEffectAttribute<'classList$', HTMLElement, ClassList>(
+  'classList$',
   (element, parts) => {
     subscribe(
       () => cx(parts.map($get)),
@@ -42,10 +42,10 @@ export const $$classList = /* @__PURE__ */ createEffectAttribute<'$$classList',
 
 declare module 'nanoviews' {
   interface EffectAttributeValues {
-    $$classList: ClassList
+    classList$: ClassList
   }
 
   interface EffectAttributeTargets {
-    $$classList: HTMLElement
+    classList$: HTMLElement
   }
 }

packages/nanoviews/src/elements/controls.spec.ts

@@ -26,7 +26,7 @@ const {
 describe('nanoviews', () => {
   describe('elements', () => {
     describe('controls', () => {
-      describe('$$value', () => {
+      describe('value$', () => {
         it('should handle value of text input', () => {
           const value = signal('Hello, world!')
 
@@ -76,7 +76,7 @@ describe('nanoviews', () => {
         })
       })
 
-      describe('$$selected', () => {
+      describe('selected$', () => {
         it('should handle value of select', () => {
           const value = signal('green')
 
@@ -126,7 +126,7 @@ describe('nanoviews', () => {
         })
       })
 
-      describe('$$checked', () => {
+      describe('checked$', () => {
         it('should handle checked state of checkbox', () => {
           const checked = signal<boolean | typeof Indeterminate>(true)
 
@@ -152,7 +152,7 @@ describe('nanoviews', () => {
         })
       })
 
-      describe('$$files', () => {
+      describe('files$', () => {
         it('should save files to signal', async () => {
           const files = signal<File[]>([])
           const user = userEvent.setup()