@ktjs/shortcuts 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 kasukabe tsumugi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+# @ktjs/shortcuts
+
+<img src="https://raw.githubusercontent.com/baendlorel/kt.js/dev/.assets/ktjs-0.0.1.svg" alt="KT.js Logo" width="150"/>
+
+> 📦 Part of [KT.js](https://raw.githubusercontent.com/baendlorel/kt.js/dev/README.md) - A simple and easy-to-use web framework that never re-renders.
+
+Convenient shortcut functions for common DOM operations in KT.js.
+
+## Overview
+
+`@ktjs/shortcuts` provides convenient shorthand functions and utilities to make working with KT.js even more productive. It includes shortcuts for all HTML elements, form helpers, layout utilities, and the powerful `withDefaults` function for creating element factories with predefined properties.
+
+## Features
+
+- **Element Shortcuts**: Quick creation functions for all HTML elements
+  - `div`, `span`, `button`, `input`, `a`, etc.
+  - Same signature as `h` function but without the tag name
+  - Full TypeScript support with proper return types
+- **Form Helpers**: Shortcuts for form elements with better ergonomics
+  - Pre-configured form controls
+  - Input type helpers
+- **Layout Helpers**: Common layout patterns and containers
+- **`withDefaults`**: Create element factories with default properties
+  - Works with both `h` function and shortcut functions
+  - Supports nested defaults (defaults on top of defaults)
+  - Full type inference for all properties
+
+## Installation
+
+```bash
+pnpm add @ktjs/shortcuts @ktjs/core
+```
+
+## Basic Usage
+
+### Element Shortcuts
+
+```typescript
+import { div, span, button, input, h1, p } from '@ktjs/shortcuts';
+
+// Instead of h('div', ...)
+const container = div({ class: 'container' }, [
+  h1({}, 'Title'),
+  p({}, 'Description'),
+  button({ '@click': () => alert('Hi') }, 'Click me'),
+]);
+
+// Form elements
+const form = div('form-wrapper', [
+  input({ type: 'text', placeholder: 'Name' }),
+  input({ type: 'email', placeholder: 'Email' }),
+  button({ type: 'submit' }, 'Submit'),
+]);
+
+// Quick elements with just content
+const title = h1('Welcome');
+const text = span('Hello World');
+```
+
+### Available Element Shortcuts
+
+The following shortcuts are exported from `common.ts`:
+
+**Basic**: `div`, `span`, `label`, `a`, `img`
+
+**Text**: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`
+
+**Forms**: `form`, `input`, `button`, `select`, `option`
+
+**Lists**: `ul`, `ol`, `li`
+
+**Tables**: `table`, `thead`, `tbody`, `tr`, `th`, `td`
+
+Each function has the signature:
+
+```typescript
+function element(attributes?: KAttribute, content?: KContent): HTMLElement;
+function element(className: string, content?: KContent): HTMLElement;
+function element(content: KContent): HTMLElement;
+```
+
+## API Reference
+
+## Common Patterns
+
+### Component Composition
+
+```typescript
+import { div, button, input } from '@ktjs/shortcuts';
+
+// Create reusable components
+const createCard = (title: string, content: string) => {
+  return div('card', [div('card-title', title), div('card-content', content)]);
+};
+
+// Use throughout your app
+const ui = div('app', [createCard('Profile', 'User profile'), createCard('Settings', 'Settings')]);
+```
+
+### Form Builders
+
+```typescript
+import { input, button, div } from '@ktjs/shortcuts';
+
+const createTextInput = (placeholder: string, name: string) => {
+  return input({ type: 'text', class: 'form-control', placeholder, name });
+};
+
+const createSubmitButton = (text: string) => {
+  return button({ type: 'submit', class: 'btn-primary' }, text);
+};
+
+const loginForm = div('login-form', [
+  createTextInput('Username', 'username'),
+  createTextInput('Password', 'password'),
+  createSubmitButton('Login'),
+]);
+```
+
+## Type System
+
+The package includes comprehensive TypeScript definitions with:
+
+- Proper element type inference for all shortcuts
+- Attribute and content type checking
+- Event handler type hints
+- Support for conditional types in `withDefaults`
+
+## Performance
+
+- All shortcut functions are thin wrappers around the `h` function
+- Zero runtime overhead after bundling with tree-shaking
+- `withDefaults` creates minimal closure overhead
+- Native method caching inherited from `@ktjs/core`
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,109 @@
+import * as _ktjs_core from '@ktjs/core';
+
+declare const div: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLDivElement;
+declare const span: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLSpanElement;
+declare const label: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLLabelElement;
+declare const p: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLParagraphElement;
+declare const h1: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLHeadingElement;
+declare const h2: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLHeadingElement;
+declare const h3: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLHeadingElement;
+declare const h4: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLHeadingElement;
+declare const h5: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLHeadingElement;
+declare const h6: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLHeadingElement;
+declare const ul: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLUListElement;
+declare const ol: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLOListElement;
+declare const li: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLLIElement;
+declare const btn: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLButtonElement;
+declare const form: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLFormElement;
+declare const input: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLInputElement;
+declare const select: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLSelectElement;
+declare const option: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLOptionElement;
+declare const table: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLTableElement;
+declare const thead: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLTableSectionElement;
+declare const tbody: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLTableSectionElement;
+declare const tr: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLTableRowElement;
+declare const th: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLTableCellElement;
+declare const td: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLTableCellElement;
+declare const a: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLAnchorElement;
+declare const img: (attr?: _ktjs_core.KTRawAttr, content?: _ktjs_core.KTRawContent) => HTMLImageElement;
+
+type otherstring = string & {};
+
+/**
+ * Used to create enhanced HTML elements
+ */
+interface KTBaseAttribute {
+  [k: string]: any;
+
+  id?: string;
+  class?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+
+  type?:
+    | 'text'
+    | 'password'
+    | 'email'
+    | 'number'
+    | 'tel'
+    | 'url'
+    | 'search'
+    | 'date'
+    | 'datetime-local'
+    | 'time'
+    | 'month'
+    | 'week'
+    | 'color'
+    | 'range'
+    | 'file'
+    | 'checkbox'
+    | 'radio'
+    | 'hidden'
+    | 'submit'
+    | 'reset'
+    | 'button'
+    | 'image'
+    | otherstring;
+  for?: string;
+
+  name?: string;
+  value?: string;
+  valueAsDate?: Date;
+  valueAsNumber?: number;
+  label?: string;
+  disabled?: string;
+
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
+
+  selected?: boolean;
+  checked?: boolean;
+
+  action?: string;
+  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
+}
+
+type KTEventHandlersOrAttribute = {
+  [EventName in keyof HTMLElementEventMap]?: ((ev: HTMLElementEventMap[EventName]) => void) | string;
+};
+
+/**
+ * Event handlers with @ prefix (e.g., @click, @input)
+ * When key starts with @, it's always registered as an event handler
+ */
+type KTPrefixedEventHandlers = {
+  [EventName in keyof HTMLElementEventMap as `@${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
+};
+
+type KTAttribute = KTBaseAttribute & KTEventHandlersOrAttribute & KTPrefixedEventHandlers;
+
+/**
+ * Wrap `h`(or its shortcuts) with default attributes.
+ * - `defaultAttr.class` will be merged with the provided `class` attribute.
+ * @param func `h` or its shortcuts.
+ * @param defaultAttr default KTAttribute, must be an object.
+ * @returns new h function with default attributes.
+ */
+declare const withDefaults: <F extends (...args: any) => any>(func: F, defaultAttr: KTAttribute) => F;
+
+export { a, btn, div, form, h1, h2, h3, h4, h5, h6, img, input, label, li, ol, option, p, select, span, table, tbody, td, th, thead, tr, ul, withDefaults };

package/dist/index.iife.js

@@ -0,0 +1 @@
+var __ktjs_shortcuts__=function(t,o){"use strict";const n=t=>{const n=(n,e)=>o.h(t,n,e);return window.__ktjs__.mark(n,t),n},e=n("div"),s=n("span"),i=n("label"),r=n("p"),c=n("h1"),u=n("h2"),_=n("h3"),h=n("h4"),l=n("h5"),a=n("h6"),f=n("ul"),b=n("ol"),d=n("li"),p=n("button"),w=n("form"),y=n("input"),j=n("select"),g=n("option"),k=n("table"),m=n("thead"),v=n("tbody"),A=n("tr"),D=n("th"),q=n("td"),x=n("a"),z=n("img");return t.a=x,t.btn=p,t.div=e,t.form=w,t.h1=c,t.h2=u,t.h3=_,t.h4=h,t.h5=l,t.h6=a,t.img=z,t.input=y,t.label=i,t.li=d,t.ol=b,t.option=g,t.p=r,t.select=j,t.span=s,t.table=k,t.tbody=v,t.td=q,t.th=D,t.thead=m,t.tr=A,t.ul=f,t.withDefaults=(t,o)=>{"t"in t==!1&&window.__ktjs__.throws("withDefaults can only be used with h function or its alias"),null!==o&&"object"==typeof o||window.__ktjs__.throws("defaultAttr must be an object");const n="string"==typeof o.class?t=>{if("string"==typeof t){const n={...o};return n.class=t+" "+o.class,n}if(t&&"object"==typeof t){const n={...o,...t};return n.class=(t.class??"")+" "+o.class,n}}:t=>"string"==typeof t?{...o,class:t}:t&&"object"==typeof t?{...o,...t}:void 0;return"h"===t.t?(o,e,s)=>t(o,n(e),s):(o,e)=>t(n(o),e)},t}({},__ktjs_core__);

package/dist/index.legacy.js

@@ -0,0 +1 @@
+var __ktjs_shortcuts__=function(t,n){"use strict";var r=function(t){var r=function(r,o){return n.h(t,r,o)};return window.__ktjs__.mark(r,t),r},o=r("div"),e=r("span"),u=r("label"),i=r("p"),c=r("h1"),f=r("h2"),s=r("h3"),a=r("h4"),l=r("h5"),h=r("h6"),p=r("ul"),_=r("ol"),d=r("li"),b=r("button"),v=r("form"),j=r("input"),y=r("select"),w=r("option"),g=r("table"),k=r("thead"),m=r("tbody"),E=r("tr"),O=r("th"),S=r("td"),A=r("a"),D=r("img"),q=function(){return q=Object.assign||function(t){for(var n,r=1,o=arguments.length;r<o;r++)for(var e in n=arguments[r])Object.prototype.hasOwnProperty.call(n,e)&&(t[e]=n[e]);return t},q.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;return t.a=A,t.btn=b,t.div=o,t.form=v,t.h1=c,t.h2=f,t.h3=s,t.h4=a,t.h5=l,t.h6=h,t.img=D,t.input=j,t.label=u,t.li=d,t.ol=_,t.option=w,t.p=i,t.select=y,t.span=e,t.table=g,t.tbody=m,t.td=S,t.th=O,t.thead=k,t.tr=E,t.ul=p,t.withDefaults=function(t,n){"t"in t==!1&&window.__ktjs__.throws("withDefaults can only be used with h function or its alias"),null!==n&&"object"==typeof n||window.__ktjs__.throws("defaultAttr must be an object");var r="string"==typeof n.class?function(t){var r,o;return"string"==typeof t?((o=q({},n)).class=t+" "+n.class,o):t&&"object"==typeof t?((o=q(q({},n),t)).class=(null!==(r=t.class)&&void 0!==r?r:"")+" "+n.class,o):void 0}:function(t){return"string"==typeof t?q(q({},n),{class:t}):t&&"object"==typeof t?q(q({},n),t):void 0};return"h"===t.t?function(n,o,e){return t(n,r(o),e)}:function(n,o){return t(r(n),o)}},t}({},__ktjs_core__);

package/dist/index.mjs

@@ -0,0 +1 @@
+import{h as t}from"@ktjs/core";const o=o=>{const e=(e,n)=>t(o,e,n);return window.__ktjs__.mark(e,o),e},e=o("div"),n=o("span"),i=o("label"),r=o("p"),s=o("h1"),c=o("h2"),l=o("h3"),f=o("h4"),h=o("h5"),u=o("h6"),a=o("ul"),p=o("ol"),b=o("li"),d=o("button"),w=o("form"),y=o("input"),j=o("select"),m=o("option"),_=o("table"),g=o("thead"),k=o("tbody"),v=o("tr"),x=o("th"),A=o("td"),D=o("a"),q=o("img"),z=(t,o)=>{"t"in t==!1&&window.__ktjs__.throws("withDefaults can only be used with h function or its alias"),null!==o&&"object"==typeof o||window.__ktjs__.throws("defaultAttr must be an object");const e="string"==typeof o.class?t=>{if("string"==typeof t){const e={...o};return e.class=t+" "+o.class,e}if(t&&"object"==typeof t){const e={...o,...t};return e.class=(t.class??"")+" "+o.class,e}}:t=>"string"==typeof t?{...o,class:t}:t&&"object"==typeof t?{...o,...t}:void 0;return"h"===t.t?(o,n,i)=>t(o,e(n),i):(o,n)=>t(e(o),n)};export{D as a,d as btn,e as div,w as form,s as h1,c as h2,l as h3,f as h4,h as h5,u as h6,q as img,y as input,i as label,b as li,p as ol,m as option,r as p,j as select,n as span,_ as table,k as tbody,A as td,x as th,g as thead,v as tr,a as ul,z as withDefaults};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@ktjs/shortcuts",
+  "version": "0.5.0",
+  "description": "Shortcut functions for kt.js - common DOM operations",
+  "type": "module",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.mjs",
+    "default": "./dist/index.mjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "dom",
+    "shortcuts",
+    "utilities",
+    "web"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Kasukabe Tsumugi",
+    "email": "futami16237@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/baendlorel/kt.js",
+    "directory": "packages/shortcuts"
+  },
+  "dependencies": {
+    "@ktjs/core": "0.5.0"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "dev": "rollup -c rollup.config.mjs -w"
+  }
+}