@furystack/shades 3.6.3

package/src/models/children-list.ts

@@ -0,0 +1 @@
+export type ChildrenList = Array<string | HTMLElement | JSX.Element | string[] | HTMLElement[] | JSX.Element[]>

package/src/models/index.ts

@@ -0,0 +1,5 @@
+export * from './children-list'
+export * from './partial-element'
+export * from './render-options'
+export * from './selection-state'
+export * from './shade-component'

package/src/models/partial-element.ts

@@ -0,0 +1,3 @@
+export type PartialElement<T extends { style?: CSSStyleDeclaration }> = Omit<Partial<T>, 'style'> & {
+  style?: Partial<CSSStyleDeclaration>
+}

package/src/models/render-options.ts

@@ -0,0 +1,16 @@
+import { Injector } from '@furystack/inject'
+import { PartialElement } from './partial-element'
+import { ChildrenList } from './children-list'
+
+export type RenderOptions<TProps, TState> = {
+  readonly props: TProps
+
+  injector: Injector
+  children: ChildrenList
+  element: JSX.Element<TProps, TState>
+} & (unknown extends TState
+  ? {}
+  : {
+      getState: () => TState
+      updateState: (newState: PartialElement<TState>, skipRender?: boolean) => void
+    })

package/src/models/selection-state.ts

@@ -0,0 +1,9 @@
+export interface SelectionState {
+  focusedPath?: number[]
+  selectionRange?: {
+    startOffset: number
+    startContainerPath: number[]
+    endOffset: number
+    endContainerPath: number[]
+  }
+}

package/src/models/shade-component.ts

@@ -0,0 +1,16 @@
+import { ChildrenList } from './children-list'
+
+/**
+ * Type definition for a Shade component
+ */
+export type ShadeComponent<TProps = {}> = (arg: TProps, children?: ChildrenList) => JSX.Element
+
+/**
+ * Type guard that checks if an object is a stateless component
+ *
+ * @param obj The object to check
+ * @returns a value that indicates if the object is a Shade component
+ */
+export const isShadeComponent = (obj: any): obj is ShadeComponent<any> => {
+  return typeof obj === 'function'
+}

package/src/services/index.ts

@@ -0,0 +1,2 @@
+export * from './location-service'
+export * from './screen-service'

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

@@ -0,0 +1,16 @@
+import { Injector } from '@furystack/inject'
+import { usingAsync } from '@furystack/utils'
+import { LocationService } from './'
+import { JSDOM } from 'jsdom'
+
+describe('LocationService', () => {
+  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)
+    })
+  })
+})

package/src/services/location-service.tsx

@@ -0,0 +1,40 @@
+import { Disposable, ObservableValue, Trace } from '@furystack/utils'
+import { Injectable } from '@furystack/inject'
+@Injectable({ lifetime: 'singleton' })
+export class LocationService implements Disposable {
+  public dispose() {
+    window.removeEventListener('popstate', this.updateState)
+    window.removeEventListener('hashchange', this.updateState)
+    this.pushStateTracer.dispose()
+    this.replaceStateTracer.dispose()
+  }
+
+  public onLocationChanged = new ObservableValue<URL>(new URL(location.href))
+
+  public updateState() {
+    const newUrl = new URL(location.href)
+    this.onLocationChanged.setValue(newUrl)
+  }
+
+  private pushStateTracer: Disposable
+  private replaceStateTracer: Disposable
+
+  constructor() {
+    window.addEventListener('popstate', () => this.updateState())
+    window.addEventListener('hashchange', () => this.updateState())
+
+    this.pushStateTracer = Trace.method({
+      object: history,
+      method: history.pushState,
+      isAsync: false,
+      onFinished: () => this.updateState(),
+    })
+
+    this.replaceStateTracer = Trace.method({
+      object: history,
+      method: history.replaceState,
+      isAsync: false,
+      onFinished: () => this.updateState(),
+    })
+  }
+}

