@furystack/shades 3.7.3 → 4.0.0

package/src/components/lazy-load.spec.tsx

@@ -0,0 +1,117 @@
+import { TextEncoder, TextDecoder } from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder as any
+
+import { Injector } from '@furystack/inject'
+import { sleepAsync } from '@furystack/utils'
+import { LazyLoad } from './lazy-load'
+import { JSDOM } from 'jsdom'
+import { createComponent, initializeShadeRoot } from '..'
+
+describe('Lazy Load', () => {
+  const oldDoc = document
+
+  beforeAll(() => {
+    globalThis.document = new JSDOM().window.document
+    window.matchMedia = () => ({ matches: true } as any)
+  })
+
+  afterAll(() => {
+    globalThis.document = oldDoc
+  })
+
+  beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
+  afterEach(() => (document.body.innerHTML = ''))
+
+  it('Shuld display the loader and completed state', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <LazyLoad
+          loader={<div>Loading...</div>}
+          component={async () => {
+            await sleepAsync(100)
+            return <div>Loaded</div>
+          }}
+        />
+      ),
+    })
+    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
+    await sleepAsync(150)
+    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loaded</div></lazy-load></div>')
+  })
+
+  it('Shuld display the failed state with a retryer', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    const load = jest.fn(async () => {
+      throw Error(':(')
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <LazyLoad
+          loader={<div>Loading...</div>}
+          component={load}
+          error={(e, retry) => (
+            <button id="retry" onclick={retry}>
+              {(e as Error).message}
+            </button>
+          )}
+        />
+      ),
+    })
+    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
+    await sleepAsync(1)
+    expect(load).toBeCalledTimes(1)
+    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>')
+    document.getElementById('retry')?.click()
+    expect(load).toBeCalledTimes(2)
+  })
+
+  it('Shuld display the failed state with a retryer', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+    let counter = 0
+
+    const load = jest.fn(async () => {
+      if (!counter) {
+        counter += 1
+        throw Error(':(')
+      }
+      return <div>success</div>
+    })
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <LazyLoad
+          loader={<div>Loading...</div>}
+          component={load}
+          error={(e, retry) => (
+            <button id="retry" onclick={retry}>
+              {(e as Error).message}
+            </button>
+          )}
+        />
+      ),
+    })
+    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>Loading...</div></lazy-load></div>')
+    await sleepAsync(1)
+    expect(load).toBeCalledTimes(1)
+    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><button id="retry">:(</button></lazy-load></div>')
+    document.getElementById('retry')?.click()
+    expect(load).toBeCalledTimes(2)
+    await sleepAsync(1)
+    expect(document.body.innerHTML).toBe('<div id="root"><lazy-load><div>success</div></lazy-load></div>')
+  })
+})

package/src/components/route-link.spec.tsx

@@ -0,0 +1,50 @@
+import { TextEncoder, TextDecoder } from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder as any
+
+import { Injector } from '@furystack/inject'
+import { RouteLink } from './route-link'
+import { JSDOM } from 'jsdom'
+import { createComponent, initializeShadeRoot, LocationService } from '..'
+
+describe('RouteLink', () => {
+  const oldDoc = document
+
+  beforeAll(() => {
+    globalThis.document = new JSDOM().window.document
+    window.matchMedia = () => ({ matches: true } as any)
+  })
+
+  afterAll(() => {
+    globalThis.document = oldDoc
+  })
+
+  beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
+  afterEach(() => (document.body.innerHTML = ''))
+
+  it('Shuld display the loader and completed state', async () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    const onRouteChange = jest.fn()
+
+    injector.getInstance(LocationService).onLocationChanged.subscribe(onRouteChange)
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <RouteLink id="route" href="/subroute">
+          Link
+        </RouteLink>
+      ),
+    })
+    expect(document.body.innerHTML).toBe(
+      '<div id="root"><route-link><a id="route" href="/subroute">Link</a></route-link></div>',
+    )
+    expect(onRouteChange).not.toBeCalled()
+    document.getElementById('route')?.click()
+    expect(onRouteChange).toBeCalledTimes(1)
+  })
+})

package/src/components/route-link.tsx

@@ -13,7 +13,8 @@ export const RouteLink = Shade<PartialElement<HTMLAnchorElement>>({
           ev.preventDefault()
           history.pushState('', props.title || '', props.href)
           injector.getInstance(LocationService).updateState()
-        }}>
+        }}
+      >
         {children}
       </a>
     )

package/src/components/router.spec.tsx

