@furystack/shades 6.1.5 → 7.1.0

package/src/components/route-link.tsx

@@ -1,22 +1,23 @@
 import { Shade } from '../shade'
 import type { PartialElement } from '../models'
 import { LocationService } from '../services'
-import { createComponent } from '..'
+import { attachProps, createComponent } from '..'
 
 export type RouteLinkProps = PartialElement<HTMLAnchorElement>
 
 export const RouteLink = Shade<RouteLinkProps>({
   shadowDomName: 'route-link',
-  render: ({ children, props, injector }) => {
+  render: ({ children, props, injector, element }) => {
+    attachProps(element, {
+      ...props,
+      onclick: (ev: MouseEvent) => {
+        ev.preventDefault()
+        history.pushState('', props.title || '', props.href)
+        injector.getInstance(LocationService).updateState()
+      },
+    })
     return (
-      <a
-        {...props}
-        onclick={(ev: MouseEvent) => {
-          ev.preventDefault()
-          history.pushState('', props.title || '', props.href)
-          injector.getInstance(LocationService).updateState()
-        }}
-      >
+      <a href={props.href} style={{ color: 'inherit', textDecoration: 'inherit' }} onclick={(e) => e.preventDefault()}>
         {children}
       </a>
     )

package/src/components/router.spec.tsx

@@ -25,7 +25,7 @@ describe('Router', () => {
 
     const onRouteChange = jest.fn()
 
-    injector.getInstance(LocationService).onLocationChanged.subscribe(onRouteChange)
+    injector.getInstance(LocationService).onLocationPathChanged.subscribe(onRouteChange)
 
     initializeShadeRoot({
       injector,
@@ -61,7 +61,7 @@ describe('Router', () => {
               },
               { url: '/', component: () => <div id="content">home</div> },
             ]}
-            notFound={() => <div id="content">not found</div>}
+            notFound={<div id="content">not found</div>}
           />
         </div>
       ),

package/src/components/router.tsx

@@ -11,67 +11,67 @@ export interface Route<TMatchResult extends object> {
   url: string
   component: (options: { currentUrl: string; match: MatchResult<TMatchResult> }) => JSX.Element
   routingOptions?: TokensToRegexpOptions
-  onVisit?: (options: RenderOptions<RouterProps, RouterState>) => Promise<void>
-  onLeave?: (options: RenderOptions<RouterProps, RouterState>) => Promise<void>
+  onVisit?: (options: RenderOptions<unknown>) => Promise<void>
+  onLeave?: (options: RenderOptions<unknown>) => Promise<void>
 }
 
 export interface RouterProps {
   style?: CSSStyleDeclaration
   routes: Array<Route<any>>
-  notFound?: (currentUrl: string) => JSX.Element
+  notFound?: JSX.Element
 }
 
 export interface RouterState {
-  activeRoute?: Route<any>
+  activeRoute?: Route<any> | null
   activeRouteParams?: any
-  jsx?: JSX.Element
-  lock: Semaphore
+  jsx: JSX.Element
 }
-export const Router = Shade<RouterProps, RouterState>({
+export const Router = Shade<RouterProps>({
   shadowDomName: 'shade-router',
-  getInitialState: () => ({
-    lock: new Semaphore(1),
-  }),
-  resources: ({ children, props, injector, updateState, getState, element }) => [
-    injector.getInstance(LocationService).onLocationChanged.subscribe(async (currentUrl) => {
-      const { activeRoute: lastRoute, activeRouteParams: lastParams, lock } = getState()
+  render: (options) => {
+    const { useState, useObservable, injector } = options
+    const [lock] = useState('lock', new Semaphore(1))
+    const [state, setState] = useState<RouterState>('routerState', {
+      jsx: <div />,
+    })
+
+    const updateUrl = async (currentUrl: string) => {
+      const [lastState] = useState<RouterState>('routerState', state)
+      const { activeRoute: lastRoute, activeRouteParams: lastRouteParams, jsx: lastJsx } = lastState
       try {
         await lock.acquire()
-        for (const route of props.routes) {
+        for (const route of options.props.routes) {
           const matchFn = match(route.url, route.routingOptions)
           const matchResult = matchFn(currentUrl)
           if (matchResult) {
-            if (route !== lastRoute || JSON.stringify(lastParams) !== JSON.stringify(matchResult.params)) {
-              await lastRoute?.onLeave?.({ children, props, injector, updateState, getState, element })
-              updateState({
-                jsx: route.component({ currentUrl, match: matchResult }),
-                activeRoute: route,
-                activeRouteParams: matchResult.params,
-              })
-              await route.onVisit?.({ children, props, injector, updateState, getState, element })
+            if (route !== lastRoute || JSON.stringify(lastRouteParams) !== JSON.stringify(matchResult.params)) {
+              await lastRoute?.onLeave?.({ ...options, element: lastState.jsx })
+              const newJsx = route.component({ currentUrl, match: matchResult })
+              setState({ jsx: newJsx, activeRoute: route, activeRouteParams: matchResult.params })
+              await route.onVisit?.({ ...options, element: newJsx })
             }
             return
           }
         }
         if (lastRoute?.onLeave) {
-          await lastRoute.onLeave({ children, props, injector, updateState, getState, element })
+          await lastRoute.onLeave({ ...options, element: lastJsx })
         }
-        updateState({ jsx: props.notFound?.(currentUrl), activeRoute: undefined })
+        setState({
+          jsx: options.props.notFound || <div />,
+          activeRoute: null,
+          activeRouteParams: null,
+        })
       } catch (e) {
         // path updates can be async, this can be ignored
         if (!(e instanceof ObservableAlreadyDisposedError)) {
           throw e
         }
       } finally {
-        lock.release()
+        lock?.release()
       }
-    }, true),
-  ],
-  render: ({ getState }) => {
-    const { jsx } = getState()
-    if (jsx) {
-      return jsx
     }
-    return <div></div>
+
+    useObservable('locationPathChanged', injector.getInstance(LocationService).onLocationPathChanged, updateUrl, true)
+    return state.jsx
   },
 })

package/src/jsx.ts

@@ -1,16 +1,17 @@
 import type { Injector } from '@furystack/inject'
 import type { ChildrenList, PartialElement } from './models'
+import type { ResourceManager } from './services/resource-manager'
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   export namespace JSX {
-    interface Element<TProps = any, TState = any> extends HTMLElement {
+    interface Element<TProps = any> extends HTMLElement {
       injector: Injector
-      state: TState
       props: TProps
       updateComponent: () => void
       shadeChildren?: ChildrenList
       callConstructed: () => void
+      resourceManager: ResourceManager
     }
 
     interface IntrinsicElements {

package/src/models/render-options.ts

@@ -1,16 +1,66 @@
 import type { Injector } from '@furystack/inject'
-import type { PartialElement } from './partial-element'
 import type { ChildrenList } from './children-list'
+import type { Disposable, ObservableValue } from '@furystack/utils'
 
-export type RenderOptions<TProps, TState> = {
+export type RenderOptions<TProps> = {
   readonly props: TProps
 
   injector: Injector
   children?: ChildrenList
-  element: JSX.Element<TProps, TState>
-} & (unknown extends TState
-  ? {}
-  : {
-      getState: () => TState
-      updateState: (newState: PartialElement<TState>, skipRender?: boolean) => void
-    })
+  element: JSX.Element<TProps>
+  /**
+   * Creates and disposes a resource after the component has been detached from the DOM
+   *
+   * @param key The key for caching the disposable resource
+   * @param factory A factory method for creating the disposable resource
+   * @returns The Disposable instance
+   */
+  useDisposable: <T extends Disposable>(key: string, factory: () => T) => T
+
+  /**
+   *
+   * @param key The key for caching the observable value
+   * @param observable The observable value to observe
+   * @param callback Optional callback for reacting to changes. If no callback provided, the component will re-render on change
+   * @param getLast An option to trigger the callback with the initial value
+   * @returns tuple with the current value and a setter function
+   */
+  useObservable: <T>(
+    key: string,
+    observable: ObservableValue<T>,
+    onChange?: (newValue: T) => void,
+    getLast?: boolean,
+  ) => [value: T, setValue: (newValue: T) => void]
+
+  /**
+   * Creates a state object that will trigger a component re-render on change
+   *
+   * @param key The Key for caching the observable value
+   * @param initialValue The initial value for the observable
+   * @returns tuple with the current value and a setter function
+   */
+  useState: <T>(key: string, initialValue: T) => [value: T, setValue: (newValue: T) => void]
+
+  /**
+   * Creates a state object that will use a value from the search string of the current location. Triggers a component re-render on change
+   *
+   * @param key The Key for caching the observable value
+   * @param initialValue The initial value - if the value is not found in the search string
+   * @returns a tuple with the current value and a setter function
+   */
+  useSearchState: <T>(key: string, initialValue: T) => [value: T, setValue: (newValue: T) => void]
+
+  /**
+   * Creates a state object that will use a value from the storage area. Triggers a component re-render on change
+   *
+   * @param key The key in the storage area
+   * @param initialValue The initial value that will be used if the key is not found in the storage area
+   * @param storageArea The storage area to use
+   * @returns a tuple with the current value and a setter function
+   */
+  useStoredState: <T>(
+    key: string,
+    initialValue: T,
+    storageArea?: Storage,
+  ) => [value: T, setValue: (newValue: T) => void]
+}

package/src/services/location-service.spec.ts

@@ -4,25 +4,25 @@ global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder as any
 
 import { Injector } from '@furystack/inject'
-import { usingAsync } from '@furystack/utils'
+import { using } from '@furystack/utils'
 import { LocationService } from './'
 
 describe('LocationService', () => {
   beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
   afterEach(() => (document.body.innerHTML = ''))
 
-  it('Shuld be constructed', async () => {
-    await usingAsync(new Injector(), async (i) => {
+  it('Shuld be constructed', () => {
+    using(new Injector(), (i) => {
       const s = i.getInstance(LocationService)
       expect(s).toBeInstanceOf(LocationService)
     })
   })
 
-  it('Shuld update state on events', async () => {
-    await usingAsync(new Injector(), async (i) => {
+  it('Shuld update state on events', () => {
+    using(new Injector(), (i) => {
       const onLocaionChanged = jest.fn()
       const s = i.getInstance(LocationService)
-      s.onLocationChanged.subscribe(onLocaionChanged)
+      s.onLocationPathChanged.subscribe(onLocaionChanged)
       expect(onLocaionChanged).toBeCalledTimes(0)
       history.pushState(null, '', '/loc1')
       expect(onLocaionChanged).toBeCalledTimes(1)
@@ -36,4 +36,73 @@ describe('LocationService', () => {
       // expect(onLocaionChanged).toBeCalledTimes(4)
     })
   })
+
+  describe('useSearchParam', () => {
+    it('Should create observables lazily', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        const observables = service.searchParamObservables
+
+        const testSearchParam = service.useSearchParam('test', null)
+        expect(observables.size).toBe(1)
+
+        const testSearchParam2 = service.useSearchParam('test', null)
+        expect(observables.size).toBe(1)
+
+        expect(testSearchParam).toBe(testSearchParam2)
+
+        const testSearchParam3 = service.useSearchParam('test2', undefined)
+        expect(observables.size).toBe(2)
+
+        expect(testSearchParam3).not.toBe(testSearchParam2)
+      })
+    })
+
+    it('Should return the default value, if not present in the query string', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        const testSearchParam = service.useSearchParam('test', { value: 'foo' })
+        expect(testSearchParam.getValue()).toEqual({ value: 'foo' })
+      })
+    })
+
+    it('Should return a default value, if failed to parse the value from the query string', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        history.pushState(null, '', '/loc1?test=invalidValue')
+        const testSearchParam = service.useSearchParam('test', { value: 'foo' })
+        expect(testSearchParam.getValue()).toEqual({ value: 'foo' })
+      })
+    })
+
+    it('Should return the value from the query string', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        history.pushState(null, '', '/loc1?test=%25221%2522')
+        const testSearchParam = service.useSearchParam('test', 123)
+        expect(testSearchParam.getValue()).toBe('1')
+      })
+    })
+
+    it('should update the observable value on push / replace states', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        history.pushState(null, '', '/loc1?test=1')
+        const testSearchParam = service.useSearchParam('test', 234)
+        expect(testSearchParam.getValue()).toBe(1)
+        history.replaceState(null, '', '/loc1?test=2')
+        expect(testSearchParam.getValue()).toBe(2)
+      })
+    })
+
+    it('Should update the URL based on search value change', () => {
+      using(new Injector(), (i) => {
+        const service = i.getInstance(LocationService)
+        history.pushState(null, '', '/loc1?test=%25221%2522')
+        const testSearchParam = service.useSearchParam('test', '')
+        testSearchParam.setValue('2')
+        expect(location.search).toBe('?test=%25222%2522')
+      })
+    })
+  })
 })

package/src/services/location-service.tsx

@@ -8,14 +8,68 @@ export class LocationService implements Disposable {
     window.removeEventListener('hashchange', this.updateState)
     this.pushStateTracer.dispose()
     this.replaceStateTracer.dispose()
-    this.onLocationChanged.dispose()
+    this.onLocationPathChanged.dispose()
   }
 
-  public onLocationChanged = new ObservableValue(new URL(location.href).pathname)
+  /**
+   * Observable value that will be updated when the location pathname (e.g. /page/1) changes
+   */
+  public onLocationPathChanged = new ObservableValue(new URL(location.href).pathname)
+
+  /**
+   * Observable value that will be updated when the location hash (e.g. #hash) changes
+   */
+  public onLocationHashChanged = new ObservableValue(location.hash)
+
+  /**
+   * Observable value that will be updated when the location search (e.g. ?search=1) changes
+   */
+  public onLocationSearchChanged = new ObservableValue(location.search)
 
   public updateState() {
-    const newUrl = new URL(location.href)
-    this.onLocationChanged.setValue(newUrl.pathname)
+    this.onLocationPathChanged.setValue(location.pathname)
+    this.onLocationHashChanged.setValue(location.hash)
+    this.onLocationSearchChanged.setValue(location.search)
+  }
+
+  public readonly searchParamObservables = new Map<string, ObservableValue<any>>()
+
+  private tryGetValueFromSearch = (key: string, search: string): any | undefined => {
+    try {
+      const params = new URLSearchParams(search)
+      if (params.has(key)) {
+        const value = params.get(key)
+        return value && JSON.parse(decodeURIComponent(value))
+      }
+    } catch (error) {
+      /** ignore */
+    }
+  }
+
+  /**
+   *
+   * @param key The search param key (e.g. ?search=1 -> search)
+   * @param defaultValue The default value if not provided
+   * @returns An observable with the current value (or default value) of the search param
+   */
+  public useSearchParam<T>(key: string, defaultValue: T) {
+    const actualValue = (this.tryGetValueFromSearch(key, location.search) as T) ?? defaultValue
+    if (!this.searchParamObservables.has(key)) {
+      const newObservable = new ObservableValue(actualValue)
+      this.searchParamObservables.set(key, newObservable)
+
+      newObservable.subscribe((value) => {
+        const params = new URLSearchParams(location.search)
+        params.set(key, encodeURIComponent(JSON.stringify(value)))
+        history.pushState({}, '', `${location.pathname}?${params}`)
+      })
+
+      this.onLocationSearchChanged.subscribe((search) => {
+        const value = this.tryGetValueFromSearch(key, search) || defaultValue
+        this.searchParamObservables.get(key)?.setValue(value as T)
+      })
+    }
+    return this.searchParamObservables.get(key) as ObservableValue<T>
   }
 
   private pushStateTracer: Disposable

package/src/services/resource-manager.spec.ts

@@ -0,0 +1,33 @@
+import { ObservableValue, using } from '@furystack/utils'
+import { ResourceManager } from './resource-manager'
+describe('ResourceManager', () => {
+  it('Should return an observable from cache', () => {
+    using(new ResourceManager(), (rm) => {
+      const o = new ObservableValue(1)
+      const [value1] = rm.useObservable('test', o, () => {
+        /** ignore */
+      })
+      const [value2] = rm.useObservable('test', o, () => {
+        /** ignore */
+      })
+
+      expect(value1).toBe(value2)
+
+      expect(o.getObservers().length).toBe(1)
+    })
+  })
+
+  it('Should return a disposable from cache', () => {
+    using(new ResourceManager(), (rm) => {
+      const d = {
+        dispose: () => {
+          /** ignore */
+        },
+      }
+      const d1 = rm.useDisposable('test', () => d)
+      const d2 = rm.useDisposable('test', () => d)
+
+      expect(d1).toBe(d2)
+    })
+  })
+})

package/src/services/resource-manager.ts

@@ -0,0 +1,60 @@
+import { ObservableValue } from '@furystack/utils'
+import type { Disposable, ValueChangeCallback } from '@furystack/utils'
+import type { ValueObserver } from '@furystack/utils'
+
+/**
+ * Class for managing observables and disposables for components, based on key-value maps
+ */
+export class ResourceManager {
+  private readonly disposables = new Map<string, Disposable>()
+
+  public useDisposable<T extends Disposable>(key: string, factory: () => T): T {
+    if (!this.disposables.has(key)) {
+      this.disposables.set(key, factory())
+    }
+    return this.disposables.get(key) as T
+  }
+
+  public readonly observers = new Map<string, ValueObserver<any>>()
+
+  public useObservable = <T>(
+    key: string,
+    observable: ObservableValue<T>,
+    callback: ValueChangeCallback<T>,
+    getLast?: boolean,
+  ): [value: T, setValue: (newValue: T) => void] => {
+    const alreadyUsed = this.observers.get(key) as ValueObserver<T> | undefined
+    if (alreadyUsed) {
+      return [alreadyUsed.observable.getValue(), alreadyUsed.observable.setValue.bind(alreadyUsed.observable)]
+    }
+    const observer = observable.subscribe(callback, getLast)
+    this.observers.set(key, observer)
+    return [observable.getValue(), observable.setValue.bind(observable)]
+  }
+
+  public readonly stateObservers = new Map<string, ObservableValue<any>>()
+
+  public useState = <T>(
+    key: string,
+    initialValue: T,
+    callback: ValueChangeCallback<T>,
+  ): [value: T, setValue: (newValue: T) => void] => {
+    if (!this.stateObservers.has(key)) {
+      const newObservable = new ObservableValue<T>(initialValue)
+      this.stateObservers.set(key, newObservable)
+      newObservable.subscribe(callback)
+    }
+    const observable = this.stateObservers.get(key) as ObservableValue<T>
+    return [observable.getValue(), observable.setValue.bind(observable)]
+  }
+
+  public dispose() {
+    this.disposables.forEach((r) => r.dispose())
+    this.disposables.clear()
+    this.observers.forEach((r) => r.dispose())
+    this.observers.clear()
+
+    this.stateObservers.forEach((r) => r.dispose())
+    this.stateObservers.clear()
+  }
+}

package/src/shade-component.ts

@@ -9,7 +9,7 @@ import { isShadeComponent } from './models'
  */
 export const appendChild = (el: HTMLElement | DocumentFragment, children: ChildrenList) => {
   for (const child of children) {
-    if (typeof child === 'string') {
+    if (typeof child === 'string' || typeof child === 'number') {
       el.appendChild(document.createTextNode(child))
     } else {
       if (child instanceof HTMLElement || child instanceof DocumentFragment) {
@@ -46,26 +46,37 @@ export const attachDataAttributes = (el: HTMLElement, props: any) => {
 }
 
 /**
- * Factory method that creates a component. This should be configured as a default JSX Factory in tsconfig.
  *
- * @param elementType The type of the element (component or stateless component factory method)
- * @param props The props for the component
- * @param children additional rest parameters will be parsed as children objects
- * @returns the created JSX element
+ * @param el The Target HTML Element
+ * @param props The Props to attach
  */
-export const createComponent = <TProps>(
+export const attachProps = (el: HTMLElement, props: any) => {
+  Object.assign(el, props)
+
+  if (props && (props as any).style) {
+    attachStyles(el, props)
+  }
+  attachDataAttributes(el, props)
+}
+
+type CreateComponentArgs<TProps> = [
   elementType: string | ShadeComponent<TProps>,
   props: TProps,
-  ...children: ChildrenList
-) => {
+  ...children: ChildrenList,
+]
+
+// eslint-disable-next-line jsdoc/require-param
+/**
+ * Factory method that creates a component. This should be configured as a default JSX Factory in tsconfig.
+ *
+ * @returns the created JSX element
+ */
+export const createComponentInner = <TProps>(...[elementType, props, ...children]: CreateComponentArgs<TProps>) => {
   if (typeof elementType === 'string') {
     const el = document.createElement(elementType)
-    Object.assign(el, props)
 
-    if (props && (props as any).style) {
-      attachStyles(el, props)
-    }
-    attachDataAttributes(el, props)
+    attachProps(el, props)
+
     if (children) {
       appendChild(el, children)
     }
@@ -78,8 +89,17 @@ export const createComponent = <TProps>(
   return undefined
 }
 
-export const createFragment = (_props: any, children: ChildrenList) => {
+type CreateFragmentArgs = [props: null, ...children: ChildrenList]
+
+export const createFragmentInner = (...[_props, ...children]: CreateFragmentArgs) => {
   const fragment = document.createDocumentFragment()
   appendChild(fragment, children)
   return fragment
 }
+
+export const createComponent = <TProps>(...args: CreateComponentArgs<TProps> | CreateFragmentArgs) => {
+  if (args[0] === null) {
+    return createFragmentInner(...args)
+  }
+  return createComponentInner(...args)
+}

package/src/shade-resources.integration.spec.tsx

@@ -24,22 +24,15 @@ describe('Shade Resources integration tests', () => {
     const obs2 = new ObservableValue('a')
 
     const ExampleComponent = Shade({
-      resources: ({ element }) => [
-        obs1.subscribe(
-          (val1) => ((element.querySelector('#val1') as HTMLDivElement).innerHTML = val1.toString()),
-          true,
-        ),
-        obs2.subscribe(
-          (val2) => ((element.querySelector('#val2') as HTMLDivElement).innerHTML = val2.toString()),
-          true,
-        ),
-      ],
-      render: () => {
+      render: ({ useObservable }) => {
+        const [value1] = useObservable('obs1', obs1)
+        const [value2] = useObservable('obs2', obs2)
+
         renderCounter()
         return (
           <div>
-            <div id="val1"></div>
-            <div id="val2"></div>
+            <div id="val1">{value1}</div>
+            <div id="val2">{value2}</div>
           </div>
         )
       },
@@ -67,6 +60,7 @@ describe('Shade Resources integration tests', () => {
     expect(document.body.innerHTML).toBe(
       '<div id="root"><shades-example-resource><div><div id="val1">1</div><div id="val2">a</div></div></shades-example-resource></div>',
     )
+    expect(renderCounter).toBeCalledTimes(2)
 
     obs2.setValue('b')
     expect(document.body.innerHTML).toBe(
@@ -78,6 +72,6 @@ describe('Shade Resources integration tests', () => {
     expect(obs1.getObservers().length).toBe(0)
     expect(obs2.getObservers().length).toBe(0)
 
-    expect(renderCounter).toBeCalledTimes(1)
+    expect(renderCounter).toBeCalledTimes(3)
   })
 })