package/src/services/screen-service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@furystack/inject'
+import { Disposable, ObservableValue } from '@furystack/utils'
+
+export const ScreenSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+export type ScreenSize = typeof ScreenSizes[number]
+
+export type Breakpoint = { name: ScreenSize; minSize: number; maxSize?: number }
+
+@Injectable({ lifetime: 'singleton' })
+export class Screen implements Disposable {
+  private getOrientation = () => (window.matchMedia('(orientation:landscape').matches ? 'landscape' : 'portrait')
+
+  public readonly breakpoints: { [K in ScreenSize]: { minSize: number } } = {
+    xl: { minSize: 1920 },
+    lg: { minSize: 1280 },
+    md: { minSize: 960 },
+    sm: { minSize: 600 },
+    xs: { minSize: 0 },
+  }
+
+  public dispose() {
+    window.removeEventListener('resize', this.onResizeListener)
+  }
+
+  public readonly screenSize: {
+    atLeast: { [K in ScreenSize]: ObservableValue<boolean> }
+  } = {
+    atLeast: {
+      xs: new ObservableValue<boolean>(this.screenSizeAtLeast('xs')),
+      sm: new ObservableValue<boolean>(this.screenSizeAtLeast('sm')),
+      md: new ObservableValue<boolean>(this.screenSizeAtLeast('md')),
+      lg: new ObservableValue<boolean>(this.screenSizeAtLeast('lg')),
+      xl: new ObservableValue<boolean>(this.screenSizeAtLeast('xl')),
+    },
+  }
+
+  private screenSizeAtLeast(size: ScreenSize) {
+    return window.innerWidth >= this.breakpoints[size].minSize
+  }
+
+  public orientation = new ObservableValue<'landscape' | 'portrait'>(this.getOrientation())
+
+  private onResizeListener = () => {
+    this.refreshValues()
+  }
+
+  private refreshValues() {
+    this.orientation.setValue(this.getOrientation())
+    ScreenSizes.forEach((size) => {
+      this.screenSize.atLeast[size].setValue(this.screenSizeAtLeast(size))
+    })
+  }
+
+  constructor() {
+    window.addEventListener('resize', this.onResizeListener)
+    this.refreshValues()
+  }
+}

package/src/shade-component.ts

@@ -0,0 +1,69 @@
+import { ChildrenList, ShadeComponent, isShadeComponent } from './models'
+
+/**
+ * Appends a list of items to a HTML element
+ *
+ * @param el the root element
+ * @param children array of items to append
+ */
+export const appendChild = (el: HTMLElement, children: ChildrenList) => {
+  for (const child of children) {
+    if (typeof child === 'string') {
+      el.appendChild(document.createTextNode(child))
+    } else {
+      if (child instanceof HTMLElement) {
+        el.appendChild(child)
+      } else if (child instanceof Array) {
+        appendChild(el, child)
+      }
+    }
+  }
+}
+
+export const hasStyle = (props: any): props is { style: Partial<CSSStyleDeclaration> } => {
+  return props?.style !== undefined
+}
+
+/**
+ * @param el The Target HTML Element
+ * @param props The Properties to fetch The Styles Object
+ */
+export const attachStyles = (el: HTMLElement, props: any) => {
+  if (hasStyle(props))
+    for (const key in props.style) {
+      if (Object.prototype.hasOwnProperty.call(props.style, key)) {
+        ;(el.style as any)[key] = props.style[key]
+      }
+    }
+}
+
+/**
+ * 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
+ */
+export const createComponent = <TProps>(
+  elementType: string | ShadeComponent<TProps>,
+  props: TProps,
+  ...children: ChildrenList
+) => {
+  if (typeof elementType === 'string') {
+    const el = document.createElement(elementType)
+    Object.assign(el, props)
+
+    if (props && (props as any).style) {
+      attachStyles(el, props)
+    }
+    if (children) {
+      appendChild(el, children)
+    }
+    return el
+  } else if (isShadeComponent(elementType)) {
+    const el = (elementType as ShadeComponent<TProps>)(props, children)
+    attachStyles(el, props)
+    return el
+  }
+}

package/src/shade.ts