@@ -0,0 +1,130 @@
+import { TextEncoder, TextDecoder } from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder as any
+
+import { Injector } from '@furystack/inject'
+import { Router } from './router'
+import { JSDOM } from 'jsdom'
+import { createComponent, initializeShadeRoot, LocationService } from '..'
+import { RouteLink } from '.'
+import { sleepAsync } from '@furystack/utils'
+
+describe('Router', () => {
+  const oldDoc = document
+
+  beforeAll(() => {
+    globalThis.document = new JSDOM().window.document
+    window.matchMedia = () => ({ matches: true } as any)
+  })
+
+  afterAll(() => {
+    globalThis.document = oldDoc
+  })
+
+  beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
+  afterEach(() => (document.body.innerHTML = ''))
+
+  it('Shuld display the loader and completed state', async () => {
+    history.pushState(null, '', '/')
+
+    const onVisit = jest.fn()
+    const onLeave = jest.fn()
+    const onLastLeave = jest.fn()
+
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    const onRouteChange = jest.fn()
+
+    injector.getInstance(LocationService).onLocationChanged.subscribe(onRouteChange)
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: (
+        <div>
+          <RouteLink id="home" href="/">
+            home
+          </RouteLink>
+          <RouteLink id="a" href="/route-a">
+            a
+          </RouteLink>
+          <RouteLink id="b" href="/route-b">
+            b
+          </RouteLink>
+          <RouteLink id="b-with-id" href="/route-b/123">
+            b-with-id
+          </RouteLink>
+          <RouteLink id="c" href="/route-c">
+            c
+          </RouteLink>
+          <RouteLink id="x" href="/route-x">
+            x
+          </RouteLink>
+          <Router
+            routes={[
+              { url: '/route-a', component: () => <div id="content">route-a</div>, onVisit, onLeave },
+              { url: '/route-b/:id?', component: ({ match }) => <div id="content">route-b{match.params.id}</div> },
+              {
+                url: '/route-c',
+                component: () => <div id="content">route-c</div>,
+                onLeave: onLastLeave,
+              },
+              { url: '/', component: () => <div id="content">home</div> },
+            ]}
+            notFound={() => <div id="content">not found</div>}
+          />
+        </div>
+      ),
+    })
+
+    const getContent = () => document.getElementById('content')?.innerHTML
+    const getLocation = () => location.pathname
+
+    const clickOn = (name: string) => document.getElementById(name)?.click()
+
+    await sleepAsync(100)
+
+    expect(getLocation()).toBe('/')
+    expect(getContent()).toBe('home')
+
+    expect(onVisit).not.toBeCalled()
+
+    clickOn('a')
+    await sleepAsync(100)
+    expect(getContent()).toBe('route-a')
+    expect(getLocation()).toBe('/route-a')
+    expect(onRouteChange).toBeCalledTimes(1)
+    expect(onVisit).toBeCalledTimes(1)
+
+    clickOn('a')
+    await sleepAsync(100)
+    expect(onVisit).toBeCalledTimes(1)
+    expect(onLeave).not.toBeCalled()
+
+    clickOn('b')
+    await sleepAsync(100)
+    expect(onLeave).toBeCalledTimes(1)
+
+    expect(getContent()).toBe('route-b')
+    expect(getLocation()).toBe('/route-b')
+
+    clickOn('b-with-id')
+    await sleepAsync(100)
+    expect(getContent()).toBe('route-b123')
+    expect(getLocation()).toBe('/route-b/123')
+
+    clickOn('c')
+    await sleepAsync(100)
+    expect(getContent()).toBe('route-c')
+    expect(getLocation()).toBe('/route-c')
+
+    expect(onLastLeave).not.toBeCalled()
+    clickOn('x')
+    await sleepAsync(100)
+    expect(getContent()).toBe('not found')
+    expect(getLocation()).toBe('/route-x')
+    expect(onLastLeave).toBeCalledTimes(1)
+  })
+})

package/src/components/router.tsx

@@ -3,10 +3,11 @@ import { createComponent } from '../shade-component'
 import { LocationService } from '../services'
 import { match, MatchResult, TokensToRegexpOptions } from 'path-to-regexp'
 import { RenderOptions } from '../models'
