targetj 1.0.257 → 1.0.259

package/package.json

@@ -1,16 +1,28 @@
 {
   "name": "targetj",
-  "version": "1.0.257",
-  "description": "TargetJS: JavaScript UI framework where state is a destination and code order defines the UI sequence",
+  "version": "1.0.259",
+  "description": "TargetJS: JavaScript UI framework where state includes the journey and code order defines the UI sequence",
   "keywords": [
-    "targetjs"
+    "targetjs",
+    "javascript",
+    "ui",
+    "framework",
+    "frontend",
+    "reactive",
+    "animation",
+    "state-management",
+    "web-framework"
   ],
   "type": "module",
   "main": "./Export.js",
   "module": "./Export.js",
+  "types": "./types/index.d.ts",
   "exports": {
-    ".": "./Export.js",
-    "./Export.js": "./Export.js"
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./Export.js",
+      "default": "./Export.js"
+    }
   },
   "homepage": "https://targetjs.io",
   "license": "MIT",
@@ -29,9 +41,12 @@
   "scripts": {
     "prod": "webpack --config webpack.config.cjs --mode production && gzip -kf ./dist/targetjs.js",
     "dev": "webpack --config webpack.config.cjs --mode development",
-    "build": "babel src --out-dir build"
+    "build": "babel src --out-dir build",
+    "test:types": "tsc --noEmit --strict --lib ES2022,DOM types/index.d.ts",
+    "prepack": "npm run build && npm run prod && npm run test:types"
   },
   "files": [
+    "types",
     "Export.js",
     "build/",
     "dist/",
@@ -45,6 +60,7 @@
     "@babel/preset-env": "^7.25.4",
     "babel-loader": "^9.1.0",
     "eslint-webpack-plugin": "^4.2.0",
+    "typescript": "^7.0.2",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4"
   }

package/types/app.d.ts

@@ -0,0 +1,56 @@
+import type { TargetDefinition } from "./core.js";
+
+import type { TModel } from "./tmodel.js";
+
+export function App(targets: TargetDefinition): TModel;
+
+export function App(tmodel: TModel): TModel;
+
+export namespace App { function unmount(): Promise<void>; }
+
+export const tApp: any;
+
+export function tRoot(): TModel | undefined;
+
+export function isRunning(): boolean;
+
+export function getEvents(): any;
+
+export function getPager(): any;
+
+export function getLoader(): any;
+
+export function getManager(): any;
+
+export function getTargetManager(): any;
+
+export function getAnimationManager(): any;
+
+export function getRunScheduler(): any;
+
+export function getLocationManager(): any;
+
+export function getScreenWidth(): number;
+
+export function getScreenHeight(): number;
+
+export function getVisibles(): any;
+
+export function getResizeLastUpdate(): number | undefined;
+
+export function getTModelById(id: string): TModel | undefined;
+
+export function getDomTModelById(id: string): TModel | undefined;
+
+export function fetch(
+  tmodel: TModel,
+  url: string,
+  query?: unknown,
+  cacheId?: string
+): unknown;
+
+export function fetchImage(
+  tmodel: TModel,
+  src: string,
+  cacheId?: string
+): unknown;

package/types/attributes.d.ts

@@ -0,0 +1,37 @@
+export type AttributeTargetName =
+  | "lang"
+  | "autoFocus"
+  | "placeholder"
+  | "autoComplete"
+  | "name"
+  | "type"
+  | "src"
+  | "href"
+  | "method"
+  | "size"
+  | "value"
+  | "maxLength"
+  | "minLength"
+  | "max"
+  | "min"
+  | "readOnly"
+  | "required"
+  | "alt"
+  | "disabled"
+  | "action"
+  | "accept"
+  | "selected"
+  | "rows"
+  | "cols"
+  | "tabIndex"
+  | "role"
+  | "ariaLabel"
+  | "ariaCurrent"
+  | "ariaPressed";
+
+export type AttributeTargetValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined;

package/types/core.d.ts