@@ -0,0 +1,201 @@
+import { ObservableValue } from '@furystack/utils'
+import { v4 } from 'uuid'
+import { Injector } from '@furystack/inject'
+import { ChildrenList, RenderOptions } from './models'
+
+export type ShadeOptions<TProps, TState> = {
+  /**
+   * Explicit shadow dom name. Will fall back to 'shade-{guid}' if not provided
+   */
+  shadowDomName?: string
+  /**
+   * Render hook, this method will be executed on each and every render.
+   */
+  render: (options: RenderOptions<TProps, TState>) => JSX.Element
+
+  /**
+   * Construct hook. Will be executed once when the element has been constructed and initialized
+   */
+  constructed?: (
+    options: RenderOptions<TProps, TState>,
+  ) => void | undefined | (() => void) | Promise<void | undefined | (() => void)>
+
+  /**
+   * Will be executed when the element is attached to the DOM.
+   */
+  onAttach?: (options: RenderOptions<TProps, TState>) => void
+
+  /**
+   * Will be executed when the element is detached from the DOM.
+   */
+  onDetach?: (options: RenderOptions<TProps, TState>) => void
+} & (unknown extends TState
+  ? {}
+  : {
+      /**
+       * The initial state of the component
+       */
+      getInitialState: (options: { injector: Injector; props: TProps }) => TState
+    })
+
+/**
+ * Factory method for creating Shade components
+ *
+ * @param o for component creation
+ * @returns the JSX element
+ */
+export const Shade = <TProps, TState = unknown>(o: ShadeOptions<TProps, TState>) => {
+  // register shadow-dom element
+  const customElementName = o.shadowDomName || `shade-${v4()}`
+
+  const existing = customElements.get(customElementName)
+  if (!existing) {
+    customElements.define(
+      customElementName,
+      class extends HTMLElement implements JSX.Element {
+        public connectedCallback() {
+          o.onAttach && o.onAttach(this.getRenderOptions())
+          this.callConstructed()
+        }
+
+        public disconnectedCallback() {
+          o.onDetach && o.onDetach(this.getRenderOptions())
+          this.props.dispose()
+          this.state.dispose()
+          this.shadeChildren.dispose()
+          this.cleanup && this.cleanup()
+        }
+
+        /**
+         * Will be triggered when updating the external props object
+         */
+        public props: ObservableValue<TProps & { children?: JSX.Element[] }>
+
+        /**
+         * Will be triggered on state update
+         */
+        public state: ObservableValue<TState>
+
+        /**
+         * Will be updated when on children change
+         */
+        public shadeChildren = new ObservableValue<ChildrenList>([])
+
+        /**
+         * @param options Options for rendering the component
+         * @returns the JSX element
+         */
+        public render = (options: RenderOptions<TProps, TState>) => o.render(options)
+
+        /**
+         * @returns values for the current render options
+         */
+        private getRenderOptions = () => {
+          const props = this.props.getValue() || {}
+          const getState = () => this.state.getValue()
+          return {
+            props,
+            getState,
+            injector: this.injector,
+            updateState: (newState: TState, skipRender: boolean) => {
+              this.state.setValue({ ...this.state.getValue(), ...newState })
+              !skipRender && this.updateComponent()
+            },
+            children: this.shadeChildren.getValue(),
+            element: this,
+          } as any as RenderOptions<TProps, TState>
+        }
+
+        /**
+         * Updates the component in the DOM.
+         */
+        public async updateComponent() {
+          const newJsx = this.render(this.getRenderOptions())
+
+          // const selectionState = this.getSelectionState()
+
+          if (this.hasChildNodes()) {
+            this.replaceChild(newJsx, this.firstChild as Node)
+            // selectionState && this.restoreSelectionState(selectionState)
+          } else {
+            this.append(newJsx)
+          }
+        }
+
+        /**
+         * Finialize the component initialization after it gets the Props. Called by the framework internally
+         */
+        public callConstructed() {
+          ;(o as any).getInitialState &&
+            this.state.setValue((o as any).getInitialState({ props: this.props.getValue(), injector: this.injector }))
+
+          this.updateComponent()
+          const cleanupResult = o.constructed && o.constructed(this.getRenderOptions())
+          if (cleanupResult instanceof Promise) {
+            cleanupResult.then((cleanup) => (this.cleanup = cleanup))
+          } else {
+            // construct is not async
+            this.cleanup = cleanupResult
+          }
+        }
+
+        private cleanup: void | (() => void) = undefined
+
+        private _injector?: Injector
+
+        private getInjectorFromParent(): Injector | void {
+          let parent = this.parentElement
+          while (parent) {
+            if ((parent as JSX.Element).injector) {
+              return (parent as JSX.Element).injector
+            }
+            parent = parent.parentElement
+          }
+        }
+
+        public get injector(): Injector {
+          if (this._injector) {
+            return this._injector
+          }
+
+          const fromState = (this.state.getValue() as any)?.injector
+          if (fromState && fromState instanceof Injector) {
+            return fromState
+          }
+
+          const fromProps = (this.props.getValue() as any)?.injector
+          if (fromProps && fromProps instanceof Injector) {
+            return fromProps
+          }
+
+          const fromParent = this.getInjectorFromParent()
+          if (fromParent) {
+            this._injector = fromParent
+            return fromParent
+          }
+          throw Error('Injector not set explicitly and not found on parents!')
+        }
+
+        public set injector(i: Injector) {
+          this._injector = i
+        }
+
+        constructor(_props: TProps) {
+          super()
+          this.props = new ObservableValue()
+          this.state = new ObservableValue()
+        }
+      } as any as CustomElementConstructor,
+    )
+  }
+
+  return (props: TProps, children: ChildrenList) => {
+    const el = document.createElement(customElementName, {
+      ...props,
+    }) as JSX.Element<TProps, TState>
+    el.props.setValue(props)
+
+    el.shadeChildren.setValue(children)
+    return el as JSX.Element
+  }
+}