@arcanejs/protocol 0.3.0 → 0.4.0

package/dist/core.d.mts

@@ -0,0 +1,134 @@
+import { BaseComponentProto, AnyComponentProto, BaseClientComponentMessage } from './index.mjs';
+import { GroupComponentStyle } from './styles.mjs';
+import '@arcanejs/diff';
+
+type CoreNamespace = 'core';
+type Gradient = Array<{
+    /**
+     * CSS color value
+     */
+    color: string;
+    /**
+     * Position of the color in the gradient, between 0 and 1
+     */
+    position: number;
+}>;
+type ButtonComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'button';
+    text: string;
+    icon?: string;
+    state: {
+        state: 'normal' | 'pressed';
+    } | {
+        state: 'error';
+        error: string;
+    };
+};
+type GroupCollapsedState = 'open' | 'closed';
+type DefaultGroupCollapsedState = GroupCollapsedState | 'auto';
+type GroupHeaderComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'group-header';
+    children: AnyComponentProto[];
+};
+type GroupComponent = BaseComponentProto<CoreNamespace> & GroupComponentStyle & {
+    component: 'group';
+    title?: string;
+    children: AnyComponentProto[];
+    headers?: GroupHeaderComponent[];
+    labels?: Array<{
+        text: string;
+    }>;
+    editableTitle: boolean;
+    /**
+     * If set, allows the group to be collapsed,
+     * by default set to the given state
+     */
+    defaultCollapsibleState?: DefaultGroupCollapsedState;
+};
+type LabelComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'label';
+    bold?: boolean;
+    text: string;
+};
+type RectComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'rect';
+    color: string;
+    /**
+     * Set to true if the component should increase its size to fill the available space.
+     */
+    grow?: boolean;
+};
+type SliderButtonComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'slider_button';
+    min: number;
+    max: number;
+    step: number;
+    value: number | null;
+    gradient?: Gradient;
+    /**
+     * Set to true if the component should increase its size to fill the available space.
+     */
+    grow?: boolean;
+};
+type SwitchComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'switch';
+    state: 'on' | 'off';
+};
+type TabComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'tab';
+    name: string;
+    child?: AnyComponentProto;
+};
+type TabsComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'tabs';
+    tabs: TabComponent[];
+};
+type TextInputComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'text-input';
+    value: string;
+};
+type TimelineState = {
+    state: 'playing';
+    totalTimeMillis: number;
+    effectiveStartTime: number;
+    speed: number;
+} | {
+    state: 'stopped';
+    totalTimeMillis: number;
+    currentTimeMillis: number;
+};
+type TimelineComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'timeline';
+    state: TimelineState;
+    title?: string;
+    subtitles?: string[];
+    source?: {
+        name: string;
+    };
+};
+type CoreComponent = ButtonComponent | GroupComponent | GroupHeaderComponent | LabelComponent | RectComponent | SliderButtonComponent | SwitchComponent | TabComponent | TabsComponent | TextInputComponent | TimelineComponent;
+declare const isCoreComponent: (component: AnyComponentProto) => component is CoreComponent;
+type ButtonPressMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'button';
+};
+type GroupTitleChangeMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'group';
+    title: string;
+};
+type SliderButtonUpdateMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'slider_button';
+    value: number;
+};
+type SwitchToggleMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'switch';
+};
+type TextInputUpdateMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'text-input';
+    value: string;
+};
+type CoreComponentMessage = ButtonPressMessage | GroupTitleChangeMessage | SliderButtonUpdateMessage | SwitchToggleMessage | TextInputUpdateMessage;
+declare const isCoreComponentMessage: <C extends "button" | "group" | "slider_button" | "switch" | "text-input">(message: BaseClientComponentMessage<string>, component: C) => message is CoreComponentMessage & {
+    component: C;
+};
+
+export { type ButtonComponent, type ButtonPressMessage, type CoreComponent, type CoreComponentMessage, type CoreNamespace, type DefaultGroupCollapsedState, type Gradient, type GroupCollapsedState, type GroupComponent, type GroupHeaderComponent, type GroupTitleChangeMessage, type LabelComponent, type RectComponent, type SliderButtonComponent, type SliderButtonUpdateMessage, type SwitchComponent, type SwitchToggleMessage, type TabComponent, type TabsComponent, type TextInputComponent, type TextInputUpdateMessage, type TimelineComponent, type TimelineState, isCoreComponent, isCoreComponentMessage };

