@furystack/shades 6.1.4 → 7.0.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,44 @@
 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>
+  useDisposable: <T extends Disposable>(key: string, factory: () => T) => T
+  useObservable: <T>(
+    key: string,
+    observable: ObservableValue<T>,
+    callback?: (newValue: T) => void,
+    getLast?: boolean,
+  ) => [value: T, setValue: (newValue: T) => void]
+  useState: <T>(key: string, initialValue: T) => [value: T, setValue: (newValue: T) => void]
+}
+
+// export type RenderOptionsState<TState> = unknown extends TState
+//   ? {}
+//   : {
+//       /**
+//        * @returns the current state object
+//        */
+//       getState: () => TState
+//       /**
+//        * Update the current component state's multiple properties in one-shot
+//        *
+//        * @param newState The partial new state object
+//        * @param skipRender Option to skip the render process
+//        */
+//       updateState: (newState: PartialElement<TState>, skipRender?: boolean) => void
+//       /**
+//        * @param key The key on the state object
+//        * @returns A tuple with the value and the setter function
+//        */
+//       useState: <T extends keyof TState>(
+//         key: T,
+//       ) => [value: TState[T], setValue: (newValue: TState[T], skipRender?: boolean) => void]
+//     }
+
+// export type RenderOptions<TProps, TState> = RenderOptionsBase<TProps, TState> & RenderOptionsState<TState>

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

@@ -22,7 +22,7 @@ describe('LocationService', () => {
     await usingAsync(new Injector(), async (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)

package/src/services/location-service.tsx

@@ -8,14 +8,28 @@ 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)
   }
 
   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)
   })
 })