chore: add toStore and classGet$ utils

Author: dangreen

.clean-publish

@@ -1,5 +1,5 @@
 {
   "withoutPublish": true,
   "tempDir": "package",
-  "fields": ["scripts"]
+  "fields": ["scripts", "publishConfig"]
 }

README.md

@@ -254,14 +254,16 @@ button({
 `classList$` is an effect attribute that manages class names of the element.
 
 ```js
-import { button, classList$, classIf } from 'nanoviews'
+import { button, classList$, classIf$, classGet$ } from 'nanoviews'
+import * as styles from './styles.css'
 
 function MyButton({
   class: className,
-  primary
+  theme = 'primary',
+  rounded = false
 }) {
   return button({
-    [classList$]: [className, 'myButton', classIf('primary', primary)]
+    [classList$]: [className, 'myButton', classIf$(styles.rounded, rounded), classGet$(styles, theme)]
   })
 }
 ```

package.json

@@ -36,7 +36,7 @@
     "@trigen/eslint-config": "8.0.0-alpha.32",
     "@trigen/scripts": "8.0.0-alpha.30",
     "@types/node": "^20.0.0",
-    "clean-publish": "^4.0.1",
+    "clean-publish": "^4.4.0",
     "commitizen": "^4.2.4",
     "del-cli": "^5.0.0",
     "eslint": "^8.28.0",

packages/nanoviews/.size-limit.json

@@ -3,7 +3,7 @@
     "name": "All publics",
     "path": "dist/index.production.js",
     "import": "*",
-    "limit": "4.77 kB"
+    "limit": "4.81 kB"
   },
   {
     "name": "All internals",
@@ -14,7 +14,7 @@
   {
     "name": "Average usage",
     "path": "dist/index.production.js",
-    "import": "{ div, input, button, label, fragment, decide$, for$, classList$, classIf, value$, children$, effect$ }",
-    "limit": "2.78 kB"
+    "import": "{ div, input, button, label, fragment, decide$, for$, classList$, classIf$, classGet$, value$, children$, effect$ }",
+    "limit": "2.81 kB"
   }
 ]

packages/nanoviews/README.md

@@ -254,14 +254,16 @@ button({
 `classList$` is an effect attribute that manages class names of the element.
 
 ```js
-import { button, classList$, classIf } from 'nanoviews'
+import { button, classList$, classIf$, classGet$ } from 'nanoviews'
+import * as styles from './styles.css'
 
 function MyButton({
   class: className,
-  primary
+  theme = 'primary',
+  rounded = false
 }) {
   return button({
-    [classList$]: [className, 'myButton', classIf('primary', primary)]
+    [classList$]: [className, 'myButton', classIf$(styles.rounded, rounded), classGet$(styles, theme)]
   })
 }
 ```

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

@@ -16,7 +16,8 @@ const {
   ReactiveStrings,
   NestedStrings,
   EmptyValues,
-  ClassIf
+  ClassIf,
+  ClassGet
 } = composeStories(Stories)
 
 describe('nanoviews', () => {
@@ -112,7 +113,7 @@ describe('nanoviews', () => {
         expect(container.innerHTML).toBe('<div><div class="class-c">Hello, world!</div></div>')
       })
 
-      it('should hanlde classIf utility', () => {
+      it('should hanlde classIf$ utility', () => {
         const className = atom('class-a')
         const enabled = atom(true)
         const { container } = render(ClassIf({
@@ -126,6 +127,19 @@ describe('nanoviews', () => {
 
         expect(container.innerHTML).toBe('<div><div class="">Hello, world!</div></div>')
       })
+
+      it('should handle classGet$ utility', () => {
+        const theme = atom('primary')
+        const { container } = render(ClassGet({
+          theme
+        }))
+
+        expect(container.innerHTML).toBe('<div><div class="theme-primary">Hello, world!</div></div>')
+
+        theme.set('secondary')
+
+        expect(container.innerHTML).toBe('<div><div class="theme-secondary">Hello, world!</div></div>')
+      })
     })
   })
 })

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

@@ -3,13 +3,15 @@ import { nanoStory } from '@nanoviews/storybook'
 import { div } from './elements.js'
 import {
   classList$,
-  classIf
+  classIf$,
+  classGet$
 } from './classList.js'
 
 const meta: Meta<{
   className?: string
   classList?: string[]
   enabled?: boolean
+  theme?: string
 }> = {
   title: 'Elements/Effect Attributes/Class List'
 }
@@ -89,6 +91,24 @@ export const ClassIf: Story = {
     enabled: true
   },
   render: nanoStory(({ className, enabled }) => div({
-    [classList$]: classIf(className, enabled)
+    [classList$]: classIf$(className, enabled)
+  })('Hello, world!'))
+}
+
+export const ClassGet: Story = {
+  argTypes: {
+    theme: {
+      control: 'radio',
+      options: ['primary', 'secondary']
+    }
+  },
+  args: {
+    theme: 'primary'
+  },
+  render: nanoStory(({ theme }) => div({
+    [classList$]: classGet$({
+      primary: 'theme-primary',
+      secondary: 'theme-secondary'
+    }, theme)
   })('Hello, world!'))
 }

packages/nanoviews/src/elements/classList.ts

@@ -17,11 +17,11 @@ import {
 
 export type ClassListPrimitive = string | boolean | EmptyValue
 
-export type ClassIf = (set: (classList: ClassList) => StrictEffect<void>) => StrictEffect<void>
+export type ClassListEffect = (set: (classList: ClassList) => StrictEffect<void>) => StrictEffect<void>
 
-export type ClassList = ValueOrStore<ClassListPrimitive | ClassIf | readonly ClassList[]>
+export type ClassList = ValueOrStore<ClassListPrimitive | ClassListEffect | readonly ClassList[]>
 
-export type ClassListStore = Store<ClassListPrimitive | ClassIf | readonly ClassList[]>
+export type ClassListStore = Store<ClassListPrimitive | ClassListEffect | readonly ClassList[]>
 
 function isClassName(cls: string) {
   return isString(cls) && cls.includes(' ')
@@ -100,7 +100,7 @@ function createClassListEffect(
   }
 }
 
-export function classIf(
+export function classIf$(
   classList: ClassList,
   $condition: ValueOrStore<boolean | EmptyValue>
 ): ClassList {
@@ -111,6 +111,17 @@ export function classIf(
   return $condition && classList
 }
 
+export function classGet$(
+  classMap: Record<string, string>,
+  $key: ValueOrStore<string | EmptyValue>
+): ClassList {
+  if (isStore($key)) {
+    return set => createDynamicEffect($key, key => set(classMap[key!]))
+  }
+
+  return classMap[$key!]
+}
+
 /**
  * Effect attribute to control class list of element
  */

packages/nanoviews/src/utils.spec.ts

@@ -0,0 +1,27 @@
+import {
+  describe,
+  it,
+  expect
+} from 'vitest'
+import { atom } from 'nanostores'
+import { toStore } from './utils.js'
+
+describe('nanoviews', () => {
+  describe('utils', () => {
+    describe('toStore', () => {
+      it('should create store from value', () => {
+        const value = 'value'
+        const store = toStore(value, atom)
+
+        expect(store.get()).toBe(value)
+      })
+
+      it('should return store', () => {
+        const store = atom('value')
+        const result = toStore(store, atom)
+
+        expect(result).toBe(store)
+      })
+    })
+  })
+})

packages/nanoviews/src/utils.ts

@@ -1,3 +1,6 @@
+import type { Store } from './internals/index.js'
+import { isStore } from './internals/index.js'
+
 export * from './internals/utils.js'
 
 /**
@@ -7,3 +10,17 @@ export * from './internals/utils.js'
 export function throw$(error: Error) {
   throw error
 }
+
+/**
+ * Create store from value or return store
+ * @param valueOrStore - Value or store
+ * @param creator - Store creator
+ * @returns Store
+ */
+export function toStore<T, S extends Store<T>>(valueOrStore: T | Store<T>, creator: (value: T) => S): S {
+  if (isStore(valueOrStore)) {
+    return valueOrStore as S
+  }
+
+  return creator(valueOrStore)
+}