package/dist/core.d.ts

@@ -0,0 +1,134 @@
+import { BaseComponentProto, AnyComponentProto, BaseClientComponentMessage } from './index.js';
+import { GroupComponentStyle } from './styles.js';
+import '@arcanejs/diff';
+
+type CoreNamespace = 'core';
+type Gradient = Array<{
+    /**
+     * CSS color value
+     */
+    color: string;
+    /**
+     * Position of the color in the gradient, between 0 and 1
+     */
+    position: number;
+}>;
+type ButtonComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'button';
+    text: string;
+    icon?: string;
+    state: {
+        state: 'normal' | 'pressed';
+    } | {
+        state: 'error';
+        error: string;
+    };
+};
+type GroupCollapsedState = 'open' | 'closed';
+type DefaultGroupCollapsedState = GroupCollapsedState | 'auto';
+type GroupHeaderComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'group-header';
+    children: AnyComponentProto[];
+};
+type GroupComponent = BaseComponentProto<CoreNamespace> & GroupComponentStyle & {
+    component: 'group';
+    title?: string;
+    children: AnyComponentProto[];
+    headers?: GroupHeaderComponent[];
+    labels?: Array<{
+        text: string;
+    }>;
+    editableTitle: boolean;
+    /**
+     * If set, allows the group to be collapsed,
+     * by default set to the given state
+     */
+    defaultCollapsibleState?: DefaultGroupCollapsedState;
+};
+type LabelComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'label';
+    bold?: boolean;
+    text: string;
+};
+type RectComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'rect';
+    color: string;
+    /**
+     * Set to true if the component should increase its size to fill the available space.
+     */
+    grow?: boolean;
+};
+type SliderButtonComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'slider_button';
+    min: number;
+    max: number;
+    step: number;
+    value: number | null;
+    gradient?: Gradient;
+    /**
+     * Set to true if the component should increase its size to fill the available space.
+     */
+    grow?: boolean;
+};
+type SwitchComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'switch';
+    state: 'on' | 'off';
+};
+type TabComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'tab';
+    name: string;
+    child?: AnyComponentProto;
+};
+type TabsComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'tabs';
+    tabs: TabComponent[];
+};
+type TextInputComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'text-input';
+    value: string;
+};
+type TimelineState = {
+    state: 'playing';
+    totalTimeMillis: number;
+    effectiveStartTime: number;
+    speed: number;
+} | {
+    state: 'stopped';
+    totalTimeMillis: number;
+    currentTimeMillis: number;
+};
+type TimelineComponent = BaseComponentProto<CoreNamespace> & {
+    component: 'timeline';
+    state: TimelineState;
+    title?: string;
+    subtitles?: string[];
+    source?: {
+        name: string;
+    };
+};
+type CoreComponent = ButtonComponent | GroupComponent | GroupHeaderComponent | LabelComponent | RectComponent | SliderButtonComponent | SwitchComponent | TabComponent | TabsComponent | TextInputComponent | TimelineComponent;
+declare const isCoreComponent: (component: AnyComponentProto) => component is CoreComponent;
+type ButtonPressMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'button';
+};
+type GroupTitleChangeMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'group';
+    title: string;
+};
+type SliderButtonUpdateMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'slider_button';
+    value: number;
+};
+type SwitchToggleMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'switch';
+};
+type TextInputUpdateMessage = BaseClientComponentMessage<CoreNamespace> & {
+    component: 'text-input';
+    value: string;
+};
+type CoreComponentMessage = ButtonPressMessage | GroupTitleChangeMessage | SliderButtonUpdateMessage | SwitchToggleMessage | TextInputUpdateMessage;
+declare const isCoreComponentMessage: <C extends "button" | "group" | "slider_button" | "switch" | "text-input">(message: BaseClientComponentMessage<string>, component: C) => message is CoreComponentMessage & {
+    component: C;
+};
+
+export { type ButtonComponent, type ButtonPressMessage, type CoreComponent, type CoreComponentMessage, type CoreNamespace, type DefaultGroupCollapsedState, type Gradient, type GroupCollapsedState, type GroupComponent, type GroupHeaderComponent, type GroupTitleChangeMessage, type LabelComponent, type RectComponent, type SliderButtonComponent, type SliderButtonUpdateMessage, type SwitchComponent, type SwitchToggleMessage, type TabComponent, type TabsComponent, type TextInputComponent, type TextInputUpdateMessage, type TimelineComponent, type TimelineState, isCoreComponent, isCoreComponentMessage };