@@ -0,0 +1,154 @@
+import type {
+  TModel
+} from "./tmodel.js";
+
+import type {
+  StyleTargetName
+} from "./styles.js";
+
+import type {
+  AttributeTargetName,
+  AttributeTargetValue
+} from "./attributes.js";
+
+import type {
+  StandardEventTargetName
+} from "./events.js";
+
+export type TargetFunction<TResult = unknown> = (
+  this: TModel,
+  ...args: any[]
+) => TResult;
+
+export type EventTargets = {
+  [TName in StandardEventTargetName]?:
+    | boolean
+    | TargetFunction<unknown>;
+} & {
+  onResize?:
+    | boolean
+    | readonly string[]
+    | TargetFunction<unknown>;
+};
+
+export type EasingFunction = (
+  progress: number
+) => number;
+
+export type EasingValue =
+  | string
+  | EasingFunction;
+
+export type TargetOptions<T = unknown> = {
+  value?:
+    | T
+    | readonly T[]
+    | TargetFunction<T>;
+
+  list?: readonly T[];
+
+  steps?:
+    | number
+    | readonly number[];
+
+  interval?:
+    | number
+    | readonly number[]
+    | TargetFunction<number | readonly number[]>;
+
+  cycles?:
+    | number
+    | TargetFunction<number>;
+
+  loop?:
+    | boolean
+    | "passive";
+
+  active?: boolean;
+
+  enabledOn?:
+    | boolean
+    | string
+    | TargetFunction<boolean>;
+
+  pauseOn?:
+    | boolean
+    | string
+    | TargetFunction<boolean>;
+
+  easing?:
+    | EasingValue
+    | readonly EasingValue[];
+
+  onComplete?: TargetFunction<void>;
+  onValueChange?: TargetFunction<void>;
+} & ThisType<TModel>;
+
+export type TargetInput<T = unknown> =
+  | T
+  | readonly T[]
+  | TargetFunction<T>
+  | TargetOptions<T>;
+
+export type ExecutionName<
+  TName extends string
+> =
+  | TName
+  | `${TName}$`
+  | `${TName}$$`;
+
+export type StyleTargetValue =
+  | string
+  | number
+  | boolean
+  | Record<string, unknown>;
+
+export type StyleTargets = {
+  [TName in ExecutionName<StyleTargetName>]?:
+    TargetInput<StyleTargetValue>;
+};
+
+export type AttributeTargets = {
+  [TName in ExecutionName<AttributeTargetName>]?:
+    TargetInput<AttributeTargetValue>;
+};
+
+export type TargetEntry =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | readonly unknown[]
+  | TargetFunction
+  | TargetOptions
+  | TargetDefinition
+  | readonly TargetDefinition[];
+
+export type ChildrenTargetOptions =
+  Omit<
+    TargetOptions<readonly TargetDefinition[]>,
+    "value"
+  > & {
+    value?:
+      | readonly TargetDefinition[]
+      | TargetFunction<readonly TargetDefinition[]>;
+
+    onVisibleComplete?: TargetFunction<void>;
+  } &
+  ThisType<TModel>;
+
+export type TargetDefinition =
+  StyleTargets &
+  AttributeTargets &
+  EventTargets & {
+    addChildren?: ChildrenTargetOptions;
+    children?: ChildrenTargetOptions;
+
+    [targetName: string]: TargetEntry;
+  } &
+  ThisType<TModel>;
+
+export interface SetTargetMap {
+  [targetName: string]: TargetInput;
+}

package/types/events.d.ts

