<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Bin Sun</title>
    <description>The latest articles on DEV Community by Bin Sun (@sunbin365ryb).</description>
    <link>https://dev.to/sunbin365ryb</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4117062%2F4e26a1f0-98a0-4e7f-b966-5b1cafb8b582.jpg</url>
      <title>DEV Community: Bin Sun</title>
      <link>https://dev.to/sunbin365ryb</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sunbin365ryb"/>
    <language>en</language>
    <item>
      <title>Keep workflow enums out of your database module</title>
      <dc:creator>Bin Sun</dc:creator>
      <pubDate>Wed, 09 Sep 2026 17:12:53 +0000</pubDate>
      <link>https://dev.to/sunbin365ryb/keep-workflow-enums-out-of-your-database-module-2a11</link>
      <guid>https://dev.to/sunbin365ryb/keep-workflow-enums-out-of-your-database-module-2a11</guid>
      <description>&lt;p&gt;A workflow status looks harmless in a React component. It is just a string such as &lt;code&gt;in_review&lt;/code&gt;. The module that exports that string, however, can determine whether server dependencies become reachable from a client component.&lt;/p&gt;

&lt;p&gt;SongHQ, a workspace for custom-song production, has two related but different lifecycles: an order moves through a seller's workflow, while each generation job has its own processing status. Its shared domain file keeps those enums in a module with no imports. Database model modules re-export the enums for server consumers.&lt;/p&gt;

&lt;p&gt;This is a small separation that is useful well beyond music software.&lt;/p&gt;

&lt;h2&gt;
  
  
  Separate business progress from job progress
&lt;/h2&gt;

&lt;p&gt;An order awaiting delivery is different from a generation that has completed. A song can be generated successfully while the seller is still reviewing it. A failed cover-generation attempt should not erase the order's business stage.&lt;/p&gt;

&lt;p&gt;These are separate concepts in the domain:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;enum&lt;/span&gt; &lt;span class="nx"&gt;SongOrderStatus&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;AWAITING_INFO&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;awaiting_info&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;AWAITING_GENERATION&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;awaiting_generation&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;IN_REVIEW&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;in_review&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;AWAITING_DELIVERY&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;awaiting_delivery&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;COMPLETED&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;completed&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;enum&lt;/span&gt; &lt;span class="nx"&gt;GenerationStatus&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;PENDING&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pending&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;PROCESSING&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;processing&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;COMPLETED&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;completed&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;FAILED&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;failed&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Do not make the UI infer one lifecycle from the other. If the screen needs both, return both in its data contract. This also makes labels less ambiguous: “generation completed” does not automatically mean “customer order delivered.”&lt;/p&gt;

&lt;h2&gt;
  
  
  Give runtime constants a dependency-free home
&lt;/h2&gt;

&lt;p&gt;A common starting point puts the enum next to the model queries:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// models/order.ts — illustrative example&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./database&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;enum&lt;/span&gt; &lt;span class="nx"&gt;OrderStatus&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;IN_REVIEW&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;in_review&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;findOrder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Query the database here.&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now a client component importing &lt;code&gt;OrderStatus&lt;/code&gt; points at a module that also imports the database layer. Whether a build rejects this or eliminates unused code depends on the dependency graph and tooling. The architecture should not rely on that elimination working.&lt;/p&gt;

&lt;p&gt;Move runtime constants into a leaf module instead:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// domain/order-status.ts — no imports&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;enum&lt;/span&gt; &lt;span class="nx"&gt;OrderStatus&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;IN_REVIEW&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;in_review&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// models/order.ts — server consumers can keep this path&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;OrderStatus&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../domain/order-status&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// OrderBadge.tsx — client code uses the leaf directly&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;OrderStatus&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../domain/order-status&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Re-exporting preserves a convenient server API. Client code must still import the dependency-free module directly; importing the server model's re-export would recreate the same dependency path.&lt;/p&gt;

&lt;h2&gt;
  
  
  Remember that an enum is a runtime value
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;import type&lt;/code&gt; is useful for types that disappear during compilation. It is not a replacement when the component executes an expression such as &lt;code&gt;OrderStatus.IN_REVIEW&lt;/code&gt;: that expression needs a runtime value.&lt;/p&gt;

&lt;p&gt;A string union plus a constant object is another valid design. The important boundary is where the runtime values live and what that module imports, not a preference for one TypeScript syntax.&lt;/p&gt;

&lt;h2&gt;
  
  
  A quick review checklist
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Can the shared status module be imported without bringing in a database driver, environment configuration, or server SDK?&lt;/li&gt;
&lt;li&gt;Do client components import that module directly?&lt;/li&gt;
&lt;li&gt;Are order progress and background-job progress represented separately?&lt;/li&gt;
&lt;li&gt;Are state transitions validated on the server? Sharing enum values does not authorize a client-requested transition.&lt;/li&gt;
&lt;li&gt;Does the normal application build still pass after moving the imports?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This pattern is visible in &lt;a href="https://songhq.app" rel="noopener noreferrer"&gt;SongHQ&lt;/a&gt;, where the shared song-domain enums are kept separate from query modules. It is useful whenever a product has both human workflow stages and asynchronous processing: document review, media production, exports, or approval queues.&lt;/p&gt;

&lt;p&gt;The snippets describing &lt;code&gt;OrderStatus&lt;/code&gt; and &lt;code&gt;findOrder&lt;/code&gt; are simplified examples; they are not complete database or authorization implementations.&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>react</category>
    </item>
  </channel>
</rss>