package/dist/core.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/core.ts
+var isCoreComponent = (component) => component.namespace === "core";
+var isCoreComponentMessage = (message, component) => message.namespace === "core" && message.component === component;
+
+
+
+exports.isCoreComponent = isCoreComponent; exports.isCoreComponentMessage = isCoreComponentMessage;

package/dist/core.mjs

@@ -0,0 +1,7 @@
+// src/core.ts
+var isCoreComponent = (component) => component.namespace === "core";
+var isCoreComponentMessage = (message, component) => message.namespace === "core" && message.component === component;
+export {
+  isCoreComponent,
+  isCoreComponentMessage
+};

package/dist/index.d.mts

@@ -0,0 +1,25 @@
+import { Diff } from '@arcanejs/diff';
+
+type BaseComponentProto<Namespace extends string> = {
+    key: number;
+    namespace: Namespace;
+};
+type AnyComponentProto = BaseComponentProto<string>;
+type SendTreeMsg = {
+    type: 'tree-full';
+    root: BaseComponentProto<string>;
+};
+type UpdateTreeMsg = {
+    type: 'tree-diff';
+    diff: Diff<BaseComponentProto<string>>;
+};
+type ServerMessage = SendTreeMsg | UpdateTreeMsg;
+type BaseClientComponentMessage<Namespace extends string> = {
+    type: 'component-message';
+    namespace: Namespace;
+    componentKey: number;
+};
+type AnyClientComponentMessage = BaseClientComponentMessage<string>;
+type ClientMessage = AnyClientComponentMessage;
+
+export type { AnyClientComponentMessage, AnyComponentProto, BaseClientComponentMessage, BaseComponentProto, ClientMessage, SendTreeMsg, ServerMessage, UpdateTreeMsg };

package/dist/index.d.ts

@@ -1,143 +1,25 @@
 import { Diff } from '@arcanejs/diff';