@@ -0,0 +1,41 @@
+export type UserEventTargetName =
+| "onStart"
+| "onEnd"
+| "onKey"
+| "onKeyDown"
+| "onAnyKey"
+| "onBlur"
+| "onFocus"
+| "onClick"
+| "onAnyClick"
+| "onHover"
+| "onSwipe"
+| "onAnySwipe"
+| "onPinch"
+| "onEnter"
+| "onLeave"
+| "onScroll"
+| "onScrollLeft"
+| "onScrollTop"
+| "onScrollLeftEnd"
+| "onScrollTopEnd"
+| "onWindowScroll"
+| "onWindowScrollTopEnd"
+| "onWindowScrollLeftEnd"
+| "onPopState"
+| "onChange"
+| "onInput"
+| "onSubmit";
+
+export type InternalEventTargetName =
+| "onDomEvent"
+| "onVisible"
+| "onInvisible";
+
+export type EventTargetName =
+| UserEventTargetName
+| InternalEventTargetName
+| "onResize";
+
+export type StandardEventTargetName =
+Exclude<EventTargetName, "onResize">;

package/types/index.d.ts

@@ -0,0 +1,45 @@
+export * from "./styles.js";
+export * from "./events.js";
+export * from "./attributes.js";
+export * from "./core.js";
+export * from "./tmodel.js";
+export * from "./app.js";
+export * from "./state.js";
+export * from "./utilities.js";
+
+import {
+  App
+} from "./app.js";
+
+import {
+  state
+} from "./state.js";
+
+import {
+  TModel
+} from "./tmodel.js";
+
+import {
+  Easing,
+  Moves,
+  StateUtil,
+  TModelUtil,
+  TUtil
+} from "./utilities.js";
+
+declare const TargetJS: {
+  [exportName: string]: any;
+
+  App: typeof App;
+  TModel: typeof TModel;
+  state: typeof state;
+
+  Moves: typeof Moves;
+  Easing: typeof Easing;
+
+  TUtil: typeof TUtil;
+  TModelUtil: typeof TModelUtil;
+  StateUtil: typeof StateUtil;
+};
+
+export default TargetJS;

package/types/state.d.ts

@@ -0,0 +1,48 @@
+export interface StateCheckpoint {
+  key: string;
+  capturedAt: number;
+
+  html: string;
+  domState: unknown;
+
+  oids: Record<string, unknown>;
+  rootSnapshot: unknown;
+  loaderSnapshot: unknown;
+
+  visibleOids: string[];
+
+  scrollLeft: number;
+  scrollTop: number;
+
+  runSnapshot: unknown;
+}
+
+export interface StateManager {
+  store(
+    key?: string
+  ): Promise<StateCheckpoint>;
+
+  restore(
+    key?: string
+  ): Promise<boolean>;
+
+  toggle(
+    key?: string
+  ): Promise<StateCheckpoint | boolean>;
+
+  has(
+    key?: string
+  ): boolean;
+
+  get(
+    key?: string
+  ): StateCheckpoint | undefined;
+
+  clear(
+    key?: string
+  ): boolean;
+
+  clearAll(): void;
+}
+
+export function state(): StateManager;

package/types/styles.d.ts

