Merge pull request #20464 from NullVoxPopuli/qiawan/reexport_uniq_ids

[FEATURE] Create public import for uniqueId helper #20171

packages/@ember/-internals/glimmer/index.ts

@@ -481,3 +481,4 @@ export {
   setComponentManager,
 } from './lib/utils/managers';
 export { isSerializationFirstNode } from './lib/utils/serialization-first-node-helpers';
+export { uniqueId } from './lib/helpers/unique-id';

packages/@ember/-internals/glimmer/lib/helpers/unique-id.ts

@@ -41,7 +41,7 @@ export default internalHelper((): Reference<string> => {
 // implementation details into an intimate API. It also ensures that the UUID
 // always starts with a letter, to avoid creating invalid IDs with a numeric
 // digit at the start.
-function uniqueId() {
+export function uniqueId(): string {
   // @ts-expect-error this one-liner abuses weird JavaScript semantics that
   // TypeScript (legitimately) doesn't like, but they're nonetheless valid and
   // specced.

packages/@ember/-internals/glimmer/tests/integration/helpers/unique-id-test.js

@@ -1,6 +1,43 @@
-import { RenderingTestCase, strip, moduleFor, runTask } from 'internal-test-helpers';
+import {
+  AbstractTestCase,
+  RenderingTestCase,
+  strip,
+  moduleFor,
+  runTask,
+} from 'internal-test-helpers';
 import { setProperties } from '@ember/object';
+import { uniqueId, invokeHelper } from '@ember/helper';
+import { getValue } from '@glimmer/validator';
 
+moduleFor(
+  'Helpers test: {{unique-id}} JS',
+  class extends AbstractTestCase {
+    constructor(assert) {
+      super(assert);
+      this.assert = assert;
+    }
+    ['@test it can be invoked as a JS function']() {
+      let first = uniqueId();
+      let second = uniqueId();
+
+      this.assert.notStrictEqual(
+        first,
+        second,
+        `different invocations of uniqueId should produce different values`
+      );
+    }
+    ['@test it can be invoked via invokeHelper']() {
+      let first = getValue(invokeHelper({}, uniqueId));
+      let second = getValue(invokeHelper({}, uniqueId));
+
+      this.assert.notStrictEqual(
+        first,
+        second,
+        `different invocations of uniqueId should produce different values`
+      );
+    }
+  }
+);
 moduleFor(
   'Helpers test: {{unique-id}}',
   class extends RenderingTestCase {

packages/@ember/helper/index.ts

@@ -11,6 +11,7 @@ import {
   get as glimmerGet,
   fn as glimmerFn,
 } from '@glimmer/runtime';
+import { uniqueId as glimmerUniqueId } from '@ember/-internals/glimmer';
 import { type Opaque } from '@ember/-internals/utility-types';
 
 /**
@@ -468,4 +469,26 @@ export interface GetHelper extends Opaque<'helper:get'> {}
  */
 export const fn = glimmerFn as FnHelper;
 export interface FnHelper extends Opaque<'helper:fn'> {}
+
+/**
+ * Use the {{uniqueId}} helper to generate a unique ID string suitable for use as
+ * an ID attribute in the DOM.
+ *
+ * Each invocation of {{uniqueId}} will return a new, unique ID string.
+ * You can use the `let` helper to create an ID that can be reused within a template.
+ *
+ * ```js
+ * import { uniqueId } from '@ember/helper';
+ *
+ * <template>
+ *   {{#let (uniqueId) as |emailId|}}
+ *     <label for={{emailId}}>Email address</label>
+ *     <input id={{emailId}} type="email" />
+ *   {{/let}}
+ * </template>
+ * ```
+ */
+export const uniqueId = glimmerUniqueId;
+export type UniqueIdHelper = typeof uniqueId;
+
 /* eslint-enable @typescript-eslint/no-empty-interface */

type-tests/@ember/helper-tests.ts

@@ -9,6 +9,8 @@ import {
   GetHelper,
   hash,
   HashHelper,
+  uniqueId,
+  UniqueIdHelper,
 } from '@ember/helper';
 import { expectTypeOf } from 'expect-type';
 
@@ -17,3 +19,4 @@ expectTypeOf(concat).toEqualTypeOf<ConcatHelper>();
 expectTypeOf(fn).toEqualTypeOf<FnHelper>();
 expectTypeOf(get).toEqualTypeOf<GetHelper>();
 expectTypeOf(hash).toEqualTypeOf<HashHelper>();
+expectTypeOf(uniqueId).toEqualTypeOf<UniqueIdHelper>();