web-toolkit-x 0.0.1 → 0.71.0

package/package.json

@@ -1,37 +1,94 @@
 {
   "name": "web-toolkit-x",
-  "version": "0.0.1",
-  "description": "Web Toolkit X, a Web Components Toolkit",
-  "type": "module",
-  "main": "index.js",
-  "exports": "./index.js",
-  "files": [
-    "index.js"
-  ],
+  "version": "0.71.0",
+  "description": "Web Toolkit X, a Web UI toolkit",
   "scripts": {
-    "test": "node --test"
+    "typecheck": "node node_modules/typescript-7/lib/tsc.js -p . && node node_modules/typescript-7/lib/tsc.js -p test && node node_modules/typescript-7/lib/tsc.js -p demo",
+    "test": "vitest run --browser=chromium",
+    "test:browsers": "vitest run",
+    "coverage": "vitest run --coverage --browser=chromium",
+    "bench": "vitest bench --run --reporter=verbose --browser=chromium",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "verify": "npm run build && npm run typecheck && npm run lint && prettier --check .",
+    "demo": "npm run build && vite demo --mode release",
+    "prepublishOnly": "npm run verify",
+    "prepare": "simple-git-hooks"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/aswitalski/web-toolkit-x.git"
   },
-  "bugs": {
-    "url": "https://github.com/aswitalski/web-toolkit-x/issues"
-  },
-  "homepage": "https://github.com/aswitalski/web-toolkit-x#readme",
-  "author": "Aleksander Świtalski",
-  "license": "Apache-2.0",
   "keywords": [
     "web ui",
     "toolkit",
     "native",
     "javascript",
     "framework",
-    "virtual dom",
-    "web components",
-    "native elements"
+    "virtual dom"
   ],
+  "author": "Aleksander Świtalski",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/aswitalski/web-toolkit-x/issues"
+  },
+  "homepage": "https://github.com/aswitalski/web-toolkit-x#readme",
+  "devDependencies": {
+    "@arethetypeswrong/core": "^0.18.5",
+    "@eslint/js": "^10.0.1",
+    "@vitest/browser-playwright": "^5.0.2",
+    "@vitest/coverage-v8": "^5.0.2",
+    "eslint": "^10.11.0",
+    "eslint-config-prettier": "^10.1.8",
+    "globals": "^17.12.0",
+    "lint-staged": "^17.6.0",
+    "playwright": "^1.63.0",
+    "prettier": "^3.9.9",
+    "publint": "^0.3.24",
+    "simple-git-hooks": "^2.14.0",
+    "tsdown": "^0.23.0",
+    "typescript": "~6.0.3",
+    "typescript-7": "npm:typescript@^7.0.2",
+    "typescript-eslint": "^8.70.1",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2"
+  },
+  "type": "module",
+  "types": "./dist/release/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/release/index.d.ts",
+      "default": "./dist/release/index.js"
+    },
+    "./global": {
+      "types": "./dist/release/global.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/release",
+    "src",
+    "NOTICE",
+    "AUTHORS"
+  ],
+  "allowScripts": {
+    "simple-git-hooks@2.14.0": true,
+    "fsevents": false
+  },
   "engines": {
     "node": ">=24"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged",
+    "pre-push": "npm run typecheck && npm test && npm run build && npm run lint"
+  },
+  "lint-staged": {
+    "*.{js,ts}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,html,css,yml,md}": "prettier --write"
   }
 }

package/src/core/bragi.ts

@@ -0,0 +1,122 @@
+/*
+ * Types of Bragi templates, describing the rendered content with arrays,
+ * objects and primitive values.
+ */
+import type {
+  AttributeName,
+  EventName,
+  FilterName,
+  TransformName,
+} from './browser.js'
+import type { Props } from './description.js'
+import type { Component } from './nodes.js'
+
+/* A value of an attribute, a data attribute or a function list entry. */
+export type AttributeValue =
+  | string
+  | number
+  | bigint
+  | boolean
+  | null
+  | undefined
+  | ReadonlyArray<string | number>
+
+/* Class names as a string, a list or an object of conditionally set names. */
+export type ClassName =
+  | string
+  | false
+  | null
+  | undefined
+  | readonly ClassName[]
+  | { readonly [name: string]: unknown }
+
+export type StyleValue =
+  string | number | boolean | null | undefined | ReadonlyArray<string | number>
+
+/* Functions of the filter and transform style properties, e.g. { blur: 2 }. */
+export type FunctionList<Name extends string> = {
+  readonly [F in Name]?: AttributeValue
+}
+
+type CSSPropertyName = {
+  [K in keyof CSSStyleDeclaration]: K extends string
+    ? CSSStyleDeclaration[K] extends string
+      ? K
+      : never
+    : never
+}[keyof CSSStyleDeclaration]
+
+export type Style = {
+  readonly [P in Exclude<CSSPropertyName, 'filter' | 'transform'>]?: StyleValue
+} & {
+  readonly [P in `--${string}`]?: StyleValue
+} & {
+  readonly filter?: StyleValue | FunctionList<FilterName>
+  readonly transform?: StyleValue | FunctionList<TransformName>
+}
+
+/* The DOM event name for a listener name, as resolved by the renderer. */
+type DOMEventName<N extends string> = N extends 'onDoubleClick'
+  ? 'dblclick'
+  : N extends `on${infer E}`
+    ? Lowercase<E>
+    : never
+
+export type Listener<E extends Event = Event> = (event: E) => unknown
+
+export type EventListenerFor<N extends EventName> = Listener<
+  DOMEventName<N> extends keyof HTMLElementEventMap
+    ? HTMLElementEventMap[DOMEventName<N>]
+    : Event
+>
+
+type SpecialProps = {
+  readonly key?: string | number
+  readonly class?: ClassName
+  readonly style?: Style
+  readonly dataset?: { readonly [name: string]: AttributeValue }
+  readonly properties?: { readonly [name: string]: unknown }
+  readonly attrs?: { readonly [name: string]: AttributeValue }
+  readonly on?: {
+    readonly [event: string]: Listener | null | false | undefined
+  }
+}
+
+type AttributeProps = {
+  readonly [A in Exclude<AttributeName, keyof SpecialProps>]?: AttributeValue
+}
+
+type ListenerProps = {
+  readonly [E in EventName]?: EventListenerFor<E> | null | false | undefined
+}
+
+/* Props of an element: attributes, listeners and the special props. */
+export type ElementProps = SpecialProps & AttributeProps & ListenerProps
+
+/* Tag names, with suggestions for the known HTML elements. */
+export type TagName = keyof HTMLElementTagNameMap | (string & {})
+
+/* A child node: a nested template, text or a skipped null or false. */
+export type Child = Template | string | number | true | null | false
+
+export type ElementTemplate =
+  readonly [TagName, ...Child[]] | readonly [TagName, ElementProps, ...Child[]]
+
+/* A function rendering the template for given props. */
+export type PureComponent = (props: never) => RenderResult
+
+/* A component class or a pure component. */
+export type ComponentType = typeof Component<object> | PureComponent
+
+export type ComponentTemplate =
+  | readonly [ComponentType, ...Child[]]
+  | readonly [ComponentType, Props, ...Child[]]
+
+/*
+ * Component templates come first, so that type errors in element templates
+ * are reported against the element props.
+ */
+export type Template = ComponentTemplate | ElementTemplate | null | false
+
+/* The result of a render method, nothing rendered when falsy. */
+export type RenderResult = Template | undefined