+import Semaphore from 'semaphore-async-await'
 
 export interface Route<TMatchResult extends object> {
   url: string
-  component: (options: { currentUrl: URL; match: MatchResult<TMatchResult> }) => JSX.Element
+  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>
@@ -15,47 +16,55 @@ export interface Route<TMatchResult extends object> {
 export interface RouterProps {
   style?: CSSStyleDeclaration
   routes: Array<Route<any>>
-  notFound?: (currentUrl: URL) => JSX.Element
+  notFound?: (currentUrl: string) => JSX.Element
 }
 
 export interface RouterState {
   activeRoute?: Route<any>
   activeRouteParams?: any
   jsx?: JSX.Element
+  lock: Semaphore
 }
 export const Router = Shade<RouterProps, RouterState>({
   shadowDomName: 'shade-router',
-  getInitialState: () => ({}),
-  constructed: ({ children, props, injector, updateState, getState, element }) => {
-    const subscription = injector.getInstance(LocationService).onLocationChanged.subscribe(async (currentUrl) => {
-      const { activeRoute: lastRoute, activeRouteParams: lastParams } = getState()
-      for (const route of props.routes) {
-        const matchFn = match(route.url, route.routingOptions)
-        const matchResult = matchFn(currentUrl.pathname)
-        if (matchResult) {
-          if (route !== lastRoute || JSON.stringify(lastParams) !== JSON.stringify(matchResult.params)) {
-            if (lastRoute?.onLeave) {
-              await lastRoute.onLeave({ children, props, injector, updateState, getState, element })
-            }
-            updateState({
-              jsx: route.component({ currentUrl, match: matchResult }),
-              activeRoute: route,
-              activeRouteParams: matchResult.params,
-            })
-            if (route.onVisit) {
-              await route.onVisit({ children, props, injector, updateState, getState, element })
+  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()
+      try {
+        await lock.acquire()
+
+        for (const route of 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)) {
+              if (lastRoute?.onLeave) {
+                await lastRoute.onLeave({ children, props, injector, updateState, getState, element })
+              }
+              updateState({
+                jsx: route.component({ currentUrl, match: matchResult }),
+                activeRoute: route,
+                activeRouteParams: matchResult.params,
+              })
+              if (route.onVisit) {
+                await route.onVisit({ children, props, injector, updateState, getState, element })
+              }
             }
+            return
           }
-          return
         }
+        if (lastRoute?.onLeave) {
+          await lastRoute.onLeave({ children, props, injector, updateState, getState, element })
+        }
+        updateState({ jsx: props.notFound?.(currentUrl), activeRoute: undefined })
+      } finally {
+        lock.release()
       }
-      if (lastRoute?.onLeave) {
-        await lastRoute.onLeave({ children, props, injector, updateState, getState, element })
-      }
-      updateState({ jsx: props.notFound?.(currentUrl), activeRoute: undefined })
-    }, true)
-    return () => subscription.dispose()
-  },
+    }, true),
+  ],
   render: ({ getState }) => {
     const { jsx } = getState()
     if (jsx) {

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

@@ -1,16 +1,50 @@
+import { TextEncoder, TextDecoder } from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder as any
+
 import { Injector } from '@furystack/inject'
 import { usingAsync } from '@furystack/utils'
 import { LocationService } from './'
 import { JSDOM } from 'jsdom'
 
 describe('LocationService', () => {
+  const oldDoc = document
+
+  beforeAll(() => {
+    globalThis.document = new JSDOM().window.document
+  })
+
+  afterAll(() => {
+    globalThis.document = oldDoc
+  })
+
+  beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
+  afterEach(() => (document.body.innerHTML = ''))
+
   it('Shuld be constructed', async () => {
     await usingAsync(new Injector(), async (i) => {
-      const dom = new JSDOM()
-      ;(global as any).window = dom.window
-      i.setExplicitInstance(dom.window, Window)
       const s = i.getInstance(LocationService)
       expect(s).toBeInstanceOf(LocationService)
     })
   })
+
+  it('Shuld update state on events', async () => {
+    await usingAsync(new Injector(), async (i) => {
+      const onLocaionChanged = jest.fn()
+      const s = i.getInstance(LocationService)
+      s.onLocationChanged.subscribe(onLocaionChanged)
+      expect(onLocaionChanged).toBeCalledTimes(0)
+      history.pushState(null, '', '/loc1')
+      expect(onLocaionChanged).toBeCalledTimes(1)
+      history.replaceState(null, '', '/loc2')
+      expect(onLocaionChanged).toBeCalledTimes(2)
+
+      // TODO: Figure out testing hashchange and popstate subscriptions
+      // window.dispatchEvent(new HashChangeEvent('hashchange', { newURL: '/loc3' }))
+      // expect(onLocaionChanged).toBeCalledTimes(3)
+      // window.dispatchEvent(new PopStateEvent('popstate', {}))
+      // expect(onLocaionChanged).toBeCalledTimes(4)
+    })
+  })
 })

package/src/services/location-service.tsx

@@ -7,13 +7,14 @@ export class LocationService implements Disposable {
     window.removeEventListener('hashchange', this.updateState)
     this.pushStateTracer.dispose()
     this.replaceStateTracer.dispose()
+    this.onLocationChanged.dispose()
   }
 
-  public onLocationChanged = new ObservableValue<URL>(new URL(location.href))
+  public onLocationChanged = new ObservableValue(new URL(location.href).pathname)
 
   public updateState() {
     const newUrl = new URL(location.href)
-    this.onLocationChanged.setValue(newUrl)
+    this.onLocationChanged.setValue(newUrl.pathname)
   }
 
   private pushStateTracer: Disposable

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

@@ -0,0 +1,39 @@
+import { TextEncoder, TextDecoder } from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder as any
+
+import { Injector } from '@furystack/inject'
+import { usingAsync } from '@furystack/utils'
+import { ScreenService } from './screen-service'
+import { JSDOM } from 'jsdom'
+
+describe('ScreenService', () => {
+  const oldDoc = document
+
+  beforeAll(() => {
+    globalThis.document = new JSDOM().window.document
+    window.matchMedia = () => ({ matches: true } as any)
+  })
+
+  afterAll(() => {
+    globalThis.document = oldDoc
+  })
+
+  beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
+  afterEach(() => (document.body.innerHTML = ''))
+
+  it('Shuld be constructed', async () => {
+    await usingAsync(new Injector(), async (i) => {
+      const s = i.getInstance(ScreenService)
+      expect(s).toBeInstanceOf(ScreenService)
+    })
+  })
+
+  it('Shuld update state on events', async () => {
+    await usingAsync(new Injector(), async (i) => {
+      i.getInstance(ScreenService)
+      /** TODO */
+    })
+  })
+})

package/src/services/screen-service.ts

@@ -8,7 +8,7 @@ export type ScreenSize = typeof ScreenSizes[number]
 export type Breakpoint = { name: ScreenSize; minSize: number; maxSize?: number }
 
 @Injectable({ lifetime: 'singleton' })
-export class Screen implements Disposable {
+export class ScreenService implements Disposable {
   private getOrientation = () => (window.matchMedia('(orientation:landscape').matches ? 'landscape' : 'portrait')
 
   public readonly breakpoints: { [K in ScreenSize]: { minSize: number } } = {

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

@@ -0,0 +1,94 @@
+import { Injector } from '@furystack/inject'
+
+import { TextEncoder, TextDecoder } from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder as any
+
+import { JSDOM } from 'jsdom'
+import { initializeShadeRoot } from './initialize'
+import { Shade } from './shade'
+import { createComponent } from './shade-component'
+import { ObservableValue } from '@furystack/utils'
+
+describe('Shade Resources integration tests', () => {
+  const oldDoc = document
+
+  beforeAll(() => {
+    globalThis.document = new JSDOM().window.document
+  })
+
+  afterAll(() => {
+    globalThis.document = oldDoc
+  })
+
+  beforeEach(() => (document.body.innerHTML = '<div id="root"></div>'))
+  afterEach(() => (document.body.innerHTML = ''))
+
+  it('Should update the component based on a custom observable value change', () => {
+    const injector = new Injector()
+    const rootElement = document.getElementById('root') as HTMLDivElement
+
+    const renderCounter = jest.fn()
+
+    const obs1 = new ObservableValue(0)
+    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: () => {
+        renderCounter()
+        return (
+          <div>
+            <div id="val1"></div>
+            <div id="val2"></div>
+          </div>
+        )
+      },
+      shadowDomName: 'shades-example-resource',
+    })
+
+    expect(obs1.getObservers().length).toBe(0)
+    expect(obs2.getObservers().length).toBe(0)
+
+    initializeShadeRoot({
+      injector,
+      rootElement,
+      jsxElement: <ExampleComponent />,
+    })
+    expect(document.body.innerHTML).toBe(
+      '<div id="root"><shades-example-resource><div><div id="val1">0</div><div id="val2">a</div></div></shades-example-resource></div>',
+    )
+
+    expect(obs1.getObservers().length).toBe(1)
+    expect(obs2.getObservers().length).toBe(1)
+
+    expect(renderCounter).toBeCalledTimes(1)
+
+    obs1.setValue(1)
+    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>',
+    )
+
+    obs2.setValue('b')
+    expect(document.body.innerHTML).toBe(
+      '<div id="root"><shades-example-resource><div><div id="val1">1</div><div id="val2">b</div></div></shades-example-resource></div>',
+    )
+
+    document.body.innerHTML = ''
+
+    expect(obs1.getObservers().length).toBe(0)
+    expect(obs2.getObservers().length).toBe(0)
+
+    expect(renderCounter).toBeCalledTimes(1)
+  })
+})