ripple 0.2.61 → 0.2.63

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.61",
+  "version": "0.2.63",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/3-transform/index.js

@@ -1089,6 +1089,13 @@ const visitors = {
     context.state.init.push(b.block(statements));
   },
 
+  TSAsExpression(node, context) {
+    if (!context.state.to_ts) {
+      return context.visit(node.expression);
+    }
+    return context.next();
+  },
+
   TryStatement(node, context) {
     if (!is_inside_component(context)) {
       context.next();

package/src/runtime/index.js

@@ -63,3 +63,5 @@ export { user_effect as effect } from './internal/client/blocks.js';
 export { Portal } from './internal/client/portal.js';
 
 export { ref_prop as createRefKey } from './internal/client/runtime.js';
+
+export { on } from './internal/client/events.js';

package/src/runtime/internal/client/events.js

@@ -6,7 +6,7 @@ import {
   set_active_reaction,
   set_tracking,
   tracking,
-} from './runtime';
+} from './runtime.js';
 import { array_from, define_property, is_array } from './utils.js';
 
 /** @type {Set<string>} */
@@ -15,6 +15,20 @@ var all_registered_events = new Set();
 /** @type {Set<(events: Array<string>) => void>} */
 var root_event_handles = new Set();
 
+/**
+ * @param {EventTarget} element
+ * @param {string} type
+ * @param {EventListener} handler
+ * @param {AddEventListenerOptions} [options]
+ */
+export function on(element, type, handler, options = {}) {
+	var target_handler = create_event(type.toLowerCase(), element, handler, options);
+
+	return () => {
+		element.removeEventListener(type, target_handler, options);
+	};
+}
+
 /**
  * @this {EventTarget}
  * @param {Event} event
@@ -160,8 +174,6 @@ export function handle_event_propagation(event) {
  * @param {AddEventListenerOptions} [options]
  */
 function create_event(event_name, dom, handler, options = {}) {
-  var block = active_block;
-
   function target_handler(/** @type {Event} */ event) {
     var previous_block = active_block;
     var previous_reaction = active_reaction;

package/src/runtime/internal/client/try.js

@@ -11,7 +11,7 @@ import {
   set_active_reaction,
   set_tracking,
   tracking,
-} from './runtime';
+} from './runtime.js';
 
 export function try_block(node, fn, catch_fn, pending_fn = null) {
   var anchor = node;

package/types/index.d.ts

@@ -72,3 +72,38 @@ export declare function createRefKey(): symbol;
 type Tracked<V> = { '#v': V };
 
 export declare function track<V>(value?: V | (() => V)): Tracked<V>;
+
+export function on<Type extends keyof WindowEventMap>(
+	window: Window,
+	type: Type,
+	handler: (this: Window, event: WindowEventMap[Type]) => any,
+	options?: AddEventListenerOptions | undefined
+): () => void;
+
+export function on<Type extends keyof DocumentEventMap>(
+	document: Document,
+	type: Type,
+	handler: (this: Document, event: DocumentEventMap[Type]) => any,
+	options?: AddEventListenerOptions | undefined
+): () => void;
+
+export function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
+	element: Element,
+	type: Type,
+	handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
+	options?: AddEventListenerOptions | undefined
+): () => void;
+
+export function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
+	element: Element,
+	type: Type,
+	handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
+	options?: AddEventListenerOptions | undefined
+): () => void;
+
+export function on(
+	element: EventTarget,
+	type: string,
+	handler: EventListener,
+	options?: AddEventListenerOptions | undefined
+): () => void;