chore: Bikeshed Translation Identifiers (#22)

* - Since everything else is so broadly categorized, might as well do the same here

* - Ditto

* - Make translation lookup automagical to enforce consistency

* - Confirm prompts should always be dismissible, they're yes/No

* - Updated about prompt to use proper nomenclature

* - Updated form prompt to automagically handle translation namespacing based on interface name

* - Updated existing prompts accordingly

* - Formatting

* - Fixed old export

packages/@svelte-in-motion-builtin-extensions/src/extensions/commands.ts

@@ -112,7 +112,6 @@ export const EXTENSION_COMMANDS = define_extension({
                 args = (
                     await prompts.prompt_form<any>({
                         is_dismissible: true,
-                        title: `commands-${command.identifier}-label`,
 
                         type: command.type,
                     })

packages/@svelte-in-motion-builtin-extensions/src/extensions/export.ts

@@ -3,54 +3,29 @@ import {get} from "svelte/store";
 import type {IAppContext, IKeybindEvent} from "@svelte-in-motion/extension";
 import {define_extension} from "@svelte-in-motion/extension";
 import {ICodecNames, IPixelFormatNames} from "@svelte-in-motion/encoding";
-import {Default, Description, Label, Minimum, Namespace, Placeholder} from "@svelte-in-motion/type";
+import {Default, Minimum} from "@svelte-in-motion/type";
 import {typeOf} from "@svelte-in-motion/type";
 import {PromptDismissError, download_blob, download_buffer} from "@svelte-in-motion/utilities";
 
 import {NoEditorUserError, NoPreviewUserError, NoWorkspaceUserError} from "../util/errors";
 import {zip_frames} from "../util/io";
 
-interface IFramesExportConfiguration {
-    start: number &
-        Default<0> &
-        Minimum<0> &
-        Label<"ui-prompt-form-frames-export-start-label"> &
-        Description<"ui-prompt-form-frames-export-start-description">;
-
-    end: number &
-        Default<0> &
-        Minimum<0> &
-        Label<"ui-prompt-form-frames-export-end-label"> &
-        Description<"ui-prompt-form-frames-export-end-description">;
+interface FramesExport {
+    start: number & Default<0> & Minimum<0>;
+
+    end: number & Default<0> & Minimum<0>;
 }
 
-interface IVideoExportConfiguration {
-    start: number &
-        Default<0> &
-        Minimum<0> &
-        Label<"ui-prompt-form-video-export-start-label"> &
-        Description<"ui-prompt-form-video-export-start-description">;
-
-    end: number &
-        Default<0> &
-        Minimum<0> &
-        Label<"ui-prompt-form-video-export-end-label"> &
-        Description<"ui-prompt-form-video-export-end-description">;
-
-    codec: ICodecNames &
-        Label<"ui-prompt-form-video-export-codec-label"> &
-        Placeholder<"ui-prompt-form-video-export-codec-placeholder"> &
-        Namespace<"ui-prompt-form-video-export-codec-${identifier}-label">;
-
-    crf: number &
-        Minimum<0> &
-        Label<"ui-prompt-form-video-export-crf-label"> &
-        Description<"ui-prompt-form-video-export-crf-description">;
-
-    pixel_format: IPixelFormatNames &
-        Label<"ui-prompt-form-video-export-pixel_format-label"> &
-        Placeholder<"ui-prompt-form-video-export-pixel_format-placeholder"> &
-        Namespace<"ui-prompt-form-video-export-pixel_format-${identifier}-label">;
+interface VideoExport {
+    start: number & Default<0> & Minimum<0>;
+
+    end: number & Default<0> & Minimum<0>;
+
+    codec: ICodecNames;
+
+    crf: number & Minimum<0>;
+
+    pixel_format: IPixelFormatNames;
 }
 
 export const EXTENSION_EXPORT = define_extension({
@@ -97,14 +72,13 @@ export const EXTENSION_EXPORT = define_extension({
 
         const {maxframes} = get(configuration);
 
-        let result: IFramesExportConfiguration;
+        let result: FramesExport;
         try {
             result = (
-                await prompts.prompt_form<IFramesExportConfiguration>({
+                await prompts.prompt_form<FramesExport>({
                     is_dismissible: true,
-                    title: "ui-prompt-form-frames-export-title",
 
-                    type: typeOf<IFramesExportConfiguration>(),
+                    type: typeOf<FramesExport>(),
                     model: {
                         // TODO: Make prompt configuration dynamic to support this as runtime validation
                         end: maxframes as number,
@@ -172,14 +146,13 @@ export const EXTENSION_EXPORT = define_extension({
             default_codec
         );
 
-        let result: IVideoExportConfiguration;
+        let result: VideoExport;
         try {
             result = (
-                await prompts.prompt_form<IVideoExportConfiguration>({
+                await prompts.prompt_form<VideoExport>({
                     is_dismissible: true,
-                    title: "ui-prompt-form-video-export-title",
 
-                    type: typeOf<IVideoExportConfiguration>(),
+                    type: typeOf<VideoExport>(),
                     model: {
                         // TODO: Make prompt configuration dynamic to support this as runtime validation
                         end: maxframes as number,

packages/@svelte-in-motion-builtin-extensions/src/extensions/workspace.ts

@@ -3,21 +3,16 @@ import {get} from "svelte/store";
 import {WorkspacesItemConfiguration} from "@svelte-in-motion/configuration";
 import type {IAppContext, IKeybindEvent, ISearchPromptEvent} from "@svelte-in-motion/extension";
 import {define_extension} from "@svelte-in-motion/extension";
-import {Default, Description, Label, MinLength, Pattern} from "@svelte-in-motion/type";
+import {Default, MinLength, Pattern} from "@svelte-in-motion/type";
 import {typeOf} from "@svelte-in-motion/type";
 import {PromptDismissError} from "@svelte-in-motion/utilities";
 
 import {NoWorkspaceUserError} from "../util/errors";
 
 const EXPRESSION_NAME = /^[\w ]+$/;
 
-interface IWorkspaceNewConfiguration {
-    name: string &
-        Default<""> &
-        MinLength<0> &
-        Pattern<typeof EXPRESSION_NAME> &
-        Label<"ui-prompt-form-workspace-new-name-label"> &
-        Description<"ui-prompt-form-workspace-new-name-description">;
+interface WorkspaceNew {
+    name: string & Default<""> & MinLength<0> & Pattern<typeof EXPRESSION_NAME>;
 }
 
 async function render_template(
@@ -105,14 +100,13 @@ export const EXTENSION_WORKSPACE = define_extension({
     async command_prompt_new(app: IAppContext) {
         const {prompts} = app;
 
-        let result: IWorkspaceNewConfiguration;
+        let result: WorkspaceNew;
         try {
             result = (
-                await prompts.prompt_form<IWorkspaceNewConfiguration>({
+                await prompts.prompt_form<WorkspaceNew>({
                     is_dismissible: true,
-                    title: "ui-prompt-form-workspace-new-title",
 
-                    type: typeOf<IWorkspaceNewConfiguration>(),
+                    type: typeOf<WorkspaceNew>(),
                 })
             ).model;
         } catch (err) {
@@ -170,14 +164,13 @@ export const EXTENSION_WORKSPACE = define_extension({
             throw err;
         }
 
-        let form_result: IWorkspaceNewConfiguration;
+        let form_result: WorkspaceNew;
         try {
             form_result = (
-                await prompts.prompt_form<IWorkspaceNewConfiguration>({
+                await prompts.prompt_form<WorkspaceNew>({
                     is_dismissible: true,
-                    title: "ui-prompt-form-workspace-new-title",
 
-                    type: typeOf<IWorkspaceNewConfiguration>(),
+                    type: typeOf<WorkspaceNew>(),
                 })
             ).model;
         } catch (err) {
@@ -193,7 +186,6 @@ export const EXTENSION_WORKSPACE = define_extension({
                 tokens = (
                     await prompts.prompt_form<any>({
                         is_dismissible: true,
-                        title: `templates-${template.identifier}-label`,
 
                         type: template.type,
                     })

packages/@svelte-in-motion-editor/public/assets/translations/en-US.ftl

@@ -40,54 +40,57 @@ commands-workspace-prompt-open_recent-label = Workspaces: Open Recent
 templates-welcome-label = Welcome to Svelte-In-Motion
 templates-welcome-description = Simple welcome message template to introduce syntax and concepts.
 
-errors-no_editor_user_error-label= Error
+errors-no_editor_user_error-label = Error
 errors-no_editor_user_error-description = No File is currently loaded.
-errors-no_preview_user_error-label= Error
+errors-no_preview_user_error-label = Error
 errors-no_preview_user_error-description = No Preview is currently loaded.
-errors-no_workspace_user_error-label= Error
+errors-no_workspace_user_error-label = Error
 errors-no_workspace_user_error-description = No Workspace is currently loaded.
 
-ui-view-dashboard-brand-label = Svelte-In-Motion
-ui-view-dashboard-start-label = Start
-ui-view-dashboard-new_workspace-label = New Workspace
-ui-view-dashboard-new_workspace_from_template-label = New Workspace from Template
-ui-view-dashboard-open_recent_workspace-label = Open Recent Workspace
-ui-view-dashboard-recent-label = Recent
-ui-view-dashboard-more-label = ...More
+prompts-about-label = About Svelte-In-Motion
+prompts-about-version-label = VERSION
+prompts-about-source-label = SOURCE
+prompts-about-dismiss-label = Dismiss
 
-ui-prompt-about-title = About Svelte-In-Motion
-ui-prompt-about-version-label = VERSION
-ui-prompt-about-source-label = SOURCE
-ui-prompt-about-dismiss-label = Dismiss
+prompts-alert-dismiss-label = Dismiss
 
-ui-prompt-alert-dismiss-label = Dismiss
+prompts-confirm-dismiss-label = Cancel
+prompts-confirm-submit-label = Yes
 
-ui-prompt-confirm-dismiss-label = Cancel
-ui-prompt-confirm-submit-label = Yes
+prompts-frames_export-label = Export Frames
+prompts-frames_export-start-label = Starting Frame
+prompts-frames_export-start-description = Enter the first frame you want to export.
+prompts-frames_export-end-label = Ending Frame
+prompts-frames_export-end-description = Enter the last frame you want to export.
+prompts-frames_export-dismiss-label = Dismiss
+prompts-frames_export-submit-label = Export
 
-ui-prompt-form-dismiss-label = Dismiss
-ui-prompt-form-submit-label = Submit
+prompts-video_export-label = Export Video
+prompts-video_export-start-label = Starting Frame
+prompts-video_export-start-description = Enter the first frame you want to export.
+prompts-video_export-end-label = Ending Frame
+prompts-video_export-end-description = Enter the last frame you want to export.
+prompts-video_export-codec-label = Codec
+prompts-video_export-codec-placeholder = Select the video encoding.
+prompts-video_export-codec-vp9-label = vp9 (.webm)
+prompts-video_export-crf-label = CRF
+prompts-video_export-crf-description = Enter constant rate factor you want to encode as.
+prompts-video_export-pixel_format-label = Pixel Format
+prompts-video_export-pixel_format-placeholder = Select the encoded pixel format.
+prompts-video_export-pixel_format-yuv420p-label = yuv420p
+prompts-video_export-dismiss-label = Dismiss
+prompts-video_export-submit-label = Export
 
-ui-prompt-form-frames-export-title = Export Frames
-ui-prompt-form-frames-export-start-label = Starting Frame
-ui-prompt-form-frames-export-start-description = Enter the first frame you want to export. 
-ui-prompt-form-frames-export-end-label = Ending Frame
-ui-prompt-form-frames-export-end-description = Enter the last frame you want to export. 
+prompts-workspace_new-label = New Workspace
+prompts-workspace_new-name-label = Name
+prompts-workspace_new-name-description = Enter an alphanumeric name for the Workspace.
+prompts-workspace_new-dismiss-label = Dismiss
+prompts-workspace_new-submit-label = Create Workspace
 
-ui-prompt-form-video-export-title = Export Video
-ui-prompt-form-video-export-start-label = Starting Frame
-ui-prompt-form-video-export-start-description = Enter the first frame you want to export. 
-ui-prompt-form-video-export-end-label = Ending Frame
-ui-prompt-form-video-export-end-description = Enter the last frame you want to export. 
-ui-prompt-form-video-export-codec-label = Codec
-ui-prompt-form-video-export-codec-placeholder = Select the video encoding.
-ui-prompt-form-video-export-codec-vp9-label = vp9 (.webm)
-ui-prompt-form-video-export-crf-label = CRF
-ui-prompt-form-video-export-crf-description = Enter constant rate factor you want to encode as.
-ui-prompt-form-video-export-pixel_format-label = Pixel Format
-ui-prompt-form-video-export-pixel_format-placeholder = Select the encoded pixel format.
-ui-prompt-form-video-export-pixel_format-yuv420p-label = yuv420p
-
-ui-prompt-form-workspace-new-title = New Workspace
-ui-prompt-form-workspace-new-name-label = Name
-ui-prompt-form-workspace-new-name-description = Enter an alphanumeric name for the Workspace.
+view-dashboard-brand-label = Svelte-In-Motion
+view-dashboard-start-label = Start
+view-dashboard-new_workspace-label = New Workspace
+view-dashboard-new_workspace_from_template-label = New Workspace from Template
+view-dashboard-open_recent_workspace-label = Open Recent Workspace
+view-dashboard-recent-label = Recent
+view-dashboard-more-label = ...More

packages/@svelte-in-motion-editor/src/components/form/FormBoolean.svelte

@@ -2,32 +2,36 @@
     import {Form, Spacer, Stack, Switch} from "@kahi-ui/framework";
 
     import type {TypeBoolean, TypePropertySignature} from "@svelte-in-motion/type";
-    import {metaAnnotation, resolveMetaLiteral} from "@svelte-in-motion/type";
+    import {format_dash_case, format_snake_case} from "@svelte-in-motion/utilities";
 
     import {CONTEXT_APP} from "../../lib/app";
 
     const {translations} = CONTEXT_APP.get()!;
 
-    export let identifier: string;
     export let type: TypeBoolean;
     export let signature: TypePropertySignature;
     export let value: boolean = false;
 
-    $: meta = metaAnnotation.getAnnotations(type);
+    $: form_identifier = `prompts-${format_dash_case(
+        signature.parent.typeName!
+    )}-${format_dash_case(signature.name.toString())}`;
+    $: translation_identifier = `prompts-${format_snake_case(
+        signature.parent.typeName!
+    )}-${format_snake_case(signature.name.toString())}`;
 
-    $: description = resolveMetaLiteral<string>(meta, "description");
-    $: label = resolveMetaLiteral<string>(meta, "label");
+    $: description = `${translation_identifier}-description`;
+    $: label = `${translation_identifier}-label`;
 </script>
 
-<Form.Group logic_id={identifier}>
+<Form.Group logic_id={form_identifier}>
     <Stack.Container orientation="horizontal" alignment_y="center" spacing="small">
         {#if description || label}
             <Stack.Container spacing="tiny">
-                {#if label}
+                {#if $translations.has(label)}
                     <Form.Label>{$translations.format(label)}</Form.Label>
                 {/if}
 
-                {#if description}
+                {#if $translations.has(description)}
                     <Form.HelpText>
                         {$translations.format(description)}
                     </Form.HelpText>

packages/@svelte-in-motion-editor/src/components/form/FormNumber.svelte

@@ -3,23 +3,31 @@
 
     import type {TypeNumber, TypePropertySignature} from "@svelte-in-motion/type";
     import {
-        metaAnnotation,
-        resolveMetaLiteral,
         resolveValidationLiteral,
         validationAnnotation,
         validates,
     } from "@svelte-in-motion/type";
+    import {format_dash_case, format_snake_case} from "@svelte-in-motion/utilities";
 
     import {CONTEXT_APP} from "../../lib/app";
 
     const {translations} = CONTEXT_APP.get()!;
 
-    export let identifier: string;
     export let type: TypeNumber;
     export let signature: TypePropertySignature;
     export let value: number = 0;
 
-    $: meta = metaAnnotation.getAnnotations(type);
+    $: form_identifier = `prompts-${format_dash_case(
+        signature.parent.typeName!
+    )}-${format_dash_case(signature.name.toString())}`;
+    $: translation_identifier = `prompts-${format_snake_case(
+        signature.parent.typeName!
+    )}-${format_snake_case(signature.name.toString())}`;
+
+    $: description = `${translation_identifier}-description`;
+    $: label = `${translation_identifier}-label`;
+    $: placeholder = `${translation_identifier}-placeholder`;
+
     $: validations = validationAnnotation.getAnnotations(type);
 
     $: max = resolveValidationLiteral<number>(validations, "maximum");
@@ -28,30 +36,26 @@
     $: required = !signature.optional;
     $: readonly = signature.readonly;
 
-    $: description = resolveMetaLiteral<string>(meta, "description");
-    $: label = resolveMetaLiteral<string>(meta, "label");
-    $: placeholder = resolveMetaLiteral<string>(meta, "placeholder");
-
     $: is_valid = validates(value, type);
 </script>
 
-<Form.Control logic_id={identifier}>
-    {#if label}
+<Form.Control logic_id={form_identifier}>
+    {#if $translations.has(label)}
         <Form.Label>{$translations.format(label)}</Form.Label>
     {/if}
 
     <NumberInput
         sizing="nano"
         palette={is_valid ? "affirmative" : "negative"}
-        placeholder={placeholder ? $translations.format(placeholder) : undefined}
+        placeholder={$translations.has(placeholder) ? $translations.format(placeholder) : undefined}
         bind:value
         {max}
         {min}
         {readonly}
         {required}
     />
 
-    {#if description}
+    {#if $translations.has(description)}
         <Form.HelpText>
             {$translations.format(description)}
         </Form.HelpText>