Interactivity API: Move all utils inside utils.ts (#61721)

* Move utils file inside folder

* Revert "Move utils file inside folder"

This reverts commit 5f669c1.

* Move all utils inside `utils.ts`

* Fix utils tests and move them to TS

Co-authored-by: DAreRodz <darerodz@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>

packages/interactivity/src/directives.tsx

@@ -13,10 +13,8 @@ import { deepSignal, peek, type DeepSignal } from 'deepsignal';
 /**
  * Internal dependencies
  */
-import { useWatch, useInit } from './utils';
+import { useWatch, useInit, kebabToCamelCase, warn } from './utils';
 import { directive, getScope, getEvaluate } from './hooks';
-import { kebabToCamelCase } from './utils/kebab-to-camelcase';
-import { warn } from './utils/warn';
 
 // Assigned objects should be ignore during proxification.
 const contextAssignedObjects = new WeakMap();

packages/interactivity/src/hooks.tsx

@@ -20,7 +20,7 @@ import type { VNode, Context, RefObject } from 'preact';
  * Internal dependencies
  */
 import { store, stores, universalUnlock } from './store';
-import { warn } from './utils/warn';
+import { warn } from './utils';
 interface DirectiveEntry {
 	value: string | object;
 	namespace: string;

packages/interactivity/src/utils/test/utils.js → packages/interactivity/src/test/utils.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { kebabToCamelCase } from '../kebab-to-camelcase';
+import { kebabToCamelCase } from '../utils';
 
 describe( 'kebabToCamelCase', () => {
 	it( 'should work exactly as the PHP version', async () => {

packages/interactivity/src/utils.ts

@@ -290,3 +290,48 @@ export const createRootFragment = (
 		},
 	} );
 };
+
+/**
+ * Transforms a kebab-case string to camelCase.
+ *
+ * @param str The kebab-case string to transform to camelCase.
+ * @return The transformed camelCase string.
+ */
+export function kebabToCamelCase( str: string ): string {
+	return str
+		.replace( /^-+|-+$/g, '' )
+		.toLowerCase()
+		.replace( /-([a-z])/g, function ( _match, group1: string ) {
+			return group1.toUpperCase();
+		} );
+}
+
+const logged: Set< string > = new Set();
+
+/**
+ * Shows a warning with `message` if environment is not `production`.
+ *
+ * Based on the `@wordpress/warning` package.
+ *
+ * @param message Message to show in the warning.
+ */
+export const warn = ( message: string ): void => {
+	// @ts-expect-error
+	if ( typeof SCRIPT_DEBUG !== 'undefined' && SCRIPT_DEBUG === true ) {
+		if ( logged.has( message ) ) {
+			return;
+		}
+
+		// eslint-disable-next-line no-console
+		console.warn( message );
+
+		// Throwing an error and catching it immediately to improve debugging
+		// A consumer can use 'pause on caught exceptions'
+		try {
+			throw Error( message );
+		} catch ( e ) {
+			// Do nothing.
+		}
+		logged.add( message );
+	}
+};

packages/interactivity/src/vdom.ts

@@ -6,7 +6,7 @@ import { h, type ComponentChild, type JSX } from 'preact';
  * Internal dependencies
  */
 import { directivePrefix as p } from './constants';
-import { warn } from './utils/warn';
+import { warn } from './utils';
 
 const ignoreAttr = `data-${ p }-ignore`;
 const islandAttr = `data-${ p }-interactive`;

test/unit/jest.config.js

@@ -40,7 +40,7 @@ module.exports = {
 		'^.+\\.[jt]sx?$': '<rootDir>/test/unit/scripts/babel-transformer.js',
 	},
 	transformIgnorePatterns: [
-		'/node_modules/(?!(docker-compose|yaml)/)',
+		'/node_modules/(?!(docker-compose|yaml|preact|@preact|deepsignal)/)',
 		'\\.pnp\\.[^\\/]+$',
 	],
 	snapshotSerializers: [