@@ -0,0 +1,103 @@
+import type { AttributeTargetName } from "./attributes.js";
+
+export type TransformTargetName =
+  | "x"
+  | "y"
+  | "z"
+  | "translateX"
+  | "translateY"
+  | "translateZ"
+  | "perspective"
+  | "rotate"
+  | "rotateX"
+  | "rotateY"
+  | "rotateZ"
+  | "rotate3DX"
+  | "rotate3DY"
+  | "rotate3DZ"
+  | "rotate3DAngle"
+  | "scale"
+  | "scaleX"
+  | "scaleY"
+  | "scaleZ"
+  | "scale3DX"
+  | "scale3DY"
+  | "scale3DZ"
+  | "skew"
+  | "skewX"
+  | "skewY";
+
+export type UnitStyleTargetName =
+  | "width"
+  | "height"
+  | "fontSize"
+  | "lineHeight"
+  | "borderRadius"
+  | "padding"
+  | "paddingLeft"
+  | "paddingRight"
+  | "paddingTop"
+  | "paddingBottom"
+  | "left"
+  | "top"
+  | "right"
+  | "bottom"
+  | "wordSpacing"
+  | "letterSpacing";
+
+export type ColorStyleTargetName =
+  | "color"
+  | "backgroundColor"
+  | "borderColor"
+  | "background";
+
+export type DirectStyleTargetName =
+  | "dim"
+  | "opacity"
+  | "zIndex"
+  | "border"
+  | "borderTop"
+  | "borderLeft"
+  | "borderRight"
+  | "borderBottom";
+
+export type AsyncStyleTargetName =
+  | "position"
+  | "css"
+  | "style"
+  | "textAlign"
+  | "boxSizing"
+  | "transformStyle"
+  | "transformOrigin"
+  | "attributes"
+  | "justifyContent"
+  | "flexDirection"
+  | "alignItems"
+  | "display"
+  | "cursor"
+  | "fontFamily"
+  | "overflow"
+  | "overflowX"
+  | "overflowY"
+  | "textDecoration"
+  | "boxShadow"
+  | "fontWeight"
+  | "willChange"
+  | "backgroundImage"
+  | "backgroundSize"
+  | "flexWrap"
+  | "userSelect"
+  | "outline"
+  | "backfaceVisibility"
+  | "filter";
+
+export type StyleTargetName =
+  | TransformTargetName
+  | UnitStyleTargetName
+  | ColorStyleTargetName
+  | DirectStyleTargetName
+  | AsyncStyleTargetName;
+
+export type StylableTargetName =
+  | StyleTargetName
+  | AttributeTargetName;

package/types/tmodel.d.ts

@@ -0,0 +1,89 @@
+import type {
+  EasingValue,
+  SetTargetMap,
+  TargetDefinition,
+  TargetInput
+} from "./core.js";
+
+export class TModel<
+  TTargets extends TargetDefinition = TargetDefinition
+> {
+  constructor(
+    type: string,
+    targets: TTargets,
+    oid?: string,
+    options?: unknown
+  );
+
+  oid: string;
+  targets: TTargets;
+
+  parent?: TModel;
+
+  visibleChildren: TModel[];
+
+  $dom?: {
+    getScrollTop(): number;
+    getScrollLeft?(): number;
+  };
+
+  mount(element: string | Element): this;
+
+  val<T = unknown>(
+    targetName: string
+  ): T;
+
+  val<T = unknown>(
+    targetName: string,
+    value: T
+  ): T;
+
+  pval<T = unknown>(
+    targetName: string
+  ): T;
+
+  setTarget<T>(
+    targetName: string,
+    value: TargetInput<T>,
+    steps?: number,
+    interval?: number,
+    easing?: EasingValue
+  ): this;
+
+  setTarget(
+    targets: SetTargetMap,
+    steps?: number,
+    interval?: number,
+    easing?: EasingValue
+  ): this;
+
+  activateTarget(
+    targetName: string,
+    ...args: any[]
+  ): unknown;
+
+  getChild(
+    id: string | number
+  ): TModel | undefined;
+
+  getParent(): TModel | undefined;
+
+  getLastChild(): TModel | undefined;
+
+  getWidth(): number;
+  getHeight(): number;
+  getX(): number;
+  getY(): number;
+
+  isVisible(): boolean;
+
+  isTargetVisibleTreeComplete(
+    targetName?: string
+  ): boolean;
+
+  addChild(
+    definition: TargetDefinition | TModel
+  ): TModel;
+
+  removeChildren(): void;
+}

package/types/utilities.d.ts

@@ -0,0 +1,37 @@
+export const Moves: any;
+
+export const SearchUtil: any;
+
+export const TargetData: any;
+
+export const TargetUtil: any;
+
+export const TargetParser: any;
+
+export const TModelUtil: any;
+
+export const TUtil: any;
+
+export const DomInit: any;
+
+export const $Dom: any;
+
+export const Bracket: any;
+
+export const BracketGenerator: any;
+
+export const ColorUtil: any;
+
+export const Easing: any;
+
+export const TargetExecutor: any;
+
+export const AnimationManager: any;
+
+export const AnimationUtil: any;
+
+export const VisibilityUtil: any;
+
+export const ScheduleUtil: any;
+
+export const StateUtil: any;