-import { GroupComponentStyle } from './styles';
-type BaseComponent = {
+
+type BaseComponentProto<Namespace extends string> = {
     key: number;
+    namespace: Namespace;
 };
-export type Gradient = Array<{
-    /**
-     * CSS color value
-     */
-    color: string;
-    /**
-     * Position of the color in the gradient, between 0 and 1
-     */
-    position: number;
-}>;
-export type ButtonComponent = BaseComponent & {
-    component: 'button';
-    text: string;
-    icon?: string;
-    state: {
-        state: 'normal' | 'pressed';
-    } | {
-        state: 'error';
-        error: string;
-    };
-};
-export type GroupCollapsedState = 'open' | 'closed';
-export type DefaultGroupCollapsedState = GroupCollapsedState | 'auto';
-export type GroupHeaderComponent = BaseComponent & {
-    component: 'group-header';
-    children: Component[];
-};
-export type GroupComponent = BaseComponent & GroupComponentStyle & {
-    component: 'group';
-    title?: string;
-    children: Component[];
-    headers?: GroupHeaderComponent[];
-    labels?: Array<{
-        text: string;
-    }>;
-    editableTitle: boolean;
-    /**
-     * If set, allows the group to be collapsed,
-     * by default set to the given state
-     */
-    defaultCollapsibleState?: DefaultGroupCollapsedState;
-};
-export type LabelComponent = BaseComponent & {
-    component: 'label';
-    bold?: boolean;
-    text: string;
-};
-export type RectComponent = BaseComponent & {
-    component: 'rect';
-    color: string;
-    /**
-     * Set to true if the component should increase its size to fill the available space.
-     */
-    grow?: boolean;
-};
-export type SliderButtonComponent = BaseComponent & {
-    component: 'slider_button';
-    min: number;
-    max: number;
-    step: number;
-    value: number | null;
-    gradient?: Gradient;
-    /**
-     * Set to true if the component should increase its size to fill the available space.
-     */
-    grow?: boolean;
-};
-export type SwitchComponent = BaseComponent & {
-    component: 'switch';
-    state: 'on' | 'off';
-};
-export type TabComponent = BaseComponent & {
-    component: 'tab';
-    name: string;
-    child?: Component;
-};
-export type TabsComponent = BaseComponent & {
-    component: 'tabs';
-    tabs: TabComponent[];
-};
-export type TextInputComponent = BaseComponent & {
-    component: 'text-input';
-    value: string;
-};
-export type TimelineState = {
-    state: 'playing';
-    totalTimeMillis: number;
-    effectiveStartTime: number;
-    speed: number;
-} | {
-    state: 'stopped';
-    totalTimeMillis: number;
-    currentTimeMillis: number;
-};
-export type TimelineComponent = BaseComponent & {
-    component: 'timeline';
-    state: TimelineState;
-    title?: string;
-    subtitles?: string[];
-    source?: {
-        name: string;
-    };
-};
-export type Component = ButtonComponent | GroupHeaderComponent | GroupComponent | LabelComponent | RectComponent | SliderButtonComponent | SwitchComponent | TabComponent | TabsComponent | TextInputComponent | TimelineComponent;
-export type SendTreeMsg = {
+type AnyComponentProto = BaseComponentProto<string>;
+type SendTreeMsg = {
     type: 'tree-full';
-    root: GroupComponent;
+    root: BaseComponentProto<string>;
 };
-export type UpdateTreeMsg = {
+type UpdateTreeMsg = {
     type: 'tree-diff';
-    diff: Diff<GroupComponent>;
+    diff: Diff<BaseComponentProto<string>>;
 };
-export type ServerMessage = SendTreeMsg | UpdateTreeMsg;
-export type BaseClientComponentMessage = {
+type ServerMessage = SendTreeMsg | UpdateTreeMsg;
+type BaseClientComponentMessage<Namespace extends string> = {
     type: 'component-message';
+    namespace: Namespace;
     componentKey: number;
 };
-export type ButtonPressMessage = BaseClientComponentMessage & {
-    component: 'button';
-};
-export type GroupTitleChangeMessage = BaseClientComponentMessage & {
-    component: 'group';
-    title: string;
-};
-export type SliderButtonUpdateMessage = BaseClientComponentMessage & {
-    component: 'slider_button';
-    value: number;
-};
-export type SwitchToggleMessage = BaseClientComponentMessage & {
-    component: 'switch';
-};
-export type TextInputUpdateMessage = BaseClientComponentMessage & {
-    component: 'text-input';
-    value: string;
-};
-export type ClientComponentMessage = ButtonPressMessage | GroupTitleChangeMessage | SliderButtonUpdateMessage | SwitchToggleMessage | TextInputUpdateMessage;
-export type ClientMessage = ClientComponentMessage;
-export {};
+type AnyClientComponentMessage = BaseClientComponentMessage<string>;
+type ClientMessage = AnyClientComponentMessage;
+
+export type { AnyClientComponentMessage, AnyComponentProto, BaseClientComponentMessage, BaseComponentProto, ClientMessage, SendTreeMsg, ServerMessage, UpdateTreeMsg };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/logging.d.mts

@@ -0,0 +1,8 @@
+type Logger = {
+    debug: (message: string, ...args: unknown[]) => void;
+    info: (message: string, ...args: unknown[]) => void;
+    warn: (message: string, ...args: unknown[]) => void;
+    error: (message: string, ...args: unknown[]) => void;
+};
+
+export type { Logger };

package/dist/logging.d.ts

@@ -1,6 +1,8 @@
-export type Logger = {
+type Logger = {
     debug: (message: string, ...args: unknown[]) => void;
     info: (message: string, ...args: unknown[]) => void;
     warn: (message: string, ...args: unknown[]) => void;
     error: (message: string, ...args: unknown[]) => void;
 };
+
+export type { Logger };

package/dist/logging.js

@@ -0,0 +1 @@
+"use strict";

package/dist/styles.d.mts

@@ -0,0 +1,39 @@
+/**
+ * Styling options for the [[Group]] component
+ *
+ * Default Styling: [[GROUP_DEFAULT_STYLE]]
+ */
+type GroupComponentStyle = {
+    /**
+     * In which way should child components of this group be organized?
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * If true, when the group runs out of vertical or horizontal space, child
+     * components will be wrapped, and start to be arranged on additional columns
+     * or rows.
+     */
+    wrap?: boolean;
+    /**
+     * If true, this group will have a border and a different color background
+     * to its parent.
+     *
+     * This allows you to add a distinctive border between components,
+     * without needing to set a header, add header components,
+     * or make it collapsible.
+     */
+    border?: true;
+};
+/**
+ * Styling options for the [[Label]] component
+ *
+ * Default Styling: [[LABEL_DEFAULT_STYLE]]
+ */
+type LabelComponentStyle = {
+    /**
+     * If true, make the text of this label bold
+     */
+    bold?: boolean;
+};
+
+export type { GroupComponentStyle, LabelComponentStyle };

package/dist/styles.d.ts

@@ -3,7 +3,7 @@
  *
  * Default Styling: [[GROUP_DEFAULT_STYLE]]
  */
-export type GroupComponentStyle = {
+type GroupComponentStyle = {
     /**
      * In which way should child components of this group be organized?
      */
@@ -29,9 +29,11 @@ export type GroupComponentStyle = {
  *
  * Default Styling: [[LABEL_DEFAULT_STYLE]]
  */
-export type LabelComponentStyle = {
+type LabelComponentStyle = {
     /**
      * If true, make the text of this label bold
      */
     bold?: boolean;
 };
+
+export type { GroupComponentStyle, LabelComponentStyle };

package/dist/styles.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcanejs/protocol",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": false,
   "description": "The JSON protocol types for the @arcanejs Toolkit",
   "license": "MIT",
@@ -17,6 +17,12 @@
       "@arcanejs/source": "./src/index.ts",
       "types": "./dist/index.d.ts"
     },
+    "./core": {
+      "@arcanejs/source": "./src/core.ts",
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.mjs",
+      "require": "./dist/core.js"
+    },
     "./logging": {
       "@arcanejs/source": "./src/logging.ts",
       "types": "./dist/logging.d.ts"
@@ -32,8 +38,9 @@
     "@types/jest": "^29.5.12",
     "check-export-map": "^1.3.1",
     "eslint": "^8.57.0",
+    "tsup": "^8.1.0",
     "typescript": "^5.3.3",
-    "@arcanejs/diff": "^0.4.0",
+    "@arcanejs/diff": "^0.5.1",
     "@arcanejs/eslint-config": "^0.0.0",
     "@arcanejs/typescript-config": "^0.0.0"
   },
@@ -45,6 +52,6 @@
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
-    "build": "rm -rf dist && tsc && check-export-map"
+    "build": "rm -rf dist && tsup && check-export-map"
   }
 }