release: v0.2.0 (#34)

* feat: resizeable cols (#31)

* ✨ resizeable

* ♻️ use js resizeable

* 🏗️ common code

* ✨ close modal after command

* ✨ split command

* 📝 release note

* 🔥 remove useless styles

* ✨ npm readme (#33)

* ✨ npm readme

* 🔇 debug console

* ➕ lodash-es

* 📝 update screenshot and feature list

* 📝 update image link

Author: JiangWeixian

.changeset/purple-eggs-yawn.md

@@ -0,0 +1,5 @@
+---
+"vsit": minor
+---
+
+resizeable commands

README.md

@@ -10,7 +10,7 @@
 
 
 
-![vsit-screenshot](https://user-images.githubusercontent.com/6839576/283995715-d376f1d5-03be-494d-8b80-15cd6239e442.png)
+![vsit-screenshot](https://raw.githubusercontent.com/JiangWeixian/vsit/main/assets/vsit.png)
 
 
 ```
@@ -21,6 +21,9 @@ vsit
 ## features
 
 - 💞 Import packages from [`esm.sh`](https://esm.sh/) without installed
+- 🎹 Manage window, run code, format code with commands
+- 💪 Typescript support
+
 ## development
 
 - **Setup** - `pnpm i`

assets/vsit.png

@@ -1,11 +1,11 @@
 const { aiou } = require('@aiou/eslint-config')
 
-module.exports = aiou([
+module.exports = aiou({ ssr: false }, [
   {
     ignores: ['**/dist/**', '**/dist-client/**', '**/vendors/**'],
   },
   {
-    files: ['**/**'],
+    files: ['**/**.ts'],
     rules: {
       'import/no-extraneous-dependencies': 'off',
       'ssr-friendly/no-dom-globals-in-module-scope': 'off',

eslint.config.js

@@ -38,12 +38,12 @@
     "**/**/*.{js,ts,tsx,vue,json}": ["eslint --fix"]
   },
   "devDependencies": {
-    "@aiou/eslint-config": "^1.0.6",
+    "@aiou/eslint-config": "1.3.0",
     "@changesets/cli": "^2.24.4",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^20.1.3",
     "cz-emoji": "1.3.2-canary.2",
-    "eslint": "^8.23.0",
+    "eslint": "8.57.0",
     "esno": "^0.16.3",
     "fs-extra": "^11.1.1",
     "husky": "^8.0.1",

package.json

@@ -38,26 +38,30 @@
     "@codemirror/state": "6.2.1",
     "@codemirror/view": "6.13.0",
     "@lezer/highlight": "1.1.6",
+    "@solid-primitives/scheduled": "1.4.3",
     "@tailwindcss/typography": "0.5.7",
     "@uiw/codemirror-theme-atomone": "^4.21.2",
     "clsx": "1.2.1",
     "console-feed": "3.5.0",
+    "css.gg": "^2.1.1",
     "daisyui": "2.24.0",
     "focus-if-need": "^0.1.0",
     "lodash-es": "^4.17.21",
+    "markdown-it": "^14.1.0",
     "prettier": "^3.0.0",
-    "solid-js": "1.7.6",
+    "solid-js": "1.8.17",
     "workbox-routing": "7.0.0",
     "workbox-strategies": "7.0.0"
   },
   "devDependencies": {
     "@svgr-rs/svgrs-plugin": "^0.1.0",
     "@types/debug": "^4.1.8",
     "@types/lodash-es": "^4.17.8",
+    "@types/markdown-it": "^14.0.1",
     "@types/node": "^20.1.3",
     "autoprefixer": "10.4.8",
     "postcss": "8.4.16",
-    "tailwind-cssgg": "^0.0.1",
+    "tailwind-cssgg": "^0.2.0",
     "tailwindcss": "3.3.2",
     "typescript": "4.4.4",
     "vite": "^4.3.8",

packages/client/package.json

@@ -18,6 +18,7 @@ import {
   Show,
   useContext,
 } from 'solid-js'
+import { createStore } from 'solid-js/store'
 
 import { commandScore } from './command-score'
 
@@ -131,6 +132,7 @@ interface Context {
 interface State {
   search: string
   value: string
+  enter: string
   filtered: { count: number; items: Map<string, number>; groups: Set<string> }
 }
 interface Store {
@@ -150,7 +152,6 @@ const GROUP_ITEMS_SELECTOR = '[cmdk-group-items=""]'
 const GROUP_HEADING_SELECTOR = '[cmdk-group-heading=""]'
 const ITEM_SELECTOR = '[cmdk-item=""]'
 const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`
-const SELECT_EVENT = 'cmdk-item-select'
 const VALUE_ATTR = 'data-value'
 const defaultFilter: CommandProps['filter'] = (value, search) => commandScore(value, search)
 
@@ -163,6 +164,8 @@ const StoreContext = createContext<Store>({
       search: '',
       /** Currently selected item value. */
       value: '',
+      /** Currently item value when press key enter. */
+      enter: '',
       filtered: {
         /** The count of all visible items. */
         count: 0,
@@ -216,6 +219,7 @@ export const Command = (props: CommandProps) => {
     search: '',
     /** Currently selected item value. */
     value: props.value ?? props.defaultValue?.toLowerCase() ?? '',
+    enter: '',
     filtered: {
       /** The count of all visible items. */
       count: 0,
@@ -240,7 +244,7 @@ export const Command = (props: CommandProps) => {
   const schedule = useScheduleLayoutEffect()
 
   // TODO
-  const [store] = createSignal<Store>({
+  const [store] = createStore<Store>({
     subscribe: (cb) => {
       listeners.current?.add(cb)
       return () => listeners.current?.delete(cb)
@@ -273,7 +277,7 @@ export const Command = (props: CommandProps) => {
       }
 
       // Notify subscribers that state has changed
-      store().emit()
+      store.emit()
     },
     emit: () => {
       listeners.current.forEach(l => l())
@@ -286,19 +290,19 @@ export const Command = (props: CommandProps) => {
       const v = value.trim().toLowerCase()
       state.current.value = v
       schedule(6, scrollSelectedIntoView)
-      store().emit()
+      store.emit()
     }
   }, [value])
 
-  const [context] = createSignal<Context>({
+  const [context] = createStore<Context>({
     // Keep id → value mapping up-to-date
     value: (id, value) => {
       if (value !== ids.current.get(id)) {
         ids.current.set(id, value)
         state.current.filtered.items.set(id, score(value))
         schedule(2, () => {
           sort()
-          store().emit()
+          store.emit()
         })
       }
     },
@@ -326,7 +330,7 @@ export const Command = (props: CommandProps) => {
           selectFirstItem()
         }
 
-        store().emit()
+        store.emit()
       })
 
       return () => {
@@ -345,7 +349,7 @@ export const Command = (props: CommandProps) => {
             selectFirstItem()
           }
 
-          store().emit()
+          store.emit()
         })
       }
     },
@@ -436,7 +440,7 @@ export const Command = (props: CommandProps) => {
   function selectFirstItem() {
     const item = getValidItems().find(item => !item.ariaDisabled)!
     const value = item.getAttribute(VALUE_ATTR)!
-    store().setState('value', value || undefined)
+    store.setState('value', value || undefined)
   }
 
   /** Filters the current items. */
@@ -508,7 +512,7 @@ export const Command = (props: CommandProps) => {
     const items = getValidItems()
     const item = items[index]
     if (item) {
-      store().setState('value', item.getAttribute(VALUE_ATTR))
+      store.setState('value', item.getAttribute(VALUE_ATTR))
     }
   }
 
@@ -530,7 +534,7 @@ export const Command = (props: CommandProps) => {
     }
 
     if (newSelected) {
-      store().setState('value', newSelected.getAttribute(VALUE_ATTR))
+      store.setState('value', newSelected.getAttribute(VALUE_ATTR))
     }
   }
 
@@ -545,7 +549,7 @@ export const Command = (props: CommandProps) => {
     }
 
     if (item) {
-      store().setState('value', item.getAttribute(VALUE_ATTR)!)
+      store.setState('value', item.getAttribute(VALUE_ATTR)!)
     } else {
       updateSelectedByChange(change)
     }
@@ -634,8 +638,8 @@ export const Command = (props: CommandProps) => {
               e.preventDefault()
               const item = getSelectedItem()
               if (item) {
-                const event = new Event(SELECT_EVENT)
-                item.dispatchEvent(event)
+                const value = item.getAttribute(VALUE_ATTR)!
+                store.setState('enter', value)
               }
             }
           }
@@ -644,15 +648,15 @@ export const Command = (props: CommandProps) => {
     >
       <label
         cmdk-label=""
-        for={context().inputId}
-        id={context().labelId}
+        for={context.inputId}
+        id={context.labelId}
         // Screen reader only
         style={srOnlyStyles}
       >
         {label}
       </label>
-      <StoreContext.Provider value={store()}>
-        <CommandContext.Provider value={context()}>{props.children}</CommandContext.Provider>
+      <StoreContext.Provider value={store}>
+        <CommandContext.Provider value={context}>{props.children}</CommandContext.Provider>
       </StoreContext.Provider>
     </div>
   )
@@ -678,27 +682,34 @@ export const CommandItem = (props: ItemProps) => {
   const value = useValue(id, ref, [props.value, props.children, ref])
 
   const store = useStore()!
-  const selected = useCmdk(state => state?.value && state?.value === value.current)
-  const render = useCmdk(state =>
-    forceMount ? true : context.filter?.() === false ? true : !state.search ? true : (state.filtered?.items?.get?.(id) as number) > 0,
-  )
+  const selected = useCmdk((state) => {
+    return state?.value && state?.value === value()
+  })
+  const entered = useCmdk(state => state?.enter)
+  const render = useCmdk((state) => {
+    return forceMount
+      ? true
+      : context.filter?.() === false
+        ? true
+        : !state.search
+            ? true
+            : (state.filtered?.items?.get?.(id) as number) > 0
+  })
 
   createEffect(() => {
-    const element = ref.current
-    if (!element || props.disabled) {
-      return
+    if (entered() === value()) {
+      onSelect()
+      store.setState('enter', '')
     }
-    element.addEventListener(SELECT_EVENT, onSelect)
-    onCleanup(() => element.removeEventListener(SELECT_EVENT, onSelect))
   })
 
   function onSelect() {
     select()
-    propsRef.current?.onSelect?.(value.current!)
+    propsRef.current?.onSelect?.(value()!)
   }
 
   function select() {
-    store.setState('value', value.current!, true)
+    store.setState('value', value()!, true)
   }
 
   const { disabled, value: _, onSelect: __, forwardedRef, ...etc } = props
@@ -717,6 +728,7 @@ export const CommandItem = (props: ItemProps) => {
         data-selected={selected() || undefined}
         onPointerMove={disabled ? undefined : select}
         onClick={disabled ? undefined : onSelect}
+        data-value={value()}
       >
         {props.children}
       </div>
@@ -1016,7 +1028,7 @@ function useValue(
   ref: ReactRef<HTMLElement>,
   deps: (JSX.Element | ReactRef<HTMLElement> | string)[],
 ) {
-  const valueRef: ReactRef<string> = {}
+  const [v, setValue] = createSignal<string>()
   const context = useCommand()
 
   onMount(() => {
@@ -1033,9 +1045,10 @@ function useValue(
     })()
 
     context.value?.(id, value!)
+    // TODO: looks like we do not need update ref data-value
     ref.current?.setAttribute(VALUE_ATTR, value!)
-    valueRef.current = value
+    setValue(value)
   })
 
-  return valueRef
+  return v
 }